feat: 优化插件商店排版

2025-11-04 08:46:24 +00:00 · 2024-04-07 03:24:13 +08:00
parent 9743868cce
commit e271059720
10 changed files with 186 additions and 2911 deletions
--- a/docs/.vuepress/client.js
+++ b/docs/.vuepress/client.js
@@ -0,0 +1,8 @@
+import { defineClientConfig } from "vuepress/client";
+import storeComp from "./components/store.vue";
+
+export default defineClientConfig({
+  enhance: ({ app, router, siteData }) => {
+    app.component("storeComp", storeComp);
+  },
+});
--- a/docs/.vuepress/components/ItemCard.vue
+++ b/docs/.vuepress/components/ItemCard.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="item-card">
+    <div class="item-name">{{ props.item.name }}</div>
+    <div class="item-description">{{ props.item.description }}</div>
+    <div class="item-bar">
+      <!--      三个可点击svg，一个github，一个下载，一个可点击"https://github.com/{{ username }}.png?size=80"个人头像配上id-->
+      <a :href=props.item.link class="">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16">
+          <path fill="currentColor"
+                d="m7.775 3.275l1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0a.751.751 0 0 1 .018-1.042a.751.751 0 0 1 1.042-.018a1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018a.751.751 0 0 1-.018-1.042m-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018a.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0a.751.751 0 0 1-.018 1.042a.751.751 0 0 1-1.042.018a1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83"/>
+        </svg>
+      </a>
+      <div><a class="author-info" :href="`https://github.com/${props.item.author }`">
+        <img class="icon avatar" :src="`https://github.com/${ props.item.author }.png?size=80`" alt="">
+        <div class="author-name">{{ props.item.author }}</div>
+      </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineProps} from 'vue'
+
+const props = defineProps({
+  item: Object
+})
+</script>
+
+<style scoped>
+.item-card {
+  position: relative;
+  border-radius: 15px;
+  background-color: #00000011;
+  height: 160px;
+  padding: 16px;
+  margin: 10px;
+  box-sizing: border-box;
+  transition: background 0.3s ease;
+}
+
+.item-card:hover {
+  border: 2px solid #00a6ff;
+}
+
+.item-name {
+  color: #00a6ff;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.item-description {
+  color: #333;
+  font-size: 15px;
+  white-space: pre-wrap;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  color: #00000055;
+}
+
+.author-info {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+
+.author-name {
+  font-size: 15px;
+  font-weight: normal;
+}
+
+.avatar {
+  border-radius: 50%;
+  margin: 0 10px;
+}
+
+.item-bar {
+  position: absolute;
+  bottom: 0;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: space-between;
+  color: #00000055;
+}
+</style>
--- a/docs/.vuepress/components/store.vue
+++ b/docs/.vuepress/components/store.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import ItemCard from './ItemCard.vue'
+
+// 从public/assets/resources.json加载插件
+let items = ref([])
+fetch('/assets/resources.json')
+  .then(response => response.json())
+  .then(data => {
+    items.value = data
+  })
+  .catch(error => console.error(error))
+
+</script>
+
+<template>
+  <div>
+    <h1>主题/资源商店</h1>
+    <div class="market">
+<!--      布局商品-->
+      <ItemCard v-for="item in items" :key="item.id" :item="item" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  color: #00a6ff;
+  text-align: center;
+  font-weight: bold;
+}
+
+.market {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 10px;
+}
+</style>
--- a/docs/.vuepress/public/assets/resources.json
+++ b/docs/.vuepress/public/assets/resources.json
@@ -0,0 +1,39 @@
+[
+    {
+        "name": "KawaiiStatus",
+        "author": "SnowyKami",
+        "description": "可爱的状态卡片，仿照koishi的制作",
+        "link": "https://cdn.liteyuki.icu/static/lrp/KawaiiStatus.zip",
+        "icon": "https://cdn.jsdelivr.net/gh/SnowyKami/CDN/img/KawaiiStatus.png"
+    },
+    {
+        "name": "MiSans字体包",
+        "author": "SnowyKami",
+        "description": "小米官方字体MiSans",
+        "link": "https://cdn.liteyuki.icu/static/lrp/MiSansFonts.zip"
+    },
+    {
+        "name": "MapleMono字体包",
+        "author": "SnowyKami",
+        "description": "适用于字母的字体包",
+        "link": "https://cdn.liteyuki.icu/static/lrp/MapleMonoFonts.zip"
+    },
+    {
+        "name": "示例包1",
+        "author": "SnowyKami",
+        "description": "A simple bot that shows the status of the bot and the server.",
+        "link": ""
+    },
+    {
+        "name": "示例包2",
+        "author": "SnowyKami",
+        "description": "A simple bot that shows the status of the bot and the server.",
+        "link": ""
+    },
+    {
+        "name": "示例包3",
+        "author": "SnowyKami",
+        "description": "A simple bot that shows the status of the bot and the server.",
+        "link": ""
+    }
+]
--- a/docs/.vuepress/theme.js
+++ b/docs/.vuepress/theme.js
@@ -3,6 +3,7 @@ import navbar from "./navbar.js";
 import sidebar from "./sidebar.js";

 export default hopeTheme({
+
  hostname: "https://vuepress-theme-hope-docs-demo.netlify.app",

  author: {
@@ -45,7 +46,10 @@ export default hopeTheme({

  // 在这里配置主题提供的插件
  plugins: {
-    // 你应该自行生成自己的评论服务
+    searchPro: true,
+    // search: true,
+
+    blog: true,
    comment: {
      provider: "Giscus",
      repo: "snowykami/LiteyukiBot",
@@ -63,6 +67,7 @@ export default hopeTheme({
      align: true,
      attrs: true,
      codetabs: true,
+      footnote: true,
      component: true,
      demo: true,
      figure: true,
@@ -88,6 +93,7 @@ export default hopeTheme({
      tabs: true,
      vPre: true,

+
      // 在启用之前安装 chart.js
      // chart: true,

--- a/docs/package.json
+++ b/docs/package.json
@@ -1,19 +0,0 @@
-{
-  "name": "liteyuki",
-  "version": "2.0.0",
-  "description": "A project of vuepress-theme-hope",
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "docs:build": "vuepress-vite build .",
-    "docs:clean-dev": "vuepress-vite dev . --clean-cache",
-    "docs:dev": "vuepress-vite dev .",
-    "docs:update-package": "pnpm dlx vp-update"
-  },
-  "devDependencies": {
-    "@vuepress/bundler-vite": "2.0.0-rc.9",
-    "vue": "^3.4.21",
-    "vuepress": "2.0.0-rc.9",
-    "vuepress-theme-hope": "2.0.0-rc.32"
-  }
-}
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
--- a/docs/store/README.md
+++ b/docs/store/README.md
@@ -1,27 +1 @@
---
-home: true
-icon: paint-brush
-heroText: Liteyuki Theme Store
-tagline: 轻雪主题/资源商店
-
-highlights:
-  - header: 所有资源包
-    bgImage: https://theme-hope-assets.vuejs.press/bg/2-light.svg
-    bgImageDark: https://theme-hope-assets.vuejs.press/bg/2-dark.svg
-    bgImageStyle:
-      background-repeat: repeat
-      background-size: initial
-    features:
-      - title: Kawaii-Status
-        icon: paint-brush
-        details: 可爱的状态卡片，模仿的Koishi
-        link: https://cdn.liteyuki.icu/static/lrp/KawaiiStatus.zip
-      - title: MiSans字体包
-        icon: paint-brush
-        details: 标准字体包，适用于大多数主题，简约大方
-        link: https://cdn.liteyuki.icu/static/lrp/MiSansFonts.zip
-      - title: MapleMono字体包
-        icon: paint-brush
-        details: 适用于标准主题的MapleMono字体包
-        link: https://cdn.liteyuki.icu/static/lrp/MapleMonoFonts.zip
---
+<storeComp/>
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -1,4 +1,4 @@
-{
+
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
--- a/docs/usage/resource_pack.md
+++ b/docs/usage/resource_pack.md
@@ -1,13 +1,13 @@
 ---
 title: 资源包
-icon: comment
+icon: paint-brush
 order: 3
 category: 使用手册
 ---

 ## 简介 
 资源包,也可根据用途称为主题包、字体包、语言包等,它允许你一定程度上自定义轻雪的外观,并且不用修改源码
- 资源/主题商店提供了一些资源包供你选择,你也可以自己制作资源包
+- [资源/主题商店](/store/)提供了一些资源包供你选择,你也可以自己制作资源包
 - 资源包的制作很简单,如果你接触过`Minecraft`的资源包,那么你会很快上手
 - 部分内容制作需要一点点前端基础,例如`html`,`css`,如果你不懂,可以参考一些教程
 - 欢迎各位投稿资源包到轻雪资源商店