TriM-Organization/LiteyukiBot-TriM
2
0
Fork 0
mirror of https://github.com/TriM-Organization/LiteyukiBot-TriM.git synced 2024-11-11 01:27:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
远野千束 2024-07-15 00:22:52 +08:00
parent 5d6ae52157
commit c232c6e5f6
3 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/.vuepress/components/PluginStore.vue
View File

@ -32,16 +32,15 @@ fetch('https://registry.nonebot.dev/plugins.json')
items.value = items.value.concat(data) items.value = items.value.concat(data)
}) })
</script> </script>
<template> <template>
<div> <div class="market">
<h1>插件商店</h1> <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="search-box-div"><input class="item-search-box" type="text" placeholder="搜索插件" v-model="search"/></div>
<div class="market"> <div class="items">
<!-- 使用filteredItems来布局商品 --> <!-- 使用filteredItems来布局商品 -->
<ItemCard v-for="item in filteredItems" :key="item.id" :item="item"/> <ItemCard v-for="item in filteredItems" :key="item.id" :item="item"/>
</div> </div>
@ -55,7 +54,7 @@ h1 {
font-weight: bold; font-weight: bold;
} }
.market { .items {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px; gap: 10px;

13
docs/.vuepress/components/ResStore.vue
View File

@ -6,13 +6,13 @@ import * as url from "node:url";
// 从public/assets/resources.json加载插件 // 从public/assets/resources.json加载插件
let filteredItems = computed(() => { let filteredItems = computed(() => {
if (!search.value) { if (!search.value) {
return items.value return items.value.reverse()
} }
return items.value.filter(item => return items.value.filter(item =>
item.name.toLowerCase().includes(search.value.toLowerCase()) || item.name.toLowerCase().includes(search.value.toLowerCase()) ||
item.description.toLowerCase().includes(search.value.toLowerCase()) || item.description.toLowerCase().includes(search.value.toLowerCase()) ||
item.author.toLowerCase().includes(search.value.toLowerCase()) item.author.toLowerCase().includes(search.value.toLowerCase())
) ).reverse()
}) })
// 插件商店Nonebot // 插件商店Nonebot
let items = ref([]) let items = ref([])
@ -23,14 +23,15 @@ fetch("/assets/resources.json")
items.value = data items.value = data
}) })
.catch(error => console.error(error)) .catch(error => console.error(error))
// 列表倒序
</script> </script>
<template> <template>
<div>
<h1>主题/资源商店</h1>
<input class="item-search-box" type="text" placeholder="搜索资源" v-model="search" />
<div class="market"> <div class="market">
<h1>主题/资源商店</h1>
<div class="search-box-div"><input class="item-search-box" type="text" placeholder="搜索资源" v-model="search" /></div>
<div class="items">
<!-- 使用filteredItems来布局商品 --> <!-- 使用filteredItems来布局商品 -->
<ItemCard v-for="item in filteredItems" :key="item.id" :item="item"/> <ItemCard v-for="item in filteredItems" :key="item.id" :item="item"/>
</div> </div>
@ -44,7 +45,7 @@ h1 {
font-weight: bold; font-weight: bold;
} }
.market { .items {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px; gap: 10px;

12
docs/.vuepress/styles/index.scss
View File

@ -83,8 +83,18 @@ code {
.item-search-box { .item-search-box {
border-radius: 100px; border-radius: 100px;
width: 100%; width: 80%;
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.search-box-div {
display: flex;
justify-content: space-around;
margin: 10px 0;
}
.item-search-box {
width: 80%;
}