chore: update menu and route i18n

vben
1 parent 9bb75147
Showing 31 changed files with 279 additions and 254 deletions
src/hooks/web/useI18n.ts
src/router/index.ts
src/router/menus/modules/dashboard.ts
src/router/menus/modules/demo/charts.ts
src/router/menus/modules/demo/comp.ts
src/router/menus/modules/demo/editor.ts
src/router/menus/modules/demo/excel.ts
src/router/menus/modules/demo/feat.ts
src/router/menus/modules/demo/form.ts
src/router/menus/modules/demo/iframe.ts
src/router/menus/modules/demo/level.ts
src/router/menus/modules/demo/page.ts
src/router/menus/modules/demo/permission.ts
src/router/menus/modules/demo/table.ts
src/router/menus/modules/demo/tree.ts
src/router/menus/modules/home.ts
src/router/routes/index.ts
src/router/routes/modules/dashboard.ts
src/router/routes/modules/demo/charts.ts
src/router/routes/modules/demo/comp.ts
@@ -31,3 +31,10 @@ export function useI18n(namespace?: string) {
     },
   };
 }
+
+// Why write this function？
+// Mainly to configure the vscode i18nn ally plugin. This function is only used for routing and menus. Please use useI18n for other places
+
+// 为什么要编写此函数？
+// 主要用于配合vscode i18nn ally插件。此功能仅用于路由和菜单。请在其他地方使用useIs18n
+export const t = (key: string) => key;
@@ -20,7 +20,7 @@ const router = createRouter({
 // reset router
 export function resetRouter() {
-  const resetWhiteNameList = ['Login', 'Root'];
+  const resetWhiteNameList = ['Login'];
   router.getRoutes().forEach((route) => {
     const { name } = route;
     if (name && !resetWhiteNameList.includes(name as string)) {
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 10,
   menu: {
-    name: 'routes.dashboard.dashboard',
+    name: t('routes.dashboard.dashboard'),
     path: '/dashboard',
     children: [
       {
         path: '/workbench',
-        name: 'routes.dashboard.workbench',
+        name: t('routes.dashboard.workbench'),
       },
       {
         path: '/analysis',
-        name: 'routes.dashboard.analysis',
+        name: t('routes.dashboard.analysis'),
       },
     ],
   },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 500,
   menu: {
-    name: 'routes.demo.charts.charts',
+    name: t('routes.demo.charts.charts'),
     path: '/charts',
     children: [
       {
         path: 'apexChart',
-        name: 'routes.demo.charts.apexChart',
+        name: t('routes.demo.charts.apexChart'),
       },
       {
         path: 'echarts',
@@ -16,15 +17,15 @@ const menu: MenuModule = {
         children: [
           {
             path: 'map',
-            name: 'routes.demo.charts.map',
+            name: t('routes.demo.charts.map'),
           },
           {
             path: 'line',
-            name: 'routes.demo.charts.line',
+            name: t('routes.demo.charts.line'),
           },
           {
             path: 'pie',
-            name: 'routes.demo.charts.pie',
+            name: t('routes.demo.charts.pie'),
           },
         ],
       },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 30,
   menu: {
-    name: 'routes.demo.comp.comp',
+    name: t('routes.demo.comp.comp'),
     path: '/comp',
     tag: {
       dot: true,
@@ -11,91 +12,91 @@ const menu: MenuModule = {
     children: [
       {
         path: 'basic',
-        name: 'routes.demo.comp.basic',
+        name: t('routes.demo.comp.basic'),
       },
       {
         path: 'countTo',
-        name: 'routes.demo.comp.countTo',
+        name: t('routes.demo.comp.countTo'),
       },
       {
         path: 'transition',
-        name: 'routes.demo.comp.transition',
+        name: t('routes.demo.comp.transition'),
       },
       {
         path: 'modal',
-        name: 'routes.demo.comp.modal',
+        name: t('routes.demo.comp.modal'),
       },
       {
         path: 'drawer',
-        name: 'routes.demo.comp.drawer',
+        name: t('routes.demo.comp.drawer'),
       },
       {
         path: 'desc',
-        name: 'routes.demo.comp.desc',
+        name: t('routes.demo.comp.desc'),
       },
       {
         path: 'qrcode',
-        name: 'routes.demo.comp.qrcode',
+        name: t('routes.demo.comp.qrcode'),
       },
       {
         path: 'strength-meter',
-        name: 'routes.demo.comp.strength',
+        name: t('routes.demo.comp.strength'),
       },
       {
         path: 'upload',
-        name: 'routes.demo.comp.upload',
+        name: t('routes.demo.comp.upload'),
       },
       {
         path: 'loading',
-        name: 'routes.demo.comp.loading',
+        name: t('routes.demo.comp.loading'),
         tag: {
           content: 'new',
         },
       },
       {
         path: 'scroll',
-        name: 'routes.demo.comp.scroll',
+        name: t('routes.demo.comp.scroll'),
         children: [
           {
             path: 'basic',
-            name: 'routes.demo.comp.scrollBasic',
+            name: t('routes.demo.comp.scrollBasic'),
           },
           {
             path: 'action',
-            name: 'routes.demo.comp.scrollAction',
+            name: t('routes.demo.comp.scrollAction'),
           },
           {
             path: 'virtualScroll',
-            name: 'routes.demo.comp.virtualScroll',
+            name: t('routes.demo.comp.virtualScroll'),
           },
         ],
       },
       {
         path: 'lazy',
-        name: 'routes.demo.comp.lazy',
+        name: t('routes.demo.comp.lazy'),
         children: [
           {
             path: 'basic',
-            name: 'routes.demo.comp.lazyBasic',
+            name: t('routes.demo.comp.lazyBasic'),
           },
           {
             path: 'transition',
-            name: 'routes.demo.comp.lazyTransition',
+            name: t('routes.demo.comp.lazyTransition'),
           },
         ],
       },
       {
         path: 'verify',
-        name: 'routes.demo.comp.verify',
+        name: t('routes.demo.comp.verify'),
         children: [
           {
             path: 'drag',
-            name: 'routes.demo.comp.verifyDrag',
+            name: t('routes.demo.comp.verifyDrag'),
           },
           {
             path: 'rotate',
-            name: 'routes.demo.comp.verifyRotate',
+            name: t('routes.demo.comp.verifyRotate'),
           },
         ],
       },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 500,
   menu: {
-    name: 'routes.demo.editor.editor',
+    name: t('routes.demo.editor.editor'),
     path: '/editor',
     children: [
       {
         path: 'markdown',
-        name: 'routes.demo.editor.markdown',
+        name: t('routes.demo.editor.markdown'),
       },
       {
         path: 'tinymce',
-        name: 'routes.demo.editor.tinymce',
+        name: t('routes.demo.editor.tinymce'),
         children: [
           {
             path: 'index',
-            name: 'routes.demo.editor.tinymceBasic',
+            name: t('routes.demo.editor.tinymceBasic'),
           },
           {
             path: 'editor',
-            name: 'routes.demo.editor.tinymceForm',
+            name: t('routes.demo.editor.tinymceForm'),
           },
         ],
       },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 500,
   menu: {
-    name: 'routes.demo.excel.excel',
+    name: t('routes.demo.excel.excel'),
     path: '/excel',
     children: [
       {
         path: 'customExport',
-        name: 'routes.demo.excel.customExport',
+        name: t('routes.demo.excel.customExport'),
       },
       {
         path: 'jsonExport',
-        name: 'routes.demo.excel.jsonExport',
+        name: t('routes.demo.excel.jsonExport'),
       },
       {
         path: 'arrayExport',
-        name: 'routes.demo.excel.arrayExport',
+        name: t('routes.demo.excel.arrayExport'),
       },
       {
         path: 'importExcel',
-        name: 'routes.demo.excel.importExcel',
+        name: t('routes.demo.excel.importExcel'),
       },
     ],
   },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 19,
   menu: {
-    name: 'routes.demo.feat.feat',
+    name: t('routes.demo.feat.feat'),
     path: '/feat',
     children: [
       {
         path: 'icon',
-        name: 'routes.demo.feat.icon',
+        name: t('routes.demo.feat.icon'),
       },
       {
         path: 'tabs',
-        name: 'routes.demo.feat.tabs',
+        name: t('routes.demo.feat.tabs'),
       },
       {
         path: 'context-menu',
-        name: 'routes.demo.feat.contextMenu',
+        name: t('routes.demo.feat.contextMenu'),
       },
       {
         path: 'download',
-        name: 'routes.demo.feat.download',
+        name: t('routes.demo.feat.download'),
       },
       {
         path: 'click-out-side',
-        name: 'routes.demo.feat.clickOutSide',
+        name: t('routes.demo.feat.clickOutSide'),
       },
       {
         path: 'img-preview',
-        name: 'routes.demo.feat.imgPreview',
+        name: t('routes.demo.feat.imgPreview'),
       },
       {
         path: 'copy',
-        name: 'routes.demo.feat.copy',
+        name: t('routes.demo.feat.copy'),
       },
       {
         path: 'msg',
-        name: 'routes.demo.feat.msg',
+        name: t('routes.demo.feat.msg'),
       },
       {
         path: 'watermark',
-        name: 'routes.demo.feat.watermark',
+        name: t('routes.demo.feat.watermark'),
       },
       {
         path: 'full-screen',
-        name: 'routes.demo.feat.fullScreen',
+        name: t('routes.demo.feat.fullScreen'),
       },
       {
         path: 'error-log',
-        name: 'routes.demo.feat.errorLog',
+        name: t('routes.demo.feat.errorLog'),
       },
       {
         path: 'testTab',
-        name: 'routes.demo.feat.tab',
+        name: t('routes.demo.feat.tab'),
         children: [
           {
             path: 'id1',
-            name: 'routes.demo.feat.tab1',
+            name: t('routes.demo.feat.tab1'),
           },
           {
             path: 'id2',
-            name: 'routes.demo.feat.tab2',
+            name: t('routes.demo.feat.tab2'),
           },
         ],
       },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 40,
   menu: {
     path: '/form',
-    name: 'routes.demo.form.form',
+    name: t('routes.demo.form.form'),
     children: [
       {
         path: 'basic',
-        name: 'routes.demo.form.basic',
+        name: t('routes.demo.form.basic'),
       },
       {
         path: 'useForm',
-        name: 'routes.demo.form.useForm',
+        name: t('routes.demo.form.useForm'),
       },
       {
         path: 'refForm',
-        name: 'routes.demo.form.refForm',
+        name: t('routes.demo.form.refForm'),
       },
       {
         path: 'advancedForm',
-        name: 'routes.demo.form.advancedForm',
+        name: t('routes.demo.form.advancedForm'),
       },
       {
         path: 'ruleForm',
-        name: 'routes.demo.form.ruleForm',
+        name: t('routes.demo.form.ruleForm'),
       },
       {
         path: 'dynamicForm',
-        name: 'routes.demo.form.dynamicForm',
+        name: t('routes.demo.form.dynamicForm'),
       },
       {
         path: 'customerForm',
-        name: 'routes.demo.form.customerForm',
+        name: t('routes.demo.form.customerForm'),
       },
     ],
   },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 1000,
   menu: {
-    name: 'routes.demo.iframe.frame',
+    name: t('routes.demo.iframe.frame'),
     path: '/frame',
     children: [
       {
         path: 'antv',
-        name: 'routes.demo.iframe.antv',
+        name: t('routes.demo.iframe.antv'),
       },
       {
         path: 'doc',
-        name: 'routes.demo.iframe.doc',
+        name: t('routes.demo.iframe.doc'),
       },
       {
         path: 'https://vvbin.cn/doc-next/',
-        name: 'routes.demo.iframe.docExternal',
+        name: t('routes.demo.iframe.docExternal'),
       },
     ],
   },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 2000,
   menu: {
-    name: 'routes.demo.level.level',
+    name: t('routes.demo.level.level'),
     path: '/level',
     tag: {
       dot: true,
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 20,
   menu: {
-    name: 'routes.demo.page.page',
+    name: t('routes.demo.page.page'),
     path: '/page-demo',
     tag: {
       dot: true,
@@ -11,111 +12,111 @@ const menu: MenuModule = {
     children: [
       {
         path: 'form',
-        name: 'routes.demo.page.form',
+        name: t('routes.demo.page.form'),
         children: [
           {
             path: 'basic',
-            name: 'routes.demo.page.formBasic',
+            name: t('routes.demo.page.formBasic'),
           },
           {
             path: 'step',
-            name: 'routes.demo.page.formStep',
+            name: t('routes.demo.page.formStep'),
           },
           {
             path: 'high',
-            name: 'routes.demo.page.formHigh',
+            name: t('routes.demo.page.formHigh'),
           },
         ],
       },
       {
         path: 'desc',
-        name: 'routes.demo.page.desc',
+        name: t('routes.demo.page.desc'),
         children: [
           {
             path: 'basic',
-            name: 'routes.demo.page.descBasic',
+            name: t('routes.demo.page.descBasic'),
           },
           {
             path: 'high',
-            name: 'routes.demo.page.descHigh',
+            name: t('routes.demo.page.descHigh'),
           },
         ],
       },
       {
         path: 'result',
-        name: 'routes.demo.page.result',
+        name: t('routes.demo.page.result'),
         children: [
           {
             path: 'success',
-            name: 'routes.demo.page.resultSuccess',
+            name: t('routes.demo.page.resultSuccess'),
           },
           {
             path: 'fail',
-            name: 'routes.demo.page.resultFail',
+            name: t('routes.demo.page.resultFail'),
           },
         ],
       },
       {
         path: 'exception',
-        name: 'routes.demo.page.exception',
+        name: t('routes.demo.page.exception'),
         children: [
           {
             path: '403',
-            name: '403',
+            name: t('403'),
           },
           {
             path: '404',
-            name: '404',
+            name: t('404'),
           },
           {
             path: '500',
-            name: '500',
+            name: t('500'),
           },
           {
             path: 'net-work-error',
-            name: 'routes.demo.page.netWorkError',
+            name: t('routes.demo.page.netWorkError'),
           },
           {
             path: 'not-data',
-            name: 'routes.demo.page.notData',
+            name: t('routes.demo.page.notData'),
           },
         ],
       },
       {
         path: 'account',
-        name: 'routes.demo.page.account',
+        name: t('routes.demo.page.account'),
         children: [
           {
             path: 'center',
-            name: 'routes.demo.page.accountCenter',
+            name: t('routes.demo.page.accountCenter'),
           },
           {
             path: 'setting',
-            name: 'routes.demo.page.accountSetting',
+            name: t('routes.demo.page.accountSetting'),
           },
         ],
       },
       {
         path: 'list',
-        name: 'routes.demo.page.list',
+        name: t('routes.demo.page.list'),
         tag: {
           content: 'new',
         },
         children: [
           {
             path: 'basic',
-            name: 'routes.demo.page.listBasic',
+            name: t('routes.demo.page.listBasic'),
           },
           {
             path: 'card',
-            name: 'routes.demo.page.listCard',
+            name: t('routes.demo.page.listCard'),
           },
           {
             path: 'search',
-            name: 'routes.demo.page.listSearch',
+            name: t('routes.demo.page.listSearch'),
           },
         ],
       },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 15,
   menu: {
-    name: 'routes.demo.permission.permission',
+    name: t('routes.demo.permission.permission'),
     path: '/permission',
     children: [
       {
         path: 'front',
-        name: 'routes.demo.permission.front',
+        name: t('routes.demo.permission.front'),
         children: [
           {
             path: 'page',
-            name: 'routes.demo.permission.frontPage',
+            name: t('routes.demo.permission.frontPage'),
           },
           {
             path: 'btn',
-            name: 'routes.demo.permission.frontBtn',
+            name: t('routes.demo.permission.frontBtn'),
           },
           {
             path: 'auth-pageA',
-            name: 'routes.demo.permission.frontTestA',
+            name: t('routes.demo.permission.frontTestA'),
           },
           {
             path: 'auth-pageB',
-            name: 'routes.demo.permission.frontTestB',
+            name: t('routes.demo.permission.frontTestB'),
           },
         ],
       },
       {
         path: 'back',
-        name: 'routes.demo.permission.back',
+        name: t('routes.demo.permission.back'),
         children: [
           {
             path: 'page',
-            name: 'routes.demo.permission.backPage',
+            name: t('routes.demo.permission.backPage'),
           },
           {
             path: 'btn',
-            name: 'routes.demo.permission.backBtn',
+            name: t('routes.demo.permission.backBtn'),
           },
         ],
       },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 30,
   menu: {
     path: '/table',
-    name: 'routes.demo.table.table',
+    name: t('routes.demo.table.table'),
     children: [
       {
         path: 'basic',
-        name: 'routes.demo.table.basic',
+        name: t('routes.demo.table.basic'),
       },
       {
         path: 'treeTable',
-        name: 'routes.demo.table.treeTable',
+        name: t('routes.demo.table.treeTable'),
       },
       {
         path: 'fetchTable',
-        name: 'routes.demo.table.fetchTable',
+        name: t('routes.demo.table.fetchTable'),
       },
       {
         path: 'fixedColumn',
-        name: 'routes.demo.table.fixedColumn',
+        name: t('routes.demo.table.fixedColumn'),
       },
       {
         path: 'customerCell',
-        name: 'routes.demo.table.customerCell',
+        name: t('routes.demo.table.customerCell'),
       },
       {
         path: 'formTable',
-        name: 'routes.demo.table.formTable',
+        name: t('routes.demo.table.formTable'),
       },
       {
         path: 'useTable',
-        name: 'routes.demo.table.useTable',
+        name: t('routes.demo.table.useTable'),
       },
       {
         path: 'refTable',
-        name: 'routes.demo.table.refTable',
+        name: t('routes.demo.table.refTable'),
       },
       {
         path: 'multipleHeader',
-        name: 'routes.demo.table.multipleHeader',
+        name: t('routes.demo.table.multipleHeader'),
       },
       {
         path: 'mergeHeader',
-        name: 'routes.demo.table.mergeHeader',
+        name: t('routes.demo.table.mergeHeader'),
       },
       {
         path: 'expandTable',
-        name: 'routes.demo.table.expandTable',
+        name: t('routes.demo.table.expandTable'),
       },
       {
         path: 'fixedHeight',
-        name: 'routes.demo.table.fixedHeight',
+        name: t('routes.demo.table.fixedHeight'),
       },
       {
         path: 'footerTable',
-        name: 'routes.demo.table.footerTable',
+        name: t('routes.demo.table.footerTable'),
       },
       {
         path: 'editCellTable',
-        name: 'routes.demo.table.editCellTable',
+        name: t('routes.demo.table.editCellTable'),
       },
       {
         path: 'editRowTable',
-        name: 'routes.demo.table.editRowTable',
+        name: t('routes.demo.table.editRowTable'),
       },
     ],
   },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 50,
   menu: {
     path: '/tree',
-    name: 'routes.demo.tree.tree',
+    name: t('routes.demo.tree.tree'),
     children: [
       {
         path: 'basic',
-        name: 'routes.demo.tree.basic',
+        name: t('routes.demo.tree.basic'),
       },
       {
         path: 'editTree',
-        name: 'routes.demo.tree.editTree',
+        name: t('routes.demo.tree.editTree'),
       },
       {
         path: 'actionTree',
-        name: 'routes.demo.tree.actionTree',
+        name: t('routes.demo.tree.actionTree'),
       },
     ],
   },
 import type { MenuModule } from '/@/router/types.d';
+import { t } from '/@/hooks/web/useI18n';
 const menu: MenuModule = {
   orderNo: 0,
   menu: {
     path: '/home/welcome',
-    name: 'routes.dashboard.welcome',
+    name: t('routes.dashboard.welcome'),
   },
 };
 export default menu;
 import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
-import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE, LAYOUT } from '../constant';
-import { PageEnum } from '/@/enums/pageEnum';
+import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '../constant';
 import modules from 'globby!/@/router/routes/modules/**/*.@(ts)';
+import { t } from '/@/hooks/web/useI18n';
+
 const routeModuleList: AppRouteModule[] = [];
 Object.keys(modules).forEach((key) => {
@@ -14,25 +15,14 @@ Object.keys(modules).forEach((key) =&gt; {
 export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList];
-const MainRoute: AppRouteModule = {
-  path: '/',
-  name: 'MainRoute',
-  component: LAYOUT,
-  redirect: PageEnum.BASE_HOME,
-  meta: {
-    icon: 'bx:bx-home',
-    title: 'routes.dashboard.dashboard',
-  },
-};
-
 export const LoginRoute: AppRouteRecordRaw = {
   path: '/login',
   name: 'Login',
   component: () => import('/@/views/sys/login/Login.vue'),
   meta: {
-    title: 'routes.basic.login',
+    title: t('routes.basic.login'),
   },
 };
 // 基础路由 不用权限
-export const basicRoutes = [LoginRoute, MainRoute, REDIRECT_ROUTE];
+export const basicRoutes = [LoginRoute, REDIRECT_ROUTE];
 import type { AppRouteModule } from '/@/router/types';
 import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const dashboard: AppRouteModule = {
   path: '/dashboard',
@@ -9,7 +10,7 @@ const dashboard: AppRouteModule = {
   redirect: '/dashboard/welcome',
   meta: {
     icon: 'bx:bx-home',
-    title: 'routes.dashboard.dashboard',
+    title: t('routes.dashboard.dashboard'),
   },
   children: [
     {
@@ -17,7 +18,7 @@ const dashboard: AppRouteModule = {
       name: 'Workbench',
       component: () => import('/@/views/dashboard/workbench/index.vue'),
       meta: {
-        title: 'routes.dashboard.workbench',
+        title: t('routes.dashboard.workbench'),
       },
     },
     {
@@ -25,7 +26,7 @@ const dashboard: AppRouteModule = {
       name: 'Analysis',
       component: () => import('/@/views/dashboard/analysis/index.vue'),
       meta: {
-        title: 'routes.dashboard.analysis',
+        title: t('routes.dashboard.analysis'),
       },
     },
   ],
 import type { AppRouteModule } from '/@/router/types';
 import { getParentLayout, LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const charts: AppRouteModule = {
   path: '/charts',
@@ -9,7 +10,7 @@ const charts: AppRouteModule = {
   redirect: '/charts/apexChart',
   meta: {
     icon: 'vaadin:spline-area-chart',
-    title: 'routes.demo.charts.charts',
+    title: t('routes.demo.charts.charts'),
   },
   children: [
     {
@@ -25,7 +26,7 @@ const charts: AppRouteModule = {
           name: 'Map',
           component: () => import('/@/views/demo/echarts/Map.vue'),
           meta: {
-            title: 'routes.demo.charts.map',
+            title: t('routes.demo.charts.map'),
           },
         },
         {
@@ -33,7 +34,7 @@ const charts: AppRouteModule = {
           name: 'Line',
           component: () => import('/@/views/demo/echarts/Line.vue'),
           meta: {
-            title: 'routes.demo.charts.line',
+            title: t('routes.demo.charts.line'),
           },
         },
         {
@@ -41,7 +42,7 @@ const charts: AppRouteModule = {
           name: 'Pie',
           component: () => import('/@/views/demo/echarts/Pie.vue'),
           meta: {
-            title: 'routes.demo.charts.pie',
+            title: t('routes.demo.charts.pie'),
           },
         },
       ],
@@ -50,7 +51,7 @@ const charts: AppRouteModule = {
       path: 'apexChart',
       name: 'ApexChart',
       meta: {
-        title: 'routes.demo.charts.apexChart',
+        title: t('routes.demo.charts.apexChart'),
       },
       component: () => import('/@/views/demo/echarts/apex/index.vue'),
     },
 import type { AppRouteModule } from '/@/router/types';
 import { getParentLayout, LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const comp: AppRouteModule = {
   path: '/comp',
@@ -9,7 +10,7 @@ const comp: AppRouteModule = {
   redirect: '/comp/basic',
   meta: {
     icon: 'ic:outline-settings-input-component',
-    title: 'routes.demo.comp.comp',
+    title: t('routes.demo.comp.comp'),
   },
   children: [
@@ -18,7 +19,7 @@ const comp: AppRouteModule = {
       name: 'BasicDemo',
       component: () => import('/@/views/demo/comp/button/index.vue'),
       meta: {
-        title: 'routes.demo.comp.basic',
+        title: t('routes.demo.comp.basic'),
       },
     },
     {
@@ -26,7 +27,7 @@ const comp: AppRouteModule = {
       name: 'transitionDemo',
       component: () => import('/@/views/demo/comp/transition/index.vue'),
       meta: {
-        title: 'routes.demo.comp.transition',
+        title: t('routes.demo.comp.transition'),
       },
     },
     {
@@ -34,7 +35,7 @@ const comp: AppRouteModule = {
       name: 'CountTo',
       component: () => import('/@/views/demo/comp/count-to/index.vue'),
       meta: {
-        title: 'routes.demo.comp.countTo',
+        title: t('routes.demo.comp.countTo'),
       },
     },
@@ -44,7 +45,7 @@ const comp: AppRouteModule = {
       redirect: '/comp/scroll/basic',
       component: getParentLayout('ScrollDemo'),
       meta: {
-        title: 'routes.demo.comp.scroll',
+        title: t('routes.demo.comp.scroll'),
       },
       children: [
         {
@@ -52,7 +53,7 @@ const comp: AppRouteModule = {
           name: 'BasicScrollDemo',
           component: () => import('/@/views/demo/comp/scroll/index.vue'),
           meta: {
-            title: 'routes.demo.comp.scrollBasic',
+            title: t('routes.demo.comp.scrollBasic'),
           },
         },
         {
@@ -60,7 +61,7 @@ const comp: AppRouteModule = {
           name: 'ActionScrollDemo',
           component: () => import('/@/views/demo/comp/scroll/Action.vue'),
           meta: {
-            title: 'routes.demo.comp.scrollAction',
+            title: t('routes.demo.comp.scrollAction'),
           },
         },
         {
@@ -68,7 +69,7 @@ const comp: AppRouteModule = {
           name: 'VirtualScrollDemo',
           component: () => import('/@/views/demo/comp/scroll/VirtualScroll.vue'),
           meta: {
-            title: 'routes.demo.comp.virtualScroll',
+            title: t('routes.demo.comp.virtualScroll'),
           },
         },
       ],
@@ -79,7 +80,7 @@ const comp: AppRouteModule = {
       name: 'ModalDemo',
       component: () => import('/@/views/demo/comp/modal/index.vue'),
       meta: {
-        title: 'routes.demo.comp.modal',
+        title: t('routes.demo.comp.modal'),
       },
     },
     {
@@ -87,7 +88,7 @@ const comp: AppRouteModule = {
       name: 'DrawerDemo',
       component: () => import('/@/views/demo/comp/drawer/index.vue'),
       meta: {
-        title: 'routes.demo.comp.drawer',
+        title: t('routes.demo.comp.drawer'),
       },
     },
     {
@@ -95,7 +96,7 @@ const comp: AppRouteModule = {
       name: 'DescDemo',
       component: () => import('/@/views/demo/comp/desc/index.vue'),
       meta: {
-        title: 'routes.demo.comp.desc',
+        title: t('routes.demo.comp.desc'),
       },
     },
@@ -105,7 +106,7 @@ const comp: AppRouteModule = {
       component: getParentLayout('LazyDemo'),
       redirect: '/comp/lazy/basic',
       meta: {
-        title: 'routes.demo.comp.lazy',
+        title: t('routes.demo.comp.lazy'),
       },
       children: [
         {
@@ -113,7 +114,7 @@ const comp: AppRouteModule = {
           name: 'BasicLazyDemo',
           component: () => import('/@/views/demo/comp/lazy/index.vue'),
           meta: {
-            title: 'routes.demo.comp.lazyBasic',
+            title: t('routes.demo.comp.lazyBasic'),
           },
         },
         {
@@ -121,7 +122,7 @@ const comp: AppRouteModule = {
           name: 'BasicTransitionDemo',
           component: () => import('/@/views/demo/comp/lazy/Transition.vue'),
           meta: {
-            title: 'routes.demo.comp.lazyTransition',
+            title: t('routes.demo.comp.lazyTransition'),
           },
         },
       ],
@@ -132,7 +133,7 @@ const comp: AppRouteModule = {
       component: getParentLayout('VerifyDemo'),
       redirect: '/comp/verify/drag',
       meta: {
-        title: 'routes.demo.comp.verify',
+        title: t('routes.demo.comp.verify'),
       },
       children: [
         {
@@ -140,7 +141,7 @@ const comp: AppRouteModule = {
           name: 'VerifyDragDemo',
           component: () => import('/@/views/demo/comp/verify/index.vue'),
           meta: {
-            title: 'routes.demo.comp.verifyDrag',
+            title: t('routes.demo.comp.verifyDrag'),
           },
         },
         {
@@ -148,7 +149,7 @@ const comp: AppRouteModule = {
           name: 'VerifyRotateDemo',
           component: () => import('/@/views/demo/comp/verify/Rotate.vue'),
           meta: {
-            title: 'routes.demo.comp.verifyRotate',
+            title: t('routes.demo.comp.verifyRotate'),
           },
         },
       ],
@@ -160,7 +161,7 @@ const comp: AppRouteModule = {
       name: 'QrCodeDemo',
       component: () => import('/@/views/demo/comp/qrcode/index.vue'),
       meta: {
-        title: 'routes.demo.comp.qrcode',
+        title: t('routes.demo.comp.qrcode'),
       },
     },
     {
@@ -168,7 +169,7 @@ const comp: AppRouteModule = {
       name: 'StrengthMeterDemo',
       component: () => import('/@/views/demo/comp/strength-meter/index.vue'),
       meta: {
-        title: 'routes.demo.comp.strength',
+        title: t('routes.demo.comp.strength'),
       },
     },
     {
@@ -176,7 +177,7 @@ const comp: AppRouteModule = {
       name: 'UploadDemo',
       component: () => import('/@/views/demo/comp/upload/index.vue'),
       meta: {
-        title: 'routes.demo.comp.upload',
+        title: t('routes.demo.comp.upload'),
       },
     },
     {
@@ -184,7 +185,7 @@ const comp: AppRouteModule = {
       name: 'LoadingDemo',
       component: () => import('/@/views/demo/comp/loading/index.vue'),
       meta: {
-        title: 'routes.demo.comp.loading',
+        title: t('routes.demo.comp.loading'),
       },
     },
   ],
 import type { AppRouteModule } from '/@/router/types';
 import { getParentLayout, LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const editor: AppRouteModule = {
   path: '/editor',
@@ -9,7 +10,7 @@ const editor: AppRouteModule = {
   redirect: '/editor/markdown',
   meta: {
     icon: 'carbon:table-split',
-    title: 'routes.demo.editor.editor',
+    title: t('routes.demo.editor.editor'),
   },
   children: [
     {
@@ -17,7 +18,7 @@ const editor: AppRouteModule = {
       name: 'MarkdownDemo',
       component: () => import('/@/views/demo/editor/Markdown.vue'),
       meta: {
-        title: 'routes.demo.editor.markdown',
+        title: t('routes.demo.editor.markdown'),
       },
     },
     {
@@ -25,7 +26,7 @@ const editor: AppRouteModule = {
       component: getParentLayout('TinymceDemo'),
       name: 'TinymceDemo',
       meta: {
-        title: 'routes.demo.editor.tinymce',
+        title: t('routes.demo.editor.tinymce'),
       },
       redirect: '/editor/tinymce/index',
       children: [
@@ -34,7 +35,7 @@ const editor: AppRouteModule = {
           name: 'TinymceBasicDemo',
           component: () => import('/@/views/demo/editor/tinymce/index.vue'),
           meta: {
-            title: 'routes.demo.editor.tinymceBasic',
+            title: t('routes.demo.editor.tinymceBasic'),
           },
         },
         {
@@ -42,7 +43,7 @@ const editor: AppRouteModule = {
           name: 'TinymceFormDemo',
           component: () => import('/@/views/demo/editor/tinymce/Editor.vue'),
           meta: {
-            title: 'routes.demo.editor.tinymceForm',
+            title: t('routes.demo.editor.tinymceForm'),
           },
         },
       ],
 import type { AppRouteModule } from '/@/router/types';
 import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const excel: AppRouteModule = {
   path: '/excel',
@@ -9,7 +10,7 @@ const excel: AppRouteModule = {
   redirect: '/excel/customExport',
   meta: {
     icon: 'mdi:microsoft-excel',
-    title: 'routes.demo.excel.excel',
+    title: t('routes.demo.excel.excel'),
   },
   children: [
@@ -18,7 +19,7 @@ const excel: AppRouteModule = {
       name: 'CustomExport',
       component: () => import('/@/views/demo/excel/CustomExport.vue'),
       meta: {
-        title: 'routes.demo.excel.customExport',
+        title: t('routes.demo.excel.customExport'),
       },
     },
     {
@@ -26,7 +27,7 @@ const excel: AppRouteModule = {
       name: 'JsonExport',
       component: () => import('/@/views/demo/excel/JsonExport.vue'),
       meta: {
-        title: 'routes.demo.excel.jsonExport',
+        title: t('routes.demo.excel.jsonExport'),
       },
     },
     {
@@ -34,7 +35,7 @@ const excel: AppRouteModule = {
       name: 'ArrayExport',
       component: () => import('/@/views/demo/excel/ArrayExport.vue'),
       meta: {
-        title: 'routes.demo.excel.arrayExport',
+        title: t('routes.demo.excel.arrayExport'),
       },
     },
     {
@@ -42,7 +43,7 @@ const excel: AppRouteModule = {
       name: 'ImportExcel',
       component: () => import('/@/views/demo/excel/ImportExcel.vue'),
       meta: {
-        title: 'routes.demo.excel.importExcel',
+        title: t('routes.demo.excel.importExcel'),
       },
     },
   ],
 import type { AppRouteModule } from '/@/router/types';
 import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const feat: AppRouteModule = {
   path: '/feat',
@@ -9,7 +10,7 @@ const feat: AppRouteModule = {
   redirect: '/feat/icon',
   meta: {
     icon: 'ic:outline-featured-play-list',
-    title: 'routes.demo.feat.feat',
+    title: t('routes.demo.feat.feat'),
   },
   children: [
     {
@@ -17,7 +18,7 @@ const feat: AppRouteModule = {
       name: 'IconDemo',
       component: () => import('/@/views/demo/feat/icon/index.vue'),
       meta: {
-        title: 'routes.demo.feat.icon',
+        title: t('routes.demo.feat.icon'),
       },
     },
     {
@@ -25,7 +26,7 @@ const feat: AppRouteModule = {
       name: 'TabsDemo',
       component: () => import('/@/views/demo/feat/tabs/index.vue'),
       meta: {
-        title: 'routes.demo.feat.tabs',
+        title: t('routes.demo.feat.tabs'),
       },
     },
@@ -34,7 +35,7 @@ const feat: AppRouteModule = {
       name: 'ContextMenuDemo',
       component: () => import('/@/views/demo/feat/context-menu/index.vue'),
       meta: {
-        title: 'routes.demo.feat.contextMenu',
+        title: t('routes.demo.feat.contextMenu'),
       },
     },
     {
@@ -42,7 +43,7 @@ const feat: AppRouteModule = {
       name: 'DownLoadDemo',
       component: () => import('/@/views/demo/feat/download/index.vue'),
       meta: {
-        title: 'routes.demo.feat.download',
+        title: t('routes.demo.feat.download'),
       },
     },
     {
@@ -50,7 +51,7 @@ const feat: AppRouteModule = {
       name: 'ClickOutSideDemo',
       component: () => import('/@/views/demo/feat/click-out-side/index.vue'),
       meta: {
-        title: 'routes.demo.feat.clickOutSide',
+        title: t('routes.demo.feat.clickOutSide'),
       },
     },
     {
@@ -58,7 +59,7 @@ const feat: AppRouteModule = {
       name: 'ImgPreview',
       component: () => import('/@/views/demo/feat/img-preview/index.vue'),
       meta: {
-        title: 'routes.demo.feat.imgPreview',
+        title: t('routes.demo.feat.imgPreview'),
       },
     },
     {
@@ -66,7 +67,7 @@ const feat: AppRouteModule = {
       name: 'CopyDemo',
       component: () => import('/@/views/demo/feat/copy/index.vue'),
       meta: {
-        title: 'routes.demo.feat.copy',
+        title: t('routes.demo.feat.copy'),
       },
     },
     {
@@ -74,7 +75,7 @@ const feat: AppRouteModule = {
       name: 'MsgDemo',
       component: () => import('/@/views/demo/feat/msg/index.vue'),
       meta: {
-        title: 'routes.demo.feat.msg',
+        title: t('routes.demo.feat.msg'),
       },
     },
     {
@@ -82,7 +83,7 @@ const feat: AppRouteModule = {
       name: 'WatermarkDemo',
       component: () => import('/@/views/demo/feat/watermark/index.vue'),
       meta: {
-        title: 'routes.demo.feat.watermark',
+        title: t('routes.demo.feat.watermark'),
       },
     },
     {
@@ -90,7 +91,7 @@ const feat: AppRouteModule = {
       name: 'FullScreenDemo',
       component: () => import('/@/views/demo/feat/full-screen/index.vue'),
       meta: {
-        title: 'routes.demo.feat.fullScreen',
+        title: t('routes.demo.feat.fullScreen'),
       },
     },
     {
@@ -98,7 +99,7 @@ const feat: AppRouteModule = {
       name: 'ErrorLog',
       component: () => import('/@/views/sys/error-log/index.vue'),
       meta: {
-        title: 'routes.demo.feat.errorLog',
+        title: t('routes.demo.feat.errorLog'),
       },
     },
     {
@@ -106,7 +107,7 @@ const feat: AppRouteModule = {
       name: 'TestTab',
       component: () => import('/@/views/demo/feat/tab-params/index.vue'),
       meta: {
-        title: 'routes.demo.feat.tab',
+        title: t('routes.demo.feat.tab'),
         carryParam: true,
       },
     },
 import type { AppRouteModule } from '/@/router/types';
 import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const form: AppRouteModule = {
   path: '/form',
@@ -9,7 +10,7 @@ const form: AppRouteModule = {
   redirect: '/form/basic',
   meta: {
     icon: 'mdi:form-select',
-    title: 'routes.demo.form.form',
+    title: t('routes.demo.form.form'),
   },
   children: [
     {
@@ -17,7 +18,7 @@ const form: AppRouteModule = {
       name: 'FormBasicDemo',
       component: () => import('/@/views/demo/form/index.vue'),
       meta: {
-        title: 'routes.demo.form.basic',
+        title: t('routes.demo.form.basic'),
       },
     },
     {
@@ -25,7 +26,7 @@ const form: AppRouteModule = {
       name: 'UseFormDemo',
       component: () => import('/@/views/demo/form/UseForm.vue'),
       meta: {
-        title: 'routes.demo.form.useForm',
+        title: t('routes.demo.form.useForm'),
       },
     },
     {
@@ -33,7 +34,7 @@ const form: AppRouteModule = {
       name: 'RefFormDemo',
       component: () => import('/@/views/demo/form/RefForm.vue'),
       meta: {
-        title: 'routes.demo.form.refForm',
+        title: t('routes.demo.form.refForm'),
       },
     },
     {
@@ -41,7 +42,7 @@ const form: AppRouteModule = {
       name: 'AdvancedFormDemo',
       component: () => import('/@/views/demo/form/AdvancedForm.vue'),
       meta: {
-        title: 'routes.demo.form.advancedForm',
+        title: t('routes.demo.form.advancedForm'),
       },
     },
     {
@@ -49,7 +50,7 @@ const form: AppRouteModule = {
       name: 'RuleFormDemo',
       component: () => import('/@/views/demo/form/RuleForm.vue'),
       meta: {
-        title: 'routes.demo.form.ruleForm',
+        title: t('routes.demo.form.ruleForm'),
       },
     },
     {
@@ -57,7 +58,7 @@ const form: AppRouteModule = {
       name: 'DynamicFormDemo',
       component: () => import('/@/views/demo/form/DynamicForm.vue'),
       meta: {
-        title: 'routes.demo.form.dynamicForm',
+        title: t('routes.demo.form.dynamicForm'),
       },
     },
     {
@@ -65,7 +66,7 @@ const form: AppRouteModule = {
       name: 'CustomerFormDemo',
       component: () => import('/@/views/demo/form/CustomerForm.vue'),
       meta: {
-        title: 'routes.demo.form.customerForm',
+        title: t('routes.demo.form.customerForm'),
       },
     },
   ],
@@ -2,6 +2,7 @@ import type { AppRouteModule } from &#39;/@/router/types&#39;;
 import { LAYOUT } from '/@/router/constant';
 const IFrame = () => import('/@/views/sys/iframe/FrameBlank.vue');
+import { t } from '/@/hooks/web/useI18n';
 const iframe: AppRouteModule = {
   path: '/frame',
@@ -10,7 +11,7 @@ const iframe: AppRouteModule = {
   redirect: '/frame/antv',
   meta: {
     icon: 'mdi:page-next-outline',
-    title: 'routes.demo.iframe.frame',
+    title: t('routes.demo.iframe.frame'),
   },
   children: [
@@ -20,7 +21,7 @@ const iframe: AppRouteModule = {
       component: IFrame,
       meta: {
         frameSrc: 'https://2x.antdv.com/docs/vue/introduce-cn/',
-        title: 'routes.demo.iframe.antv',
+        title: t('routes.demo.iframe.antv'),
       },
     },
     {
@@ -29,7 +30,7 @@ const iframe: AppRouteModule = {
       component: IFrame,
       meta: {
         frameSrc: 'https://vvbin.cn/doc-next/',
-        title: 'routes.demo.iframe.doc',
+        title: t('routes.demo.iframe.doc'),
       },
     },
     {
@@ -38,7 +39,7 @@ const iframe: AppRouteModule = {
       component: IFrame,
       meta: {
         externalLink: true,
-        title: 'routes.demo.iframe.docExternal',
+        title: t('routes.demo.iframe.docExternal'),
       },
     },
   ],
 import type { AppRouteModule } from '/@/router/types';
 import { getParentLayout, LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const permission: AppRouteModule = {
   path: '/level',
@@ -9,7 +10,7 @@ const permission: AppRouteModule = {
   redirect: '/level/menu1/menu1-1',
   meta: {
     icon: 'carbon:user-role',
-    title: 'routes.demo.level.level',
+    title: t('routes.demo.level.level'),
   },
   children: [
@@ -2,6 +2,7 @@ import type { AppRouteModule } from &#39;/@/router/types&#39;;
 import { getParentLayout, LAYOUT } from '/@/router/constant';
 import { ExceptionEnum } from '/@/enums/exceptionEnum';
+import { t } from '/@/hooks/web/useI18n';
 const ExceptionPage = () => import('/@/views/sys/exception/Exception');
@@ -12,7 +13,7 @@ const page: AppRouteModule = {
   redirect: '/page-demo/exception',
   meta: {
     icon: 'mdi:page-next-outline',
-    title: 'routes.demo.page.page',
+    title: t('routes.demo.page.page'),
   },
   children: [
     // =============================form start=============================
@@ -22,7 +23,7 @@ const page: AppRouteModule = {
       redirect: '/page-demo/form/basic',
       component: getParentLayout('FormPage'),
       meta: {
-        title: 'routes.demo.page.form',
+        title: t('routes.demo.page.form'),
       },
       children: [
         {
@@ -30,7 +31,7 @@ const page: AppRouteModule = {
           name: 'FormBasicPage',
           component: () => import('/@/views/demo/page/form/basic/index.vue'),
           meta: {
-            title: 'routes.demo.page.formBasic',
+            title: t('routes.demo.page.formBasic'),
           },
         },
         {
@@ -38,7 +39,7 @@ const page: AppRouteModule = {
           name: 'FormStepPage',
           component: () => import('/@/views/demo/page/form/step/index.vue'),
           meta: {
-            title: 'routes.demo.page.formStep',
+            title: t('routes.demo.page.formStep'),
           },
         },
         {
@@ -46,7 +47,7 @@ const page: AppRouteModule = {
           name: 'FormHightPage',
           component: () => import('/@/views/demo/page/form/high/index.vue'),
           meta: {
-            title: 'routes.demo.page.formHigh',
+            title: t('routes.demo.page.formHigh'),
           },
         },
       ],
@@ -59,7 +60,7 @@ const page: AppRouteModule = {
       component: getParentLayout('DescPage'),
       redirect: '/page-demo/desc/basic',
       meta: {
-        title: 'routes.demo.page.desc',
+        title: t('routes.demo.page.desc'),
       },
       children: [
         {
@@ -67,7 +68,7 @@ const page: AppRouteModule = {
           name: 'DescBasicPage',
           component: () => import('/@/views/demo/page/desc/basic/index.vue'),
           meta: {
-            title: 'routes.demo.page.descBasic',
+            title: t('routes.demo.page.descBasic'),
           },
         },
         {
@@ -75,7 +76,7 @@ const page: AppRouteModule = {
           name: 'DescHighPage',
           component: () => import('/@/views/demo/page/desc/high/index.vue'),
           meta: {
-            title: 'routes.demo.page.descHigh',
+            title: t('routes.demo.page.descHigh'),
           },
         },
       ],
@@ -90,7 +91,7 @@ const page: AppRouteModule = {
       component: getParentLayout('ResultPage'),
       meta: {
-        title: 'routes.demo.page.result',
+        title: t('routes.demo.page.result'),
       },
       children: [
         {
@@ -98,7 +99,7 @@ const page: AppRouteModule = {
           name: 'ResultSuccessPage',
           component: () => import('/@/views/demo/page/result/success/index.vue'),
           meta: {
-            title: 'routes.demo.page.resultSuccess',
+            title: t('routes.demo.page.resultSuccess'),
           },
         },
         {
@@ -106,7 +107,7 @@ const page: AppRouteModule = {
           name: 'ResultFailPage',
           component: () => import('/@/views/demo/page/result/fail/index.vue'),
           meta: {
-            title: 'routes.demo.page.resultFail',
+            title: t('routes.demo.page.resultFail'),
           },
         },
       ],
@@ -120,7 +121,7 @@ const page: AppRouteModule = {
       component: getParentLayout('AccountPage'),
       redirect: '/page-demo/account/setting',
       meta: {
-        title: 'routes.demo.page.account',
+        title: t('routes.demo.page.account'),
       },
       children: [
         {
@@ -128,7 +129,7 @@ const page: AppRouteModule = {
           name: 'AccountCenterPage',
           component: () => import('/@/views/demo/page/account/center/index.vue'),
           meta: {
-            title: 'routes.demo.page.accountCenter',
+            title: t('routes.demo.page.accountCenter'),
           },
         },
         {
@@ -136,7 +137,7 @@ const page: AppRouteModule = {
           name: 'AccountSettingPage',
           component: () => import('/@/views/demo/page/account/setting/index.vue'),
           meta: {
-            title: 'routes.demo.page.accountSetting',
+            title: t('routes.demo.page.accountSetting'),
           },
         },
       ],
@@ -149,7 +150,7 @@ const page: AppRouteModule = {
       component: getParentLayout('ExceptionPage'),
       redirect: '/page-demo/exception/404',
       meta: {
-        title: 'routes.demo.page.exception',
+        title: t('routes.demo.page.exception'),
       },
       children: [
         {
@@ -193,7 +194,7 @@ const page: AppRouteModule = {
             status: ExceptionEnum.NET_WORK_ERROR,
           },
           meta: {
-            title: 'routes.demo.page.netWorkError',
+            title: t('routes.demo.page.netWorkError'),
           },
         },
         {
@@ -204,7 +205,7 @@ const page: AppRouteModule = {
             status: ExceptionEnum.PAGE_NOT_DATA,
           },
           meta: {
-            title: 'routes.demo.page.notData',
+            title: t('routes.demo.page.notData'),
           },
         },
       ],
@@ -217,7 +218,7 @@ const page: AppRouteModule = {
       component: getParentLayout('ListPage'),
       redirect: '/page-demo/list/card',
       meta: {
-        title: 'routes.demo.page.list',
+        title: t('routes.demo.page.list'),
       },
       children: [
         {
@@ -225,7 +226,7 @@ const page: AppRouteModule = {
           name: 'ListBasicPage',
           component: () => import('/@/views/demo/page/list/basic/index.vue'),
           meta: {
-            title: 'routes.demo.page.listBasic',
+            title: t('routes.demo.page.listBasic'),
           },
         },
         {
@@ -233,7 +234,7 @@ const page: AppRouteModule = {
           name: 'ListCardPage',
           component: () => import('/@/views/demo/page/list/card/index.vue'),
           meta: {
-            title: 'routes.demo.page.listCard',
+            title: t('routes.demo.page.listCard'),
           },
         },
         {
@@ -241,7 +242,7 @@ const page: AppRouteModule = {
           name: 'ListSearchPage',
           component: () => import('/@/views/demo/page/list/search/index.vue'),
           meta: {
-            title: 'routes.demo.page.listSearch',
+            title: t('routes.demo.page.listSearch'),
           },
         },
       ],
@@ -2,6 +2,7 @@ import type { AppRouteModule } from &#39;/@/router/types&#39;;
 import { getParentLayout, LAYOUT } from '/@/router/constant';
 import { RoleEnum } from '/@/enums/roleEnum';
+import { t } from '/@/hooks/web/useI18n';
 const permission: AppRouteModule = {
   path: '/permission',
@@ -10,7 +11,7 @@ const permission: AppRouteModule = {
   redirect: '/permission/front/page',
   meta: {
     icon: 'carbon:user-role',
-    title: 'routes.demo.permission.permission',
+    title: t('routes.demo.permission.permission'),
   },
   children: [
@@ -19,7 +20,7 @@ const permission: AppRouteModule = {
       name: 'PermissionFrontDemo',
       component: getParentLayout('PermissionFrontDemo'),
       meta: {
-        title: 'routes.demo.permission.front',
+        title: t('routes.demo.permission.front'),
       },
       children: [
         {
@@ -27,7 +28,7 @@ const permission: AppRouteModule = {
           name: 'FrontPageAuth',
           component: () => import('/@/views/demo/permission/front/index.vue'),
           meta: {
-            title: 'routes.demo.permission.frontPage',
+            title: t('routes.demo.permission.frontPage'),
           },
         },
         {
@@ -35,7 +36,7 @@ const permission: AppRouteModule = {
           name: 'FrontBtnAuth',
           component: () => import('/@/views/demo/permission/front/Btn.vue'),
           meta: {
-            title: 'routes.demo.permission.frontBtn',
+            title: t('routes.demo.permission.frontBtn'),
           },
         },
         {
@@ -43,7 +44,7 @@ const permission: AppRouteModule = {
           name: 'FrontAuthPageA',
           component: () => import('/@/views/demo/permission/front/AuthPageA.vue'),
           meta: {
-            title: 'routes.demo.permission.frontTestA',
+            title: t('routes.demo.permission.frontTestA'),
             roles: [RoleEnum.SUPER],
           },
         },
@@ -52,7 +53,7 @@ const permission: AppRouteModule = {
           name: 'FrontAuthPageB',
           component: () => import('/@/views/demo/permission/front/AuthPageB.vue'),
           meta: {
-            title: 'routes.demo.permission.frontTestB',
+            title: t('routes.demo.permission.frontTestB'),
             roles: [RoleEnum.TEST],
           },
         },
@@ -63,7 +64,7 @@ const permission: AppRouteModule = {
       name: 'PermissionBackDemo',
       component: getParentLayout('PermissionBackDemo'),
       meta: {
-        title: 'routes.demo.permission.back',
+        title: t('routes.demo.permission.back'),
       },
       children: [
         {
@@ -71,7 +72,7 @@ const permission: AppRouteModule = {
           name: 'BackAuthPage',
           component: () => import('/@/views/demo/permission/back/index.vue'),
           meta: {
-            title: 'routes.demo.permission.backPage',
+            title: t('routes.demo.permission.backPage'),
           },
         },
         {
@@ -79,7 +80,7 @@ const permission: AppRouteModule = {
           name: 'BackAuthBtn',
           component: () => import('/@/views/demo/permission/back/Btn.vue'),
           meta: {
-            title: 'routes.demo.permission.backBtn',
+            title: t('routes.demo.permission.backBtn'),
           },
         },
       ],
 import type { AppRouteModule } from '/@/router/types';
 import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const table: AppRouteModule = {
   path: '/table',
@@ -9,7 +10,7 @@ const table: AppRouteModule = {
   redirect: '/table/basic',
   meta: {
     icon: 'carbon:table-split',
-    title: 'routes.demo.table.table',
+    title: t('routes.demo.table.table'),
   },
   children: [
@@ -18,7 +19,7 @@ const table: AppRouteModule = {
       name: 'TableBasicDemo',
       component: () => import('/@/views/demo/table/Basic.vue'),
       meta: {
-        title: 'routes.demo.table.basic',
+        title: t('routes.demo.table.basic'),
       },
     },
     {
@@ -26,7 +27,7 @@ const table: AppRouteModule = {
       name: 'TreeTableDemo',
       component: () => import('/@/views/demo/table/TreeTable.vue'),
       meta: {
-        title: 'routes.demo.table.treeTable',
+        title: t('routes.demo.table.treeTable'),
       },
     },
     {
@@ -34,7 +35,7 @@ const table: AppRouteModule = {
       name: 'FetchTableDemo',
       component: () => import('/@/views/demo/table/FetchTable.vue'),
       meta: {
-        title: 'routes.demo.table.fetchTable',
+        title: t('routes.demo.table.fetchTable'),
       },
     },
     {
@@ -42,7 +43,7 @@ const table: AppRouteModule = {
       name: 'FixedColumnDemo',
       component: () => import('/@/views/demo/table/FixedColumn.vue'),
       meta: {
-        title: 'routes.demo.table.fixedColumn',
+        title: t('routes.demo.table.fixedColumn'),
       },
     },
     {
@@ -50,7 +51,7 @@ const table: AppRouteModule = {
       name: 'CustomerCellDemo',
       component: () => import('/@/views/demo/table/CustomerCell.vue'),
       meta: {
-        title: 'routes.demo.table.customerCell',
+        title: t('routes.demo.table.customerCell'),
       },
     },
     {
@@ -58,7 +59,7 @@ const table: AppRouteModule = {
       name: 'FormTableDemo',
       component: () => import('/@/views/demo/table/FormTable.vue'),
       meta: {
-        title: 'routes.demo.table.formTable',
+        title: t('routes.demo.table.formTable'),
       },
     },
     {
@@ -66,7 +67,7 @@ const table: AppRouteModule = {
       name: 'UseTableDemo',
       component: () => import('/@/views/demo/table/UseTable.vue'),
       meta: {
-        title: 'routes.demo.table.useTable',
+        title: t('routes.demo.table.useTable'),
       },
     },
     {
@@ -74,7 +75,7 @@ const table: AppRouteModule = {
       name: 'RefTableDemo',
       component: () => import('/@/views/demo/table/RefTable.vue'),
       meta: {
-        title: 'routes.demo.table.refTable',
+        title: t('routes.demo.table.refTable'),
       },
     },
     {
@@ -82,7 +83,7 @@ const table: AppRouteModule = {
       name: 'MultipleHeaderDemo',
       component: () => import('/@/views/demo/table/MultipleHeader.vue'),
       meta: {
-        title: 'routes.demo.table.multipleHeader',
+        title: t('routes.demo.table.multipleHeader'),
       },
     },
     {
@@ -90,7 +91,7 @@ const table: AppRouteModule = {
       name: 'MergeHeaderDemo',
       component: () => import('/@/views/demo/table/MergeHeader.vue'),
       meta: {
-        title: 'routes.demo.table.mergeHeader',
+        title: t('routes.demo.table.mergeHeader'),
       },
     },
     {
@@ -98,7 +99,7 @@ const table: AppRouteModule = {
       name: 'ExpandTableDemo',
       component: () => import('/@/views/demo/table/ExpandTable.vue'),
       meta: {
-        title: 'routes.demo.table.expandTable',
+        title: t('routes.demo.table.expandTable'),
       },
     },
     {
@@ -106,7 +107,7 @@ const table: AppRouteModule = {
       name: 'FixedHeightDemo',
       component: () => import('/@/views/demo/table/FixedHeight.vue'),
       meta: {
-        title: 'routes.demo.table.fixedHeight',
+        title: t('routes.demo.table.fixedHeight'),
       },
     },
     {
@@ -114,7 +115,7 @@ const table: AppRouteModule = {
       name: 'FooterTableDemo',
       component: () => import('/@/views/demo/table/FooterTable.vue'),
       meta: {
-        title: 'routes.demo.table.footerTable',
+        title: t('routes.demo.table.footerTable'),
       },
     },
     {
@@ -122,7 +123,7 @@ const table: AppRouteModule = {
       name: 'EditCellTableDemo',
       component: () => import('/@/views/demo/table/EditCellTable.vue'),
       meta: {
-        title: 'routes.demo.table.editCellTable',
+        title: t('routes.demo.table.editCellTable'),
       },
     },
     {
@@ -130,7 +131,7 @@ const table: AppRouteModule = {
       name: 'EditRowTableDemo',
       component: () => import('/@/views/demo/table/EditRowTable.vue'),
       meta: {
-        title: 'routes.demo.table.editRowTable',
+        title: t('routes.demo.table.editRowTable'),
       },
     },
   ],
 import type { AppRouteModule } from '/@/router/types';
 import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const tree: AppRouteModule = {
   path: '/tree',
@@ -9,7 +10,7 @@ const tree: AppRouteModule = {
   redirect: '/tree/basic',
   meta: {
     icon: 'clarity:tree-view-line',
-    title: 'routes.demo.tree.tree',
+    title: t('routes.demo.tree.tree'),
   },
   children: [
     {
@@ -17,7 +18,7 @@ const tree: AppRouteModule = {
       name: 'BasicTreeDemo',
       component: () => import('/@/views/demo/tree/index.vue'),
       meta: {
-        title: 'routes.demo.tree.basic',
+        title: t('routes.demo.tree.basic'),
       },
     },
     {
@@ -25,7 +26,7 @@ const tree: AppRouteModule = {
       name: 'EditTreeDemo',
       component: () => import('/@/views/demo/tree/EditTree.vue'),
       meta: {
-        title: 'routes.demo.tree.editTree',
+        title: t('routes.demo.tree.editTree'),
       },
     },
     {
@@ -33,7 +34,7 @@ const tree: AppRouteModule = {
       name: 'ActionTreeDemo',
       component: () => import('/@/views/demo/tree/ActionTree.vue'),
       meta: {
-        title: 'routes.demo.tree.actionTree',
+        title: t('routes.demo.tree.actionTree'),
       },
     },
   ],
 import type { AppRouteModule } from '/@/router/types';
 import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
 const dashboard: AppRouteModule = {
   path: '/home',
@@ -9,7 +10,7 @@ const dashboard: AppRouteModule = {
   redirect: '/home/welcome',
   meta: {
     icon: 'bx:bx-home',
-    title: 'routes.dashboard.welcome',
+    title: t('routes.dashboard.welcome'),
   },
   children: [
     {
@@ -17,7 +18,7 @@ const dashboard: AppRouteModule = {
       name: 'Welcome',
       component: () => import('/@/views/dashboard/welcome/index.vue'),
       meta: {
-        title: 'routes.dashboard.welcome',
+        title: t('routes.dashboard.welcome'),
         affix: true,
         icon: 'bx:bx-home',
       },