From 4705eac79cfccbe76f442c5a9c670bf940f6272f Mon Sep 17 00:00:00 2001
From: snowy <snowykami@outlook.com>
Date: Sat, 24 Aug 2024 11:57:53 +0800
Subject: [PATCH] =?UTF-8?q?:package:=20=E6=8F=92=E4=BB=B6=E5=95=86?=
 =?UTF-8?q?=E5=BA=97=E4=B8=8A=E6=96=B0=EF=BC=9Aliteyukibot-plugin-htmlrend?=
 =?UTF-8?q?er=E5=8F=8Aliteyukibot-plugin-lagrange?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vuepress/components/PluginStore.vue  | 42 +++++++++++---
 docs/.vuepress/components/ToggleSwitch.vue | 67 ++++++++++++++++++++++
 2 files changed, 101 insertions(+), 8 deletions(-)
 create mode 100644 docs/.vuepress/components/ToggleSwitch.vue

diff --git a/docs/.vuepress/components/PluginStore.vue b/docs/.vuepress/components/PluginStore.vue
index 35e15eed..34b6f46a 100644
--- a/docs/.vuepress/components/PluginStore.vue
+++ b/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>
\ No newline at end of file
diff --git a/docs/.vuepress/components/ToggleSwitch.vue b/docs/.vuepress/components/ToggleSwitch.vue
new file mode 100644
index 00000000..9f6088e9
--- /dev/null
+++ b/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>
\ No newline at end of file