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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-vue-next-starter",
-  "version": "0.3.0",
+  "version": "0.3.5",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",
@@ -27,7 +27,7 @@
     "qrcode.vue": "^3.2.2",
     "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",
-    "tdesign-vue-next": "0.17.3",
+    "tdesign-vue-next": "0.17.4",
     "tvision-color": "^1.3.1",
     "vue": "^3.2.31",
     "vue-clipboard3": "^2.0.0",

src/api/detail.ts

@@ -0,0 +1,19 @@
+import { request } from '@/utils/request';
+import type { ProjectListResult, PurchaseListResult } from '@/api/model/detailModel';
+
+const Api = {
+  PurchaseList: '/get-purchase-list',
+  ProjectList: '/get-project-list',
+};
+
+export function getPurchaseList() {
+  return request.get<PurchaseListResult>({
+    url: Api.PurchaseList,
+  });
+}
+
+export function getProjectList() {
+  return request.get<ProjectListResult>({
+    url: Api.ProjectList,
+  });
+}

src/api/list.ts

@@ -0,0 +1,19 @@
+import { request } from '@/utils/request';
+import type { CardListResult, ListResult } from '@/api/model/listModel';
+
+const Api = {
+  BaseList: '/get-list',
+  CardList: '/get-card-list',
+};
+
+export function getList() {
+  return request.get<ListResult>({
+    url: Api.BaseList,
+  });
+}
+
+export function getCardList() {
+  return request.get<CardListResult>({
+    url: Api.CardList,
+  });
+}

src/api/model/detailModel.ts

@@ -0,0 +1,23 @@
+export interface PurchaseListResult {
+  list: Array<PurchaseInfo>;
+}
+export interface PurchaseInfo {
+  adminName: string;
+  index: string;
+  pdName: string;
+  pdNum: string;
+  pdType: string;
+  purchaseNum: number;
+  updateTime: Date;
+}
+
+export interface ProjectListResult {
+  list: Array<ProjectInfo>;
+}
+export interface ProjectInfo {
+  adminName: string;
+  adminPhone: string;
+  index: number;
+  name: string;
+  updateTime: Date;
+}

src/api/model/listModel.ts

@@ -0,0 +1,26 @@
+export interface ListResult {
+  list: Array<ListModel>;
+}
+export interface ListModel {
+  adminName: string;
+  amount: string;
+  contractType: number;
+  index: number;
+  name: string;
+  no: string;
+  paymentType: number;
+  status: number;
+  updateTime: Date;
+}
+
+export interface CardListResult {
+  list: Array<CardList>;
+}
+export interface CardList {
+  banner: string;
+  description: string;
+  index: number;
+  isSetup: boolean;
+  name: string;
+  type: number;
+}

src/layouts/components/Breadcrumb.vue

@@ -17,6 +17,11 @@ const crumbs = computed(() => {
   pathArray.shift();
 
   const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
+    // 如果路由下有hiddenBreadcrumb或当前遍历到参数则隐藏
+    if (route.matched[idx]?.meta?.hiddenBreadcrumb || Object.values(route.params).includes(path)) {
+      return breadcrumbArray;
+    }
+
     breadcrumbArray.push({
       path,
       to: breadcrumbArray[idx - 1] ? `/${breadcrumbArray[idx - 1].path}/${path}` : `/${path}`,

src/layouts/components/MenuContent.tsx

@@ -7,6 +7,10 @@ const getMenuList = (list: MenuRoute[], basePath?: string): MenuRoute[] => {
   if (!list) {
     return [];
   }
+  // 如果meta中有orderNo则按照从小到大排序
+  list.sort((a, b) => {
+    return (a.meta?.orderNo || 0) - (b.meta?.orderNo || 0);
+  });
   return list
     .map((item) => {
       const path = basePath ? `${basePath}/${item.path}` : item.path;

src/layouts/components/Notice.vue

@@ -37,7 +37,7 @@
         </div>
       </div>
     </template>
-    <t-badge :count="unreadMsg.length" :offset="[15, 21]">
+    <t-badge :count="unreadMsg.length" :offset="[12, 8]">
       <t-button theme="default" shape="square" variant="text">
         <t-icon name="mail" />
       </t-button>

src/pages/dashboard/base/index.ts

@@ -41,14 +41,10 @@ export function constructInitDashboardDataset(type: string) {
               { type: 'min', name: '最小值' },
             ],
           },
-          itemStyle: {
-            normal: {
           lineStyle: {
             width: 2,
           },
         },
-          },
-        },
       ],
     };
     return lineDataset;
@@ -278,17 +274,13 @@ export function getLineChartDataSet({
         symbol: 'circle',
         symbolSize: 8,
         itemStyle: {
-          normal: {
           borderColor,
           borderWidth: 1,
         },
-        },
         areaStyle: {
-          normal: {
           opacity: 0.1,
         },
       },
-      },
       {
         name: '上月',
         data: inArray,
@@ -298,12 +290,10 @@ export function getLineChartDataSet({
         symbol: 'circle',
         symbolSize: 8,
         itemStyle: {
-          normal: {
           borderColor,
           borderWidth: 1,
         },
       },
-      },
     ],
   };
   return dataSet;
@@ -352,7 +342,6 @@ export function getPieChartDataSet({
         radius: ['48%', '60%'],
         avoidLabelOverlap: true,
         selectedMode: true,
-        hoverAnimation: true,
         silent: true,
         itemStyle: {
           borderColor: containerColor,
@@ -377,6 +366,7 @@ export function getPieChartDataSet({
           },
         },
         emphasis: {
+          scale: true,
           label: {
             show: true,
             formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),

src/pages/dashboard/detail/index.ts

@@ -188,12 +188,10 @@ export function getFolderLineDataSet({
         ],
         type: 'line',
         itemStyle: {
-          normal: {
           borderColor,
           borderWidth: 1,
         },
       },
-      },
       {
         showSymbol: true,
         symbol: 'circle',
@@ -211,12 +209,10 @@ export function getFolderLineDataSet({
         ],
         type: 'line',
         itemStyle: {
-          normal: {
           borderColor,
           borderWidth: 1,
         },
       },
-      },
       {
         showSymbol: true,
         symbol: 'circle',
@@ -234,12 +230,10 @@ export function getFolderLineDataSet({
         ],
         type: 'line',
         itemStyle: {
-          normal: {
           borderColor,
           borderWidth: 1,
         },
       },
-      },
       {
         showSymbol: true,
         symbol: 'circle',
@@ -257,12 +251,10 @@ export function getFolderLineDataSet({
         ],
         type: 'line',
         itemStyle: {
-          normal: {
           borderColor,
           borderWidth: 1,
         },
       },
-      },
     ],
   };
 }

src/pages/detail/advanced/index.vue

@@ -120,8 +120,7 @@ export default {
 import { ref, onMounted } from 'vue';
 import { prefix } from '@/config/global';
 import { BASE_INFO_DATA, TABLE_COLUMNS_DATA as columns, PRODUCT_LIST } from './constants';
-import { request } from '@/utils/request';
-import { ResDataType } from '@/types/interface';
+import { getPurchaseList } from '@/api/detail';
 
 import Product from './components/Product.vue';
 
@@ -145,15 +144,12 @@ const stepUpdate = () => {
 
 const fetchData = async () => {
   try {
-    const res: ResDataType = await request.get({ url: '/api/get-purchase-list' });
-    if (res.code === 0) {
-      const { list = [] } = res.data;
+    const { list } = await getPurchaseList();
     data.value = list;
     pagination.value = {
       ...pagination.value,
       total: list.length,
     };
-    }
   } catch (e) {
     console.log(e);
   }

src/pages/detail/deploy/index.ts

@@ -82,11 +82,9 @@ export function getSmoothLineDataSet({
         symbol: 'circle',
         symbolSize: 8,
         areaStyle: {
-          normal: {
           opacity: 0.1,
         },
       },
-      },
       {
         name: '本月',
         data: [

src/pages/detail/deploy/index.vue

@@ -89,8 +89,7 @@ import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
 import { changeChartsTheme } from '@/utils/color';
 
 import { prefix } from '@/config/global';
-import { ResDataType } from '@/types/interface';
-import { request } from '@/utils/request';
+import { getProjectList } from '@/api/detail';
 
 echarts.use([
   TitleComponent,
@@ -115,15 +114,12 @@ const pagination = ref({
 
 const fetchData = async () => {
   try {
-    const res: ResDataType = await request.get({ url: '/api/get-project-list' });
-    if (res.code === 0) {
-      const { list = [] } = res.data;
+    const { list } = await getProjectList();
     data.value = list;
     pagination.value = {
       ...pagination.value,
       total: list.length,
     };
-    }
   } catch (e) {
     console.log(e);
   }

src/pages/list/base/index.vue

@@ -81,8 +81,7 @@ import { MessagePlugin } from 'tdesign-vue-next';
 
 import { CONTRACT_STATUS, CONTRACT_TYPES, CONTRACT_PAYMENT_TYPES } from '@/constants';
 import Trend from '@/components/trend/index.vue';
-import { ResDataType } from '@/types/interface';
-import { request } from '@/utils/request';
+import { getList } from '@/api/list';
 import { useSettingStore } from '@/store';
 
 import { COLUMNS } from './constants';
@@ -102,15 +101,12 @@ const dataLoading = ref(false);
 const fetchData = async () => {
   dataLoading.value = true;
   try {
-    const res: ResDataType = await request.get({ url: '/api/get-list' });
-    if (res.code === 0) {
-      const { list = [] } = res.data;
+    const { list } = await getList();
     data.value = list;
     pagination.value = {
       ...pagination.value,
       total: list.length,
     };
-    }
   } catch (e) {
     console.log(e);
   } finally {

src/pages/list/card/index.vue

@@ -73,8 +73,7 @@ import { SearchIcon } from 'tdesign-icons-vue-next';
 import { MessagePlugin } from 'tdesign-vue-next';
 import ProductCard from '@/components/product-card/index.vue';
 import DialogForm from './components/DialogForm.vue';
-import { request } from '@/utils/request';
-import { ResDataType } from '@/types/interface';
+import { getCardList } from '@/api/list';
 
 const INITIAL_DATA = {
   name: '',
@@ -93,15 +92,12 @@ const dataLoading = ref(true);
 
 const fetchData = async () => {
   try {
-    const res: ResDataType = await request.get({ url: '/api/get-card-list' });
-    if (res.code === 0) {
-      const { list = [] } = res.data;
+    const { list } = await getCardList();
     productList.value = list;
     pagination.value = {
       ...pagination.value,
       total: list.length,
     };
-    }
   } catch (e) {
     console.log(e);
   } finally {

src/pages/list/components/CommonTable.vue

@@ -116,8 +116,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import Trend from '@/components/trend/index.vue';
-import { request } from '@/utils/request';
-import { ResDataType } from '@/types/interface';
+import { getList } from '@/api/list';
 import { useSettingStore } from '@/store';
 
 import {
@@ -198,15 +197,12 @@ const dataLoading = ref(false);
 const fetchData = async () => {
   dataLoading.value = true;
   try {
-    const res: ResDataType = await request.get({ url: '/api/get-list' });
-    if (res.code === 0) {
-      const { list = [] } = res.data;
+    const { list } = await getList();
     data.value = list;
     pagination.value = {
       ...pagination.value,
       total: list.length,
     };
-    }
   } catch (e) {
     console.log(e);
   } finally {

src/pages/user/index.ts

@@ -77,12 +77,10 @@ export function getFolderLineDataSet({
         ],
         type: 'line',
         itemStyle: {
-          normal: {
           borderColor,
           borderWidth: 1,
         },
       },
-      },
       {
         showSymbol: true,
         symbol: 'circle',
@@ -100,12 +98,10 @@ export function getFolderLineDataSet({
         ],
         type: 'line',
         itemStyle: {
-          normal: {
           borderColor,
           borderWidth: 1,
         },
       },
-      },
       {
         showSymbol: true,
         symbol: 'circle',
@@ -123,12 +119,10 @@ export function getFolderLineDataSet({
         ],
         type: 'line',
         itemStyle: {
-          normal: {
           borderColor,
           borderWidth: 1,
         },
       },
-      },
       {
         showSymbol: true,
         symbol: 'circle',
@@ -146,12 +140,10 @@ export function getFolderLineDataSet({
         ],
         type: 'line',
         itemStyle: {
-          normal: {
           borderColor,
           borderWidth: 1,
         },
       },
-      },
     ],
   };
 }

src/router/index.ts

@@ -1,13 +1,21 @@
 import { useRoute, createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 
-import baseRouters from './modules/base';
-import componentsRouters from './modules/components';
-import othersRouters from './modules/others';
+// 自动导入modules文件夹下所有ts文件
+const modules = import.meta.globEager('./modules/**/*.ts');
+
+// 路由暂存
+const routeModuleList: Array<RouteRecordRaw> = [];
+
+Object.keys(modules).forEach((key) => {
+  const mod = modules[key].default || {};
+  const modList = Array.isArray(mod) ? [...mod] : [mod];
+  routeModuleList.push(...modList);
+});
 
 // 关于单层路由，meta 中设置 { single: true } 即可为单层路由，{ hidden: true } 即可在侧边栏隐藏该路由
 
 // 存放动态路由
-export const asyncRouterList: Array<RouteRecordRaw> = [...baseRouters, ...componentsRouters, ...othersRouters];
+export const asyncRouterList: Array<RouteRecordRaw> = [...routeModuleList];
 
 // 存放固定的路由
 const defaultRouterList: Array<RouteRecordRaw> = [

src/types/axios.d.ts

@@ -19,9 +19,7 @@ export interface RequestOptions {
 
 export interface Result<T = any> {
   code: number;
-  type: 'success' | 'error' | 'warning';
-  message: string;
-  result: T;
+  data: T;
 }
 
 export interface AxiosRequestConfigRetry extends AxiosRequestConfig {

src/types/globals.d.ts

@@ -10,13 +10,6 @@ declare module '*.vue' {
 
 declare type ClassName = { [className: string]: any } | ClassName[] | string;
 
-declare interface ImportMeta {
-  env: {
-    MODE: 'mock' | 'development' | 'test' | 'release';
-  };
-  glob: (url: string) => { url };
-}
-
 declare module '*.svg' {
   const CONTENT: string;
   export default CONTENT;

src/types/interface.d.ts

@@ -1,11 +1,6 @@
 import { RouteRecordName } from 'vue-router';
 import STYLE_CONFIG from '@/config/style';
 
-export interface ResDataType {
-  code: number;
-  data: any;
-}
-
 export interface MenuRoute {
   path: string;
   title?: string;

src/utils/request/index.ts

@@ -40,16 +40,16 @@ const transform: AxiosTransform = {
       throw new Error('请求接口错误');
     }
 
-    //  这里 message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
-    const { message } = data;
+    //  这里 code为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
+    const { code } = data;
 
     // 这里逻辑可以根据项目进行修改
-    const hasSuccess = data && !Reflect.has(data, 'error');
+    const hasSuccess = data && code === 0;
     if (hasSuccess) {
-      return data;
+      return data.data;
     }
 
-    throw new Error(message);
+    throw new Error(`请求接口错误, 错误码: ${code}`);
   },
 
   // 请求前处理配置
@@ -162,7 +162,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           // 接口地址
           apiUrl: host,
           // 是否自动添加接口前缀
-          isJoinPrefix: false,
+          isJoinPrefix: true,
           // 接口前缀
           // 例如: https://www.baidu.com/api
           // urlPrefix: '/api'

tsconfig.json

@@ -7,7 +7,10 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
     "lib": ["esnext", "dom"],
+    "types": ["vite/client"],
     "noEmit": true,
     "baseUrl": "./",
     "paths": {