add i18n

src/layout/components/menu/item.vue

@@ -7,7 +7,7 @@
       <el-icon v-if="route.meta?.icon">
         <component :is="`el-icon-${route.meta.icon}`"></component>
       </el-icon>
-      <span>{{route.meta?.title||route.name}}</span>
+      <span>{{ T(route.meta?.title) || T(route.name) }}</span>
     </template>
     <menu-item v-for="(_route,_index) in route.children"
                :route="_route"
@@ -18,12 +18,13 @@
     <el-icon v-if="parseRoute(route).meta?.icon">
       <component :is="`el-icon-${parseRoute(route).meta.icon}`"></component>
     </el-icon>
-    <span>{{parseRoute(route).meta?.title||parseRoute(route).name}}</span>
+    <span>{{ T(parseRoute(route).meta?.title) || T(parseRoute(route).name) }}</span>
   </el-menu-item>
 </template>
 
 <script>
   import { defineComponent } from 'vue'
+  import { T } from '@/utils/i18n'
 
   export default defineComponent({
     name: 'MenuItem',
@@ -43,6 +44,7 @@
       }
       return {
         parseRoute,
+        T,
       }
     },
   })

src/layout/components/setting/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="setting">
+    <div>
+      <el-button size="small" @click="changeLang" style="width: 100px">{{ T('ChangeLang') }}</el-button>
+    </div>
     <el-dropdown class="menu-item">
       <div class="title">
         <!--        <el-image class="avatar" :src="user.avatar"></el-image>-->
@@ -7,12 +10,13 @@
         <el-icon>
           <el-icon-arrow-down/>
         </el-icon>
+
       </div>
 
       <template #dropdown>
         <el-dropdown-menu>
-          <el-dropdown-item @click="showChangePwd">修改密码</el-dropdown-item>
-          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+          <el-dropdown-item @click="showChangePwd">{{T('ChangePassword')}}</el-dropdown-item>
+          <el-dropdown-item @click="logout">{{ T('Logout')}}</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
@@ -22,11 +26,14 @@
 
 <script setup>
   import { useUserStore } from '@/store/user'
+  import { useAppStore } from '@/store/app'
   import changePwdDialog from '@/components/changePwdDialog.vue'
   import { ref } from 'vue'
+  import { T } from '@/utils/i18n'
 
   const userStore = useUserStore()
   const user = userStore
+  const appStore = useAppStore()
 
   const logout = () => {
     userStore.logout()
@@ -37,6 +44,9 @@
   const showChangePwd = () => {
     changePwdVisible.value = true
   }
+  const changeLang = () => {
+    appStore.changeLang()
+  }
 </script>
 
 <style lang="scss" scoped>

src/layout/components/tags/index.vue

@@ -7,7 +7,7 @@
           @click="toTag(t)"
           :type="t.active?'primary':'info'"
           :effect="t.active?'dark':'plain'">
-    {{t.title}}
+    {{ T(t.title) }}
   </el-tag>
 </template>
 
@@ -15,6 +15,7 @@
   import { defineComponent, ref, onMounted, watch } from 'vue'
   import { useTagsStore } from '@/store/tags'
   import { useRoute, useRouter } from 'vue-router'
+  import { T } from '@/utils/i18n'
 
   export default defineComponent({
     name: 'Index',
@@ -64,6 +65,7 @@
         close,
         toLastTag,
         toTag,
+        T,
       }
     },
   })
@@ -71,10 +73,11 @@
 
 <style lang="scss" scoped>
 
-  .tag {
-    border-radius: 0;
-    cursor: pointer;
-    &.active {
-    }
+.tag {
+  border-radius: 0;
+  cursor: pointer;
+
+  &.active {
   }
+}
 </style>

src/layout/index.vue

@@ -1,85 +1,73 @@
 <template>
-  <el-container>
-    <el-aside :width="leftWidth" class="app-left">
-      <g-aside></g-aside>
-    </el-aside>
-    <el-container class="app-container ">
-      <el-header class="app-header">
-        <g-header></g-header>
-      </el-header>
-      <div class="header-tags">
-        <tags></tags>
-      </div>
+  <el-config-provider :locale="appStore.setting.locale">
+    <el-container>
+      <el-aside :width="leftWidth" class="app-left">
+        <g-aside></g-aside>
+      </el-aside>
+      <el-container class="app-container ">
+        <el-header class="app-header">
+          <g-header></g-header>
+        </el-header>
+        <div class="header-tags">
+          <tags></tags>
+        </div>
 
-      <el-main class="app-main">
-        <router-view v-slot="{ Component }">
-          <transition mode="out-in" name="el-fade-in-linear">
-            <keep-alive :include="[...cachedTags]">
-              <component :is="Component"/>
-            </keep-alive>
-          </transition>
-        </router-view>
-      </el-main>
+        <el-main class="app-main">
+          <router-view v-slot="{ Component }">
+            <transition mode="out-in" name="el-fade-in-linear">
+              <keep-alive :include="[...cachedTags]">
+                <component :is="Component"/>
+              </keep-alive>
+            </transition>
+          </router-view>
+        </el-main>
+      </el-container>
     </el-container>
-  </el-container>
+  </el-config-provider>
 </template>
 
-<script>
+<script setup>
   import { useUserStore } from '@/store/user'
-  import { useRouteStore } from '@/store/router'
   import { useAppStore } from '@/store/app'
   import { useTagsStore } from '@/store/tags'
-  import LayerHeader from '@/layout/components/header.vue'
-  import { defineComponent, ref, onMounted, watch, reactive, computed, toRef } from 'vue'
+  import { ref, computed } from 'vue'
   import Tags from '@/layout/components/tags/index.vue'
   import GAside from '@/layout/components/aside.vue'
   import GHeader from '@/layout/components/header.vue'
 
-  export default defineComponent({
-    name: 'Layout',
-    components: { LayerHeader, Tags, GAside, GHeader },
-    setup (props) {
-      const userStore = useUserStore()
-      const appStore = useAppStore()
-      const tagStore = useTagsStore()
+  const appStore = useAppStore()
+  const tagStore = useTagsStore()
 
-      const leftWidth = computed(() => appStore.setting.sideIsCollapse ? '64px' : '210px')
+  const leftWidth = computed(() => appStore.setting.sideIsCollapse ? '64px' : '210px')
 
-      const cachedTags = ref([])
+  const cachedTags = ref([])
 
-      cachedTags.value = tagStore.cached
-
-      return {
-        cachedTags,
-        leftWidth,
-      }
-    },
-  })
+  cachedTags.value = tagStore.cached
 </script>
 
 <style lang="scss" scoped>
-  .app-header {
-    background-color: #3f454b;
-    color: var(--basicWhite);
-    display: flex;
-    height: 50px;
-  }
+.app-header {
+  background-color: #3f454b;
+  color: var(--basicWhite);
+  display: flex;
+  height: 50px;
+}
 
-  .header-tags {
-    height: auto;
-    border-bottom: 1px solid #eee;
-    display: flex;
-    padding: 0;
-  }
+.header-tags {
+  height: auto;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  padding: 0;
+}
 
-  .app-left {
-    height: 100%;
-    transition: width 0.5s;
-  }
+.app-left {
+  height: 100%;
+  transition: width 0.5s;
+}
 
-  .app-container {
-    min-height: 100vh;
-  }
+.app-container {
+  min-height: 100vh;
+}
 </style>
 
 

src/router/index.js

@@ -4,7 +4,7 @@ const constantRoutes = [
   {
     path: '/login',
     name: 'Login',
-    meta: { title: '登录' },
+    meta: { title: 'Login' },
     component: () => import('@/views/login/login.vue'),
   },
 
@@ -45,25 +45,25 @@ export const asyncRoutes = [
     path: '/my',
     name: 'My',
     redirect: '/my/info',
-    meta: { title: '我的', icon: 'UserFilled' },
+    meta: { title: 'My', icon: 'UserFilled' },
     component: () => import('@/layout/index.vue'),
     children: [
       {
         path: '/',
         name: 'MyInfo',
-        meta: { title: '个人信息', icon: 'User' /*keepAlive: true*/ },
+        meta: { title: 'Info', icon: 'User' /*keepAlive: true*/ },
         component: () => import('@/views/my/info.vue'),
       },
       {
         path: 'address_book',
         name: 'MyAddressBookList',
-        meta: { title: '地址簿管理', icon: 'Notebook' /*keepAlive: true*/ },
+        meta: { title: 'AddressBooks', icon: 'Notebook' /*keepAlive: true*/ },
         component: () => import('@/views/my/address_book/index.vue'),
       },
       {
         path: 'tag',
         name: 'MyTagList',
-        meta: { title: '标签管理', icon: 'CollectionTag' /*keepAlive: true*/ },
+        meta: { title: 'Tags', icon: 'CollectionTag' /*keepAlive: true*/ },
         component: () => import('@/views/my/tag/index.vue'),
       },
     ],
@@ -72,62 +72,62 @@ export const asyncRoutes = [
     path: '/user',
     name: 'User',
     redirect: '/user/index',
-    meta: { title: '系统', icon: 'Setting' },
+    meta: { title: 'System', icon: 'Setting' },
     component: () => import('@/layout/index.vue'),
     children: [
       {
         path: 'peer',
         name: 'Peer',
-        meta: { title: '设备管理', icon: 'Monitor' /*keepAlive: true*/ },
+        meta: { title: 'PeerManage', icon: 'Monitor' /*keepAlive: true*/ },
         component: () => import('@/views/peer/index.vue'),
       },
       {
         path: 'group',
         name: 'UserGroup',
-        meta: { title: '群组管理', icon: 'ChatRound' /*keepAlive: true*/ },
+        meta: { title: 'GroupManage', icon: 'ChatRound' /*keepAlive: true*/ },
         component: () => import('@/views/group/index.vue'),
       },
       {
         path: 'index',
         name: 'UserList',
-        meta: { title: '用户列表', icon: 'User' /*keepAlive: true*/ },
+        meta: { title: 'UserManage', icon: 'User' /*keepAlive: true*/ },
         component: () => import('@/views/user/index.vue'),
       },
       {
         path: 'add',
         name: 'UserAdd',
-        meta: { title: '用户添加', hide: true },
+        meta: { title: 'UserAdd', hide: true },
         component: () => import('@/views/user/edit.vue'),
       },
       {
         path: 'edit/:id',
         name: 'UserEdit',
-        meta: { title: '用户编辑', hide: true },
+        meta: { title: 'UserEdit', hide: true },
         component: () => import('@/views/user/edit.vue'),
       },
 
       {
         path: 'addressBook',
         name: 'UserAddressBook',
-        meta: { title: '地址簿管理', icon: 'Notebook' /*keepAlive: true*/ },
+        meta: { title: 'AddressBookManage', icon: 'Notebook' /*keepAlive: true*/ },
         component: () => import('@/views/address_book/index.vue'),
       },
       {
         path: 'tag',
         name: 'UserTag',
-        meta: { title: '标签管理', icon: 'CollectionTag' /*keepAlive: true*/ },
+        meta: { title: 'TagsManage', icon: 'CollectionTag' /*keepAlive: true*/ },
         component: () => import('@/views/tag/index.vue'),
       },
       {
         path: '/oauth',
         name: 'Oauth',
-        meta: { title: 'Oauth管理', icon: 'Link' /*keepAlive: true*/ },
+        meta: { title: 'OauthManage', icon: 'Link' /*keepAlive: true*/ },
         component: () => import('@/views/oauth/index.vue'),
       },
       {
         path: '/loginLog',
         name: 'LoginLog',
-        meta: { title: '登录日志', icon: 'List' /*keepAlive: true*/ },
+        meta: { title: 'LoginLog', icon: 'List' /*keepAlive: true*/ },
         component: () => import('@/views/login/log.vue'),
       },
     ],

src/store/app.js

@@ -1,13 +1,17 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
 import logo from '@/assets/logo.png'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en'
 
 export const useAppStore = defineStore({
   id: 'App',
   state: () => ({
     setting: {
-      title: 'Gwen-Admin',
+      title: 'Rustdesk-Api-Admin',
       sideIsCollapse: false,
       logo,
+      lang: localStorage.getItem('lang') || 'zh-CN',
+      locale: zhCn,
     },
   }),
 
@@ -15,6 +19,14 @@ export const useAppStore = defineStore({
     sideCollapse () {
       this.setting.sideIsCollapse = !this.setting.sideIsCollapse
     },
+    setLang (lang) {
+      this.setting.lang = lang
+      this.setting.locale = lang === 'zh-CN' ? zhCn : en
+      localStorage.setItem('lang', lang)
+    },
+    changeLang () {
+      this.setLang(this.setting.lang === 'zh-CN' ? 'en' : 'zh-CN')
+    },
   },
 })
 

src/store/tags.js

@@ -8,15 +8,15 @@ export const useTagsStore = defineStore({
   }),
   actions: {
     initTags () {
-      this.tags.push(
-        {
-          name: 'Home',
-          path: '/Home',
-          title: '首页',
-          active: false,
-          closeable: false,
-          keepAlive: false,
-        })
+      // this.tags.push(
+      //   {
+      //     name: 'Home',
+      //     path: '/Home',
+      //     title: '首页',
+      //     active: false,
+      //     closeable: false,
+      //     keepAlive: false,
+      //   })
     },
     addTag (route) {
       const tags = this.tags

src/utils/i18n.js

@@ -0,0 +1,21 @@
+import en from '@/utils/i18n/en.json'
+import zhCN from '@/utils/i18n/zh_CN.json'
+import { useAppStore } from '@/store/app'
+import { pinia } from '@/store'
+
+export function T (key, params, num = 0) {
+  const appStore = useAppStore(pinia)
+  const lang = appStore.setting.lang
+  const trans = lang === 'zh-CN' ? zhCN : en
+  const tran = trans[key]
+  if (!tran) {
+    return key
+  }
+  const msg = num > 0 ? (tran.Other ? tran.Other : tran.One) : tran.One
+  //msg 是这样 {name} is name
+  //params 是这样 {name: 'zhangsan'}
+  //替换
+  return msg.replace(/{(\w+)}/g, function (match, key) {
+    return params[key] || match
+  })
+}

src/utils/i18n/en.json

@@ -0,0 +1,236 @@
+{
+  "Login": {
+    "One": "Login"
+  },
+  "Logout": {
+    "One": "Logout"
+  },
+  "Register": {
+    "One": "Register"
+  },
+  "Confirm": {
+    "One": "Confirm"
+  },
+  "Username": {
+    "One": "Username"
+  },
+  "Password": {
+    "One": "Password"
+  },
+  "LoginSuccess": {
+    "One": "Login Success"
+  },
+  "ForgotPassword": {
+    "One": "Forgot Password"
+  },
+  "ResetPassword": {
+    "One": "Reset Password"
+  },
+  "ChangePassword": {
+    "One": "Change Password"
+  },
+  "Userinfo": {
+    "One": "User Info"
+  },
+  "ParamRequired": {
+    "One": "{param} is required"
+  },
+  "HasBind": {
+    "One": "Has bind"
+  },
+  "NoBind": {
+    "One": "No bind"
+  },
+  "UnBind": {
+    "One": "UnBind"
+  },
+  "ToBind": {
+    "One": "To Bind"
+  },
+  "Confirm?": {
+    "One": "{param} Confirm?"
+  },
+  "Cancel": {
+    "One": "Cancel"
+  },
+  "Platform": {
+    "One": "Platform"
+  },
+  "Status": {
+    "One": "Status"
+  },
+  "Actions": {
+    "One": "Actions"
+  },
+  "Filter": {
+    "One": "Filter"
+  },
+  "Add": {
+    "One": "Add"
+  },
+  "Hostname": {
+    "One": "Hostname"
+  },
+  "Alias": {
+    "One": "Alias"
+  },
+  "Hash": {
+    "One": "Hash"
+  },
+  "Tags": {
+    "One": "Tags"
+  },
+  "Edit": {
+    "One": "Edit"
+  },
+  "Delete": {
+    "One": "Delete"
+  },
+  "Create": {
+    "One": "Create"
+  },
+  "Update": {
+    "One": "Update"
+  },
+  "LoginName": {
+    "One": "Login Name"
+  },
+  "Submit": {
+    "One": "Submit"
+  },
+  "OperationSuccess": {
+    "One": "Operation Success"
+  },
+  "Owner": {
+    "One": "Owner"
+  },
+  "Name": {
+    "One": "Name"
+  },
+  "Color": {
+    "One": "Color"
+  },
+  "CreatedAt": {
+    "One": "Created At"
+  },
+  "UpdatedAt": {
+    "One": "Updated At"
+  },
+  "Memory": {
+    "One": "Memory"
+  },
+  "Os": {
+    "One": "Os"
+  },
+  "Uuid": {
+    "One": "Uuid"
+  },
+  "Version": {
+    "One": "Version"
+  },
+  "Type": {
+    "One": "Type"
+  },
+  "Group": {
+    "One": "Group"
+  },
+  "CommonGroup": {
+    "One": "Common Group"
+  },
+  "CommonGroupNote": {
+    "One": "Only admins can see group members and their devices"
+  },
+  "SharedGroup": {
+    "One": "Shared Group"
+  },
+  "SharedGroupNote": {
+    "One": "All users can see group members and their devices"
+  },
+  "Nickname": {
+    "One": "Nickname"
+  },
+  "UserTags": {
+    "One": "User Tags"
+  },
+  "UserAddressBook": {
+    "One": "User Address Book"
+  },
+  "IsAdmin": {
+    "One": "Is Admin"
+  },
+  "PleaseInputNewPassword": {
+    "One": "Please input new password"
+  },
+  "AutoRegister": {
+    "One": "Auto Register"
+  },
+  "AutoRegisterNote": {
+    "One": "If Enable,An account will be automatically registered when a user logs in with OAuth without binding an existing account"
+  },
+  "ThirdName": {
+    "One": "Third Name"
+  },
+  "Close": {
+    "One": "Close"
+  },
+  "OauthBinding": {
+    "One": "You are authorizing the binding"
+  },
+  "OauthLogining": {
+    "One": "You are authorizing the login"
+  },
+  "OauthCloseNote": {
+    "One": "If it is not authorized by you, please close the page directly"
+  },
+  "OperationSuccessAndCloseAfter3Seconds": {
+    "One": "Operation Success,Close after 3 seconds"
+  },
+  "ConfirmOauth": {
+    "One": "Confirm Oauth"
+  },
+  "Device": {
+    "One": "Device"
+  },
+  "ChangeLang": {
+    "One": "切换中文"
+  },
+  "My": {
+    "One": "My"
+  },
+  "Info": {
+    "One": "Info"
+  },
+  "AddressBooks": {
+    "One": "Address Books"
+  },
+  "System": {
+    "One": "System"
+  },
+  "PeerManage": {
+    "One": "Peers"
+  },
+  "AddressBookManage": {
+    "One": "Address Books"
+  },
+  "GroupManage": {
+    "One": "Groups"
+  },
+  "UserManage": {
+    "One": "Users"
+  },
+  "UserAdd": {
+    "One": "User Add"
+  },
+  "UserEdit": {
+    "One": "User Edit"
+  },
+  "TagsManage": {
+    "One": "Tags"
+  },
+  "OauthManage": {
+    "One": "Oauth"
+  },
+  "LoginLog": {
+    "One": "Login Log"
+  }
+}

src/utils/i18n/zh_CN.json

@@ -0,0 +1,236 @@
+{
+  "Login": {
+    "One": "登录"
+  },
+  "Logout": {
+    "One": "退出登录"
+  },
+  "Register": {
+    "One": "注册"
+  },
+  "Confirm": {
+    "One": "确认"
+  },
+  "Username": {
+    "One": "用户名"
+  },
+  "Password": {
+    "One": "密码"
+  },
+  "LoginSuccess": {
+    "One": "登录成功"
+  },
+  "ForgotPassword": {
+    "One": "忘记密码"
+  },
+  "ResetPassword": {
+    "One": "重置密码"
+  },
+  "ChangePassword": {
+    "One": "修改密码"
+  },
+  "Userinfo": {
+    "One": "用户信息"
+  },
+  "ParamRequired": {
+    "One": "{param} 是必须的"
+  },
+  "HasBind": {
+    "One": "已绑定"
+  },
+  "NoBind": {
+    "One": "未绑定"
+  },
+  "UnBind": {
+    "One": "解绑"
+  },
+  "ToBind": {
+    "One": "绑定"
+  },
+  "Confirm?": {
+    "One": "确定{param}?"
+  },
+  "Cancel": {
+    "One": "取消"
+  },
+  "Platform": {
+    "One": "平台"
+  },
+  "Status": {
+    "One": "状态"
+  },
+  "Actions": {
+    "One": "操作"
+  },
+  "Filter": {
+    "One": "筛选"
+  },
+  "Add": {
+    "One": "添加"
+  },
+  "Hostname": {
+    "One": "主机名"
+  },
+  "Alias": {
+    "One": "别名"
+  },
+  "Hash": {
+    "One": "哈希"
+  },
+  "Tags": {
+    "One": "标签"
+  },
+  "Edit": {
+    "One": "编辑"
+  },
+  "Delete": {
+    "One": "删除"
+  },
+  "Create": {
+    "One": "创建"
+  },
+  "Update": {
+    "One": "更新"
+  },
+  "LoginName": {
+    "One": "登录名"
+  },
+  "Submit": {
+    "One": "提交"
+  },
+  "OperationSuccess": {
+    "One": "操作成功"
+  },
+  "Owner": {
+    "One": "所有者"
+  },
+  "Name": {
+    "One": "名称"
+  },
+  "Color": {
+    "One": "颜色"
+  },
+  "CreatedAt": {
+    "One": "创建时间"
+  },
+  "UpdatedAt": {
+    "One": "更新时间"
+  },
+  "Memory": {
+    "One": "内存"
+  },
+  "Os": {
+    "One": "操作系统"
+  },
+  "Uuid": {
+    "One": "UUID"
+  },
+  "Version": {
+    "One": "版本"
+  },
+  "Type": {
+    "One": "类型"
+  },
+  "Group": {
+    "One": "组"
+  },
+  "CommonGroup": {
+    "One": "普通组"
+  },
+  "CommonGroupNote": {
+    "One": "只有管理员才能查看群组成员及其设备"
+  },
+  "SharedGroup": {
+    "One": "共享组"
+  },
+  "SharedGroupNote": {
+    "One": "所有用户都可以查看群组成员及其设备"
+  },
+  "Nickname": {
+    "One": "昵称"
+  },
+  "UserTags": {
+    "One": "用户标签"
+  },
+  "UserAddressBook": {
+    "One": "用户地址簿"
+  },
+  "IsAdmin": {
+    "One": "是否管理员"
+  },
+  "PleaseInputNewPassword": {
+    "One": "请输入新密码"
+  },
+  "AutoRegister": {
+    "One": "自动注册"
+  },
+  "AutoRegisterNote": {
+    "One": "如果启用，则当用户使用 OAuth 登录时，将自动注册一个帐户，而无需绑定现有帐户"
+  },
+  "ThirdName": {
+    "One": "第三方名称"
+  },
+  "Close": {
+    "One": "关闭"
+  },
+  "OauthBinding": {
+    "One": "您正在授权绑定"
+  },
+  "OauthLogining": {
+    "One": "您正在授权登录"
+  },
+  "OauthCloseNote": {
+    "One": "如不是您发起的授权，请直接关闭页面"
+  },
+  "OperationSuccessAndCloseAfter3Seconds": {
+    "One": "操作成功，3秒后将自动关闭页面"
+  },
+  "ConfirmOauth": {
+    "One": "确认授权"
+  },
+  "Device": {
+    "One": "设备"
+  },
+  "ChangeLang": {
+    "One": "ToEnglish"
+  },
+  "My": {
+    "One": "我的"
+  },
+  "Info": {
+    "One": "信息"
+  },
+  "AddressBooks": {
+    "One": "地址簿"
+  },
+  "System": {
+    "One": "系统"
+  },
+  "PeerManage": {
+    "One": "设备管理"
+  },
+  "AddressBookManage": {
+    "One": "地址簿管理"
+  },
+  "GroupManage": {
+    "One": "群组管理"
+  },
+  "UserManage": {
+    "One": "用户管理"
+  },
+  "UserAdd": {
+    "One": "用户添加"
+  },
+  "UserEdit": {
+    "One": "用户编辑"
+  },
+  "TagsManage": {
+    "One": "标签管理"
+  },
+  "OauthManage": {
+    "One": "Oauth管理"
+  },
+  "LoginLog": {
+    "One": "登录日志"
+  }
+}

src/utils/request.js

@@ -3,6 +3,7 @@ import { ElMessage } from 'element-plus'
 import { getToken, removeToken } from '@/utils/auth'
 import { useUserStore } from '@/store/user'
 import { pinia } from '@/store'
+import { useAppStore } from '@/store/app'
 
 // create an axios instance
 const service = axios.create({
@@ -14,15 +15,23 @@ const service = axios.create({
 // request interceptor
 service.interceptors.request.use(
   config => {
+    if (!config.headers) {
+      config.headers = {}
+    }
     const userStore = useUserStore(pinia)
 
     const token = userStore.token || getToken()
     if (token) {
-      if (!config.headers) {
-        config.headers = {}
-      }
       config.headers['api-token'] = token
     }
+
+    const app = useAppStore()
+    const lang = app.setting.lang
+    if (lang) {
+      console.log('lang', lang)
+      config.headers['Accept-Language'] = lang
+    }
+
     return config
   },
   error => {
@@ -66,7 +75,7 @@ service.interceptors.response.use(
   error => {
     if (error.code === 'ECONNABORTED'
       && error.message.indexOf('timeout') > -1) {
-      error.message = '请求超时！'
+      error.message = 'Connection Time Out!'
     }
     ElMessage({
       message: error.message,

src/views/address_book/index.js

@@ -1,7 +1,8 @@
-import { onActivated, onMounted, reactive, ref, watch } from 'vue'
+import { reactive, ref } from 'vue'
 import { create, list, remove, update } from '@/api/address_book'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRoute } from 'vue-router'
+import { T } from '@/utils/i18n'
 
 export function useRepositories () {
   const route = useRoute()
@@ -35,9 +36,9 @@ export function useRepositories () {
   }
 
   const del = async (row) => {
-    const cf = await ElMessageBox.confirm('确定删除么?', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
       type: 'warning',
     }).catch(_ => false)
     if (!cf) {
@@ -46,7 +47,7 @@ export function useRepositories () {
 
     const res = await remove({ row_id: row.row_id }).catch(_ => false)
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       getList()
     }
   }
@@ -110,7 +111,7 @@ export function useRepositories () {
     const api = formData.row_id ? update : create
     const res = await api(formData).catch(_ => false)
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       formVisible.value = false
       getList()
     }

src/views/address_book/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="60px">
-        <el-form-item label="用户">
+      <el-form inline label-width="80px">
+        <el-form-item :label="T('Owner')">
           <el-select v-model="listQuery.user_id" clearable>
             <el-option
                 v-for="item in allUsers"
@@ -13,8 +13,8 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handlerQuery">筛选</el-button>
-          <el-button type="danger" @click="toAdd">添加</el-button>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -22,24 +22,24 @@
       <!--      <el-tag type="danger" style="margin-bottom: 10px">不建议在此操作地址簿，可能会造成数据不同步</el-tag>-->
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="id" align="center"/>
-        <el-table-column label="所属用户" align="center">
+        <el-table-column :label="T('Owner')" align="center">
           <template #default="{row}">
             <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
           </template>
         </el-table-column>
-        <el-table-column prop="username" label="用户名" align="center"/>
-        <el-table-column prop="hostname" label="主机名" align="center"/>
-        <el-table-column prop="alias" label="别名" align="center"/>
-        <el-table-column prop="platform" label="平台" align="center"/>
-        <el-table-column prop="hash" label="hash" align="center"/>
-        <el-table-column prop="tags" label="标签" align="center"/>
+        <el-table-column prop="username" :label="T('Username')" align="center"/>
+        <el-table-column prop="hostname" :label="T('Hostname')" align="center"/>
+        <el-table-column prop="alias" :label="T('Alias')" align="center"/>
+        <el-table-column prop="platform" :label="T('Platform')" align="center"/>
+        <el-table-column prop="hash" :label="T('Hash')" align="center"/>
+        <el-table-column prop="tags" :label="T('Tags')" align="center"/>
         <!--        <el-table-column prop="created_at" label="创建时间" align="center"/>-->
         <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
         <el-table-column label="操作" align="center" width="400">
           <template #default="{row}">
             <el-button type="success" @click="toWebClientLink(row)">Web-Client</el-button>
-            <el-button @click="toEdit(row)">编辑</el-button>
-            <el-button type="danger" @click="del(row)">删除</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -53,9 +53,9 @@
                      :total="listRes.total">
       </el-pagination>
     </el-card>
-    <el-dialog v-model="formVisible" width="800" :title="!formData.row_id?'创建':'修改'">
+    <el-dialog v-model="formVisible" width="800" :title="!formData.row_id?T('Create') :T('Update') ">
       <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
-        <el-form-item label="用户" prop="user_id" required>
+        <el-form-item :label="T('Owner')" prop="user_id" required>
           <el-select v-model="formData.user_id" @change="changeUser">
             <el-option
                 v-for="item in allUsers"
@@ -68,25 +68,25 @@
         <el-form-item label="id" prop="id" required>
           <el-input v-model="formData.id"></el-input>
         </el-form-item>
-        <el-form-item label="用户名" prop="username">
+        <el-form-item :label="T('Username')" prop="username">
           <el-input v-model="formData.username"></el-input>
         </el-form-item>
-        <el-form-item label="别名" prop="alias">
+        <el-form-item :label="T('Alias')" prop="alias">
           <el-input v-model="formData.alias"></el-input>
         </el-form-item>
-        <el-form-item label="hash" prop="hash">
+        <el-form-item :label="T('Hash')" prop="hash">
           <el-input v-model="formData.hash"></el-input>
         </el-form-item>
-        <el-form-item label="主机名" prop="hostname">
+        <el-form-item :label="T('Hostname')" prop="hostname">
           <el-input v-model="formData.hostname"></el-input>
         </el-form-item>
-        <el-form-item label="登录名" prop="login_name">
-          <el-input v-model="formData.login_name"></el-input>
+        <el-form-item :label="T('LoginName')" prop="loginName">
+          <el-input v-model="formData.loginName"></el-input>
         </el-form-item>
-        <el-form-item label="密码" prop="password">
+        <el-form-item :label="T('Password')" prop="password">
           <el-input v-model="formData.password"></el-input>
         </el-form-item>
-        <el-form-item label="平台" prop="platform">
+        <el-form-item :label="T('Platform')" prop="platform">
           <el-select v-model="formData.platform">
             <el-option
                 v-for="item in platformList"
@@ -97,7 +97,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="标签" prop="tags">
+        <el-form-item :label="T('Tags')" prop="tags">
           <el-select v-model="formData.tags" multiple>
             <el-option
                 v-for="item in tagList"
@@ -125,8 +125,8 @@
 
 
         <el-form-item>
-          <el-button @click="formVisible = false">取消</el-button>
-          <el-button @click="submit" type="primary">提交</el-button>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -135,13 +135,11 @@
 
 <script setup>
   import { onActivated, onMounted, reactive, ref, watch } from 'vue'
-  import { create, list, remove, update } from '@/api/address_book'
   import { list as fetchTagList } from '@/api/tag'
-  import { ElMessage, ElMessageBox } from 'element-plus'
   import { loadAllUsers } from '@/global'
-  import { useRoute } from 'vue-router'
   import { useRepositories } from '@/views/address_book/index'
   import { toWebClientLink } from '@/utils/webclient'
+  import { T } from '@/utils/i18n'
 
   const { allUsers, getAllUsers } = loadAllUsers()
   getAllUsers()

src/views/group/index.vue

@@ -1,26 +1,26 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="60px">
+      <el-form inline label-width="80px">
         <!--        <el-form-item label="名称">
                   <el-input v-model="listQuery.name"></el-input>
                 </el-form-item>-->
         <el-form-item>
-          <el-button type="primary" @click="handlerQuery">筛选</el-button>
-          <el-button type="danger" @click="toAdd">添加</el-button>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
     <el-card class="list-body" shadow="hover">
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="id" align="center"></el-table-column>
-        <el-table-column prop="name" label="名称" align="center"/>
-        <el-table-column prop="created_at" label="创建时间" align="center"/>
-        <el-table-column prop="updated_at" label="更新时间" align="center"/>
-        <el-table-column label="操作" align="center">
+        <el-table-column prop="name" :label="T('Name')" align="center"/>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
+        <el-table-column :label="T('Actions')" align="center">
           <template #default="{row}">
-            <el-button @click="toEdit(row)">编辑</el-button>
-            <el-button type="danger" @click="del(row)">删除</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -34,12 +34,12 @@
                      :total="listRes.total">
       </el-pagination>
     </el-card>
-    <el-dialog v-model="formVisible" :title="!formData.id?'创建':'修改'" width="800">
+    <el-dialog v-model="formVisible" :title="!formData.id?T('Create'):T('Update')" width="800">
       <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
-        <el-form-item label="名称" prop="name" required>
+        <el-form-item :label="T('Name')" prop="name" required>
           <el-input v-model="formData.name"></el-input>
         </el-form-item>
-        <el-form-item label="类型" prop="type" required>
+        <el-form-item :label="T('Type')" prop="type" required>
           <el-radio-group v-model="formData.type">
             <el-radio v-for="item in groupTypes" :key="item.value" :label="item.value" style="display: block">
               {{ item.label }}
@@ -48,8 +48,8 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item>
-          <el-button @click="formVisible = false">取消</el-button>
-          <el-button @click="submit" type="primary">提交</el-button>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -60,6 +60,7 @@
   import { onMounted, reactive, watch, ref, onActivated } from 'vue'
   import { list, create, update, detail, remove } from '@/api/group'
   import { ElMessage, ElMessageBox } from 'element-plus'
+  import { T } from '@/utils/i18n'
 
   const listRes = reactive({
     list: [], total: 0, loading: false,
@@ -87,9 +88,9 @@
   }
 
   const del = async (row) => {
-    const cf = await ElMessageBox.confirm('确定删除么?', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
       type: 'warning',
     }).catch(_ => false)
     if (!cf) {
@@ -98,7 +99,7 @@
 
     const res = await remove({ id: row.id }).catch(_ => false)
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       getList()
     }
   }
@@ -110,8 +111,8 @@
   watch(() => listQuery.page_size, handlerQuery)
 
   const groupTypes = [
-    { label: '普通组', value: 1, note: '只有管理员能看到小组成员和成员的设备' },
-    { label: '共享组', value: 2, note: '所有用户都能看到小组成员和成员的设备' },
+    { label: T('CommonGroup'), value: 1, note: T('CommonGroupNote') },
+    { label: T('SharedGroup'), value: 2, note: T('SharedGroupNote') },
   ]
   const formVisible = ref(false)
   const formData = reactive({
@@ -136,7 +137,7 @@
     const api = formData.id ? update : create
     const res = await api(formData).catch(_ => false)
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       formVisible.value = false
       getList()
     }

src/views/login/log.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="60px">
+      <el-form inline label-width="80px">
         <el-form-item label="用户">
           <el-select v-model="listQuery.user_id" clearable>
             <el-option

src/views/login/login.vue

@@ -1,65 +1,57 @@
 <template>
   <div class="login">
     <el-card class="login-card">
-      <h1>登录</h1>
-      <el-form label-width="60px">
-        <el-form-item label="用户名">
+      <h1>{{ T('Login') }}</h1>
+      <el-form label-width="100px">
+        <el-form-item :label=" T('Username') ">
           <el-input v-model="form.username"></el-input>
         </el-form-item>
-        <el-form-item label="密码">
+        <el-form-item :label=" T('Password') ">
           <el-input v-model="form.password" type="password" @keyup.enter.native="login" show-password></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="login" type="primary">登录</el-button>
+          <el-button @click="login" type="primary">{{ T('Login') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
   </div>
 </template>
 
-<script>
+<script setup>
   import { defineComponent, reactive } from 'vue'
   import { useUserStore } from '@/store/user'
   import { ElMessage } from 'element-plus'
   import { useRoute, useRouter } from 'vue-router'
+  import { T } from '@/utils/i18n'
 
-  export default defineComponent({
-    setup (props) {
-      const userStore = useUserStore()
-      const route = useRoute()
-      const router = useRouter()
+  const userStore = useUserStore()
+  const route = useRoute()
+  const router = useRouter()
 
-      let platform = window.navigator.platform
-      if (navigator.platform.indexOf('Mac') === 0) {
-        platform = 'mac'
-      } else if (navigator.platform.indexOf('Win') === 0) {
-        platform = 'windows'
-      } else if (navigator.platform.indexOf('Linux armv') === 0) {
-        platform = 'android'
-      } else if (navigator.platform.indexOf('Linux') === 0) {
-        platform = 'linux'
-      }
+  let platform = window.navigator.platform
+  if (navigator.platform.indexOf('Mac') === 0) {
+    platform = 'mac'
+  } else if (navigator.platform.indexOf('Win') === 0) {
+    platform = 'windows'
+  } else if (navigator.platform.indexOf('Linux armv') === 0) {
+    platform = 'android'
+  } else if (navigator.platform.indexOf('Linux') === 0) {
+    platform = 'linux'
+  }
 
-      const form = reactive({
-        username: '',
-        password: '',
-        platform: platform,
-      })
-      const redirect = route.query?.redirect
-      const login = async () => {
-        const res = await userStore.login(form)
-        if (res) {
-          ElMessage.success('登录成功')
-          router.push({ path: redirect || '/', replace: true })
-        }
-      }
-      return {
-        redirect,
-        form,
-        login,
-      }
-    },
+  const form = reactive({
+    username: '',
+    password: '',
+    platform: platform,
   })
+  const redirect = route.query?.redirect
+  const login = async () => {
+    const res = await userStore.login(form)
+    if (res) {
+      ElMessage.success(T('LoginSuccess'))
+      router.push({ path: redirect || '/', replace: true })
+    }
+  }
 </script>
 
 <style scoped lang="scss">

src/views/my/address_book/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="60px">
+      <el-form inline label-width="80px">
         <el-form-item>
-          <el-button type="primary" @click="handlerQuery">筛选</el-button>
-          <el-button type="danger" @click="toAdd">添加</el-button>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -12,19 +12,19 @@
       <!--      <el-tag type="danger" style="margin-bottom: 10px">不建议在此操作地址簿，可能会造成数据不同步</el-tag>-->
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="id" align="center"/>
-        <el-table-column prop="username" label="用户名" align="center"/>
-        <el-table-column prop="hostname" label="主机名" align="center"/>
-        <el-table-column prop="alias" label="别名" align="center"/>
-        <el-table-column prop="platform" label="平台" align="center"/>
-        <el-table-column prop="hash" label="hash" align="center"/>
-        <el-table-column prop="tags" label="标签" align="center"/>
+        <el-table-column prop="username" :label="T('Username')" align="center"/>
+        <el-table-column prop="hostname" :label="T('Hostname')" align="center"/>
+        <el-table-column prop="alias" :label="T('Alias')" align="center"/>
+        <el-table-column prop="platform" :label="T('Platform')" align="center"/>
+        <el-table-column prop="hash" :label="T('Hash')" align="center"/>
+        <el-table-column prop="tags" :label="T('Tags')" align="center"/>
         <!--        <el-table-column prop="created_at" label="创建时间" align="center"/>-->
         <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
-        <el-table-column label="操作" align="center" width="400">
+        <el-table-column :label="T('Actions')" align="center" width="400">
           <template #default="{row}">
             <el-button type="success" @click="toWebClientLink(row)">Web-Client</el-button>
-            <el-button @click="toEdit(row)">编辑</el-button>
-            <el-button type="danger" @click="del(row)">删除</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -38,30 +38,30 @@
                      :total="listRes.total">
       </el-pagination>
     </el-card>
-    <el-dialog v-model="formVisible" width="800" :title="!formData.row_id?'创建':'修改'">
+    <el-dialog v-model="formVisible" width="800" :title="!formData.row_id?T('Create') :T('Update') ">
       <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
         <el-form-item label="id" prop="id" required>
           <el-input v-model="formData.id"></el-input>
         </el-form-item>
-        <el-form-item label="用户名" prop="username">
+        <el-form-item :label="T('Username')" prop="username">
           <el-input v-model="formData.username"></el-input>
         </el-form-item>
-        <el-form-item label="别名" prop="alias">
+        <el-form-item :label="T('Alias')" prop="alias">
           <el-input v-model="formData.alias"></el-input>
         </el-form-item>
-        <el-form-item label="hash" prop="hash">
+        <el-form-item :label="T('Hash')" prop="hash">
           <el-input v-model="formData.hash"></el-input>
         </el-form-item>
-        <el-form-item label="主机名" prop="hostname">
+        <el-form-item :label="T('Hostname')" prop="hostname">
           <el-input v-model="formData.hostname"></el-input>
         </el-form-item>
-        <el-form-item label="登录名" prop="login_name">
-          <el-input v-model="formData.login_name"></el-input>
+        <el-form-item :label="T('LoginName')" prop="loginName">
+          <el-input v-model="formData.loginName"></el-input>
         </el-form-item>
-        <el-form-item label="密码" prop="password">
+        <el-form-item :label="T('Password')" prop="password">
           <el-input v-model="formData.password"></el-input>
         </el-form-item>
-        <el-form-item label="平台" prop="platform">
+        <el-form-item :label="T('Platform')" prop="platform">
           <el-select v-model="formData.platform">
             <el-option
                 v-for="item in platformList"
@@ -72,7 +72,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="标签" prop="tags">
+        <el-form-item :label="T('Tags')" prop="tags">
           <el-select v-model="formData.tags" multiple>
             <el-option
                 v-for="item in tagList"
@@ -100,8 +100,8 @@
 
 
         <el-form-item>
-          <el-button @click="formVisible = false">取消</el-button>
-          <el-button @click="submit" type="primary">提交</el-button>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -110,10 +110,10 @@
 
 <script setup>
   import { onActivated, onMounted, reactive, ref, watch } from 'vue'
-  import { create, list, remove, update } from '@/api/address_book'
   import { list as fetchTagList } from '@/api/tag'
   import { useRepositories } from '@/views/address_book'
   import { toWebClientLink } from '@/utils/webclient'
+  import { T } from '@/utils/i18n'
 
   const tagList = ref([])
   const fetchTagListData = async () => {
@@ -136,8 +136,6 @@
     toEdit,
     toAdd,
     submit,
-    activeChange,
-    currentColor,
   } = useRepositories()
 
   listQuery.is_my = 1
@@ -149,29 +147,6 @@
 
   watch(() => listQuery.page_size, handlerQuery)
 
-  /*watch(() => listRes.list, () => {
-        const peers = {}
-        listRes.list.map(item => {
-          peers[item.id] = {
-            'view-style': 'shrink',
-            tm: new Date().getTime(),
-            info: {
-              'id': item.id,
-              'username': item.username,
-              'hostname': item.hostname,
-              'alias': item.alias,
-              'platform': item.platform,
-              'hash': item.hash,
-              'tags': item.tags,
-            },
-          }
-        })
-        localStorage.setItem('peers', JSON.stringify(peers))
-      },
-      {
-        immediate: true,
-      })*/
-
 </script>
 
 <style scoped lang="scss">

src/views/my/info.vue

@@ -1,26 +1,26 @@
 <template>
   <div>
-    <el-card title="个人信息">
+    <el-card :title="T('Userinfo')">
       <el-form class="info-form" ref="form" label-width="120px" label-suffix="：">
-        <el-form-item label="用户名">
+        <el-form-item :label="T('Username')">
           <div>{{ userStore.username }}</div>
         </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-button type="danger" @click="showChangePwd">修改密码</el-button>
+        <el-form-item :label="T('Password')" prop="password">
+          <el-button type="danger" @click="showChangePwd">{{ T('ChangePassword') }}</el-button>
         </el-form-item>
         <el-form-item label="OIDC">
           <el-table :data="oidcData" border fit>
-            <el-table-column label="平台" prop="third_type" align="center"></el-table-column>
-            <el-table-column label="状态" prop="status" align="center">
+            <el-table-column :label="T('Platform')" prop="third_type" align="center"></el-table-column>
+            <el-table-column :label="T('Status')" prop="status" align="center">
               <template #default="{ row }">
-                <el-tag v-if="row.status === 1" type="success">已绑定</el-tag>
-                <el-tag v-else type="danger">未绑定</el-tag>
+                <el-tag v-if="row.status === 1" type="success">{{ T('HasBind') }}</el-tag>
+                <el-tag v-else type="danger">{{ T('NoBind') }}</el-tag>
               </template>
             </el-table-column>
-            <el-table-column label="操作" align="center" width="200">
+            <el-table-column :label="T('Actions')" align="center" width="200">
               <template #default="{ row }">
-                <el-button v-if="row.status === 1" type="danger" size="small" @click="toUnBind(row)">解除绑定</el-button>
-                <el-button v-else type="success" size="small" @click="toBind(row)">去绑定</el-button>
+                <el-button v-if="row.status === 1" type="danger" size="small" @click="toUnBind(row)">{{ T('UnBind') }}</el-button>
+                <el-button v-else type="success" size="small" @click="toBind(row)">{{ T('ToBind') }}</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -38,6 +38,7 @@
   import { bind, unbind } from '@/api/oauth'
   import { myOauth } from '@/api/user'
   import { ElMessageBox } from 'element-plus'
+  import { T } from '@/utils/i18n'
 
   const userStore = useUserStore()
   const changePwdVisible = ref(false)
@@ -61,9 +62,9 @@
     }
   }
   const toUnBind = async (row) => {
-    const cf = await ElMessageBox.confirm('确定解除绑定么?', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('UnBind') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
       type: 'warning',
     }).catch(_ => false)
     if (!cf) {

src/views/my/tag/index.vue

@@ -1,18 +1,18 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="60px">
+      <el-form inline label-width="80px">
         <el-form-item>
-          <el-button type="primary" @click="handlerQuery">筛选</el-button>
-          <el-button type="danger" @click="toAdd">添加</el-button>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
     <el-card class="list-body" shadow="hover">
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="id" align="center"/>
-        <el-table-column prop="name" label="名称" align="center"/>
-        <el-table-column prop="color" label="颜色" align="center">
+        <el-table-column prop="name" :label="T('Name')" align="center"/>
+        <el-table-column prop="color" :label="T('Color')" align="center">
           <template #default="{row}">
             <div class="colors">
               <div style="background-color: #efeff2" class="colorbox">
@@ -26,12 +26,12 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" align="center"/>
-        <el-table-column prop="updated_at" label="更新时间" align="center"/>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
         <el-table-column label="操作" align="center">
           <template #default="{row}">
-            <el-button @click="toEdit(row)">编辑</el-button>
-            <el-button type="danger" @click="del(row)">删除</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -45,12 +45,12 @@
                      :total="listRes.total">
       </el-pagination>
     </el-card>
-    <el-dialog v-model="formVisible" :title="!formData.id?'创建':'修改'" width="800">
+    <el-dialog v-model="formVisible" :title="!formData.id?T('Create'):T('Update')" width="800">
       <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
-        <el-form-item label="名称" prop="name" required>
+        <el-form-item :label="T('Name')" prop="name" required>
           <el-input v-model="formData.name"></el-input>
         </el-form-item>
-        <el-form-item label="颜色" prop="color" required>
+        <el-form-item :label="T('Color')" prop="color" required>
           <el-color-picker v-model="formData.color" show-alpha @active-change="activeChange"></el-color-picker>
           <br>
           <div class="colors">
@@ -65,8 +65,8 @@
           </div>
         </el-form-item>
         <el-form-item>
-          <el-button @click="formVisible = false">取消</el-button>
-          <el-button @click="submit" type="primary">提交</el-button>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -76,6 +76,7 @@
 <script setup>
   import { onMounted, watch, onActivated } from 'vue'
   import { useRepositories } from '@/views/tag'
+  import { T } from '@/utils/i18n'
 
   const {
     listRes,

src/views/oauth/bind.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="oauth">
     <el-card class="card">
-      <h2>您正在授权绑定</h2>
+      <h2>{{ T('OauthBinding') }}</h2>
       <el-form class="info" label-width="100px">
-        <el-form-item label="平台">
+        <el-form-item :label="T('Op')">
           <div class="impt">{{ oauthInfo.op }}</div>
         </el-form-item>
-        <el-form-item label="用户名">
+        <el-form-item :label="T('ThirdName')">
           <div class="impt">{{ oauthInfo.third_name }}</div>
         </el-form-item>
         <el-form-item label-width="0">
-          <el-button style="width: 100%" v-if="!resStatus" type="success" size="large" @click="toConfirm">绑定</el-button>
+          <el-button style="width: 100%" v-if="!resStatus" type="success" size="large" @click="toConfirm">{{ T('Bind') }}</el-button>
         </el-form-item>
         <el-form-item label-width="0">
-          <el-button style="width: 100%" size="large" @click="out">关闭页面</el-button>
+          <el-button style="width: 100%" size="large" @click="out">{{ T('Close') }}</el-button>
         </el-form-item>
       </el-form>
-      如果不是您操作的授权，请直接关闭页面
+      {{ T('OauthCloseNote') }}
     </el-card>
   </div>
 </template>
@@ -26,6 +26,7 @@
   import { info, confirm, bindConfirm } from '@/api/oauth'
   import { useRoute, useRouter } from 'vue-router'
   import { ElMessage } from 'element-plus'
+  import { T } from '@/utils/i18n'
 
   const oauthInfo = ref({})
   const route = useRoute()
@@ -48,7 +49,7 @@
     const res = await bindConfirm({ code }).catch(_ => false)
     if (res) {
       resStatus.value = 1
-      ElMessage.success('操作成功,3秒后将自动关闭本页面')
+      ElMessage.success(T('OperationSuccessAndCloseAfter3Seconds'))
       setTimeout(_ => {
         out()
       }, 3000)

src/views/oauth/index.vue

@@ -1,24 +1,24 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="60px">
+      <el-form inline label-width="80px">
         <el-form-item>
-          <el-button type="primary" @click="handlerQuery">筛选</el-button>
-          <el-button type="danger" @click="toAdd">添加</el-button>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
     <el-card class="list-body" shadow="hover">
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="id" align="center"/>
-        <el-table-column prop="op" label="名称" align="center"/>
-        <el-table-column prop="auto_register" label="自动注册" align="center"/>
-        <el-table-column prop="created_at" label="创建时间" align="center"/>
-        <el-table-column prop="updated_at" label="更新时间" align="center"/>
-        <el-table-column label="操作" align="center">
+        <el-table-column prop="op" :label="T('Op')" align="center"/>
+        <el-table-column prop="auto_register" :label="T('AutoRegister')" align="center"/>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
+        <el-table-column :label="T('Actions')" align="center">
           <template #default="{row}">
-            <el-button @click="toEdit(row)">编辑</el-button>
-            <el-button type="danger" @click="del(row)">删除</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -32,7 +32,7 @@
                      :total="listRes.total">
       </el-pagination>
     </el-card>
-    <el-dialog v-model="formVisible" :title="!formData.id?'创建':'修改'" width="800">
+    <el-dialog v-model="formVisible" :title="!formData.id?T('Create') :T('Update')" width="800">
       <el-form class="dialog-form" ref="form" :model="formData" :rules="rules" label-width="120px">
         <el-form-item label="ClientId" prop="client_id">
           <el-input v-model="formData.client_id"></el-input>
@@ -43,23 +43,23 @@
         <el-form-item label="RedirectUrl" prop="redirect_url">
           <el-input v-model="formData.redirect_url"></el-input>
         </el-form-item>
-        <el-form-item label="类型" prop="op" >
+        <el-form-item label="op" prop="op">
           <el-radio-group v-model="formData.op" :disabled="!!formData.id">
-            <el-radio v-for="item in ops" :key="item.value" :label="item.value" style="display: block">
+            <el-radio v-for="item in ops" :key="item.value" :value="item.value" style="display: block">
               {{ item.label }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="自动注册" prop="open_auto_register">
+        <el-form-item :label="T('AutoRegister')" prop="auto_register">
           <el-switch v-model="formData.auto_register"
                      :active-value="true"
                      :inactive-value="false"
           ></el-switch>
-          <div style="display: block;margin-left: 10px">如果开启,当用户使用oauth登录而没绑定时,会自动注册一个账号</div>
+          <div style="display: block;margin-left: 10px">{{ T('AutoRegisterNote') }}</div>
         </el-form-item>
         <el-form-item>
-          <el-button @click="formVisible = false">取消</el-button>
-          <el-button @click="submit" type="primary">提交</el-button>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -70,6 +70,7 @@
   import { onMounted, reactive, watch, ref, onActivated } from 'vue'
   import { list, create, update, detail, remove } from '@/api/oauth'
   import { ElMessage, ElMessageBox } from 'element-plus'
+  import { T } from '@/utils/i18n'
 
   const listRes = reactive({
     list: [], total: 0, loading: false,
@@ -100,9 +101,9 @@
   }
 
   const del = async (row) => {
-    const cf = await ElMessageBox.confirm('确定删除么?', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
       type: 'warning',
     }).catch(_ => false)
     if (!cf) {
@@ -111,7 +112,7 @@
 
     const res = await remove({ id: row.id }).catch(_ => false)
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       getList()
     }
   }
@@ -132,10 +133,10 @@
     auto_register: false,
   })
   const rules = {
-    client_id: [{ required: true, message: '请输入ClientId', trigger: 'blur' }],
-    client_secret: [{ required: true, message: '请输入ClientSecret', trigger: 'blur' }],
-    redirect_url: [{ required: true, message: '请输入RedirectUrl', trigger: 'blur' }],
-    op: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+    client_id: [{ required: true, message: T('ParamRequired', { param: 'client_id' }), trigger: 'blur' }],
+    client_secret: [{ required: true, message: T('ParamRequired', { param: 'client_secret' }), trigger: 'blur' }],
+    redirect_url: [{ required: true, message: T('ParamRequired', { param: 'redirect_url' }), trigger: 'blur' }],
+    op: [{ required: true, message: T('ParamRequired', { param: 'op' }), trigger: 'blur' }],
   }
   const toEdit = (row) => {
     formVisible.value = true
@@ -165,7 +166,7 @@
     const api = formData.id ? update : create
     const res = await api(formData).catch(_ => false)
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       formVisible.value = false
       getList()
     }

src/views/oauth/login.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="oauth">
     <el-card class="card">
-      <h2>您正在授权登录</h2>
+      <h2>{{ T('OauthLogining') }}</h2>
       <el-form class="info" label-width="100px">
-        <el-form-item label="设备">
+        <el-form-item :label="T('Device')">
           <div class="impt">{{ oauthInfo.device_name }}</div>
         </el-form-item>
         <el-form-item label="ID">
           <div class="impt">{{ oauthInfo.id }}</div>
         </el-form-item>
         <el-form-item label-width="0">
-          <el-button style="width: 100%" v-if="!resStatus" type="success" size="large" @click="toConfirm">授权登录</el-button>
+          <el-button style="width: 100%" v-if="!resStatus" type="success" size="large" @click="toConfirm">{{ T('ConfirmOauth') }}</el-button>
         </el-form-item>
         <el-form-item label-width="0">
-          <el-button style="width: 100%" size="large" @click="out">关闭页面</el-button>
+          <el-button style="width: 100%" size="large" @click="out">{{ T('Close') }}</el-button>
         </el-form-item>
       </el-form>
-      如果不是您操作的授权，请直接关闭页面
+      {{ T('OauthCloseNote') }}
     </el-card>
   </div>
 </template>
@@ -48,7 +48,7 @@
     const res = await confirm({ code }).catch(_ => false)
     if (res) {
       resStatus.value = 1
-      ElMessage.success('操作成功,3秒后将自动关闭本页面')
+      ElMessage.success(T('OperationSuccessAndCloseAfter3Seconds'))
       setTimeout(_ => {
         out()
       }, 3000)

src/views/peer/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="60px">
+      <el-form inline label-width="80px">
         <el-form-item>
-          <el-button type="primary" @click="handlerQuery">筛选</el-button>
-          <el-button type="danger" @click="toAdd">添加</el-button>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -12,19 +12,19 @@
       <el-table :data="listRes.list" v-loading="listRes.loading" border size="small">
         <el-table-column prop="id" label="id" align="center"/>
         <el-table-column prop="cpu" label="cpu" align="center"/>
-        <el-table-column prop="hostname" label="主机名" align="center"/>
-        <el-table-column prop="memory" label="内存" align="center"/>
-        <el-table-column prop="os" label="系统" align="center"/>
-        <el-table-column prop="username" label="username" align="center"/>
-        <el-table-column prop="uuid" label="uuid" align="center"/>
-        <el-table-column prop="version" label="版本号" align="center"/>
-        <el-table-column prop="created_at" label="创建时间" align="center"/>
-        <el-table-column prop="updated_at" label="更新时间" align="center"/>
-        <el-table-column label="操作" align="center" width="400">
+        <el-table-column prop="hostname" :label="T('Hostname')" align="center"/>
+        <el-table-column prop="memory" :label="T('Memory')" align="center"/>
+        <el-table-column prop="os" :label="T('Os')" align="center"/>
+        <el-table-column prop="username" :label="T('Username')" align="center"/>
+        <el-table-column prop="uuid" :label="T('Uuid')" align="center"/>
+        <el-table-column prop="version" :label="T('Version')" align="center"/>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
+        <el-table-column :label="T('Actions')" align="center" width="400">
           <template #default="{row}">
             <el-button type="success" @click="toWebClientLink(row)">Web-Client</el-button>
-            <el-button @click="toEdit(row)">编辑</el-button>
-            <el-button type="danger" @click="del(row)">删除</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -38,36 +38,36 @@
                      :total="listRes.total">
       </el-pagination>
     </el-card>
-    <el-dialog v-model="formVisible" :title="!formData.row_id?'创建':'修改'" width="800">
+    <el-dialog v-model="formVisible" :title="!formData.row_id?T('Create'):T('Update')" width="800">
       <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
         <el-form-item label="id" prop="id" required>
           <el-input v-model="formData.id"></el-input>
         </el-form-item>
-        <el-form-item label="用户名" prop="username">
+        <el-form-item :label="T('Username')" prop="username">
           <el-input v-model="formData.username"></el-input>
         </el-form-item>
-        <el-form-item label="主机名" prop="hostname">
+        <el-form-item :label="T('Hostname')" prop="hostname">
           <el-input v-model="formData.hostname"></el-input>
         </el-form-item>
         <el-form-item label="cpu" prop="cpu">
           <el-input v-model="formData.cpu"></el-input>
         </el-form-item>
-        <el-form-item label="内存" prop="memory">
+        <el-form-item :label="T('Memory')" prop="memory">
           <el-input v-model="formData.memory"></el-input>
         </el-form-item>
-        <el-form-item label="系统" prop="os">
+        <el-form-item :label="T('Os')" prop="os">
           <el-input v-model="formData.os"></el-input>
         </el-form-item>
-        <el-form-item label="uuid" prop="uuid">
+        <el-form-item :label="T('Uuid')" prop="uuid">
           <el-input v-model="formData.uuid"></el-input>
         </el-form-item>
-        <el-form-item label="版本" prop="version">
+        <el-form-item :label="T('Version')" prop="version">
           <el-input v-model="formData.version"></el-input>
         </el-form-item>
 
         <el-form-item>
-          <el-button @click="formVisible = false">取消</el-button>
-          <el-button @click="submit" type="primary">提交</el-button>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -77,10 +77,9 @@
 <script setup>
   import { onActivated, onMounted, reactive, ref, watch } from 'vue'
   import { create, list, remove, update } from '@/api/peer'
-  import { list as fetchTagList } from '@/api/tag'
   import { ElMessage, ElMessageBox } from 'element-plus'
-  import { loadAllUsers } from '@/global'
   import { toWebClientLink } from '@/utils/webclient'
+  import { T } from '@/utils/i18n'
 
   const listRes = reactive({
     list: [], total: 0, loading: false,
@@ -108,9 +107,9 @@
   }
 
   const del = async (row) => {
-    const cf = await ElMessageBox.confirm('确定删除么?', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
       type: 'warning',
     }).catch(_ => false)
     if (!cf) {
@@ -119,7 +118,7 @@
 
     const res = await remove({ row_id: row.row_id }).catch(_ => false)
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       getList()
     }
   }
@@ -173,7 +172,7 @@
     const api = formData.row_id ? update : create
     const res = await api(formData).catch(_ => false)
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       formVisible.value = false
       getList()
     }

src/views/tag/index.js

@@ -2,6 +2,7 @@ import { onActivated, onMounted, reactive, ref, watch } from 'vue'
 import { create, list, remove, update } from '@/api/tag'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRoute } from 'vue-router'
+import { T } from '@/utils/i18n'
 
 export function useRepositories () {
   //获取query
@@ -74,9 +75,9 @@ export function useRepositories () {
   }
 
   const del = async (row) => {
-    const cf = await ElMessageBox.confirm('确定删除么?', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
       type: 'warning',
     }).catch(_ => false)
     if (!cf) {
@@ -85,7 +86,7 @@ export function useRepositories () {
 
     const res = await remove({ id: row.id }).catch(_ => false)
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       getList()
     }
   }
@@ -133,7 +134,7 @@ export function useRepositories () {
     console.log(data)
     const res = await api(data).catch(_ => false)
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       formVisible.value = false
       getList()
     }

src/views/tag/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="60px">
-        <el-form-item label="用户">
+      <el-form inline label-width="80px">
+        <el-form-item :label="T('Owner')">
           <el-select v-model="listQuery.user_id" clearable>
             <el-option
                 v-for="item in allUsers"
@@ -13,21 +13,21 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handlerQuery">筛选</el-button>
-          <el-button type="danger" @click="toAdd">添加</el-button>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
     <el-card class="list-body" shadow="hover">
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="id" align="center"/>
-        <el-table-column label="所属用户" align="center">
+        <el-table-column :label="T('Owner')" align="center">
           <template #default="{row}">
             <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
           </template>
         </el-table-column>
-        <el-table-column prop="name" label="名称" align="center"/>
-        <el-table-column prop="color" label="颜色" align="center">
+        <el-table-column prop="name" :label="T('Name')" align="center"/>
+        <el-table-column prop="color" :label="T('Color')" align="center">
           <template #default="{row}">
             <div class="colors">
               <div style="background-color: #efeff2" class="colorbox">
@@ -41,12 +41,12 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" align="center"/>
-        <el-table-column prop="updated_at" label="更新时间" align="center"/>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
         <el-table-column label="操作" align="center">
           <template #default="{row}">
-            <el-button @click="toEdit(row)">编辑</el-button>
-            <el-button type="danger" @click="del(row)">删除</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -60,12 +60,12 @@
                      :total="listRes.total">
       </el-pagination>
     </el-card>
-    <el-dialog v-model="formVisible" :title="!formData.id?'创建':'修改'" width="800">
+    <el-dialog v-model="formVisible" :title="!formData.id?T('Create'):T('Update')" width="800">
       <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
-        <el-form-item label="名称" prop="name" required>
+        <el-form-item :label="T('Name')" prop="name" required>
           <el-input v-model="formData.name"></el-input>
         </el-form-item>
-        <el-form-item label="颜色" prop="color" required>
+        <el-form-item :label="T('Color')" prop="color" required>
           <el-color-picker v-model="formData.color" show-alpha @active-change="activeChange"></el-color-picker>
           <br>
           <div class="colors">
@@ -79,7 +79,7 @@
             </div>
           </div>
         </el-form-item>
-        <el-form-item label="用户" prop="user_id" required>
+        <el-form-item :label="T('Owner')" prop="user_id" required>
           <el-select v-model="formData.user_id">
             <el-option
                 v-for="item in allUsers"
@@ -90,8 +90,8 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button @click="formVisible = false">取消</el-button>
-          <el-button @click="submit" type="primary">提交</el-button>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -100,13 +100,9 @@
 
 <script setup>
   import { onMounted, reactive, watch, ref, onActivated } from 'vue'
-  import { list, create, update, detail, remove } from '@/api/tag'
-  import { ElMessage, ElMessageBox } from 'element-plus'
   import { loadAllUsers } from '@/global'
-  import { useRoute } from 'vue-router'
   import { useRepositories } from '@/views/tag/index'
-
-
+  import { T } from '@/utils/i18n'
 
   const { allUsers, getAllUsers } = loadAllUsers()
   getAllUsers()
@@ -123,7 +119,7 @@
     submit,
     activeChange,
     currentColor,
-  } = useRepositories(0)
+  } = useRepositories()
 
   onMounted(getList)
   onActivated(getList)

src/views/user/composables/edit.js

@@ -3,6 +3,7 @@ import { create, detail, update, remove } from '@/api/user'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { list as groups } from '@/api/group'
+import { T } from '@/utils/i18n'
 
 export function useGetDetail (id) {
   let item = ref({})  //保留原始值
@@ -28,7 +29,7 @@ export function useGetDetail (id) {
     form,
     item,
     getDetail,
-    groupsList
+    groupsList,
   }
 }
 
@@ -36,9 +37,10 @@ export function useSubmit (form, id) {
   const root = ref(null)
   const router = useRouter()
   const rules = reactive({
-    username: [{ required: true, message: '用户名是必须的' }],
+    username: [{ required: true, message: T('ParamRequired', { param: T('Username') }) }],
+    group_id: [{ required: true, message: T('ParamRequired', { param: T('Group') }) }],
     // nickname: [{ required: true, message: '昵称是必须的' }],
-    status: [{ required: true, message: '请选择状态' }],
+    status: [{ required: true, message: T('ParamRequired', { param: T('Status') }) }],
   })
 
   const validate = async () => {
@@ -65,7 +67,7 @@ export function useSubmit (form, id) {
 
     const res = await submitFunc()
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       router.back()
     }
   }

src/views/user/composables/index.js

@@ -3,6 +3,7 @@ import { list, remove, changePwd } from '@/api/user'
 import { list as groups } from '@/api/group'
 import { useRouter } from 'vue-router'
 import { ElMessageBox, ElMessage } from 'element-plus'
+import { T } from '@/utils/i18n'
 
 export function useRepositories () {
 
@@ -74,15 +75,15 @@ export function useToEditOrAdd () {
     toAdd,
     toEdit,
     toTag,
-    toAddressBook
+    toAddressBook,
   }
 }
 
 export function useDel () {
   const del = async (id) => {
-    const cf = await ElMessageBox.confirm('确定删除么?', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
       type: 'warning',
     }).catch(_ => false)
     if (!cf) {
@@ -99,16 +100,16 @@ export function useDel () {
 
 export function useChangePwd () {
   const changePass = async (admin) => {
-    const input = await ElMessageBox.prompt('请输入新密码', '重置密码', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const input = await ElMessageBox.prompt(T('PleaseInputNewPassword'), T('ResetPassword'), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
     }).catch(_ => false)
     if (!input) {
       return
     }
-    const confirm = await ElMessageBox.confirm('确定重置密码么？', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const confirm = await ElMessageBox.confirm(T('Confirm?', { param: T('ResetPassword') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
     }).catch(_ => false)
     if (!confirm) {
       return
@@ -117,7 +118,7 @@ export function useChangePwd () {
     if (!res) {
       return
     }
-    ElMessage.success('修改成功')
+    ElMessage.success(T('OperationSuccess'))
   }
 
   return { changePass }

src/views/user/edit.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="form-card">
     <el-form ref="root" label-width="120px" :model="form" :rules="rules">
-      <el-form-item label="用户名" prop="username">
+      <el-form-item :label="T('Username')" prop="username">
         <el-input v-model="form.username"></el-input>
       </el-form-item>
-      <el-form-item label="昵称" prop="nickname">
+      <el-form-item :label="T('Nickname')" prop="nickname">
         <el-input v-model="form.nickname"></el-input>
       </el-form-item>
-      <el-form-item label="小组" prop="group_id">
-        <el-select v-model="form.group_id" placeholder="请选择小组">
+      <el-form-item :label="T('Group')" prop="group_id">
+        <el-select v-model="form.group_id">
           <el-option
               v-for="item in groupsList"
               :key="item.id"
@@ -17,57 +17,37 @@
           ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="是否是管理员" prop="is_admin">
+      <el-form-item :label="T('IsAdmin')" prop="is_admin">
         <el-switch v-model="form.is_admin"
                    :active-value="true"
                    :inactive-value="false"
         ></el-switch>
       </el-form-item>
-      <el-form-item label="状态" prop="status">
+      <el-form-item :label="T('Status')" prop="status">
         <el-switch v-model="form.status"
                    :active-value="ENABLE_STATUS"
                    :inactive-value="DISABLE_STATUS"
         ></el-switch>
       </el-form-item>
       <el-form-item>
-        <el-button @click="cancel">取消</el-button>
-        <el-button @click="submit" type="primary">提交</el-button>
+        <el-button @click="cancel">{{ T('Cancel') }}</el-button>
+        <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
-<script>
-  import { defineComponent, toRef } from 'vue'
+<script setup>
   import { useRoute } from 'vue-router'
   import { useGetDetail, useSubmit } from '@/views/user/composables/edit'
   import { ENABLE_STATUS, DISABLE_STATUS } from '@/utils/common_options'
+  import { T } from '@/utils/i18n'
 
-  export default defineComponent({
-    name: 'UserEdit',
-    props: {},
-    setup (props, context) {
+  const route = useRoute()
+  const { form, item, getDetail, groupsList } = useGetDetail(route.params.id)
 
-      const route = useRoute()
-      const { form, item, getDetail, groupsList } = useGetDetail(route.params.id)
+  const { root, rules, validate, submit, cancel } = useSubmit(form, route.params.id)
 
-      const { root, rules, validate, submit, cancel } = useSubmit(form, route.params.id)
-
-      return {
-        form,
-        item,
-        getDetail,
-
-        rules,
-        validate,
-        root,
-        submit,
-        cancel,
-        groupsList,
-        ENABLE_STATUS, DISABLE_STATUS,
-      }
-    },
-  })
 </script>
 
 <style lang="scss" scoped>

src/views/user/index.vue

@@ -1,36 +1,36 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="60px">
-        <el-form-item label="用户名">
+      <el-form inline label-width="80px">
+        <el-form-item :label="T('Username')">
           <el-input v-model="listQuery.username"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handlerQuery">筛选</el-button>
-          <el-button type="danger" @click="toAdd">添加</el-button>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
     <el-card class="list-body" shadow="hover">
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="id" align="center"></el-table-column>
-        <el-table-column prop="username" label="用户名" align="center"/>
-        <el-table-column prop="nickname" label="昵称" align="center"/>
-        <el-table-column label="所在小组" align="center">
+        <el-table-column prop="username" :label="T('Username')" align="center"/>
+        <el-table-column prop="nickname" :label="T('Nickname')" align="center"/>
+        <el-table-column :label="T('Group')" align="center">
           <template #default="{row}">
             <span v-if="row.group_id"> <el-tag>{{ listRes.groups?.find(g => g.id === row.group_id)?.name }} </el-tag> </span>
-            <span v-else> 未分组 </span>
+            <span v-else> - </span>
           </template>
         </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" align="center"/>
-        <el-table-column prop="updated_at" label="更新时间" align="center"/>
-        <el-table-column label="操作" align="center" width="550">
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
+        <el-table-column :label="T('Actions')" align="center" width="650">
           <template #default="{row}">
-            <el-button @click="toTag(row)">他的标签</el-button>
-            <el-button @click="toAddressBook(row)">他的地址簿</el-button>
-            <el-button @click="toEdit(row)">编辑</el-button>
-            <el-button type="warning" @click="changePass(row)">重置密码</el-button>
-            <el-button type="danger" @click="remove(row)">删除</el-button>
+            <el-button @click="toTag(row)">{{ T('UserTags') }}</el-button>
+            <el-button @click="toAddressBook(row)">{{ T('UserAddressBook') }}</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="warning" @click="changePass(row)">{{ T('ResetPassword') }}</el-button>
+            <el-button type="danger" @click="remove(row)">{{ T('Delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -49,7 +49,7 @@
 
 <script setup>
   import { useRepositories, useDel, useToEditOrAdd, useChangePwd } from '@/views/user/composables'
-
+  import { T } from '@/utils/i18n'
   //列表
   const {
     listRes,