chore: sync main for develop (#549)

* feat: upgrade vite4 (#533)

* chore: 升级vite4

* docs: 项目简介 修改

* fix: 打包后预览提示TypeError

* chore: @vitejs/plugin-vue,@vitejs/plugin-vue-jsx升级

* docs: 项目简介 修改

* fix: 204无内容直接返回判断 (#539)

* feat(axios util): support params stringify (#544)

* fix(permission store): clear routes when logout (#545)

fix #541

* chore: release 0.7.7 (#548)

* chore: release 0.7.7

* chore: dump tdesign version

---------

Co-authored-by: liweijie0812 <674416404@qq.com>
Co-authored-by: ngyyuusora <jiliangsoft@live.com>

README-zh_CN.md

@@ -19,7 +19,7 @@
 
 ### 项目简介
 
-TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite2`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
+TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
 
 <p>
   <a href="http://tdesign.tencent.com/starter/vue-next/">在线预览</a>

README.md

@@ -17,7 +17,7 @@
 English | [简体中文](./README-zh_CN.md) 
 ### Introduction
 
-TDesign Vue Next Starter is a TDesign-based developed with `Vue 3`, `Vite 3+`, `Pinia`, `TypeScript`. It 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 `Vue 3`, `Vite`, `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>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencent/tdesign-vue-next-starter",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",
@@ -19,8 +19,8 @@
     "test:coverage": "echo \"no test:coverage specified,work in process\""
   },
   "dependencies": {
-    "axios": "^1.3.4",
-    "dayjs": "^1.11.7",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.8",
     "echarts": "5.1.2",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
@@ -29,11 +29,11 @@
     "qrcode.vue": "^3.3.4",
     "qs": "^6.11.1",
     "tdesign-icons-vue-next": "^0.1.11",
-    "tdesign-vue-next": "^1.3.4",
+    "tdesign-vue-next": "^1.3.8",
     "tvision-color": "^1.6.0",
-    "vue": "^3.2.47",
+    "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
-    "vue-router": "~4.1.6"
+    "vue-router": "~4.2.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.3.0",
@@ -44,8 +44,8 @@
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.47.1",
     "@typescript-eslint/parser": "^5.47.1",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vitejs/plugin-vue": "^4.2.3 ",
+    "@vitejs/plugin-vue-jsx": "^3.0.1 ",
     "@vue/compiler-sfc": "^3.2.47",
     "@vue/eslint-config-typescript": "^11.0.2",
     "commitizen": "^4.2.4",
@@ -70,10 +70,10 @@
     "stylelint-less": "1.0.6",
     "stylelint-order": "~6.0.1",
     "typescript": "~4.9.5",
-    "vite": "^3.2.5",
+    "vite": "^4.3.9",
     "vite-plugin-mock": "^2.9.6",
     "vite-svg-loader": "^4.0.0",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.8.2"
   },
   "config": {
     "commitizen": {

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

@@ -15,7 +15,6 @@
         </template>
         <div
           id="monitorContainer"
-          ref="monitorContainer"
           class="dashboard-chart-container"
           :style="{ width: '100%', height: `${resizeTime * 326}px` }"
         />
@@ -25,7 +24,6 @@
       <t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card" :bordered="false">
         <div
           id="countContainer"
-          ref="countContainer"
           :style="{ width: `${resizeTime * 326}px`, height: `${resizeTime * 326}px`, margin: '0 auto' }"
           class="dashboard-chart-container"
         />

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

@@ -17,12 +17,7 @@
               @change="onStokeDataChange"
             />
           </template>
-          <div
-            id="stokeContainer"
-            ref="stokeContainer"
-            style="width: 100%; height: 351px"
-            class="dashboard-chart-container"
-          ></div>
+          <div id="stokeContainer" style="width: 100%; height: 351px" class="dashboard-chart-container"></div>
         </t-card>
       </t-col>
       <t-col :xs="12" :xl="3">

src/store/modules/permission.ts

@@ -37,9 +37,13 @@ export const usePermissionStore = defineStore('permission', {
       }
     },
     async restoreRoutes() {
-      this.removeRoutes.forEach((item: RouteRecordRaw) => {
-        router.addRoute(item);
+      // 不需要在此额外调用initRoutes更新侧边导肮内容，在登录后asyncRoutes为空会调用
+      this.asyncRoutes.forEach((item: RouteRecordRaw) => {
+        if (item.name) {
+          router.removeRoute(item.name);
+        }
       });
+      this.asyncRoutes = [];
     },
   },
 });

src/utils/request/Axios.ts

@@ -118,6 +118,21 @@ export class VAxios {
     };
   }
 
+  // 支持params数组参数格式化
+  supportParamsStringify(config: AxiosRequestConfig) {
+    const headers = config.headers || this.options.headers;
+    const contentType = headers?.['Content-Type'] || headers?.['content-type'];
+
+    if (contentType === ContentTypeEnum.FormURLEncoded || !Reflect.has(config, 'params')) {
+      return config;
+    }
+
+    return {
+      ...config,
+      paramsSerializer: (params: any) => stringify(params, { arrayFormat: 'brackets' }),
+    };
+  }
+
   get<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
     return this.request({ ...config, method: 'GET' }, options);
   }
@@ -154,6 +169,8 @@ export class VAxios {
     conf.requestOptions = opt;
 
     conf = this.supportFormData(conf);
+    // 支持params数组参数格式化，因axios默认的toFormData即为brackets方式，无需配置paramsSerializer为qs，有需要可解除注释，参数参考qs文档
+    // conf = this.supportParamsStringify(conf);
 
     return new Promise((resolve, reject) => {
       this.instance

src/utils/request/index.ts

@@ -23,7 +23,7 @@ const transform: AxiosTransform = {
 
     // 如果204无内容直接返回
     const method = res.config.method?.toLowerCase();
-    if (res.status === 204 || method === 'put' || method === 'patch') {
+    if (res.status === 204 && ['put', 'patch', 'delete'].includes(method)) {
       return res;
     }