feat: 添加 Umami 统计组件及其翻译，优化导航和样式

Author: ChouChiu

.vitepress/data/i18n.ts

@@ -20,6 +20,13 @@ export const contributorsTranslations = {
 	"zh-TW": zh_tw.contributors,
 };
 
+// Umami 统计组件翻译
+export const umamiStatsTranslations = {
+	"zh-CN": zh.umamiStats,
+	en: en.umamiStats,
+	"zh-TW": zh_tw.umamiStats,
+};
+
 // 下载组件翻译
 export const downloadTranslations = {
 	"zh-CN": zh.download,

.vitepress/data/lang/en.ts

@@ -30,6 +30,13 @@ export const nav: DefaultTheme.NavItem[] = [
 	},
 ];
 
+// Umami stats component translations
+export const umamiStats = {
+	views: "Views",
+	visits: "Visits",
+	loading: "Loading...",
+};
+
 // Contributors component translations
 export const contributors = {
 	author: "Author",

.vitepress/data/lang/zh.ts

@@ -30,6 +30,13 @@ export const nav: DefaultTheme.NavItem[] = [
 	},
 ];
 
+// Umami 统计组件翻译
+export const umamiStats = {
+	views: "浏览量",
+	visits: "访问次数",
+	loading: "加载中...",
+};
+
 // 贡献者组件翻译
 export const contributors = {
 	author: "作者",

.vitepress/data/lang/zh_tw.ts

@@ -30,6 +30,13 @@ export const nav: DefaultTheme.NavItem[] = [
 	},
 ];
 
+// Umami 統計組件翻譯
+export const umamiStats = {
+	views: "瀏覽量",
+	visits: "訪問次數",
+	loading: "載入中...",
+};
+
 // 貢獻者組件翻譯
 export const contributors = {
 	author: "作者",

.vitepress/theme/components/UmamiStats/UmamiStats.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useData } from "vitepress";
+import { umamiStatsTranslations } from "../../../data/i18n";
 
 const { lang } = useData();
 const stats = ref<{ pageviews: number; visits: number } | null>(null);
 const displayStats = ref({ pageviews: 0, visits: 0 });
 
-const t = {
-	"zh-CN": { views: "浏览量", visits: "访问次数", loading: "加载中..." },
-	en: { views: "Views", visits: "Visits", loading: "Loading..." },
-	"zh-TW": { views: "瀏覽量", visits: "訪問次數", loading: "載入中..." },
-}[lang.value] ?? { views: "浏览量", visits: "访问次数", loading: "加载中..." };
+const t = computed(
+	() =>
+		umamiStatsTranslations[lang.value as keyof typeof umamiStatsTranslations] ??
+		umamiStatsTranslations["zh-CN"],
+);
 
 const CACHE_KEY = "umami-stats-cache";
 const formatNum = (n: number) =>
@@ -91,7 +92,7 @@ onMounted(async () => {
   <div class="umami-stats">
     <span v-if="!stats">{{ t.loading }}</span>
     <span v-else>
-      <strong>{{ formatNum(displayStats.pageviews) }}</strong> {{ t.views }} ·
+      <strong>{{ formatNum(displayStats.pageviews) }}</strong> {{ t.views }}
       <strong>{{ formatNum(displayStats.visits) }}</strong> {{ t.visits }}
     </span>
   </div>
@@ -102,8 +103,7 @@ onMounted(async () => {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 12px;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   color: var(--vp-c-text-2);
   font-variant-numeric: tabular-nums;
 }
@@ -114,9 +114,4 @@ onMounted(async () => {
   display: inline-block;
   text-align: right;
 }
-@media (max-width: 960px) {
-  .umami-stats {
-    display: none;
-  }
-}
 </style>

.vitepress/theme/index.ts

@@ -40,15 +40,15 @@ export default {
 					skipText[lang.value] || skipText["zh-CN"],
 				);
 			},
+			"nav-bar-content-after": () => {
+				return h("div", { class: "nav-stats-center" }, h(UmamiStats));
+			},
 			"layout-bottom": () => {
 				// 从 VitePress 获取当前语言
 				const { lang } = useData();
 				const currentLang = (lang.value || "zh-CN") as Lang;
 				const footerData = getFooterData(currentLang);
-				return h("div", [
-					h("div", { class: "footer-stats" }, h(UmamiStats)),
-					h(Footer, { Footer_Data: footerData }),
-				]);
+				return h(Footer, { Footer_Data: footerData });
 			},
 		});
 	},

.vitepress/theme/style.css

@@ -75,11 +75,7 @@ iframe {
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
-}
-
-.VPNavBar:not(.home.top) .nav-stats-center {
-	opacity: 0;
-	pointer-events: none;
+	z-index: 1;
 }
 
 :focus-visible {