docs: 修改商店页面

Author: st1020

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;
-}

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,31 +89,30 @@ 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;
   max-width: 332px;
 }
 
 .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>

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>