📝 [docs]: 新增在线展示

docs/.vitepress/theme/index.ts

@@ -7,5 +7,8 @@ import StatsBar from '../../components/StatsBar.vue'
 
 export default {
     extends: DefaultTheme,
+    enhanceApp({ app }) {
+        app.component('StatsBar', StatsBar)
+    },
     Layout: StatsBar
 }

docs/components/StatsBar.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import DefaultTheme from "vitepress/theme";
-import {ref, onMounted, onUnmounted} from "vue";
+import {ref, onMounted, onUnmounted, watch} from "vue";
 import {statsApi, GithubStats, RepoUrl, StarMapUrl} from "./scripts/statsApi";
-import {getTextRef, updateRef} from "./scripts/i18n";
+import {getTextRef, updateRefData} from "./scripts/i18n";
+import { onBeforeRouteUpdate } from 'vue-router';
+import {useData} from "vitepress";
 
 const {Layout} = DefaultTheme;
 
@@ -82,20 +84,27 @@ async function updateData() {
   dataSections.prs.value.value = githubStats?.prs || 0;
 }
 
+
 onMounted(() => {
   const intervalId = setInterval(updateData, 10000);
   updateData();
+  updateRefData();
   onUnmounted(() => {
     clearInterval(intervalId);
   });
 });
 
+onBeforeRouteUpdate(() => {
+  updateRefData();
+});
+
 </script>
 
 <template>
   <Layout>
     <template #home-features-before>
       <div class="stats-bar-content">
+        <div class="button" @click="updateRefData">Update</div>
         <div class="stats-bar">
           <div class="stats-info">
             <div v-for="section in Object.values(dataSections)" :key="section.name" class="section">

docs/components/scripts/i18n.ts

@@ -1,4 +1,5 @@
 import {ref} from "vue";
+
 import {useData} from "vitepress";
 
 const i18nData = {
@@ -34,7 +35,7 @@ let refData = {}
 
 function getText(lang: string, key: string): string {
     lang = formatLang(lang);
-    return i18nData[key][key];
+    return i18nData[lang][key];
 }
 
 function formatLang(lang: string): string {
@@ -44,8 +45,8 @@ function formatLang(lang: string): string {
     return lang;
 }
 
-export function updateRef() {
+export function updateRefData() {
-    const lang = useData().site.value.lang;
+    const lang = formatLang(useData().site.value.lang);
     for (let key in refData) {
         refData[key].value = getText(lang, key);
     }
@@ -53,6 +54,6 @@ export function updateRef() {
 
 export function getTextRef(key: string): any {
     const lang = formatLang(useData().site.value.lang);
-    refData[key] = ref(i18nData[lang][key]);
+    refData[key] = getText(lang, key);
     return refData[key]
 }

docs/package.json

@@ -12,6 +12,8 @@
   "type": "module",
   "dependencies": {
     "clipboard": "^2.0.11",
-    "vue": "^3.4.38"
+    "vue": "^3.4.38",
+    "vue-route": "^1.5.1",
+    "vue-router": "4"
   }
 }

docs/pnpm-lock.yaml

@@ -11,6 +11,12 @@ dependencies:
   vue:
     specifier: ^3.4.38
     version: 3.4.38
+  vue-route:
+    specifier: ^1.5.1
+    version: 1.5.1
+  vue-router:
+    specifier: '4'
+    version: 4.4.3(vue@3.4.38)
 
 devDependencies:
   '@intlify/unplugin-vue-i18n':
@@ -809,6 +815,10 @@ packages:
       '@vue/compiler-dom': 3.4.38
       '@vue/shared': 3.4.38
 
+  /@vue/devtools-api@6.6.3:
+    resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==}
+    dev: false
+
   /@vue/devtools-api@7.3.9:
     resolution: {integrity: sha512-D+GTYtFg68bqSu66EugQUydsOqaDlPLNmYw5oYk8k81uBu9/bVTUrqlAJrAA9Am7MXhKz2gWdDkopY6sOBf/Bg==}
     dependencies:
@@ -1211,6 +1221,10 @@ packages:
     engines: {node: '>=12.13'}
     dev: true
 
+  /isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+    dev: false
+
   /js-yaml@3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
     hasBin: true
@@ -1299,6 +1313,18 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /page@1.11.6:
+    resolution: {integrity: sha512-P6e2JfzkBrPeFCIPplLP7vDDiU84RUUZMrWdsH4ZBGJ8OosnwFkcUkBHp1DTIjuipLliw9yQn/ZJsXZvarsO+g==}
+    dependencies:
+      path-to-regexp: 1.2.1
+    dev: false
+
+  /path-to-regexp@1.2.1:
+    resolution: {integrity: sha512-DBw9IhWfevR2zCVwEZURTuQNseCvu/Q9f5ZgqMCK0Rh61bDa4uyjPAOy9b55yKiPT59zZn+7uYKxmWwsguInwg==}
+    dependencies:
+      isarray: 0.0.1
+    dev: false
+
   /pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
     dev: true
@@ -1590,6 +1616,21 @@ packages:
       vue: 3.4.38
     dev: true
 
+  /vue-route@1.5.1:
+    resolution: {integrity: sha512-RoeEWvSTk/Zasjx11En4XPyE1jXwuFQ4Itr4fzh1TOSMYefUddhhlHXmAGFFPn37J1YrEymm6sU/3IRTyu23Aw==}
+    dependencies:
+      page: 1.11.6
+    dev: false
+
+  /vue-router@4.4.3(vue@3.4.38):
+    resolution: {integrity: sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.6.3
+      vue: 3.4.38
+    dev: false
+
   /vue@3.4.38:
     resolution: {integrity: sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==}
     peerDependencies: