From 860415dcaebc495c72c69fb3d4dd6d419c63cd61 Mon Sep 17 00:00:00 2001
From: mokeyjay <i@mok.moe>
Date: Tue, 16 Jan 2024 15:13:44 +0800
Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=97=B6=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8=E7=9A=84=E9=97=AE=E9=A2=98=20(#666)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        | 4 ++--
 src/layouts/components/Content.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2939186..b291f91 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <t-config-provider :global-config="getComponentsLocale">
-    <router-view :key="locale" :class="[mode]"
-  /></t-config-provider>
+    <router-view :key="locale" :class="[mode]" />
+  </t-config-provider>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
diff --git a/src/layouts/components/Content.vue b/src/layouts/components/Content.vue
index 069f282..f5b27d5 100644
--- a/src/layouts/components/Content.vue
+++ b/src/layouts/components/Content.vue
@@ -1,6 +1,6 @@
 <template>
   <router-view v-if="!isRefreshing" v-slot="{ Component }">
-    <transition name="fade">
+    <transition name="fade" mode="out-in">
       <keep-alive :include="aliveViews">
         <component :is="Component" />
       </keep-alive>
@@ -54,7 +54,7 @@ const isRefreshing = computed(() => {
   transition: opacity @anim-duration-slow @anim-time-fn-easing;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }

From b9095ce9390baa257b972c372593008268c87a7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= <i@mikuhl.cn>
Date: Tue, 13 Feb 2024 18:55:31 +0800
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=E5=B0=86=E6=95=B4=E4=BD=93?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=A7=84=E8=8C=83=E4=B8=BAESM=20(#680)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: update deps

mockjs: CVE-2023-26158
vite: CVE-2024-23331

* chore: update deps

* chore: explicit definition type

* chore: update echarts

* feat: change the overall ESM
---
 .prettierrc.js       |  2 +-
 commitlint.config.js |  2 +-
 package.json         | 67 ++++++++++++++++++++++----------------------
 stylelint.config.js  |  2 +-
 4 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/.prettierrc.js b/.prettierrc.js
index 3c58064..22227fe 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   // 一行最多 120 字符..
   printWidth: 120,
   // 使用 2 个空格缩进
diff --git a/commitlint.config.js b/commitlint.config.js
index 20116c9..b21d451 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,5 +1,5 @@
 // commit-lint config
-module.exports = {
+export default {
   extends: ['@commitlint/config-conventional'],
   rules: {
     'type-enum': [
diff --git a/package.json b/package.json
index 69f8dc3..f75be49 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@tencent/tdesign-vue-next-starter",
   "version": "0.9.0",
+  "type": "module",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",
@@ -19,10 +20,10 @@
     "test:coverage": "echo \"no test:coverage specified,work in process\""
   },
   "dependencies": {
-    "@vueuse/core": "^10.6.1",
-    "axios": "^1.6.2",
+    "@vueuse/core": "^10.7.2",
+    "axios": "^1.6.7",
     "dayjs": "^1.11.10",
-    "echarts": "5.1.2",
+    "echarts": "5.4.3",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
@@ -30,50 +31,50 @@
     "qrcode.vue": "^3.4.1",
     "qs": "^6.11.2",
     "tdesign-icons-vue-next": "^0.2.2",
-    "tdesign-vue-next": "^1.6.8",
+    "tdesign-vue-next": "^1.8.1",
     "tvision-color": "^1.6.0",
     "vue": "~3.3.8",
-    "vue-i18n": "^9.6.5",
-    "vue-router": "~4.2.4"
+    "vue-i18n": "^9.9.1",
+    "vue-router": "~4.2.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.1",
-    "@commitlint/config-conventional": "^18.4.0",
+    "@commitlint/cli": "^18.6.0",
+    "@commitlint/config-conventional": "^18.6.0",
     "@types/echarts": "^4.9.21",
     "@types/lodash": "^4.14.201",
     "@types/nprogress": "^0.2.3",
-    "@types/qs": "^6.9.10",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "@vitejs/plugin-vue": "^4.4.1",
+    "@types/qs": "^6.9.11",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vue/compiler-sfc": "^3.3.8",
+    "@vue/compiler-sfc": "~3.3.8",
     "@vue/eslint-config-typescript": "^12.0.0",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.53.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-vue": "^9.18.1",
-    "eslint-plugin-vue-scoped-css": "^2.5.1",
-    "husky": "^8.0.3",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-vue": "^9.21.1",
+    "eslint-plugin-vue-scoped-css": "^2.7.2",
+    "husky": "^9.0.10",
     "less": "^4.2.0",
-    "lint-staged": "^15.1.0",
+    "lint-staged": "^15.2.2",
     "mockjs": "^1.1.0",
-    "postcss-html": "^1.5.0",
+    "postcss-html": "^1.6.0",
     "postcss-less": "^6.0.0",
-    "prettier": "^3.1.0",
-    "stylelint": "~15.11.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-order": "~6.0.3",
-    "typescript": "~5.3.2",
-    "vite": "^4.5.0",
-    "vite-plugin-mock": "^3.0.0",
-    "vite-svg-loader": "^4.0.0",
-    "vue-tsc": "^1.8.22"
+    "prettier": "^3.2.5",
+    "stylelint": "~16.2.1",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-order": "~6.0.4",
+    "typescript": "~5.3.3",
+    "vite": "^5.1.0",
+    "vite-plugin-mock": "^3.0.1",
+    "vite-svg-loader": "^5.1.0",
+    "vue-tsc": "^1.8.27"
   },
   "config": {
     "commitizen": {
@@ -90,6 +91,6 @@
     ]
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/stylelint.config.js b/stylelint.config.js
index 8bfdbdb..0bdf6f6 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   defaultSeverity: 'error',
   extends: ['stylelint-config-standard'],
   rules: {

From ce97b04d79c56873f8109d702d110a7243f714ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= <i@mikuhl.cn>
Date: Wed, 14 Feb 2024 22:51:15 +0800
Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E9=A2=9C=E8=89=B2=E5=88=87=E6=8D=A2=20(#681)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复Header元素偏移的问题

* fix: 修复i18n未引用的问题

* feat: 新增侧边栏颜色模式

* chore: 移除侧边栏模式跟随系统

* feat: 换种展示方式
---
 src/config/style.ts                      |  1 +
 src/layouts/components/Header.vue        |  1 -
 src/layouts/components/LayoutSideNav.vue |  2 +-
 src/layouts/components/SideNav.vue       | 25 ++++++++++++++++++++---
 src/layouts/setting.vue                  | 20 ++++++++++++++----
 src/locales/lang/en_US/layout.ts         |  1 +
 src/locales/lang/zh_CN/layout.ts         |  1 +
 src/store/modules/setting.ts             | 26 ++++++++++++++++++------
 src/style/layout.less                    |  6 +++++-
 9 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/src/config/style.ts b/src/config/style.ts
index b652f5a..cdf7d93 100644
--- a/src/config/style.ts
+++ b/src/config/style.ts
@@ -5,6 +5,7 @@ export default {
   mode: 'light',
   layout: 'side',
   splitMenu: false,
+  sideMode: 'light',
   isFooterAside: false,
   isSidebarFixed: true,
   isHeaderFixed: true,
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index 4ee196f..37be801 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -238,7 +238,6 @@ const navToHelper = () => {
   display: flex;
   align-items: normal;
   line-height: 0;
-  padding-left: var(--td-comp-margin-xl);
 }
 
 .header-logo-container {
diff --git a/src/layouts/components/LayoutSideNav.vue b/src/layouts/components/LayoutSideNav.vue
index 112db44..9dc50a2 100644
--- a/src/layouts/components/LayoutSideNav.vue
+++ b/src/layouts/components/LayoutSideNav.vue
@@ -5,7 +5,7 @@
     :layout="settingStore.layout"
     :is-fixed="settingStore.isSidebarFixed"
     :menu="sideMenu"
-    :theme="settingStore.displayMode"
+    :theme="settingStore.displaySideMode"
     :is-compact="settingStore.isSidebarCompact"
   />
 </template>
diff --git a/src/layouts/components/SideNav.vue b/src/layouts/components/SideNav.vue
index a8b627f..3025037 100644
--- a/src/layouts/components/SideNav.vue
+++ b/src/layouts/components/SideNav.vue
@@ -3,12 +3,12 @@
     <t-menu :class="menuCls" :theme="theme" :value="active" :collapsed="collapsed" :default-expanded="defaultExpanded">
       <template #logo>
         <span v-if="showLogo" :class="`${prefix}-side-nav-logo-wrapper`" @click="goHome">
-          <component :is="getLogo()" :class="`${prefix}-side-nav-logo-${collapsed ? 't' : 'tdesign'}-logo`" />
+          <component :is="getLogo()" :class="logoCls" />
         </span>
       </template>
       <menu-content :nav-data="menu" />
       <template #operations>
-        <span class="version-container"> {{ !collapsed ? 'TDesign Starter' : '' }} {{ pgk.version }} </span>
+        <span :class="versionCls"> {{ !collapsed ? 'TDesign Starter' : '' }} {{ pgk.version }} </span>
       </template>
     </t-menu>
     <div :class="`${prefix}-side-nav-placeholder${collapsed ? '-hidden' : ''}`"></div>
@@ -75,6 +75,10 @@ const defaultExpanded = computed(() => {
   return union(expanded, parentPath === '' ? [] : [parentPath]);
 });
 
+const sideMode = computed(() => {
+  const { theme } = props;
+  return theme === 'dark';
+});
 const sideNavCls = computed(() => {
   const { isCompact } = props;
   return [
@@ -84,7 +88,22 @@ const sideNavCls = computed(() => {
     },
   ];
 });
-
+const logoCls = computed(() => {
+  return [
+    `${prefix}-side-nav-logo-${collapsed.value ? 't' : 'tdesign'}-logo`,
+    {
+      [`${prefix}-side-nav-dark`]: sideMode.value,
+    },
+  ];
+});
+const versionCls = computed(() => {
+  return [
+    `version-container`,
+    {
+      [`${prefix}-side-nav-dark`]: sideMode.value,
+    },
+  ];
+});
 const menuCls = computed(() => {
   const { showLogo, isFixed, layout } = props;
   return [
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index 0d32f4a..058f4d7 100644
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@@ -52,7 +52,6 @@
             </t-popup>
           </div>
         </t-radio-group>
-
         <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">
@@ -62,15 +61,24 @@
           </div>
         </t-radio-group>
 
-        <t-form-item v-show="formData.layout === 'mix'" label="分割菜单（混合模式下有效）" name="splitMenu">
+        <t-form-item v-show="formData.layout === 'mix'" :label="$t('layout.setting.splitMenu')" name="splitMenu">
           <t-switch v-model="formData.splitMenu" />
         </t-form-item>
-
-        <t-form-item v-show="formData.layout === 'mix'" label="固定 Sidebar" name="isSidebarFixed">
+        <t-form-item
+          v-show="formData.layout === 'mix'"
+          :label="$t('layout.setting.fixedSidebar')"
+          name="isSidebarFixed"
+        >
           <t-switch v-model="formData.isSidebarFixed" />
         </t-form-item>
 
         <div class="setting-group-title">{{ $t('layout.setting.element.title') }}</div>
+        <t-form-item :label="$t('layout.setting.sideMode')" name="sideMode">
+          <t-radio-group v-model="formData.sideMode" class="side-mode-radio">
+            <t-radio-button key="light" value="light" :label="$t('layout.setting.theme.options.light')" />
+            <t-radio-button key="dark" value="dark" :label="$t('layout.setting.theme.options.dark')" />
+          </t-radio-group>
+        </t-form-item>
         <t-form-item
           v-show="formData.layout === 'side'"
           :label="$t('layout.setting.element.showHeader')"
@@ -295,6 +303,10 @@ watchEffect(() => {
     width: 100%;
     justify-content: space-between;
     align-items: center;
+
+    &.side-mode-radio {
+      justify-content: end;
+    }
   }
 
   .t-radio-group.t-size-m .t-radio-button {
diff --git a/src/locales/lang/en_US/layout.ts b/src/locales/lang/en_US/layout.ts
index 5768171..d833732 100644
--- a/src/locales/lang/en_US/layout.ts
+++ b/src/locales/lang/en_US/layout.ts
@@ -33,6 +33,7 @@ export default {
       },
     },
     navigationLayout: 'Navigation Layout',
+    sideMode: 'Side Menu Mode',
     splitMenu: 'Split Menu（Only Mix mode）',
     fixedSidebar: 'Fixed Sidebar',
     element: {
diff --git a/src/locales/lang/zh_CN/layout.ts b/src/locales/lang/zh_CN/layout.ts
index b648b25..26f0e27 100644
--- a/src/locales/lang/zh_CN/layout.ts
+++ b/src/locales/lang/zh_CN/layout.ts
@@ -33,6 +33,7 @@ export default {
       },
     },
     navigationLayout: '导航布局',
+    sideMode: '侧边栏模式',
     splitMenu: '分割菜单（混合模式下有效）',
     fixedSidebar: '固定侧边栏',
     element: {
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 346d4cb..aa781e8 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -33,18 +33,16 @@ export const useSettingStore = defineStore('setting', {
       }
       return state.mode as 'dark' | 'light';
     },
+    displaySideMode: (state): 'dark' | 'light' => {
+      return state.sideMode as 'dark' | 'light';
+    },
   },
   actions: {
     async changeMode(mode: 'dark' | 'light' | 'auto') {
       let theme = mode;
 
       if (mode === 'auto') {
-        const media = window.matchMedia('(prefers-color-scheme:dark)');
-        if (media.matches) {
-          theme = 'dark';
-        } else {
-          theme = 'light';
-        }
+        theme = this.getMediaColor();
       }
       const isDarkMode = theme === 'dark';
 
@@ -52,6 +50,19 @@ export const useSettingStore = defineStore('setting', {
 
       this.chartColors = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS;
     },
+    async changeSideMode(mode: 'dark' | 'light') {
+      const isDarkMode = mode === 'dark';
+
+      document.documentElement.setAttribute('side-mode', isDarkMode ? 'dark' : '');
+    },
+    getMediaColor() {
+      const media = window.matchMedia('(prefers-color-scheme:dark)');
+
+      if (media.matches) {
+        return 'dark';
+      }
+      return 'light';
+    },
     changeBrandTheme(brandTheme: string) {
       const mode = this.displayMode;
       // 以主题色加显示模式作为键
@@ -79,6 +90,9 @@ export const useSettingStore = defineStore('setting', {
         if (key === 'mode') {
           this.changeMode(payload[key]);
         }
+        if (key === 'sideMode') {
+          this.changeSideMode(payload[key]);
+        }
         if (key === 'brandTheme') {
           this.changeBrandTheme(payload[key]);
         }
diff --git a/src/style/layout.less b/src/style/layout.less
index 3e8f9bd..ae52216 100644
--- a/src/style/layout.less
+++ b/src/style/layout.less
@@ -163,7 +163,7 @@
     }
 
     &-logo-tdesign-logo {
-      padding: 0 var(--td-comp-paddingLR-xl);
+      margin-right: var(--td-comp-margin-xxxl);
       height: var(--td-comp-size-s);
       width: 100%;
       color: var(--td-text-color-primary);
@@ -176,6 +176,10 @@
     }
   }
 
+  &-side-nav-dark {
+    color: var(--td-font-white-1) !important;
+  }
+
   &-side-nav-placeholder {
     flex: 1 1 232px;
     min-width: 232px;

From 944f03a064358b81ddb6b1145168ff28c785334d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= <i@mikuhl.cn>
Date: Thu, 15 Feb 2024 22:40:28 +0800
Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DECharts=E7=8E=AF?=
 =?UTF-8?q?=E5=BD=A2=E5=9B=BE=E6=96=87=E5=AD=97=E9=87=8D=E5=8F=A0=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#682)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复ECharts环形图文字重叠的问题

* chore: remove 注释
---
 .../dashboard/base/components/MiddleChart.vue | 19 +++++++++++++++++++
 src/pages/dashboard/base/index.ts             |  3 +--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/pages/dashboard/base/components/MiddleChart.vue b/src/pages/dashboard/base/components/MiddleChart.vue
index 11d546d..d39772c 100644
--- a/src/pages/dashboard/base/components/MiddleChart.vue
+++ b/src/pages/dashboard/base/components/MiddleChart.vue
@@ -97,6 +97,25 @@ const renderCountChart = () => {
   }
   countChart = echarts.init(countContainer);
   countChart.setOption(getPieChartDataSet(chartColors.value));
+
+  // 取消之前高亮的图形
+  countChart.dispatchAction({
+    type: 'downplay',
+    seriesIndex: 0,
+    dataIndex: -1,
+  });
+  // 高亮当前图形
+  countChart.dispatchAction({
+    type: 'highlight',
+    seriesIndex: 0,
+    dataIndex: 1,
+  });
+  // 显示 tooltip
+  countChart.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: 1,
+  });
 };
 
 const renderCharts = () => {
diff --git a/src/pages/dashboard/base/index.ts b/src/pages/dashboard/base/index.ts
index 35a768e..1bbe05b 100644
--- a/src/pages/dashboard/base/index.ts
+++ b/src/pages/dashboard/base/index.ts
@@ -367,8 +367,7 @@ export function getPieChartDataSet({
         emphasis: {
           scale: true,
           label: {
-            show: true,
-            formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
+            show: false,
             rich: {
               value: {
                 color: textColor,

From 0f7096a167408a8ad09f1fa7f3537749b8e2ff70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= <i@mikuhl.cn>
Date: Sun, 18 Feb 2024 11:10:42 +0800
Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=E5=B0=86=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=E8=87=B3TS=E4=B8=A5=E6=A0=BC=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=20(#684)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 将现有代码迁移至TS严格模式 - 禁止隐匿Any的This

* feat: 将代码迁移至TS严格模式 - 启用JS严格模式 和 绑定类型检查

* feat: 移除无用钩子，修改为工具API

* feat: 将代码迁移至TS严格模式 - 启用严格函数类型检查
---
 package.json                                  |  1 +
 src/hooks/event/useWindowSizeFn.ts            | 34 -------------------
 src/layouts/components/FrameContent.vue       |  8 +++--
 src/layouts/components/Header.vue             | 16 +++++----
 src/layouts/components/LayoutContent.vue      |  2 +-
 src/layouts/components/SideNav.vue            |  4 +--
 .../dashboard/base/components/MiddleChart.vue |  2 +-
 .../base/components/OutputOverview.vue        |  2 +-
 src/pages/dashboard/detail/index.vue          |  2 +-
 src/pages/list/base/index.vue                 |  2 +-
 src/pages/list/card/components/DialogForm.vue |  2 +-
 src/store/modules/setting.ts                  | 29 ++++++++--------
 src/types/interface.d.ts                      | 10 ------
 src/utils/color.ts                            | 12 +++----
 tsconfig.json                                 |  6 +++-
 15 files changed, 48 insertions(+), 84 deletions(-)
 delete mode 100644 src/hooks/event/useWindowSizeFn.ts

diff --git a/package.json b/package.json
index f75be49..3673697 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "dev:linux": "vite --mode development",
     "build:test": "vite build --mode test",
     "build": "vue-tsc --noEmit && vite build --mode release",
+    "build:type": "vue-tsc --noEmit",
     "build:site": "vue-tsc --noEmit && vite build --mode site",
     "preview": "vite preview",
     "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
diff --git a/src/hooks/event/useWindowSizeFn.ts b/src/hooks/event/useWindowSizeFn.ts
deleted file mode 100644
index 74e92fe..0000000
--- a/src/hooks/event/useWindowSizeFn.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import debounce from 'lodash/debounce';
-import { onMounted, onUnmounted } from 'vue';
-
-interface WindowSizeOptions {
-  immediate?: boolean;
-}
-
-interface Fn<T = any, R = T> {
-  (...arg: T[]): R;
-}
-
-export function useWindowSizeFn<T>(fn: Fn<T>, options?: WindowSizeOptions, wait = 150) {
-  const handleSize: () => void = debounce(fn, wait);
-
-  const start = () => {
-    if (options && options.immediate) {
-      fn();
-    }
-    window.addEventListener('resize', handleSize);
-  };
-
-  const stop = () => {
-    window.removeEventListener('resize', handleSize);
-  };
-
-  onMounted(() => {
-    start();
-  });
-
-  onUnmounted(() => {
-    stop();
-  });
-  return [start, stop];
-}
diff --git a/src/layouts/components/FrameContent.vue b/src/layouts/components/FrameContent.vue
index 5c88928..413f0e6 100644
--- a/src/layouts/components/FrameContent.vue
+++ b/src/layouts/components/FrameContent.vue
@@ -6,17 +6,19 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { useWindowSize } from '@vueuse/core';
 import debounce from 'lodash/debounce';
 import { computed, CSSProperties, ref, unref, watch } from 'vue';
 
 import { prefix } from '@/config/global';
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn';
 import { useSettingStore } from '@/store';
 
 defineProps({
   frameSrc: String,
 });
 
+const { width, height } = useWindowSize();
+
 const loading = ref(true);
 const heightRef = ref(window.innerHeight);
 const frameRef = ref<HTMLFrameElement>();
@@ -69,8 +71,8 @@ function hideLoading() {
   calcHeight();
 }
 
-useWindowSizeFn(calcHeight, { immediate: true });
-
+// 如果窗口大小发生变化
+watch([width, height], debounce(calcHeight, 250));
 watch(
   [() => settingStore.showFooter, () => settingStore.isUseTabsRouter, () => settingStore.showBreadcrumb],
   debounce(calcHeight, 250),
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index 37be801..ad36bf3 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -38,9 +38,13 @@
               <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-item
+                v-for="(lang, index) in langList"
+                :key="index"
+                :value="lang.value"
+                @click="(options) => changeLang(options.value as string)"
+                >{{ lang.content }}</t-dropdown-item
+              ></t-dropdown-menu
             >
           </t-dropdown>
           <t-dropdown :min-column-width="120" trigger="click">
@@ -85,7 +89,7 @@ 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';
+import type { MenuRoute, ModeType } from '@/types/interface';
 
 import MenuContent from './MenuContent.vue';
 import Notice from './Notice.vue';
@@ -147,11 +151,11 @@ const menuCls = computed(() => {
     },
   ];
 });
-const menuTheme = computed(() => props.theme as 'light' | 'dark');
+const menuTheme = computed(() => props.theme as ModeType);
 
 // 切换语言
 const { changeLocale } = useLocale();
-const changeLang = ({ value: lang }: { value: string }) => {
+const changeLang = (lang: string) => {
   changeLocale(lang);
 };
 
diff --git a/src/layouts/components/LayoutContent.vue b/src/layouts/components/LayoutContent.vue
index ba8b034..f6d1db3 100644
--- a/src/layouts/components/LayoutContent.vue
+++ b/src/layouts/components/LayoutContent.vue
@@ -7,7 +7,7 @@
       :class="`${prefix}-layout-tabs-nav`"
       :value="$route.path"
       :style="{ position: 'sticky', top: 0, width: '100%' }"
-      @change="handleChangeCurrentTab"
+      @change="(value) => handleChangeCurrentTab(value as string)"
       @remove="handleRemove"
       @drag-sort="handleDragend"
     >
diff --git a/src/layouts/components/SideNav.vue b/src/layouts/components/SideNav.vue
index 3025037..fadfa69 100644
--- a/src/layouts/components/SideNav.vue
+++ b/src/layouts/components/SideNav.vue
@@ -26,7 +26,7 @@ import AssetLogo from '@/assets/assets-t-logo.svg?component';
 import { prefix } from '@/config/global';
 import { getActive, getRoutesExpanded } from '@/router';
 import { useSettingStore } from '@/store';
-import type { MenuRoute } from '@/types/interface';
+import type { MenuRoute, ModeType } from '@/types/interface';
 
 import pgk from '../../../package.json';
 import MenuContent from './MenuContent.vue';
@@ -55,7 +55,7 @@ const props = defineProps({
     default: '64px',
   },
   theme: {
-    type: String as PropType<'light' | 'dark'>,
+    type: String as PropType<ModeType>,
     default: 'light',
   },
   isCompact: {
diff --git a/src/pages/dashboard/base/components/MiddleChart.vue b/src/pages/dashboard/base/components/MiddleChart.vue
index d39772c..d6fb970 100644
--- a/src/pages/dashboard/base/components/MiddleChart.vue
+++ b/src/pages/dashboard/base/components/MiddleChart.vue
@@ -14,7 +14,7 @@
               theme="primary"
               mode="date"
               :default-value="LAST_7_DAYS"
-              @change="onCurrencyChange"
+              @change="(value) => onCurrencyChange(value as string[])"
             />
           </div>
         </template>
diff --git a/src/pages/dashboard/base/components/OutputOverview.vue b/src/pages/dashboard/base/components/OutputOverview.vue
index 764feee..51f12be 100644
--- a/src/pages/dashboard/base/components/OutputOverview.vue
+++ b/src/pages/dashboard/base/components/OutputOverview.vue
@@ -14,7 +14,7 @@
               theme="primary"
               mode="date"
               :default-value="LAST_7_DAYS"
-              @change="onStokeDataChange"
+              @change="(value) => onStokeDataChange(value as string[])"
             />
           </template>
           <div id="stokeContainer" style="width: 100%; height: 351px" class="dashboard-chart-container"></div>
diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue
index fd245cd..ec3f11c 100644
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@@ -26,7 +26,7 @@
               theme="primary"
               mode="date"
               style="width: 248px"
-              @change="onMaterialChange"
+              @change="(value) => onMaterialChange(value as string[])"
             />
           </template>
           <div id="lineContainer" style="width: 100%; height: 416px" />
diff --git a/src/pages/list/base/index.vue b/src/pages/list/base/index.vue
index 84eeb74..92d2d7a 100644
--- a/src/pages/list/base/index.vue
+++ b/src/pages/list/base/index.vue
@@ -31,7 +31,7 @@
         :header-affixed-top="headerAffixedTop"
         @page-change="rehandlePageChange"
         @change="rehandleChange"
-        @select-change="rehandleSelectChange"
+        @select-change="(value) => rehandleSelectChange(value as number[])"
       >
         <template #status="{ row }">
           <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">
diff --git a/src/pages/list/card/components/DialogForm.vue b/src/pages/list/card/components/DialogForm.vue
index 9e63d98..25ed61a 100644
--- a/src/pages/list/card/components/DialogForm.vue
+++ b/src/pages/list/card/components/DialogForm.vue
@@ -74,7 +74,7 @@ const formVisible = ref(false);
 const formData = ref({ ...INITIAL_DATA });
 const textareaValue = ref('');
 
-const onSubmit = ({ validateResult, firstError }: SubmitContext<FormData>) => {
+const onSubmit = ({ validateResult, firstError }: SubmitContext) => {
   if (!firstError) {
     MessagePlugin.success('提交成功');
     formVisible.value = false;
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index aa781e8..c7bf25e 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -2,15 +2,16 @@ import keys from 'lodash/keys';
 import { defineStore } from 'pinia';
 import { Color } from 'tvision-color';
 
-import { DARK_CHART_COLORS, LIGHT_CHART_COLORS } from '@/config/color';
+import { DARK_CHART_COLORS, LIGHT_CHART_COLORS, TColorSeries } from '@/config/color';
 import STYLE_CONFIG from '@/config/style';
 import { store } from '@/store';
+import { ModeType } from '@/types/interface';
 import { generateColorMap, insertThemeStylesheet } from '@/utils/color';
 
-const state = {
+const state: Record<string, any> = {
   ...STYLE_CONFIG,
   showSettingPanel: false,
-  colorList: {},
+  colorList: {} as TColorSeries,
   chartColors: LIGHT_CHART_COLORS,
 };
 
@@ -23,7 +24,7 @@ export const useSettingStore = defineStore('setting', {
     showSidebar: (state) => state.layout !== 'top',
     showSidebarLogo: (state) => state.layout === 'side',
     showHeaderLogo: (state) => state.layout !== 'side',
-    displayMode: (state): 'dark' | 'light' => {
+    displayMode: (state): ModeType => {
       if (state.mode === 'auto') {
         const media = window.matchMedia('(prefers-color-scheme:dark)');
         if (media.matches) {
@@ -31,14 +32,14 @@ export const useSettingStore = defineStore('setting', {
         }
         return 'light';
       }
-      return state.mode as 'dark' | 'light';
+      return state.mode as ModeType;
     },
-    displaySideMode: (state): 'dark' | 'light' => {
-      return state.sideMode as 'dark' | 'light';
+    displaySideMode: (state): ModeType => {
+      return state.sideMode as ModeType;
     },
   },
   actions: {
-    async changeMode(mode: 'dark' | 'light' | 'auto') {
+    async changeMode(mode: ModeType | 'auto') {
       let theme = mode;
 
       if (mode === 'auto') {
@@ -50,7 +51,7 @@ export const useSettingStore = defineStore('setting', {
 
       this.chartColors = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS;
     },
-    async changeSideMode(mode: 'dark' | 'light') {
+    async changeSideMode(mode: ModeType) {
       const isDarkMode = mode === 'dark';
 
       document.documentElement.setAttribute('side-mode', isDarkMode ? 'dark' : '');
@@ -75,23 +76,23 @@ export const useSettingStore = defineStore('setting', {
           step: 10,
           remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
         });
-        colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex);
+        colorMap = generateColorMap(brandTheme, newPalette, mode, brandColorIndex);
         this.colorList[colorKey] = colorMap;
       }
       // TODO 需要解决不停切换时有反复插入 style 的问题
-      insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark');
+      insertThemeStylesheet(brandTheme, colorMap, mode);
       document.documentElement.setAttribute('theme-color', brandTheme);
     },
     updateConfig(payload: Partial<TState>) {
       for (const key in payload) {
         if (payload[key as TStateKey] !== undefined) {
-          this[key] = payload[key as TStateKey];
+          this[key as TStateKey] = payload[key as TStateKey];
         }
         if (key === 'mode') {
-          this.changeMode(payload[key]);
+          this.changeMode(payload[key] as ModeType);
         }
         if (key === 'sideMode') {
-          this.changeSideMode(payload[key]);
+          this.changeSideMode(payload[key] as ModeType);
         }
         if (key === 'brandTheme') {
           this.changeBrandTheme(payload[key]);
diff --git a/src/types/interface.d.ts b/src/types/interface.d.ts
index ef782ff..b7dad43 100644
--- a/src/types/interface.d.ts
+++ b/src/types/interface.d.ts
@@ -1,8 +1,6 @@
 import type { TabValue } from 'tdesign-vue-next';
 import { LocationQueryRaw, RouteRecordName } from 'vue-router';
 
-import STYLE_CONFIG from '@/config/style';
-
 export interface RouteMeta {
   title?: string | Record<string, string>;
   icon?: string;
@@ -32,14 +30,6 @@ export interface MenuRoute {
 
 export type ModeType = 'dark' | 'light';
 
-export type SettingType = typeof STYLE_CONFIG;
-
-export type ClassName = { [className: string]: any } | ClassName[] | string;
-
-export type CommonObjType = {
-  [key: string]: string | number;
-};
-
 export interface UserInfo {
   name: string;
   roles: string[];
diff --git a/src/utils/color.ts b/src/utils/color.ts
index eaae69d..8843d78 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -3,6 +3,7 @@ import trim from 'lodash/trim';
 import { Color } from 'tvision-color';
 
 import { TColorToken } from '@/config/color';
+import { ModeType } from '@/types/interface';
 
 /**
  * 依据主题类型获取颜色
@@ -58,12 +59,7 @@ export function changeChartsTheme(chartsList: echarts.EChartsType[]): void {
 /**
  * 根据当前主题色、模式等情景 计算最后生成的色阶
  */
-export function generateColorMap(
-  theme: string,
-  colorPalette: Array<string>,
-  mode: 'light' | 'dark',
-  brandColorIdx: number,
-) {
+export function generateColorMap(theme: string, colorPalette: Array<string>, mode: ModeType, brandColorIdx: number) {
   const isDarkMode = mode === 'dark';
 
   if (isDarkMode) {
@@ -76,7 +72,7 @@ export function generateColorMap(
     colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
   }
 
-  const colorMap = {
+  const colorMap: TColorToken = {
     '--td-brand-color': colorPalette[brandColorIdx], // 主题色
     '--td-brand-color-1': colorPalette[0], // light
     '--td-brand-color-2': colorPalette[1], // focus
@@ -95,7 +91,7 @@ export function generateColorMap(
 /**
  * 将生成的样式嵌入头部
  */
-export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode: 'light' | 'dark') {
+export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode: ModeType) {
   const isDarkMode = mode === 'dark';
   const root = !isDarkMode ? `:root[theme-color='${theme}']` : `:root[theme-color='${theme}'][theme-mode='dark']`;
 
diff --git a/tsconfig.json b/tsconfig.json
index 1703a2d..efb7481 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,11 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "noImplicitAny": true
+    "noImplicitAny": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
   },
   "include": [
     "**/*.ts",

From 13505fdedcb9e562052e5a07070168879f95235c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= <i@mikuhl.cn>
Date: Sat, 30 Mar 2024 22:32:05 +0800
Subject: [PATCH 6/8] feat: upgrade to vue 3.4 and fix route issues (#699)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 升级Vue3.4，修复Route调用方式造成一系列问题

* fix: 修复编译问题
---
 package.json                  | 6 +++---
 src/pages/list/base/index.vue | 2 +-
 src/router/index.ts           | 5 +++--
 tsconfig.json                 | 1 +
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 3673697..fc37594 100644
--- a/package.json
+++ b/package.json
@@ -32,11 +32,11 @@
     "qrcode.vue": "^3.4.1",
     "qs": "^6.11.2",
     "tdesign-icons-vue-next": "^0.2.2",
-    "tdesign-vue-next": "^1.8.1",
+    "tdesign-vue-next": "^1.9.3",
     "tvision-color": "^1.6.0",
-    "vue": "~3.3.8",
+    "vue": "~3.4.21",
     "vue-i18n": "^9.9.1",
-    "vue-router": "~4.2.5"
+    "vue-router": "~4.3.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.6.0",
diff --git a/src/pages/list/base/index.vue b/src/pages/list/base/index.vue
index 92d2d7a..3bdce4c 100644
--- a/src/pages/list/base/index.vue
+++ b/src/pages/list/base/index.vue
@@ -31,7 +31,7 @@
         :header-affixed-top="headerAffixedTop"
         @page-change="rehandlePageChange"
         @change="rehandleChange"
-        @select-change="(value) => rehandleSelectChange(value as number[])"
+        @select-change="(value: number[]) => rehandleSelectChange(value)"
       >
         <template #status="{ row }">
           <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">
diff --git a/src/router/index.ts b/src/router/index.ts
index 5076429..bcd69ed 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,5 @@
 import uniq from 'lodash/uniq';
-import { createRouter, createWebHistory, RouteRecordRaw, useRoute } from 'vue-router';
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 
 const env = import.meta.env.MODE || 'development';
 
@@ -59,7 +59,8 @@ export const getRoutesExpanded = () => {
 };
 
 export const getActive = (maxLevel = 3): string => {
-  const route = useRoute();
+  // 非组件内调用必须通过Router实例获取当前路由
+  const route = router.currentRoute.value;
 
   if (!route.path) {
     return '';
diff --git a/tsconfig.json b/tsconfig.json
index efb7481..35e1652 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,

From 5616edbea02be2c7c5757f0e094b338153dadb85 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 2 Apr 2024 14:17:48 +0800
Subject: [PATCH 7/8] build(deps-dev): bump typescript from 5.3.3 to 5.4.3
 (#706)

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.3.3 to 5.4.3.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml)
- [Commits](https://github.com/Microsoft/TypeScript/compare/v5.3.3...v5.4.3)

---
updated-dependencies:
- dependency-name: typescript
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fc37594..78f050d 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "stylelint": "~16.2.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "~6.0.4",
-    "typescript": "~5.3.3",
+    "typescript": "~5.4.3",
     "vite": "^5.1.0",
     "vite-plugin-mock": "^3.0.1",
     "vite-svg-loader": "^5.1.0",

From 5637f54c3423a66d14990c4b6359404012bd4484 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= <i@mikuhl.cn>
Date: Tue, 2 Apr 2024 23:21:20 +0800
Subject: [PATCH 8/8] feat: replace detail page code with t-descriptions (#707)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 使用描述组件对详情页代码升级

* feat: 使用描述组件对个人中心代码升级

* chore: update version
---
 package.json                        |   2 +-
 src/pages/detail/advanced/index.vue |  36 ++++-----
 src/pages/detail/base/index.less    | 114 ++++------------------------
 src/pages/detail/base/index.vue     |  11 ++-
 src/pages/user/index.vue            |  19 +++--
 5 files changed, 48 insertions(+), 134 deletions(-)

diff --git a/package.json b/package.json
index 78f050d..33220c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tencent/tdesign-vue-next-starter",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
diff --git a/src/pages/detail/advanced/index.vue b/src/pages/detail/advanced/index.vue
index 7bad597..d2235d1 100644
--- a/src/pages/detail/advanced/index.vue
+++ b/src/pages/detail/advanced/index.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="detail-advanced">
-    <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>
+    <t-card :bordered="false">
+      <t-descriptions :title="$t('pages.detailCard.baseInfo.title')">
+        <t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
           <span
             :class="{
               ['inProgress']: item.type && item.type.value === 'inProgress',
@@ -13,8 +12,8 @@
             <i v-if="item.type && item.type.key === 'contractStatus'" />
             {{ item.value }}
           </span>
-        </div>
-      </div>
+        </t-descriptions-item>
+      </t-descriptions>
     </t-card>
 
     <!-- 发票进度 -->
@@ -113,18 +112,19 @@
     <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">
-            <h1>{{ item.name }}</h1>
-            <span
-              :class="{
-                ['inProgress']: item.type && item.type.value === 'inProgress',
-                ['pdf']: item.type && item.type.value === 'pdf',
-              }"
-            >
-              <i v-if="item.type && item.type.key === 'contractStatus'" />
-              {{ item.value }}
-            </span>
-          </div>
+          <t-descriptions :column="1">
+            <t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
+              <span
+                :class="{
+                  ['inProgress']: item.type && item.type.value === 'inProgress',
+                  ['pdf']: item.type && item.type.value === 'pdf',
+                }"
+              >
+                <i v-if="item.type && item.type.key === 'contractStatus'" />
+                {{ item.value }}
+              </span>
+            </t-descriptions-item>
+          </t-descriptions>
         </div>
       </template>
     </t-dialog>
diff --git a/src/pages/detail/base/index.less b/src/pages/detail/base/index.less
index c0524f1..420e27f 100644
--- a/src/pages/detail/base/index.less
+++ b/src/pages/detail/base/index.less
@@ -1,112 +1,28 @@
-.detail-base {
-  :deep(.t-card) {
-    padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
-  }
-
-  :deep(.t-card__header) {
-    padding: 0;
-    margin-bottom: var(--td-comp-margin-m);
-  }
-
-  :deep(.t-card__body) {
-    padding: 0;
-  }
-
-  :deep(.t-card__title) {
-    font: var(--td-font-title-large);
-    font-weight: 400;
-  }
-
-  &-info-steps {
-    padding-top: var(--td-comp-margin-xl);
-  }
-}
-
-.info-block {
-  column-count: 2;
-
-  .info-item {
-    padding-top: var(--td-comp-margin-xxl);
-    display: flex;
-    color: var(--td-text-color-primary);
-
-    h1 {
-      width: 160px;
-      font: var(--td-font-body-medium);
-      color: var(--td-text-color-secondary);
-      font-weight: normal;
-      text-align: left;
-
-      @media (max-width: @screen-sm-max) {
-        width: 80px;
-      }
-
-      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-        width: 120px;
-      }
-    }
-
+.t-descriptions {
     span {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      margin-left: var(--td-comp-margin-xxl);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-left: var(--td-comp-margin-xxl);
     }
 
     i {
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      border-radius: var(--td-radius-circle);
-      background: var(--td-success-color);
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: var(--td-radius-circle);
+        background: var(--td-success-color);
     }
 
     .inProgress {
-      color: var(--td-success-color);
+        color: var(--td-success-color);
     }
 
     .pdf {
-      color: var(--td-brand-color);
+        color: var(--td-brand-color);
 
-      &:hover {
-        cursor: pointer;
-      }
+        &:hover {
+            cursor: pointer;
+        }
     }
-  }
-}
-
-.dialog-info-block {
-  .info-item {
-    padding: 12px 0;
-    display: flex;
-
-    h1 {
-      width: 84px;
-      font-family: var(--td-font-family);
-      font-size: 14px;
-      color: var(--td-text-color-secondary);
-      text-align: left;
-      line-height: 22px;
-    }
-
-    span {
-      margin-left: var(--td-comp-margin-xxl);
-    }
-
-    i {
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      border-radius: var(--td-radius-circle);
-      background: var(--td-success-color);
-    }
-
-    .green {
-      color: var(--td-success-color);
-    }
-
-    .blue {
-      color: var(--td-brand-color);
-    }
-  }
 }
diff --git a/src/pages/detail/base/index.vue b/src/pages/detail/base/index.vue
index 38934d9..058eefa 100644
--- a/src/pages/detail/base/index.vue
+++ b/src/pages/detail/base/index.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="detail-base">
-    <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>
+    <t-card :bordered="false">
+      <t-descriptions :title="$t('pages.detailBase.baseInfo.title')">
+        <t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
           <span
             :class="{
               ['inProgress']: item.type && item.type.value === 'inProgress',
@@ -13,8 +12,8 @@
             <i v-if="item.type && item.type.key === 'contractStatus'" />
             {{ item.value }}
           </span>
-        </div>
-      </div>
+        </t-descriptions-item>
+      </t-descriptions>
     </t-card>
 
     <t-card :title="$t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false">
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index 5ceecb4..8d1136b 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -15,16 +15,11 @@
             <t-icon name="ellipsis" />
           </t-button>
         </template>
-        <t-row class="content" justify="space-between">
-          <t-col v-for="(item, index) in USER_INFO_LIST" :key="index" class="contract" :span="item.span ?? 3">
-            <div class="contract-title">
-              {{ $t(item.title) }}
-            </div>
-            <div class="contract-detail">
-              {{ item.content }}
-            </div>
-          </t-col>
-        </t-row>
+        <t-descriptions :column="4" item-layout="vertical">
+          <t-descriptions-item v-for="(item, index) in USER_INFO_LIST" :key="index" :label="$t(item.title)">
+            {{ item.content }}
+          </t-descriptions-item>
+        </t-descriptions>
       </t-card>
 
       <t-card class="content-container" :bordered="false">
@@ -185,4 +180,8 @@ watch(
 
 <style lang="less" scoped>
 @import './index.less';
+
+.t-descriptions {
+  margin-top: 24px;
+}
 </style>