feat: support i18n (#607)

* feat: support i18n

* feat: support i18n

* feat: support i18n

* feat: support i18n

* feat: support i18n

* feat: tag tabs i18n

* fix: fix missing i18n

* fix: fix missing i18n

package.json

@@ -33,6 +33,7 @@
     "tvision-color": "^1.6.0",
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
+    "vue-i18n": "^9.4.1",
     "vue-router": "~4.2.4"
   },
   "devDependencies": {

src/App.vue

@@ -1,9 +1,12 @@
 <template>
-  <router-view :class="[mode]" />
+  <t-config-provider :global-config="getComponentsLocale">
+    <router-view :key="locale" :class="[mode]"
+  /></t-config-provider>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import { useLocale } from '@/locales/useLocale';
 import { useSettingStore } from '@/store';
 
 const store = useSettingStore();
@@ -11,6 +14,8 @@ const store = useSettingStore();
 const mode = computed(() => {
   return store.displayMode;
 });
+
+const { getComponentsLocale, locale } = useLocale();
 </script>
 <style lang="less" scoped>
 #nprogress .bar {

src/api/permission.ts

@@ -2,7 +2,7 @@ import type { MenuListResult } from '@/api/model/permissionModel';
 import { request } from '@/utils/request';
 
 const Api = {
-  MenuList: '/get-menu-list',
+  MenuList: '/get-menu-list-i18n',
 };
 
 export function getMenuList() {

src/components/common-table/index.vue

@@ -5,45 +5,45 @@
         <t-col :span="10">
           <t-row :gutter="[24, 24]">
             <t-col :span="4">
-              <t-form-item label="合同名称" name="name">
+              <t-form-item :label="$t('components.commonTable.contractName')" name="name">
                 <t-input
                   v-model="formData.name"
                   class="form-item-content"
                   type="search"
-                  placeholder="请输入合同名称"
+                  :placeholder="$t('components.commonTable.contractNamePlaceholder')"
                   :style="{ minWidth: '134px' }"
                 />
               </t-form-item>
             </t-col>
             <t-col :span="4">
-              <t-form-item label="合同状态" name="status">
+              <t-form-item :label="$t('components.commonTable.contractStatus')" name="status">
                 <t-select
                   v-model="formData.status"
                   class="form-item-content"
                   :options="CONTRACT_STATUS_OPTIONS"
-                  placeholder="请选择合同状态"
+                  :placeholder="$t('components.commonTable.contractStatusPlaceholder')"
                   clearable
                 />
               </t-form-item>
             </t-col>
             <t-col :span="4">
-              <t-form-item label="合同编号" name="no">
+              <t-form-item :label="$t('components.commonTable.contractNum')" name="no">
                 <t-input
                   v-model="formData.no"
                   class="form-item-content"
-                  placeholder="请输入合同编号"
+                  :placeholder="$t('components.commonTable.contractNumPlaceholder')"
                   :style="{ minWidth: '134px' }"
                 />
               </t-form-item>
             </t-col>
             <t-col :span="4">
-              <t-form-item label="合同类型" name="type">
+              <t-form-item :label="$t('components.commonTable.contractType')" name="type">
                 <t-select
                   v-model="formData.type"
                   style="display: inline-block"
                   class="form-item-content"
                   :options="CONTRACT_TYPE_OPTIONS"
-                  placeholder="请选择合同类型"
+                  :placeholder="$t('components.commonTable.contractTypePlaceholder')"
                   clearable
                 />
               </t-form-item>
@@ -52,8 +52,10 @@
         </t-col>
 
         <t-col :span="2" class="operation-container">
-          <t-button theme="primary" type="submit" :style="{ marginLeft: 'var(--td-comp-margin-s)' }"> 查询 </t-button>
+          <t-button theme="primary" type="submit" :style="{ marginLeft: 'var(--td-comp-margin-s)' }">
-          <t-button type="reset" variant="base" theme="default"> 重置 </t-button>
+            {{ $t('components.commonTable.query') }}
+          </t-button>
+          <t-button type="reset" variant="base" theme="default"> {{ $t('components.commonTable.reset') }} </t-button>
         </t-col>
       </t-row>
     </t-form>
@@ -72,29 +74,41 @@
         @change="rehandleChange"
       >
         <template #status="{ row }">
-          <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light"> 审核失败 </t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">
-          <t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light"> 待审核 </t-tag>
+            {{ $t('components.commonTable.contractStatusEnum.fail') }}
-          <t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light"> 待履行 </t-tag>
+          </t-tag>
-          <t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light"> 履行中 </t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light">
-          <t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light"> 已完成 </t-tag>
+            {{ $t('components.commonTable.contractStatusEnum.audit') }}
+          </t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light">
+            {{ $t('components.commonTable.contractStatusEnum.pending') }}
+          </t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light">
+            {{ $t('components.commonTable.contractStatusEnum.executing') }}
+          </t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light">
+            {{ $t('components.commonTable.contractStatusEnum.finish') }}
+          </t-tag>
         </template>
         <template #contractType="{ row }">
-          <p v-if="row.contractType === CONTRACT_TYPES.MAIN">审核失败</p>
+          <p v-if="row.contractType === CONTRACT_TYPES.MAIN">{{ $t('pages.listBase.contractStatusEnum.fail') }}</p>
-          <p v-if="row.contractType === CONTRACT_TYPES.SUB">待审核</p>
+          <p v-if="row.contractType === CONTRACT_TYPES.SUB">{{ $t('pages.listBase.contractStatusEnum.audit') }}</p>
-          <p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">待履行</p>
+          <p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">
+            {{ $t('pages.listBase.contractStatusEnum.pending') }}
+          </p>
         </template>
         <template #paymentType="{ row }">
-          <p v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
+          <div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
-            付款<trend class="dashboard-item-trend" type="up" />
+            {{ $t('pages.listBase.pay') }}<trend class="dashboard-item-trend" type="up" />
-          </p>
+          </div>
-          <p v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECEIPT" class="payment-col">
+          <div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECEIPT" class="payment-col">
-            收款<trend class="dashboard-item-trend" type="down" />
+            {{ $t('pages.listBase.receive') }}<trend class="dashboard-item-trend" type="down" />
-          </p>
+          </div>
         </template>
         <template #op="slotProps">
           <t-space>
-            <t-link theme="primary" @click="rehandleClickOp(slotProps)">管理</t-link>
+            <t-link theme="primary" @click="handleClickDetail()"> {{ $t('pages.listBase.detail') }}</t-link>
-            <t-link theme="danger" @click="handleClickDelete(slotProps)">删除</t-link>
+            <t-link theme="danger" @click="handleClickDelete(slotProps)"> {{ $t('pages.listBase.delete') }}</t-link>
           </t-space>
         </template>
       </t-table>
@@ -111,17 +125,13 @@
 <script setup lang="ts">
 import { MessagePlugin, PageInfo, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
 import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import { getList } from '@/api/list';
 import Trend from '@/components/trend/index.vue';
 import { prefix } from '@/config/global';
-import {
+import { CONTRACT_PAYMENT_TYPES, CONTRACT_STATUS, CONTRACT_TYPES } from '@/constants';
-  CONTRACT_PAYMENT_TYPES,
+import { t } from '@/locales';
-  CONTRACT_STATUS,
-  CONTRACT_STATUS_OPTIONS,
-  CONTRACT_TYPE_OPTIONS,
-  CONTRACT_TYPES,
-} from '@/constants';
 import { useSettingStore } from '@/store';
 
 interface FormData {
@@ -132,37 +142,51 @@ interface FormData {
 }
 
 const store = useSettingStore();
+const router = useRouter();
 
+const CONTRACT_STATUS_OPTIONS = [
+  { value: CONTRACT_STATUS.FAIL, label: t('components.commonTable.contractStatusEnum.fail') },
+  { value: CONTRACT_STATUS.AUDIT_PENDING, label: t('components.commonTable.contractStatusEnum.audit') },
+  { value: CONTRACT_STATUS.EXEC_PENDING, label: t('components.commonTable.contractStatusEnum.pending') },
+  { value: CONTRACT_STATUS.EXECUTING, label: t('components.commonTable.contractStatusEnum.executing') },
+  { value: CONTRACT_STATUS.FINISH, label: t('components.commonTable.contractStatusEnum.finish') },
+];
+
+const CONTRACT_TYPE_OPTIONS = [
+  { value: CONTRACT_TYPES.MAIN, label: t('components.commonTable.contractTypeEnum.main') },
+  { value: CONTRACT_TYPES.SUB, label: t('components.commonTable.contractTypeEnum.sub') },
+  { value: CONTRACT_TYPES.SUPPLEMENT, label: t('components.commonTable.contractTypeEnum.supplement') },
+];
 const COLUMNS: PrimaryTableCol[] = [
   {
-    title: '合同名称',
+    title: t('components.commonTable.contractName'),
     fixed: 'left',
     width: 280,
     ellipsis: true,
     align: 'left',
     colKey: 'name',
   },
-  { title: '合同状态', colKey: 'status', width: 160 },
+  { title: t('components.commonTable.contractStatus'), colKey: 'status', width: 160 },
   {
-    title: '合同编号',
+    title: t('components.commonTable.contractNum'),
     width: 160,
     ellipsis: true,
     colKey: 'no',
   },
   {
-    title: '合同类型',
+    title: t('components.commonTable.contractType'),
     width: 160,
     ellipsis: true,
     colKey: 'contractType',
   },
   {
-    title: '合同收付类型',
+    title: t('components.commonTable.contractPayType'),
     width: 160,
     ellipsis: true,
     colKey: 'paymentType',
   },
   {
-    title: '合同金额 (元)',
+    title: t('components.commonTable.contractAmount'),
     width: 160,
     ellipsis: true,
     colKey: 'amount',
@@ -172,7 +196,7 @@ const COLUMNS: PrimaryTableCol[] = [
     fixed: 'right',
     width: 160,
     colKey: 'op',
-    title: '操作',
+    title: t('components.commonTable.operation'),
   },
 ];
 
@@ -250,6 +274,10 @@ const handleClickDelete = (slot: { row: { rowIndex: number } }) => {
 const onReset = (val: unknown) => {
   console.log(val);
 };
+
+const handleClickDetail = () => {
+  router.push('/detail/base');
+};
 const onSubmit = (val: unknown) => {
   console.log(val);
   console.log(formData.value);
@@ -260,9 +288,6 @@ const rehandlePageChange = (pageInfo: PageInfo, newDataSource: TableRowData[]) =
 const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
   console.log('统一Change', changeParams, triggerAndData);
 };
-const rehandleClickOp = (ctx: unknown) => {
-  console.log(ctx);
-};
 
 const headerAffixedTop = computed(
   () =>

src/components/product-card/index.vue

@@ -13,7 +13,7 @@
     </template>
     <template #status>
       <t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">{{
-        product.isSetup ? '已启用' : '已停用'
+        product.isSetup ? $t('components.isSetup.on') : $t('components.isSetup.off')
       }}</t-tag>
     </template>
     <template #content>
@@ -36,12 +36,12 @@
         trigger="click"
         :options="[
           {
-            content: '管理',
+            content: $t('components.manage'),
             value: 'manage',
             onClick: () => handleClickManage(product),
           },
           {
-            content: '删除',
+            content: $t('components.delete'),
             value: 'delete',
             onClick: () => handleClickDelete(product),
           },

src/constants/index.ts

@@ -7,14 +7,6 @@ export const CONTRACT_STATUS = {
   FINISH: 4,
 };
 
-export const CONTRACT_STATUS_OPTIONS = [
-  { value: CONTRACT_STATUS.FAIL, label: '审核失败' },
-  { value: CONTRACT_STATUS.AUDIT_PENDING, label: '待审核' },
-  { value: CONTRACT_STATUS.EXEC_PENDING, label: '待履行' },
-  { value: CONTRACT_STATUS.EXECUTING, label: '审核成功' },
-  { value: CONTRACT_STATUS.FINISH, label: '已完成' },
-];
-
 // 合同类型枚举
 export const CONTRACT_TYPES = {
   MAIN: 0,
@@ -22,12 +14,6 @@ export const CONTRACT_TYPES = {
   SUPPLEMENT: 2,
 };
 
-export const CONTRACT_TYPE_OPTIONS = [
-  { value: CONTRACT_TYPES.MAIN, label: '主合同' },
-  { value: CONTRACT_TYPES.SUB, label: '子合同' },
-  { value: CONTRACT_TYPES.SUPPLEMENT, label: '补充合同' },
-];
-
 // 合同收付类型枚举
 export const CONTRACT_PAYMENT_TYPES = {
   PAYMENT: 0,

src/layouts/components/FrameContent.vue

@@ -25,7 +25,7 @@ const settingStore = useSettingStore();
 
 const getWrapStyle = computed((): CSSProperties => {
   return {
-    height: `${unref(heightRef)}px`,
+    height: `${heightRef.value}px`,
   };
 });
 

src/layouts/components/Header.vue

@@ -23,24 +23,34 @@
           <!-- 全局通知 -->
           <notice />
 
-          <t-tooltip placement="bottom" content="代码仓库">
+          <t-tooltip placement="bottom" :content="$t('layout.header.code')">
             <t-button theme="default" shape="square" variant="text" @click="navToGitHub">
               <t-icon name="logo-github" />
             </t-button>
           </t-tooltip>
-          <t-tooltip placement="bottom" content="帮助文档">
+          <t-tooltip placement="bottom" :content="$t('layout.header.help')">
             <t-button theme="default" shape="square" variant="text" @click="navToHelper">
               <t-icon name="help-circle" />
             </t-button>
           </t-tooltip>
+          <t-dropdown trigger="click">
+            <t-button theme="default" shape="square" variant="text">
+              <translate-icon />
+            </t-button>
+            <t-dropdown-menu>
+              <t-dropdown-item v-for="(lang, index) in langList" :key="index" :value="lang.value" @click="changeLang">{{
+                lang.content
+              }}</t-dropdown-item></t-dropdown-menu
+            >
+          </t-dropdown>
           <t-dropdown :min-column-width="120" trigger="click">
             <template #dropdown>
               <t-dropdown-menu>
                 <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
-                  <t-icon name="user-circle"></t-icon>个人中心
+                  <user-circle-icon />{{ $t('layout.header.user') }}
                 </t-dropdown-item>
                 <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
-                  <t-icon name="poweroff"></t-icon>退出登录
+                  <poweroff-icon />{{ $t('layout.header.signOut') }}
                 </t-dropdown-item>
               </t-dropdown-menu>
             </template>
@@ -49,12 +59,12 @@
                 <t-icon class="header-user-avatar" name="user-circle" />
               </template>
               <div class="header-user-account">{{ user.userInfo.name }}</div>
-              <template #suffix><t-icon name="chevron-down" /></template>
+              <template #suffix><chevron-down-icon /></template>
             </t-button>
           </t-dropdown>
-          <t-tooltip placement="bottom" content="系统设置">
+          <t-tooltip placement="bottom" :content="$t('layout.header.setting')">
             <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
-              <t-icon name="setting" />
+              <setting-icon />
             </t-button>
           </t-tooltip>
         </div>
@@ -64,12 +74,15 @@
 </template>
 
 <script setup lang="ts">
+import { ChevronDownIcon, PoweroffIcon, SettingIcon, TranslateIcon, UserCircleIcon } from 'tdesign-icons-vue-next';
 import type { PropType } from 'vue';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
 import LogoFull from '@/assets/assets-logo-full.svg?component';
 import { prefix } from '@/config/global';
+import { langList } from '@/locales/index';
+import { useLocale } from '@/locales/useLocale';
 import { getActive } from '@/router';
 import { useSettingStore, useUserStore } from '@/store';
 import type { MenuRoute } from '@/types/interface';
@@ -135,6 +148,13 @@ const menuCls = computed(() => {
   ];
 });
 const menuTheme = computed(() => props.theme as 'light' | 'dark');
+
+// 切换语言
+const { changeLocale } = useLocale();
+const changeLang = ({ value: lang }: { value: string }) => {
+  changeLocale(lang);
+};
+
 const changeCollapsed = () => {
   settingStore.updateConfig({
     isSidebarCompact: !settingStore.isSidebarCompact,
@@ -177,6 +197,7 @@ const navToHelper = () => {
       z-index: 10;
       width: auto;
       transition: all 0.3s;
+
       &-compact {
         left: 64px;
       }
@@ -188,6 +209,7 @@ const navToHelper = () => {
     display: inline-flex;
   }
 }
+
 .header-menu {
   flex: 1 1 1;
   display: inline-flex;
@@ -229,6 +251,7 @@ const navToHelper = () => {
   .t-logo {
     width: 100%;
     height: 100%;
+
     &:hover {
       cursor: pointer;
     }
@@ -254,12 +277,14 @@ const navToHelper = () => {
     color: var(--td-text-color-primary);
   }
 }
+
 .t-menu--dark {
   .t-head-menu__inner {
     border-bottom: 1px solid var(--td-gray-color-10);
   }
+
   .header-user-account {
-    color: rgba(255, 255, 255, 0.55);
+    color: rgb(255 255 255 / 55%);
   }
 }
 
@@ -280,8 +305,9 @@ const navToHelper = () => {
 
   :deep(.t-dropdown__item) {
     width: 100%;
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
+
   &:last-child {
     :deep(.t-dropdown__item) {
       margin-bottom: 8px;

src/layouts/components/LayoutContent.vue

@@ -29,29 +29,29 @@
             }"
           >
             <template v-if="!routeItem.isHome">
-              {{ routeItem.title }}
+              {{ renderTitle(routeItem.title) }}
             </template>
             <t-icon v-else name="home" />
             <template #dropdown>
               <t-dropdown-menu>
                 <t-dropdown-item @click="() => handleRefresh(routeItem, index)">
                   <t-icon name="refresh" />
-                  刷新
+                  {{ $t('layout.tagTabs.refresh') }}
                 </t-dropdown-item>
                 <t-dropdown-item v-if="index > 1" @click="() => handleCloseAhead(routeItem.path, index)">
                   <t-icon name="arrow-left" />
-                  关闭左侧
+                  {{ $t('layout.tagTabs.closeLeft') }}
                 </t-dropdown-item>
                 <t-dropdown-item
                   v-if="index < tabRouters.length - 1"
                   @click="() => handleCloseBehind(routeItem.path, index)"
                 >
                   <t-icon name="arrow-right" />
-                  关闭右侧
+                  {{ $t('layout.tagTabs.closeRight') }}
                 </t-dropdown-item>
                 <t-dropdown-item v-if="tabRouters.length > 2" @click="() => handleCloseOther(routeItem.path, index)">
                   <t-icon name="close-circle" />
-                  关闭其它
+                  {{ $t('layout.tagTabs.closeOther') }}
                 </t-dropdown-item>
               </t-dropdown-menu>
             </template>
@@ -75,6 +75,7 @@ import { computed, nextTick, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { prefix } from '@/config/global';
+import { useLocale } from '@/locales/useLocale';
 import { useSettingStore, useTabsRouterStore } from '@/store';
 import type { TRouterInfo, TTabRemoveOptions } from '@/types/interface';
 
@@ -90,6 +91,8 @@ const tabsRouterStore = useTabsRouterStore();
 const tabRouters = computed(() => tabsRouterStore.tabRouters.filter((route) => route.isAlive || route.isHome));
 const activeTabPath = ref('');
 
+const { locale } = useLocale();
+
 const handleChangeCurrentTab = (path: string) => {
   const { tabRouters } = tabsRouterStore;
   const route = tabRouters.find((i) => i.path === path);
@@ -104,6 +107,10 @@ const handleRemove = (options: TTabRemoveOptions) => {
   if ((options.value as string) === route.path) router.push({ path: nextRouter.path, query: nextRouter.query });
 };
 
+const renderTitle = (title: string | Record<string, string>) => {
+  if (typeof title === 'string') return title;
+  return title[locale.value];
+};
 const handleRefresh = (route: TRouterInfo, routeIdx: number) => {
   tabsRouterStore.toggleTabRouterAlive(routeIdx);
   nextTick(() => {

src/layouts/components/MenuContent.vue

@@ -6,16 +6,16 @@
           <template #icon>
             <component :is="menuIcon(item)" class="t-icon"></component>
           </template>
-          {{ item.title }}
+          {{ renderMenuTitle(item.title) }}
         </t-menu-item>
         <t-menu-item v-else :name="item.path" :value="getPath(item)" :to="item.path">
           <template #icon>
             <component :is="menuIcon(item)" class="t-icon"></component>
           </template>
-          {{ item.title }}
+          {{ renderMenuTitle(item.title) }}
         </t-menu-item>
       </template>
-      <t-submenu v-else :name="item.path" :value="item.path" :title="item.title">
+      <t-submenu v-else :name="item.path" :value="item.path" :title="renderMenuTitle(item.title)">
         <template #icon>
           <component :is="menuIcon(item)" class="t-icon"></component>
         </template>
@@ -28,6 +28,7 @@
 import type { PropType } from 'vue';
 import { computed } from 'vue';
 
+import { useLocale } from '@/locales/useLocale';
 import { getActive } from '@/router';
 import type { MenuRoute } from '@/types/interface';
 
@@ -39,8 +40,10 @@ const props = defineProps({
     default: () => [],
   },
 });
+
 const active = computed(() => getActive());
 
+const { locale } = useLocale();
 const list = computed(() => {
   const { navData } = props;
   return getMenuList(navData);
@@ -52,6 +55,11 @@ const menuIcon = (item: ListItemType) => {
   return RenderIcon;
 };
 
+const renderMenuTitle = (title: string | Record<string, string>) => {
+  if (typeof title === 'string') return title;
+  return title[locale.value];
+};
+
 const getMenuList = (list: MenuRoute[], basePath?: string): ListItemType[] => {
   if (!list || list.length === 0) {
     return [];

src/layouts/components/Notice.vue

@@ -3,9 +3,14 @@
     <template #content>
       <div class="header-msg">
         <div class="header-msg-top">
-          <p>通知中心</p>
+          <p>{{ $t('layout.notice.title') }}</p>
-          <t-button v-if="unreadMsg.length > 0" class="clear-btn" variant="text" theme="primary" @click="setRead('all')"
+          <t-button
-            >清空</t-button
+            v-if="unreadMsg.length > 0"
+            class="clear-btn"
+            variant="text"
+            theme="primary"
+            @click="setRead('all')"
+            >{{ $t('layout.notice.clear') }}</t-button
           >
         </div>
         <t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="false">
@@ -16,19 +21,21 @@
             </div>
             <p class="msg-time">{{ item.date }}</p>
             <template #action>
-              <t-button size="small" variant="outline" @click="setRead('radio', item)"> 设为已读 </t-button>
+              <t-button size="small" variant="outline" @click="setRead('radio', item)">
+                {{ $t('layout.notice.setRead') }}
+              </t-button>
             </template>
           </t-list-item>
         </t-list>
 
         <div v-else class="empty-list">
           <img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" />
-          <p>暂无通知</p>
+          <p>{{ $t('layout.notice.empty') }}</p>
         </div>
         <div v-if="unreadMsg.length > 0" class="header-msg-bottom">
-          <t-button class="header-msg-bottom-link" variant="text" theme="default" block @click="goDetail"
+          <t-button class="header-msg-bottom-link" variant="text" theme="default" block @click="goDetail">{{
-            >查看全部</t-button
+            $t('layout.notice.viewAll')
-          >
+          }}</t-button>
         </div>
       </div>
     </template>

src/layouts/components/Search.vue

@@ -2,7 +2,7 @@
   <div v-if="layout === 'side'" class="header-menu-search">
     <t-input
       :class="['header-search', { 'hover-active': isSearchFocus }]"
-      placeholder="请输入搜索内容"
+      :placeholder="$t('layout.searchPlaceholder')"
       @blur="changeSearchFocus(false)"
       @focus="changeSearchFocus(true)"
     >
@@ -56,6 +56,7 @@ const changeSearchFocus = (value: boolean) => {
 .header-menu-search {
   display: flex;
   margin-left: 16px;
+
   .hover-active {
     background: var(--td-bg-color-secondarycontainer);
   }
@@ -63,20 +64,22 @@ const changeSearchFocus = (value: boolean) => {
   .t-icon {
     color: var(--td-text-color-primary) !important;
   }
+
   .header-search {
     :deep(.t-input) {
       border: none;
       outline: none;
       box-shadow: none;
       transition: background @anim-duration-base linear;
+
       .t-input__inner {
         transition: background @anim-duration-base linear;
-      }
-      .t-input__inner {
         background: none;
       }
+
       &:hover {
         background: var(--td-bg-color-secondarycontainer);
+
         .t-input__inner {
           background: var(--td-bg-color-secondarycontainer);
         }
@@ -91,14 +94,17 @@ const changeSearchFocus = (value: boolean) => {
 
   .t-icon {
     font-size: 20px;
+
     &.general {
       margin-right: 16px;
     }
   }
 }
+
 .search-icon-hide {
   opacity: 0;
 }
+
 .header-menu-search-left {
   display: flex;
   align-items: center;
@@ -106,12 +112,15 @@ const changeSearchFocus = (value: boolean) => {
   .header-search {
     width: 200px;
     transition: width @anim-duration-base @anim-time-fn-easing;
+
     :deep(.t-input) {
       border: 0;
+
       &:focus {
         box-shadow: none;
       }
     }
+
     &.width-zero {
       width: 0;
       opacity: 0;

src/layouts/setting.vue

@@ -3,14 +3,14 @@
     v-model:visible="showSettingPanel"
     size="408px"
     :footer="false"
-    header="页面配置"
+    :header="$t('layout.setting.title')"
     :close-btn="true"
     class="setting-drawer-container"
     @close-btn-click="handleCloseDrawer"
   >
     <div class="setting-container">
       <t-form ref="form" :data="formData" label-align="left">
-        <div class="setting-group-title">主题模式</div>
+        <div class="setting-group-title">{{ $t('layout.setting.theme.mode') }}</div>
         <t-radio-group v-model="formData.mode">
           <div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer">
             <div>
@@ -21,7 +21,7 @@
             </div>
           </div>
         </t-radio-group>
-        <div class="setting-group-title">主题色</div>
+        <div class="setting-group-title">{{ $t('layout.setting.theme.color') }}</div>
         <t-radio-group v-model="formData.brandTheme">
           <div v-for="(item, index) in DEFAULT_COLOR_OPTIONS" :key="index" class="setting-layout-drawer">
             <t-radio-button :key="index" :value="item" class="setting-layout-color-group">
@@ -53,7 +53,7 @@
           </div>
         </t-radio-group>
 
-        <div class="setting-group-title">导航布局</div>
+        <div class="setting-group-title">{{ $t('layout.setting.navigationLayout') }}</div>
         <t-radio-group v-model="formData.layout">
           <div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer">
             <t-radio-button :key="index" :value="item">
@@ -70,23 +70,29 @@
           <t-switch v-model="formData.isSidebarFixed" />
         </t-form-item>
 
-        <div class="setting-group-title">元素开关</div>
+        <div class="setting-group-title">{{ $t('layout.setting.element.title') }}</div>
-        <t-form-item v-show="formData.layout === 'side'" label="显示 Header" name="showHeader">
+        <t-form-item
+          v-show="formData.layout === 'side'"
+          :label="$t('layout.setting.element.showHeader')"
+          name="showHeader"
+        >
           <t-switch v-model="formData.showHeader" />
         </t-form-item>
-        <t-form-item label="显示 Breadcrumbs" name="showBreadcrumb">
+        <t-form-item :label="$t('layout.setting.element.showBreadcrumb')" name="showBreadcrumb">
           <t-switch v-model="formData.showBreadcrumb" />
         </t-form-item>
-        <t-form-item label="显示 Footer" name="showFooter">
+        <t-form-item :label="$t('layout.setting.element.showFooter')" name="showFooter">
           <t-switch v-model="formData.showFooter" />
         </t-form-item>
-        <t-form-item label="使用 多标签Tab页" name="isUseTabsRouter">
+        <t-form-item :label="$t('layout.setting.element.useTagTabs')" name="isUseTabsRouter">
           <t-switch v-model="formData.isUseTabsRouter"></t-switch>
         </t-form-item>
       </t-form>
       <div class="setting-info">
-        <p>请复制后手动修改配置文件: /src/config/style.ts</p>
+        <p>{{ $t('layout.setting.tips') }}</p>
-        <t-button theme="primary" variant="text" @click="handleCopy"> 复制配置项 </t-button>
+        <t-button theme="primary" variant="text" @click="handleCopy">
+          {{ $t('layout.setting.copy.title') }}
+        </t-button>
       </div>
     </div>
   </t-drawer>
@@ -104,6 +110,7 @@ import ColorContainer from '@/components/color/index.vue';
 import Thumbnail from '@/components/thumbnail/index.vue';
 import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
 import STYLE_CONFIG from '@/config/style';
+import { t } from '@/locales';
 import { useSettingStore } from '@/store';
 
 const settingStore = useSettingStore();
@@ -111,9 +118,9 @@ const settingStore = useSettingStore();
 const LAYOUT_OPTION = ['side', 'top', 'mix'];
 
 const MODE_OPTIONS = [
-  { type: 'light', text: '明亮' },
+  { type: 'light', text: t('layout.setting.theme.options.light') },
-  { type: 'dark', text: '暗黑' },
+  { type: 'dark', text: t('layout.setting.theme.options.dark') },
-  { type: 'auto', text: '跟随系统' },
+  { type: 'auto', text: t('layout.setting.theme.options.auto') },
 ];
 
 const initStyleConfig = () => {

src/locales/index.ts

@@ -0,0 +1,68 @@
+import { DropdownOption } from 'tdesign-vue-next';
+import { computed } from 'vue';
+import { createI18n } from 'vue-i18n';
+
+// 导入语言文件
+const langModules = import.meta.glob('./lang/*/index.ts', { eager: true });
+
+const langModuleMap = new Map<string, Object>();
+
+export const langCode: Array<string> = [];
+
+export const localeConfigKey = 'tdesign-starter-locale';
+
+// 获取浏览器默认语言环境
+const browserLanguage = navigator.language.replace('-', '_');
+
+// 生成语言模块列表
+const generateLangModuleMap = () => {
+  const fullPaths = Object.keys(langModules);
+  console.log(langModules, 'langModules');
+  fullPaths.forEach((fullPath) => {
+    const k = fullPath.replace('./lang', '');
+    const startIndex = 1;
+    const lastIndex = k.lastIndexOf('/');
+    const code = k.substring(startIndex, lastIndex);
+    langCode.push(code);
+    console.log(langCode, 'langCode');
+    langModuleMap.set(code, langModules[fullPath]);
+  });
+};
+
+// 导出 Message
+const importMessages = computed(() => {
+  generateLangModuleMap();
+
+  const message: Recordable = {};
+  langModuleMap.forEach((value: any, key) => {
+    message[key] = value.default;
+  });
+  return message;
+});
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: localStorage.getItem(localeConfigKey) || browserLanguage || 'zh_CN',
+  fallbackLocale: 'zh_CN',
+  messages: importMessages.value,
+  globalInjection: true,
+});
+
+export const langList = computed(() => {
+  if (langModuleMap.size === 0) generateLangModuleMap();
+
+  const list: DropdownOption[] = [];
+  langModuleMap.forEach((value: any, key) => {
+    list.push({
+      content: value.default.lang,
+      value: key,
+    });
+  });
+
+  return list;
+});
+
+// @ts-ignore
+export const { t } = i18n.global;
+
+export default i18n;

src/locales/lang/en_US/components.ts

@@ -0,0 +1,37 @@
+export default {
+  isSetup: {
+    on: 'Enabled',
+    off: 'Disabled',
+  },
+  manage: 'Manage',
+  delete: 'Delete',
+  commonTable: {
+    contractName: 'Name',
+    contractStatus: 'Status',
+    contractNum: 'Number',
+    contractType: 'Type',
+    contractPayType: 'Pay Type',
+    contractAmount: 'Amount',
+    contractNamePlaceholder: 'enter contract name',
+    contractStatusPlaceholder: 'enter contract status',
+    contractNumPlaceholder: 'enter contract number',
+    contractTypePlaceholder: 'enter contract type',
+    operation: 'Operation',
+    detail: 'detail',
+    delete: 'delete',
+    contractStatusEnum: {
+      fail: 'fail',
+      audit: 'audit',
+      executing: 'executing',
+      pending: 'pending',
+      finish: 'finish',
+    },
+    contractTypeEnum: {
+      main: 'main',
+      sub: 'sub',
+      supplement: 'supplement',
+    },
+    reset: 'reset',
+    query: 'query',
+  },
+};

src/locales/lang/en_US/index.ts

@@ -0,0 +1,54 @@
+import merge from 'lodash/merge';
+import componentsLocale from 'tdesign-vue-next/es/locale/en_US';
+
+import components from './components';
+import layout from './layout';
+import pages from './pages';
+
+export default {
+  lang: 'English',
+  layout,
+  pages,
+  components,
+  constants: {
+    contract: {
+      name: 'Name',
+      status: 'Status',
+      num: 'Number',
+      type: 'Type',
+      typePlaceholder: 'Please enter type',
+      payType: 'Pay Type',
+      amount: 'Amount',
+      amountPlaceholder: 'Please enter amount',
+      signDate: 'Sign Date',
+      effectiveDate: 'Effective Date',
+      endDate: 'End Date',
+      createDate: 'Create Date',
+      attachment: 'Attachment',
+      company: 'Company',
+      employee: 'Employee',
+      pay: 'pay',
+      receive: 'received',
+      remark: 'remark',
+      statusOptions: {
+        fail: 'Failure',
+        auditPending: 'Pending audit',
+        execPending: 'Pending performance',
+        executing: 'Successful',
+        finish: 'Finish',
+      },
+      typeOptions: {
+        main: 'Master contract',
+        sub: 'Subcontract',
+        supplement: 'Supplementary contract',
+      },
+    },
+  },
+  componentsLocale: merge({}, componentsLocale, {
+    // 可以在此处定义更多自定义配置，具体可配置内容参看 API 文档
+    // https://tdesign.tencent.com/vue-next/config?tab=api
+    // pagination: {
+    //   jumpTo: 'xxx'
+    // },
+  }),
+};

src/locales/lang/en_US/layout.ts

@@ -0,0 +1,52 @@
+export default {
+  header: {
+    code: 'Code Repository',
+    help: 'Document',
+    user: 'Profile',
+    signOut: 'Sign Out',
+    setting: 'Setting',
+  },
+  notice: {
+    title: 'Notification Center',
+    clear: 'Clear',
+    setRead: 'Set Read',
+    empty: 'Empty',
+    emptyNotice: 'No Notice',
+    viewAll: 'View All',
+  },
+  tagTabs: {
+    closeOther: 'close other',
+    closeLeft: 'close left',
+    closeRight: 'close right',
+    refresh: 'refresh',
+  },
+  searchPlaceholder: 'Enter search content',
+  setting: {
+    title: 'Setting',
+    theme: {
+      mode: 'Theme Mode',
+      color: 'Theme Color',
+      options: {
+        light: 'Light',
+        dark: 'Dark ',
+        auto: 'Follow System',
+      },
+    },
+    navigationLayout: 'Navigation Layout',
+    splitMenu: 'Split Menu（Only Mix mode）',
+    fixedSidebar: 'Fixed Sidebar',
+    element: {
+      title: 'Element Switch',
+      showHeader: 'Show Header',
+      showBreadcrumb: 'Show Breadcrumb',
+      showFooter: 'Show Footer',
+      useTagTabs: 'Use Tag Tabs',
+    },
+    tips: 'Please copy and manually modify the configuration file: /src/config/style.ts',
+    copy: {
+      title: 'Copy',
+      success: 'copied',
+      fail: 'fail to copy',
+    },
+  },
+};

src/locales/lang/en_US/pages/dashboard-base.ts

@@ -0,0 +1,62 @@
+export default {
+  outputOverview: {
+    title: 'In/Out Overview',
+    subtitle: '(pieces)',
+    export: 'Export data',
+    month: {
+      input: 'Total in store this month',
+      output: 'Total out store this month',
+    },
+    since: 'Since last week',
+  },
+  rankList: {
+    title: 'Sales order ranking',
+    week: 'This week',
+    month: 'Latest 3 months',
+    info: 'Detail',
+  },
+  topPanel: {
+    card1: 'Total Revenue',
+    card2: 'Total Refund',
+    card3: 'Active User(s)',
+    card4: 'Generate Order(s)',
+    cardTips: 'since last week',
+    analysis: {
+      title: 'Analysis Data',
+      unit: 'ten thousand yuan',
+      series1: 'this month',
+      series2: 'last month',
+      channels: 'Sales Channels',
+      channel1: 'online',
+      channel2: 'shop',
+      channelTips: ' sales ratio',
+    },
+  },
+  saleColumns: {
+    index: 'Ranking',
+    productName: 'Customer',
+    growUp: 'Grow up',
+    count: 'Count',
+    operation: 'Operation',
+  },
+  buyColumns: {
+    index: 'Ranking',
+    productName: 'Supplier',
+    growUp: 'Grow up',
+    count: 'Count',
+    operation: 'Operation',
+  },
+  chart: {
+    week1: 'MON',
+    week2: 'TUE',
+    week3: 'WED',
+    week4: 'THU',
+    week5: 'FRI',
+    week6: 'SAT',
+    week7: 'SUN',
+    max: 'Max',
+    min: 'Min',
+    thisMonth: 'this month',
+    lastMonth: 'last month',
+  },
+};

src/locales/lang/en_US/pages/dashboard-detail.ts

@@ -0,0 +1,45 @@
+export default {
+  topPanel: {
+    title: 'Purchase applications for this month',
+    quarter: 'Quarter on quarter',
+    paneList: {
+      totalRequest: 'Apply count',
+      suppliers: 'Number of Suppliers',
+      productCategory: 'Product Category',
+      applicant: 'Number of Application',
+      completionRate: 'Completion Rate(%)',
+      arrivalRate: 'Arrival Rate(%)',
+    },
+  },
+  procurement: {
+    title: 'Trends in purchase requisitions for goods',
+    goods: {
+      cup: 'cup',
+      tea: 'tea',
+      honey: 'honey',
+      flour: 'flour',
+      coffeeMachine: 'coffee machine',
+      massageMachine: 'massage machine',
+    },
+  },
+  ssl: 'SSL certificate',
+  sslDescription:
+    'SSL certificate, also known as a server certificate, is a digital certificate that authenticates the identity of a website and encrypts information sent to the server using SSL technology. Tencent Cloud provides you with a one-stop service for SSL certificates, including application, management, and deployment of both free and paid certificates.',
+  satisfaction: {
+    title: 'distribution of satisfaction levels for purchased goods',
+    export: 'export data',
+  },
+  chart: {
+    week1: 'MON',
+    week2: 'TUE',
+    week3: 'WED',
+    week4: 'THU',
+    week5: 'FRI',
+    week6: 'SAT',
+    week7: 'SUN',
+    max: 'Max',
+    min: 'Min',
+    thisMonth: 'this month',
+    lastMonth: 'last month',
+  },
+};

src/locales/lang/en_US/pages/detail-base.ts

@@ -0,0 +1,20 @@
+export default {
+  baseInfo: {
+    title: 'Base Info',
+  },
+  changelog: {
+    title: 'Changelog',
+    step1: {
+      title: 'upload file',
+      subtitle: 'subtitle',
+    },
+    step2: {
+      title: 'modify contract amount',
+      subtitle: 'subtitle',
+    },
+    step3: {
+      title: 'create contract',
+      desc: 'administrator',
+    },
+  },
+};

src/locales/lang/en_US/pages/detail-card.ts

@@ -0,0 +1,43 @@
+export default {
+  baseInfo: {
+    title: 'Base Info',
+  },
+  invoice: {
+    title: 'Invoice Progress',
+    step1: {
+      title: 'Apply',
+      content: 'The electronic invoice has been submitted on December 21st',
+    },
+    step2: {
+      title: 'Electronic invoice',
+      content: 'expected to be processed within 1-3 business days.',
+    },
+    step3: {
+      title: 'Invoice is send',
+      content: 'we will contact you within 7 business days.',
+    },
+    step4: {
+      title: 'Finish',
+    },
+  },
+  product: {
+    title: 'Product Category',
+    add: 'add production',
+    month: 'month',
+    quarter: 'quarter',
+  },
+  detail: {
+    title: 'Product Procurement Detail',
+    form: {
+      applyNo: 'Apply no',
+      product: 'Name',
+      productNo: 'No.',
+      department: 'Department',
+      num: 'Num',
+      createTime: 'Create time',
+      operation: 'Operation',
+      manage: 'manage',
+      delete: 'delete',
+    },
+  },
+};

src/locales/lang/en_US/pages/detail-deploy.ts

@@ -0,0 +1,32 @@
+export default {
+  deployTrend: {
+    title: 'Deploy Trend',
+    warning: 'Warning',
+    thisMonth: 'this month',
+    thisWeek: 'this week',
+    lastMonth: 'last month',
+    thisYear: 'this year',
+    lastYear: 'last year',
+    week1: 'MON',
+    week2: 'TUE',
+    week3: 'WED',
+    week4: 'THU',
+    week5: 'FRI',
+    week6: 'SAT',
+    week7: 'SUN',
+  },
+  projectList: {
+    title: 'Project List',
+    dialog: {
+      title: 'Base Info',
+    },
+    table: {
+      name: 'Name',
+      admin: 'Admin',
+      createTime: 'Create time',
+      operation: 'Operation',
+      manage: 'manage',
+      delete: 'delete',
+    },
+  },
+};

src/locales/lang/en_US/pages/detail-secondary.ts

@@ -0,0 +1,9 @@
+export default {
+  read: 'Read',
+  unread: 'Unread',
+  all: 'All',
+  setRead: 'set as read',
+  setUnread: 'set as unread',
+  delete: 'delete',
+  empty: 'Empty',
+};

src/locales/lang/en_US/pages/form-base.ts

@@ -0,0 +1,27 @@
+export default {
+  title: 'Contract Info',
+  contractName: 'Name',
+  contractStatus: 'Status',
+  contractNum: 'Number',
+  contractType: 'Type',
+  contractTypePlaceholder: 'Please enter type',
+  contractPayType: 'Pay Type',
+  contractAmount: 'Amount',
+  contractAmountPlaceholder: 'Please enter amount',
+  contractSignDate: 'Sign Date',
+  contractEffectiveDate: 'Effective Date',
+  contractEndDate: 'End Date',
+  company: 'Company',
+  employee: 'Employee',
+  pay: 'pay',
+  receive: 'received',
+  upload: 'upload file',
+  uploadFile: 'upload contract file',
+  uploadTips: 'Please upload a PDF file, with a size limit of 60MB.',
+  otherInfo: 'Other Info',
+  remark: 'Remark',
+  remarkPlaceholder: 'please enter remark',
+  notaryPublic: 'Notary Public',
+  confirm: 'confirm',
+  cancel: 'cancel',
+};

src/locales/lang/en_US/pages/form-step.ts

@@ -0,0 +1,53 @@
+export default {
+  step1: {
+    title: 'Submit Application',
+    subtitle: 'Submitted on December 21st',
+    rules: 'rules',
+    rule1:
+      '1. After applying for an invoice, the electronic invoice will be issued within 1-3 working days. If the qualification review is passed, the VAT special invoice (paper) will be mailed to you within 10 working days after the electronic invoice is issued;',
+    rule2: '2. The invoiced amount will be the actual amount you paid;',
+    rule3: '3. For any questions, please contact us directly at 13300001111.',
+    contractName: 'Name',
+    contractTips: 'Please select a contract name',
+    invoiceType: 'Invoice type',
+    amount: 'Amount',
+    submit: 'Submit Application',
+  },
+  step2: {
+    title: 'Electronic Information',
+    subtitle: 'Contact Customer Service if you have any questions',
+    invoiceTitle: 'Invoice Title',
+    taxNum: 'Tax Num',
+    address: 'Address',
+    bank: 'Bank',
+    bankAccount: 'Bank Account',
+    email: 'Email',
+    tel: 'Tel',
+    invoiceTitlePlaceholder: 'please enter invoice title',
+    taxNumPlaceholder: 'please enter tax num',
+    addressPlaceholder: 'please enter address',
+    bankPlaceholder: 'please enter bank',
+    bankAccountPlaceholder: 'please enter bank account',
+    emailPlaceholder: 'please enter email',
+    telPlaceholder: 'please enter tel',
+  },
+  step3: {
+    title: 'Invoice Mailed',
+    subtitle: 'Contact us after the electronic invoice is issued',
+    consignee: 'Consignee',
+    mobileNum: 'Mobile Num',
+    deliveryAddress: 'Address',
+    fullAddress: 'Full Address',
+  },
+  step4: {
+    title: 'Application Completed',
+    subtitle: 'Contact Customer Service if you have any questions',
+    finishTitle: 'Application is completed.',
+    finishTips:
+      'The electronic invoice is expected to be sent to your email within 1-3 working days. Please be patient for the delivery of the paper invoice.',
+    reapply: 'reapply',
+    check: 'check progress',
+  },
+  preStep: 'pre step',
+  nextStep: 'next step',
+};

src/locales/lang/en_US/pages/index.ts

@@ -0,0 +1,33 @@
+import dashboardBase from './dashboard-base';
+import dashboardDetail from './dashboard-detail';
+import detailBase from './detail-base';
+import detailCard from './detail-card';
+import detailDeploy from './detail-deploy';
+import detailSecondary from './detail-secondary';
+import formBase from './form-base';
+import formStep from './form-step';
+import listBase from './list-base';
+import listCard from './list-card';
+import listFilter from './list-filter';
+import listTree from './list-tree';
+import login from './login';
+import result from './result';
+import user from './user';
+
+export default {
+  dashboardBase,
+  dashboardDetail,
+  listBase,
+  listCard,
+  listFilter,
+  listTree,
+  detailBase,
+  detailCard,
+  detailDeploy,
+  detailSecondary,
+  formBase,
+  formStep,
+  user,
+  login,
+  result,
+};

src/locales/lang/en_US/pages/list-base.ts

@@ -0,0 +1,25 @@
+export default {
+  export: 'export',
+  create: 'create',
+  select: 'select',
+  items: 'items',
+  contractName: 'Name',
+  contractStatus: 'Status',
+  contractNum: 'Number',
+  contractType: 'Type',
+  contractPayType: 'Pay Type',
+  contractAmount: 'Amount',
+  operation: 'Operation',
+  detail: 'detail',
+  delete: 'delete',
+  pay: 'pay',
+  receive: 'received',
+  placeholder: 'please enter to search',
+  contractStatusEnum: {
+    fail: 'fail',
+    audit: 'audit',
+    executing: 'executing',
+    pending: 'pending',
+    finish: 'finish',
+  },
+};

src/locales/lang/en_US/pages/list-card.ts

@@ -0,0 +1,13 @@
+export default {
+  create: 'Create Product',
+  placeholder: 'please enter to search',
+  productName: 'Name',
+  productStatus: 'Status',
+  productDescription: 'Description',
+  productType: 'Type',
+  productRemark: 'Remark',
+  productStatusEnum: {
+    off: 'off',
+    on: 'on',
+  },
+};

src/locales/lang/en_US/pages/list-filter.ts

@@ -0,0 +1 @@
+export default {};

src/locales/lang/en_US/pages/list-tree.ts

@@ -0,0 +1,3 @@
+export default {
+  placeholder: 'please enter to search',
+};

src/locales/lang/en_US/pages/login.ts

@@ -0,0 +1,26 @@
+export default {
+  loginTitle: 'Login in',
+  noAccount: 'No Account?',
+  createAccount: 'Create Account',
+  remember: 'Remember Account',
+  forget: 'Forget Account',
+  signIn: 'Sign in',
+  existAccount: 'Exist Account?',
+  refresh: 'refresh',
+  wechatLogin: 'Login with WeChat',
+  accountLogin: 'Login with Account',
+  phoneLogin: 'Login with Mobile Phone',
+  input: {
+    account: 'please enter account',
+    password: 'please enter password',
+    phone: 'please enter phone',
+    verification: 'please enter verification code',
+  },
+  required: {
+    account: 'account is required',
+    phone: 'phone is required',
+    password: 'password is required',
+    verification: 'verification code is require',
+  },
+  sendVerification: 'send',
+};

src/locales/lang/en_US/pages/result.ts

@@ -0,0 +1,43 @@
+export default {
+  403: {
+    tips: 'sorry, you don not have permission to access this page. Please contact the creator through WeCom',
+    back: 'Back to homepage',
+  },
+  404: {
+    subtitle: 'Sorry, the page is not found',
+    back: 'Back to homepage',
+  },
+  500: {
+    subtitle: 'Sorry, the server is error',
+    back: 'Back to homepage',
+  },
+  fail: {
+    title: 'Create fail',
+    subtitle: 'Sorry, your project creation has failed',
+    back: 'Back to homepage',
+    modify: 'Back to modify',
+  },
+  success: {
+    title: 'Project is created',
+    subtitle: 'Contact the person in charge of distributing the application',
+    back: 'Back to homepage',
+    progress: 'Check Progress',
+  },
+  maintenance: {
+    title: 'System maintenance',
+    subtitle: 'Please try again later',
+    back: 'Back to homepage',
+  },
+  browserIncompatible: {
+    title: 'browser is incompatible',
+    subtitle: 'the browser version you are using is too outdated to open the current webpage.',
+    back: 'Back to homepage',
+    recommend: 'TDesign Starter recommend the following browser',
+  },
+  networkError: {
+    title: 'Network Error',
+    subtitle: 'Network error, please try again later',
+    back: 'Back to homepage',
+    reload: 'Reload',
+  },
+};

src/locales/lang/en_US/pages/user.ts

@@ -0,0 +1,23 @@
+export default {
+  markDay: 'Good afternoon, today marks your 100th day at Tencent',
+  personalInfo: {
+    title: 'Personal Info',
+    position: 'Employee of the Hong Kong and Macau Business Expansion team',
+
+    desc: {
+      phone: 'Phone',
+      mobile: 'Mobile',
+      seat: 'Seat',
+      email: 'Email',
+      position: 'Position',
+      leader: 'Leader',
+      entity: 'Entity',
+      joinDay: 'Day of join',
+      group: 'Group',
+    },
+  },
+  contentList: 'Content List',
+  visitData: 'Visit Data',
+  teamMember: 'Team Member',
+  serviceProduction: 'Service Product',
+};

src/locales/lang/zh_CN/components.ts

@@ -0,0 +1,38 @@
+export default {
+  isSetup: {
+    on: '已启用',
+    off: '已停用',
+  },
+  manage: '管理',
+  delete: '删除',
+  commonTable: {
+    contractName: '合同名称',
+    contractNamePlaceholder: '请输入合同名称',
+    contractStatus: '合同状态',
+    contractStatusPlaceholder: '请输入合同状态',
+    contractNum: '合同编号',
+    contractNumPlaceholder: '请输入合同编号',
+    contractType: '合同类型',
+    contractTypePlaceholder: '请选择合同类型',
+    contractPayType: '合同支付类型',
+    contractAmount: '合同金额',
+    operation: '操作',
+    detail: '详情',
+    delete: '删除',
+    placeholder: '请输入内容搜索',
+    contractStatusEnum: {
+      fail: '审核失败',
+      audit: '待审核',
+      executing: '履行中',
+      pending: '待履行',
+      finish: '已完成',
+    },
+    contractTypeEnum: {
+      main: '主合同',
+      sub: '子合同',
+      supplement: '补充合同',
+    },
+    reset: '重置',
+    query: '查询',
+  },
+};

src/locales/lang/zh_CN/index.ts

@@ -0,0 +1,47 @@
+import componentsLocale from 'tdesign-vue-next/es/locale/zh_CN';
+
+import components from './components';
+import layout from './layout';
+import pages from './pages';
+
+export default {
+  lang: '简体中文',
+  layout,
+  pages,
+  components,
+  constants: {
+    contract: {
+      name: '合同名称',
+      status: '合同状态',
+      num: '合同编号',
+      type: '合同类型',
+      typePlaceholder: '请输入类型',
+      payType: '合同收支类型',
+      amount: '合同金额',
+      amountPlaceholder: '请输入金额',
+      signDate: '合同签订日期',
+      effectiveDate: '合同生效日期',
+      endDate: '合同结束日期',
+      createDate: '合同创建时间',
+      company: '甲方',
+      employee: '乙方',
+      pay: '付款',
+      receive: '收款',
+      remark: '备注',
+      attachment: '附件',
+      statusOptions: {
+        fail: '审核失败',
+        auditPending: '待审核',
+        execPending: '待履行',
+        executing: '审核成功',
+        finish: '已完成',
+      },
+      typeOptions: {
+        main: '主合同',
+        sub: '子合同',
+        supplement: '补充合同',
+      },
+    },
+  },
+  componentsLocale,
+};

src/locales/lang/zh_CN/layout.ts

@@ -0,0 +1,52 @@
+export default {
+  header: {
+    code: '代码仓库',
+    help: '帮助文档',
+    user: '个人中心',
+    signOut: '退出登录',
+    setting: '系统设置',
+  },
+  notice: {
+    title: '通知中心',
+    clear: '清空',
+    setRead: '设为已读',
+    empty: '空',
+    emptyNotice: '暂无通知',
+    viewAll: '查看全部',
+  },
+  searchPlaceholder: '请输入搜索内容',
+  tagTabs: {
+    closeOther: '关闭其他',
+    closeLeft: '关闭左侧',
+    closeRight: '关闭右侧',
+    refresh: '刷新',
+  },
+  setting: {
+    title: '页面配置',
+    theme: {
+      mode: '主题模式',
+      color: '主题色',
+      options: {
+        light: '明亮',
+        dark: '暗黑',
+        auto: '跟随系统',
+      },
+    },
+    navigationLayout: '导航布局',
+    splitMenu: '分割菜单（混合模式下有效）',
+    fixedSidebar: '固定侧边栏',
+    element: {
+      title: '元素开关',
+      showHeader: '显示顶栏',
+      showBreadcrumb: '显示面包屑',
+      showFooter: '显示页脚',
+      useTagTabs: '展示多标签Tab页',
+    },
+    tips: '请复制后手动修改配置文件: /src/config/style.ts',
+    copy: {
+      title: '复制配置项',
+      success: '复制成功',
+      fail: '复制失败',
+    },
+  },
+};

src/locales/lang/zh_CN/pages/dashboard-base.ts

@@ -0,0 +1,63 @@
+export default {
+  title: '概览仪表盘',
+  outputOverview: {
+    title: '出入库概览',
+    subtitle: '(件)',
+    export: '导出数据',
+    month: {
+      input: '本月入库总计（件）',
+      output: '本月出库总计（件）',
+    },
+    since: '自从上周以来',
+  },
+  rankList: {
+    title: '销售订单排名',
+    week: '本周',
+    month: '近三月',
+    info: '详情',
+  },
+  topPanel: {
+    card1: '总收入',
+    card2: '总退款',
+    card3: '活跃用户（个）',
+    card4: '产生订单（个）',
+    cardTips: '自从上周以来',
+    analysis: {
+      title: '统计数据',
+      unit: '万元',
+      series1: '本月',
+      series2: '上月',
+      channels: '销售渠道',
+      channel1: '线上',
+      channel2: '门店',
+      channelTips: '销售占比',
+    },
+  },
+  saleColumns: {
+    index: '排名',
+    productName: '客户名称',
+    growUp: '较上周',
+    count: '订单量',
+    operation: '操作',
+  },
+  buyColumns: {
+    index: '排名',
+    productName: '供应商名称',
+    growUp: '较上周',
+    count: '订单量',
+    operation: '操作',
+  },
+  chart: {
+    week1: '周一',
+    week2: '周二',
+    week3: '周三',
+    week4: '周四',
+    week5: '周五',
+    week6: '周六',
+    week7: '周日',
+    max: '最大值',
+    min: '最小值',
+    thisMonth: '本月',
+    lastMonth: '上月',
+  },
+};

src/locales/lang/zh_CN/pages/dashboard-detail.ts

@@ -0,0 +1,44 @@
+export default {
+  topPanel: {
+    title: '本月采购申请情况',
+    quarter: '环比',
+    paneList: {
+      totalRequest: '总申请数（次）',
+      suppliers: '供应商数量（个）',
+      productCategory: '采购商品品类（类）',
+      applicant: '申请人数量（人）',
+      completionRate: '申请完成率（%）',
+      arrivalRate: '到货及时率（%）',
+    },
+  },
+  procurement: {
+    title: '采购商品申请趋势',
+    goods: {
+      cup: '杯子',
+      tea: '茶叶',
+      honey: '蜂蜜',
+      flour: '面粉',
+      coffeeMachine: '咖啡机',
+      massageMachine: '按摩仪',
+    },
+  },
+  ssl: 'SSL证书',
+  sslDescription: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部署',
+  satisfaction: {
+    title: '采购商品满意度分布',
+    export: '导出数据',
+  },
+  chart: {
+    week1: '周一',
+    week2: '周二',
+    week3: '周三',
+    week4: '周四',
+    week5: '周五',
+    week6: '周六',
+    week7: '周日',
+    max: '最大值',
+    min: '最小值',
+    thisMonth: '本月',
+    lastMonth: '上月',
+  },
+};

src/locales/lang/zh_CN/pages/detail-base.ts

@@ -0,0 +1,20 @@
+export default {
+  baseInfo: {
+    title: '基本信息',
+  },
+  changelog: {
+    title: '变更记录',
+    step1: {
+      title: '上传合同附件',
+      subtitle: '这里是提示文字',
+    },
+    step2: {
+      title: '修改合同金额',
+      subtitle: '这里是提示文字',
+    },
+    step3: {
+      title: '新建合同',
+      desc: '管理员-李川操作',
+    },
+  },
+};

src/locales/lang/zh_CN/pages/detail-card.ts

@@ -0,0 +1,43 @@
+export default {
+  baseInfo: {
+    title: '基本信息',
+  },
+  invoice: {
+    title: '发票进度',
+    step1: {
+      title: '申请提交',
+      content: '已于12月21日提交',
+    },
+    step2: {
+      title: '电子发票',
+      content: '预计1～3个工作日',
+    },
+    step3: {
+      title: '发票已邮寄',
+      content: '电子发票开出后7个工作日联系',
+    },
+    step4: {
+      title: '完成',
+    },
+  },
+  product: {
+    title: '产品目录',
+    add: '新增产品',
+    month: '月份',
+    quarter: '季度',
+  },
+  detail: {
+    title: '产品采购明细',
+    form: {
+      applyNo: '申请号',
+      product: '产品名称',
+      productNo: '产品编号',
+      operation: '操作',
+      department: '申请部门',
+      num: '采购数量',
+      createTime: '创建时间',
+      manage: '管理',
+      delete: '删除',
+    },
+  },
+};

src/locales/lang/zh_CN/pages/detail-deploy.ts

@@ -0,0 +1,32 @@
+export default {
+  deployTrend: {
+    title: '部署趋势',
+    warning: '告警情况',
+    thisMonth: '本月',
+    thisWeek: '本周',
+    lastMonth: '上月',
+    thisYear: '今年',
+    lastYear: '去年',
+    week1: '周一',
+    week2: '周二',
+    week3: '周三',
+    week4: '周四',
+    week5: '周五',
+    week6: '周六',
+    week7: '周日',
+  },
+  projectList: {
+    title: '项目列表',
+    dialog: {
+      title: '基本信息',
+    },
+    table: {
+      name: '名称',
+      admin: '管理员',
+      createTime: '创建时间',
+      operation: '操作',
+      manage: '管理',
+      delete: '删除',
+    },
+  },
+};

src/locales/lang/zh_CN/pages/detail-secondary.ts

@@ -0,0 +1,9 @@
+export default {
+  read: '已读通知',
+  unread: '未读通知',
+  all: '全部通知',
+  setRead: '设为已读',
+  setUnread: '设为未读',
+  delete: '删除通知',
+  empty: '暂无通知',
+};

src/locales/lang/zh_CN/pages/form-base.ts

@@ -0,0 +1,27 @@
+export default {
+  title: '合同信息',
+  contractName: '合同名称',
+  contractStatus: '合同状态',
+  contractNum: '合同编号',
+  contractType: '合同类型',
+  contractTypePlaceholder: '请输入类型',
+  contractPayType: '合同收支类型',
+  contractAmount: '合同金额',
+  contractAmountPlaceholder: '请输入金额',
+  contractSignDate: '合同签订日期',
+  contractEffectiveDate: '合同生效日期',
+  contractEndDate: '合同结束日期',
+  company: '甲方',
+  employee: '乙方',
+  pay: '付款',
+  receive: '收款',
+  upload: '上传文件',
+  uploadFile: '上传合同',
+  uploadTips: '请上传pdf文件，大小在60M以内',
+  otherInfo: '其他信息',
+  remark: '备注',
+  remarkPlaceholder: '请输入备注',
+  notaryPublic: '公证人',
+  confirm: '确认提交',
+  cancel: '取消',
+};

src/locales/lang/zh_CN/pages/form-step.ts

@@ -0,0 +1,54 @@
+export default {
+  step1: {
+    title: '提交申请',
+    subtitle: '已于12月21日提交',
+    rules: '发票开具规则',
+    rule1:
+      '1、申请开票后，电子发票在1～3个工作日内开具；增值税专用发票（纸质）如资质审核通过，将在电子发票开具后10个工作日内为您寄出；',
+    rule2: '2、开票金额为您实际支付金额；',
+    rule3: '3、如有疑问请直接联系：13300001111。',
+    contractName: '合同名称',
+    contractTips: '请选择合同名称',
+    invoiceType: '发票类型',
+    amount: '开票金额',
+    submit: '提交申请',
+  },
+  step2: {
+    title: '电子信息',
+    subtitle: '如有疑问联系客服',
+    invoiceTitle: '发票抬头',
+    taxNum: '纳税人识别号',
+    address: '地址',
+    bank: '开户行',
+    bankAccount: '银行账号',
+    email: '邮箱',
+    tel: '手机号',
+    titlePlaceholder: '请输入电子信息',
+    subtitlePlaceholder: '请输入如有疑问联系客服',
+    invoiceTitlePlaceholder: '请输入发票抬头',
+    taxNumPlaceholder: '请输入纳税人识别号',
+    addressPlaceholder: '请输入地址',
+    bankPlaceholder: '请输入开户行',
+    bankAccountPlaceholder: '请输入银行账号',
+    emailPlaceholder: '请输入邮箱',
+    telPlaceholder: '请输入手机号',
+  },
+  step3: {
+    title: '发票已邮寄',
+    subtitle: '电子发票开出后联系',
+    consignee: '收货人',
+    mobileNum: '手机号码',
+    deliveryAddress: '收货地址',
+    fullAddress: '详细地址',
+  },
+  step4: {
+    title: '完成申请',
+    subtitle: '如有疑问联系客服',
+    finishTitle: '完成开票申请',
+    finishTips: '预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待',
+    reapply: '再次申请',
+    check: '查看进度',
+  },
+  preStep: '上一步',
+  nextStep: '下一步',
+};

src/locales/lang/zh_CN/pages/index.ts

@@ -0,0 +1,33 @@
+import dashboardBase from './dashboard-base';
+import dashboardDetail from './dashboard-detail';
+import detailBase from './detail-base';
+import detailCard from './detail-card';
+import detailDeploy from './detail-deploy';
+import detailSecondary from './detail-secondary';
+import formBase from './form-base';
+import formStep from './form-step';
+import listBase from './list-base';
+import listCard from './list-card';
+import listFilter from './list-filter';
+import listTree from './list-tree';
+import login from './login';
+import result from './result';
+import user from './user';
+
+export default {
+  dashboardBase,
+  dashboardDetail,
+  listBase,
+  listCard,
+  listFilter,
+  listTree,
+  detailBase,
+  detailCard,
+  detailDeploy,
+  detailSecondary,
+  formBase,
+  formStep,
+  user,
+  login,
+  result,
+};

src/locales/lang/zh_CN/pages/list-base.ts

@@ -0,0 +1,25 @@
+export default {
+  export: '导出合同',
+  create: '新建合同',
+  select: '已选',
+  items: '项',
+  contractName: '合同名称',
+  contractStatus: '合同状态',
+  contractNum: '合同编号',
+  contractType: '合同类型',
+  contractPayType: '合同收支类型',
+  contractAmount: '合同金额',
+  operation: '操作',
+  detail: '详情',
+  delete: '删除',
+  pay: '付款',
+  receive: '收款',
+  placeholder: '请输入内容搜索',
+  contractStatusEnum: {
+    fail: '审核失败',
+    audit: '待审核',
+    executing: '履行中',
+    pending: '待履行',
+    finish: '已完成',
+  },
+};

src/locales/lang/zh_CN/pages/list-card.ts

@@ -0,0 +1,13 @@
+export default {
+  create: '新建产品',
+  placeholder: '请输入内容搜索',
+  productName: '产品名称',
+  productStatus: '产品状态',
+  productDescription: '产品描述',
+  productType: '产品类型',
+  productRemark: '备注',
+  productStatusEnum: {
+    off: '停用',
+    on: '启用',
+  },
+};

src/locales/lang/zh_CN/pages/list-filter.ts

@@ -0,0 +1 @@
+export default {};

src/locales/lang/zh_CN/pages/list-tree.ts

@@ -0,0 +1,3 @@
+export default {
+  placeholder: '请输入内容进行搜索',
+};

src/locales/lang/zh_CN/pages/login.ts

@@ -0,0 +1,27 @@
+export default {
+  loginTitle: '登录到',
+  noAccount: '没有账号吗?',
+  existAccount: '已有账号?',
+  createAccount: '注册新账号',
+  remember: '记住账号',
+  forget: '忘记账号',
+  signIn: '登录',
+  register: '注册',
+  refresh: '刷新',
+  wechatLogin: '使用微信扫一扫登录',
+  accountLogin: '使用账号登录',
+  phoneLogin: '使用手机号登录',
+  input: {
+    account: '请输入账号',
+    password: '请输入登录密码',
+    phone: '请输入手机号',
+    verification: '请输入验证码',
+  },
+  required: {
+    account: '账号必填',
+    phone: '手机号必填',
+    password: '密码必填',
+    verification: '验证码必填',
+  },
+  sendVerification: '发送验证码',
+};

src/locales/lang/zh_CN/pages/result.ts

@@ -0,0 +1,43 @@
+export default {
+  403: {
+    tips: '抱歉，您无权限访问此页面，企业微信联系创建者',
+    back: '返回首页',
+  },
+  404: {
+    subtitle: '抱歉，您访问的页面不存在',
+    back: '返回首页',
+  },
+  500: {
+    subtitle: '抱歉，服务器出错啦',
+    back: '返回首页',
+  },
+  fail: {
+    title: '创建失败',
+    subtitle: '抱歉，您的项目创建失败，企业微信联系检查创建者权限，或返回修改。',
+    back: '回到首页',
+    progress: '返回修改',
+  },
+  success: {
+    title: '项目已创建成功',
+    subtitle: '可以联系负责人分发应用',
+    back: '回到首页',
+    progress: '查看进度',
+  },
+  maintenance: {
+    title: '系统维护中',
+    subtitle: '系统维护中，请稍后再试',
+    back: '回到首页',
+  },
+  browserIncompatible: {
+    title: '浏览器不兼容',
+    subtitle: '抱歉，您正在使用的浏览器版本过低，无法打开当前网页。',
+    back: '回到首页',
+    recommend: 'TDesign Starter 推荐以下主流浏览器',
+  },
+  networkError: {
+    title: '网络异常',
+    subtitle: '网络异常, 请稍后重试',
+    back: '回到首页',
+    reload: '重新加载',
+  },
+};

src/locales/lang/zh_CN/pages/user.ts

@@ -0,0 +1,22 @@
+export default {
+  markDay: '下午好，今天是你加入鹅厂的第 100 天',
+  personalInfo: {
+    title: '个人信息',
+    position: '港澳业务拓展组员工 直客销售 ',
+    desc: {
+      phone: '座机',
+      mobile: '手机',
+      seat: '座位',
+      email: '邮箱',
+      position: '职位',
+      leader: '上级',
+      entity: '主体',
+      joinDay: '入职时间',
+      group: '所属团队',
+    },
+  },
+  visitData: '首页访问数据',
+  contentList: '内容列表',
+  teamMember: '团队成员',
+  serviceProduction: '服务产品',
+};

src/locales/useLocale.ts

@@ -0,0 +1,27 @@
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { i18n, langCode, localeConfigKey } from '@/locales/index';
+
+export function useLocale() {
+  const { locale } = useI18n({ useScope: 'global' });
+  function changeLocale(lang: string) {
+    // 如果切换的语言不在对应语言文件里则默认为简体中文
+    if (!langCode.includes(lang)) {
+      lang = 'zh_CN';
+    }
+
+    locale.value = lang;
+    localStorage.setItem(localeConfigKey, lang);
+  }
+
+  const getComponentsLocale = computed(() => {
+    return i18n.global.getLocaleMessage(locale.value).componentsLocale;
+  });
+
+  return {
+    changeLocale,
+    getComponentsLocale,
+    locale,
+  };
+}

src/main.ts

@@ -5,6 +5,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import { store } from './store';
+import i18n from './locales';
 
 import 'tdesign-vue-next/es/style/index.css';
 import '@/style/index.less';
@@ -15,5 +16,6 @@ const app = createApp(App);
 app.use(TDesign);
 app.use(store);
 app.use(router);
+app.use(i18n);
 
 app.mount('#app');

src/pages/dashboard/base/components/MiddleChart.vue

@@ -1,7 +1,12 @@
 <template>
   <t-row :gutter="16" class="row-container">
     <t-col :xs="12" :xl="9">
-      <t-card title="统计数据" :subtitle="`(万元)${currentMonth}`" class="dashboard-chart-card" :bordered="false">
+      <t-card
+        :title="$t('pages.dashboardBase.topPanel.analysis.title')"
+        :subtitle="currentMonth"
+        class="dashboard-chart-card"
+        :bordered="false"
+      >
         <template #actions>
           <div class="dashboard-chart-title-container">
             <t-date-range-picker
@@ -21,11 +26,16 @@
       </t-card>
     </t-col>
     <t-col :xs="12" :xl="3">
-      <t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card" :bordered="false">
+      <t-card
+        :title="$t('pages.dashboardBase.topPanel.analysis.channels')"
+        :subtitle="currentMonth"
+        class="dashboard-chart-card"
+        :bordered="false"
+      >
         <div
           id="countContainer"
-          :style="{ width: `${resizeTime * 326}px`, height: `${resizeTime * 326}px`, margin: '0 auto' }"
           class="dashboard-chart-container"
+          :style="{ width: `${resizeTime * 326}px`, height: `${resizeTime * 326}px`, margin: '0 auto' }"
         />
       </t-card>
     </t-col>

src/pages/dashboard/base/components/OutputOverview.vue

@@ -4,8 +4,8 @@
       <t-col :xs="12" :xl="9">
         <t-card
           :bordered="false"
-          title="出入库概览"
+          :title="$t('pages.dashboardBase.outputOverview.title')"
-          subtitle="(件)"
+          :subtitle="$t('pages.dashboardBase.outputOverview.subtitle')"
           :class="{ 'dashboard-overview-card': true, 'overview-panel': true }"
         >
           <template #actions>
@@ -23,26 +23,34 @@
       <t-col :xs="12" :xl="3">
         <t-card :bordered="false" :class="{ 'dashboard-overview-card': true, 'export-panel': true }">
           <template #actions>
-            <t-button>导出数据</t-button>
+            <t-button>{{ $t('pages.dashboardBase.outputOverview.export') }}</t-button>
           </template>
           <t-row>
             <t-col :xs="6" :xl="12">
-              <t-card :bordered="false" subtitle="本月出库总计（件）" class="inner-card">
+              <t-card
+                :bordered="false"
+                :subtitle="$t('pages.dashboardBase.outputOverview.month.input')"
+                class="inner-card"
+              >
                 <div class="inner-card__content">
                   <div class="inner-card__content-title">1726</div>
                   <div class="inner-card__content-footer">
-                    自从上周以来
+                    {{ $t('pages.dashboardBase.outputOverview.since') }}
                     <trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
                   </div>
                 </div>
               </t-card>
             </t-col>
             <t-col :xs="6" :xl="12">
-              <t-card :bordered="false" subtitle="本月入库总计（件）" class="inner-card">
+              <t-card
+                :bordered="false"
+                :subtitle="$t('pages.dashboardBase.outputOverview.month.output')"
+                class="inner-card"
+              >
                 <div class="inner-card__content">
                   <div class="inner-card__content-title">226</div>
                   <div class="inner-card__content-footer">
-                    自从上周以来
+                    {{ $t('pages.dashboardBase.outputOverview.since') }}
                     <trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
                   </div>
                 </div>

src/pages/dashboard/base/components/RankList.vue

@@ -1,11 +1,11 @@
 <template>
   <t-row :gutter="16" class="row-container">
     <t-col :xs="12" :xl="6">
-      <t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
+      <t-card :title="$t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false">
         <template #actions>
           <t-radio-group default-value="dateVal" variant="default-filled">
-            <t-radio-button value="dateVal">本周</t-radio-button>
+            <t-radio-button value="dateVal">{{ $t('pages.dashboardBase.rankList.week') }}</t-radio-button>
-            <t-radio-button value="monthVal">近三个月</t-radio-button>
+            <t-radio-button value="monthVal">{{ $t('pages.dashboardBase.rankList.month') }}</t-radio-button>
           </t-radio-group>
         </template>
         <t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName">
@@ -20,17 +20,19 @@
             </span>
           </template>
           <template #operation="slotProps">
-            <t-link theme="primary" @click="rehandleClickOp(slotProps)">详情</t-link>
+            <t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
+              $t('pages.dashboardBase.rankList.info')
+            }}</t-link>
           </template>
         </t-table>
       </t-card>
     </t-col>
     <t-col :xs="12" :xl="6">
-      <t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
+      <t-card :title="$t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false">
         <template #actions>
           <t-radio-group default-value="dateVal" variant="default-filled">
-            <t-radio-button value="dateVal">本周</t-radio-button>
+            <t-radio-button value="dateVal">{{ $t('pages.dashboardBase.rankList.week') }}</t-radio-button>
-            <t-radio-button value="monthVal">近三个月</t-radio-button>
+            <t-radio-button value="monthVal">{{ $t('pages.dashboardBase.rankList.month') }}</t-radio-button>
           </t-radio-group>
         </template>
         <t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName">
@@ -43,7 +45,9 @@
             <trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
           </template>
           <template #operation="slotProps">
-            <t-link theme="primary" @click="rehandleClickOp(slotProps)">详情</t-link>
+            <t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
+              $t('pages.dashboardBase.rankList.info')
+            }}</t-link>
           </template>
         </t-table>
       </t-card>
@@ -52,10 +56,84 @@
 </template>
 
 <script setup lang="ts">
-// 导入样式
+import type { TdBaseTableProps } from 'tdesign-vue-next';
-import Trend from '@/components/trend/index.vue';
 
-import { BUY_COLUMNS, BUY_TEND_LIST, SALE_COLUMNS, SALE_TEND_LIST } from '../constants';
+import Trend from '@/components/trend/index.vue';
+import { t } from '@/locales';
+
+import { BUY_TEND_LIST, SALE_TEND_LIST } from '../constants';
+
+const SALE_COLUMNS: TdBaseTableProps['columns'] = [
+  {
+    align: 'center',
+    colKey: 'index',
+    title: t('pages.dashboardBase.saleColumns.index'),
+    width: 70,
+    fixed: 'left',
+  },
+  {
+    align: 'left',
+    ellipsis: true,
+    colKey: 'productName',
+    title: t('pages.dashboardBase.saleColumns.productName'),
+    width: 150,
+  },
+  {
+    align: 'center',
+    colKey: 'growUp',
+    width: 70,
+    title: t('pages.dashboardBase.saleColumns.growUp'),
+  },
+  {
+    align: 'center',
+    colKey: 'count',
+    title: t('pages.dashboardBase.saleColumns.count'),
+    width: 70,
+  },
+  {
+    align: 'center',
+    colKey: 'operation',
+    title: t('pages.dashboardBase.saleColumns.operation'),
+    width: 70,
+    fixed: 'right',
+  },
+];
+
+const BUY_COLUMNS: TdBaseTableProps['columns'] = [
+  {
+    align: 'center',
+    colKey: 'index',
+    title: t('pages.dashboardBase.buyColumns.index'),
+    width: 70,
+    fixed: 'left',
+  },
+  {
+    align: 'left',
+    ellipsis: true,
+    colKey: 'productName',
+    width: 150,
+    title: t('pages.dashboardBase.buyColumns.productName'),
+  },
+  {
+    align: 'center',
+    colKey: 'growUp',
+    width: 70,
+    title: t('pages.dashboardBase.buyColumns.growUp'),
+  },
+  {
+    align: 'center',
+    colKey: 'count',
+    title: t('pages.dashboardBase.buyColumns.count'),
+    width: 70,
+  },
+  {
+    align: 'center',
+    colKey: 'operation',
+    title: t('pages.dashboardBase.buyColumns.operation'),
+    width: 70,
+    fixed: 'right',
+  },
+];
 
 const rehandleClickOp = (val: MouseEvent) => {
   console.log(val);

src/pages/dashboard/base/components/TopPanel.vue

@@ -32,7 +32,7 @@
         <template #footer>
           <div class="dashboard-item-bottom">
             <div class="dashboard-item-block">
-              自从上周以来
+              {{ $t('pages.dashboardBase.topPanel.cardTips') }}
               <trend
                 class="dashboard-item-trend"
                 :type="item.upTrend ? 'up' : 'down'"
@@ -63,10 +63,10 @@ import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 
 // 导入样式
 import Trend from '@/components/trend/index.vue';
+import { t } from '@/locales';
 import { useSettingStore } from '@/store';
 import { changeChartsTheme } from '@/utils/color';
 
-import { PANE_LIST } from '../constants';
 import { constructInitDashboardDataset } from '../index';
 
 echarts.use([LineChart, BarChart, CanvasRenderer]);
@@ -74,6 +74,33 @@ echarts.use([LineChart, BarChart, CanvasRenderer]);
 const store = useSettingStore();
 const resizeTime = ref(1);
 
+const PANE_LIST = [
+  {
+    title: t('pages.dashboardBase.topPanel.card1'),
+    number: '¥ 28,425.00',
+    upTrend: '20.5%',
+    leftType: 'echarts-line',
+  },
+  {
+    title: t('pages.dashboardBase.topPanel.card2'),
+    number: '¥ 768.00',
+    downTrend: '20.5%',
+    leftType: 'echarts-bar',
+  },
+  {
+    title: t('pages.dashboardBase.topPanel.card3'),
+    number: '1126',
+    upTrend: '20.5%',
+    leftType: 'icon-usergroup',
+  },
+  {
+    title: t('pages.dashboardBase.topPanel.card4'),
+    number: 527,
+    downTrend: '20.5%',
+    leftType: 'icon-file-paste',
+  },
+];
+
 // moneyCharts
 let moneyContainer: HTMLElement;
 let moneyChart: echarts.ECharts;

src/pages/dashboard/base/constants.ts

@@ -1,13 +1,3 @@
-import { TdBaseTableProps } from 'tdesign-vue-next';
-
-interface DashboardPanel {
-  title: string;
-  number: string | number;
-  leftType: string;
-  upTrend?: string;
-  downTrend?: string;
-}
-
 interface TendItem {
   growUp?: number;
   productName: string;
@@ -15,33 +5,6 @@ interface TendItem {
   date: string;
 }
 
-export const PANE_LIST: Array<DashboardPanel> = [
-  {
-    title: '总收入',
-    number: '¥ 28,425.00',
-    upTrend: '20.5%',
-    leftType: 'echarts-line',
-  },
-  {
-    title: '总退款',
-    number: '¥ 768.00',
-    downTrend: '20.5%',
-    leftType: 'echarts-bar',
-  },
-  {
-    title: '活跃用户（个）',
-    number: '1126',
-    upTrend: '20.5%',
-    leftType: 'icon-usergroup',
-  },
-  {
-    title: '产生订单（个）',
-    number: 527,
-    downTrend: '20.5%',
-    leftType: 'icon-file-paste',
-  },
-];
-
 export const SALE_TEND_LIST: Array<TendItem> = [
   {
     growUp: 1,
@@ -119,75 +82,3 @@ export const BUY_TEND_LIST: Array<TendItem> = [
     date: '2021-09-12',
   },
 ];
-
-export const SALE_COLUMNS: TdBaseTableProps['columns'] = [
-  {
-    align: 'center',
-    colKey: 'index',
-    title: '排名',
-    width: 70,
-    fixed: 'left',
-  },
-  {
-    align: 'left',
-    ellipsis: true,
-    colKey: 'productName',
-    title: '客户名称',
-    width: 150,
-  },
-  {
-    align: 'center',
-    colKey: 'growUp',
-    width: 70,
-    title: '较上周',
-  },
-  {
-    align: 'center',
-    colKey: 'count',
-    title: '订单量',
-    width: 70,
-  },
-  {
-    align: 'center',
-    colKey: 'operation',
-    title: '操作',
-    width: 70,
-    fixed: 'right',
-  },
-];
-
-export const BUY_COLUMNS: TdBaseTableProps['columns'] = [
-  {
-    align: 'center',
-    colKey: 'index',
-    title: '排名',
-    width: 70,
-    fixed: 'left',
-  },
-  {
-    align: 'left',
-    ellipsis: true,
-    colKey: 'productName',
-    width: 150,
-    title: '供应商名称',
-  },
-  {
-    align: 'center',
-    colKey: 'growUp',
-    width: 70,
-    title: '较上周',
-  },
-  {
-    align: 'center',
-    colKey: 'count',
-    title: '订单量',
-    width: 70,
-  },
-  {
-    align: 'center',
-    colKey: 'operation',
-    title: '操作',
-    width: 70,
-    fixed: 'right',
-  },
-];

src/pages/dashboard/base/index.ts

@@ -2,12 +2,14 @@ import dayjs from 'dayjs';
 import { EChartsOption } from 'echarts';
 
 import { TChartColor } from '@/config/color';
+import { t } from '@/locales/index';
 import { getRandomArray } from '@/utils/charts';
 import { getChartListColor } from '@/utils/color';
 
 /** 首页 dashboard 折线图 */
 export function constructInitDashboardDataset(type: string) {
   const dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+
   const datasetAxis = {
     xAxis: {
       type: 'category',
@@ -162,16 +164,16 @@ export function constructInitDataset({
       left: 'center',
       bottom: '0',
       orient: 'horizontal',
-      data: ['本月', '上月'],
+      data: [t('pages.dashboardBase.chart.thisMonth'), t('pages.dashboardBase.chart.lastMonth')],
     },
     series: [
       {
-        name: '本月',
+        name: t('pages.dashboardBase.chart.thisMonth'),
         data: outArray,
         type: 'bar',
       },
       {
-        name: '上月',
+        name: t('pages.dashboardBase.chart.lastMonth'),
         data: inArray,
         type: 'bar',
       },
@@ -231,7 +233,7 @@ export function getLineChartDataSet({
       left: 'center',
       bottom: '0',
       orient: 'horizontal', // legend 横向布局。
-      data: ['本月', '上月'],
+      data: [t('pages.dashboardBase.chart.thisMonth'), t('pages.dashboardBase.chart.lastMonth')],
       textStyle: {
         fontSize: 12,
         color: placeholderColor,
@@ -263,7 +265,7 @@ export function getLineChartDataSet({
     },
     series: [
       {
-        name: '本月',
+        name: t('pages.dashboardBase.chart.thisMonth'),
         data: outArray,
         type: 'line',
         smooth: false,
@@ -279,7 +281,7 @@ export function getLineChartDataSet({
         },
       },
       {
-        name: '上月',
+        name: t('pages.dashboardBase.chart.lastMonth'),
         data: inArray,
         type: 'line',
         smooth: false,
@@ -347,7 +349,7 @@ export function getPieChartDataSet({
         label: {
           show: true,
           position: 'center',
-          formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
+          formatter: ['{value|{d}%}', '{name|{b}}'].join('\n'),
           rich: {
             value: {
               color: textColor,
@@ -388,9 +390,9 @@ export function getPieChartDataSet({
         data: [
           {
             value: 1048,
-            name: '线上',
+            name: t('pages.dashboardBase.topPanel.analysis.channel1'),
           },
-          { value: radius * 7, name: '门店' },
+          { value: radius * 7, name: t('pages.dashboardBase.topPanel.analysis.channel2') },
         ],
       },
     ],

src/pages/dashboard/detail/constants.ts

@@ -1,32 +1,34 @@
+import { t } from '@/locales';
+
 export const PANE_LIST_DATA = [
   {
-    title: '总申请数（次）',
+    title: t('pages.dashboardDetail.topPanel.paneList.totalRequest'),
     number: '1126',
     upTrend: '10%',
   },
   {
-    title: '供应商数量（个）',
+    title: t('pages.dashboardDetail.topPanel.paneList.suppliers'),
     number: '13',
     downTrend: '13%',
   },
   {
-    title: '采购商品品类（类）',
+    title: t('pages.dashboardDetail.topPanel.paneList.productCategory'),
     number: '4',
     upTrend: '10%',
   },
   {
-    title: '申请人数量（人）',
+    title: t('pages.dashboardDetail.topPanel.paneList.applicant'),
     number: 90,
     downTrend: '44%',
     leftType: 'icon-file-paste',
   },
   {
-    title: '申请完成率（%）',
+    title: t('pages.dashboardDetail.topPanel.paneList.completionRate'),
     number: 80.5,
     upTrend: '70%',
   },
   {
-    title: '到货及时率（%）',
+    title: t('pages.dashboardDetail.topPanel.paneList.arrivalRate'),
     number: 78,
     upTrend: '16%',
   },
@@ -34,17 +36,17 @@ export const PANE_LIST_DATA = [
 
 export const PRODUCT_LIST = [
   {
-    description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
+    description: t('pages.dashboardDetail.sslDescription'),
     index: 1,
     isSetup: true,
-    name: 'SSL证书',
+    name: t('pages.dashboardDetail.ssl'),
     type: 4,
   },
   {
-    description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
+    description: t('pages.dashboardDetail.sslDescription'),
     index: 1,
     isSetup: true,
-    name: 'SSL证书',
+    name: t('pages.dashboardDetail.ssl'),
     type: 4,
   },
 ];

src/pages/dashboard/detail/index.ts

@@ -1,9 +1,9 @@
 import dayjs from 'dayjs';
 
 import { TChartColor } from '@/config/color';
+import { t } from '@/locales';
 import { getDateArray, getRandomArray } from '@/utils/charts';
 import { getChartListColor } from '@/utils/color';
-
 /**
  * 散点图数据
  *
@@ -54,7 +54,6 @@ export function getScatterDataSet({
     },
     yAxis: {
       type: 'value',
-      // splitLine: { show: false},
       axisLabel: {
         color: placeholderColor,
       },
@@ -89,7 +88,10 @@ export function getScatterDataSet({
       left: 'center',
       bottom: '0',
       orient: 'horizontal', // legend 横向布局。
-      data: ['按摩仪', '咖啡机'],
+      data: [
+        t(`pages.dashboardDetail.procurement.goods.massageMachine`),
+        t(`pages.dashboardDetail.procurement.goods.coffeeMachine`),
+      ],
       itemHeight: 8,
       itemWidth: 8,
       textStyle: {
@@ -99,13 +101,13 @@ export function getScatterDataSet({
     },
     series: [
       {
-        name: '按摩仪',
+        name: t(`pages.dashboardDetail.procurement.goods.massageMachine`),
         symbolSize: 10,
         data: outArray.reverse(),
         type: 'scatter',
       },
       {
-        name: '咖啡机',
+        name: t(`pages.dashboardDetail.procurement.goods.coffeeMachine`),
         symbolSize: 10,
         data: inArray.concat(inArray.reverse()),
         type: 'scatter',
@@ -120,7 +122,10 @@ export function getFolderLineDataSet({
   placeholderColor,
   borderColor,
 }: { dateTime?: Array<string> } & TChartColor) {
-  let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+  let dateArray = [];
+  for (let i = 1; i < 7; i++) {
+    dateArray.push(t(`pages.dashboardDetail.chart.week${i}`));
+  }
   if (dateTime.length > 0) {
     const divideNum = 7;
     dateArray = getDateArray(dateTime, divideNum);
@@ -137,7 +142,12 @@ export function getFolderLineDataSet({
       left: 'center',
       bottom: '0',
       orient: 'horizontal', // legend 横向布局。
-      data: ['杯子', '茶叶', '蜂蜜', '面粉'],
+      data: [
+        t(`pages.dashboardDetail.procurement.goods.cup`),
+        t(`pages.dashboardDetail.procurement.goods.tea`),
+        t(`pages.dashboardDetail.procurement.goods.honey`),
+        t(`pages.dashboardDetail.procurement.goods.flour`),
+      ],
       textStyle: {
         fontSize: 12,
         color: placeholderColor,
@@ -176,7 +186,7 @@ export function getFolderLineDataSet({
         showSymbol: true,
         symbol: 'circle',
         symbolSize: 8,
-        name: '杯子',
+        name: t(`pages.dashboardDetail.procurement.goods.cup`),
         stack: '总量',
         data: [
           getRandomArray(),
@@ -197,7 +207,7 @@ export function getFolderLineDataSet({
         showSymbol: true,
         symbol: 'circle',
         symbolSize: 8,
-        name: '茶叶',
+        name: t(`pages.dashboardDetail.procurement.goods.tea`),
         stack: '总量',
         data: [
           getRandomArray(),
@@ -218,7 +228,7 @@ export function getFolderLineDataSet({
         showSymbol: true,
         symbol: 'circle',
         symbolSize: 8,
-        name: '蜂蜜',
+        name: t(`pages.dashboardDetail.procurement.goods.honey`),
         stack: '总量',
         data: [
           getRandomArray(),
@@ -239,7 +249,7 @@ export function getFolderLineDataSet({
         showSymbol: true,
         symbol: 'circle',
         symbolSize: 8,
-        name: '面粉',
+        name: t(`pages.dashboardDetail.procurement.goods.flour`),
         stack: '总量',
         data: [
           getRandomArray(),

src/pages/dashboard/detail/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="dashboard-panel-detail">
-    <t-card title="本月采购申请情况" class="dashboard-detail-card" :bordered="false">
+    <t-card :title="$t('pages.dashboardDetail.topPanel.title')" class="dashboard-detail-card" :bordered="false">
       <t-row :gutter="[16, 16]">
         <t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3">
           <t-card class="dashboard-list-card" :description="item.title">
             <div class="dashboard-list-card__number">{{ item.number }}</div>
             <div class="dashboard-list-card__text">
               <div class="dashboard-list-card__text-left">
-                环比
+                {{ $t('pages.dashboardDetail.topPanel.quarter') }}
                 <trend class="icon" :type="item.upTrend ? 'up' : 'down'" :describe="item.upTrend || item.downTrend" />
               </div>
               <t-icon name="chevron-right" />
@@ -18,7 +18,7 @@
     </t-card>
     <t-row :gutter="[16, 16]" class="row-margin">
       <t-col :xs="12" :xl="9">
-        <t-card class="dashboard-detail-card" title="采购商品申请趋势" subtitle="(件)" :bordered="false">
+        <t-card class="dashboard-detail-card" :title="$t('pages.dashboardDetail.procurement.title')" :bordered="false">
           <template #actions>
             <t-date-range-picker
               class="card-date-picker-container"
@@ -41,7 +41,11 @@
         />
       </t-col>
     </t-row>
-    <t-card :class="['dashboard-detail-card', 'row-margin']" title="采购商品满意度分布" :bordered="false">
+    <t-card
+      :class="['dashboard-detail-card', 'row-margin']"
+      :title="$t('pages.dashboardDetail.satisfaction.title')"
+      :bordered="false"
+    >
       <template #actions>
         <t-date-range-picker
           class="card-date-picker-container"
@@ -51,7 +55,7 @@
           style="display: inline-block; margin-right: var(--td-comp-margin-s); width: 248px"
           @change="onSatisfyChange"
         />
-        <t-button class="card-date-button"> 导出数据 </t-button>
+        <t-button class="card-date-button"> {{ $t('pages.dashboardDetail.satisfaction.export') }} </t-button>
       </template>
       <div id="scatterContainer" style="width: 100%; height: 434px" />
     </t-card>
@@ -258,6 +262,7 @@ const onMaterialChange = (value: string[]) => {
     .t-icon {
       font-size: var(--td-comp-size-xxxs);
     }
+
     &-left {
       display: flex;
 

src/pages/detail/advanced/constants.ts

@@ -1,11 +1,13 @@
+import { t } from '@/locales';
+
 export const BASE_INFO_DATA = [
   {
-    name: '合同名称',
+    name: t('constants.contract.name'),
     value: '总部办公用品采购项目',
     type: null,
   },
   {
-    name: '合同状态',
+    name: t('constants.contract.status'),
     value: '履行中',
     type: {
       key: 'contractStatus',
@@ -13,52 +15,52 @@ export const BASE_INFO_DATA = [
     },
   },
   {
-    name: '合同编号',
+    name: t('constants.contract.num'),
     value: 'BH00010',
     type: null,
   },
   {
-    name: '合同类型',
+    name: t('constants.contract.type'),
-    value: '主合同',
+    value: t('constants.contract.typeOptions.main'),
     type: null,
   },
   {
-    name: '合同收付类型',
+    name: t('constants.contract.payType'),
-    value: '付款',
+    value: t('constants.contract.pay'),
     type: null,
   },
   {
-    name: '合同金额',
+    name: t('constants.contract.amount'),
-    value: '5,000,000元',
+    value: '¥ 5,000,000',
     type: null,
   },
   {
-    name: '甲方',
+    name: t('constants.contract.company'),
     value: '腾讯科技（深圳）有限公司',
     type: null,
   },
   {
-    name: '乙方',
+    name: t('constants.contract.employee'),
     value: '欧尚',
     type: null,
   },
   {
-    name: '合同签订日期',
+    name: t('constants.contract.signDate'),
     value: '2020-12-20',
     type: null,
   },
   {
-    name: '合同生效日期',
+    name: t('constants.contract.effectiveDate'),
     value: '2021-01-20',
     type: null,
   },
   {
-    name: '合同结束日期',
+    name: t('constants.contract.endDate'),
     value: '2022-12-20',
     type: null,
   },
   {
-    name: '合同附件',
+    name: t('constants.contract.attachment'),
     value: '总部办公用品采购项目合同.pdf',
     type: {
       key: 'contractAnnex',
@@ -66,68 +68,17 @@ export const BASE_INFO_DATA = [
     },
   },
   {
-    name: '备注',
+    name: t('constants.contract.remark'),
     value: '--',
     type: null,
   },
   {
-    name: '创建时间',
+    name: t('constants.contract.createDate'),
     value: '2020-12-22 10:00:00',
     type: null,
   },
 ];
 
-export const TABLE_COLUMNS_DATA = [
-  {
-    width: 280,
-    ellipsis: true,
-    colKey: 'index',
-    title: '申请号',
-    sorter: (a: any, b: any) => a.index.substr(3) - b.index.substr(3),
-  },
-  {
-    width: 200,
-    ellipsis: true,
-    colKey: 'pdName',
-    title: '产品名称',
-    sorter: (a: any, b: any) => a.pdName.length - b.pdName.length,
-  },
-  {
-    width: 200,
-    ellipsis: true,
-    colKey: 'pdNum',
-    title: '产品编号',
-  },
-  {
-    width: 160,
-    ellipsis: true,
-    colKey: 'purchaseNum',
-    title: '采购数量',
-    sorter: (a: any, b: any) => a.purchaseNum - b.purchaseNum,
-  },
-  {
-    width: 160,
-    ellipsis: true,
-    colKey: 'adminName',
-    title: '申请部门',
-  },
-  {
-    width: 200,
-    ellipsis: true,
-    colKey: 'updateTime',
-    title: '创建时间',
-    sorter: (a: any, b: any) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
-  },
-  {
-    align: 'left' as const,
-    fixed: 'right' as const,
-    width: 200,
-    className: 'test2',
-    colKey: 'op',
-    title: '操作',
-  },
-];
-
 export const PRODUCT_LIST = [
   {
     name: 'MacBook Pro 2021',

src/pages/detail/advanced/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="detail-advanced">
-    <t-card title="基本信息" :bordered="false">
+    <t-card :title="$t('pages.detailCard.baseInfo.title')" :bordered="false">
       <div class="info-block">
         <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
           <h1>{{ item.name }}</h1>
@@ -18,23 +18,32 @@
     </t-card>
 
     <!-- 发票进度 -->
-    <t-card title="发票进度" class="container-base-margin-top" :bordered="false">
+    <t-card :title="$t('pages.detailCard.invoice.title')" class="container-base-margin-top" :bordered="false">
       <t-row justify="space-between">
         <t-steps :current="updateCurrent">
-          <t-step-item title="申请提交" content="已于12月21日提交" />
+          <t-step-item
-          <t-step-item title="电子发票" content="预计1～3个工作日" />
+            :title="$t('pages.detailCard.invoice.step1.title')"
-          <t-step-item title="发票已邮寄" content="电子发票开出后7个工作日联系" />
+            :content="$t('pages.detailCard.invoice.step1.content')"
-          <t-step-item title="完成" content="" />
+          />
+          <t-step-item
+            :title="$t('pages.detailCard.invoice.step2.title')"
+            :content="$t('pages.detailCard.invoice.step2.content')"
+          />
+          <t-step-item
+            :title="$t('pages.detailCard.invoice.step3.title')"
+            :content="$t('pages.detailCard.invoice.step3.content')"
+          />
+          <t-step-item :title="$t('pages.detailCard.invoice.step4.title')" />
         </t-steps>
       </t-row>
     </t-card>
 
     <!-- 产品目录 -->
-    <t-card title="产品目录" class="container-base-margin-top" :bordered="false">
+    <t-card :title="$t('pages.detailCard.product.title')" class="container-base-margin-top" :bordered="false">
       <template #actions>
         <t-radio-group default-value="dateVal">
-          <t-radio-button value="dateVal"> 季度 </t-radio-button>
+          <t-radio-button value="dateVal"> {{ $t('pages.detailCard.product.quarter') }} </t-radio-button>
-          <t-radio-button value="monthVal"> 月份 </t-radio-button>
+          <t-radio-button value="monthVal"> {{ $t('pages.detailCard.product.month') }} </t-radio-button>
         </t-radio-group>
       </template>
       <t-row :gutter="16" class="product-block-container">
@@ -42,7 +51,7 @@
           <div class="product-add">
             <div class="product-sub">
               <t-icon name="add" class="product-sub-icon" />
-              <span>新增产品</span>
+              <span>{{ $t('pages.detailCard.product.add') }}</span>
             </div>
           </div>
         </t-col>
@@ -53,7 +62,7 @@
     </t-card>
 
     <!-- 产品采购明细 -->
-    <t-card title="产品采购明细" class="container-base-margin-top" :bordered="false">
+    <t-card :title="$t('pages.detailCard.detail.title')" class="container-base-margin-top" :bordered="false">
       <t-table
         :columns="columns"
         :data="data"
@@ -88,8 +97,10 @@
 
         <template #op="slotProps">
           <t-space>
-            <t-link theme="primary" @click="listClick()">管理</t-link>
+            <t-link theme="primary" @click="listClick()">{{ t('pages.detailCard.detail.form.manage') }}</t-link>
-            <t-link theme="danger" @click="deleteClickOp(slotProps)">删除</t-link>
+            <t-link theme="danger" @click="deleteClickOp(slotProps)">{{
+              t('pages.detailCard.detail.form.delete')
+            }}</t-link>
           </t-space>
         </template>
 
@@ -99,7 +110,7 @@
       </t-table>
     </t-card>
 
-    <t-dialog v-model:visible="visible" header="基本信息" @confirm="onConfirm">
+    <t-dialog v-model:visible="visible" :header="$t('pages.detailCard.baseInfo.title')" @confirm="onConfirm">
       <template #body>
         <div class="dialog-info-block">
           <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
@@ -130,9 +141,61 @@ export default {
 import { onMounted, ref } from 'vue';
 
 import { getPurchaseList } from '@/api/detail';
+import { t } from '@/locales';
 
 import Product from './components/Product.vue';
-import { BASE_INFO_DATA, PRODUCT_LIST, TABLE_COLUMNS_DATA as columns } from './constants';
+import { BASE_INFO_DATA, PRODUCT_LIST } from './constants';
+
+const columns = [
+  {
+    width: 280,
+    ellipsis: true,
+    colKey: 'index',
+    title: t('pages.detailCard.detail.form.applyNo'),
+    sorter: (a: any, b: any) => a.index.substr(3) - b.index.substr(3),
+  },
+  {
+    width: 200,
+    ellipsis: true,
+    colKey: 'pdName',
+    title: t('pages.detailCard.detail.form.product'),
+    sorter: (a: any, b: any) => a.pdName.length - b.pdName.length,
+  },
+  {
+    width: 200,
+    ellipsis: true,
+    colKey: 'pdNum',
+    title: t('pages.detailCard.detail.form.productNo'),
+  },
+  {
+    width: 160,
+    ellipsis: true,
+    colKey: 'purchaseNum',
+    title: t('pages.detailCard.detail.form.num'),
+    sorter: (a: any, b: any) => a.purchaseNum - b.purchaseNum,
+  },
+  {
+    width: 160,
+    ellipsis: true,
+    colKey: 'adminName',
+    title: t('pages.detailCard.detail.form.department'),
+  },
+  {
+    width: 200,
+    ellipsis: true,
+    colKey: 'updateTime',
+    title: t('pages.detailCard.detail.form.createTime'),
+    sorter: (a: any, b: any) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
+  },
+  {
+    align: 'left' as const,
+    fixed: 'right' as const,
+    width: 200,
+    className: 'test2',
+    colKey: 'op',
+    title: t('pages.detailCard.detail.form.operation'),
+  },
+];
 
 const data = ref([]);
 const pagination = ref({

src/pages/detail/base/constants.ts

@@ -1,78 +0,0 @@
-export const BASE_INFO_DATA = [
-  {
-    name: '合同名称',
-    value: '总部办公用品采购项目',
-    type: null,
-  },
-  {
-    name: '合同状态',
-    value: '履行中',
-    type: {
-      key: 'contractStatus',
-      value: 'inProgress',
-    },
-  },
-  {
-    name: '合同编号',
-    value: 'BH00010',
-    type: null,
-  },
-  {
-    name: '合同类型',
-    value: '主合同',
-    type: null,
-  },
-  {
-    name: '合同收付类型',
-    value: '付款',
-    type: null,
-  },
-  {
-    name: '合同金额',
-    value: '5,000,000元',
-    type: null,
-  },
-  {
-    name: '甲方',
-    value: '腾讯科技（深圳）有限公司',
-    type: null,
-  },
-  {
-    name: '乙方',
-    value: '欧尚',
-    type: null,
-  },
-  {
-    name: '合同签订日期',
-    value: '2020-12-20',
-    type: null,
-  },
-  {
-    name: '合同生效日期',
-    value: '2021-01-20',
-    type: null,
-  },
-  {
-    name: '合同结束日期',
-    value: '2022-12-20',
-    type: null,
-  },
-  {
-    name: '合同附件',
-    value: '总部办公用品采购项目合同.pdf',
-    type: {
-      key: 'contractAnnex',
-      value: 'pdf',
-    },
-  },
-  {
-    name: '备注',
-    value: '--',
-    type: null,
-  },
-  {
-    name: '创建时间',
-    value: '2020-12-22 10:00:00',
-    type: null,
-  },
-];

src/pages/detail/base/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="detail-base">
-    <t-card title="基本信息" :bordered="false">
+    <t-card :title="$t('pages.detailBase.baseInfo.title')" :bordered="false">
       <div class="info-block">
         <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
           <h1>{{ item.name }}</h1>
@@ -17,11 +17,20 @@
       </div>
     </t-card>
 
-    <t-card title="变更记录" class="container-base-margin-top" :bordered="false">
+    <t-card :title="$t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false">
       <t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1">
-        <t-step-item title="上传合同附件" content="这里是提示文字" />
+        <t-step-item
-        <t-step-item title="修改合同金额" content="这里是提示文字" />
+          :title="$t('pages.detailBase.changelog.step1.title')"
-        <t-step-item title="新建合同" content="2020-12-01 15:00:00 管理员-李川操作" />
+          :content="$t('pages.detailBase.changelog.step1.subtitle')"
+        />
+        <t-step-item
+          :title="$t('pages.detailBase.changelog.step2.title')"
+          :content="$t('pages.detailBase.changelog.step2.subtitle')"
+        />
+        <t-step-item
+          :title="$t('pages.detailBase.changelog.step3.title')"
+          :content="$t('pages.detailBase.changelog.step3.desc')"
+        />
       </t-steps>
     </t-card>
   </div>
@@ -34,14 +43,16 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { t } from '@/locales';
+
 const BASE_INFO_DATA = [
   {
-    name: '合同名称',
+    name: t('constants.contract.name'),
     value: '总部办公用品采购项目',
     type: null,
   },
   {
-    name: '合同状态',
+    name: t('constants.contract.status'),
     value: '履行中',
     type: {
       key: 'contractStatus',
@@ -49,52 +60,52 @@ const BASE_INFO_DATA = [
     },
   },
   {
-    name: '合同编号',
+    name: t('constants.contract.num'),
     value: 'BH00010',
     type: null,
   },
   {
-    name: '合同类型',
+    name: t('constants.contract.type'),
-    value: '主合同',
+    value: t('constants.contract.typeOptions.main'),
     type: null,
   },
   {
-    name: '合同收付类型',
+    name: t('constants.contract.payType'),
-    value: '付款',
+    value: t('constants.contract.pay'),
     type: null,
   },
   {
-    name: '合同金额',
+    name: t('constants.contract.amount'),
-    value: '5,000,000元',
+    value: '¥ 5,000,000',
     type: null,
   },
   {
-    name: '甲方',
+    name: t('constants.contract.company'),
     value: '腾讯科技（深圳）有限公司',
     type: null,
   },
   {
-    name: '乙方',
+    name: t('constants.contract.employee'),
     value: '欧尚',
     type: null,
   },
   {
-    name: '合同签订日期',
+    name: t('constants.contract.signDate'),
     value: '2020-12-20',
     type: null,
   },
   {
-    name: '合同生效日期',
+    name: t('constants.contract.effectiveDate'),
     value: '2021-01-20',
     type: null,
   },
   {
-    name: '合同结束日期',
+    name: t('constants.contract.endDate'),
     value: '2022-12-20',
     type: null,
   },
   {
-    name: '合同附件',
+    name: t('constants.contract.attachment'),
     value: '总部办公用品采购项目合同.pdf',
     type: {
       key: 'contractAnnex',
@@ -102,12 +113,7 @@ const BASE_INFO_DATA = [
     },
   },
   {
-    name: '备注',
+    name: t('constants.contract.createDate'),
-    value: '--',
-    type: null,
-  },
-  {
-    name: '创建时间',
     value: '2020-12-22 10:00:00',
     type: null,
   },
@@ -115,5 +121,5 @@ const BASE_INFO_DATA = [
 </script>
 
 <style lang="less" scoped>
-@import url('./index.less');
+@import './index.less';
 </style>

src/pages/detail/deploy/constants.ts

@@ -80,36 +80,3 @@ export const BASE_INFO_DATA = [
     type: null,
   },
 ];
-
-export const TABLE_COLUMNS = [
-  {
-    width: '280',
-    ellipsis: true,
-    colKey: 'name',
-    title: '项目名称',
-    sorter: (a: any, b: any) => a.name.substr(10) - b.name.substr(10),
-  },
-  {
-    width: '280',
-    ellipsis: true,
-    colKey: 'adminName',
-    title: '管理员',
-  },
-  {
-    width: '280',
-    className: 'test',
-    ellipsis: true,
-    colKey: 'updateTime',
-    title: '创建时间',
-    sorter: (a: any, b: any) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
-  },
-  {
-    align: 'left' as const,
-    width: '200',
-    className: 'test2',
-    ellipsis: true,
-    colKey: 'op',
-    fixed: 'right' as const,
-    title: '操作',
-  },
-];

src/pages/detail/deploy/index.ts

@@ -1,4 +1,5 @@
 import { TChartColor } from '@/config/color';
+import { t } from '@/locales/index';
 import { getDateArray, getRandomArray } from '@/utils/charts';
 import { getChartListColor } from '@/utils/color';
 
@@ -52,7 +53,7 @@ export function getSmoothLineDataSet({
       },
     },
     legend: {
-      data: ['本月', '上月'],
+      data: [t('pages.detailDeploy.deployTrend.thisMonth'), t('pages.detailDeploy.deployTrend.lastMonth')],
       icon: 'circle',
       bottom: '0',
       itemGap: 48,
@@ -65,7 +66,7 @@ export function getSmoothLineDataSet({
     },
     series: [
       {
-        name: '上月',
+        name: t('pages.detailDeploy.deployTrend.lastMonth'),
         data: [
           getRandomArray(),
           getRandomArray(),
@@ -86,7 +87,7 @@ export function getSmoothLineDataSet({
         },
       },
       {
-        name: '本月',
+        name: t('pages.detailDeploy.deployTrend.thisMonth'),
         data: [
           getRandomArray(),
           getRandomArray(),
@@ -129,6 +130,11 @@ export function get2ColBarChartDataSet({
     thisYearListCopy = thisYearListCopy.reverse();
   }
 
+  const data = [];
+  for (let i = 1; i < 7; i++) {
+    data.push(t(`pages.detailDeploy.deployTrend.week${i}`));
+  }
+
   return {
     color: getChartListColor(),
     tooltip: {
@@ -144,7 +150,7 @@ export function get2ColBarChartDataSet({
     xAxis: [
       {
         type: 'category',
-        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        data,
         axisTick: {
           alignWithLabel: true,
         },
@@ -173,7 +179,7 @@ export function get2ColBarChartDataSet({
       },
     ],
     legend: {
-      data: ['去年', '今年'],
+      data: [t('pages.detailDeploy.deployTrend.lastYear'), t('pages.detailDeploy.deployTrend.thisYear')],
       bottom: '0',
       icon: 'rect',
       itemGap: 48,
@@ -186,7 +192,7 @@ export function get2ColBarChartDataSet({
     },
     series: [
       {
-        name: '去年',
+        name: t('pages.detailDeploy.deployTrend.lastYear'),
         type: 'bar',
         barWidth: '30%',
         data: lastYearListCopy,
@@ -195,7 +201,7 @@ export function get2ColBarChartDataSet({
         },
       },
       {
-        name: '今年',
+        name: t('pages.detailDeploy.deployTrend.thisYear'),
         type: 'bar',
         barWidth: '30%',
         data: thisYearListCopy,

src/pages/detail/deploy/index.vue

@@ -2,18 +2,18 @@
   <div class="detail-deploy">
     <t-row :gutter="16">
       <t-col :lg="6" :xs="12">
-        <t-card title="部署趋势" :bordered="false">
+        <t-card :title="$t('pages.detailDeploy.deployTrend.title')" :bordered="false">
           <div class="deploy-panel-left">
             <div id="monitorContainer" style="width: 100%; height: 265px" />
           </div>
         </t-card>
       </t-col>
       <t-col :lg="6" :xs="12">
-        <t-card title="告警情况" :bordered="false">
+        <t-card :title="$t('pages.detailDeploy.deployTrend.warning')" :bordered="false">
           <template #actions>
             <t-radio-group default-value="dateVal" @change="onAlertChange">
-              <t-radio-button value="dateVal"> 本周 </t-radio-button>
+              <t-radio-button value="dateVal"> {{ $t('pages.detailDeploy.deployTrend.thisWeek') }} </t-radio-button>
-              <t-radio-button value="monthVal"> 本月 </t-radio-button>
+              <t-radio-button value="monthVal"> {{ $t('pages.detailDeploy.deployTrend.thisMonth') }} </t-radio-button>
             </t-radio-group>
           </template>
           <div id="dataContainer" style="width: 100%; height: 265px" />
@@ -22,7 +22,7 @@
     </t-row>
 
     <!-- 项目列表 -->
-    <t-card title="项目列表" class="container-base-margin-top" :bordered="false">
+    <t-card :title="$t('pages.detailDeploy.projectList.title')" class="container-base-margin-top" :bordered="false">
       <t-table
         :columns="columns"
         :data="data"
@@ -41,8 +41,12 @@
         </template>
         <template #op="slotProps">
           <t-space>
-            <t-link theme="primary" @click="listClick()">管理</t-link>
+            <t-link theme="primary" @click="listClick()">{{
-            <t-link theme="danger" @click="deleteClickOp(slotProps)">删除</t-link>
+              $t('pages.detailDeploy.projectList.table.manage')
+            }}</t-link>
+            <t-link theme="danger" @click="deleteClickOp(slotProps)">{{
+              $t('pages.detailDeploy.projectList.table.delete')
+            }}</t-link>
           </t-space>
         </template>
         <template #op-column>
@@ -51,7 +55,11 @@
       </t-table>
     </t-card>
 
-    <t-dialog v-model:visible="visible" header="基本信息" @confirm="onConfirm">
+    <t-dialog
+      v-model:visible="visible"
+      :header="$t('pages.detailDeploy.projectList.dialog.title')"
+      @confirm="onConfirm"
+    >
       <template #body>
         <div class="dialog-info-block">
           <div class="dialog-info-block">
@@ -86,12 +94,46 @@ import { CanvasRenderer } from 'echarts/renderers';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { getProjectList } from '@/api/detail';
+import { t } from '@/locales';
 import { useSettingStore } from '@/store';
 import { changeChartsTheme } from '@/utils/color';
 
-import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
+import { BASE_INFO_DATA } from './constants';
 import { get2ColBarChartDataSet, getSmoothLineDataSet } from './index';
 
+const columns = [
+  {
+    width: '280',
+    ellipsis: true,
+    colKey: 'name',
+    title: t('pages.detailDeploy.projectList.table.name'),
+    sorter: (a: any, b: any) => a.name.substr(10) - b.name.substr(10),
+  },
+  {
+    width: '280',
+    ellipsis: true,
+    title: t('pages.detailDeploy.projectList.table.admin'),
+    colKey: 'adminName',
+  },
+  {
+    width: '280',
+    className: 'test',
+    ellipsis: true,
+    colKey: 'updateTime',
+    title: t('pages.detailDeploy.projectList.table.createTime'),
+    sorter: (a: any, b: any) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
+  },
+  {
+    align: 'left' as const,
+    width: '200',
+    className: 'test2',
+    ellipsis: true,
+    colKey: 'op',
+    fixed: 'right' as const,
+    title: t('pages.detailDeploy.projectList.table.operation'),
+  },
+];
+
 echarts.use([
   TitleComponent,
   ToolboxComponent,

src/pages/detail/secondary/index.vue

@@ -18,14 +18,14 @@
                   <t-tooltip
                     class="set-read-icon"
                     :overlay-style="{ margin: '6px' }"
-                    :content="item.status ? '设为已读' : '设为未读'"
+                    :content="item.status ? $t('pages.detailSecondary.setRead') : $t('pages.detailSecondary.setUnread')"
                   >
                     <span class="msg-action-icon" @click="setReadStatus(item)">
                       <t-icon v-if="!!item.status" name="queue" size="16px" />
                       <t-icon v-else name="chat" />
                     </span>
                   </t-tooltip>
-                  <t-tooltip content="删除通知" :overlay-style="{ margin: '6px' }">
+                  <t-tooltip :content="t('pages.detailSecondary.delete')" :overlay-style="{ margin: '6px' }">
                     <span @click="handleClickDeleteBtn(item)">
                       <t-icon name="delete" size="16px" />
                     </span>
@@ -36,7 +36,7 @@
           </t-list>
           <div v-else class="secondary-msg-list__empty-list">
             <empty-icon></empty-icon>
-            <p>暂无通知</p>
+            <p>{{ t('pages.detailSecondary.empty') }}</p>
           </div>
         </t-tab-panel>
       </t-tabs>
@@ -62,20 +62,21 @@ import { computed, ref } from 'vue';
 
 import EmptyIcon from '@/assets/assets-empty.svg?component';
 import { NOTIFICATION_TYPES } from '@/constants';
+import { t } from '@/locales';
 import { useNotificationStore } from '@/store';
 import type { NotificationItem } from '@/types/interface';
 
 const TAB_LIST = [
   {
-    label: '全部通知',
+    label: t('pages.detailSecondary.all'),
     value: 'msgData',
   },
   {
-    label: '未读通知',
+    label: t('pages.detailSecondary.unread'),
     value: 'unreadMsg',
   },
   {
-    label: '已读通知',
+    label: t('pages.detailSecondary.read'),
     value: 'readMsg',
   },
 ];
@@ -124,5 +125,5 @@ const deleteMsg = () => {
 </script>
 
 <style lang="less" scoped>
-@import url('./index.less');
+@import './index.less';
 </style>

src/pages/form/base/constants.ts

@@ -27,19 +27,19 @@ export const INITIAL_DATA = {
 };
 
 export const TYPE_OPTIONS = [
-  { label: '类型A', value: '1' },
+  { label: 'Type A', value: '1' },
-  { label: '类型B', value: '2' },
+  { label: 'Type B', value: '2' },
-  { label: '类型C', value: '3' },
+  { label: 'Type C', value: '3' },
 ];
 
 export const PARTY_A_OPTIONS = [
-  { label: '公司A', value: '1' },
+  { label: 'Company A', value: '1' },
-  { label: '公司B', value: '2' },
+  { label: 'Company B', value: '2' },
-  { label: '公司C', value: '3' },
+  { label: 'Company C', value: '3' },
 ];
 
 export const PARTY_B_OPTIONS = [
-  { label: '公司A', value: '1' },
+  { label: 'Company A', value: '1' },
-  { label: '公司B', value: '2' },
+  { label: 'Company B', value: '2' },
-  { label: '公司C', value: '3' },
+  { label: 'Company C', value: '3' },
 ];

src/pages/form/base/index.vue

@@ -11,25 +11,19 @@
   >
     <div class="form-basic-container">
       <div class="form-basic-item">
-        <div class="form-basic-container-title">合同信息</div>
+        <div class="form-basic-container-title">{{ $t('pages.formBase.title') }}</div>
         <!-- 表单内容 -->
 
         <!-- 合同名称,合同类型 -->
         <t-row class="row-gap" :gutter="[32, 24]">
           <t-col :span="6">
-            <t-form-item label="合同名称" name="name">
+            <t-form-item :label="$t('pages.formBase.contractName')" name="name">
               <t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item label="合同类型" name="type">
+            <t-form-item :label="$t('pages.formBase.contractType')" name="type">
-              <t-select
+              <t-select v-model="formData.type" :style="{ width: '322px' }" class="demo-select-base" clearable>
-                v-model="formData.type"
-                :style="{ width: '322px' }"
-                placeholder="请选择类型"
-                class="demo-select-base"
-                clearable
-              >
                 <t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
                   {{ item.label }}
                 </t-option>
@@ -39,25 +33,25 @@
 
           <!-- 合同收付类型 -->
           <t-col :span="8">
-            <t-form-item label="合同收付类型" name="payment">
+            <t-form-item :label="$t('pages.formBase.contractPayType')" name="payment">
               <t-radio-group v-model="formData.payment">
-                <t-radio value="1"> 收款 </t-radio>
+                <t-radio value="1"> {{ $t('pages.formBase.receive') }} </t-radio>
-                <t-radio value="2"> 付款 </t-radio>
+                <t-radio value="2"> {{ $t('pages.formBase.pay') }} </t-radio>
               </t-radio-group>
               <span class="space-item" />
               <div>
-                <t-input placeholder="请输入金额" :style="{ width: '160px' }" />
+                <t-input :placeholder="$t('pages.formBase.contractAmountPlaceholder')" :style="{ width: '160px' }" />
               </div>
             </t-form-item>
           </t-col>
 
           <t-col :span="6">
-            <t-form-item label="甲方" name="partyA">
+            <t-form-item :label="$t('pages.formBase.company')" name="partyA">
               <t-select
                 v-model="formData.partyA"
                 :style="{ width: '322px' }"
                 class="demo-select-base"
-                placeholder="请选择类型"
+                :placeholder="$t('pages.formBase.contractTypePlaceholder')"
                 clearable
               >
                 <t-option v-for="(item, index) in PARTY_A_OPTIONS" :key="index" :value="item.value" :label="item.label">
@@ -67,11 +61,11 @@
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item label="乙方" name="partyB">
+            <t-form-item :label="$t('pages.formBase.employee')" name="partyB">
               <t-select
                 v-model="formData.partyB"
                 :style="{ width: '322px' }"
-                placeholder="请选择类型"
+                :placeholder="$t('pages.formBase.contractTypePlaceholder')"
                 class="demo-select-base"
                 clearable
               >
@@ -82,7 +76,7 @@
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item label="合同签订日期" name="signDate">
+            <t-form-item :label="$t('pages.formBase.contractSignDate')" name="signDate">
               <t-date-picker
                 v-model="formData.signDate"
                 :style="{ width: '322px' }"
@@ -93,7 +87,7 @@
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item label="合同生效日期" name="startDate">
+            <t-form-item :label="$t('pages.formBase.contractEffectiveDate')" name="startDate">
               <t-date-picker
                 v-model="formData.startDate"
                 :style="{ width: '322px' }"
@@ -104,7 +98,7 @@
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item label="合同结束日期" name="endDate">
+            <t-form-item :label="$t('pages.formBase.contractEndDate')" name="endDate">
               <t-date-picker
                 v-model="formData.endDate"
                 :style="{ width: '322px' }"
@@ -115,28 +109,30 @@
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item label="上传文件" name="files">
+            <t-form-item :label="$t('pages.formBase.upload')" name="files">
               <t-upload
                 v-model="formData.files"
                 action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
-                tips="请上传pdf文件，大小在60M以内"
+                :tips="$t('pages.formBase.uploadTips')"
                 :size-limit="{ size: 60, unit: 'MB' }"
                 :format-response="formatResponse"
                 :before-upload="beforeUpload"
                 @fail="handleFail"
               >
-                <t-button class="form-submit-upload-btn" variant="outline"> 上传合同文件 </t-button>
+                <t-button class="form-submit-upload-btn" variant="outline">
+                  {{ $t('pages.formBase.uploadFile') }}
+                </t-button>
               </t-upload>
             </t-form-item>
           </t-col>
         </t-row>
 
-        <div class="form-basic-container-title form-title-gap">其它信息</div>
+        <div class="form-basic-container-title form-title-gap">{{ $t('pages.formBase.otherInfo') }}</div>
 
-        <t-form-item label="备注" name="comment">
+        <t-form-item :label="$t('pages.formBase.remark')" name="comment">
-          <t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注" />
+          <t-textarea v-model="formData.comment" :height="124" :placeholder="$t('pages.formBase.remarkPlaceholder')" />
         </t-form-item>
-        <t-form-item label="公证人">
+        <t-form-item :label="$t('pages.formBase.notaryPublic')">
           <t-avatar-group>
             <t-avatar>D</t-avatar>
             <t-avatar>S</t-avatar>
@@ -149,8 +145,12 @@
     <div class="form-submit-container">
       <div class="form-submit-sub">
         <div class="form-submit-left">
-          <t-button theme="primary" class="form-submit-confirm" type="submit"> 确认提交 </t-button>
+          <t-button theme="primary" class="form-submit-confirm" type="submit">
-          <t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消 </t-button>
+            {{ $t('pages.formBase.confirm') }}
+          </t-button>
+          <t-button type="reset" class="form-submit-cancel" theme="default" variant="base">
+            {{ $t('pages.formBase.cancel') }}
+          </t-button>
         </div>
       </div>
     </div>
@@ -201,5 +201,5 @@ const formatResponse = (res: any) => {
 </script>
 
 <style lang="less" scoped>
-@import url('./index.less');
+@import './index.less';
 </style>

src/pages/form/step/constants.ts

@@ -1,26 +1,26 @@
 import { FormRule } from 'tdesign-vue-next';
 
 export const FORM_RULES: Record<string, FormRule[]> = {
-  name: [{ required: true, message: '请选择合同名称', type: 'error' }],
+  name: [{ required: true, type: 'error' }],
-  type: [{ required: true, message: '请选择发票类型', type: 'error' }],
+  type: [{ required: true, type: 'error' }],
-  title: [{ required: true, message: '请输入发票抬头', type: 'error' }],
+  title: [{ required: true, type: 'error' }],
-  taxNum: [{ required: true, message: '请输入纳税人识别号', type: 'error' }],
+  taxNum: [{ required: true, type: 'error' }],
-  consignee: [{ required: true, message: '请输入收货人', type: 'error' }],
+  consignee: [{ required: true, type: 'error' }],
-  mobileNum: [{ required: true, message: '请输入手机号码', type: 'error' }],
+  mobileNum: [{ required: true, type: 'error' }],
-  deliveryAddress: [{ required: true, message: '请选择收货地址', type: 'error' }],
+  deliveryAddress: [{ required: true, type: 'error' }],
-  fullAddress: [{ required: true, message: '请输入详细地址', type: 'error' }],
+  fullAddress: [{ required: true, type: 'error' }],
 };
 
 export const NAME_OPTIONS = [
-  { label: '合同A', value: '1' },
+  { label: 'A', value: '1' },
-  { label: '合同B', value: '2' },
+  { label: 'B', value: '2' },
-  { label: '合同C', value: '3' },
+  { label: 'C', value: '3' },
 ];
 
 export const TYPE_OPTIONS = [
-  { label: '类型A', value: '1' },
+  { label: 'Type A', value: '1' },
-  { label: '类型B', value: '2' },
+  { label: 'Type B', value: '2' },
-  { label: '类型C', value: '3' },
+  { label: 'Type C', value: '3' },
 ];
 
 export const ADDRESS_OPTIONS = [

src/pages/form/step/index.vue

@@ -4,22 +4,22 @@
       <!-- 简单步骤条 -->
       <t-card :bordered="false">
         <t-steps class="step-container" :current="1" status="process">
-          <t-step-item title="提交申请" content="已于12月21日提交" />
+          <t-step-item :title="$t('pages.formStep.step1.title')" :content="$t('pages.formStep.step1.subtitle')" />
-          <t-step-item title="电子信息" content="预计1-3个工作日" />
+          <t-step-item :title="$t('pages.formStep.step2.title')" :content="$t('pages.formStep.step2.subtitle')" />
-          <t-step-item title="发票已邮寄" content="电子发票开出后联系" />
+          <t-step-item :title="$t('pages.formStep.step3.title')" :content="$t('pages.formStep.step3.subtitle')" />
-          <t-step-item title="完成申请" content="如有疑问联系客服" />
+          <t-step-item :title="$t('pages.formStep.step4.title')" :content="$t('pages.formStep.step4.subtitle')" />
         </t-steps>
       </t-card>
 
       <!-- 分步表单1 -->
       <div v-show="activeForm === 0" class="rule-tips">
-        <t-alert theme="info" title="发票开具规则：" :close="true">
+        <t-alert theme="info" :title="$t('pages.formStep.step1.rules')" :close="true">
           <template #message>
             <p>
-              1、申请开票后，电子发票在1～3个工作日内开具；增值税专用发票（纸质）如资质审核通过，将在电子发票开具后10个工作日内为您寄出；
+              {{ $t('pages.formStep.step1.rule1') }}
             </p>
-            <p>2、开票金额为您实际支付金额；</p>
+            <p>{{ $t('pages.formStep.step1.rule2') }}</p>
-            <p>3、如有疑问请直接联系：13300001111。</p>
+            <p>{{ $t('pages.formStep.step1.rule3') }}</p>
           </template>
         </t-alert>
       </div>
@@ -31,23 +31,23 @@
         label-align="right"
         @submit="(result: SubmitContext) => onSubmit(result, 1)"
       >
-        <t-form-item label="合同名称" name="name">
+        <t-form-item :label="$t('pages.formStep.step1.contractName')" name="name">
           <t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable>
             <t-option v-for="(item, index) in NAME_OPTIONS" :key="index" :value="item.value" :label="item.label">
               {{ item.label }}
             </t-option>
           </t-select>
         </t-form-item>
-        <t-form-item label="发票类型" name="type">
+        <t-form-item :label="$t('pages.formStep.step1.invoiceType')" name="type">
           <t-select v-model="formData1.type" :style="{ width: '480px' }" class="demo-select-base" clearable>
             <t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
               {{ item.label }}
             </t-option>
           </t-select>
         </t-form-item>
-        <t-form-item label="开票金额"> {{ amount }} 元 </t-form-item>
+        <t-form-item :label="$t('pages.formStep.step1.amount')"> ¥ {{ amount }} </t-form-item>
         <t-form-item>
-          <t-button theme="primary" type="submit"> 提交申请 </t-button>
+          <t-button theme="primary" type="submit"> {{ $t('pages.formStep.step1.submit') }} </t-button>
         </t-form-item>
       </t-form>
 
@@ -61,30 +61,58 @@
         @reset="onReset(0)"
         @submit="(result: SubmitContext) => onSubmit(result, 2)"
       >
-        <t-form-item label="发票抬头" name="title">
+        <t-form-item :label="$t('pages.formStep.step2.invoiceTitle')" name="title">
-          <t-input v-model="formData2.title" :style="{ width: '480px' }" placeholder="请输入发票抬头" />
+          <t-input
+            v-model="formData2.title"
+            :style="{ width: '480px' }"
+            :placeholder="$t('pages.formStep.step2.invoiceTitlePlaceholder')"
+          />
         </t-form-item>
-        <t-form-item label="纳税人识别号" name="taxNum">
+        <t-form-item :label="$t('pages.formStep.step2.taxNum')" name="taxNum">
-          <t-input v-model="formData2.taxNum" :style="{ width: '480px' }" placeholder="请输入纳税人识别号" />
+          <t-input
+            v-model="formData2.taxNum"
+            :style="{ width: '480px' }"
+            :placeholder="$t('pages.formStep.step2.taxNumPlaceholder')"
+          />
         </t-form-item>
-        <t-form-item label="单位地址" name="address">
+        <t-form-item :label="$t('pages.formStep.step2.address')" name="address">
-          <t-input v-model="formData2.address" :style="{ width: '480px' }" placeholder="请输入单位地址" />
+          <t-input
+            v-model="formData2.address"
+            :style="{ width: '480px' }"
+            :placeholder="$t('pages.formStep.step2.addressPlaceholder')"
+          />
         </t-form-item>
-        <t-form-item label="开户行" name="bank">
+        <t-form-item :label="$t('pages.formStep.step2.bank')" name="bank">
-          <t-input v-model="formData2.bank" :style="{ width: '480px' }" placeholder="请输入开户行" />
+          <t-input
+            v-model="formData2.bank"
+            :style="{ width: '480px' }"
+            :placeholder="$t('pages.formStep.step2.bankPlaceholder')"
+          />
         </t-form-item>
-        <t-form-item label="银行账号" name="bankAccount">
+        <t-form-item :label="$t('pages.formStep.step2.bankAccount')" name="bankAccount">
-          <t-input v-model="formData2.bankAccount" :style="{ width: '480px' }" placeholder="请输入银行账号" />
+          <t-input
+            v-model="formData2.bankAccount"
+            :style="{ width: '480px' }"
+            :placeholder="$t('pages.formStep.step2.bankAccountPlaceholder')"
+          />
         </t-form-item>
-        <t-form-item label="通知邮箱" name="email">
+        <t-form-item :label="$t('pages.formStep.step2.email')" name="email">
-          <t-input v-model="formData2.email" :style="{ width: '480px' }" placeholder="请输入通知邮箱" />
+          <t-input
+            v-model="formData2.email"
+            :style="{ width: '480px' }"
+            :placeholder="$t('pages.formStep.step2.emailPlaceholder')"
+          />
         </t-form-item>
-        <t-form-item label="通知手机" name="tel">
+        <t-form-item :label="$t('pages.formStep.step2.tel')" name="tel">
-          <t-input v-model="formData2.tel" :style="{ width: '480px' }" placeholder="请输入通知手机" />
+          <t-input
+            v-model="formData2.tel"
+            :style="{ width: '480px' }"
+            :placeholder="$t('pages.formStep.step2.telPlaceholder')"
+          />
         </t-form-item>
         <t-form-item>
-          <t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
+          <t-button type="reset" theme="default" variant="base"> {{ $t('pages.formStep.preStep') }} </t-button>
-          <t-button theme="primary" type="submit"> 下一步 </t-button>
+          <t-button theme="primary" type="submit"> {{ $t('pages.formStep.nextStep') }} </t-button>
         </t-form-item>
       </t-form>
 
@@ -98,43 +126,41 @@
         @reset="onReset(1)"
         @submit="(result: SubmitContext) => onSubmit(result, 6)"
       >
-        <t-form-item label="收货人" name="consignee">
+        <t-form-item :label="$t('pages.formStep.step3.consignee')" name="consignee">
-          <t-input v-model="formData3.consignee" :style="{ width: '480px' }" placeholder="请输入收货人" />
+          <t-input v-model="formData3.consignee" :style="{ width: '480px' }" />
         </t-form-item>
-        <t-form-item label="手机号码" name="mobileNum">
+        <t-form-item :label="$t('pages.formStep.step3.mobileNum')" name="mobileNum">
-          <t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" placeholder="请输入手机号码" />
+          <t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" />
         </t-form-item>
-        <t-form-item label="收货地址" name="deliveryAddress">
+        <t-form-item :label="$t('pages.formStep.step3.deliveryAddress')" name="deliveryAddress">
-          <t-select
+          <t-select v-model="formData3.deliveryAddress" :style="{ width: '480px' }" class="demo-select-base" clearable>
-            v-model="formData3.deliveryAddress"
-            :style="{ width: '480px' }"
-            placeholder="请选择收货地址"
-            class="demo-select-base"
-            clearable
-          >
             <t-option v-for="(item, index) in ADDRESS_OPTIONS" :key="index" :value="item.value" :label="item.label">
               {{ item.label }}
             </t-option>
           </t-select>
         </t-form-item>
-        <t-form-item label="详细地址" name="fullAddress">
+        <t-form-item :label="$t('pages.formStep.step3.fullAddress')" name="fullAddress">
-          <t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" placeholder="请输入详细地址" />
+          <t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" />
         </t-form-item>
         <t-form-item>
-          <t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
+          <t-button type="reset" theme="default" variant="base"> {{ $t('pages.formStep.preStep') }} </t-button>
-          <t-button theme="primary" type="submit"> 下一步 </t-button>
+          <t-button theme="primary" type="submit"> {{ $t('pages.formStep.nextStep') }} </t-button>
         </t-form-item>
       </t-form>
 
       <!-- 分步表单4 -->
       <div v-show="activeForm === 6" class="step-form-4">
+        <t-space direction="vertical" style="align-items: center">
           <t-icon name="check-circle-filled" style="color: green" size="52px" />
-        <p class="text">完成开票申请</p>
+          <p class="text">{{ $t('pages.formStep.step4.finishTitle') }}</p>
-        <p class="tips">预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待</p>
+          <p class="tips">{{ $t('pages.formStep.step4.finishTips') }}</p>
           <div class="button-group">
-          <t-button theme="primary" @click="onReset(0)"> 再次申请 </t-button>
+            <t-button theme="primary" @click="onReset(0)"> {{ $t('pages.formStep.step4.reapply') }} </t-button>
-          <t-button variant="base" theme="default" @click="complete"> 查看进度 </t-button>
+            <t-button variant="base" theme="default" @click="complete">
+              {{ $t('pages.formStep.step4.check') }}
+            </t-button>
           </div>
+        </t-space>
       </div>
     </div>
   </div>
@@ -194,5 +220,5 @@ const complete = () => {
 </script>
 
 <style lang="less" scoped>
-@import url('./index.less');
+@import './index.less';
 </style>

src/pages/list/base/constants.ts

@@ -1,44 +0,0 @@
-import { PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
-
-export const COLUMNS: PrimaryTableCol<TableRowData>[] = [
-  { colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
-  {
-    title: '合同名称',
-    align: 'left',
-    width: 320,
-    colKey: 'name',
-    fixed: 'left',
-  },
-  { title: '合同状态', colKey: 'status', width: 160 },
-  {
-    title: '合同编号',
-    width: 160,
-    ellipsis: true,
-    colKey: 'no',
-  },
-  {
-    title: '合同类型',
-    width: 160,
-    ellipsis: true,
-    colKey: 'contractType',
-  },
-  {
-    title: '合同收付类型',
-    width: 160,
-    ellipsis: true,
-    colKey: 'paymentType',
-  },
-  {
-    title: '合同金额 (元)',
-    width: 160,
-    ellipsis: true,
-    colKey: 'amount',
-  },
-  {
-    align: 'left',
-    fixed: 'right',
-    width: 160,
-    colKey: 'op',
-    title: '操作',
-  },
-];

src/pages/list/base/index.vue

@@ -3,12 +3,16 @@
     <t-card class="list-card-container" :bordered="false">
       <t-row justify="space-between">
         <div class="left-operation-container">
-          <t-button @click="handleSetupContract"> 新建合同 </t-button>
+          <t-button @click="handleSetupContract"> {{ $t('pages.listBase.create') }} </t-button>
-          <t-button variant="base" theme="default" :disabled="!selectedRowKeys.length"> 导出合同 </t-button>
+          <t-button variant="base" theme="default" :disabled="!selectedRowKeys.length">
-          <p v-if="!!selectedRowKeys.length" class="selected-count">已选{{ selectedRowKeys.length }}项</p>
+            {{ $t('pages.listBase.export') }}</t-button
+          >
+          <p v-if="!!selectedRowKeys.length" class="selected-count">
+            {{ $t('pages.listBase.select') }} {{ selectedRowKeys.length }} {{ $t('pages.listBase.items') }}
+          </p>
         </div>
         <div class="search-input">
-          <t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
+          <t-input v-model="searchValue" :placeholder="$t('pages.listBase.placeholder')" clearable>
             <template #suffix-icon>
               <search-icon size="16px" />
             </template>
@@ -30,30 +34,42 @@
         @select-change="rehandleSelectChange"
       >
         <template #status="{ row }">
-          <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light"> 审核失败 </t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">
-          <t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light"> 待审核 </t-tag>
+            {{ $t('pages.listBase.contractStatusEnum.fail') }}</t-tag
-          <t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light"> 待履行 </t-tag>
+          >
-          <t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light"> 履行中 </t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light">
-          <t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light"> 已完成 </t-tag>
+            {{ $t('pages.listBase.contractStatusEnum.audit') }}
+          </t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light">
+            {{ $t('pages.listBase.contractStatusEnum.pending') }}
+          </t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light">
+            {{ $t('pages.listBase.contractStatusEnum.executing') }}
+          </t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light">
+            {{ $t('pages.listBase.contractStatusEnum.finish') }}
+          </t-tag>
         </template>
         <template #contractType="{ row }">
-          <p v-if="row.contractType === CONTRACT_TYPES.MAIN">审核失败</p>
+          <p v-if="row.contractType === CONTRACT_TYPES.MAIN">{{ $t('pages.listBase.contractStatusEnum.fail') }}</p>
-          <p v-if="row.contractType === CONTRACT_TYPES.SUB">待审核</p>
+          <p v-if="row.contractType === CONTRACT_TYPES.SUB">{{ $t('pages.listBase.contractStatusEnum.audit') }}</p>
-          <p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">待履行</p>
+          <p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">
+            {{ $t('pages.listBase.contractStatusEnum.pending') }}
+          </p>
         </template>
         <template #paymentType="{ row }">
           <div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
-            付款<trend class="dashboard-item-trend" type="up" />
+            {{ $t('pages.listBase.pay') }}<trend class="dashboard-item-trend" type="up" />
           </div>
           <div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECEIPT" class="payment-col">
-            收款<trend class="dashboard-item-trend" type="down" />
+            {{ $t('pages.listBase.receive') }}<trend class="dashboard-item-trend" type="down" />
           </div>
         </template>
 
         <template #op="slotProps">
           <t-space>
-            <t-link theme="primary" @click="handleClickDetail()">详情</t-link>
+            <t-link theme="primary" @click="handleClickDetail()"> {{ $t('pages.listBase.detail') }}</t-link>
-            <t-link theme="danger" @click="handleClickDelete(slotProps)">删除</t-link>
+            <t-link theme="danger" @click="handleClickDelete(slotProps)"> {{ $t('pages.listBase.delete') }}</t-link>
           </t-space>
         </template>
       </t-table>
@@ -77,7 +93,7 @@ export default {
 
 <script setup lang="ts">
 import { SearchIcon } from 'tdesign-icons-vue-next';
-import { MessagePlugin } from 'tdesign-vue-next';
+import { MessagePlugin, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -85,12 +101,54 @@ import { getList } from '@/api/list';
 import Trend from '@/components/trend/index.vue';
 import { prefix } from '@/config/global';
 import { CONTRACT_PAYMENT_TYPES, CONTRACT_STATUS, CONTRACT_TYPES } from '@/constants';
+import { t } from '@/locales';
 import { useSettingStore } from '@/store';
 
-import { COLUMNS } from './constants';
-
 const store = useSettingStore();
 
+const COLUMNS: PrimaryTableCol<TableRowData>[] = [
+  { colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
+  {
+    title: t('pages.listBase.contractName'),
+    align: 'left',
+    width: 320,
+    colKey: 'name',
+    fixed: 'left',
+  },
+  { title: t('pages.listBase.contractStatus'), colKey: 'status', width: 160 },
+  {
+    title: t('pages.listBase.contractNum'),
+    width: 160,
+    ellipsis: true,
+    colKey: 'no',
+  },
+  {
+    title: t('pages.listBase.contractType'),
+    width: 160,
+    ellipsis: true,
+    colKey: 'contractType',
+  },
+  {
+    title: t('pages.listBase.contractPayType'),
+    width: 160,
+    ellipsis: true,
+    colKey: 'paymentType',
+  },
+  {
+    title: t('pages.listBase.contractAmount'),
+    width: 160,
+    ellipsis: true,
+    colKey: 'amount',
+  },
+  {
+    title: t('pages.listBase.operation'),
+    align: 'left',
+    fixed: 'right',
+    width: 160,
+    colKey: 'op',
+  },
+];
+
 const data = ref([]);
 const pagination = ref({
   defaultPageSize: 20,

src/pages/list/card/components/DialogForm.vue

@@ -1,29 +1,29 @@
 <template>
-  <t-dialog v-model:visible="formVisible" header="新建产品" :width="680" :footer="false">
+  <t-dialog v-model:visible="formVisible" :header="$t('pages.listCard.create')" :width="680" :footer="false">
     <template #body>
       <!-- 表单内容 -->
       <t-form ref="form" :data="formData" :rules="rules" :label-width="100" @submit="onSubmit">
-        <t-form-item label="产品名称" name="name">
+        <t-form-item :label="$t('pages.listCard.productName')" name="name">
-          <t-input v-model="formData.name" :style="{ width: '480px' }" placeholder="请输入产品名称" />
+          <t-input v-model="formData.name" :style="{ width: '480px' }" />
         </t-form-item>
-        <t-form-item label="产品状态" name="status">
+        <t-form-item :label="$t('pages.listCard.productStatus')" name="status">
           <t-radio-group v-model="formData.status">
-            <t-radio value="0">已停用</t-radio>
+            <t-radio value="0">{{ $t('pages.listCard.productStatusEnum.off') }}</t-radio>
-            <t-radio value="1">已启用</t-radio>
+            <t-radio value="1">{{ $t('pages.listCard.productStatusEnum.on') }}</t-radio>
           </t-radio-group>
         </t-form-item>
-        <t-form-item label="产品描述" name="description">
+        <t-form-item :label="$t('pages.listCard.productDescription')" name="description">
-          <t-input v-model="formData.description" :style="{ width: '480px' }" placeholder="请输入产品描述" />
+          <t-input v-model="formData.description" :style="{ width: '480px' }" />
         </t-form-item>
-        <t-form-item label="产品类型" name="type">
+        <t-form-item :label="$t('pages.listCard.productType')" name="type">
           <t-select v-model="formData.type" clearable :style="{ width: '480px' }">
             <t-option v-for="(item, index) in SELECT_OPTIONS" :key="index" :value="item.value" :label="item.label">
               {{ item.label }}
             </t-option>
           </t-select>
         </t-form-item>
-        <t-form-item label="备注" name="mark">
+        <t-form-item :label="$t('pages.listCard.productRemark')" name="mark">
-          <t-textarea v-model="textareaValue" :style="{ width: '480px' }" placeholder="请输入内容" name="description" />
+          <t-textarea v-model="textareaValue" :style="{ width: '480px' }" name="description" />
         </t-form-item>
         <t-form-item style="float: right">
           <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>

src/pages/list/card/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="list-card-operation">
-      <t-button @click="formDialogVisible = true"> 新建产品 </t-button>
+      <t-button @click="formDialogVisible = true"> {{ $t('pages.listCard.create') }} </t-button>
       <div class="search-input">
-        <t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
+        <t-input v-model="searchValue" :placeholder="$t('pages.listCard.placeholder')" clearable>
           <template #suffix-icon>
             <search-icon v-if="searchValue === ''" size="var(--td-comp-size-xxxs)" />
           </template>

src/pages/list/filter/index.vue

@@ -7,5 +7,5 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import CommonTable from '../components/CommonTable.vue';
+import CommonTable from '@/components/common-table/index.vue';
 </script>

src/pages/list/tree/index.vue

@@ -2,7 +2,7 @@
   <div class="table-tree-container">
     <div class="list-tree-wrapper">
       <div class="list-tree-operator">
-        <t-input v-model="filterText" placeholder="请输入关键词" @change="onInput">
+        <t-input v-model="filterText" :placeholder="$t('pages.listTree.placeholder')" @change="onInput">
           <template #suffix-icon>
             <search-icon size="var(--td-comp-size-xxxs)" />
           </template>
@@ -27,7 +27,8 @@ import { SearchIcon } from 'tdesign-icons-vue-next';
 import type { TreeNodeModel } from 'tdesign-vue-next';
 import { ref } from 'vue';
 
-import CommonTable from '../components/CommonTable.vue';
+import CommonTable from '@/components/common-table/index.vue';
+
 import { TREE_DATA } from './constants';
 
 const filterByText = ref();

src/pages/login/components/Login.vue

@@ -9,7 +9,7 @@
   >
     <template v-if="type == 'password'">
       <t-form-item name="account">
-        <t-input v-model="formData.account" size="large" placeholder="请输入账号：admin">
+        <t-input v-model="formData.account" size="large" :placeholder="`${$t('pages.login.input.account')}：admin`">
           <template #prefix-icon>
             <t-icon name="user" />
           </template>
@@ -22,7 +22,7 @@
           size="large"
           :type="showPsw ? 'text' : 'password'"
           clearable
-          placeholder="请输入登录密码：admin"
+          :placeholder="`${$t('pages.login.input.password')}：admin`"
         >
           <template #prefix-icon>
             <t-icon name="lock-on" />
@@ -34,16 +34,16 @@
       </t-form-item>
 
       <div class="check-container remember-pwd">
-        <t-checkbox>记住账号</t-checkbox>
+        <t-checkbox>{{ $t('pages.login.remember') }}</t-checkbox>
-        <span class="tip">忘记账号？</span>
+        <span class="tip">{{ $t('pages.login.forget') }}</span>
       </div>
     </template>
 
     <!-- 扫码登录 -->
     <template v-else-if="type == 'qrcode'">
       <div class="tip-container">
-        <span class="tip">请使用微信扫一扫登录</span>
+        <span class="tip">{{ $t('pages.login.wechatLogin') }}</span>
-        <span class="refresh">刷新 <t-icon name="refresh" /> </span>
+        <span class="refresh">{{ $t('pages.login.refresh') }} <t-icon name="refresh" /> </span>
       </div>
       <qrcode-vue value="" :size="160" level="H" />
     </template>
@@ -51,7 +51,7 @@
     <!-- 手机号登录 -->
     <template v-else>
       <t-form-item name="phone">
-        <t-input v-model="formData.phone" size="large" placeholder="请输入手机号码">
+        <t-input v-model="formData.phone" size="large" :placeholder="$t('pages.login.input.phone')">
           <template #prefix-icon>
             <t-icon name="mobile" />
           </template>
@@ -59,21 +59,25 @@
       </t-form-item>
 
       <t-form-item class="verification-code" name="verifyCode">
-        <t-input v-model="formData.verifyCode" size="large" placeholder="请输入验证码" />
+        <t-input v-model="formData.verifyCode" size="large" :placeholder="$t('pages.login.input.verification')" />
         <t-button size="large" variant="outline" :disabled="countDown > 0" @click="sendCode">
-          {{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
+          {{ countDown == 0 ? $t('pages.login.sendVerification') : `${countDown}秒后可重发` }}
         </t-button>
       </t-form-item>
     </template>
 
     <t-form-item v-if="type !== 'qrcode'" class="btn-container">
-      <t-button block size="large" type="submit"> 登录 </t-button>
+      <t-button block size="large" type="submit"> {{ $t('pages.login.signIn') }} </t-button>
     </t-form-item>
 
     <div class="switch-container">
-      <span v-if="type !== 'password'" class="tip" @click="switchType('password')">使用账号密码登录</span>
+      <span v-if="type !== 'password'" class="tip" @click="switchType('password')">{{
-      <span v-if="type !== 'qrcode'" class="tip" @click="switchType('qrcode')">使用微信扫码登录</span>
+        $t('pages.login.accountLogin')
-      <span v-if="type !== 'phone'" class="tip" @click="switchType('phone')">使用手机号登录</span>
+      }}</span>
+      <span v-if="type !== 'qrcode'" class="tip" @click="switchType('qrcode')">{{
+        $t('pages.login.wechatLogin')
+      }}</span>
+      <span v-if="type !== 'phone'" class="tip" @click="switchType('phone')">{{ $t('pages.login.phoneLogin') }}</span>
     </div>
   </t-form>
 </template>
@@ -86,6 +90,7 @@ import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { useCounter } from '@/hooks';
+import { t } from '@/locales';
 import { useUserStore } from '@/store';
 
 const userStore = useUserStore();
@@ -99,10 +104,10 @@ const INITIAL_DATA = {
 };
 
 const FORM_RULES: Record<string, FormRule[]> = {
-  phone: [{ required: true, message: '手机号必填', type: 'error' }],
+  phone: [{ required: true, message: t('pages.login.required.phone'), type: 'error' }],
-  account: [{ required: true, message: '账号必填', type: 'error' }],
+  account: [{ required: true, message: t('pages.login.required.account'), type: 'error' }],
-  password: [{ required: true, message: '密码必填', type: 'error' }],
+  password: [{ required: true, message: t('pages.login.required.password'), type: 'error' }],
-  verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
+  verifyCode: [{ required: true, message: t('pages.login.required.verification'), type: 'error' }],
 };
 
 const type = ref('password');
@@ -149,5 +154,5 @@ const onSubmit = async (ctx: SubmitContext) => {
 </script>
 
 <style lang="less" scoped>
-@import url('../index.less');
+@import '../index.less';
 </style>

src/pages/login/index.vue

@@ -4,12 +4,12 @@
 
     <div class="login-container">
       <div class="title-container">
-        <h1 class="title margin-no">登录到</h1>
+        <h1 class="title margin-no">{{ $t('pages.login.loginTitle') }}</h1>
         <h1 class="title">TDesign Starter</h1>
         <div class="sub-title">
-          <p class="tip">{{ type == 'register' ? '已有账号?' : '没有账号吗?' }}</p>
+          <p class="tip">{{ type == 'register' ? $t('pages.login.existAccount') : $t('pages.login.noAccount') }}</p>
           <p class="tip" @click="switchType(type == 'register' ? 'login' : 'register')">
-            {{ type == 'register' ? '登录' : '注册新账号' }}
+            {{ type == 'register' ? $t('pages.login.signIn') : $t('pages.login.createAccount') }}
           </p>
         </div>
       </div>
@@ -19,7 +19,7 @@
       <tdesign-setting />
     </div>
 
-    <footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
+    <footer class="copyright">Copyright @ 2021-2023 Tencent. All Rights Reserved</footer>
   </div>
 </template>
 <script lang="ts">
@@ -43,5 +43,5 @@ const switchType = (val: string) => {
 </script>
 
 <style lang="less" scoped>
-@import url('./index.less');
+@import './index.less';
 </style>

src/pages/result/403/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <result title="403 Forbidden" tip="抱歉，您无权限访问此页面，企业微信联系创建者xiaolaoshi">
+  <result title="403 Forbidden" :tip="$t('pages.result.403.tips')">
-    <t-button @click="() => $router.push('/')">返回首页</t-button>
+    <t-button @click="() => $router.push('/')">{{ $t('pages.result.403.back') }}</t-button>
   </result>
 </template>
 <script lang="ts">

src/pages/result/404/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <result title="404 Not Found" tip="抱歉，您访问的页面不存在" type="404">
+  <result title="404 Not Found" :tip="$t('pages.result.404.subtitle')" type="404">
-    <t-button @click="() => $router.push('/')">返回首页</t-button>
+    <t-button @click="() => $router.push('/')">{{ $t('pages.result.404.back') }}</t-button>
   </result>
 </template>
 

src/pages/result/500/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <result title="500 Internal Server Error" type="500" tip="抱歉，服务器出错啦">
+  <result title="500 Internal Server Error" type="500" :tip="$t('pages.result.500.subtitle')">
-    <t-button @click="() => $router.push('/')">返回首页</t-button>
+    <t-button @click="() => $router.push('/')">{{ $t('pages.result.500.back') }}</t-button>
   </result>
 </template>
 <script lang="ts">

src/pages/result/browser-incompatible/index.vue

@@ -1,9 +1,15 @@
 <template>
-  <result title="浏览器不兼容" type="ie" tip="抱歉，您正在使用的浏览器版本过低，无法打开当前网页。">
+  <result
+    :title="$t('pages.result.browserIncompatible.title')"
+    type="ie"
+    :tip="$t('pages.result.browserIncompatible.subtitle')"
+  >
     <div class="result-slot-container">
-      <t-button class="result-button" @click="() => $router.push('/')">返回首页</t-button>
+      <t-button class="result-button" @click="() => $router.push('/')">{{
+        $t('pages.result.browserIncompatible.back')
+      }}</t-button>
       <div class="recommend-container">
-        <div>TDesign Starter 推荐以下主流浏览器</div>
+        <div>{{ $t('pages.result.browserIncompatible.recommend') }}</div>
         <div class="recommend-browser">
           <div>
             <thumbnail class="browser-icon" url="https://tdesign.gtimg.com/starter/result-page/chorme.png" />
@@ -47,7 +53,7 @@ import Thumbnail from '@/components/thumbnail/index.vue';
   padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
   width: 640px;
   background: var(--td-bg-color-container);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
   border-radius: var(--td-radius-medium);
 }
 

src/pages/result/fail/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="result-success">
     <t-icon class="result-success-icon" name="error-circle" />
-    <div class="result-success-title">项目创建失败</div>
+    <div class="result-success-title">{{ $t('pages.result.fail.title') }}</div>
-    <div class="result-success-describe">企业微信联系检查创建者权限，或返回修改</div>
+    <div class="result-success-describe">{{ $t('pages.result.fail.subtitle') }}</div>
     <div>
-      <t-button theme="default" @click="() => $router.push('/dashboard/base')">返回首页</t-button>
+      <t-button theme="default" @click="() => $router.push('/dashboard/base')">{{
-      <t-button @click="() => $router.push('/form/base')">返回修改</t-button>
+        $t('pages.result.fail.back')
+      }}</t-button>
+      <t-button @click="() => $router.push('/form/base')">{{ $t('pages.result.fail.modify') }} </t-button>
     </div>
   </div>
 </template>
@@ -21,6 +23,7 @@ export default {
   justify-content: center;
   align-items: center;
   height: 75vh;
+
   &-icon {
     font-size: var(--td-comp-size-xxxxl);
     color: var(--td-text-color-secondary);

src/pages/result/maintenance/index.vue

@@ -1,6 +1,10 @@
 <template>
-  <result title="系统维护中" tip="系统维护中，请稍后再试" type="maintenance">
+  <result
-    <t-button theme="primary" @click="() => $router.push('/')">返回首页</t-button>
+    :title="$t('pages.result.maintenance.title')"
+    :tip="$t('pages.result.maintenance.subtitle')"
+    type="maintenance"
+  >
+    <t-button theme="primary" @click="() => $router.push('/')">{{ $t('pages.result.maintenance.back') }}</t-button>
   </result>
 </template>
 

src/pages/result/network-error/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <result title="网络异常" tip="网络异常，请稍后再试" type="wifi">
+  <result :title="$t('pages.result.networkError.title')" :tip="$t('pages.result.networkError.subtitle')" type="wifi">
     <div>
-      <t-button theme="default" @click="() => $router.push('/')">返回首页</t-button>
+      <t-button theme="default" @click="() => $router.push('/')">{{ $t('pages.result.networkError.back') }}</t-button>
-      <t-button @click="() => $router.push('/')">重新加载</t-button>
+      <t-button @click="() => $router.push('/')">{{ $t('pages.result.networkError.reload') }}</t-button>
     </div>
   </result>
 </template>

src/pages/result/success/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="result-success">
     <t-icon class="result-success-icon" name="check-circle" />
-    <div class="result-success-title">项目已创建成功</div>
+    <div class="result-success-title">{{ $t('pages.result.success.title') }}</div>
-    <div class="result-success-describe">可以联系负责人分发应用</div>
+    <div class="result-success-describe">{{ $t('pages.result.success.subtitle') }}</div>
     <div>
-      <t-button theme="default" @click="() => $router.push('/detail/advanced')"> 查看进度 </t-button>
+      <t-button theme="default" @click="() => $router.push('/detail/advanced')">
-      <t-button @click="() => $router.push('/form/base')"> 返回首页 </t-button>
+        {{ $t('pages.result.success.progress') }}
+      </t-button>
+      <t-button @click="() => $router.push('/dashboard/base')"> {{ $t('pages.result.success.back') }} </t-button>
     </div>
   </div>
 </template>

src/pages/user/constants.ts

@@ -1,3 +1,5 @@
+import { t } from '@/locales';
+
 export interface UserInfoListType {
   title: string;
   content: string;
@@ -6,39 +8,39 @@ export interface UserInfoListType {
 
 export const USER_INFO_LIST: Array<UserInfoListType> = [
   {
-    title: '手机',
+    title: t('pages.user.personalInfo.desc.mobile'),
     content: '+86 13923734567',
   },
   {
-    title: '座机',
+    title: t('pages.user.personalInfo.desc.phone'),
     content: '734567',
   },
   {
-    title: '办公室邮箱',
+    title: t('pages.user.personalInfo.desc.email'),
     content: 'Account@qq.com',
   },
   {
-    title: '座位',
+    title: t('pages.user.personalInfo.desc.seat'),
     content: 'T32F 012',
   },
   {
-    title: '管理主体',
+    title: t('pages.user.personalInfo.desc.entity'),
     content: '腾讯集团',
   },
   {
-    title: '直属上级',
+    title: t('pages.user.personalInfo.desc.leader'),
     content: 'Michael Wang',
   },
   {
-    title: '职位',
+    title: t('pages.user.personalInfo.desc.position'),
     content: '高级 UI 设计师',
   },
   {
-    title: '入职时间',
+    title: t('pages.user.personalInfo.desc.joinDay'),
     content: '2021-07-01',
   },
   {
-    title: '所属团队',
+    title: t('pages.user.personalInfo.desc.group'),
     content: '腾讯/腾讯公司/某事业群/某产品部/某运营中心/商户服务组',
     span: 6,
   },

src/pages/user/index.vue

@@ -4,12 +4,12 @@
       <div class="user-left-greeting">
         <div>
           Hi，Image
-          <span class="regular"> 下午好，今天是你加入鹅厂的第 100 天～</span>
+          <span class="regular"> {{ $t('pages.user.markDay') }}</span>
         </div>
         <img src="@/assets/assets-tencent-logo.png" class="logo" />
       </div>
 
-      <t-card class="user-info-list" title="个人信息" :bordered="false">
+      <t-card class="user-info-list" :title="$t('pages.user.personalInfo.title')" :bordered="false">
         <template #actions>
           <t-button theme="default" shape="square" variant="text">
             <t-icon name="ellipsis" />
@@ -29,11 +29,11 @@
 
       <t-card class="content-container" :bordered="false">
         <t-tabs value="second">
-          <t-tab-panel value="first" label="内容列表">
+          <t-tab-panel value="first" :label="$t('pages.user.contentList')">
-            <p>内容列表</p>
+            <p>{{ $t('pages.user.contentList') }}</p>
           </t-tab-panel>
-          <t-tab-panel value="second" label="内容列表">
+          <t-tab-panel value="second" :label="$t('pages.user.contentList')">
-            <t-card :bordered="false" class="card-padding-no" title="主页访问数据" describe="（次）">
+            <t-card :bordered="false" class="card-padding-no" :title="$t('pages.user.visitData')" describe="（次）">
               <template #actions>
                 <t-date-range-picker
                   class="card-date-picker-container"
@@ -46,8 +46,8 @@
               <div id="lineContainer" style="width: 100%; height: 328px" />
             </t-card>
           </t-tab-panel>
-          <t-tab-panel value="third" label="内容列表">
+          <t-tab-panel value="third" :label="$t('pages.user.contentList')">
-            <p>内容列表</p>
+            <p>{{ $t('pages.user.contentList') }}</p>
           </t-tab-panel>
         </t-tabs>
       </t-card>
@@ -57,10 +57,10 @@
       <t-card class="user-intro" :bordered="false">
         <t-avatar size="80px">T</t-avatar>
         <div class="name">My Account</div>
-        <div class="position">XXG 港澳业务拓展组员工 直客销售</div>
+        <div class="position">{{ $t('pages.user.personalInfo.position') }}</div>
       </t-card>
 
-      <t-card title="团队成员" class="user-team" :bordered="false">
+      <t-card :title="$t('pages.user.teamMember')" class="user-team" :bordered="false">
         <template #actions>
           <t-button theme="default" shape="square" variant="text">
             <t-icon name="ellipsis" />
@@ -73,7 +73,7 @@
         </t-list>
       </t-card>
 
-      <t-card title="服务产品" class="product-container" :bordered="false">
+      <t-card :title="$t('pages.user.serviceProduction')" class="product-container" :bordered="false">
         <template #actions>
           <t-button theme="default" shape="square" variant="text">
             <t-icon name="ellipsis" />
@@ -184,5 +184,5 @@ watch(
 </script>
 
 <style lang="less" scoped>
-@import url('./index.less');
+@import './index.less';
 </style>

src/router/modules/homepage.ts

@@ -10,7 +10,10 @@ export default [
     redirect: '/dashboard/base',
     name: 'dashboard',
     meta: {
-      title: '仪表盘',
+      title: {
+        zh_CN: '仪表盘',
+        en_US: 'Dashboard',
+      },
       icon: shallowRef(DashboardIcon),
       orderNo: 0,
     },
@@ -20,7 +23,10 @@ export default [
         name: 'DashboardBase',
         component: () => import('@/pages/dashboard/base/index.vue'),
         meta: {
-          title: '概览仪表盘',
+          title: {
+            zh_CN: '概览仪表盘',
+            en_US: 'Overview',
+          },
         },
       },
       {
@@ -28,7 +34,10 @@ export default [
         name: 'DashboardDetail',
         component: () => import('@/pages/dashboard/detail/index.vue'),
         meta: {
-          title: '统计报表',
+          title: {
+            zh_CN: '统计报表',
+            en_US: 'Dashboard Detail',
+          },
         },
       },
     ],

src/router/modules/result.ts

@@ -6,55 +6,76 @@ export default [
     name: 'result',
     component: Layout,
     redirect: '/result/success',
-    meta: { title: '结果页', icon: 'check-circle' },
+    meta: {
+      title: {
+        zh_CN: '结果页',
+        en_US: 'Result',
+      },
+      icon: 'check-circle',
+    },
     children: [
       {
         path: 'success',
         name: 'ResultSuccess',
         component: () => import('@/pages/result/success/index.vue'),
-        meta: { title: '成功页' },
+        meta: {
+          title: {
+            zh_CN: '成功页',
+            en_US: 'Success',
+          },
+        },
       },
       {
         path: 'fail',
         name: 'ResultFail',
         component: () => import('@/pages/result/fail/index.vue'),
-        meta: { title: '失败页' },
+        meta: {
+          title: {
+            zh_CN: '失败页',
+            en_US: 'Fail',
+          },
+        },
       },
       {
         path: 'network-error',
         name: 'ResultNetworkError',
         component: () => import('@/pages/result/network-error/index.vue'),
-        meta: { title: '网络异常' },
+        meta: {
+          title: {
+            zh_CN: '网络异常',
+            en_US: 'Network Error',
+          },
+        },
       },
       {
         path: '403',
         name: 'Result403',
         component: () => import('@/pages/result/403/index.vue'),
-        meta: { title: '无权限' },
+        meta: { title: { zh_CN: '无权限', en_US: 'Forbidden' } },
       },
       {
         path: '404',
         name: 'Result404',
         component: () => import('@/pages/result/404/index.vue'),
-        meta: { title: '访问页面不存在页' },
+        meta: { title: { zh_CN: '访问页面不存在页', en_US: 'Not Found' } },
       },
       {
         path: '500',
         name: 'Result500',
         component: () => import('@/pages/result/500/index.vue'),
-        meta: { title: '服务器出错页' },
+        meta: { title: { zh_CN: '服务器出错页', en_US: 'Server Error' } },
       },
       {
         path: 'browser-incompatible',
         name: 'ResultBrowserIncompatible',
         component: () => import('@/pages/result/browser-incompatible/index.vue'),
-        meta: { title: '浏览器不兼容页' },
+        meta: { title: { zh_CN: '浏览器不兼容页', en_US: 'BrowserIncompatible' } },
       },
       {
         path: 'maintenance',
         name: 'ResultMaintenance',
         component: () => import('@/pages/result/maintenance/index.vue'),
-        meta: { title: '系统维护页' },
+        meta: { title: { zh_CN: '系统维护页', en_US: 'Maintenance' } },
       },
     ],
   },

src/router/modules/user.ts

@@ -9,13 +9,13 @@ export default [
     name: 'user',
     component: Layout,
     redirect: '/user/index',
-    meta: { title: '个人页', icon: 'user-circle' },
+    meta: { title: { zh_CN: '个人中心', en_US: 'User Center' }, icon: 'user-circle' },
     children: [
       {
         path: 'index',
         name: 'UserIndex',
         component: () => import('@/pages/user/index.vue'),
-        meta: { title: '个人中心' },
+        meta: { title: { zh_CN: '个人中心', en_US: 'User Center' } },
       },
     ],
   },
@@ -23,14 +23,14 @@ export default [
     path: '/loginRedirect',
     name: 'loginRedirect',
     redirect: '/login',
-    meta: { title: '登录页', icon: shallowRef(LogoutIcon) },
+    meta: { title: { zh_CN: '登录页', en_US: 'Login' }, icon: shallowRef(LogoutIcon) },
     component: () => import('@/layouts/blank.vue'),
     children: [
       {
         path: 'index',
         redirect: '/login',
         component: () => import('@/layouts/blank.vue'),
-        meta: { title: '登录中心' },
+        meta: { title: { zh_CN: '登录页', en_US: 'Login' } },
       },
     ],
   },