🔥 小型重构

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