feat: 增加搜索配置

src/base/FacilityItem/FacilityItem.vue

@@ -38,6 +38,6 @@ function handleFacility() {
   font-size: 12px;
   line-height: 14px;
   text-align: center;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--search-facNameColor, rgba(0, 0, 0, 0.6));
 }
 </style>

src/components/KeyboardByLetter/KeyboardByLetter.vue

@@ -14,9 +14,12 @@
 <script setup>
 import { ref } from 'vue'
 import { letter } from '../Search/tabs'
-
+import { storeToRefs } from 'pinia'
+import { useStore } from '@/store/root'
+const store = useStore()
+const { theme } = storeToRefs(store)
 function generateInnerHTML(item) {
-  return item === 'del' ? `<img src="${require('@/assets/images/search/del.svg')}" alt="">` : item
+  return item === 'del' ? `<img style="width:24px;height:24px" src="${theme.value.images.delete}" alt="">` : item
 }
 
 const emits = defineEmits(['del', 'handle-letter'])
@@ -52,13 +55,13 @@ function handleLetter(item, index) {
     height: 48px;
     text-align: center;
     line-height: 48px;
-    background: #ffffff;
+    background: var(--search-keyBg, #ffffff);
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03), inset 0px -1px 0px rgba(177, 189, 220, 0.1);
     border-radius: var(--global-radius, 8px);
     font-weight: 700;
     font-size: 18px;
     font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--search-keyColor, rgba(0, 0, 0, 0.6));
     margin-right: 8px;
     margin-bottom: 8px;
     &:nth-child(21) {
@@ -69,6 +72,10 @@ function handleLetter(item, index) {
     }
     &.del {
       width: 104px;
+      img {
+        width: 24px;
+        height: 24px;
+      }
     }
     &.active {
       background: var(--search-keyboardActiveBg);

src/components/KeyboardByWritten/KeyboardByWritten.vue

@@ -9,13 +9,13 @@
       @result="getWordList"
       :width="552"
       :height="196"
-      background-color="#ffffff"
+      background-color="transparent"
       fill-font-size="48px"
       fill-style="rgba(0, 0, 0, 0.02)"
       :stroke-style="theme.search.writeColor"
     />
     <div class="del" @click="del">
-      <img src="../../assets/images/search/del.svg" class="del-icon" alt="" />
+      <img :src="theme.images.delete" class="del-icon" alt="" />
     </div>
   </div>
 </template>
@@ -57,14 +57,14 @@ function del() {
   position: relative;
   width: 552px;
   height: 252px;
-  background: #ffffff;
+  background: var(--search-keyBg, #ffffff);
   border-radius: var(--global-radius, 12px);
   margin-top: 16px;
   overflow: hidden;
   .word-scroll {
     position: relative;
     height: 56px;
-    background: #ffffff;
+    background: var(--search-keyBg, #ffffff);
     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.04);
     .word-content {
       display: inline-block;
@@ -79,7 +79,7 @@ function del() {
       font-weight: 700;
       font-size: 18px;
       font-family: 'font_bold';
-      color: rgba(0, 0, 0, 0.6);
+      color: var(--search-keyColor, rgba(0, 0, 0, 0.6));
       &.active {
         color: #fff;
         background: var(--search-keyboardActiveBg);
@@ -98,6 +98,10 @@ function del() {
     background: rgba(0, 0, 0, 0.05);
     box-shadow: inset 0px -1px 0px rgba(177, 189, 220, 0.1);
     border-radius: var(--global-radius, 8px);
+    img {
+      width: 24px;
+      height: 24px;
+    }
   }
 }
 </style>

src/components/PublicComponent/PublicComponent.vue

@@ -76,7 +76,7 @@ onMounted(() => {
     send(`type:online`)
   }, 30000)
 
-  store.SET_CURRENT_THEME('dark')
+  store.SET_CURRENT_THEME('main')
   // let i = 0
   // setInterval(() => {
   //   i++

src/components/Search/Search.vue

@@ -16,7 +16,12 @@
           </div>
         </div>
         <div class="keyboard-wrapper">
-          <Tabs @click="handleTab" :list="list" class="tabs" />
+          <div class="tabs tabs-wrapper">
+            <div class="tab" :class="{ active: tabIdx === index }" @click="handleTab(index)" v-for="(item, index) of list" :key="item.name">
+              <img :src="tabIdx === index ? item.iconActive : item.icon" alt="" />
+              {{ item.name }}
+            </div>
+          </div>
           <KeyboardByLetter @del="del" @handle-letter="handleLetter" v-if="tabIdx === 0" />
           <KeyboardByWritten @del="del" @handle-word="handleLetter" v-else />
         </div>
@@ -47,7 +52,7 @@ import { computed, defineAsyncComponent, ref, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
-import { list } from './tabs'
+
 import { useSearchShop } from '@/composables/useSearchShop'
 import { useFacilityNav } from '@/composables/useFacilityNav'
 import { useStatistics } from '@/composables/useStatistics'
@@ -55,6 +60,7 @@ import Dialog from '@/layouts/Dialog.vue'
 import FacilityItem from '@/base/FacilityItem/FacilityItem.vue'
 import Tabs from '@/components/Tabs/Tabs.vue'
 import SearchResultList from '@/components/SearchResultList/SearchResultList.vue'
+
 const KeyboardByLetter = defineAsyncComponent(() => import('@/components/KeyboardByLetter/KeyboardByLetter.vue'))
 const KeyboardByWritten = defineAsyncComponent(() => import('@/components/KeyboardByWritten/KeyboardByWritten.vue'))
 const Voice = defineAsyncComponent(() => import('@/components/Voice/Voice.vue'))
@@ -68,6 +74,25 @@ const router = useRouter()
 const store = useStore()
 const { indexList, shopList, facilityList, config, showVoice, theme } = storeToRefs(store)
 
+const list = computed(() =>
+  theme.value
+    ? [
+        {
+          name: '键盘输入',
+          nameEn: 'keyboard input',
+          icon: theme.value.images.keyboard,
+          iconActive: theme.value.images.keyboard_active
+        },
+        {
+          name: '手写输入',
+          nameEn: 'handwriting input',
+          icon: theme.value.images.write,
+          iconActive: theme.value.images.write_active
+        }
+      ]
+    : []
+)
+
 const hotRecommend = computed(() => indexList.value.hotSearch ?? [])
 const showClassify = ref(false)
 
@@ -192,16 +217,10 @@ onBeforeUnmount(() => {
   border-radius: var(--searchBar-borderRadius);
   z-index: 2;
   overflow: hidden;
-  .title {
-    font-weight: 900;
-    font-size: 24px;
-    line-height: 28px;
-    color: rgba(0, 0, 0, 0.8);
-  }
 
   .top {
     height: 460px;
-    background: rgba(255, 255, 255, 0.6);
+    background: var(--search-topBg, rgba(255, 255, 255, 0.6));
     border-radius: var(--searchBar-borderRadius);
     margin: 10px 10px 48px 10px;
     display: flex;
@@ -209,6 +228,12 @@ onBeforeUnmount(() => {
     padding-left: 46px;
     overflow: hidden;
     .facs {
+      .title {
+        font-weight: 900;
+        font-size: 24px;
+        line-height: 28px;
+        color: var(--search-facTitleColor);
+      }
       width: 300px;
       padding-top: 111px;
       .facility-list {
@@ -219,6 +244,34 @@ onBeforeUnmount(() => {
         gap: 12px 24px;
       }
     }
+    .tabs-wrapper {
+      display: flex;
+      width: 100%;
+      height: 64px;
+      background: var(--search-tabsBg, rgba(0, 0, 0, 0.05));
+      border-radius: var(--global-radius, 12px);
+      overflow: hidden;
+
+      .tab {
+        height: 100%;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--search-tabColor, rgba(0, 0, 0, 0.6));
+        border-radius: var(--global-radius, 12px);
+        &.active {
+          background: var(--search-tabActiveBg, #ffffff);
+          color: var(--search-tabActiveColor, rgba(0, 0, 0, 0.8));
+        }
+      }
+
+      img {
+        width: 24px;
+        height: 24px;
+        margin-right: 12px;
+      }
+    }
     .keyboard-wrapper {
       flex: 1;
       padding-top: 75px;
@@ -232,6 +285,9 @@ onBeforeUnmount(() => {
   }
   .recs {
     padding-left: 56px;
+    .title {
+      color: var(--index-hotSearchTitleColor);
+    }
     .hot-scroll {
       padding-top: 16px;
       white-space: nowrap;
@@ -242,14 +298,14 @@ onBeforeUnmount(() => {
         display: inline-block;
         max-width: 170px;
         height: 52px;
-        background: rgba(255, 255, 255, 0.8);
+        background: var(--index-hotSearchBg);
         border-radius: var(--global-radius, 100px);
         .text {
           text-align: center;
           font-weight: 900;
           font-size: 16px;
           line-height: 52px;
-          color: rgba(0, 0, 0, 0.6);
+          color: var(--index-hotSearchColor);
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;

src/components/Search/tabs.js

@@ -1,18 +1,3 @@
-export const list = [
-  {
-    name: '键盘输入',
-    nameEn: 'keyboard input',
-    icon: require('@/assets/images/search/keyboard.png'),
-    iconActive: require('@/assets/images/search/keyboard_active.png')
-  },
-  {
-    name: '手写输入',
-    nameEn: 'handwriting input',
-    icon: require('@/assets/images/search/write.png'),
-    iconActive: require('@/assets/images/search/write_active.png')
-  }
-]
-
 export const letter = [
   1,
   2,

src/components/SearchResultList/SearchResultList.vue

@@ -125,12 +125,12 @@ function handleActivity(item) {
     font-weight: 900;
     font-size: 24px;
     line-height: 28px;
-    color: rgba(0, 0, 0, 0.8);
+    color: var(--search-resultTitleColor, rgba(0, 0, 0, 0.8));
     .meta {
       font-weight: 500;
       font-size: 20px;
       line-height: 23px;
-      color: rgba(0, 0, 0, 0.6);
+      color: var(--search-resultMetaColor, rgba(0, 0, 0, 0.6));
     }
   }
   :deep(.bscroll-vertical-scrollbar) {

src/components/Tabs/Tabs.vue

@@ -30,8 +30,8 @@ function handleTab(index) {
   display: flex;
   width: 100%;
   height: 64px;
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 12px;
+  background: var(--search-tabsBg, rgba(0, 0, 0, 0.05));
+  border-radius: var(--global-radius, 12px);
   overflow: hidden;
 
   .tab {
@@ -40,10 +40,11 @@ function handleTab(index) {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--search-tabColor, rgba(0, 0, 0, 0.6));
+    border-radius: var(--global-radius, 12px);
     &.active {
-      background: #ffffff;
-      color: rgba(0, 0, 0, 0.8);
+      background: var(--search-tabActiveBg, #ffffff);
+      color: var(--search-tabActiveColor, rgba(0, 0, 0, 0.8));
     }
   }
 

src/themes/business/style.json

@@ -100,7 +100,18 @@
     "barBackground": "#fff",
     "placeholderMetaColor": "rgba(81, 109, 216, 1)",
     "keyboardActiveBg": "linear-gradient(180deg, #435ACD 0%, #749CF3 100%)",
-    "writeColor": "#516DD8"
+    "writeColor": "#516DD8",
+    "topBg": "rgba(255, 255, 255, 0.6)",
+    "facTitleColor": "rgba(0, 0, 0, 0.8)",
+    "facNameColor": "rgba(0, 0, 0, 0.6)",
+    "tabsBg": "rgba(0, 0, 0, 0.05)",
+    "tabActiveBg": "#FFFFFF",
+    "tabColor": "rgba(0, 0, 0, 0.6)",
+    "tabActiveColor": "rgba(0, 0, 0, 0.8)",
+    "resultTitleColor": "rgba(0, 0, 0, 0.8)",
+    "resultMetaColor": "rgba(0, 0, 0, 0.6)",
+    "keyBg": "#FFFFFF",
+    "keyColor": "rgba(0, 0, 0, 0.8)"
   },
   "activities": {
     "btnBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)",

src/themes/dark/style.json

@@ -100,7 +100,18 @@
     "barBackground": "#fff",
     "placeholderMetaColor": "rgba(81, 109, 216, 1)",
     "keyboardActiveBg": "linear-gradient(180deg, #435ACD 0%, #749CF3 100%)",
-    "writeColor": "#516DD8"
+    "writeColor": "#516DD8",
+    "topBg": "rgba(0, 0, 0, 0.2)",
+    "facTitleColor": "#FFFFFF",
+    "facNameColor": "rgba(255, 255, 255, 0.8)",
+    "tabsBg": "rgba(0, 0, 0, 0.2)",
+    "tabActiveBg": "#FFFFFF",
+    "tabColor": "#FFFFFF",
+    "tabActiveColor": "rgba(0, 0, 0, 0.8)",
+    "resultTitleColor": "#FFFFFF",
+    "resultMetaColor": "rgba(255, 255, 255, 0.8)",
+    "keyBg": "rgba(0, 0, 0, 0.2)",
+    "keyColor": "#FFFFFF"
   },
   "activities": {
     "btnBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)",

src/themes/fashion/style.json

@@ -100,7 +100,18 @@
     "barBackground": "#FFFFFF",
     "placeholderMetaColor": "rgba(81, 109, 216, 1)",
     "keyboardActiveBg": "linear-gradient(180deg, #435ACD 0%, #749CF3 100%)",
-    "writeColor": "#516DD8"
+    "writeColor": "#516DD8",
+    "topBg": "rgba(255, 255, 255, 0.6)",
+    "facTitleColor": "rgba(0, 0, 0, 0.8)",
+    "facNameColor": "rgba(0, 0, 0, 0.6)",
+    "tabsBg": "rgba(0, 0, 0, 0.05)",
+    "tabActiveBg": "#FFFFFF",
+    "tabColor": "rgba(0, 0, 0, 0.6)",
+    "tabActiveColor": "rgba(0, 0, 0, 0.8)",
+    "resultTitleColor": "rgba(0, 0, 0, 0.8)",
+    "resultMetaColor": "rgba(0, 0, 0, 0.6)",
+    "keyBg": "#FFFFFF",
+    "keyColor": "rgba(0, 0, 0, 0.8)"
   },
   "activities": {
     "btnBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)",

src/themes/highend/style.json

@@ -100,7 +100,18 @@
     "barBackground": "#4D4441",
     "placeholderMetaColor": "rgba(211, 171, 128, 1)",
     "keyboardActiveBg": "linear-gradient(180deg, #BA9B7A 0%, #DBC2A1 100%)",
-    "writeColor": "#E4CEB1"
+    "writeColor": "#E4CEB1",
+    "topBg": "rgba(255, 255, 255, 0.6)",
+    "facTitleColor": "rgba(0, 0, 0, 0.8)",
+    "facNameColor": "rgba(0, 0, 0, 0.6)",
+    "tabsBg": "rgba(0, 0, 0, 0.05)",
+    "tabActiveBg": "#FFFFFF",
+    "tabColor": "rgba(0, 0, 0, 0.6)",
+    "tabActiveColor": "rgba(0, 0, 0, 0.8)",
+    "resultTitleColor": "rgba(0, 0, 0, 0.8)",
+    "resultMetaColor": "rgba(0, 0, 0, 0.6)",
+    "keyBg": "#FFFFFF",
+    "keyColor": "rgba(0, 0, 0, 0.8)"
   },
   "activities": {
     "btnBg": "linear-gradient(90deg, #BA9B7A 0%, #DBC2A1 100%)",

src/themes/luxury/style.json

@@ -100,7 +100,18 @@
     "barBackground": "#fff",
     "placeholderMetaColor": "rgba(211, 171, 128, 1)",
     "keyboardActiveBg": "linear-gradient(180deg, #D2A97E 0%, #EDD59E 100%)",
-    "writeColor": "#D3AB80"
+    "writeColor": "#D3AB80",
+    "topBg": "rgba(255, 255, 255, 0.6)",
+    "facTitleColor": "rgba(0, 0, 0, 0.8)",
+    "facNameColor": "rgba(0, 0, 0, 0.6)",
+    "tabsBg": "rgba(0, 0, 0, 0.05)",
+    "tabActiveBg": "#FFFFFF",
+    "tabColor": "rgba(0, 0, 0, 0.6)",
+    "tabActiveColor": "rgba(0, 0, 0, 0.8)",
+    "resultTitleColor": "rgba(0, 0, 0, 0.8)",
+    "resultMetaColor": "rgba(0, 0, 0, 0.6)",
+    "keyBg": "#FFFFFF",
+    "keyColor": "rgba(0, 0, 0, 0.8)"
   },
   "activities": {
     "btnBg": "#D3AB80",

src/themes/main/style.json

@@ -100,7 +100,18 @@
     "barBackground": "#fff",
     "placeholderMetaColor": "rgba(81, 109, 216, 1)",
     "keyboardActiveBg": "linear-gradient(180deg, #435ACD 0%, #749CF3 100%)",
-    "writeColor": "#516DD8"
+    "writeColor": "#516DD8",
+    "topBg": "rgba(255, 255, 255, 0.6)",
+    "facTitleColor": "rgba(0, 0, 0, 0.8)",
+    "facNameColor": "rgba(0, 0, 0, 0.6)",
+    "tabsBg": "rgba(0, 0, 0, 0.05)",
+    "tabActiveBg": "#FFFFFF",
+    "tabColor": "rgba(0, 0, 0, 0.6)",
+    "tabActiveColor": "rgba(0, 0, 0, 0.8)",
+    "resultTitleColor": "rgba(0, 0, 0, 0.8)",
+    "resultMetaColor": "rgba(0, 0, 0, 0.6)",
+    "keyBg": "#FFFFFF",
+    "keyColor": "rgba(0, 0, 0, 0.8)"
   },
   "activities": {
     "btnBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)",