fix: searchbar 组件样式兼容 (jdf2e#333)

Author: Ymm0008

src/packages/searchbar/searchbar.scss

@@ -51,13 +51,19 @@
     right: 5px;
     top: 53%;
   }
-  &__input {
-    box-sizing: border-box;
+  .nut-searchbar__input-box {
     display: flex;
     align-items: center;
+    flex: 1;
+  }
+  &__input {
+    border: 0;
+    outline: 0;
+    box-sizing: border-box;
+
     width: $searchbar-input-width;
     height: $searchbar-input-height;
-    flex: 1;
+    width: 100%;
     padding: $searchbar-input-padding;
     border-radius: 0;
     font-size: $font-size-small;
@@ -105,3 +111,14 @@
     margin-left: 10px;
   }
 }
+.nut-searchbar-taro {
+  .nut-searchbar__leftin-icon {
+    top: 41%;
+  }
+  .nut-searchbar__rightin-icon {
+    top: 41%;
+  }
+  .nut-searchbar__clear {
+    top: 33%;
+  }
+}

src/packages/searchbar/searchbar.taro.tsx

@@ -3,6 +3,7 @@ import bem from '@/utils/bem'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import Icon from '@/packages/icon/index.taro'
 import { IComponent, ComponentDefaults } from '@/utils/typings'
+import Taro from '@tarojs/taro'
 
 type TIconDirection = 'in-left' | 'out-left' | 'in-right' | 'out-right'
 
@@ -297,9 +298,14 @@ export const SearchBar: FunctionComponent<
     }
     return null
   }
+
+  const envClass = () => {
+    return Taro.getEnv() === 'WEB' ? 'nut-searchbar-taro' : ''
+  }
+
   return (
     <div
-      className={`${searchbarBem()} ${
+      className={`${searchbarBem()} ${envClass()} ${
         disabled ? searchbarBem('disabled') : ''
       }  ${className || ''}`}
       style={{ ...props.style, background: props.background }}
@@ -308,7 +314,7 @@ export const SearchBar: FunctionComponent<
       {renderLabel()}
       <div className={`${searchbarBem('content')}`}>
         {renderLeftinIcon()}
-        {renderField()}
+        <div className="nut-searchbar__input-box">{renderField()}</div>
         {renderRightinIcon()}
         {clearable && value && handleClear()}
       </div>

src/sites/mobile/project.config.json

@@ -0,0 +1,28 @@
+{
+  "appid": "wx6b455a756cd0a489",
+  "compileType": "miniprogram",
+  "libVersion": "2.27.0",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

src/sites/mobile/project.private.config.json

@@ -0,0 +1,7 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "mobile",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}