search

src/services/pinyin.ts

@@ -459,4 +459,20 @@ export function getPinyin(chinese: string, short?: boolean) {
   return resultText;
 }
 
-export function inSearch(source: string, target?: boolean) {}
+export function inSearch(text: string, keyword: string) {
+  if (text.indexOf(keyword) >= 0) {
+    return true;
+  }
+
+  let py = getPinyin(text, true);
+  if (py.indexOf(keyword) >= 0) {
+    return true;
+  }
+
+  py = getPinyin(text);
+  if (py.indexOf(keyword) >= 0) {
+    return true;
+  }
+
+  return false;
+}

src/views/components/Graphics.vue

@@ -114,27 +114,30 @@
           </t-collapse-panel>
         </t-collapse>
         <div v-else class="t-collapse-panel__content" style="padding: 8px">
-          <div
-            class="graphic"
-            v-for="elem in subGroups"
-            :draggable="true"
-            @dragstart="dragStart($event, elem)"
-            @click.stop="dragStart($event, elem)"
-            @dblclick.stop="open(elem)"
-          >
-            <t-image
-              v-if="elem.image"
-              :src="elem.image"
-              :lazy="true"
-              fit="contain"
-            />
-            <div class="svg-box" v-else-if="elem.svg" v-html="elem.svg" />
-            <svg v-else class="l-icon" aria-hidden="true">
-              <use :xlink:href="'#' + elem.icon"></use>
-            </svg>
-            <p :title="elem.name">{{ elem.name }}</p>
-            <div class="price" v-if="elem.price > 0">￥{{ elem.price }}</div>
-          </div>
+          <template v-for="elem in subGroups">
+            <div
+              class="graphic"
+              :draggable="true"
+              v-show="elem.visible !== false"
+              @dragstart="dragStart($event, elem)"
+              @click.stop="dragStart($event, elem)"
+              @dblclick.stop="open(elem)"
+            >
+              <t-image
+                v-if="elem.image"
+                :src="elem.image"
+                :lazy="true"
+                fit="contain"
+              />
+              <div class="svg-box" v-else-if="elem.svg" v-html="elem.svg" />
+              <svg v-else class="l-icon" aria-hidden="true">
+                <use :xlink:href="'#' + elem.icon"></use>
+              </svg>
+              <p :title="elem.name">{{ elem.name }}</p>
+              <div class="price" v-if="elem.price > 0">￥{{ elem.price }}</div>
+            </div>
+          </template>
+
           <div
             v-if="!subGroups.length"
             class="gray center"
@@ -244,7 +247,7 @@ import { deepClone } from '@meta2d/core';
 import { isGif } from '@/services/utils';
 import { autoSave, delAttrs } from '@/services/common';
 import { debounce } from '@/services/debouce';
-import { getPinyin } from '@/services/pinyin';
+import { inSearch } from '@/services/pinyin';
 
 import WechatPay from './WechatPay.vue';
 
@@ -679,19 +682,6 @@ const onChangeGroupPanel = async (val: string[]) => {
   }
 };
 
-//初始化3D
-// const THREED_BASE_URL = import.meta.env.THREED_BASE_URL || '';
-// async function initMeta3d() {
-//   const { Meta3D, DracoCompression } = await import('@meta3d/src');
-//   DracoCompression.Configuration.decoder.wasmUrl =
-//     THREED_BASE_URL + '/draco/draco_wasm_wrapper_gltf.js';
-//   DracoCompression.Configuration.decoder.wasmBinaryUrl =
-//     THREED_BASE_URL + '/draco/draco_decoder_gltf.wasm';
-//   DracoCompression.Configuration.decoder.fallbackUrl =
-//     THREED_BASE_URL + '/draco/draco_decoder_gltf.js';
-//   window.Meta3D = Meta3D;
-// }
-
 const editedFolder = ref<any>(undefined);
 const onCreateFolder = () => {
   editedFolder.value = {
@@ -953,16 +943,10 @@ const onSearch = () => {
 const searchGraphics = async () => {
   switch (activedGroup.value) {
     case '场景':
-      console.log(caseCaches, search.value);
       for (const group in caseCaches) {
         for (const item of caseCaches[group]) {
           if (search.value) {
-            item.visible = false;
-            if (item.name.indexOf(search.value) >= 0) {
-              item.visible = true;
-              continue;
-            }
-            let py = getPinyin(search.value, true);
+            item.visible = inSearch(item.name, search.value);
           } else {
             item.visible = true;
           }
@@ -970,6 +954,13 @@ const searchGraphics = async () => {
       }
       break;
     case '模板':
+      for (const item of templates.value) {
+        if (search.value) {
+          item.visible = inSearch(item.name, search.value);
+        } else {
+          item.visible = true;
+        }
+      }
       break;
     case '图表':
       break;