增加 i18n 示例

package.json

@@ -11,7 +11,6 @@
     "gen": "openapi-generator-cli generate -i ./api/swagger.yaml -g typescript-axios -o ./src/api"
   },
   "dependencies": {
-    "@kangc/v-md-editor": "^2.3.18",
     "@notable/html2markdown": "^2.0.3",
     "@traptitech/markdown-it-katex": "^3.6.0",
     "animate.css": "^4.1.1",
@@ -20,9 +19,11 @@
     "js-base64": "^3.7.7",
     "katex": "^0.16.11",
     "lottie-web": "^5.12.2",
+    "markdown-it": "^14.1.0",
     "pinia": "^2.2.2",
     "pinia-plugin-persistedstate": "^4.0.0",
-    "vooks": "^0.2.12"
+    "vooks": "^0.2.12",
+    "vue-i18n": "10"
   },
   "devDependencies": {
     "@babel/types": "^7.18.10",

src/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "guest": {
+    "subtitle": "下一代智能体平台，为您的数字生活带来革命性变化",
+    "try-now": "立即尝试",
+    "tokens_current_month": "本月处理 Tokens",
+    "tool_calls_current_month": "本月工具调用",
+    "wordpress_plugin": "WordPress 插件"
+  }
+}

src/i18n/index.ts

@@ -0,0 +1,9 @@
+import zhCN from "./zh-CN.json";
+import zhTW from "./zh-TW.json";
+import en from "./en.json";
+
+export default {
+  "zh-CN": zhCN,
+  "zh-TW": zhTW,
+  en: en,
+};

src/i18n/zh-CN.json

@@ -0,0 +1,9 @@
+{
+  "guest": {
+    "subtitle": "下一代智能体平台，为您的数字生活带来革命性变化",
+    "try-now": "立即尝试",
+    "tokens_current_month": "本月处理 Tokens",
+    "tool_calls_current_month": "本月工具调用",
+    "wordpress_plugin": "WordPress 插件"
+  }
+}

src/i18n/zh-TW.json

@@ -0,0 +1,9 @@
+{
+  "guest": {
+    "subtitle": "下一代智能体平台，为您的数字生活带来革命性变化",
+    "try-now": "立即尝试",
+    "tokens_current_month": "本月处理 Tokens",
+    "tool_calls_current_month": "本月工具调用",
+    "wordpress_plugin": "WordPress 插件"
+  }
+}

src/main.ts

@@ -6,22 +6,19 @@ import "./styles/style.css";
 import "./styles/color.less";
 import "animate.css";
 
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
-
-import naive from 'naive-ui'
 
 import router from "./router";
 import { registerPlugins } from "./plugins";
 
-const app = createApp(App)
+const app = createApp(App);
-
-app.use(naive)
 
 registerPlugins(app);
 
 app.use(router);
 
+
 if (process.env.NODE_ENV === "production") {
   setTimeout(() => {
     const appContainer = document.getElementById("app");

src/pages/Guest.vue

@@ -9,10 +9,10 @@
               Leaflow <span class="amber-text">Amber</span>
             </h1>
             <p class="subtitle">
-              下一代智能体平台，为您的数字生活带来革命性变化
+              <span>{{ $t('guest.subtitle') }}</span>
               <br class="mobile-break" />
               <a @click="gotoLogin" class="cta-link cursor-pointer"
-                >立即体验 🚀</a
+                >{{ $t('guest.try-now') }}</a
               >
             </p>
             <div
@@ -32,7 +32,7 @@
                   />
                   <template #suffix> Tokens </template>
                 </n-statistic>
-                <div class="stat-label">本月处理 Tokens</div>
+                <div class="stat-label">{{ $t('guest.tokens_current_month') }}</div>
               </div>
               <div class="stat-item">
                 <n-statistic tabular-nums>
@@ -47,7 +47,7 @@
                   />
                   <template #suffix> Calls </template>
                 </n-statistic>
-                <div class="stat-label">本月工具调用</div>
+                <div class="stat-label">{{ $t('guest.tool_calls_current_month') }}</div>
               </div>
             </div>
             <div class="button-group">
@@ -58,8 +58,7 @@
                 href="https://github.com/ivampiresp/wp-amber"
                 target="_blank"
               >
-                WordPress 插件
+                {{ $t('guest.wordpress_plugin') }} </n-button>
-              </n-button>
               <n-button
                 class="transparent-button spotlight-button"
                 ghost

src/plugins/index.ts

@@ -1,6 +1,7 @@
 import pinia from "../stores";
 import naive from "naive-ui";
-
+import { createI18n } from "vue-i18n";
+import i18nMessages from "@/i18n"
 // Types
 import type { App } from "vue";
 // 通用字体
@@ -8,6 +9,28 @@ import "vfonts/Lato.css";
 // 等宽字体
 import "vfonts/FiraCode.css";
 
+// 自动根据用户的浏览器设置选择语言
+const getLocate = () => {
+    const languages = navigator.languages || [navigator.language];
+
+    for (const lang of languages) {
+        if (lang.startsWith('zh-CN')) {
+            return 'zh-CN'; // 简体中文
+        } else if (lang.startsWith('zh-TW')) {
+            return 'zh-TW'; // 繁体中文
+        }
+    }
+    return languages[0];
+};
+
+const userLocale = getLocate();
+
+const i18n = createI18n({
+    locale: userLocale || 'zh-CN', // 如果没有匹配，默认返回简体中文
+    fallbackLocale: "zh-CN",
+    messages: i18nMessages,
+});
+
 export function registerPlugins(app: App) {
-  app.use(naive).use(pinia);
+  app.use(i18n).use(naive).use(pinia);
 }