🔥 小型重构

docs/.vuepress/client.js

@@ -1,6 +1,6 @@
 import {defineClientConfig} from "vuepress/client";
-import resourceStoreComp from "./components/res_store.vue";
-import pluginStoreComp from "./components/plugin_store.vue";
+import resourceStoreComp from "./components/ResStore.vue";
+import pluginStoreComp from "./components/PluginStore.vue";
 //导入element-plus
 import ElementPlus from 'element-plus';
 
@@ -9,6 +9,5 @@ export default defineClientConfig({
         app.component("resourceStoreComp", resourceStoreComp);
         app.component("pluginStoreComp", pluginStoreComp);
         app.use(ElementPlus);
-
     },
 });

docs/.vuepress/components/PluginStore.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {ref} from 'vue'
-import ItemCard from './plugin_item_card.vue'
+import ItemCard from './PluginItemCard.vue'
 
 // 插件商店Nonebot
 let items = ref([])

docs/.vuepress/components/ResStore.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {ref} from 'vue'
-import ItemCard from './res_item_card.vue'
+import ItemCard from './ResItemCard.vue'
 
 // 从public/assets/resources.json加载插件
 let items = ref([])
-fetch('https://bot.liteyuki.icu/assets/resources.json')
+fetch('/assets/resources.json')
   .then(response => response.json())
   .then(data => {
     items.value = data

docs/.vuepress/config.ts

@@ -10,6 +10,7 @@ export default defineUserConfig({
     description: "LiteyukiBot | 轻雪机器人 | An OneBot Standard ChatBot | 一个OneBot标准的聊天机器人",
     head: [
 // 设置 favor.ico，.vuepress/public 下
+        ["script", {src: "/js/style.js", "type": "module"}],
         ['link', {rel: 'icon', href: 'https://cdn.liteyuki.icu/favicon.ico'},],
 
         ['link', {rel: 'stylesheet', href: 'https://cdn.bootcdn.net/ajax/libs/firacode/6.2.0/fira_code.min.css'}],

docs/.vuepress/public/js/style.js

@@ -0,0 +1,22 @@
+function applyStyle() {
+    let lineNumbers = document.body.querySelectorAll('[class^="language-"].line-numbers-mode')
+    lineNumbers.forEach((item) => {
+        // 插入现成的html文本
+        let title = item.getAttribute('data-title')
+        let tabStr =
+            "<div class='tab' style='display: flex; background-color: #d0e9ff'>" +
+            "   <div class='tab-buttons'>" +
+            "       <div class='tab-button' style='background-color: #FF5F57'></div>" +
+            "       <div class='tab-button' style='background-color: #FFBD2E'></div>" +
+            "       <div class='tab-button' style='background-color: #27C93F'></div>" +
+            "   </div>" +
+            `   <div class='tab-title'>${title}</div>` +
+            "   <div style='flex: 1'></div>" +
+            "</div>"
+        // 在代码块前插入选项卡
+        item.insertAdjacentHTML('beforebegin', tabStr);
+    })
+}
+
+
+applyStyle()

docs/.vuepress/styles/index.scss

@@ -1,5 +1,10 @@
 // place your custom styles here
 
+:root {
+  --code-window-border-radius: 10px;
+  --button-distance: 8px;
+}
+
 #main-title {
   font-family: ColorTube, "Fira Code", serif;
   color: #ff0000 !important; /* 你想要的颜色 */
@@ -15,11 +20,62 @@ code {
   font-family: "Fira Code", monospace !important;
 }
 
-.vp-hero-image{
+.vp-hero-image {
   overflow: hidden;
   padding: -50px;
 }
 
-#main-title{
+#main-title {
   display: none;
+}
+
+.theme-hope-content pre {
+    overflow: auto;
+    margin: 0 0;
+    padding: 1rem;
+    border-radius: 6px;
+    line-height: 1.375;
+}
+// 移除该before
+.theme-hope-content pre::before {
+  content: none;
+}
+
+.theme-hope-content > div[class*=language-] {
+  margin: 0 0 0 0;
+  //  仅下半部分有圆弧
+    border-radius: 0 0 var(--code-window-border-radius) var(--code-window-border-radius);
+}
+
+.tab {
+  display: flex;
+  height: 25px;
+  margin-bottom: 0;
+  justify-content: space-between;
+  align-items: center;
+  border-top-left-radius: var(--code-window-border-radius);
+  border-top-right-radius: var(--code-window-border-radius);
+}
+
+.tab-buttons {
+  padding: 7px;
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  height: 60%;
+  align-items: center;
+}
+
+.tab-button {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  margin-right: var(--button-distance);
+  border-radius: 50%;
+  height: 100%;
+  aspect-ratio: 1/1;
+}
+
+.tab-title{
+  text-align: center;
+  justify-content: center;
+  flex: 1;
 }

docs/package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "clipboard": "^2.0.11",
     "element-plus": "^2.7.0",
-    "element-ui": "^2.15.14"
+    "element-ui": "^2.15.14",
+    "vue-router": "^4.4.0"
   }
 }

docs/pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   element-ui:
     specifier: ^2.15.14
     version: 2.15.14(vue@3.4.21)
+  vue-router:
+    specifier: ^4.4.0
+    version: 4.4.0(vue@3.4.21)
 
 devDependencies:
   '@vuepress/bundler-vite':
@@ -938,7 +941,6 @@ packages:
 
   /@vue/devtools-api@6.6.1:
     resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
-    dev: true
 
   /@vue/reactivity@3.4.21:
     resolution: {integrity: sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==}
@@ -985,7 +987,7 @@ packages:
       rollup: 4.13.1
       vite: 5.2.6
       vue: 3.4.21
-      vue-router: 4.3.0(vue@3.4.21)
+      vue-router: 4.4.0(vue@3.4.21)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -1021,7 +1023,7 @@ packages:
       '@vue/devtools-api': 6.6.1
       '@vuepress/shared': 2.0.0-rc.9
       vue: 3.4.21
-      vue-router: 4.3.0(vue@3.4.21)
+      vue-router: 4.4.0(vue@3.4.21)
     transitivePeerDependencies:
       - typescript
     dev: true
@@ -2739,14 +2741,13 @@ packages:
     dependencies:
       vue: 3.4.21
 
-  /vue-router@4.3.0(vue@3.4.21):
-    resolution: {integrity: sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==}
+  /vue-router@4.4.0(vue@3.4.21):
+    resolution: {integrity: sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.6.1
       vue: 3.4.21
-    dev: true
 
   /vue@3.4.21:
     resolution: {integrity: sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==}