From 336cbf90db72b54310c0b1a32af84ff7138c26e3 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Mon, 5 Sep 2022 15:16:35 +0800
Subject: [PATCH 01/22] fix: miss layout header

---
 src/layouts/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 53d3f0b..2975c78 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -12,7 +12,7 @@
 
     <template v-else>
       <t-layout key="no-side">
-        <t-header />
+        <t-header><layout-header /> </t-header>
         <t-layout :class="mainLayoutCls">
           <layout-side-nav />
           <layout-content />

From 4949f5d8be123e0c470925e5a675ffacde1a96a8 Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Mon, 5 Sep 2022 15:23:29 +0800
Subject: [PATCH 02/22] fix: miss layout header (#292)

---
 src/layouts/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 53d3f0b..2975c78 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -12,7 +12,7 @@
 
     <template v-else>
       <t-layout key="no-side">
-        <t-header />
+        <t-header><layout-header /> </t-header>
         <t-layout :class="mainLayoutCls">
           <layout-side-nav />
           <layout-content />

From 88e358bfc834d71ac1ed1900a0e4f3712b58d5f2 Mon Sep 17 00:00:00 2001
From: zengqiu <zengqiu@qq.com>
Date: Tue, 6 Sep 2022 11:28:41 +0800
Subject: [PATCH 03/22] =?UTF-8?q?fix(sidenav):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=8A=98=E5=8F=A0=E6=97=B6=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=8F=B7=E5=89=8D=E6=98=BE=E7=A4=BA=20false=20?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#294)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/SideNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/components/SideNav.vue b/src/layouts/components/SideNav.vue
index 2ffe464..9dbb065 100644
--- a/src/layouts/components/SideNav.vue
+++ b/src/layouts/components/SideNav.vue
@@ -8,7 +8,7 @@
       </template>
       <menu-content :nav-data="menu" />
       <template #operations>
-        <span class="version-container"> {{ !collapsed && 'TDesign Starter' }} {{ pgk.version }} </span>
+        <span class="version-container"> {{ !collapsed ? 'TDesign Starter' : '' }} {{ pgk.version }} </span>
       </template>
     </t-menu>
     <div :class="`${prefix}-side-nav-placeholder${collapsed ? '-hidden' : ''}`"></div>

From bae62689f86776d3be6be8c3df80bbafb8efd084 Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Tue, 6 Sep 2022 11:38:26 +0800
Subject: [PATCH 04/22] Chore/release 0.5.0 (#295)

* fix: miss layout header

* chore: release 0.5.0
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 99435d4..6b38114 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tdesign-vue-next-starter",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",

From 4751ef8cb97705cd85b29adc81e3a542d16a4371 Mon Sep 17 00:00:00 2001
From: PDieE <23275429@qq.com>
Date: Tue, 6 Sep 2022 13:02:43 +0800
Subject: [PATCH 05/22] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E5=BD=93?=
 =?UTF-8?q?=E6=89=93=E5=BC=80=E5=A4=9A=E4=B8=AA=E6=A0=87=E7=AD=BE=E5=90=8E?=
 =?UTF-8?q?=20=E9=80=80=E5=87=BA=E4=BC=9A=E6=8A=A5=E9=94=99=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#293)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 示例增加 suspense 代码解决打开多个标签后退出会报错的问题

* fix: 注释
---
 src/layouts/components/Content.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/layouts/components/Content.vue b/src/layouts/components/Content.vue
index 615b023..eff4439 100644
--- a/src/layouts/components/Content.vue
+++ b/src/layouts/components/Content.vue
@@ -12,8 +12,11 @@
 import { computed, ComputedRef } from 'vue';
 import { useTabsRouterStore } from '@/store';
 
+// <suspense>标签属于实验性功能，请谨慎使用
 // 如果存在需解决/page/1=> /page/2 刷新数据问题 请修改代码 使用activeRouteFullPath 作为key
-// <component :is="Component" :key="activeRouteFullPath" />
+// <suspense>
+//  <component :is="Component" :key="activeRouteFullPath" />
+// </suspense>
 
 // import { useRouter } from 'vue-router';
 // const activeRouteFullPath = computed(() => {

From 2f8444734358b1d2109754fbc3e4c5d98ea34498 Mon Sep 17 00:00:00 2001
From: zengqiu <zengqiu@qq.com>
Date: Thu, 8 Sep 2022 01:05:20 +0800
Subject: [PATCH 06/22] =?UTF-8?q?fix(footer):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E7=89=88=E6=9D=83=E4=BF=A1=E6=81=AF=E5=9E=82?=
 =?UTF-8?q?=E7=9B=B4=E5=B1=85=E4=B8=AD=E9=97=AE=E9=A2=98=20(#299)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/dashboard/base/index.vue | 2 +-
 src/style/layout.less              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/dashboard/base/index.vue b/src/pages/dashboard/base/index.vue
index 4996fdf..89bc085 100644
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@@ -25,7 +25,7 @@ import OutputOverview from './components/OutputOverview.vue';
 </script>
 
 <style scoped>
-.row-container {
+.row-container:not(:last-child) {
   margin-bottom: 16px;
 }
 </style>
diff --git a/src/style/layout.less b/src/style/layout.less
index fd0f838..e523261 100644
--- a/src/style/layout.less
+++ b/src/style/layout.less
@@ -108,7 +108,7 @@
 
   &-footer-layout {
     padding: 0;
-    margin-bottom: @spacer-2;
+    margin-bottom: @spacer-3;
   }
 
   // slideBar

From 3e2fab1e3f7a422181a71b6aedc3f13a3455de9a Mon Sep 17 00:00:00 2001
From: zengqiu <zengqiu@qq.com>
Date: Thu, 8 Sep 2022 01:12:09 +0800
Subject: [PATCH 07/22] =?UTF-8?q?fix(breadcrumb):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E9=9D=A2=E5=8C=85=E5=B1=91=E5=AF=BC=E8=88=AA=E5=9E=82=E7=9B=B4?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=E9=97=AE=E9=A2=98=20(#298)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Breadcrumb.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/components/Breadcrumb.vue b/src/layouts/components/Breadcrumb.vue
index ff347ff..74ce022 100644
--- a/src/layouts/components/Breadcrumb.vue
+++ b/src/layouts/components/Breadcrumb.vue
@@ -34,6 +34,6 @@ const crumbs = computed(() => {
 </script>
 <style scoped>
 .tdesign-breadcrumb {
-  margin-bottom: 8px;
+  margin-bottom: 24px;
 }
 </style>

From d502c2e89c7195a733512a7f3ca2ecabdab907f1 Mon Sep 17 00:00:00 2001
From: PDieE <23275429@qq.com>
Date: Thu, 8 Sep 2022 08:52:01 +0800
Subject: [PATCH 08/22] =?UTF-8?q?feat(=E6=8C=81=E4=B9=85=E5=8C=96):=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=8F=92=E4=BB=B6=E5=B0=86store=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=8C=81=E4=B9=85=E5=8C=96=EF=BC=88=E9=99=A4=20permis?=
 =?UTF-8?q?sion=EF=BC=89=20(#291)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 通知支持持久化

* feat: setting支持持久化

* feat: tabs-router支持持久化

* feat: user支持持久化
fix: 修复 user 和 permission 未正确初始化的问题

* feat: 使用持久化插件将store持久化

#278

* feat: rebase

* feat: rebase

* feat: rebase

* Update src/store/modules/setting.ts

Co-authored-by: 悠静萝莉 <i@mikuhl.cn>

* Update src/store/index.ts

Co-authored-by: 悠静萝莉 <i@mikuhl.cn>

* Update src/layouts/setting.vue

Co-authored-by: 悠静萝莉 <i@mikuhl.cn>

Co-authored-by: 悠静萝莉 <i@mikuhl.cn>
---
 package.json                      |  1 +
 src/App.vue                       |  7 +------
 src/layouts/index.vue             | 20 +-------------------
 src/layouts/setting.vue           | 12 +++++++++++-
 src/permission.ts                 | 12 +++++++-----
 src/store/index.ts                |  2 ++
 src/store/modules/notification.ts |  1 +
 src/store/modules/setting.ts      |  4 ++++
 src/store/modules/tabs-router.ts  |  1 +
 src/store/modules/user.ts         |  8 +++++++-
 10 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index 6b38114..ea54b6a 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.11",
+    "pinia-plugin-persistedstate": "^2.1.1",
     "qrcode.vue": "^3.2.2",
     "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",
diff --git a/src/App.vue b/src/App.vue
index 44f6fc9..18cd85d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,7 @@
   <router-view :class="[mode]" />
 </template>
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
-import config from '@/config/style';
+import { computed } from 'vue';
 import { useSettingStore } from '@/store';
 
 const store = useSettingStore();
@@ -11,10 +10,6 @@ const store = useSettingStore();
 const mode = computed(() => {
   return store.displayMode;
 });
-
-onMounted(() => {
-  store.updateConfig({ ...config });
-});
 </script>
 <style lang="less" scoped>
 @import '@/style/variables.less';
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 2975c78..3e88460 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, watch, onBeforeUnmount } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 import { useSettingStore, useTabsRouterStore } from '@/store';
@@ -59,28 +59,10 @@ const appendNewRoute = () => {
   tabsRouterStore.appendTabRouterList({ path, query, title: title as string, name, isAlive: true });
 };
 
-const getTabRouterListCache = () => {
-  tabsRouterStore.initTabRouterList(JSON.parse(localStorage.getItem('tabRouterList')));
-};
-const setTabRouterListCache = () => {
-  const { tabRouters } = tabsRouterStore;
-  localStorage.setItem('tabRouterList', JSON.stringify(tabRouters));
-};
-
 onMounted(() => {
   appendNewRoute();
 });
 
-// 如果不需要持久化标签页可以注释掉以下的 onMounted 和 onBeforeUnmount 的内容
-onMounted(() => {
-  if (localStorage.getItem('tabRouterList')) getTabRouterListCache();
-  window.addEventListener('beforeunload', setTabRouterListCache);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('beforeunload', setTabRouterListCache);
-});
-
 watch(
   () => route.path,
   () => {
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index 92ac2b3..026be9e 100644
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@@ -124,8 +124,18 @@ const MODE_OPTIONS = [
   { type: 'dark', text: '暗黑' },
   { type: 'auto', text: '跟随系统' },
 ];
+const initStyleConfig = () => {
+  const styleConfig = STYLE_CONFIG;
+  for (const key in styleConfig) {
+    if (Object.prototype.hasOwnProperty.call(styleConfig, key)) {
+      styleConfig[key] = settingStore[key];
+    }
+  }
 
-const formData = ref({ ...STYLE_CONFIG });
+  return styleConfig;
+};
+
+const formData = ref({ ...initStyleConfig() });
 const isColoPickerDisplay = ref(false);
 
 const showSettingPanel = computed({
diff --git a/src/permission.ts b/src/permission.ts
index 0605c26..5bb3310 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -5,16 +5,15 @@ import 'nprogress/nprogress.css'; // progress bar style
 import { getPermissionStore, getUserStore } from '@/store';
 import router from '@/router';
 
-const permissionStore = getPermissionStore();
-const userStore = getUserStore();
-
 NProgress.configure({ showSpinner: false });
 
-const { whiteListRouters } = permissionStore;
-
 router.beforeEach(async (to, from, next) => {
   NProgress.start();
 
+  const userStore = getUserStore();
+  const permissionStore = getPermissionStore();
+  const { whiteListRouters } = permissionStore;
+
   const { token } = userStore;
   if (token) {
     if (to.path === '/login') {
@@ -58,6 +57,9 @@ router.beforeEach(async (to, from, next) => {
 
 router.afterEach((to) => {
   if (to.path === '/login') {
+    const userStore = getUserStore();
+    const permissionStore = getPermissionStore();
+
     userStore.logout();
     permissionStore.restore();
   }
diff --git a/src/store/index.ts b/src/store/index.ts
index 20e1448..53b6007 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,6 +1,8 @@
 import { createPinia } from 'pinia';
+import { createPersistedState } from 'pinia-plugin-persistedstate';
 
 const store = createPinia();
+store.use(createPersistedState());
 
 export { store };
 
diff --git a/src/store/modules/notification.ts b/src/store/modules/notification.ts
index 3e46c7d..8c7325e 100644
--- a/src/store/modules/notification.ts
+++ b/src/store/modules/notification.ts
@@ -73,4 +73,5 @@ export const useNotificationStore = defineStore('notification', {
       this.msgData = data;
     },
   },
+  persist: true,
 });
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 7c6705e..0d8b22c 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import keys from 'lodash/keys';
 import { COLOR_TOKEN, LIGHT_CHART_COLORS, DARK_CHART_COLORS, TColorSeries } from '@/config/color';
 import STYLE_CONFIG from '@/config/style';
 import { store } from '@/store';
@@ -67,6 +68,9 @@ export const useSettingStore = defineStore('setting', {
       }
     },
   },
+  persist: {
+    paths: [...keys(STYLE_CONFIG), 'colorList', 'chartColors'],
+  },
 });
 
 export function getSettingStore() {
diff --git a/src/store/modules/tabs-router.ts b/src/store/modules/tabs-router.ts
index 1cb3586..d52961c 100644
--- a/src/store/modules/tabs-router.ts
+++ b/src/store/modules/tabs-router.ts
@@ -68,6 +68,7 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
       newRoutes?.forEach((route: TRouterInfo) => this.appendTabRouterList(route));
     },
   },
+  persist: true,
 });
 
 export function getTabsRouterStore() {
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 575af0f..fba0728 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { TOKEN_NAME } from '@/config/global';
-import { store } from '@/store';
+import { store, usePermissionStore } from '@/store';
 
 const InitUserInfo = {
   roles: [],
@@ -79,6 +79,12 @@ export const useUserStore = defineStore('user', {
       this.token = '';
     },
   },
+  persist: {
+    afterRestore: (ctx) => {
+      const permissionStore = usePermissionStore();
+      permissionStore.initRoutes(ctx.store.roles);
+    },
+  },
 });
 
 export function getUserStore() {

From 4a5cdaf51b8d46355381637de2759c9cafb91fc2 Mon Sep 17 00:00:00 2001
From: zengqiu <zengqiu@qq.com>
Date: Tue, 13 Sep 2022 10:49:30 +0800
Subject: [PATCH 09/22] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E5=99=A8=E4=B8=8D=E5=85=BC=E5=AE=B9=E9=A1=B5=E4=B8=AD?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E6=8E=A8=E8=8D=90=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E9=81=AE=E6=8C=A1=E9=A1=B5=E8=84=9A=E4=BF=A1=E6=81=AF=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20(#303)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/result/browser-incompatible/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/result/browser-incompatible/index.vue b/src/pages/result/browser-incompatible/index.vue
index 711be8a..312fdda 100644
--- a/src/pages/result/browser-incompatible/index.vue
+++ b/src/pages/result/browser-incompatible/index.vue
@@ -38,14 +38,14 @@ import Thumbnail from '@/components/thumbnail/index.vue';
   align-items: center;
   justify-content: space-between;
   color: var(--td-text-color-secondary);
+  height: calc(75vh - 254px);
+  min-height: 156px;
 }
 
 .recommend-container {
-  position: absolute;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  top: 175px;
   padding: 24px 48px;
   width: 640px;
   background: var(--td-bg-color-container);

From 7e40754fc179c28f8e02844018cf36faa701ba15 Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Tue, 13 Sep 2022 16:42:51 +0800
Subject: [PATCH 10/22] docs: README in English (#301)

* fix: miss layout header

* docs: readme in english

* fix: typo and grammar (#300)

* chore: add lang tab

Co-authored-by: Thet Paing Hein <paiakarit@gmail.com>
---
  README-en_US.md |  97 ++++++++++++++++++++++++++++++++++++++
 README-zh_CN.md  | 120 +++++++++++++++++++++++++++++++++++++++++++++++
 README.md        |  91 ++++++++++++++---------------------
 3 files changed, 253 insertions(+), 55 deletions(-)
 create mode 100644  README-en_US.md
 create mode 100644 README-zh_CN.md

diff --git a/ README-en_US.md b/ README-en_US.md
new file mode 100644
index 0000000..f8f7453
--- /dev/null
+++ b/ README-en_US.md	
@@ -0,0 +1,97 @@
+<p style="display:flex; justify-content: center">
+
+</p>
+<p align="center">
+  <a href="https://tdesign.tencent.com/starter/vue-next/#/dashboard/base" target="_blank">
+    <img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/starter/brand-logo.svg">
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatility"></a>
+  <a href="https://github.com/Tencent/tdesign-vue-next/blob/develop/LICENSE">
+    <img src="https://img.shields.io/npm/l/tdesign-vue-next.svg?sanitize=true" alt="License">
+  </a>
+</p>
+
+### Introduction
+
+TDesign Vue Next Starter is a TDesign-based developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
+
+<p>
+  <a href="http://tdesign.tencent.com/starter/vue-next/">Live Preview</a>
+  ·
+  <a href="https://tdesign.tencent.com/starter/">Documentation</a>
+</p>
+
+<img src="docs/starter.png">
+
+### Features
+
+- Various provided pages for develop
+- Complete directory structure for develop
+- Code specification configuration
+- Support dark mode
+- Custom theme colors
+- Various space layouts
+- Mock data scheme
+
+### Usage
+
+> Initialize project with our CLI tool `tdesign-starter-cli` 
+
+```bash
+## install tdesign-starter-cli
+npm i tdesign-starter-cli@latest -g
+
+## create project
+td-starter init
+```
+
+### Develop
+
+```bash
+## install dependencies
+npm install
+
+## set up
+npm run dev
+```
+
+### Build
+
+```bash
+## build
+npm run build
+
+## build for test
+npm run build:test
+```
+
+
+### Contributing Guide
+
+We welcome contributions to our project. Create your [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) or Submit your [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls).
+
+#### Pull Request
+
+1. Fork it!
+2. Create your branch: `git checkout -b feat/xxxx`
+3. Commit: `git commit -a 'feat(project): describe'`
+4. Push: `git push origin feat/xxxx`
+5. New Pull Request `pull request`
+
+#### Commit Specification
+
+- [Angular Convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular)
+- [Vue Style Guide](https://v3.vuejs.org/style-guide/#rule-categories)
+
+### Compatibility
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                 |
+
+### License
+
+The MIT License. Please see [the license file](LICENSE) for more information.
diff --git a/README-zh_CN.md b/README-zh_CN.md
new file mode 100644
index 0000000..ad43c9c
--- /dev/null
+++ b/README-zh_CN.md
@@ -0,0 +1,120 @@
+
+<p style="display:flex; justify-content: center">
+
+</p>
+<p align="center">
+  <a href="https://tdesign.tencent.com/starter/vue-next/#/dashboard/base" target="_blank">
+    <img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/starter/brand-logo.svg">
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatility"></a>
+  <a href="https://github.com/Tencent/tdesign-vue-next/blob/develop/LICENSE">
+    <img src="https://img.shields.io/npm/l/tdesign-vue-next.svg?sanitize=true" alt="License">
+  </a>
+</p>
+
+简体中文 | [English](./README.md) 
+
+### 项目简介
+
+TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite2`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
+
+<p>
+  <a href="http://tdesign.tencent.com/starter/vue-next/">在线预览</a>
+  ·
+  <a href="https://tdesign.tencent.com/starter/">使用文档</a>
+
+</p>
+
+<img src="docs/starter.png">
+
+### 特性
+
+- 内置多种常用的中后台页面
+- 完善的目录结构
+- 完善的代码规范配置
+- 支持暗黑模式
+- 自定义主题颜色
+- 多种空间布局
+- 内置 Mock 数据方案
+
+### 使用
+
+> 通过 `tdesign-starter-cli` 初始化项目仓库
+
+```bash
+## 1、安装 tdesign-starter-cli
+npm i tdesign-starter-cli@latest -g
+
+## 2、创建项目
+td-starter init
+```
+
+### 开发
+
+``` bash
+## 安装依赖
+npm install
+
+## 启动项目
+npm run dev
+```
+
+### 构建
+
+```bash
+## 构建正式环境
+npm run build
+
+## 构建测试环境
+npm run build:test
+```
+
+### 其他
+
+```bash
+## 预览构建产物
+npm run preview
+
+## 代码格式检查
+npm run lint
+
+## 代码格式检查与自动修复
+npm run lint:fix
+
+## style格式检查
+npm run stylelint
+
+## style格式检查与自动修复
+npm run stylelint:fix
+```
+
+### 如何贡献
+
+非常欢迎您的贡献！提交您的 [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) 或者提交 [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls)。
+
+#### Pull Request
+
+1. Fork 代码!
+2. 创建自己的分支: `git checkout -b feat/xxxx`
+3. 提交你的修改: `git commit -a 'feat(project): describe'`
+4. 推送您的分支: `git push origin feat/xxxx`
+5. 提交 `pull request`
+
+#### 贡献提交规范
+
+- [Angular Convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular)
+- [Vue Style Guide](https://v3.vuejs.org/style-guide/#rule-categories)
+
+### 兼容性
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                  |
+
+### 开源协议
+
+TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-vue-next-starter/LICENSE)。
+
diff --git a/README.md b/README.md
index 1f15c15..beed009 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
-
 <p style="display:flex; justify-content: center">
 
 </p>
@@ -15,104 +14,86 @@
   </a>
 </p>
 
-### 项目简介
+English | [简体中文](./README-zh_CN.md) 
+### Introduction
 
-TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite2`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
+TDesign Vue Next Starter is a TDesign-based, developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`, which can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects .
 
 <p>
-  <a href="http://tdesign.tencent.com/starter/vue-next/">在线预览</a>
+  <a href="http://tdesign.tencent.com/starter/vue-next/">preview</a>
   ·
-  <a href="https://tdesign.tencent.com/starter/">使用文档</a>
+  <a href="https://tdesign.tencent.com/starter/">documentation</a>
 
 </p>
 
 <img src="docs/starter.png">
 
-### 特性
+### Features
 
-- 内置多种常用的中后台页面
-- 完善的目录结构
-- 完善的代码规范配置
-- 支持暗黑模式
-- 自定义主题颜色
-- 多种空间布局
-- 内置 Mock 数据方案
+- Various provided pages for develop
+- Complete Directory Structure for develop
+- Code Specification Configuration
+- Dark Mode
+- Custom theme colors
+- Various space layouts
+- Mock Data Scheme
 
-### 使用
+### Usage
 
-> 通过 `tdesign-starter-cli` 初始化项目仓库
+> init project with our CLI tool `tdesign-starter-cli` 
 
 ```bash
-## 1、安装 tdesign-starter-cli
+## install tdesign-starter-cli
 npm i tdesign-starter-cli@latest -g
 
-## 2、创建项目
+## 2、create project
 td-starter init
 ```
 
-### 开发
+### Develop
 
-``` bash
-## 安装依赖
+```bash
+## install dependencies
 npm install
 
-## 启动项目
+## set up
 npm run dev
 ```
 
-### 构建
+### Build
 
 ```bash
-## 构建正式环境
+## build
 npm run build
 
-## 构建测试环境
+## build for test
 npm run build:test
 ```
 
-### 其他
 
-```bash
-## 预览构建产物
-npm run preview
+### Contributing
 
-## 代码格式检查
-npm run lint
-
-## 代码格式检查与自动修复
-npm run lint:fix
-
-## style格式检查
-npm run stylelint
-
-## style格式检查与自动修复
-npm run stylelint:fix
-```
-
-### 如何贡献
-
-非常欢迎您的贡献！提交您的 [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) 或者提交 [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls)。
+Contributing is welcome！Create your [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) or Submit your [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls)。
 
 #### Pull Request
 
-1. Fork 代码!
-2. 创建自己的分支: `git checkout -b feat/xxxx`
-3. 提交你的修改: `git commit -a 'feat(project): describe'`
-4. 推送您的分支: `git push origin feat/xxxx`
-5. 提交 `pull request`
+1. Fork it!
+2. Create your branch: `git checkout -b feat/xxxx`
+3. Commit: `git commit -a 'feat(project): describe'`
+4. Push: `git push origin feat/xxxx`
+5. New Pull Request `pull request`
 
-#### 贡献提交规范
+#### Commit Specification
 
 - [Angular Convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular)
 - [Vue Style Guide](https://v3.vuejs.org/style-guide/#rule-categories)
 
-### 兼容性
+### Compatibility
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                  |
+| Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                 |
 
-### 开源协议
-
-TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-vue-next-starter/LICENSE)。
+### LICENSE
 
+[MIT](https://github.com/Tencent/tdesign-vue-next-starter/LICENSE)

From f0b5c2e149cc8adb13990ac498cdf654ac543e4c Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Tue, 13 Sep 2022 16:55:41 +0800
Subject: [PATCH 11/22] chore: update docs

---
  README-en_US.md | 97 ------------------------------------------------
 README.md        | 27 +++++++-------
 2 files changed, 13 insertions(+), 111 deletions(-)
 delete mode 100644  README-en_US.md

diff --git a/ README-en_US.md b/ README-en_US.md
deleted file mode 100644
index f8f7453..0000000
--- a/ README-en_US.md	
+++ /dev/null
@@ -1,97 +0,0 @@
-<p style="display:flex; justify-content: center">
-
-</p>
-<p align="center">
-  <a href="https://tdesign.tencent.com/starter/vue-next/#/dashboard/base" target="_blank">
-    <img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/starter/brand-logo.svg">
-  </a>
-</p>
-
-<p align="center">
-  <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatility"></a>
-  <a href="https://github.com/Tencent/tdesign-vue-next/blob/develop/LICENSE">
-    <img src="https://img.shields.io/npm/l/tdesign-vue-next.svg?sanitize=true" alt="License">
-  </a>
-</p>
-
-### Introduction
-
-TDesign Vue Next Starter is a TDesign-based developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
-
-<p>
-  <a href="http://tdesign.tencent.com/starter/vue-next/">Live Preview</a>
-  ·
-  <a href="https://tdesign.tencent.com/starter/">Documentation</a>
-</p>
-
-<img src="docs/starter.png">
-
-### Features
-
-- Various provided pages for develop
-- Complete directory structure for develop
-- Code specification configuration
-- Support dark mode
-- Custom theme colors
-- Various space layouts
-- Mock data scheme
-
-### Usage
-
-> Initialize project with our CLI tool `tdesign-starter-cli` 
-
-```bash
-## install tdesign-starter-cli
-npm i tdesign-starter-cli@latest -g
-
-## create project
-td-starter init
-```
-
-### Develop
-
-```bash
-## install dependencies
-npm install
-
-## set up
-npm run dev
-```
-
-### Build
-
-```bash
-## build
-npm run build
-
-## build for test
-npm run build:test
-```
-
-
-### Contributing Guide
-
-We welcome contributions to our project. Create your [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) or Submit your [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls).
-
-#### Pull Request
-
-1. Fork it!
-2. Create your branch: `git checkout -b feat/xxxx`
-3. Commit: `git commit -a 'feat(project): describe'`
-4. Push: `git push origin feat/xxxx`
-5. New Pull Request `pull request`
-
-#### Commit Specification
-
-- [Angular Convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular)
-- [Vue Style Guide](https://v3.vuejs.org/style-guide/#rule-categories)
-
-### Compatibility
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                 |
-
-### License
-
-The MIT License. Please see [the license file](LICENSE) for more information.
diff --git a/README.md b/README.md
index beed009..dd5ed69 100644
--- a/README.md
+++ b/README.md
@@ -17,13 +17,12 @@
 English | [简体中文](./README-zh_CN.md) 
 ### Introduction
 
-TDesign Vue Next Starter is a TDesign-based, developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`, which can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects .
+TDesign Vue Next Starter is a TDesign-based developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
 
 <p>
-  <a href="http://tdesign.tencent.com/starter/vue-next/">preview</a>
+  <a href="http://tdesign.tencent.com/starter/vue-next/">Live Preview</a>
   ·
-  <a href="https://tdesign.tencent.com/starter/">documentation</a>
-
+  <a href="https://tdesign.tencent.com/starter/">Documentation</a>
 </p>
 
 <img src="docs/starter.png">
@@ -31,22 +30,22 @@ TDesign Vue Next Starter is a TDesign-based, developed with `Vue3`, `Vite2`, `Pi
 ### Features
 
 - Various provided pages for develop
-- Complete Directory Structure for develop
-- Code Specification Configuration
-- Dark Mode
+- Complete directory structure for develop
+- Code specification configuration
+- Support dark mode
 - Custom theme colors
 - Various space layouts
-- Mock Data Scheme
+- Mock data scheme
 
 ### Usage
 
-> init project with our CLI tool `tdesign-starter-cli` 
+> Initialize project with our CLI tool `tdesign-starter-cli` 
 
 ```bash
 ## install tdesign-starter-cli
 npm i tdesign-starter-cli@latest -g
 
-## 2、create project
+## create project
 td-starter init
 ```
 
@@ -71,9 +70,9 @@ npm run build:test
 ```
 
 
-### Contributing
+### Contributing Guide
 
-Contributing is welcome！Create your [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) or Submit your [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls)。
+We welcome contributions to our project. Create your [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) or Submit your [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls).
 
 #### Pull Request
 
@@ -94,6 +93,6 @@ Contributing is welcome！Create your [Issue](https://github.com/tencent/tdesign
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                 |
 
-### LICENSE
+### License
 
-[MIT](https://github.com/Tencent/tdesign-vue-next-starter/LICENSE)
+The MIT License. Please see [the license file](LICENSE) for more information.

From fc69c8f9eb37654a8cc7444bbb2ccf8885b2e571 Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Tue, 13 Sep 2022 16:57:52 +0800
Subject: [PATCH 12/22] chore: update docs (#305)

* fix: miss layout header

* chore: update docs
---
  README-en_US.md | 97 ------------------------------------------------
 README.md        | 27 +++++++-------
 2 files changed, 13 insertions(+), 111 deletions(-)
 delete mode 100644  README-en_US.md

diff --git a/ README-en_US.md b/ README-en_US.md
deleted file mode 100644
index f8f7453..0000000
--- a/ README-en_US.md	
+++ /dev/null
@@ -1,97 +0,0 @@
-<p style="display:flex; justify-content: center">
-
-</p>
-<p align="center">
-  <a href="https://tdesign.tencent.com/starter/vue-next/#/dashboard/base" target="_blank">
-    <img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/starter/brand-logo.svg">
-  </a>
-</p>
-
-<p align="center">
-  <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatility"></a>
-  <a href="https://github.com/Tencent/tdesign-vue-next/blob/develop/LICENSE">
-    <img src="https://img.shields.io/npm/l/tdesign-vue-next.svg?sanitize=true" alt="License">
-  </a>
-</p>
-
-### Introduction
-
-TDesign Vue Next Starter is a TDesign-based developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
-
-<p>
-  <a href="http://tdesign.tencent.com/starter/vue-next/">Live Preview</a>
-  ·
-  <a href="https://tdesign.tencent.com/starter/">Documentation</a>
-</p>
-
-<img src="docs/starter.png">
-
-### Features
-
-- Various provided pages for develop
-- Complete directory structure for develop
-- Code specification configuration
-- Support dark mode
-- Custom theme colors
-- Various space layouts
-- Mock data scheme
-
-### Usage
-
-> Initialize project with our CLI tool `tdesign-starter-cli` 
-
-```bash
-## install tdesign-starter-cli
-npm i tdesign-starter-cli@latest -g
-
-## create project
-td-starter init
-```
-
-### Develop
-
-```bash
-## install dependencies
-npm install
-
-## set up
-npm run dev
-```
-
-### Build
-
-```bash
-## build
-npm run build
-
-## build for test
-npm run build:test
-```
-
-
-### Contributing Guide
-
-We welcome contributions to our project. Create your [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) or Submit your [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls).
-
-#### Pull Request
-
-1. Fork it!
-2. Create your branch: `git checkout -b feat/xxxx`
-3. Commit: `git commit -a 'feat(project): describe'`
-4. Push: `git push origin feat/xxxx`
-5. New Pull Request `pull request`
-
-#### Commit Specification
-
-- [Angular Convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular)
-- [Vue Style Guide](https://v3.vuejs.org/style-guide/#rule-categories)
-
-### Compatibility
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                 |
-
-### License
-
-The MIT License. Please see [the license file](LICENSE) for more information.
diff --git a/README.md b/README.md
index beed009..dd5ed69 100644
--- a/README.md
+++ b/README.md
@@ -17,13 +17,12 @@
 English | [简体中文](./README-zh_CN.md) 
 ### Introduction
 
-TDesign Vue Next Starter is a TDesign-based, developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`, which can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects .
+TDesign Vue Next Starter is a TDesign-based developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
 
 <p>
-  <a href="http://tdesign.tencent.com/starter/vue-next/">preview</a>
+  <a href="http://tdesign.tencent.com/starter/vue-next/">Live Preview</a>
   ·
-  <a href="https://tdesign.tencent.com/starter/">documentation</a>
-
+  <a href="https://tdesign.tencent.com/starter/">Documentation</a>
 </p>
 
 <img src="docs/starter.png">
@@ -31,22 +30,22 @@ TDesign Vue Next Starter is a TDesign-based, developed with `Vue3`, `Vite2`, `Pi
 ### Features
 
 - Various provided pages for develop
-- Complete Directory Structure for develop
-- Code Specification Configuration
-- Dark Mode
+- Complete directory structure for develop
+- Code specification configuration
+- Support dark mode
 - Custom theme colors
 - Various space layouts
-- Mock Data Scheme
+- Mock data scheme
 
 ### Usage
 
-> init project with our CLI tool `tdesign-starter-cli` 
+> Initialize project with our CLI tool `tdesign-starter-cli` 
 
 ```bash
 ## install tdesign-starter-cli
 npm i tdesign-starter-cli@latest -g
 
-## 2、create project
+## create project
 td-starter init
 ```
 
@@ -71,9 +70,9 @@ npm run build:test
 ```
 
 
-### Contributing
+### Contributing Guide
 
-Contributing is welcome！Create your [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) or Submit your [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls)。
+We welcome contributions to our project. Create your [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) or Submit your [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls).
 
 #### Pull Request
 
@@ -94,6 +93,6 @@ Contributing is welcome！Create your [Issue](https://github.com/tencent/tdesign
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                 |
 
-### LICENSE
+### License
 
-[MIT](https://github.com/Tencent/tdesign-vue-next-starter/LICENSE)
+The MIT License. Please see [the license file](LICENSE) for more information.

From 12e869ddeb513a99a1a4964ed6da528b6a405903 Mon Sep 17 00:00:00 2001
From: paopao <zhangpaopao0609@gmail.com>
Date: Wed, 14 Sep 2022 12:27:02 +0800
Subject: [PATCH 13/22] feat: multiple tabs support action (#297)

* feat: multiple tabs support action

* refactor: tap change to tab

* feat(tab-router): handle operation effect

Co-authored-by: Uyarn <uyarnchen@gmail.com>
---
 src/layouts/components/LayoutContent.vue | 47 +++++++++++++++++++++---
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/layouts/components/LayoutContent.vue b/src/layouts/components/LayoutContent.vue
index fe730df..58cbfe6 100644
--- a/src/layouts/components/LayoutContent.vue
+++ b/src/layouts/components/LayoutContent.vue
@@ -19,19 +19,23 @@
           <t-dropdown
             trigger="context-menu"
             :min-column-width="128"
-            :popup-props="{ overlayClassName: 'route-tabs-dropdown' }"
+            :popup-props="{
+              overlayClassName: 'route-tabs-dropdown',
+              onVisibleChange: (visible: boolean, ctx) => handleTabMenuClick(visible, ctx, routeItem.path),
+              visible: activeTabPath === routeItem.path,
+            }"
           >
             <template v-if="!routeItem.isHome">
               {{ routeItem.title }}
             </template>
             <t-icon v-else name="home" />
             <template #dropdown>
-              <t-dropdown-menu v-if="$route.path === routeItem.path">
+              <t-dropdown-menu>
                 <t-dropdown-item @click="() => handleRefresh(routeItem, index)">
                   <t-icon name="refresh" />
                   刷新
                 </t-dropdown-item>
-                <t-dropdown-item v-if="index > 0" @click="() => handleCloseAhead(routeItem.path, index)">
+                <t-dropdown-item v-if="index > 1" @click="() => handleCloseAhead(routeItem.path, index)">
                   <t-icon name="arrow-left" />
                   关闭左侧
                 </t-dropdown-item>
@@ -42,7 +46,7 @@
                   <t-icon name="arrow-right" />
                   关闭右侧
                 </t-dropdown-item>
-                <t-dropdown-item @click="() => handleCloseOther(routeItem.path, index)">
+                <t-dropdown-item v-if="tabRouters.length > 2" @click="() => handleCloseOther(routeItem.path, index)">
                   <t-icon name="close-circle" />
                   关闭其它
                 </t-dropdown-item>
@@ -63,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, computed } from 'vue';
+import { nextTick, ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useSettingStore, useTabsRouterStore } from '@/store';
 import { prefix } from '@/config/global';
@@ -79,6 +83,7 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const tabsRouterStore = useTabsRouterStore();
 const tabRouters = computed(() => tabsRouterStore.tabRouters.filter((route) => route.isAlive || route.isHome));
+const activeTabPath = ref('');
 
 const handleChangeCurrentTab = (path: string) => {
   const { tabRouters } = tabsRouterStore;
@@ -100,14 +105,46 @@ const handleRefresh = (route: TRouterInfo, routeIdx: number) => {
     tabsRouterStore.toggleTabRouterAlive(routeIdx);
     router.replace({ path: route.path, query: route.query });
   });
+  activeTabPath.value = null;
 };
 const handleCloseAhead = (path: string, routeIdx: number) => {
   tabsRouterStore.subtractTabRouterAhead({ path, routeIdx });
+
+  handleOperationEffect('ahead', routeIdx);
 };
 const handleCloseBehind = (path: string, routeIdx: number) => {
   tabsRouterStore.subtractTabRouterBehind({ path, routeIdx });
+
+  handleOperationEffect('behind', routeIdx);
 };
 const handleCloseOther = (path: string, routeIdx: number) => {
   tabsRouterStore.subtractTabRouterOther({ path, routeIdx });
+
+  handleOperationEffect('other', routeIdx);
+};
+
+// 处理非当前路由操作的副作用
+const handleOperationEffect = (type: 'other' | 'ahead' | 'behind', routeIndex: number) => {
+  const currentPath = router.currentRoute.value.path;
+  const { tabRouters } = tabsRouterStore;
+
+  const currentIdx = tabRouters.findIndex((i) => i.path === currentPath);
+  // 存在三种情况需要刷新当前路由
+  // 点击非当前路由的关闭其他、点击非当前路由的关闭左侧且当前路由小于触发路由、点击非当前路由的关闭右侧且当前路由大于触发路由
+  const needRefreshRouter =
+    (type === 'other' && currentIdx !== routeIndex) ||
+    (type === 'ahead' && currentIdx < routeIndex) ||
+    (type === 'behind' && currentIdx === -1);
+  if (needRefreshRouter) {
+    const nextRouteIdx = type === 'behind' ? tabRouters.length - 1 : 1;
+    const nextRouter = tabRouters[nextRouteIdx];
+    router.push({ path: nextRouter.path, query: nextRouter.query });
+  }
+
+  activeTabPath.value = null;
+};
+const handleTabMenuClick = (visible: boolean, ctx, path: string) => {
+  if (ctx.trigger === 'document') activeTabPath.value = null;
+  if (visible) activeTabPath.value = path;
 };
 </script>

From 7d9e973f43f3795f757bfbe46883a90ff81ae622 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Fri, 16 Sep 2022 21:04:48 +0800
Subject: [PATCH 14/22] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=88=A4=E6=96=AD=20(#311)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增配置项判断，避免出现undefined导致的无效url
---
 src/utils/request/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/request/index.ts b/src/utils/request/index.ts
index 3a34fe6..7d15c7e 100644
--- a/src/utils/request/index.ts
+++ b/src/utils/request/index.ts
@@ -57,7 +57,7 @@ const transform: AxiosTransform = {
     const { apiUrl, isJoinPrefix, urlPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;
 
     // 添加接口前缀
-    if (isJoinPrefix) {
+    if (isJoinPrefix && urlPrefix && isString(urlPrefix)) {
       config.url = `${urlPrefix}${config.url}`;
     }
 

From e1bc0a0d876f0fadc5166e3e3324f6b1bf0baee9 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, 17 Sep 2022 00:23:47 +0800
Subject: [PATCH 15/22] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dsidenav=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E9=94=99=E8=AF=AF=20(#315)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf: 增加配置判断 (#311)

新增配置项判断，避免出现undefined导致的无效url

* fix: 修复参数错误

Co-authored-by: Kerwin Bryant <kerwin612@qq.com>
---
 src/layouts/components/LayoutSideNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/components/LayoutSideNav.vue b/src/layouts/components/LayoutSideNav.vue
index 1a6fb67..771408f 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.mode"
+    :theme="settingStore.displayMode"
     :is-compact="settingStore.isSidebarCompact"
   />
 </template>

From 0e259413ca91923e1f5f8517db9c480d5a07e134 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, 17 Sep 2022 00:24:20 +0800
Subject: [PATCH 16/22] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4user=E7=9A=84?=
 =?UTF-8?q?=E6=8C=81=E4=B9=85=E5=8C=96=E4=BF=AE=E5=A4=8D=E5=85=B6=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E7=9A=84=E9=97=AE=E9=A2=98=20(#314)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf: 增加配置判断 (#311)

新增配置项判断，避免出现undefined导致的无效url

* fix: 移除user的持久化修复其导致的问题

Co-authored-by: Kerwin Bryant <kerwin612@qq.com>
---
 src/store/modules/user.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index fba0728..575af0f 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { TOKEN_NAME } from '@/config/global';
-import { store, usePermissionStore } from '@/store';
+import { store } from '@/store';
 
 const InitUserInfo = {
   roles: [],
@@ -79,12 +79,6 @@ export const useUserStore = defineStore('user', {
       this.token = '';
     },
   },
-  persist: {
-    afterRestore: (ctx) => {
-      const permissionStore = usePermissionStore();
-      permissionStore.initRoutes(ctx.store.roles);
-    },
-  },
 });
 
 export function getUserStore() {

From 33fa473761c630311d96479cd9638f0ca3cd4f80 Mon Sep 17 00:00:00 2001
From: PDieE <23275429@qq.com>
Date: Sat, 17 Sep 2022 16:40:11 +0800
Subject: [PATCH 17/22] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=8C=81?=
 =?UTF-8?q?=E4=B9=85=E5=8C=96=E7=9A=84=E9=97=AE=E9=A2=98=20(#316)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修正首次进入页面时由于userStore数据还未初始化导致的白屏的问题

* Update user.ts

fix: 优化逻辑
---
 src/store/modules/user.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 575af0f..2fad24e 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { TOKEN_NAME } from '@/config/global';
-import { store } from '@/store';
+import { store, usePermissionStore } from '@/store';
 
 const InitUserInfo = {
   roles: [],
@@ -79,6 +79,14 @@ export const useUserStore = defineStore('user', {
       this.token = '';
     },
   },
+  persist: {
+    afterRestore: (ctx) => {
+      if (ctx.store.roles && ctx.store.roles.length > 0) {
+        const permissionStore = usePermissionStore();
+        permissionStore.initRoutes(ctx.store.roles);
+      }
+    },
+  },
 });
 
 export function getUserStore() {

From 6f98a7958c1e05cd1b696d86d188186979c8ab6f 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, 22 Sep 2022 13:59:37 +0800
Subject: [PATCH 18/22] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B7=AF?=
 =?UTF-8?q?=E5=BE=84=E9=87=8D=E5=A4=8D=E6=8B=BC=E6=8E=A5=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20(#319)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/MenuContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/components/MenuContent.vue b/src/layouts/components/MenuContent.vue
index 2ba7a09..fc9977e 100644
--- a/src/layouts/components/MenuContent.vue
+++ b/src/layouts/components/MenuContent.vue
@@ -57,7 +57,7 @@ const getMenuList = (list: MenuRoute[], basePath?: string): MenuRoute[] => {
   });
   return list
     .map((item) => {
-      const path = basePath ? `${basePath}/${item.path}` : item.path;
+      const path = basePath && !item.path.includes(basePath) ? `${basePath}/${item.path}` : item.path;
       return {
         path,
         title: item.meta?.title,

From 975d92d18d7eaae14a93e4ac403312611391df5d Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Tue, 27 Sep 2022 19:40:18 +0800
Subject: [PATCH 19/22] feat: upgrade tdesign to 0.23 (#322)

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ea54b6a..f304b44 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tdesign-vue-next-starter",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",
@@ -28,7 +28,7 @@
     "qrcode.vue": "^3.2.2",
     "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",
-    "tdesign-vue-next": "0.20.3",
+    "tdesign-vue-next": "^0.23.0",
     "tvision-color": "^1.3.1",
     "vue": "^3.2.31",
     "vue-clipboard3": "^2.0.0",

From 509c49aacef8edd46e7dd3c3ddc1674a5de7620d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E4=BD=99?= <dianjie1022@gmail.com>
Date: Sat, 1 Oct 2022 11:28:42 +0800
Subject: [PATCH 20/22] =?UTF-8?q?feat:=20=20=E5=B0=86CSS=20Token=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E4=B8=BA=E5=85=A8=E5=B1=80=E5=8F=98=E9=87=8F=20(#327)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat:  @/style/variables设置为全局变量并移除相关引用

* feat: 移除主题定制预留

* fix: less 格式化
---
 src/App.vue                                          |  2 --
 src/components/product-card/index.vue                |  2 --
 src/components/result/index.vue                      |  2 --
 src/components/trend/index.vue                       |  1 -
 src/layouts/components/Content.vue                   |  2 --
 src/layouts/components/Footer.vue                    |  2 --
 src/layouts/components/Header.vue                    |  1 -
 src/layouts/components/Notice.vue                    |  2 --
 src/layouts/components/Search.vue                    |  2 --
 src/layouts/setting.vue                              |  2 --
 .../dashboard/base/components/OutputOverview.vue     |  2 --
 src/pages/dashboard/base/components/RankList.vue     |  2 --
 src/pages/dashboard/base/components/TopPanel.vue     |  2 --
 src/pages/dashboard/detail/index.vue                 |  2 --
 src/pages/detail/advanced/components/Product.vue     |  1 -
 src/pages/detail/base/index.less                     |  2 --
 src/pages/detail/secondary/index.less                |  2 --
 src/pages/form/base/index.less                       |  2 --
 src/pages/form/step/index.less                       |  2 --
 src/pages/list/base/index.vue                        |  2 --
 src/pages/list/card/index.vue                        |  2 --
 src/pages/list/components/CommonTable.vue            |  1 -
 src/pages/list/tree/index.vue                        |  1 -
 src/pages/login/components/Header.vue                |  1 -
 src/pages/login/index.less                           |  2 --
 src/pages/result/browser-incompatible/index.vue      |  2 --
 src/pages/result/fail/index.vue                      |  2 --
 src/pages/result/success/index.vue                   |  2 --
 src/pages/user/index.less                            |  2 --
 src/style/index.less                                 |  1 -
 src/style/layout.less                                |  1 -
 vite.config.ts                                       | 12 ++++++++++++
 32 files changed, 12 insertions(+), 54 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 18cd85d..ef6f2f6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,8 +12,6 @@ const mode = computed(() => {
 });
 </script>
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 #nprogress .bar {
   background: var(--td-brand-color) !important;
 }
diff --git a/src/components/product-card/index.vue b/src/components/product-card/index.vue
index ecbd682..7946501 100644
--- a/src/components/product-card/index.vue
+++ b/src/components/product-card/index.vue
@@ -94,8 +94,6 @@ const handleClickDelete = (product: CardProductType) => {
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables';
-
 .list-card-item {
   display: flex;
   flex-direction: column;
diff --git a/src/components/result/index.vue b/src/components/result/index.vue
index c4e41ff..6edb222 100644
--- a/src/components/result/index.vue
+++ b/src/components/result/index.vue
@@ -44,8 +44,6 @@ const dynamicComponent = computed(() => {
 });
 </script>
 <style lang="less" scoped>
-@import '@/style/variables';
-
 .result {
   &-link {
     color: var(--td-brand-color);
diff --git a/src/components/trend/index.vue b/src/components/trend/index.vue
index c2339e6..bc438cb 100644
--- a/src/components/trend/index.vue
+++ b/src/components/trend/index.vue
@@ -48,7 +48,6 @@ const iconCls = computed(() => ['trend-icon-container']);
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
 .trend {
   &-container {
     &__up {
diff --git a/src/layouts/components/Content.vue b/src/layouts/components/Content.vue
index eff4439..47d9472 100644
--- a/src/layouts/components/Content.vue
+++ b/src/layouts/components/Content.vue
@@ -38,8 +38,6 @@ const isRefreshing = computed(() => {
 });
 </script>
 <style lang="less" scoped>
-@import '@/style/variables';
-
 .fade-leave-active,
 .fade-enter-active {
   transition: opacity @anim-duration-slow @anim-time-fn-easing;
diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
index b1504b6..d86a561 100644
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -7,8 +7,6 @@ import { prefix } from '@/config/global';
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables';
-
 .@{starter-prefix}-footer {
   color: var(--td-text-color-placeholder);
   line-height: 20px;
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index 97ea956..82c4d95 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -155,7 +155,6 @@ const navToHelper = () => {
 };
 </script>
 <style lang="less" scoped>
-@import '@/style/variables.less';
 .@{starter-prefix}-header {
   &-layout {
     height: 64px;
diff --git a/src/layouts/components/Notice.vue b/src/layouts/components/Notice.vue
index e570d98..ea8e4f3 100644
--- a/src/layouts/components/Notice.vue
+++ b/src/layouts/components/Notice.vue
@@ -77,8 +77,6 @@ const goDetail = () => {
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 .header-msg {
   width: 400px;
   height: 500px;
diff --git a/src/layouts/components/Search.vue b/src/layouts/components/Search.vue
index 9161328..f593893 100644
--- a/src/layouts/components/Search.vue
+++ b/src/layouts/components/Search.vue
@@ -53,8 +53,6 @@ const changeSearchFocus = (value: boolean) => {
 };
 </script>
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 .header-menu-search {
   display: flex;
   margin-left: 16px;
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index 026be9e..568c866 100644
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@@ -212,8 +212,6 @@ watchEffect(() => {
 });
 </script>
 <style lang="less" scoped>
-@import '@/style/variables';
-
 .tdesign-setting {
   z-index: 100;
   position: fixed;
diff --git a/src/pages/dashboard/base/components/OutputOverview.vue b/src/pages/dashboard/base/components/OutputOverview.vue
index 57147f4..e0552c2 100644
--- a/src/pages/dashboard/base/components/OutputOverview.vue
+++ b/src/pages/dashboard/base/components/OutputOverview.vue
@@ -155,8 +155,6 @@ const onStokeDataChange = (checkedValues: string[]) => {
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 .dashboard-overview-card {
   :deep(.t-card__header) {
     padding-bottom: 24px;
diff --git a/src/pages/dashboard/base/components/RankList.vue b/src/pages/dashboard/base/components/RankList.vue
index 7eaff01..a8935b9 100644
--- a/src/pages/dashboard/base/components/RankList.vue
+++ b/src/pages/dashboard/base/components/RankList.vue
@@ -66,8 +66,6 @@ const getRankClass = (index: number) => {
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 .dashboard-rank-card {
   padding: 8px;
 
diff --git a/src/pages/dashboard/base/components/TopPanel.vue b/src/pages/dashboard/base/components/TopPanel.vue
index 04c7235..a0d1bf1 100644
--- a/src/pages/dashboard/base/components/TopPanel.vue
+++ b/src/pages/dashboard/base/components/TopPanel.vue
@@ -153,8 +153,6 @@ watch(
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 .dashboard-item {
   padding: 8px;
 
diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue
index fc4dc17..1cebdc4 100644
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@@ -163,8 +163,6 @@ const onMaterialChange = (value: string[]) => {
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 .row-margin {
   margin-top: 16px;
 }
diff --git a/src/pages/detail/advanced/components/Product.vue b/src/pages/detail/advanced/components/Product.vue
index 30b623a..9df2816 100644
--- a/src/pages/detail/advanced/components/Product.vue
+++ b/src/pages/detail/advanced/components/Product.vue
@@ -54,7 +54,6 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
 .operator-gap {
   margin-left: 20px;
 }
diff --git a/src/pages/detail/base/index.less b/src/pages/detail/base/index.less
index 3aa42a5..2d6e94e 100644
--- a/src/pages/detail/base/index.less
+++ b/src/pages/detail/base/index.less
@@ -1,5 +1,3 @@
-@import '@/style/variables.less';
-
 .detail-base {
   :deep(.t-card) {
     padding: 8px;
diff --git a/src/pages/detail/secondary/index.less b/src/pages/detail/secondary/index.less
index 013a2a5..32342a5 100644
--- a/src/pages/detail/secondary/index.less
+++ b/src/pages/detail/secondary/index.less
@@ -1,5 +1,3 @@
-@import '@/style/variables.less';
-
 .secondary-notification {
   background-color: var(--td-bg-color-container);
   border-radius: @border-radius;
diff --git a/src/pages/form/base/index.less b/src/pages/form/base/index.less
index 97e6afa..05f3a54 100644
--- a/src/pages/form/base/index.less
+++ b/src/pages/form/base/index.less
@@ -1,5 +1,3 @@
-@import '@/style/variables.less';
-
 .form-basic-container {
   display: flex;
   align-items: center;
diff --git a/src/pages/form/step/index.less b/src/pages/form/step/index.less
index 3b25940..36cd6b8 100644
--- a/src/pages/form/step/index.less
+++ b/src/pages/form/step/index.less
@@ -1,5 +1,3 @@
-@import '@/style/variables';
-
 .form-step-container {
   background-color: var(--td-bg-color-container);
 
diff --git a/src/pages/list/base/index.vue b/src/pages/list/base/index.vue
index 598c91e..d6d5b07 100644
--- a/src/pages/list/base/index.vue
+++ b/src/pages/list/base/index.vue
@@ -187,8 +187,6 @@ const getContainer = () => {
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables';
-
 .payment-col {
   display: flex;
 
diff --git a/src/pages/list/card/index.vue b/src/pages/list/card/index.vue
index c6f7679..5d921b6 100644
--- a/src/pages/list/card/index.vue
+++ b/src/pages/list/card/index.vue
@@ -146,8 +146,6 @@ const handleManageProduct = (product) => {
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 .list-card {
   height: 100%;
 
diff --git a/src/pages/list/components/CommonTable.vue b/src/pages/list/components/CommonTable.vue
index d89d5ee..cfad8dd 100644
--- a/src/pages/list/components/CommonTable.vue
+++ b/src/pages/list/components/CommonTable.vue
@@ -271,7 +271,6 @@ const getContainer = () => {
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
 .list-common-table {
   background-color: var(--td-bg-color-container);
   padding: 30px 32px;
diff --git a/src/pages/list/tree/index.vue b/src/pages/list/tree/index.vue
index ce7e411..6139031 100644
--- a/src/pages/list/tree/index.vue
+++ b/src/pages/list/tree/index.vue
@@ -43,7 +43,6 @@ const onInput = () => {
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
 .table-tree-container {
   background-color: var(--td-bg-color-container);
   border-radius: @border-radius;
diff --git a/src/pages/login/components/Header.vue b/src/pages/login/components/Header.vue
index 1109f9f..8200cd0 100644
--- a/src/pages/login/components/Header.vue
+++ b/src/pages/login/components/Header.vue
@@ -36,7 +36,6 @@ const navToHelper = () => {
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
 .login-header {
   height: 64px;
   padding: 0 24px;
diff --git a/src/pages/login/index.less b/src/pages/login/index.less
index 37895a6..e0c1c3a 100644
--- a/src/pages/login/index.less
+++ b/src/pages/login/index.less
@@ -1,5 +1,3 @@
-@import '@/style/variables.less';
-
 .light {
   &.login-wrapper {
     background-color: white;
diff --git a/src/pages/result/browser-incompatible/index.vue b/src/pages/result/browser-incompatible/index.vue
index 312fdda..a520f0f 100644
--- a/src/pages/result/browser-incompatible/index.vue
+++ b/src/pages/result/browser-incompatible/index.vue
@@ -29,8 +29,6 @@ import Thumbnail from '@/components/thumbnail/index.vue';
 </script>
 
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 .result-slot-container {
   position: relative;
   display: flex;
diff --git a/src/pages/result/fail/index.vue b/src/pages/result/fail/index.vue
index f34ca21..7369583 100644
--- a/src/pages/result/fail/index.vue
+++ b/src/pages/result/fail/index.vue
@@ -15,8 +15,6 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 .result-success {
   display: flex;
   flex-direction: column;
diff --git a/src/pages/result/success/index.vue b/src/pages/result/success/index.vue
index f8334e1..c209dd0 100644
--- a/src/pages/result/success/index.vue
+++ b/src/pages/result/success/index.vue
@@ -15,8 +15,6 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-@import '@/style/variables.less';
-
 .result-success {
   display: flex;
   flex-direction: column;
diff --git a/src/pages/user/index.less b/src/pages/user/index.less
index 262f68a..a9478de 100644
--- a/src/pages/user/index.less
+++ b/src/pages/user/index.less
@@ -1,5 +1,3 @@
-@import '@/style/variables';
-
 :deep(.t-card__title) {
   font-size: 20px;
   font-weight: 500;
diff --git a/src/style/index.less b/src/style/index.less
index 1529aa6..2988ece 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -1,4 +1,3 @@
-@import './variables.less';
 @import './font-family.less';
 @import './theme/index.less';
 @import './reset.less';
diff --git a/src/style/layout.less b/src/style/layout.less
index e523261..3aecaf5 100644
--- a/src/style/layout.less
+++ b/src/style/layout.less
@@ -1,4 +1,3 @@
-@import './variables.less';
 @import './font-family.less';
 
 // layout rewrite
diff --git a/vite.config.ts b/vite.config.ts
index ae36152..15d19e9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,6 +19,18 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       },
     },
 
+    css: {
+      preprocessorOptions: {
+        less: {
+          modifyVars: {
+            hack: `true; @import (reference) "${path.resolve('src/style/variables.less')}";`,
+          },
+          math: 'strict',
+          javascriptEnabled: true,
+        },
+      },
+    },
+
     plugins: [
       createVuePlugin(),
       vueJsx(),

From b962be9a456f210511ef2568c2e4a742abd3a21e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 8 Oct 2022 10:47:57 +0800
Subject: [PATCH 21/22] build(deps-dev): bump typescript from 4.7.4 to 4.8.4
 (#330)

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 4.7.4 to 4.8.4.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Commits](https://github.com/Microsoft/TypeScript/compare/v4.7.4...v4.8.4)

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

Signed-off-by: dependabot[bot] <support@github.com>

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 f304b44..a79d4f7 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "stylelint-config-prettier": "~9.0.3",
     "stylelint-less": "1.0.1",
     "stylelint-order": "~4.1.0",
-    "typescript": "~4.7.4",
+    "typescript": "~4.8.4",
     "vite": "^2.7.1",
     "vite-plugin-mock": "^2.9.6",
     "vite-svg-loader": "^3.1.0",

From 5840c55300d8b52c3a68cddbafb96ad90128459a Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Thu, 13 Oct 2022 19:04:09 +0800
Subject: [PATCH 22/22] chore: fix dropdown refactor issue (#335)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a79d4f7..651c91f 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "qrcode.vue": "^3.2.2",
     "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",
-    "tdesign-vue-next": "^0.23.0",
+    "tdesign-vue-next": "^0.24.2-alpha.2",
     "tvision-color": "^1.3.1",
     "vue": "^3.2.31",
     "vue-clipboard3": "^2.0.0",