添加搜索游戏

src/components/game-permission/index.vue

@@ -4,21 +4,43 @@
       <a-radio value="*">全部游戏</a-radio>
       <a-radio value="0">指定游戏</a-radio>
     </a-radio-group>
-    <a-tree
-      v-if="selectType === '0'"
-      v-model:checkedKeys="checkedKeys"
-      checkable
-      checked-strategy="child"
-      multiple
-      :data="treeData"
-      :field-names="{ children: 'children', title: 'title', key: 'key' }"
-      @check="handleCheck"
-    />
+    <div>
+      <a-input-search
+        style="margin-bottom: 8px; max-width: 240px"
+        v-model="searchKey"
+        placeholder="搜索游戏"
+        class="m-2 ml-0"
+      />
+      <a-tree
+        v-if="selectType === '0'"
+        v-model:checkedKeys="checkedKeys"
+        checkable
+        checked-strategy="child"
+        multiple
+        :data="treeData"
+        :field-names="{ children: 'children', title: 'title', key: 'key' }"
+        @check="handleCheck"
+      >
+        <template #title="nodeData">
+          <template
+            v-if="((index = getMatchIndex(nodeData?.title)), index < 0)"
+            >{{ nodeData?.title }}</template
+          >
+          <span v-else>
+            {{ nodeData?.title?.substr(0, index) }}
+            <span style="color: var(--color-primary-light-4)">
+              {{ nodeData?.title?.substr(index, searchKey.length) }} </span
+            >{{ nodeData?.title?.substr(index + searchKey.length) }}
+          </span>
+        </template>
+      </a-tree>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, computed } from "vue";
+const searchKey = ref("");
 
 const selectType = ref("*");
 const checkedKeys = ref([]);
@@ -28,7 +50,6 @@ const allGameIds = ref([]);
 
 // 将原始数据转换为树形数据结构
 const treeData = computed(() => {
-  console.log("原始数据:", data.value);
   const result = data.value.map((item) => ({
     key: item.id || item.name, // Tree组件的唯一标识
     title: item.name, // Tree组件显示的文本
@@ -39,10 +60,41 @@ const treeData = computed(() => {
         }))
       : [],
   }));
-  console.log("转换后的树形数据:", result);
-  return result;
+  if (!searchKey.value) {
+    return result;
+  } else {
+    return searchData(result, searchKey.value);
+  }
 });
 
+// 搜索数据
+function searchData(result, keyword) {
+  const loop = (data) => {
+    const result = [];
+    data.forEach((item) => {
+      if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
+        result.push({ ...item });
+      } else if (item.children) {
+        const filterData = loop(item.children);
+        if (filterData.length) {
+          result.push({
+            ...item,
+            children: filterData,
+          });
+        }
+      }
+    });
+    return result;
+  };
+
+  return loop(result);
+}
+
+function getMatchIndex(title) {
+  if (!searchKey.value) return -1;
+  return title.toLowerCase().indexOf(searchKey.value.toLowerCase());
+}
+
 const init = (allGameData, checkedGameList) => {
   data.value = [];
   gameList.value = checkedGameList;