feat(search): refresh ui (#1469)

Signed-off-by: jacknan <[email protected]>
opentiny · Mar 7, 2024 · 2adc0d1 · 2adc0d1
1 parent 5813c77
commit 2adc0d1
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 42 deletions.
diff --git a/examples/sites/demos/mobile/app/search/base.vue b/examples/sites/demos/mobile/app/search/base.vue
@@ -5,7 +5,7 @@
       <div>搜索栏</div>
     </div>
     <div class="title">primary</div>
-    <tiny-search v-model="value" @search="handleSearch"></tiny-search>
+    <tiny-search v-model="value" placeholder="搜索placeholder" @search="handleSearch"></tiny-search>
     <div :class="[{ 'is-show': value }, 'searchbar-result']">
       {{ value }}
     </div>
@@ -59,7 +59,7 @@ export default {
 <style scoped>
 .mobile-search-demo {
   height: 100%;
-  background: #f4f4f4;
+  background: #fff;
 }
 .mobile-search-demo .title-demo {
   padding: 40px;

diff --git a/packages/theme-mobile/src/search/index.less b/packages/theme-mobile/src/search/index.less
@@ -30,12 +30,12 @@
     flex: auto;
     height: var(--ti-mobile-search-input-height);
     margin-left: 16px;
-    border-radius: var(--ti-mobile-search-input-border-radius);
+    border-radius: var(--ti-mobile-search-input-height);
     overflow: hidden;
     box-sizing: border-box;
     background: transparent;
 
-    &::after {
+    &:after {
       content: '';
       width: 200%;
       height: 200%;
@@ -83,6 +83,7 @@
       color: var(--ti-mobile-search-text-color-primary);
       caret-color: var(--ti-mobile-search-caret-color-primary);
       .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-primary));
+
       &:focus {
         .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-primary));
       }
@@ -92,6 +93,7 @@
       color: var(--ti-mobile-search-text-color-gray);
       caret-color: var(--ti-mobile-search-caret-color-gray);
       .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-gray));
+
       &:focus {
         .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-gray));
       }
@@ -100,49 +102,44 @@
 
   &-primary {
     background-color: var(--ti-mobile-search-bg-color-primary);
+    .@{css-prefix}svg {
+      fill: var(--ti-mobile-search-icon-fill-color-primary);
+    }
   }
 
   &-gray {
+    color: var(--ti-mobile-search-text-color-gray);
     background-color: var(--ti-mobile-search-bg-color-gray);
+    .@{css-prefix}svg {
+      fill: var(--ti-mobile-search-icon-fill-color-gray);
+    }
   }
 
   & &__icon {
     text-decoration: none;
     display: flex;
 
     .@{css-prefix}svg {
-      fill: var(--ti-mobile-search-placeholder-text-color-primary);
+      fill: var(--ti-mobile-search-icon-fill-color-primary);
     }
   }
 
   &-gray &__icon {
     .@{css-prefix}svg {
-      fill: var(--ti-mobile-search-placeholder-text-color-gray);
+      fill: var(--ti-mobile-search-icon-fill-color-gray);
     }
   }
 
   & &__close-icon {
     position: absolute;
-    right: 0;
+    right: 5px;
     padding: 0 8px;
     cursor: pointer;
     display: inline-flex;
     top: 50%;
     transform: translateY(-50%);
   }
 
-  &-primary {
-    .@{css-prefix}svg {
-      fill: var(--ti-mobile-search-icon-fill-color-primary);
-    }
-  }
-
-  &-gray {
-    .@{css-prefix}svg {
-      fill: var(--ti-mobile-search-icon-fill-color-gray);
-    }
-  }
-
   &__right {
     display: flex;
     align-items: center;
@@ -152,10 +149,6 @@
     color: var(--ti-mobile-search-text-color-primary);
   }
 
-  &-gray {
-    color: var(--ti-mobile-search-text-color-gray);
-  }
-
   & &__present {
     color: var(--ti-mobile-search-text-color-primary);
     font-size: var(--ti-mobile-search-font-size);

diff --git a/packages/theme-mobile/src/search/vars.less b/packages/theme-mobile/src/search/vars.less
@@ -1,18 +1,32 @@
 :root {
-  --ti-mobile-search-height: 44px;
-  --ti-mobile-search-input-height: 32px;
-  --ti-mobile-search-input-border-radius: 32px;
-  --ti-mobile-search-input-bg-color-gray: var(--ti-mobile-common-bg-color-dark-gray, #f5f5f5);
-  --ti-mobile-search-input-bg-color-primary: rgba(255, 255, 255, 0.15);
-  --ti-mobile-search-font-size: 14px;
-  --ti-mobile-search-text-color-gray: var(--ti-mobile-common-color-text-primary, #191919);
-  --ti-mobile-search-text-color-primary: var(--ti-mobile-common-color-text-white, #fff);
-  --ti-mobile-search-icon-fill-color-gray: #dbdbdb;
-  --ti-mobile-search-icon-fill-color-primary: #fff;
-  --ti-mobile-search-caret-color-primary: var(--ti-mobile-common-color-line-white, #fff);
-  --ti-mobile-search-caret-color-gray: var(--ti-mobile-common-color-line-hightlight, #4a79fe);
-  --ti-mobile-search-bg-color-primary: var(--ti-mobile-common-bg-color-blue-1, #3168f1);
-  --ti-mobile-search-bg-color-gray: var(--ti-mobile-common-bg-color-white, #fff);
-  --ti-mobile-search-placeholder-text-color-primary: var(--ti-mobile-common-color-text-placeholder-primary, #dbe5fc);
-  --ti-mobile-search-placeholder-text-color-gray: var(--ti-mobile-common-color-text-placeholder-gray, #acacac);
+  // 搜索框高度
+  --ti-mobile-search-height: 56px;
+  // 输入框高度
+  --ti-mobile-search-input-height: 40px;
+  // 输入文字尺寸
+  --ti-mobile-search-font-size: var(--ti-mobile-font-size-l, 16px);
+  // 灰色主题输入框背景色
+  --ti-mobile-search-input-bg-color-gray: var(--ti-mobile-color-bg-default, #f5f5f5);
+  // 常规主题输入框背景色
+  --ti-mobile-search-input-bg-color-primary: var(--ti-mobile-color-bg-container-1, #fff);
+  // 灰色主题文字颜色
+  --ti-mobile-search-text-color-gray: var(--ti-mobile-color-text-primary, #191919);
+  // 常规主题文字颜色
+  --ti-mobile-search-text-color-primary: var(--ti-mobile-color-text-primary, #191919);
+  // 灰色主题搜索图标填充色
+  --ti-mobile-search-icon-fill-color-gray: var(--ti-mobile-color-icon-default, #808080);
+  // 常规主题搜索图标填充色
+  --ti-mobile-search-icon-fill-color-primary: var(--ti-mobile-color-icon-default, #808080);
+  // 常规主题搜索图标填充色
+  --ti-mobile-search-caret-color-primary: var(--ti-mobile-color-text-primary, #191919);
+  // 灰色主题搜索图标填充色
+  --ti-mobile-search-caret-color-gray: var(--ti-mobile-color-text-primary, #191919);
+  // 常规主题背景色
+  --ti-mobile-search-bg-color-primary: var(--ti-mobile-color-bg-default, #f5f5f5);
+  // 灰色主题背景色
+  --ti-mobile-search-bg-color-gray: var(--ti-mobile-color-bg-container-1, #fff);
+  // 常规主题占位文字颜色
+  --ti-mobile-search-placeholder-text-color-primary: var(--ti-mobile-color-text-placeholder, #808080);
+  // 灰色主题占位文字颜色
+  --ti-mobile-search-placeholder-text-color-gray: var(--ti-mobile-color-text-placeholder, #808080);
 }
diff --git a/packages/vue/src/search/src/mobile.vue b/packages/vue/src/search/src/mobile.vue
@@ -47,7 +47,7 @@
           @select.stop
         />
         <span class="tiny-mobile-search__close-icon" v-show="state.currentValue">
-          <icon-operationfaild @click="clear" />
+          <icon-close @click="clear" />
         </span>
       </div>
       <label class="tiny-mobile-search__label">
@@ -67,7 +67,7 @@
 <script lang="tsx">
 import { renderless, api } from '@opentiny/vue-renderless/search/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
-import { iconSearch, iconOperationfaild } from '@opentiny/vue-icon'
+import { iconSearch, iconClose } from '@opentiny/vue-icon'
 import '@opentiny/vue-theme-mobile/search/index.less'
 import type { ISearchApi } from '@opentiny/vue-renderless/types/search.type'
 
@@ -84,7 +84,7 @@ export default defineComponent({
   ],
   components: {
     IconSearch: iconSearch(),
-    IconOperationfaild: iconOperationfaild()
+    IconClose: iconClose()
   },
   emits: ['change', 'search', 'update:modelValue', 'clear', 'select', 'input'],
   setup(props, context) {