📦 插件商店上新：liteyukibot-plugin-htmlrender及liteyukibot-plugin-lagrange

docs/.vuepress/components/PluginStore.vue

@@ -1,18 +1,23 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import ItemCard from './PluginItemCard.vue'
+import ToggleSwitch from "./ToggleSwitch.vue";
 
-
+let showLiteyukiPluginOnly = ref(false)
 let filteredItems = computed(() => {
-  if (!search.value) {
-    return items.value
-  }
-  return items.value.filter(item =>
+  let filtered = items.value
+  if (search.value) {
+    filtered = filtered.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())
-  )
+    )
+  }
+  if (showLiteyukiPluginOnly.value) {
+    filtered = filtered.filter(item => item.is_liteyuki_plugin)
+  }
+  return filtered
 })
 // 插件商店Nonebot
 let items = ref([])
@@ -21,6 +26,9 @@ let search = ref('')
 fetch("/assets/plugins.json")
     .then(response => response.json())
     .then(data => {
+      data.forEach(item => {
+        item.is_liteyuki_plugin = true
+      })
       items.value = data
     })
     .catch(error => console.error(error))
@@ -29,6 +37,10 @@ fetch("/assets/plugins.json")
 fetch('https://registry.nonebot.dev/plugins.json')
     .then(response => response.json())
     .then(data => {
+      // 遍历data的每一项，把is_official设为false
+      data.forEach(item => {
+        item.is_official = false
+      })
       items.value = items.value.concat(data)
     })
 
@@ -37,9 +49,12 @@ fetch('https://registry.nonebot.dev/plugins.json')
 <template>
   <div class="market">
     <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插件实现兼容NoneBot，在此仅作引用，具体请访问NoneBot插件商店</p>
     <!--    搜索框-->
-    <div class="search-box-div"><input class="item-search-box" type="text" placeholder="搜索插件" v-model="search"/></div>
+    <div class="search-box-div">
+      <input class="item-search-box" type="text" placeholder="搜索插件" v-model="search"/>
+      <ToggleSwitch v-model:modelValue="showLiteyukiPluginOnly" />仅轻雪插件
+    </div>
     <div class="items">
       <!-- 使用filteredItems来布局商品 -->
       <ItemCard v-for="item in filteredItems" :key="item.id" :item="item"/>
@@ -59,4 +74,15 @@ h1 {
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 10px;
 }
+
+.search-box-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.search-box-div input {
+  margin-right: 10px;
+}
 </style>

docs/.vuepress/components/ToggleSwitch.vue

@@ -0,0 +1,67 @@
+<template>
+  <label class="switch">
+    <input type="checkbox" :checked="modelValue" @change="updateValue($event.target.checked)">
+    <span class="slider round"></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+
+const props = defineProps({
+  modelValue: Boolean
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const updateValue = (value: boolean) => {
+  emit('update:modelValue', value)
+}
+</script>
+
+<style scoped>
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px); /* 调整为 26px 以确保对齐 */
+}
+</style>