From 294dfc30878a795907b386ddf0925e94db5fa2a0 Mon Sep 17 00:00:00 2001
From: Stone <47559019+st1020@users.noreply.github.com>
Date: Sun, 10 Dec 2023 19:18:28 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BF=AE=E6=94=B9=E5=95=86=E5=BA=97?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20(#103)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/theme/custom.css     |  19 ----
 docs/store/components/Card.vue       |  75 +++++++--------
 docs/store/components/Pagination.vue |  36 +++++---
 docs/store/components/StoreList.vue  | 133 ++++++++++++++-------------
 docs/store/index.md                  |   1 -
 5 files changed, 128 insertions(+), 136 deletions(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 382ee11..ef204c9 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -18,22 +18,3 @@
   --vp-c-brand-3: var(--vp-c-blue-3);
   --vp-c-brand-soft: var(--vp-c-blue-soft);
 }
-
-:root {
-  --button-background: #9ca3af0d;
-  --button-background-hover: #9ca3af1a;
-  --button-background-active: #0099ff0d;
-  --button-color-active: #0099ff;
-  --divider: rgba(60, 60, 67, 0.12);
-  --card-border: rgba(82, 82, 89, 0.32);
-  --card-hover: #09f;
-  --card-icon: #000;
-  --card-des: #3c3c43;
-  --card-tag: #9ca3af2b;
-  --card-button: #f6f6f7;
-}
-html.dark {
-  --card-icon: #fff;
-  --card-button: #9ca3af0d;
-  --card-des: #9ca3af;
-}
diff --git a/docs/store/components/Card.vue b/docs/store/components/Card.vue
index c979432..f92e123 100644
--- a/docs/store/components/Card.vue
+++ b/docs/store/components/Card.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import type { DataItem } from "./StoreList.vue";
 import IconVerify from "./icons/IconVerify.vue";
 import IconGithub from "./icons/IconGithub.vue";
 import IconAuthor from "./icons/IconAuthor.vue";
@@ -8,41 +9,42 @@ import IconModule from "./icons/IconModules.vue";
 import IconVersion from "./icons/IconVersion.vue";
 import IconLicense from "./icons/IconLicense.vue";
 import IconCopy from "./icons/IconCopy.vue";
-const props = defineProps(["item"]);
-const version = ref("0.0.0");
-const openGithub = (url: string) => {
-  window.open(url);
+
+const props = defineProps<{ item: DataItem }>();
+
+const version = ref("unknown");
+
+const openHomepageLink = () => {
+  window.open(props.item.homepage);
 };
-const copyText = () => {
-  let input = document.createElement("textarea");
-  input.style.cssText =
-    "position: absolute; top: 0; left: 0; opacity: 0; z-index: -10;";
-  input.value = "pip install " + props.item.pypi_name;
-  document.body.appendChild(input);
-  input.select();
-  document.execCommand("copy");
-  document.body.removeChild(input);
+
+const copyInstallLink = async () => {
+  await navigator.clipboard.writeText("pip install " + props.item.pypi_name);
 };
+
 onMounted(async () => {
-  const _ = (
+  const v = (
     await (
       await fetch("https://pypi.org/pypi/" + props.item.pypi_name + "/json")
     ).json()
   )["info"]["version"];
-  !!_ && (version.value = _);
+  if (!!v) {
+    version.value = v;
+  }
 });
 </script>
+
 <template>
   <div class="card">
     <div class="card-top">
       <div class="card-head">
         <div class="card-title">
-          {{ item.name
-          }}<IconVerify v-if="item.is_official" style="margin-left: 0.1rem" />
+          {{ item.name }}
+          <IconVerify v-if="item.is_official" style="margin-left: 0.1rem" />
         </div>
         <div
           class="card-github"
-          @click="openGithub(item.homepage)"
+          @click="openHomepageLink"
           v-if="!!item.homepage"
         >
           <IconGithub />
@@ -87,23 +89,22 @@ onMounted(async () => {
         </div>
       </div>
     </div>
-    <div class="card-button" @click="copyText()">
+    <div class="card-button" @click="copyInstallLink">
       点击复制安装命令
-      <div style="margin-left: 0.3rem">
-        <IconCopy />
-      </div>
+      <IconCopy style="margin-left: 0.3rem" />
     </div>
   </div>
 </template>
+
 <style scoped>
 .card {
-  border: 1px solid var(--card-border);
-  border-radius: 0.5rem;
+  border: 1px solid var(--vp-c-bg-soft);
+  border-radius: 12px;
+  background-color: var(--vp-c-bg-soft);
   padding: 1.5rem;
   width: 100%;
   height: 100%;
   transition: border-color 0.25s;
-  cursor: pointer;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -111,7 +112,7 @@ onMounted(async () => {
 }
 
 .card:hover {
-  border: 1px solid var(--card-hover);
+  border: 1px solid var(--vp-c-bg-elv);
 }
 
 .card-head {
@@ -129,15 +130,15 @@ onMounted(async () => {
 
 .card-github {
   cursor: pointer;
-  fill: var(--card-icon);
+  fill: var(--vp-c-neutral);
 }
 
 .card-github:hover {
-  fill: var(--card-hover);
+  fill: var(--vp-c-brand-1);
 }
 
 .card-des {
-  color: var(--card-des);
+  color: var(--vp-c-text-2);
   opacity: 0.7;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -156,7 +157,7 @@ onMounted(async () => {
 .card-tag {
   margin: 0.5rem 0.5rem 0 0;
   padding: 0 0.5rem;
-  background-color: var(--card-tag);
+  background-color: var(--vp-c-default-soft);
   border-radius: 0.1875rem;
 }
 
@@ -179,22 +180,24 @@ onMounted(async () => {
   align-items: center;
 }
 
+.card-icon {
+  width: 16px;
+  height: 16px;
+}
+
 .card-button {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: 0.4rem 1rem;
-  background-color: var(--card-button);
+  background-color: var(--vp-c-default-soft);
   border-radius: 0.5rem;
   cursor: pointer;
 }
 
 .card-button:hover {
-  color: var(--card-hover);
-}
-
-.card-button:hover {
-  fill: var(--card-hover);
+  color: var(--vp-c-brand-1);
+  fill: var(--vp-c-brand-1);
 }
 </style>
diff --git a/docs/store/components/Pagination.vue b/docs/store/components/Pagination.vue
index d02028a..7797b1c 100644
--- a/docs/store/components/Pagination.vue
+++ b/docs/store/components/Pagination.vue
@@ -1,25 +1,30 @@
 <script setup lang="ts">
 import { computed } from "vue";
-const props = defineProps(["modelValue", "pageTotal"]);
-const emit = defineEmits(["update:modelValue"]);
+
+const props = defineProps<{ modelValue: number; pageTotal: number }>();
+const emit = defineEmits<{
+  "update:modelValue": [v: number];
+}>();
+
 const onPrev = () => {
-  if (props.modelValue <= 1) return; // 限制上一页翻页按钮的边界
+  if (props.modelValue <= 1) return;
   emit("update:modelValue", props.modelValue - 1);
 };
 const onNext = () => {
-  if (props.modelValue >= props.pageTotal) return; // 限制下一页翻页按钮的边界
+  if (props.modelValue >= props.pageTotal) return;
   emit("update:modelValue", props.modelValue + 1);
 };
 const setPageNum = (pageNum: number | string) => {
-  if (typeof pageNum !== "number") return; //如果pageNum不是数值类型则返回
-  if (pageNum < 1) return; // 限制上一页翻页按钮的边界
-  if (pageNum > props.pageTotal) return; // 限制下一页翻页按钮的边界
+  if (typeof pageNum !== "number") return;
+  if (pageNum < 1) return;
+  if (pageNum > props.pageTotal) return;
   emit("update:modelValue", pageNum);
 };
+
 const genPageArray = (current: number, total: number, size: number) => {
-  let arr: Array<string | number> = [];
+  let arr: (string | number)[] = [];
   if (total < size + 2) {
-    arr = Array.from({ length: total }, (v, k) => k + 1);
+    arr = Array.from({ length: total }, (_, k) => k + 1);
   } else if (current < size - 2) {
     arr = Array.from(
       (function* gen(i, l) {
@@ -56,17 +61,18 @@ const genPageArray = (current: number, total: number, size: number) => {
   }
   return arr;
 };
-const pageArrayLg = computed(() => {
+
+const pageArrayLg = computed<(number | string)[]>(() => {
   const current = props.modelValue;
   const total = props.pageTotal;
   return genPageArray(current, total, 17);
 });
-const pageArrayMd = computed(() => {
+const pageArrayMd = computed<(number | string)[]>(() => {
   const current = props.modelValue;
   const total = props.pageTotal;
   return genPageArray(current, total, 10);
 });
-const pageArraySm = computed(() => {
+const pageArraySm = computed<(number | string)[]>(() => {
   const current = props.modelValue;
   const total = props.pageTotal;
   return genPageArray(current, total, 6);
@@ -157,15 +163,15 @@ const pageArraySm = computed(() => {
   padding: 0rem 0.25rem;
   align-items: center;
   justify-content: center;
-  background-color: var(--card-button);
+  background-color: var(--vp-c-bg-soft);
   border-radius: 0.25rem;
   cursor: pointer;
 }
 
 .paper-item:hover,
 .paper-item.active {
-  background-color: var(--button-background-active);
+  background-color: var(--vp-c-brand-soft);
   --un-text-opacity: 1;
-  color: var(--button-color-active);
+  color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/docs/store/components/StoreList.vue b/docs/store/components/StoreList.vue
index 0d808e7..d304ea4 100644
--- a/docs/store/components/StoreList.vue
+++ b/docs/store/components/StoreList.vue
@@ -3,64 +3,74 @@ import { ref, computed, onMounted } from "vue";
 import IconSearch from "./icons/IconSearch.vue";
 import Pagination from "./Pagination.vue";
 import Card from "./Card.vue";
-interface dataSchema {
-  module_name: string; //导入时的模块名称
-  pypi_name: string; // 在 PyPi 上的名称
-  name: string; //插件名称
-  description: string; //描述
-  author: string; //作者
-  license?: string; //Optional[str] 开源许可
-  homepage?: string; //Github 链接，应该是 http 地址而非 ssh 地址
-  tags: string[]; //list[str] Tag 列表
+
+export interface DataItem {
+  module_name?: string; // 导入时的模块名称
+  pypi_name?: string; // 在 PyPi 上的名称
+  name: string; // 名称
+  description: string; // 描述
+  author: string; // 作者
+  license?: string; // 开源许可
+  homepage?: string; // Github 链接
+  tags: string[]; // Tag 列表
   is_official: boolean; // 是否为官方维护的插件
+  time: number; // Unix timestamp
+}
+
+enum StoreType {
+  Plugins = "plugins",
+  Adapters = "adapters",
+  Bots = "bots",
 }
+
 const URL = "https://store.alicebot.dev/";
-const type = ref("plugins");
-const initData = ref();
-const searchText = ref("");
-const searchedData = computed(() => {
-  let _ = initData.value;
-  if (!_) return [];
+
+const storeType = ref<StoreType>(StoreType.Plugins);
+const dataItems = ref<DataItem[]>([]);
+
+const searchText = ref<string>("");
+const searchedData = computed<DataItem[]>(() => {
+  let items = dataItems.value;
+  if (!items) return [];
   if (!!searchText.value) {
-    _ = _.filter(
-      (item: { name: string | string[] }) =>
-        item.name.indexOf(searchText.value) > -1
-    );
+    items = items.filter((item) => item.name.indexOf(searchText.value) > -1);
   }
-  _ = _.sort((a: { time: string }, b: { time: string }) => {
-    return new Date(b.time).getTime() - new Date(a.time).getTime();
-  });
-  return _;
+  items = items.sort((a, b) => b.time - a.time);
+  return items;
 });
-const onPagedData = computed(() => {
+
+const pageSize = 10; // 每页显示的数量
+const pageNum = ref<number>(1); // 当前页码
+const pageTotal = computed<number>(() => {
+  pageNum.value = 1;
+  return Math.ceil(searchedData.value.length / pageSize);
+}); // 总页数
+const pageItems = computed(() => {
   if (searchedData.value.length === 0) return [];
   return searchedData.value.slice(
     (pageNum.value - 1) * pageSize,
     pageNum.value * pageSize
   );
 });
-const pageSize = 10; // 每页显示的数量
-const pageNum = ref(1); // 当前页码
-const pageTotal = computed(() => {
-  // 总页数
-  pageNum.value = 1;
-  return Math.ceil(searchedData.value.length / pageSize);
-});
-const setType = async (type_: string) => {
-  type.value = type_;
-  const _: dataSchema = (
-    await (await fetch(URL + type.value + ".json")).json()
-  )[type.value];
-  initData.value = _;
+
+const setType = async (type: StoreType) => {
+  storeType.value = type;
+  dataItems.value = await (await fetch(URL + storeType.value + ".json")).json();
+  // dataItems.value = Array(50).fill({
+  //   module_name: "alicebot_plugin_template",
+  //   pypi_name: "alicebot-plugin-template",
+  //   name: "alicebot-plugin-template",
+  //   description: "AliceBot Plugin Template.",
+  //   author: "st1020",
+  //   license: "MIT",
+  //   homepage: "https://github.com/",
+  //   tags: ["alicebot", "bot", "chatbot", "tag1", "tag2"],
+  //   is_official: false,
+  //   time: 42,
+  // });
   searchText.value = "";
 };
-
-onMounted(async () => {
-  const _: dataSchema = (
-    await (await fetch(URL + type.value + ".json")).json()
-  )[type.value];
-  initData.value = _;
-});
+onMounted(async () => await setType(StoreType.Plugins));
 </script>
 
 <template>
@@ -70,29 +80,29 @@ onMounted(async () => {
       <div class="select-list">
         <button
           class="select-button"
-          @click="setType('plugins')"
-          :class="{ active: type == 'plugins' }"
+          @click="setType(StoreType.Plugins)"
+          :class="{ active: storeType == StoreType.Plugins }"
         >
           插件
         </button>
         <button
           class="select-button"
-          @click="setType('adapters')"
-          :class="{ active: type == 'adapters' }"
+          @click="setType(StoreType.Adapters)"
+          :class="{ active: storeType == StoreType.Adapters }"
         >
           适配器
         </button>
         <button
           class="select-button"
-          @click="setType('bots')"
-          :class="{ active: type == 'bots' }"
+          @click="setType(StoreType.Bots)"
+          :class="{ active: storeType == StoreType.Bots }"
         >
           机器人
         </button>
       </div>
     </div>
     <div class="search-bar">
-      <div class="divider" style="margin-top: 1rem" />
+      <div class="divider" style="margin-top: 1rem"></div>
       <div class="search">
         <IconSearch class="icon" />
         <input
@@ -103,7 +113,7 @@ onMounted(async () => {
           v-model="searchText"
         />
       </div>
-      <div class="divider" style="margin-bottom: 1rem" />
+      <div class="divider" style="margin-bottom: 1rem"></div>
     </div>
     <Pagination
       :pageTotal="pageTotal"
@@ -112,11 +122,7 @@ onMounted(async () => {
       key="topPagination"
     />
     <div class="card-list">
-      <Card
-        v-for="(item, index) in onPagedData"
-        :key="index"
-        :item="item"
-      ></Card>
+      <Card v-for="(item, index) in pageItems" :key="index" :item="item" />
     </div>
     <Pagination
       :pageTotal="pageTotal"
@@ -151,25 +157,22 @@ onMounted(async () => {
 
 .select-button {
   border-radius: 0.25rem;
-  background-color: var(--button-background);
+  background-color: var(--vp-c-bg-soft);
   padding: 0.125rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-}
-
-.select-button:hover {
   cursor: pointer;
-  background-color: var(--button-background-hover);
 }
 
+.select-button:hover,
 .select-button.active {
-  background-color: var(--button-background-active);
+  background-color: var(--vp-c-brand-soft);
   --un-text-opacity: 1;
-  color: var(--button-color-active);
+  color: var(--vp-c-brand-1);
 }
 
 .divider {
-  background-color: var(--divider);
+  background-color: rgba(60, 60, 67, 0.12);
   height: 1px;
 }
 
diff --git a/docs/store/index.md b/docs/store/index.md
index c158f7d..99ef4b1 100644
--- a/docs/store/index.md
+++ b/docs/store/index.md
@@ -9,7 +9,6 @@ footer: false
 # 商店
 
 <script setup>
-import { ref } from "vue";
 import StoreList from "./components/StoreList.vue";
 </script>