✨ 支持 template 模板 list 模式

feature/src/assets/request/index.ts

@@ -32,4 +32,11 @@ export default {
     const res = await axios.get(url);
     return res.data;
   },
+
+  async getSearchDetail(url: string) {
+    const res = await axios.get(
+      "https://gitee.com/monkeyWang/rubick-database/raw/master/plugins/search.json"
+    );
+    return res.data;
+  },
 };

feature/src/views/market/components/tools.vue

@@ -1,13 +1,49 @@
 <template>
-
+  <div class="tools">
+    <PluginList
+      v-if="tools && !!tools.length"
+      @downloadSuccess="downloadSuccess"
+      title="搜索工具"
+      :list="tools"
+    />
+  </div>
 </template>
 
-<script>
-export default {
-  name: "tools"
-};
+<script setup>
+import { ref, computed, onBeforeMount } from "vue";
+import request from "../../../assets/request/index";
+import PluginList from "./plugin-list.vue";
+
+import { useStore } from "vuex";
+const store = useStore();
+const totalPlugins = computed(() => store.state.totalPlugins);
+
+const data = ref([]);
+
+onBeforeMount(async () => {
+  data.value = await request.getSearchDetail();
+});
+
+const tools = computed(() => {
+  const defaultData = data.value || [];
+  if (!defaultData.length) return [];
+  return defaultData.map((plugin) => {
+    let searchInfo = null;
+    totalPlugins.value.forEach((t) => {
+      if (t.name === plugin) {
+        searchInfo = t;
+      }
+    });
+    return searchInfo;
+  });
+});
 </script>
 
-<style scoped>
-
+<style lang="less">
+.worker {
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
 </style>

feature/src/views/market/index.vue

@@ -69,11 +69,13 @@ import { useStore } from "vuex";
 import Finder from "./components/finder.vue";
 import System from "./components/system.vue";
 import Worker from "./components/worker.vue";
+import Tools from "./components/tools.vue";
 
 const Components = {
   finder: Finder,
   system: System,
   worker: Worker,
+  tools: Tools,
 };
 
 const state = reactive({