Merge branch 'develop' of github.com:Tencent/tdesign-vue-next-starter into site

.eslintrc

@@ -47,6 +47,7 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "vue/first-attribute-linebreak": 0,
 
+
     "@typescript-eslint/no-unused-vars": [
       "error",
       {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencent/tdesign-vue-next-starter",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",
@@ -24,38 +24,39 @@
     "echarts": "5.1.2",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
-    "pinia": "^2.1.4",
+    "pinia": "^2.1.6",
-    "pinia-plugin-persistedstate": "^3.1.0",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "qrcode.vue": "^3.4.0",
     "qs": "^6.11.2",
-    "tdesign-icons-vue-next": "^0.1.11",
+    "tdesign-icons-vue-next": "^0.2.0",
+    "tdesign-vue-next": "^1.4.1",
     "tdesign-site-components": "^0.12.9",
     "tdesign-theme-generator": "^1.0.5",
-    "tdesign-vue-next": "^1.3.10",
     "tvision-color": "^1.6.0",
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
-    "vue-router": "~4.2.3"
+    "vue-i18n": "^9.4.1",
+    "vue-router": "~4.2.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.6",
+    "@commitlint/cli": "^17.6.7",
-    "@commitlint/config-conventional": "^17.6.6",
+    "@commitlint/config-conventional": "^17.6.7",
     "@types/echarts": "^4.9.18",
-    "@types/lodash": "^4.14.195",
+    "@types/lodash": "^4.14.196",
     "@types/nprogress": "^0.2.0",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-typescript": "^11.0.3",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.44.0",
+    "eslint": "^8.45.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^8.9.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-vue": "^9.15.1",
@@ -67,14 +68,14 @@
     "postcss-html": "^1.5.0",
     "postcss-less": "^6.0.0",
     "prettier": "^2.8.8",
-    "stylelint": "~15.10.0",
+    "stylelint": "~15.10.2",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-order": "~6.0.3",
     "typescript": "~5.1.6",
-    "vite": "^4.3.9",
+    "vite": "^4.4.7",
     "vite-plugin-mock": "^3.0.0",
     "vite-svg-loader": "^4.0.0",
-    "vue-tsc": "^1.8.4"
+    "vue-tsc": "^1.8.8"
   },
   "config": {
     "commitizen": {
@@ -89,5 +90,8 @@
     "*.{html,vue,css,sass,less}": [
       "npm run stylelint:fix"
     ]
+  },
+  "engines": {
+    "node": ">=16.0.0"
   }
 }

src/App.vue

@@ -1,11 +1,14 @@
 <template>
-  <router-view :class="[mode]" />
+  <t-config-provider :global-config="getComponentsLocale">
+    <router-view :key="locale" :class="[mode]"
+  /></t-config-provider>
   <setting-component />
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
 
 import SettingComponent from '@/layouts/setting/index.vue';
+import { useLocale } from '@/locales/useLocale';
 import { useSettingStore } from '@/store';
 
 const store = useSettingStore();
@@ -13,6 +16,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/assets/assets-slide-dashboard.svg

@@ -1,14 +0,0 @@
-<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M2.5 3.75C2.5 3.05965 3.05962 2.5 3.75 2.5H8.125C8.81538 2.5 9.375 3.05965 9.375 3.75V10C9.375 10.6903 8.81538 11.25 8.125 11.25H3.75C3.05962 11.25 2.5 10.6903 2.5 10V3.75ZM3.75 3.75H8.125V10H3.75V3.75Z"
-    fill="currentcolor" />
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M10.625 10C10.625 9.30965 11.1846 8.75 11.875 8.75H16.25C16.9404 8.75 17.5 9.30965 17.5 10V16.25C17.5 16.9403 16.9404 17.5 16.25 17.5H11.875C11.1846 17.5 10.625 16.9403 10.625 16.25V10ZM11.875 10H16.25V16.25H11.875V10Z"
-    fill="currentcolor" />
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M3.75 12.5C3.05962 12.5 2.5 13.0597 2.5 13.75V16.25C2.5 16.9403 3.05962 17.5 3.75 17.5H8.125C8.81538 17.5 9.375 16.9403 9.375 16.25V13.75C9.375 13.0597 8.81538 12.5 8.125 12.5H3.75ZM8.125 13.75H3.75V16.25H8.125V13.75Z"
-    fill="currentcolor" />
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M10.625 3.75C10.625 3.05965 11.1846 2.5 11.875 2.5H16.25C16.9404 2.5 17.5 3.05965 17.5 3.75V6.25C17.5 6.94035 16.9404 7.5 16.25 7.5H11.875C11.1846 7.5 10.625 6.94035 10.625 6.25V3.75ZM11.875 3.75H16.25V6.25H11.875V3.75Z"
-    fill="currentcolor" />
-</svg>

src/assets/assets-slide-detail.svg

@@ -1,6 +0,0 @@
-<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5 5.625H5V6.875H12.5V5.625Z" fill="currentcolor"/>
-<path d="M5 8.75H12.5V10H5V8.75Z" fill="currentcolor"/>
-<path d="M10 11.875H5V13.125H10V11.875Z" fill="currentcolor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 3.75C2.5 3.05962 3.05962 2.5 3.75 2.5H16.25C16.9404 2.5 17.5 3.05962 17.5 3.75V16.25C17.5 16.9404 16.9404 17.5 16.25 17.5H3.75C3.05962 17.5 2.5 16.9404 2.5 16.25V3.75ZM3.75 3.75H16.25V16.25H3.75V3.75Z" fill="currentcolor"/>
-</svg>

src/assets/assets-slide-form.svg

@@ -1,4 +0,0 @@
-<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1485 2.60504L7.96107 8.79252C7.88191 8.87167 7.82547 8.97063 7.79764 9.07905L6.98445 12.2468C6.92951 12.4608 6.99164 12.6879 7.14788 12.8442C7.30411 13.0004 7.53121 13.0625 7.74522 13.0076L10.913 12.1944C11.0214 12.1666 11.1204 12.1101 11.1995 12.031L17.387 5.8435C18.2813 4.94923 18.2813 3.49931 17.387 2.60504C16.4927 1.71076 15.0428 1.71076 14.1485 2.60504ZM8.45793 11.5341L8.96586 9.55549L15.0324 3.48892C15.4386 3.08279 16.097 3.0828 16.5031 3.48892C16.9093 3.89504 16.9093 4.5535 16.5031 4.95962L10.4366 11.0262L8.45793 11.5341Z" fill="currentcolor"/>
-<path d="M3.75 4.37493H10V3.12493H3.75C3.05964 3.12493 2.5 3.68457 2.5 4.37493V15.6249C2.5 16.3153 3.05964 16.8749 3.75 16.8749H16.25C16.9404 16.8749 17.5 16.3153 17.5 15.6249V9.37493H16.25V15.6249H3.75V4.37493Z" fill="currentcolor"/>
-</svg>

src/assets/assets-slide-list.svg

@@ -1,6 +0,0 @@
-<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 5.3125H10V6.5625H5V5.3125Z" fill="currentcolor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 3.75C2.5 3.05965 3.05962 2.5 3.75 2.5H16.25C16.9404 2.5 17.5 3.05965 17.5 3.75V8.125C17.5 8.81535 16.9404 9.375 16.25 9.375H3.75C3.05962 9.375 2.5 8.81535 2.5 8.125V3.75ZM3.75 3.75H16.25V8.125H3.75V3.75Z" fill="currentcolor"/>
-<path d="M10 13.4375H5V14.6875H10V13.4375Z" fill="currentcolor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 11.875C2.5 11.1847 3.05962 10.625 3.75 10.625H16.25C16.9404 10.625 17.5 11.1847 17.5 11.875V16.25C17.5 16.9403 16.9404 17.5 16.25 17.5H3.75C3.05962 17.5 2.5 16.9403 2.5 16.25V11.875ZM16.25 11.875V16.25H3.75V11.875H16.25Z" fill="currentcolor"/>
-</svg>

src/assets/assets-slide-logout.svg

@@ -1,3 +0,0 @@
-<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10C1.25 5.16751 5.16751 1.25 10 1.25C14.8325 1.25 18.75 5.16751 18.75 10ZM12.5489 9.37547L10.0934 6.91989L10.9772 6.03601L14.4998 9.55853C14.7438 9.80261 14.7438 10.1983 14.4998 10.4424L10.9804 13.9618L10.0965 13.0779L12.5489 10.6255L5.45213 10.6255L5.45214 9.37545L12.5489 9.37547Z" fill="currentcolor"/>
-</svg>

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,7 +59,7 @@
                 <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>
         </div>
@@ -59,12 +69,15 @@
 </template>
 
 <script setup lang="ts">
+import { ChevronDownIcon, PoweroffIcon, 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';
@@ -124,6 +137,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,
@@ -166,6 +186,7 @@ const navToHelper = () => {
       z-index: 10;
       width: auto;
       transition: all 0.3s;
+
       &-compact {
         left: 64px;
       }
@@ -177,6 +198,7 @@ const navToHelper = () => {
     display: inline-flex;
   }
 }
+
 .header-menu {
   flex: 1 1 1;
   display: inline-flex;
@@ -218,6 +240,7 @@ const navToHelper = () => {
   .t-logo {
     width: 100%;
     height: 100%;
+
     &:hover {
       cursor: pointer;
     }
@@ -243,12 +266,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%);
   }
 }
 
@@ -269,8 +294,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,25 +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 class="header-msg-bottom">
+        <div v-if="unreadMsg.length > 0" class="header-msg-bottom">
-          <t-button
+          <t-button class="header-msg-bottom-link" variant="text" theme="default" block @click="goDetail">{{
-            v-if="unreadMsg.length > 0"
+            $t('layout.notice.viewAll')
-            class="header-msg-bottom-link"
+          }}</t-button>
-            variant="text"
-            theme="default"
-            block
-            @click="goDetail"
-            >查看全部</t-button
-          >
         </div>
       </div>
     </template>
@@ -85,9 +86,9 @@ const goDetail = () => {
   margin: calc(0px - var(--td-comp-paddingTB-xs)) calc(0px - var(--td-comp-paddingLR-s));
 
   .empty-list {
-    height: calc(100% - 120px);
+    // height: calc(100% - 120px);
     text-align: center;
-    padding-top: 135px;
+    padding: var(--td-comp-paddingTB-xxl) 0;
     font: var(--td-font-body-medium);
     color: var(--td-text-color-secondary);
 
@@ -96,7 +97,7 @@ const goDetail = () => {
     }
 
     p {
-      margin-top: var(--td-comp-margin-xxl);
+      margin-top: var(--td-comp-margin-xs);
     }
   }
 

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';
@@ -18,5 +19,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,8 +1,13 @@
 <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
-        <template #option>
+        :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
               class="card-date-picker-container"
@@ -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 #option>
+      <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 #option>
+          <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>
@@ -35,10 +35,20 @@
 </template>
 
 <script setup lang="ts">
-import { Data, FormRule, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
+import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
+import type { PropType } from 'vue';
 import { ref, watch } from 'vue';
 
-const INITIAL_DATA = {
+export interface FormData {
+  name: string;
+  status: string;
+  description: string;
+  type: string;
+  mark: string;
+  amount: number;
+}
+
+const INITIAL_DATA: FormData = {
   name: '',
   status: '',
   description: '',
@@ -58,19 +68,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  data: {
+  data: Object as PropType<FormData>,
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
 });
-
 const formVisible = ref(false);
-const formData = ref(props.data);
+const formData = ref({ ...INITIAL_DATA });
 const textareaValue = ref('');
 
-const onSubmit = ({ validateResult, firstError }: SubmitContext<Data>) => {
+const onSubmit = ({ validateResult, firstError }: SubmitContext<FormData>) => {
   if (!firstError) {
     MessagePlugin.success('提交成功');
     formVisible.value = false;
@@ -107,7 +111,7 @@ watch(
   },
 );
 
-const rules: Record<string, FormRule[]> = {
+const rules: FormRules<FormData> = {
   name: [{ required: true, message: '请输入产品名称', type: 'error' }],
 };
 </script>

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>
@@ -76,23 +76,14 @@ import { getCardList } from '@/api/list';
 import type { CardProductType } from '@/components/product-card/index.vue';
 import ProductCard from '@/components/product-card/index.vue';
 
+import type { FormData } from './components/DialogForm.vue';
 import DialogForm from './components/DialogForm.vue';
 
-interface FormData {
-  name: string;
-  status: string;
-  description: string;
-  type: number;
-  mark: string;
-  amount: number;
-  [key: string]: unknown;
-}
-
 const INITIAL_DATA: FormData = {
   name: '',
   status: '',
   description: '',
-  type: 0,
+  type: '0',
   mark: '',
   amount: 0,
 };
@@ -158,7 +149,7 @@ const handleManageProduct = (product: CardProductType) => {
     name: product.name,
     status: product?.isSetup ? '1' : '0',
     description: product.description,
-    type: product.type,
+    type: product.type.toString(),
     mark: '',
     amount: 0,
   };

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,24 +34,24 @@
       </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>
 
-    <!-- 手机号登陆 -->
+    <!-- 手机号登录 -->
     <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');
@@ -136,7 +141,7 @@ const onSubmit = async (ctx: SubmitContext) => {
     try {
       await userStore.login(formData.value);
 
-      MessagePlugin.success('登陆成功');
+      MessagePlugin.success('登录成功');
       const redirect = route.query.redirect as string;
       const redirectUrl = redirect ? decodeURIComponent(redirect) : '/dashboard';
       router.push(redirectUrl);
@@ -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>
@@ -18,7 +18,7 @@
       <register v-else @register-success="switchType('login')" />
     </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">
@@ -40,5 +40,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/index.ts

@@ -60,9 +60,11 @@ export const getRoutesExpanded = () => {
 
 export const getActive = (maxLevel = 3): string => {
   const route = useRoute();
+
   if (!route.path) {
     return '';
   }
+
   return route.path
     .split('/')
     .filter((_item: string, index: number) => index <= maxLevel && index > 0)