feat: i18n

Author: fit2cloud-chenyw

frontend/package.json

@@ -13,11 +13,12 @@
     "@npkg/tinymce-plugins": "^0.0.7",
     "@tinymce/tinymce-vue": "^5.1.0",
     "dayjs": "^1.11.13",
-    "element-plus": "^2.9.11",
+    "element-plus": "^2.10.1",
     "lodash": "^4.17.21",
     "snowflake-id": "^1.1.0",
     "tinymce": "^5.8.2",
     "vue": "^3.5.13",
+    "vue-i18n": "^9.14.4",
     "vue-router": "^4.5.0",
     "web-storage-cache": "^1.1.1"
   },

frontend/src/App.vue

@@ -1,8 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { ElConfigProvider } from 'element-plus'
+import { getElementLocale } from '@/i18n'
+const elLanguage = computed(() => {
+  return getElementLocale()
+})
 </script>
 
 <template>
-  <router-view />
+  <el-config-provider :locale="elLanguage">
+    <router-view />
+  </el-config-provider>
 </template>
 
 <style scoped>

frontend/src/components/layout/index.vue

@@ -43,7 +43,8 @@
 
       <div v-else class="top-bar-title">
         <span class="split"/>
-        <span>System manage</span>
+        <!-- <span>System manage</span> -->
+         <span>{{ t('common.system_manage') }}</span>
       </div>
 
 
@@ -76,6 +77,21 @@
             <el-dropdown-menu>
               <el-dropdown-item @click="switchLayout">Switch Layout</el-dropdown-item>
               <el-dropdown-item @click="logout">Logout</el-dropdown-item>
+
+              <el-dropdown @command="changeLanguage">
+                <div class="lang-switch">
+                  Language
+                  <el-icon>
+                    <i class="el-icon-arrow-down"/>
+                  </el-icon>
+                </div>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="en">English</el-dropdown-item>
+                    <el-dropdown-item command="zh-CN">中文</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -153,7 +169,9 @@ import icon_user from '@/assets/svg/icon_user.svg'
 import icon_ai from '@/assets/svg/icon_ai.svg'
 import {ArrowLeftBold} from '@element-plus/icons-vue'
 import {useCache} from '@/utils/useCache'
+import { useI18n } from 'vue-i18n'
 
+const { locale, t } = useI18n()
 const {wsCache} = useCache()
 const topLayout = ref(false)
 const router = useRouter()
@@ -215,6 +233,10 @@ const switchLayout = () => {
   topLayout.value = !topLayout.value
   wsCache.set('sqlbot-topbar-layout', topLayout.value)
 }
+
+const changeLanguage = (lang: string) => {
+  locale.value = lang
+}
 onMounted(() => {
   topLayout.value = wsCache.get('sqlbot-topbar-layout') || true
 })
@@ -536,4 +558,12 @@ onMounted(() => {
     }
   }
 }
+.lang-switch {
+  cursor: pointer;
+  padding: 0 12px;
+  
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
 </style>

frontend/src/i18n/en.json

@@ -0,0 +1,14 @@
+{
+  "menu": {
+    "dashboard": "Dashboard",
+    "chat": "Chat",
+    "datasource": "Data Source",
+    "system": "System"
+  },
+  "common": {
+    "back": "Back",
+    "confirm": "Confirm",
+    "cancel": "Cancel",
+    "system_manage": "System Management"
+  }
+}

frontend/src/i18n/index.ts

@@ -0,0 +1,34 @@
+import { createI18n } from 'vue-i18n'
+import en from './en.json'
+import zhCN from './zh-CN.json'
+import elementEnLocale from 'element-plus/es/locale/lang/en'
+import elementZhLocale from 'element-plus/es/locale/lang/zh-cn'
+
+const getDefaultLocale = () => {
+  /* const savedLang = localStorage.getItem('lang')
+  return savedLang || 'zh-CN' */
+  return 'zh-CN'
+}
+
+const messages = {
+  en: {
+    ...en,
+    el: elementEnLocale 
+  },
+  'zh-CN': {
+    ...zhCN,
+    el: elementZhLocale
+  }
+}
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: getDefaultLocale(),
+  fallbackLocale: 'en',
+  globalInjection: true,
+  messages
+})
+
+export const getElementLocale = () => {
+  return i18n.global.locale.value === 'en' ? elementEnLocale : elementZhLocale
+}

frontend/src/i18n/zh-CN.json

@@ -0,0 +1,14 @@
+{
+  "menu": {
+    "dashboard": "仪表盘",
+    "chat": "聊天",
+    "datasource": "数据源",
+    "system": "系统"
+  },
+  "common": {
+    "back": "返回",
+    "confirm": "确认",
+    "cancel": "取消",
+    "system_manage": "系统管理"
+  }
+}

frontend/src/main.ts

@@ -3,10 +3,12 @@ import { createPinia } from 'pinia'
 import './style.less'
 import App from './App.vue'
 import router from './router'
+import { i18n } from './i18n'
 // import 'element-plus/dist/index.css'
 const app = createApp(App)
 const pinia = createPinia()
 
 app.use(pinia)
 app.use(router)
+app.use(i18n)
 app.mount('#app')

frontend/src/router/index.ts

@@ -7,7 +7,8 @@ import chat from "@/views/chat/index.vue";
 import ds from "@/views/ds/index.vue";
 import DashboardEditor from "@/views/dashboard/editor/index.vue";
 import Dashboard from "@/views/dashboard/index.vue";
-// import setting from "@/views/setting/index.vue";
+import Model from "@/views/system/model/index.vue";
+import User from "@/views/system/user/index.vue";
 import { watchRouter } from "./watch";
 const router = createRouter({
   history: createWebHashHistory(),
@@ -95,17 +96,17 @@ const router = createRouter({
         {
           path: "user",
           name: "user",
-          component: () => import("@/views/system/user/index.vue"),
+          component: User,
           meta: { title: "User Management", icon: "icon_user" },
         },
         {
           path: "model",
           name: "model",
-          component: () => import("@/views/system/model/index.vue"),
+          component: Model,
           meta: { title: "AI Model Configuration", icon: "icon_ai" },
         },
       ],
-    },
+    }
   ],
 });
 watchRouter(router);

frontend/src/views/system/model/index.vue

@@ -80,6 +80,7 @@
           v-model:page-size="state.pageInfo.pageSize"
           :page-sizes="[10, 20, 30]"
           :background="true"
+          :pager-count="5"
           layout="total, sizes, prev, pager, next, jumper"
           :total="state.pageInfo.total"
           @size-change="handleSizeChange"