✨ 插件商店及资源商店新增搜索功能

docs/.vuepress/components/PluginStore.vue

@@ -1,25 +1,48 @@
 <script setup lang="ts">
-import {ref} from 'vue'
+import {computed, ref} from 'vue'
 import ItemCard from './PluginItemCard.vue'
 
+
+let filteredItems = computed(() => {
+  if (!search.value) {
+    return items.value
+  }
+  return items.value.filter(item =>
+      item.name.toLowerCase().includes(search.value.toLowerCase()) ||
+      item.desc.toLowerCase().includes(search.value.toLowerCase()) ||
+      item.author.toLowerCase().includes(search.value.toLowerCase()) ||
+      item.module_name.toLowerCase().includes(search.value.toLowerCase())
+  )
+})
 // 插件商店Nonebot
 let items = ref([])
+let search = ref('')
+// 从官方拉取
+fetch('/assets/plugins.json')
+  .then(response => response.json())
+  .then(data => {
+    items.value = data
+  })
+
+//追加
 fetch('https://registry.nonebot.dev/plugins.json')
     .then(response => response.json())
     .then(data => {
-      items.value = data
+      items.value = items.value.concat(data)
     })
-    .catch(error => console.error(error))
+
 
 </script>
 
 <template>
   <div>
     <h1>插件商店</h1>
-    <p>所有内容来自<a href="https://nonebot.dev/store/plugins">NoneBot插件商店</a>，在此仅作引用，具体请访问NoneBot插件商店</p>
+    <p>内容来自<a href="https://nonebot.dev/store/plugins">NoneBot插件商店</a>和轻雪商店，在此仅作引用，具体请访问NoneBot插件商店</p>
+    <!--    搜索框-->
+    <input class="item-search-box" type="text" placeholder="搜索插件" v-model="search"/>
     <div class="market">
-      <!--      布局商品-->
-      <ItemCard v-for="item in items" :key="item.id" :item="item"/>
+      <!-- 使用filteredItems来布局商品 -->
+      <ItemCard v-for="item in filteredItems" :key="item.id" :item="item"/>
     </div>
   </div>
 </template>

docs/.vuepress/components/ResStore.vue

@@ -1,14 +1,25 @@
 <script setup lang="ts">
-import {ref} from 'vue'
+import {computed, ref} from 'vue'
 import ItemCard from './ResItemCard.vue'
 
 // 从public/assets/resources.json加载插件
+let filteredItems = computed(() => {
+  if (!search.value) {
+    return items.value
+  }
+  return items.value.filter(item =>
+      item.name.toLowerCase().includes(search.value.toLowerCase()) ||
+      item.description.toLowerCase().includes(search.value.toLowerCase()) ||
+      item.author.toLowerCase().includes(search.value.toLowerCase())
+  )
+})
+// 插件商店Nonebot
 let items = ref([])
+let search = ref('')
 fetch('/assets/resources.json')
   .then(response => response.json())
   .then(data => {
     items.value = data
-
   })
   .catch(error => console.error(error))
 
@@ -17,9 +28,14 @@ fetch('/assets/resources.json')
 <template>
   <div>
     <h1>主题/资源商店</h1>
+<!--    <div class="market">-->
+<!--&lt;!&ndash;      布局商品&ndash;&gt;-->
+<!--      <ItemCard v-for="item in [...items].reverse()" :key="item.id" :item="item" />-->
+<!--    </div>-->
+    <input class="item-search-box" type="text" placeholder="搜索资源" v-model="search" />
     <div class="market">
-<!--      布局商品-->
-      <ItemCard v-for="item in [...items].reverse()" :key="item.id" :item="item" />
+      <!-- 使用filteredItems来布局商品 -->
+      <ItemCard v-for="item in filteredItems" :key="item.id" :item="item"/>
     </div>
   </div>
 </template>