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

.gitattributes

@@ -0,0 +1,6 @@
+*.ts    text eol=lf
+*.vue   text eol=lf
+*.tsx   text eol=lf
+*.jsx   text eol=lf
+*.html  text eol=lf
+*.json  text eol=lf

.github/workflows/pull-request.yml

@@ -1,15 +1,14 @@
-# 文件名建议统一为 pull-request.yml 
+# 文件名建议统一为 pull-request.yml
 # 应用 test-build.yml 的 demo
 
 name: MAIN_PULL_REQUEST
 
 on:
   pull_request:
-    branches: [develop, main]
+    branches: [develop, main, site]
     types: [opened, synchronize, reopened]
 
 jobs:
   call-test-build:
     uses: Tencent/tdesign/.github/workflows/test-build.yml@main
-
-# install lint
+# install lint

.vscode/settings.json

@@ -1,4 +1,6 @@
 {
+  "files.eol":"\n",
+  "editor.tabSize": 2,
   "eslint.format.enable": true,
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],
   "[vue]": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-vue-next-starter",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",

src/layouts/components/Header.vue

@@ -48,7 +48,7 @@
               <template #icon>
                 <t-icon class="header-user-avatar" name="user-circle" />
               </template>
-              <div class="header-user-account">Tencent</div>
+              <div class="header-user-account">{{ user.userInfo.name }}</div>
               <template #suffix><t-icon name="chevron-down" /></template>
             </t-button>
           </t-dropdown>
@@ -71,7 +71,7 @@ import { useRouter } from 'vue-router';
 import LogoFull from '@/assets/assets-logo-full.svg?component';
 import { prefix } from '@/config/global';
 import { getActive } from '@/router';
-import { useSettingStore } from '@/store';
+import { useSettingStore, useUserStore } from '@/store';
 import type { MenuRoute } from '@/types/interface';
 
 import MenuContent from './MenuContent.vue';
@@ -111,6 +111,7 @@ const props = defineProps({
 
 const router = useRouter();
 const settingStore = useSettingStore();
+const user = useUserStore();
 
 const toggleSettingPanel = () => {
   settingStore.updateConfig({

src/main.ts

@@ -1,7 +1,4 @@
-import 'tdesign-vue-next/es/style/index.css';
-import '@/style/index.less';
-import './permission';
-
+/* eslint-disable simple-import-sort/imports */
 import TDesign from 'tdesign-vue-next';
 import { createApp } from 'vue';
 
@@ -9,6 +6,10 @@ import App from './App.vue';
 import router from './router';
 import { store } from './store';
 
+import 'tdesign-vue-next/es/style/index.css';
+import '@/style/index.less';
+import './permission';
+
 const app = createApp(App);
 
 app.use(TDesign);

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

@@ -198,8 +198,8 @@ const onStokeDataChange = (checkedValues: string[]) => {
 
   &__content {
     &-title {
-      font: var(--td-font-headline-medium);
-      font-weight: 400;
+      font-size: var(--td-font-size-headline-medium);
+      line-height: var(--td-line-height-headline-medium);
     }
 
     &-footer {

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

@@ -191,8 +191,8 @@ watch(
     > span {
       display: inline-block;
       color: var(--td-text-color-primary);
-      font: var(--td-font-headline-medium);
-      font-weight: 400;
+      font-size: var(--td-font-size-headline-medium);
+      line-height: var(--td-line-height-headline-medium);
     }
   }
 

src/pages/dashboard/detail/index.vue

@@ -29,7 +29,7 @@
               @change="onMaterialChange"
             />
           </template>
-          <div id="lineContainer" style="width: 100%; height: 412px" />
+          <div id="lineContainer" style="width: 100%; height: 416px" />
         </t-card>
       </t-col>
       <t-col :xs="12" :xl="3">
@@ -37,7 +37,7 @@
           v-for="(item, index) in PRODUCT_LIST"
           :key="index"
           :product="item"
-          :class="{ 'row-margin': index !== 0 }"
+          :class="{ 'row-margin': index !== 0, 'product-card': true }"
         />
       </t-col>
     </t-row>
@@ -166,6 +166,23 @@ const onMaterialChange = (value: string[]) => {
   margin-top: 16px;
 }
 
+.product-card {
+  padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingTB-xl);
+
+  :deep(.t-card__header) {
+    padding: 0;
+  }
+
+  :deep(.t-card__body) {
+    padding: 0;
+    margin-top: var(--td-comp-margin-xxl);
+    margin-bottom: var(--td-comp-margin-xxl);
+  }
+
+  :deep(.t-card__footer) {
+    padding: 0;
+  }
+}
 // 统一增加8px;
 .dashboard-detail-card {
   padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
@@ -223,8 +240,8 @@ const onMaterialChange = (value: string[]) => {
   }
 
   &__number {
-    font: var(--td-font-headline-large);
-    font-weight: 400;
+    font-size: var(--td-font-size-headline-medium);
+    line-height: var(--td-font-size-headline-medium);
     color: var(--td-text-color-primary);
     margin-bottom: var(--td-comp-margin-xxl);
   }

src/pages/detail/advanced/components/Product.vue

@@ -65,7 +65,7 @@ export default defineComponent({
     height: 240px;
 
     .operator-title-icon {
-      background: var(--td-brand-color-focus);
+      background: var(--td-brand-color-light);
       color: var(--td-brand-color);
       font-size: var(--td-comp-size-xxxl);
       padding: calc(var(--td-comp-size-xxxl) - var(--td-comp-size-xl));

src/pages/detail/advanced/index.less

@@ -56,7 +56,7 @@
     border-radius: var(--td-radius-medium);
 
     .product-sub-icon {
-      background: var(--td-brand-color-focus);
+      background: var(--td-brand-color-light);
       color: var(--td-brand-color);
       font-size: var(--td-comp-size-xxxl);
       padding: calc(var(--td-comp-size-xxxl) - var(--td-comp-size-xl));

src/pages/detail/secondary/index.vue

@@ -104,7 +104,7 @@ const setReadStatus = (item: NotificationItem) => {
   const changeMsg = msgData.value;
   changeMsg.forEach((e: NotificationItem) => {
     if (e.id === item.id) {
-      if (e.status) e.status = false;
+      e.status = !e.status;
     }
   });
   store.setMsgData(changeMsg);

src/permission.ts

@@ -4,6 +4,7 @@ import NProgress from 'nprogress'; // progress bar
 import { MessagePlugin } from 'tdesign-vue-next';
 import { RouteRecordRaw } from 'vue-router';
 
+import { TOKEN_NAME } from '@/config/global';
 import router from '@/router';
 import { getPermissionStore, getUserStore } from '@/store';
 import { PAGE_NOT_FOUND_ROUTE } from '@/utils/route/constant';
@@ -17,41 +18,39 @@ router.beforeEach(async (to, from, next) => {
   const { whiteListRouters } = permissionStore;
 
   const userStore = getUserStore();
-  const { token } = userStore;
-  if (token) {
+
+  if (userStore[TOKEN_NAME]) {
     if (to.path === '/login') {
       next();
       return;
     }
-
-    const { asyncRoutes } = permissionStore;
-
-    if (asyncRoutes && asyncRoutes.length === 0) {
-      const routeList = await permissionStore.buildAsyncRoutes();
-      routeList.forEach((item: RouteRecordRaw) => {
-        router.addRoute(item);
-      });
-
-      if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
-        // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
-        next({ path: to.fullPath, replace: true, query: to.query });
-      } else {
-        const redirect = decodeURIComponent((from.query.redirect || to.path) as string);
-        next(to.path === redirect ? { ...to, replace: true } : { path: redirect });
-        return;
-      }
-    }
-
     try {
       await userStore.getUserInfo();
 
+      const { asyncRoutes } = permissionStore;
+
+      if (asyncRoutes && asyncRoutes.length === 0) {
+        const routeList = await permissionStore.buildAsyncRoutes();
+        routeList.forEach((item: RouteRecordRaw) => {
+          router.addRoute(item);
+        });
+
+        if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
+          // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
+          next({ path: to.fullPath, replace: true, query: to.query });
+        } else {
+          const redirect = decodeURIComponent((from.query.redirect || to.path) as string);
+          next(to.path === redirect ? { ...to, replace: true } : { path: redirect });
+          return;
+        }
+      }
       if (router.hasRoute(to.name)) {
         next();
       } else {
         next(`/`);
       }
     } catch (error) {
-      MessagePlugin.error(error);
+      MessagePlugin.error(error.message);
       next({
         path: '/login',
         query: { redirect: encodeURIComponent(to.fullPath) },

src/store/modules/user.ts

@@ -4,12 +4,13 @@ import { TOKEN_NAME } from '@/config/global';
 import { store, usePermissionStore } from '@/store';
 
 const InitUserInfo = {
+  name: '', // 用户名，用于展示在页面右上角头像处
   roles: [], // 前端权限模型使用 如果使用请配置modules/permission-fe.ts使用
 };
 
 export const useUserStore = defineStore('user', {
   state: () => ({
-    token: localStorage.getItem(TOKEN_NAME) || 'main_token', // 默认token不走权限
+    [TOKEN_NAME]: 'main_token', // 默认token不走权限
     userInfo: { ...InitUserInfo },
   }),
   getters: {
@@ -48,7 +49,7 @@ export const useUserStore = defineStore('user', {
 
       const res = await mockLogin(userInfo);
       if (res.code === 200) {
-        this.token = res.data;
+        this.setToken(res.data);
       } else {
         throw res;
       }
@@ -57,7 +58,7 @@ export const useUserStore = defineStore('user', {
       const mockRemoteUserInfo = async (token: string) => {
         if (token === 'main_token') {
           return {
-            name: 'td_main',
+            name: 'Tencent',
             roles: ['all'], // 前端权限模型使用 如果使用请配置modules/permission-fe.ts使用
           };
         }
@@ -66,17 +67,19 @@ export const useUserStore = defineStore('user', {
           roles: ['UserIndex', 'DashboardBase', 'login'], // 前端权限模型使用 如果使用请配置modules/permission-fe.ts使用
         };
       };
-      const res = await mockRemoteUserInfo(this.token);
+      const res = await mockRemoteUserInfo(this[TOKEN_NAME]);
 
       this.userInfo = res;
     },
     async logout() {
-      localStorage.removeItem(TOKEN_NAME);
-      this.token = '';
+      this.removeToken();
       this.userInfo = { ...InitUserInfo };
     },
     async removeToken() {
-      this.token = '';
+      this.setToken('');
+    },
+    async setToken(token: string) {
+      this[TOKEN_NAME] = token;
     },
   },
   persist: {
@@ -84,6 +87,8 @@ export const useUserStore = defineStore('user', {
       const permissionStore = usePermissionStore();
       permissionStore.initRoutes();
     },
+    key: 'user',
+    paths: [TOKEN_NAME],
   },
 });
 

src/style/layout.less

@@ -55,14 +55,6 @@
   background: var(--td-gray-color-13);
 }
 
-.t-default-menu:not(.t-menu--dark) .t-menu__item.t-is-active:not(.t-is-opened) {
-  background-color: var(--td-brand-color-1);
-  color: var(--td-brand-color);
-  .t-icon {
-    color: var(--td-brand-color);
-  }
-}
-
 .@{starter-prefix} {
   // 布局元素调整
   &-wrapper {

src/utils/request/index.ts

@@ -5,6 +5,7 @@ import merge from 'lodash/merge';
 
 import { TOKEN_NAME } from '@/config/global';
 import { ContentTypeEnum } from '@/constants';
+import { getUserStore } from '@/store';
 
 import { VAxios } from './Axios';
 import type { AxiosTransform, CreateAxiosOptions } from './AxiosTransform';
@@ -113,7 +114,9 @@ const transform: AxiosTransform = {
   // 请求拦截器处理
   requestInterceptors: (config, options) => {
     // 请求之前处理config
-    const token = localStorage.getItem(TOKEN_NAME);
+    const userStore = getUserStore();
+    const token = userStore[TOKEN_NAME];
+
     if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
       // jwt token
       (config as Recordable).headers.Authorization = options.authenticationScheme