From 37992db0e281e5e1e041f009d5b2f93d8d7c2891 Mon Sep 17 00:00:00 2001
From: jzfai <kuhu8866>
Date: Sun, 20 Nov 2022 17:08:51 +0800
Subject: [PATCH] opimize i18n code

---
 src/App.vue                                   |  15 +-
 src/hooks/use-common.js                       |   2 +-
 src/lang/en.js                                | 165 ------------------
 src/lang/en.ts                                | 163 +++++++++++++++++
 src/lang/{index.js => index.ts}               |   0
 src/lang/{zh.js => zh.ts}                     | 105 ++++++-----
 src/layout/app-main/Breadcrumb.vue            |  12 +-
 src/layout/app-main/Navbar.vue                |  10 +-
 src/layout/app-main/TagsView.vue              |  17 +-
 src/layout/app-main/index.vue                 |   3 +-
 src/layout/sidebar/SidebarItem.vue            |   3 +-
 src/router/index.js                           |  21 +--
 src/router/modules/directive.js               |  48 +++++
 src/store/config.js                           |   4 +
 src/views/basic-demo/keep-alive/index.vue     |   2 +-
 .../basic-demo/parent-children/Children.vue   |   2 +-
 .../basic-demo/vue3-template/Vue3Template.vue |   4 +-
 src/views/dashboard/index.vue                 |  44 +++--
 src/views/error-log/index.vue                 |  15 +-
 19 files changed, 348 insertions(+), 287 deletions(-)
 delete mode 100644 src/lang/en.js
 create mode 100644 src/lang/en.ts
 rename src/lang/{index.js => index.ts} (100%)
 rename src/lang/{zh.js => zh.ts} (70%)
 create mode 100644 src/router/modules/directive.js

diff --git a/src/App.vue b/src/App.vue
index d24f6e4..60e1aff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,21 @@
 <template>
-  <el-config-provider :locale="locale" namespace="el" :size="size">
+  <el-config-provider :locale="lang[language]" namespace="el" :size="size">
     <router-view />
   </el-config-provider>
 </template>
-<script setup lang="ts">
+<script setup>
 import { onBeforeMount, onMounted } from 'vue'
-import zhCn from 'element-plus/lib/locale/lang/zh-cn'
+//element-plus lang
+import zh from 'element-plus/lib/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en'
 import { storeToRefs } from 'pinia/dist/pinia'
 import { useBasicStore } from '@/store/basic'
 import { useConfigStore } from '@/store/config'
 import { useErrorLog } from '@/hooks/use-error-log'
-const locale = ref(zhCn) //中文
-// import en from 'element-plus/lib/locale/lang/en'
-// let locale = ref(en) //english
+const lang = { zh, en }
+
 const { settings } = storeToRefs(useBasicStore())
-const { size } = storeToRefs(useConfigStore())
+const { size, language } = storeToRefs(useConfigStore())
 onBeforeMount(() => {
   //set tmp token when setting isNeedLogin false
   if (!settings.value.isNeedLogin) useBasicStore().setToken(settings.value.tmpToken)
diff --git a/src/hooks/use-common.js b/src/hooks/use-common.js
index 4dc7b5d..8dcaf95 100644
--- a/src/hooks/use-common.js
+++ b/src/hooks/use-common.js
@@ -28,7 +28,7 @@ const { t, te } = i18n.global
 import langEn from '@/lang/en'
 export const langTitle = (title) => {
   for (const key of Object.keys(langEn)) {
-    if (te(`${key}.${title}`)) {
+    if (te(`${key}.${title}`) && t(`${key}.${title}`)) {
       return t(`${key}.${title}`)
     }
   }
diff --git a/src/lang/en.js b/src/lang/en.js
deleted file mode 100644
index 7315478..0000000
--- a/src/lang/en.js
+++ /dev/null
@@ -1,165 +0,0 @@
-export default {
-  router: {
-    Dashboard: 'Dashboard',
-    'Setting Switch': 'Setting Switch',
-    Guide: 'Guide',
-    'Error Log': 'Error Log',
-    'ErrorLog Test': 'ErrorLog Test',
-    Example: 'Example',
-    Nested: 'Nested Routes',
-    Menu1: 'Menu1',
-    'Menu1-1': 'Menu 1-1',
-    'Menu1-2': 'Menu 1-2',
-    'Menu1-2-1': 'Menu 1-2-1',
-    'Menu1-2-2': 'Menu 1-2-2',
-    Menu2: 'Menu 2',
-    Table: 'Table',
-    Charts: 'Charts',
-    'Keyboard Chart': 'Keyboard Chart',
-    'Line Chart': 'Line Chart',
-    'Mix Chart': 'Mix Chart',
-    'Echarts Demo': 'Echarts Demo',
-    ExternalLink: 'External Link',
-    CRUD: 'CRUD',
-    'CRUD-Demo': 'CRUD-Demo',
-    ImportExport: 'Import Export',
-    ImgAddPack: 'ImgAdd Pack',
-    WritingDemo: 'Writing Demo',
-    'Hook-Demo': 'Hook-Demo',
-    'Vuex-Demo': 'Vuex-Demo',
-    'Mock-Demo': 'Mock-Demo',
-    'Svg-Demo': 'Svg-Demo',
-    'Parent-Children': 'Parent-Children',
-    'Keep-Alive': 'Keep-Alive',
-    'RouterDemo-F': 'RouterDemo-F',
-    'RouterDemo-S': 'RouterDemo-S',
-    'Use Example': 'Use Example',
-    directive: 'directive',
-    Tinymce: 'Tinymce',
-    'I18n-Demo': 'I18n Demo',
-    Permission: 'Permission',
-    'Role Index': 'Role Index',
-    'Page Permission': 'Page Permission',
-    'Directive Permission': 'Directive Permission',
-    'Code Index': 'Code Index',
-    'Code Page': 'Code Page'
-  },
-  navbar: {
-    dashboard: 'Dashboard',
-    github: 'Github',
-    logOut: 'Log Out',
-    profile: 'Profile',
-    theme: 'Theme',
-    size: 'Global Size'
-  },
-  login: {
-    title: 'Login Form',
-    logIn: 'Login',
-    username: 'Username',
-    password: 'Password',
-    any: 'any',
-    thirdparty: 'Or connect with',
-    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
-  },
-  documentation: {
-    documentation: 'Documentation',
-    github: 'Github Repository'
-  },
-  permission: {
-    addRole: 'New Role',
-    editPermission: 'Edit',
-    roles: 'Your roles',
-    switchRoles: 'Switch roles',
-    tips:
-      'In some cases, using v-permission will have no effect. For example: Element-UI  el-tab or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.',
-    delete: 'Delete',
-    confirm: 'Confirm',
-    cancel: 'Cancel'
-  },
-  guide: {
-    description:
-      'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
-    button: 'Show Guide'
-  },
-  components: {
-    documentation: 'Documentation',
-    tinymceTips:
-      'Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.',
-    dropzoneTips:
-      'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
-    stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
-    backToTopTips1:
-      'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
-    backToTopTips2:
-      'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
-    imageUploadTips:
-      'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
-  },
-  table: {
-    dynamicTips1: 'Fixed header, sorted by header order',
-    dynamicTips2: 'Not fixed header, sorted by click order',
-    dragTips1: 'The default order',
-    dragTips2: 'The after dragging order',
-    title: 'Title',
-    importance: 'Imp',
-    type: 'Type',
-    remark: 'Remark',
-    search: 'Search',
-    add: 'Add',
-    export: 'Export',
-    reviewer: 'reviewer',
-    id: 'ID',
-    date: 'Date',
-    author: 'Author',
-    readings: 'Readings',
-    status: 'Status',
-    actions: 'Actions',
-    edit: 'Edit',
-    publish: 'Publish',
-    draft: 'Draft',
-    delete: 'Delete',
-    cancel: 'Cancel',
-    confirm: 'Confirm'
-  },
-  example: {
-    warning:
-      'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
-  },
-  errorLog: {
-    tips: 'Please click the bug icon in the upper right corner',
-    description:
-      'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
-    documentation: 'Document introduction'
-  },
-  excel: {
-    export: 'Export',
-    selectedExport: 'Export Selected Items',
-    placeholder: 'Please enter the file name (default excel-list)'
-  },
-  zip: {
-    export: 'Export',
-    placeholder: 'Please enter the file name (default file)'
-  },
-  pdf: {
-    tips: 'Here we use window.print() to implement the feature of downloading PDF.'
-  },
-  theme: {
-    change: 'Change Theme',
-    documentation: 'Theme documentation',
-    tips:
-      'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
-  },
-  tagsView: {
-    refresh: 'Refresh',
-    close: 'Close',
-    closeOthers: 'Close Others',
-    closeAll: 'Close All'
-  },
-  settings: {
-    title: 'Page style setting',
-    theme: 'Theme Color',
-    tagsView: 'Open Tags-View',
-    fixedHeader: 'Fixed Header',
-    sidebarLogo: 'Sidebar Logo'
-  }
-}
diff --git a/src/lang/en.ts b/src/lang/en.ts
new file mode 100644
index 0000000..926ced1
--- /dev/null
+++ b/src/lang/en.ts
@@ -0,0 +1,163 @@
+export default {
+  router: {
+    Dashboard: '',
+    'Setting Switch': '',
+    'Error Log': '',
+    'Error Index': '',
+    'Error Generator': '',
+
+    Nested: '',
+    Menu1: '',
+    'Menu1-1': '',
+    'Menu1-2': '',
+    'Menu1-2-1': '',
+    'Menu1-2-2': '',
+    'Menu1-3': '',
+    menu2: '',
+
+    'External Link': '',
+
+    'Basic Demo': '',
+    Hook: '',
+    Pinia: '',
+    Mock: '',
+    'Svg Icon': '',
+    'Parent Children': '',
+    'Second KeepAlive': '',
+    'Tab KeepAlive': '',
+    'Third KeepAlive': '',
+    SecondChild: '',
+    ThirdChild: '',
+
+    Worker: '',
+
+    Permission: '',
+
+    'Permission Switch': '',
+    'Role Index': '',
+    'Code Index': '',
+    'Button Permission': ''
+  },
+  navbar: {
+    Home: '',
+    Github: '',
+    Docs: '',
+    'login out': ''
+  },
+
+  //page
+  dashboard: {
+    'switch theme': '',
+    'switch size': '',
+    'switch language': '',
+    en: 'English',
+    zh: '中文',
+    'Button Group': '',
+    'unocss using': '',
+    'global var': ''
+  },
+  'error-log': {
+    log: '',
+    pageUrl: '',
+    startDate: '',
+    endDate: '',
+    github: '',
+    search: '',
+    reset: '',
+    multiDel: ''
+  },
+  permission: {
+    addRole: '',
+    editPermission: '',
+    roles: '',
+    switchRoles: '',
+    tips:
+      '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
+    delete: '删除',
+    confirm: '确定',
+    cancel: '取消'
+  },
+  guide: {
+    description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
+    button: '打开引导'
+  },
+  components: {
+    documentation: '文档',
+    tinymceTips:
+      '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
+    dropzoneTips:
+      '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',
+    stickyTips: '当页面滚动到预设的位置会吸附在顶部',
+    backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
+    backToTopTips2:
+      '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
+    imageUploadTips:
+      '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
+  },
+  table: {
+    dynamicTips1: '固定表头, 按照表头顺序排序',
+    dynamicTips2: '不固定表头, 按照点击顺序排序',
+    dragTips1: '默认顺序',
+    dragTips2: '拖拽后顺序',
+    title: '标题',
+    importance: '重要性',
+    type: '类型',
+    remark: '点评',
+    search: '搜索',
+    add: '添加',
+    export: '导出',
+    reviewer: '审核人',
+    id: '序号',
+    date: '时间',
+    author: '作者',
+    readings: '阅读数',
+    status: '状态',
+    actions: '操作',
+    edit: '编辑',
+    publish: '发布',
+    draft: '草稿',
+    delete: '删除',
+    cancel: '取 消',
+    confirm: '确 定'
+  },
+  example: {
+    warning:
+      '创建和编辑页面是不能被 keep-alive 缓存的，因为keep-alive 的 include 目前不支持根据路由来缓存，所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果，可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include，直接缓存所有页面。详情见'
+  },
+  errorLog: {
+    tips: '请点击右上角bug小图标',
+    description:
+      '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
+    documentation: '文档介绍'
+  },
+  excel: {
+    export: '导出',
+    selectedExport: '导出已选择项',
+    placeholder: '请输入文件名(默认excel-list)'
+  },
+  zip: {
+    export: '导出',
+    placeholder: '请输入文件名(默认file)'
+  },
+  pdf: {
+    tips: '这里使用   window.print() 来实现下载pdf的功能'
+  },
+  theme: {
+    change: '换肤',
+    documentation: '换肤文档',
+    tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'
+  },
+  tagsView: {
+    refresh: '刷新',
+    close: '关闭',
+    closeOthers: '关闭其它',
+    closeAll: '关闭所有'
+  },
+  settings: {
+    title: '系统布局配置',
+    theme: '主题色',
+    tagsView: '开启 Tags-View',
+    fixedHeader: '固定 Header',
+    sidebarLogo: '侧边栏 Logo'
+  }
+}
diff --git a/src/lang/index.js b/src/lang/index.ts
similarity index 100%
rename from src/lang/index.js
rename to src/lang/index.ts
diff --git a/src/lang/zh.js b/src/lang/zh.ts
similarity index 70%
rename from src/lang/zh.js
rename to src/lang/zh.ts
index 4253bce..270254b 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.ts
@@ -1,10 +1,10 @@
 export default {
   router: {
     Dashboard: '首页',
-    'Setting Switch': '设置文件测试',
-    Guide: '引导页',
-    ErrorLog: '错误日志',
-    'ErrorLog Test': '错误日志测试',
+    'Setting Switch': '配置文件',
+    'Error Log': '错误日志',
+    'Error Index': '错误日志列表',
+    'Error Generator': '错误日志生成',
 
     Nested: '路由嵌套',
     Menu1: '菜单1',
@@ -14,64 +14,57 @@ export default {
     'Menu1-2-2': '菜单 1-2-2',
     'Menu1-3': '菜单 1-3',
     menu2: '菜单 2',
-    Table: '表格',
-    exportExcel: '导出Excel',
-    importExcel: '导入Excel',
-    LowCodePlatform: '低代码平台',
-    RBACMenu: '菜单按钮测试',
-    RBAC: '菜单按钮权限中心',
-    Charts: '图表',
-    'Keyboard Chart': '键盘图表',
-    'Line Chart': '折线图',
-    'Mix Chart': '混合图表',
-    'Echarts Demo': '综合实例',
 
-    CRUD: '增删改查',
-    'CRUD-Demo': '增删改查例子',
-    'Import Export': '导入导出文件',
-    'ImgAdd Pack': '图片上传',
-    'Writing Demo': '写法案例',
-    'Hook-Demo': 'hooks例子',
-    'Vuex-Demo': 'Vuex例子',
-    'Mock-Demo': 'Mock例子',
-    'Svg-Demo': 'Svg例子',
-    'Parent-Children': '父子通信例子',
-    'Keep-Alive': 'Keep-Alive',
-    'RouterDemo-F': '路由跳转页面1',
-    'RouterDemo-S': '路由跳转页面2',
-    'Use Example': '使用例子',
-    Directive: '自定义指令',
-    Tinymce: 'Tinymce富文本',
-    'I18n-Demo': 'i18n例子',
-    dragPane: '拖拽面板',
-    countTo: '数字动画',
-    Permission: '权限',
+    'External Link': '外链',
+
+    'Basic Demo': '基础例子',
+    Hook: 'hook',
+    Pinia: 'pinia',
+    Mock: 'mock',
+    'Svg Icon': 'svg使用',
+    'Parent Children': '父子组件通信',
+    'Second KeepAlive': '二级路由缓存',
+    'Tab KeepAlive': 'tab缓存',
+    'Third KeepAlive': '三级路由缓存',
+    SecondChild: '三级路由示例1',
+    ThirdChild: '三级路由示例2',
+
+    Worker: '多线程',
+
+    Permission: '权限路由',
+
+    'Permission Switch': '权限切换',
     'Role Index': '角色权限',
-    'Page Permission': '角色权限页面',
-    'Directive Permission': '角色指令权限',
-    'Code Index': 'codeArr权限',
-    'Code Page': 'codeArr权限页面'
+    'Code Index': 'Code权限',
+    'Button Permission': '按钮权限'
   },
   navbar: {
-    dashboard: '首页',
-    github: '项目地址',
-    logOut: '退出登录',
-    profile: '个人中心',
-    theme: '换肤',
-    size: '布局大小'
+    Home: '首页',
+    Github: '项目git地址',
+    Docs: '官方文档',
+    'login out': '退出登录'
   },
-  login: {
-    title: '系统登录',
-    logIn: '登录',
-    username: '账号',
-    password: '密码',
-    any: '随便填',
-    thirdparty: '第三方登录',
-    thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
+
+  //page
+  dashboard: {
+    'switch theme': '切换主题色',
+    'switch size': '切换尺寸',
+    'switch language': '切换语言',
+    en: 'English',
+    zh: '中文',
+    'Button Group': '按钮组',
+    'unocss using': 'unocss使用',
+    'global var': '全局静态变量'
   },
-  documentation: {
-    documentation: '文档',
-    github: 'Github 地址'
+  'error-log': {
+    log: '错误日志',
+    pageUrl: '页面路径',
+    startDate: '开始日期',
+    endDate: '结束日期',
+    github: 'Github 地址',
+    search: '查询',
+    reset: '重置',
+    multiDel: '批量删除'
   },
   permission: {
     addRole: '新增角色',
diff --git a/src/layout/app-main/Breadcrumb.vue b/src/layout/app-main/Breadcrumb.vue
index ce3d532..aa83d05 100644
--- a/src/layout/app-main/Breadcrumb.vue
+++ b/src/layout/app-main/Breadcrumb.vue
@@ -5,34 +5,36 @@
       <!--  根据过滤后的数组生成面包屑  -->
       <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
         <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">
-          {{ item.meta?.title }}
+          {{ langTitle(item.meta?.title) }}
         </span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+        <a v-else @click.prevent="handleLink(item)">{{ langTitle(item.meta?.title) }}</a>
       </el-breadcrumb-item>
     </transition-group>
     <!--no transition-->
     <template v-else>
       <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
         <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">
-          {{ item.meta?.title }}
+          {{ langTitle(item.meta?.title) }}
         </span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+        <a v-else @click.prevent="handleLink(item)">{{ langTitle(item.meta?.title) }}</a>
       </el-breadcrumb-item>
     </template>
   </el-breadcrumb>
 </template>
 
 <script setup lang="ts">
+import { langTitle } from '@/hooks/use-common'
 import { ref, watch } from 'vue'
 import { compile } from 'path-to-regexp'
 import { useRoute, useRouter } from 'vue-router'
 import { useBasicStore } from '@/store/basic'
+import type { RouterTypes } from '~/basic'
 const levelList = ref()
 const { settings } = useBasicStore()
 const route = useRoute()
 const getBreadcrumb = () => {
   // only show routes with has  meta.title
-  let matched = route.matched.filter((item) => item.meta?.title)
+  let matched: RouterTypes = route.matched.filter((item) => item.meta?.title)
   //如果首页Dashboard,如果没有，添加Dashboard路由到第一个路由
   const isHasDashboard = matched[0]?.name?.toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
   if (!isHasDashboard) {
diff --git a/src/layout/app-main/Navbar.vue b/src/layout/app-main/Navbar.vue
index 053b9e6..05ec1c6 100644
--- a/src/layout/app-main/Navbar.vue
+++ b/src/layout/app-main/Navbar.vue
@@ -23,16 +23,16 @@
         <template #dropdown>
           <el-dropdown-menu>
             <router-link to="/">
-              <el-dropdown-item>Home</el-dropdown-item>
+              <el-dropdown-item>{{ langTitle('Home') }}</el-dropdown-item>
             </router-link>
             <a target="_blank" href="https://github.com/jzfai/vue3-admin-ts">
-              <el-dropdown-item>Github</el-dropdown-item>
+              <el-dropdown-item>{{ langTitle('Github') }}</el-dropdown-item>
             </a>
             <a target="_blank" href="https://juejin.cn/post/7036302298435289095">
-              <el-dropdown-item>Docs</el-dropdown-item>
+              <el-dropdown-item>{{ langTitle('Docs') }}</el-dropdown-item>
             </a>
             <!--<el-dropdown-item>修改密码</el-dropdown-item>-->
-            <el-dropdown-item divided @click="loginOut">login out</el-dropdown-item>
+            <el-dropdown-item divided @click="loginOut">{{ langTitle('login out') }}</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -41,6 +41,7 @@
 </template>
 
 <script setup lang="ts">
+import { langTitle } from '@/hooks/use-common'
 import { nextTick } from 'vue'
 import { CaretBottom } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'
@@ -51,7 +52,6 @@ import { elMessage } from '@/hooks/use-element'
 import { resetState } from '@/hooks/use-permission'
 const basicStore = useBasicStore()
 const { settings, sidebar, setToggleSideBar } = basicStore
-
 const toggleSideBar = () => {
   setToggleSideBar()
 }
diff --git a/src/layout/app-main/TagsView.vue b/src/layout/app-main/TagsView.vue
index 1e2815c..e295fff 100644
--- a/src/layout/app-main/TagsView.vue
+++ b/src/layout/app-main/TagsView.vue
@@ -16,29 +16,30 @@
           @contextmenu.prevent="openMenu(tag, $event)"
           @click="navigate"
         >
-          {{ tag.title }}
+          {{ langTitle(tag.title) }}
           <Close v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
         </div>
       </router-link>
     </div>
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
-      <li @click="closeOthersTags">Close Others</li>
-      <li @click="closeAllTags(selectedTag)">Close All</li>
+      <li @click="refreshSelectedTag(selectedTag)">{{ langTitle('Refresh') }}</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">{{ langTitle('Close') }}</li>
+      <li @click="closeOthersTags">{{ langTitle('Close Others') }}</li>
+      <li @click="closeAllTags(selectedTag)">{{ langTitle('Close All') }}</li>
     </ul>
   </div>
 </template>
 
 <script setup lang="ts">
+import { langTitle } from '@/hooks/use-common'
 import { getCurrentInstance, nextTick, onMounted, reactive, toRefs, watch } from 'vue'
 import { Close } from '@element-plus/icons-vue'
-
 import { resolve } from 'path-browserify'
 import { useRoute, useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia/dist/pinia'
 import { useBasicStore } from '@/store/basic'
 import { useTagsViewStore } from '@/store/tags-view'
+import type { RouterTypes } from '~/basic'
 const route = useRoute()
 const router = useRouter()
 const state = reactive({
@@ -46,7 +47,7 @@ const state = reactive({
   top: 0,
   left: 0,
   selectedTag: {},
-  affixTags: []
+  affixTags: [] as RouterTypes
 })
 
 const { visitedViews } = storeToRefs(useTagsViewStore())
@@ -83,7 +84,7 @@ const isAffix = (tag) => {
 }
 
 const filterAffixTags = (routes, basePath = '/') => {
-  let tags = []
+  let tags: RouterTypes = []
   routes.forEach((route) => {
     if (route.meta && route.meta.affix) {
       const tagPath = resolve(basePath, route.path)
diff --git a/src/layout/app-main/index.vue b/src/layout/app-main/index.vue
index aec5c8f..77b4740 100644
--- a/src/layout/app-main/index.vue
+++ b/src/layout/app-main/index.vue
@@ -22,13 +22,14 @@ import { useRoute } from 'vue-router'
 import type { RouteLocationMatched } from 'vue-router'
 import { useBasicStore } from '@/store/basic'
 import { cloneDeep } from '@/hooks/use-common'
+import type { rawConfig } from '~/basic'
 const { settings, cachedViews } = storeToRefs(useBasicStore())
 const route = useRoute()
 const key = computed(() => route.path)
 /*listen the component name changing, then to keep-alive the page*/
 // cachePage: is true, keep-alive this Page
 // leaveRmCachePage: is true, keep-alive remote when page leave
-let oldRoute = {}
+let oldRoute: rawConfig = {}
 let deepOldRouter: RouteLocationMatched | null = null
 const basicStore = useBasicStore()
 const removeDeepChildren = (deepOldRouter) => {
diff --git a/src/layout/sidebar/SidebarItem.vue b/src/layout/sidebar/SidebarItem.vue
index e748593..b86b2d4 100644
--- a/src/layout/sidebar/SidebarItem.vue
+++ b/src/layout/sidebar/SidebarItem.vue
@@ -30,6 +30,7 @@ import { resolve } from 'path-browserify'
 import Link from './Link.vue'
 import MenuIcon from './MenuIcon.vue'
 import { isExternal } from '@/hooks/use-layout'
+import type { RouteRawConfig } from '~/basic'
 import { langTitle } from '@/hooks/use-common'
 
 const props = defineProps({
@@ -52,7 +53,7 @@ const props = defineProps({
 //显示sidebarItem 的情况
 const onlyOneChild = ref()
 const showSidebarItem = (children = [], parent) => {
-  const showingChildren = children.filter((item) => {
+  const showingChildren = children.filter((item: RouteRawConfig) => {
     if (item.hidden) {
       return false
     } else {
diff --git a/src/router/index.js b/src/router/index.js
index 9bb7819..0fc1972 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import Layout from '@/layout/index.vue'
 import basicDemo from './modules/basic-demo'
+
 export const constantRoutes = [
   {
     path: '/redirect',
@@ -64,7 +65,7 @@ export const constantRoutes = [
         path: 'error-log',
         component: () => import('@/views/error-log/index.vue'),
         name: 'ErrorLog',
-        meta: { title: 'Index' }
+        meta: { title: 'Error Index' }
       },
       {
         path: 'error-generator',
@@ -165,35 +166,25 @@ export const roleCodeRoutes = [
         path: 'index',
         component: () => import('@/views/roles-codes/index.vue'),
         name: 'RolesCodes',
-        meta: {
-          title: 'index'
-        }
+        meta: { title: 'Permission Switch' }
       },
       {
         path: 'roleIndex',
         component: () => import('@/views/roles-codes/role-index.vue'),
         name: 'RoleIndex',
-        meta: {
-          title: 'Role Index',
-          roles: ['admin']
-        }
+        meta: { title: 'Role Index', roles: ['admin'] }
       },
       {
         path: 'code-index',
         component: () => import('@/views/roles-codes/code-index.vue'),
         name: 'CodeIndex',
-        meta: {
-          title: 'Code Index',
-          code: 16
-        }
+        meta: { title: 'Code Index', code: 16 }
       },
       {
         path: 'button-permission',
         component: () => import('@/views/roles-codes/button-permission.vue'),
         name: 'ButtonPermission',
-        meta: {
-          title: 'Button Permission'
-        }
+        meta: { title: 'Button Permission' }
       }
     ]
   }
diff --git a/src/router/modules/directive.js b/src/router/modules/directive.js
new file mode 100644
index 0000000..ce26e09
--- /dev/null
+++ b/src/router/modules/directive.js
@@ -0,0 +1,48 @@
+import Layout from '@/layout/index.vue'
+
+const directive = {
+  path: '/directive',
+  component: Layout,
+  meta: { title: 'Directive', icon: 'education' },
+  alwaysShow: true,
+  children: [
+    {
+      path: 'copy',
+      component: () => import('@/views/directive/copy.vue'),
+      name: 'copy',
+      meta: { title: 'v-copy' }
+    },
+    {
+      path: 'debounce',
+      component: () => import('@/views/directive/debounce.vue'),
+      name: 'debounce',
+      meta: { title: 'v-debounce' }
+    },
+    {
+      path: 'longpress',
+      component: () => import('@/views/directive/longpress.vue'),
+      name: 'longpress',
+      meta: { title: 'v-longpress' }
+    },
+    {
+      path: 'watermark',
+      component: () => import('@/views/directive/watermark.vue'),
+      name: 'watermark',
+      meta: { title: 'v-watermark' }
+    },
+    {
+      path: 'waves',
+      component: () => import('@/views/directive/waves.vue'),
+      name: 'waves',
+      meta: { title: 'v-waves' }
+    },
+    {
+      path: 'clickoutside',
+      component: () => import('@/views/directive/clickoutside.vue'),
+      name: 'clickoutside',
+      meta: { title: 'v-clickoutside' }
+    }
+  ]
+}
+
+export default directive
diff --git a/src/store/config.js b/src/store/config.js
index cee1f4f..3e186ee 100644
--- a/src/store/config.js
+++ b/src/store/config.js
@@ -1,8 +1,10 @@
+import { langTitle } from '@/hooks/use-common'
 import { defineStore } from 'pinia'
 import settings from '@/settings'
 import { toggleHtmlClass } from '@/theme/utils'
 import { i18n } from '@/lang'
 const { locale } = i18n.global
+import router from '@/router'
 export const useConfigStore = defineStore('config', {
   state: () => {
     return {
@@ -26,6 +28,8 @@ export const useConfigStore = defineStore('config', {
     setLanguage(lang) {
       this.language = lang
       locale.value = lang
+      const route = router.currentRoute
+      document.title = langTitle(route.value.meta?.title) // i18 page title
     }
   }
 })
diff --git a/src/views/basic-demo/keep-alive/index.vue b/src/views/basic-demo/keep-alive/index.vue
index a972166..b865df0 100644
--- a/src/views/basic-demo/keep-alive/index.vue
+++ b/src/views/basic-demo/keep-alive/index.vue
@@ -30,7 +30,7 @@ onActivated(() => {
 onDeactivated(() => {
   console.log('onDeactivated')
 })
-const route = useRoute()
+const route: any = useRoute()
 // cacheGroup为缓存分组  SecondKeepAlive->SecondChild->ThirdChild
 const cacheGroup = ['SecondKeepAlive', 'SecondChild', 'ThirdChild']
 const { delCachedView } = useBasicStore()
diff --git a/src/views/basic-demo/parent-children/Children.vue b/src/views/basic-demo/parent-children/Children.vue
index 0c809ea..95427d6 100644
--- a/src/views/basic-demo/parent-children/Children.vue
+++ b/src/views/basic-demo/parent-children/Children.vue
@@ -49,7 +49,7 @@ const childMethod = () => {
   return 'childMethod'
 }
 
-const vm = getCurrentInstance()?.proxy
+const vm: any = getCurrentInstance()?.proxy
 const getFatherMethod = () => {
   vm?.$parent?.fartherMethod()
 }
diff --git a/src/views/basic-demo/vue3-template/Vue3Template.vue b/src/views/basic-demo/vue3-template/Vue3Template.vue
index a88d669..03bedc5 100644
--- a/src/views/basic-demo/vue3-template/Vue3Template.vue
+++ b/src/views/basic-demo/vue3-template/Vue3Template.vue
@@ -27,13 +27,13 @@ const router = useRouter()
 onMounted(() => {
   console.log('页面挂载了')
 })
-let helloFunc = () => {
+const helloFunc = () => {
   console.log('helloFunc')
 }
 // 导出给父元素使用
 defineExpose({ helloFunc })
 // 导出属性到页面中使用
-let { levelList } = toRefs(state)
+const { levelList } = toRefs(state)
 </script>
 
 <style scoped lang="scss"></style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 8435b6f..6593595 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,29 +1,29 @@
 <template>
   <div class="scroll-y">
-    <div class="mt-10px mb-10px font-bold">switch theme</div>
-    <el-button @click="setTheme('base-theme')">切换主题色(base-theme)(default)</el-button>
-    <el-button @click="setTheme('lighting-theme')">切换主题色(lighting-theme)</el-button>
-    <el-button @click="setTheme('china-red')">切换主题色(china-red)(default)</el-button>
-    <el-button @click="setTheme('dark')">切换主题色(dark-theme)</el-button>
+    <div v-lang class="mt-10px mb-10px font-bold">switch theme</div>
+    <el-button @click="setTheme('base-theme')">base-theme(default)</el-button>
+    <el-button @click="setTheme('lighting-theme')">lighting-theme</el-button>
+    <el-button @click="setTheme('china-red')">china-red(default)</el-button>
+    <el-button @click="setTheme('dark')">dark-theme</el-button>
 
-    <div class="mt-10px mb-10px font-bold">switch size</div>
+    <div v-lang class="mt-10px mb-10px font-bold">switch size</div>
     <el-button @click="setSize('large')">large</el-button>
     <el-button @click="setSize('default')">default</el-button>
     <el-button @click="setSize('small')">small</el-button>
 
-    <div class="mt-10px mb-10px font-bold">switch language</div>
-    <el-button @click="setLanguage('zh')">zh</el-button>
+    <div v-lang class="mt-10px mb-10px font-bold">switch language</div>
     <el-button @click="setLanguage('en')">en</el-button>
+    <el-button @click="setLanguage('zh')">zh</el-button>
 
     <!--example components -->
-    <div class="mb-10px font-bold mt-20px">按钮组</div>
+    <div v-lang class="mb-10px font-bold mt-20px">Button Group</div>
     <el-button type="primary" @click="count++">count is: {{ count }}</el-button>
     <el-button type="success" @click="count++">count is: {{ count }}</el-button>
     <el-button type="warning" @click="count++">count is: {{ count }}</el-button>
     <el-button type="danger" @click="count++">count is: {{ count }}</el-button>
     <el-button type="info" @click="count++">count is: {{ count }}</el-button>
 
-    <div class="mt-30px font-bold mb-10px">unocss使用</div>
+    <div v-lang class="mt-30px font-bold mb-10px">unocss using</div>
     <div class="mb-40px w-900px h-10px text-16px">
       <div>
         you can look
@@ -32,11 +32,33 @@
       </div>
     </div>
 
-    <div class="mt-30px font-bold mb-10px">global var</div>
+    <div v-lang class="mt-30px font-bold mb-10px">global var</div>
     {{ showObj }}
   </div>
 </template>
 <script setup lang="ts">
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+]
 import { ref } from 'vue'
 import { useConfigStore } from '@/store/config'
 const { setTheme, theme, setSize, size, setLanguage, language } = useConfigStore()
diff --git a/src/views/error-log/index.vue b/src/views/error-log/index.vue
index f888458..4f69325 100644
--- a/src/views/error-log/index.vue
+++ b/src/views/error-log/index.vue
@@ -3,10 +3,10 @@
     <!--条件搜索-->
     <el-form ref="refSearchForm" :inline="true" :model="searchForm">
       <el-form-item prop="log">
-        <el-input v-model="searchForm.log" class="w-150px" placeholder="错误日志" />
+        <el-input v-model="searchForm.log" class="w-150px" placeholder="log" />
       </el-form-item>
       <el-form-item prop="pageUrl">
-        <el-input v-model="searchForm.pageUrl" class="w-200px" placeholder="页面路径" />
+        <el-input v-model="searchForm.pageUrl" class="w-200px" placeholder="pageUrl" />
       </el-form-item>
       <el-form-item prop="startEndArr">
         <el-date-picker
@@ -16,15 +16,14 @@
           value-format="YYYY-MM-DD HH:mm:ss"
           class="w-250px"
           range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
+          start-placeholder="startDate"
+          end-placeholder="endDate"
           @change="dateRangePacking"
         />
       </el-form-item>
       <el-form-item>
-        <!--查询按钮-->
-        <el-button type="primary" @click="resetPageReq">查询</el-button>
-        <el-button type="primary" @click="resetForm">重置</el-button>
+        <el-button type="primary" @click="resetPageReq">search</el-button>
+        <el-button type="primary" @click="resetForm">reset</el-button>
       </el-form-item>
     </el-form>
     <div class="rowES mb-10px">
@@ -32,7 +31,7 @@
         <!--        <el-icon style="vertical-align: middle">-->
         <!--          <Delete />-->
         <!--        </el-icon>-->
-        <span style="vertical-align: middle">批量删除</span>
+        <span style="vertical-align: middle">multiDel</span>
       </el-button>
     </div>
     <!--表格和分页-->