From 75df4f1672dd4acd61661e4048ef1b9dc429ffb2 Mon Sep 17 00:00:00 2001
From: PY <pengyue970715@gmail.com>
Date: Fri, 26 Nov 2021 10:45:04 +0800
Subject: [PATCH] Feat/updateconfig (#2)

* feat: update eslint config and npmpkg

* feat: update color config

* feat: eslint update

* feat: update ts config

Co-authored-by: yue.peng <yue.peng@ly.com>
Co-authored-by: pengYYYYY <pengyue970715@gmail.com>
---
 .eslintignore                                 |  21 +-
 globals.d.ts                                  |   3 -
 index.html                                    |   2 +-
 src/App.vue                                   |   4 +-
 src/components/card/index.vue                 |   4 +-
 src/components/result/index.vue               |  29 +-
 src/components/thumbnail/index.vue            |   3 +-
 src/components/trend/index.vue                |  10 +-
 src/config/color.ts                           |   6 +-
 src/config/routes.ts                          |  14 +-
 src/config/style.ts                           |   2 +-
 src/interface.ts                              |  12 +-
 src/pages/dashboard/base/index.less           |  45 +-
 src/pages/dashboard/base/index.ts             | 657 ++++++++++++------
 src/pages/dashboard/detail/constants.ts       |  17 +-
 .../detail/advanced/components/Product.vue    |  14 +-
 src/pages/detail/advanced/constants.ts        |  15 +-
 src/pages/detail/advanced/index.vue           |  10 +-
 src/pages/detail/base/index.less              |   2 +-
 src/pages/detail/base/index.vue               |   8 +-
 src/pages/detail/deploy/constants.ts          |  10 +-
 src/pages/detail/secondary/index.less         |   2 +-
 src/pages/detail/secondary/index.vue          |  19 +-
 src/pages/form/base/index.less                |   2 +-
 src/pages/form/step/index.less                |   2 +-
 src/pages/form/step/index.vue                 |  69 +-
 src/pages/list/base/constants.ts              |   7 +-
 src/pages/list/filter/index.vue               |   3 +-
 src/pages/login/components/Register.vue       |  10 +-
 src/pages/login/index.vue                     |   8 +-
 src/pages/result/fail/index.vue               |  18 +-
 src/pages/result/success/index.vue            |  21 +-
 src/router/index.ts                           |   5 +-
 src/store/modules/notification.ts             |  11 +-
 src/store/modules/setting.ts                  |  53 +-
 src/style/index.less                          |   6 +-
 src/style/{sidenav.less => side-nav.less}     |   4 +-
 src/style/theme/cyan.less                     |  13 +
 src/style/theme/dark.less                     | 164 +++++
 src/style/theme/green.less                    |  14 +
 src/style/theme/index.less                    |  17 +
 src/style/theme/light.less                    | 169 +++++
 src/style/theme/orange.less                   |  14 +
 src/style/theme/pink.less                     |  14 +
 src/style/theme/purple.less                   |  14 +
 src/style/theme/red.less                      |  14 +
 src/style/theme/yellow.less                   |  14 +
 src/utils/date.ts                             |   4 +-
 src/utils/hooks.ts                            |  53 +-
 src/utils/request.js                          |   4 +-
 tsconfig.json                                 |   7 +-
 vite.config.ts                                |  22 -
 52 files changed, 1162 insertions(+), 503 deletions(-)
 rename src/style/{sidenav.less => side-nav.less} (96%)
 create mode 100644 src/style/theme/cyan.less
 create mode 100644 src/style/theme/dark.less
 create mode 100644 src/style/theme/green.less
 create mode 100644 src/style/theme/index.less
 create mode 100644 src/style/theme/light.less
 create mode 100644 src/style/theme/orange.less
 create mode 100644 src/style/theme/pink.less
 create mode 100644 src/style/theme/purple.less
 create mode 100644 src/style/theme/red.less
 create mode 100644 src/style/theme/yellow.less

diff --git a/.eslintignore b/.eslintignore
index 9313def..4d7f6e3 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,29 +2,12 @@ snapshot*
 dist
 lib
 es
+esm
 node_modules
-common
+src/_common
 static
 cypress
 script/test/cypress
 _site
 temp*
 static/
-
-examples
-site/*
-!site/v3.js
-src/addon
-src/calendar
-src/locale
-src/upload
-src/dropdown
-src/transfer
-src/time-picker
-src/utils
-src/textarea
-typings
-dist
-es
-lib
-types
\ No newline at end of file
diff --git a/globals.d.ts b/globals.d.ts
index e27917c..4533b3f 100644
--- a/globals.d.ts
+++ b/globals.d.ts
@@ -1,4 +1,3 @@
-
 // 通用声明
 declare type ClassName = { [className: string]: any } | ClassName[] | string;
 
@@ -13,5 +12,3 @@ declare module '*.svg' {
   const CONTENT: string;
   export default CONTENT;
 }
-
-
diff --git a/index.html b/index.html
index 24f381e..48b146e 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TDesign Starter Vue Next</title>
+    <title>TDesign Vue Next Starter</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 59cb0aa..f7d008e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,4 @@
 <template>
   <router-view />
 </template>
-<script>
-</script>
-
+<script></script>
diff --git a/src/components/card/index.vue b/src/components/card/index.vue
index adc5bc3..3ffd5b9 100644
--- a/src/components/card/index.vue
+++ b/src/components/card/index.vue
@@ -90,7 +90,7 @@ export default defineComponent({
   &-container {
     padding: 24px 32px;
     margin: 16px 0;
-    background: #fff;
+    background: @bg-color-container;
     border-radius: @border-radius;
     width: 100%;
     display: flex;
@@ -135,7 +135,7 @@ export default defineComponent({
 
   &-describe {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
+    color: @bg-color-container;
     line-height: 22px;
   }
 
diff --git a/src/components/result/index.vue b/src/components/result/index.vue
index 1f5bf55..4aece28 100644
--- a/src/components/result/index.vue
+++ b/src/components/result/index.vue
@@ -1,32 +1,29 @@
 <template>
-  <card>
-    <div class="result-container">
-      <img class="result-bg-img" :src="bgUrl">
-      <div class="result-tip">
-        {{ tip }}
-      </div>
-      <div>
-        <router-link class="tdesign-pro-main-link" to="/">
-          <t-button theme="primary" variant="text">
-            返回首页
-          </t-button>
-        </router-link>
-      </div>
+  <div class="result-container">
+    <img class="result-bg-img" :src="bgUrl" />
+    <div class="result-title">
+      {{ title }}
     </div>
-  </card>
+    <div class="result-tip">
+      {{ tip }}
+    </div>
+    <slot />
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import Card from '@/components/card/index.vue';
 
 export default defineComponent({
   name: 'Result',
-  components: { Card },
   props: {
     bgUrl: {
       type: String as PropType<string>,
       default: '',
     },
+    title: {
+      type: String as PropType<string>,
+      default: '',
+    },
     tip: {
       type: String as PropType<string>,
       default: '',
diff --git a/src/components/thumbnail/index.vue b/src/components/thumbnail/index.vue
index f60db5d..74b1442 100644
--- a/src/components/thumbnail/index.vue
+++ b/src/components/thumbnail/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <img :class="className" :src="url">
+  <img :class="className" :src="url" />
 </template>
 <script lang="ts">
 import { defineComponent, computed, PropType } from 'vue';
@@ -35,7 +35,6 @@ export default defineComponent({
 @import url('@/style/index.less');
 
 .thumbnail {
-
   &-container {
     display: inline-block;
   }
diff --git a/src/components/trend/index.vue b/src/components/trend/index.vue
index ad0e045..834f1d0 100644
--- a/src/components/trend/index.vue
+++ b/src/components/trend/index.vue
@@ -12,14 +12,7 @@
         <path d="M11.5 8L8 11.5L4.5 8" stroke="currentColor" stroke-width="1.5" />
         <path d="M8 11L8 4" stroke="currentColor" stroke-width="1.5" />
       </svg>
-      <svg
-        v-else
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4.5 8L8 4.5L11.5 8" stroke="currentColor" stroke-width="1.5" />
         <path d="M8 5V12" stroke="currentColor" stroke-width="1.5" />
       </svg>
@@ -70,6 +63,7 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
+@import '@/style/variables.less';
 .trend {
   &-container {
     &__up {
diff --git a/src/config/color.ts b/src/config/color.ts
index 1e50788..3434779 100644
--- a/src/config/color.ts
+++ b/src/config/color.ts
@@ -52,8 +52,8 @@ const COLOR_TOKEN: ColorSeries = {
   },
   CYAN: {
     '@brand-color': '#0594FA',
-    '@brand-color-1': '#ECF2FE',
-    '@brand-color-2': '#D4E3FC',
+    '@brand-color-1': '#D6F7FF',
+    '@brand-color-2': '#85DAFF',
     '@brand-color-3': '#BBD3FB',
     '@brand-color-4': '#96BBF8',
     '@brand-color-5': '#699EF5',
@@ -159,7 +159,7 @@ export function getBrandColor(type: string): ColorToken {
 
 export function getColorList(colorArray: ColorToken[]): string[] {
   const pureColorList = [];
-  colorArray.map(colorToken => Object.keys(colorToken).map(key => pureColorList.push(colorToken[key])));
+  colorArray.map((colorToken) => Object.keys(colorToken).map((key) => pureColorList.push(colorToken[key])));
 
   return pureColorList;
 }
diff --git a/src/config/routes.ts b/src/config/routes.ts
index 340c16f..788d532 100644
--- a/src/config/routes.ts
+++ b/src/config/routes.ts
@@ -3,7 +3,7 @@ export default [
     path: '/dashboard',
     icon: 'dashboard',
     title: '仪表盘',
-    component: '../Layouts/index.tsx',
+    component: '../layouts/index.tsx',
     redirect: '/dashboard/base',
     children: [
       {
@@ -22,7 +22,7 @@ export default [
     path: '/list',
     icon: 'view-module',
     title: '列表页',
-    component: '../Layouts/index.tsx',
+    component: '../layouts/index.tsx',
     redirect: '/list/base',
     children: [
       {
@@ -51,7 +51,7 @@ export default [
     path: '/form',
     icon: 'queue',
     title: '表单页',
-    component: '../Layouts/index.tsx',
+    component: '../layouts/index.tsx',
     redirect: '/form/base',
     children: [
       {
@@ -70,7 +70,7 @@ export default [
     path: '/detail',
     icon: 'layers',
     title: '详情页',
-    component: '../Layouts/index.tsx',
+    component: '../layouts/index.tsx',
     redirect: '/detail/base',
     children: [
       {
@@ -101,7 +101,7 @@ export default [
     path: '/result',
     icon: 'check-circle',
     title: '结果页',
-    component: '../Layouts/index.tsx',
+    component: '../layouts/index.tsx',
     redirect: '/result/success',
     children: [
       {
@@ -145,7 +145,7 @@ export default [
     path: '/user',
     icon: 'user-circle',
     title: '个人页',
-    component: '../Layouts/index.tsx',
+    component: '../layouts/index.tsx',
     redirect: '/user/index',
     children: [
       {
@@ -159,7 +159,7 @@ export default [
   {
     path: '/login',
     title: '登录页',
-    component: '../Layouts/blank.vue',
+    component: '../layouts/blank.vue',
     icon: 'chevron-right-rectangle',
     redirect: '/login/index',
     children: [
diff --git a/src/config/style.ts b/src/config/style.ts
index fca9821..6f700ef 100644
--- a/src/config/style.ts
+++ b/src/config/style.ts
@@ -2,7 +2,7 @@ export default {
   showFooter: true,
   isSidebarCompact: false,
   showBreadcrumb: false,
-  theme: 'dark',
+  mode: 'light',
   layout: 'side',
   splitMenu: false,
   isFooterAside: false,
diff --git a/src/interface.ts b/src/interface.ts
index ee7ed05..0a8d3bc 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -1,6 +1,8 @@
+import STYLE_CONFIG from '@/config/style';
+
 export interface ResDataType {
-  code: number,
-  data: any
+  code: number;
+  data: any;
 }
 
 export interface MenuRoute {
@@ -9,3 +11,9 @@ export interface MenuRoute {
   icon?: string;
   children: MenuRoute[];
 }
+
+export type ModeType = 'dark' | 'light';
+
+export type SettingType = typeof STYLE_CONFIG;
+
+export type ClassName = { [className: string]: any } | ClassName[] | string;
diff --git a/src/pages/dashboard/base/index.less b/src/pages/dashboard/base/index.less
index a036bd9..161eee6 100644
--- a/src/pages/dashboard/base/index.less
+++ b/src/pages/dashboard/base/index.less
@@ -1,18 +1,42 @@
 @import '@/style/index';
 
 @media (max-width: @screen-md-max) {
-
-
 }
 
 .t-tabs__content {
   padding-top: @spacer-3;
 }
 
+.card-title-text-default {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.card-option {
+  display: flex;
+  width: 100%;
+  align-items: center !important;
+  justify-content: right !important;
+
+  .dashboard-chart-title-left {
+    display: flex;
+    justify-content: left;
+    align-self: left;
+    width: 100%;
+    color: rgba(0, 0, 0, .4);
+    font-size: 15px;
+    padding-left: 8px;
+  }
+}
+
 .dashboard-panel {
   padding: 0;
   border-radius: @border-radius;
 
+  >div {
+    padding: 4px;
+  }
+
   .card-container {
 
     .card-content {
@@ -21,6 +45,10 @@
         color: @text-color-primary;
         padding-bottom: 4px;
       }
+
+      .t-table-content {
+        overflow: auto;
+      }
     }
 
     .t-table th,
@@ -50,7 +78,6 @@
     flex-direction: row;
     align-items: flex-start;
 
-
     > span {
       display: inline-block;
       color: black;
@@ -64,12 +91,12 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  
+  align-items: center;
+
   > .t-icon {
     cursor: pointer;
     color: inherit;
   }
-
 }
 
 
@@ -106,9 +133,7 @@
         border-radius: @border-radius;
         margin-left: 16px;
         width: 100%;
-        // min-width: 300px;
         height: 320px;
-
       }
     }
 
@@ -257,12 +282,12 @@
     justify-content: center;
     width: 56px;
     height: 56px;
-    background: #ECF2FE;
+    background: @brand-color-1;
     border-radius: 50%;
 
     .t-icon {
       font-size: 24px;
-      color: #0052D9;
+      color: @brand-color;
     }
   }
 }
@@ -291,7 +316,7 @@
 }
 
 .overview-pannel {
-  background-color: white;
+  background-color: @bg-color-container;
   border-radius: 3px;
 }
 
diff --git a/src/pages/dashboard/base/index.ts b/src/pages/dashboard/base/index.ts
index 47e8f6c..22c95f3 100644
--- a/src/pages/dashboard/base/index.ts
+++ b/src/pages/dashboard/base/index.ts
@@ -1,8 +1,40 @@
-import { getBrandColor } from '@/config/color';
 import dayjs, { Dayjs } from 'dayjs';
+import * as echarts from 'echarts/core';
+import { getBrandColor } from '@/config/color';
+import store from '@/store';
+
+const { state } = store;
+
+/**
+ * 依据主题类型获取颜色
+ *
+ * @export
+ * @param {string} theme
+ * @returns {}
+ */
+export function getColorFromTheme(theme: string) {
+  const themeColor = getBrandColor(theme);
+  const themeColorList: Array<string> = [];
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const key in themeColor) {
+    if (Object.prototype.hasOwnProperty.call(themeColor, key)) {
+      const elementColor = themeColor[key];
+
+      themeColorList.push(elementColor);
+    }
+  }
+
+  return themeColorList;
+}
 
 /** 图表颜色 */
-let chartListColor: Array<string> = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F'];
+function chartListColor(): Array<string> {
+  const colorList: Array<string> = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F'];
+  const { setting } = state;
+
+  return getColorFromTheme(setting.brandTheme) || colorList;
+}
 
 /**
  * 获取表头数据
@@ -24,20 +56,6 @@ export function getDateArray(dateTime: string[] = [], divideNum = 10): string[]
 
   return timeArray;
 }
-export class DashboardBase {
-  /** 更新容器尺寸 */
-  setContainerSize(containerCopyValue: HTMLElement, absWidth = 0, absHeight = 0): void {
-    const container = containerCopyValue;
-    try {
-      if (container && container.style && container.parentElement) {
-        container.style.width = `${container.parentElement.clientWidth - absWidth}px`;
-        container.style.height = `${container.parentElement.clientHeight - absHeight}px`;
-      }
-    } catch (error) {
-      // hook
-    }
-  }
-}
 
 /**
  * 获取随机数
@@ -47,7 +65,7 @@ export class DashboardBase {
  *
  * @memberOf DashboardBase
  */
-export function getRandomArray(num = 100): number {
+export function getRandomArray(num = 100) {
   let resultNum = Number((Math.random() * num).toFixed(0));
 
   if (resultNum <= 1) {
@@ -86,51 +104,66 @@ export function constructInitDashbordDataset(type: string) {
         {
           data: [150, 230, 224, 218, 135, 147, 260],
           type,
+          showSymbol: true,
+          symbol: 'circle',
+          symbolSize: 0,
+          markPoint: {
+            data: [
+              { type: 'max', name: '最大值' },
+              { type: 'min', name: '最小值' },
+            ],
+          },
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
         },
       ],
     };
     return lineDataset;
   }
-  if (type === 'bar') {
-    const barDataset = {
-      ...datasetAxis,
-      color: chartListColor,
-      series: [
-        {
-          data: [
-            100,
-            130,
-            184,
-            218,
-            {
-              value: 135,
-              itemStyle: {
-                color: '#ECF2FE',
-              },
+  const barDataset = {
+    ...datasetAxis,
+    color: chartListColor(),
+    series: [
+      {
+        data: [
+          100,
+          130,
+          184,
+          218,
+          {
+            value: 135,
+            itemStyle: {
+              color: chartListColor()[1],
             },
-            {
-              value: 118,
-              itemStyle: {
-                color: '#ECF2FE',
-              },
+          },
+          {
+            value: 118,
+            itemStyle: {
+              color: chartListColor()[1],
             },
-            {
-              value: 60,
-              itemStyle: {
-                color: '#ECF2FE',
-              },
+          },
+          {
+            value: 60,
+            itemStyle: {
+              color: chartListColor()[1],
             },
-          ],
-          type,
-        },
-      ],
-    };
-    return barDataset;
-  }
+          },
+        ],
+        type,
+        barWidth: 9,
+      },
+    ],
+  };
+  return barDataset;
 }
 
 /** 柱状图数据源 */
-export function constructInitDataset(dateTime: Array<Dayjs> = []) {
+export function constructInitDataset(dateTime: Array<string> = []) {
   // const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
   const divideNum = 10;
   const timeArray = [];
@@ -139,8 +172,8 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
   for (let i = 0; i < divideNum; i++) {
     // const [timeArray, inArray, outArray] = dataset;
     if (dateTime.length > 0) {
-      const dateAbsTime: number = (dateTime[1].valueOf() - dateTime[0].valueOf()) / divideNum;
-      const enhandTime: number = dateTime[0].valueOf() + dateAbsTime * i;
+      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
+      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
       // console.log('dateAbsTime..', dateAbsTime, enhandTime);
       timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
     } else {
@@ -156,16 +189,28 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
   // console.log('timeArray..', timeArray);
 
   const dataset = {
-    color: chartListColor,
+    color: chartListColor(),
     tooltip: {
       trigger: 'item',
     },
     xAxis: {
       type: 'category',
       data: timeArray,
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.4)',
+      },
+      axisLine: {
+        lineStyle: {
+          color: chartListColor()[1],
+          width: 1,
+        },
+      },
     },
     yAxis: {
       type: 'value',
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.4)',
+      },
     },
     grid: {
       top: '5%',
@@ -174,21 +219,34 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
       bottom: '60px',
     },
     legend: {
+      icon: 'rect',
+      itemWidth: 12,
+      itemHeight: 4,
+      itemGap: 48,
+      textStyle: {
+        fontSize: 12,
+        color: 'rgba(0, 0, 0, 0.6)',
+      },
       left: 'center',
       bottom: '0',
       orient: 'horizontal',
-      data: ['出库', '入库'],
+      data: ['本月', '上月'],
     },
     series: [
       {
-        name: '出库',
+        name: '本月',
         data: outArray,
         type: 'bar',
       },
       {
-        name: '入库',
+        name: '上月',
         data: inArray,
         type: 'bar',
+        itemStyle: {
+          normal: {
+            color: chartListColor()[1],
+          },
+        },
       },
     ],
   };
@@ -197,7 +255,7 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
 }
 
 /** 平滑图数据 */
-export function getSmoothLineDataSet(dateTime: any = []): any {
+export function getSmoothLineDataSet(dateTime = []) {
   let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
   if (dateTime.length > 0) {
     const devideNum = 7;
@@ -205,27 +263,44 @@ export function getSmoothLineDataSet(dateTime: any = []): any {
   }
 
   return {
-    color: chartListColor,
+    color: chartListColor(),
+    tooltip: {
+      trigger: 'item',
+    },
+    grid: {
+      top: '10px',
+      left: '0',
+      right: '20px',
+      bottom: '36px',
+      containLabel: true,
+    },
     xAxis: {
       type: 'category',
       data: dateArray,
       boundaryGap: false,
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.4)',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#E3E6EB',
+          width: 1,
+        },
+      },
     },
     yAxis: {
       type: 'value',
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        // 坐标轴指示器，坐标轴触发有效
-        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.4)',
       },
     },
     legend: {
       data: ['本月', '上月'],
-      icon: 'roundRect',
-      bottom: '15%',
-      itemGap: 60,
+      icon: 'circle',
+      bottom: '0',
+      itemGap: 48,
+      itemHeight: 8,
+      itemWidth: 8,
     },
     series: [
       {
@@ -241,7 +316,15 @@ export function getSmoothLineDataSet(dateTime: any = []): any {
         ],
         type: 'line',
         smooth: true,
-        color: '#BCC4D0',
+        color: chartListColor()[0],
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        areaStyle: {
+          normal: {
+            color: '#0053D92F',
+          },
+        },
       },
       {
         name: '本月',
@@ -256,17 +339,17 @@ export function getSmoothLineDataSet(dateTime: any = []): any {
         ],
         type: 'line',
         smooth: true,
-        areaStyle: {
-          opacity: 0.1,
-        },
-        color: '#0052D9',
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        color: chartListColor()[1],
       },
     ],
   };
 }
 
 /** 折线图数据 */
-export function getFolderlineDataSet(dateTime: any = []): any {
+export function getFolderlineDataSet(dateTime?: []) {
   let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
   if (dateTime.length > 0) {
     const devideNum = 7;
@@ -274,7 +357,7 @@ export function getFolderlineDataSet(dateTime: any = []): any {
   }
 
   return {
-    color: chartListColor,
+    color: chartListColor(),
     grid: {
       top: '5%',
       right: '1px',
@@ -290,15 +373,31 @@ export function getFolderlineDataSet(dateTime: any = []): any {
     xAxis: {
       type: 'category',
       data: dateArray,
+      boundaryGap: false,
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.4)',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#E3E6EB',
+          width: 1,
+        },
+      },
     },
     yAxis: {
       type: 'value',
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.4)',
+      },
     },
     tooltip: {
       trigger: 'item',
     },
     series: [
       {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
         name: '杯子',
         stack: '总量',
         data: [
@@ -311,8 +410,17 @@ export function getFolderlineDataSet(dateTime: any = []): any {
           getRandomArray(),
         ],
         type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor: '#ffffff',
+            borderWidth: 1,
+          },
+        },
       },
       {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
         name: '茶叶',
         stack: '总量',
         data: [
@@ -325,8 +433,17 @@ export function getFolderlineDataSet(dateTime: any = []): any {
           getRandomArray(),
         ],
         type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor: '#ffffff',
+            borderWidth: 1,
+          },
+        },
       },
       {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
         name: '蜂蜜',
         stack: '总量',
         data: [
@@ -339,8 +456,17 @@ export function getFolderlineDataSet(dateTime: any = []): any {
           getRandomArray(),
         ],
         type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor: '#ffffff',
+            borderWidth: 1,
+          },
+        },
       },
       {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
         name: '面粉',
         stack: '总量',
         data: [
@@ -353,6 +479,12 @@ export function getFolderlineDataSet(dateTime: any = []): any {
           getRandomArray(),
         ],
         type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor: '#ffffff',
+            borderWidth: 1,
+          },
+        },
       },
     ],
   };
@@ -365,21 +497,37 @@ export function getFolderlineDataSet(dateTime: any = []): any {
  * @param {Array<string>} [dateTime=[]]
  * @returns {*}
  */
-export function getLineChartDataSet(checkedValues = ''): any {
-  let dateValueList = [];
-  if (checkedValues === 'monthVal') {
-    dateValueList = ['1', '3', '8', '13', '18', '23', '28'];
-  } else {
-    dateValueList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+export function getLineChartDataSet(dateTime: Array<string> = []) {
+  const divideNum = 10;
+  const timeArray = [];
+  const inArray = [];
+  const outArray = [];
+  for (let i = 0; i < divideNum; i++) {
+    // const [timeArray, inArray, outArray] = dataset;
+    if (dateTime.length > 0) {
+      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
+      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
+      // console.log('dateAbsTime..', dateAbsTime, enhandTime);
+      timeArray.push(dayjs(enhandTime).format('MM-DD'));
+    } else {
+      timeArray.push(
+        dayjs()
+          .subtract(divideNum - i, 'day')
+          .format('MM-DD'),
+      );
+    }
+
+    inArray.push(getRandomArray().toString());
+    outArray.push(getRandomArray().toString());
   }
   const dataSet = {
-    color: chartListColor,
+    color: chartListColor(),
     tooltip: {
       trigger: 'item',
     },
     grid: {
       left: '0',
-      right: '0',
+      right: '20px',
       top: '5px',
       bottom: '36px',
       containLabel: true,
@@ -388,47 +536,82 @@ export function getLineChartDataSet(checkedValues = ''): any {
       left: 'center',
       bottom: '0',
       orient: 'horizontal', // legend 横向布局。
-      data: ['付款金额', '收款金额'],
+      data: ['本月', '上月'],
+      textStyle: {
+        fontSize: 12,
+        color: 'rgba(0, 0, 0, 0.6)',
+      },
     },
     xAxis: {
       type: 'category',
-      data: dateValueList,
+      data: timeArray,
+      boundaryGap: false,
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.4)',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#E3E6EB',
+          width: 1,
+        },
+      },
     },
     yAxis: {
       type: 'value',
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.4)',
+      },
     },
     series: [
       {
-        name: '付款金额',
-        data: [
-          getRandomArray(),
-          getRandomArray(),
-          getRandomArray(),
-          getRandomArray(),
-          getRandomArray(),
-          getRandomArray(),
-          getRandomArray(),
-        ],
+        name: '本月',
+        data: outArray,
         type: 'line',
-        smooth: true,
+        smooth: false,
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        itemStyle: {
+          normal: {
+            borderColor: '#ffffff',
+            borderWidth: 1,
+          },
+          // hover color
+          // emphasis: {
+          //   color: '#000000'
+          // }
+        },
+        areaStyle: {
+          normal: {
+            color: '#0053D92F',
+          },
+        },
       },
       {
-        name: '收款金额',
-        data: [
-          getRandomArray(),
-          getRandomArray(),
-          getRandomArray(),
-          getRandomArray(),
-          getRandomArray(),
-          getRandomArray(),
-          getRandomArray(),
-        ],
+        name: '上月',
+        data: inArray,
         type: 'line',
-        smooth: true,
+        smooth: false,
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        itemStyle: {
+          normal: {
+            borderColor: '#ffffff',
+            color: '#BCC4D0',
+            lineStyle: {
+              color: '#BCC4D0',
+            },
+            borderWidth: 1,
+          },
+          // hover color
+          // emphasis: {
+          //   color: '#000000'
+          // }
+        },
       },
     ],
   };
-  // console.log('getLineChartDataSet..', dataSet);
   return dataSet;
 }
 
@@ -452,19 +635,72 @@ export function getSelftItemList(productName: string, devideNum: number): string
  * 散点图数据
  *
  * @export
- * @returns {any[]}
+ * @returns {}
  */
-export function getScattlerDataSet(): any {
+export function getScattlerDataSet(dateTime: Array<string> = []) {
+  const divideNum = 10;
+  const timeArray = [];
+  const inArray = [];
+  const outArray = [];
+  for (let i = 0; i < divideNum; i++) {
+    // const [timeArray, inArray, outArray] = dataset;
+    if (dateTime.length > 0) {
+      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
+      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
+      // console.log('dateAbsTime..', dateAbsTime, enhandTime);
+      timeArray.push(dayjs(enhandTime).format('MM-DD'));
+    } else {
+      timeArray.push(
+        dayjs()
+          .subtract(divideNum - i, 'day')
+          .format('MM-DD'),
+      );
+    }
+
+    inArray.push(getRandomArray().toString());
+    outArray.push(getRandomArray().toString());
+  }
+
   return {
-    color: chartListColor,
-    xAxis: {},
-    yAxis: {},
+    color: chartListColor(),
+    xAxis: {
+      data: timeArray,
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.4)',
+      },
+      splitLine: { show: false },
+      axisLine: {
+        lineStyle: {
+          color: '#E3E6EB',
+          width: 1,
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      // splitLine: { show: false},
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.4)',
+      },
+      nameTextStyle: {
+        padding: [0, 0, 0, 60],
+      },
+      axisTick: {
+        show: false,
+        axisLine: {
+          show: false,
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+    },
     tooltip: {
       trigger: 'item',
     },
     grid: {
-      top: '5%',
-      left: '18px',
+      top: '5px',
+      left: '25px',
       right: '5px',
       bottom: '60px',
     },
@@ -472,36 +708,21 @@ export function getScattlerDataSet(): any {
       left: 'center',
       bottom: '0',
       orient: 'horizontal', // legend 横向布局。
-      data: ['满意度'],
+      data: ['按摩仪', '咖啡机'],
+      itemHeight: 8,
+      itemWidth: 8,
     },
     series: [
       {
-        name: '满意度',
+        name: '按摩仪',
         symbolSize: 10,
-        data: [
-          [getRandomArray(Math.random() * 10.0), getRandomArray(Math.random() * 8.04)],
-          [getRandomArray(Math.random() * 8.07), getRandomArray(Math.random() * 6.95)],
-          [getRandomArray(Math.random() * 13.0), getRandomArray(Math.random() * 7.58)],
-          [getRandomArray(Math.random() * 9.05), getRandomArray(Math.random() * 8.81)],
-          [getRandomArray(Math.random() * 11.0), getRandomArray(Math.random() * 8.33)],
-          [getRandomArray(Math.random() * 14.0), getRandomArray(Math.random() * 7.66)],
-          [getRandomArray(Math.random() * 13.4), getRandomArray(Math.random() * 6.81)],
-          [getRandomArray(Math.random() * 10.0), getRandomArray(Math.random() * 6.33)],
-          [getRandomArray(Math.random() * 14.0), getRandomArray(Math.random() * 8.96)],
-          [getRandomArray(Math.random() * 12.5), getRandomArray(Math.random() * 6.82)],
-          [getRandomArray(Math.random() * 9.15), getRandomArray(Math.random() * 7.2)],
-          [getRandomArray(Math.random() * 11.5), getRandomArray(Math.random() * 7.2)],
-          [getRandomArray(Math.random() * 3.03), getRandomArray(Math.random() * 4.23)],
-          [getRandomArray(Math.random() * 12.2), getRandomArray(Math.random() * 7.83)],
-          [getRandomArray(Math.random() * 2.02), getRandomArray(Math.random() * 4.47)],
-          [getRandomArray(Math.random() * 1.05), getRandomArray(Math.random() * 3.33)],
-          [getRandomArray(Math.random() * 4.05), getRandomArray(Math.random() * 4.96)],
-          [getRandomArray(Math.random() * 6.03), getRandomArray(Math.random() * 7.24)],
-          [getRandomArray(Math.random() * 12.0), getRandomArray(Math.random() * 6.26)],
-          [getRandomArray(Math.random() * 12.0), getRandomArray(Math.random() * 8.84)],
-          [getRandomArray(Math.random() * 7.08), getRandomArray(Math.random() * 5.82)],
-          [getRandomArray(Math.random() * 5.02), getRandomArray(Math.random() * 5.68)],
-        ],
+        data: outArray.reverse(),
+        type: 'scatter',
+      },
+      {
+        name: '咖啡机',
+        symbolSize: 10,
+        data: inArray.concat(inArray.reverse()),
         type: 'scatter',
       },
     ],
@@ -512,11 +733,9 @@ export function getScattlerDataSet(): any {
  * 获域图数据结构
  *
  * @export
- * @returns {any[]}
+ * @returns {}
  */
-export function getAreaChartDataSet(text = ''): any {
-  console.log(text);
-
+export function getAreaChartDataSet() {
   const xAxisData = [];
   const data1 = [];
   const data2 = [];
@@ -527,7 +746,7 @@ export function getAreaChartDataSet(text = ''): any {
   }
 
   return {
-    color: chartListColor,
+    color: chartListColor(),
     // title: {
     //   text: '柱状图动画延迟',
     // },
@@ -585,10 +804,10 @@ export function getAreaChartDataSet(text = ''): any {
  * @param {boolean} [isMonth=false]
  * @returns {*}
  */
-export function getColumnChartDataSet(isMonth = false): any {
+export function getColumnChartDataSet(isMonth = false) {
   if (isMonth) {
     return {
-      color: chartListColor,
+      color: chartListColor(),
       legend: {
         left: 'center',
         top: '10%',
@@ -640,9 +859,8 @@ export function getColumnChartDataSet(isMonth = false): any {
       ],
     };
   }
-
   return {
-    color: chartListColor,
+    color: chartListColor(),
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -695,6 +913,8 @@ export function getColumnChartDataSet(isMonth = false): any {
   };
 }
 
+export const lastYearList: Array<any> = [100, 120, 140, 160, 180, 200, 210];
+
 /**
  * 柱状图数据结构
  *
@@ -702,21 +922,25 @@ export function getColumnChartDataSet(isMonth = false): any {
  * @param {boolean} [isMonth=false]
  * @returns {*}
  */
-export function get2ColBarChartDataSet(): any {
+export function get2ColBarChartDataSet(isMonth = false) {
+  let lastYearListCopy = lastYearList.concat([]);
+  let thisYearListCopy = lastYearList.concat([]);
+
+  if (isMonth) {
+    lastYearListCopy = lastYearListCopy.reverse();
+    thisYearListCopy = thisYearListCopy.reverse();
+  }
+
   return {
-    color: chartListColor,
+    color: chartListColor(),
     tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        // 坐标轴指示器，坐标轴触发有效
-        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
-      },
+      trigger: 'item',
     },
     grid: {
-      top: '0',
+      top: '10px',
       left: '0',
       right: '0',
-      // bottom: '10%',
+      bottom: '36px',
       containLabel: true,
     },
     xAxis: [
@@ -726,32 +950,40 @@ export function get2ColBarChartDataSet(): any {
         axisTick: {
           alignWithLabel: true,
         },
+        axisLabel: {
+          color: 'rgba(0, 0, 0, 0.4)',
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#E3E6EB',
+            width: 1,
+          },
+        },
       },
     ],
     yAxis: [
       {
         type: 'value',
+        axisLabel: {
+          color: 'rgba(0, 0, 0, 0.4)',
+        },
       },
     ],
     legend: {
       data: ['去年', '今年'],
       bottom: '0',
-      itemGap: 60,
+      icon: 'rect',
+      itemGap: 48,
+      itemHeight: 4,
+      itemWidth: 12,
+      itemStyle: {},
     },
     series: [
       {
         name: '去年',
         type: 'bar',
-        barWidth: '20%',
-        data: [
-          getRandomArray(Math.random() * 100),
-          getRandomArray(Math.random() * 200),
-          getRandomArray(Math.random() * 300),
-          getRandomArray(Math.random() * 400),
-          getRandomArray(Math.random() * 500),
-          getRandomArray(Math.random() * 600),
-          getRandomArray(Math.random() * 700),
-        ],
+        barWidth: '30%',
+        data: lastYearListCopy,
         itemStyle: {
           color: '#BCC4D0',
         },
@@ -759,18 +991,11 @@ export function get2ColBarChartDataSet(): any {
       {
         name: '今年',
         type: 'bar',
-        barWidth: '20%',
-        data: [
-          getRandomArray(Math.random() * 100),
-          getRandomArray(Math.random() * 200),
-          getRandomArray(Math.random() * 300),
-          getRandomArray(Math.random() * 400),
-          getRandomArray(Math.random() * 500),
-          getRandomArray(Math.random() * 600),
-          getRandomArray(Math.random() * 700),
-        ],
+        barWidth: '30%',
+        data: thisYearListCopy,
         itemStyle: {
           color: (params) => {
+            // console.log('chartListColor', chartListColor());
             if (params.value >= 200) {
               return '#E34D59';
             }
@@ -789,9 +1014,9 @@ export function get2ColBarChartDataSet(): any {
  * @param {number} [radius=1]
  * @returns {*}
  */
-export function getPieChartDataSet(radius = 42): any {
+export function getPieChartDataSet(radius = 42) {
   return {
-    color: chartListColor,
+    color: chartListColor(),
     tooltip: {
       trigger: 'item',
     },
@@ -800,6 +1025,12 @@ export function getPieChartDataSet(radius = 42): any {
       right: '0',
     },
     legend: {
+      itemWidth: 12,
+      itemHeight: 4,
+      textStyle: {
+        fontSize: 12,
+        color: 'rgba(0, 0, 0, 0.6)',
+      },
       left: 'center',
       bottom: '0',
       orient: 'horizontal', // legend 横向布局。
@@ -808,17 +1039,43 @@ export function getPieChartDataSet(radius = 42): any {
       {
         name: '销售渠道',
         type: 'pie',
-        radius: ['45%', '60%'],
+        radius: ['48%', '60%'],
         avoidLabelOverlap: false,
         label: {
           show: true,
           position: 'center',
+          formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
+          rich: {
+            value: {
+              color: '#303133',
+              fontSize: 36,
+              fontWeight: 'normal',
+              lineHeight: 46,
+            },
+            name: {
+              color: '#909399',
+              fontSize: 14,
+              lineHeight: 14,
+            },
+          },
         },
         emphasis: {
           label: {
             show: true,
-            fontSize: '12',
-            fontWeight: 'bold',
+            formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
+            rich: {
+              value: {
+                color: '#303133',
+                fontSize: 36,
+                fontWeight: 'normal',
+                lineHeight: 46,
+              },
+              name: {
+                color: '#909399',
+                fontSize: 14,
+                lineHeight: 14,
+              },
+            },
           },
         },
         labelLine: {
@@ -833,40 +1090,16 @@ export function getPieChartDataSet(radius = 42): any {
   };
 }
 
-/**
- * 依据主题类型获取颜色
- *
- * @export
- * @param {string} theme
- * @returns {any[]}
- */
-export function getColorFromTheme(theme: string): any[] {
-  const themeColor: any = getBrandColor(theme);
-  const themeColorList: Array<any> = [];
-
-  // eslint-disable-next-line no-restricted-syntax
-  for (const key in themeColor) {
-    if (Object.prototype.hasOwnProperty.call(themeColor, key)) {
-      const elementColor: any = themeColor[key];
-
-      themeColorList.push(elementColor);
-    }
-  }
-
-  return themeColorList;
-}
-
 /**
  * 更改图表主题颜色
  *
  * @export
- * @param {Array<any>} chartsList
+ * @param {Array<string>} chartsList
  * @param {string} theme
  */
-export function changeChartsTheme(chartsList: Array<any>, theme: string): void {
+export function changeChartsTheme(chartsList: echarts.EChartsType[]) {
   if (chartsList && chartsList.length) {
-    const chartChangeColor: Array<any> = getColorFromTheme(theme) || chartListColor;
-    chartListColor = chartChangeColor;
+    const chartChangeColor: any = chartListColor();
 
     for (let index = 0; index < chartsList.length; index++) {
       const elementChart: any = chartsList[index];
diff --git a/src/pages/dashboard/detail/constants.ts b/src/pages/dashboard/detail/constants.ts
index 7b49e0d..e1d9529 100644
--- a/src/pages/dashboard/detail/constants.ts
+++ b/src/pages/dashboard/detail/constants.ts
@@ -3,30 +3,35 @@ export const PANE_LIST_DATA = [
     title: '总申请数（次）',
     count: 1126,
     percent: 10,
-  }, {
+  },
+  {
     title: '供应商数量（个）',
     count: 1126,
     percent: -13,
-  }, {
+  },
+  {
     title: '采购商品品类（类）',
     count: 1126,
     percent: 10,
-  }, {
+  },
+  {
     title: '申请人数量（人）',
     count: 1126,
     percent: 44,
-  }, {
+  },
+  {
     title: '申请完成率（%）',
     count: 1126,
     percent: 70,
-  }, {
+  },
+  {
     title: '到货及时率（%）',
     count: 78,
     percent: 16,
   },
 ];
 
-export const  PRODUCT_LIST = [
+export const PRODUCT_LIST = [
   {
     description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
     index: 1,
diff --git a/src/pages/detail/advanced/components/Product.vue b/src/pages/detail/advanced/components/Product.vue
index af02ccc..fced302 100644
--- a/src/pages/detail/advanced/components/Product.vue
+++ b/src/pages/detail/advanced/components/Product.vue
@@ -21,12 +21,7 @@
       </div>
       <div class="operater-item">
         <span class="operater-item-info">{{ data.info }}</span>
-        <t-icon
-          class="operater-item-icon"
-          name="chevron-right"
-          size="small"
-          style="color: rgba(0, 0, 0, 0.26)"
-        />
+        <t-icon class="operater-item-icon" name="chevron-right" size="small" style="color: rgba(0, 0, 0, 0.26)" />
       </div>
     </div>
     <div class="operater-footer">
@@ -36,8 +31,8 @@
         theme="line"
         :percentage="(data.use / data.stock) * 100"
         :label="false"
-        :color="(data.use / data.stock) < 0.5 ? '#E24D59' : ''"
-        :track-color="(data.use / data.stock) < 0.5 ? '#FCD4D4' : '#D4E3FC'"
+        :color="data.use / data.stock < 0.5 ? '#E24D59' : ''"
+        :track-color="data.use / data.stock < 0.5 ? '#FCD4D4' : '#D4E3FC'"
       />
     </div>
   </div>
@@ -50,6 +45,9 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
+      default: () => {
+        return {};
+      },
     },
   },
 });
diff --git a/src/pages/detail/advanced/constants.ts b/src/pages/detail/advanced/constants.ts
index f44e5b6..afac053 100644
--- a/src/pages/detail/advanced/constants.ts
+++ b/src/pages/detail/advanced/constants.ts
@@ -1,3 +1,10 @@
+interface TableRowType {
+  index: number;
+  pdName: string;
+  purchaseNum: number;
+  updateTime: string;
+}
+
 export const BASE_INFO_DATA = [
   {
     name: '合同名称',
@@ -84,14 +91,14 @@ export const TABLE_COLUMNS_DATA = [
     ellipsis: true,
     colKey: 'index',
     title: '申请号',
-    sorter: (a, b) => a.index.substr(3) - b.index.substr(3),
+    sorter: (a: TableRowType, b: TableRowType) => a.index - b.index,
   },
   {
     minWidth: '100',
     ellipsis: true,
     colKey: 'pdName',
     title: '产品名称',
-    sorter: (a, b) => a.pdName.length - b.pdName.length,
+    sorter: (a: TableRowType, b: TableRowType) => a.pdName.length - b.pdName.length,
   },
   {
     minWidth: '250',
@@ -104,7 +111,7 @@ export const TABLE_COLUMNS_DATA = [
     ellipsis: true,
     colKey: 'purchaseNum',
     title: '采购数量',
-    sorter: (a, b) => a.purchaseNum - b.purchaseNum,
+    sorter: (a: TableRowType, b: TableRowType) => a.purchaseNum - b.purchaseNum,
   },
   {
     minWidth: '100',
@@ -118,7 +125,7 @@ export const TABLE_COLUMNS_DATA = [
     ellipsis: true,
     colKey: 'updateTime',
     title: '创建时间',
-    sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
+    sorter: (a: TableRowType, b: TableRowType) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
   },
   {
     align: 'left',
diff --git a/src/pages/detail/advanced/index.vue b/src/pages/detail/advanced/index.vue
index c5f6fa1..f804cef 100644
--- a/src/pages/detail/advanced/index.vue
+++ b/src/pages/detail/advanced/index.vue
@@ -33,12 +33,8 @@
     <card title="产品目录">
       <template #option>
         <t-radio-group default-value="dateVal">
-          <t-radio-button value="dateVal">
-            季度
-          </t-radio-button>
-          <t-radio-button value="monthVal">
-            月份
-          </t-radio-button>
+          <t-radio-button value="dateVal"> 季度 </t-radio-button>
+          <t-radio-button value="monthVal"> 月份 </t-radio-button>
         </t-radio-group>
       </template>
       <t-row class="operater-block-container">
@@ -150,7 +146,7 @@ export default defineComponent({
 
     const fetchData = async () => {
       try {
-        const res:ResDataType = await request.get('/api/get-purchase-list');
+        const res: ResDataType = await request.get('/api/get-purchase-list');
         if (res.code === 0) {
           const { list = [] } = res.data;
           data.value = list;
diff --git a/src/pages/detail/base/index.less b/src/pages/detail/base/index.less
index a0c600b..610310f 100644
--- a/src/pages/detail/base/index.less
+++ b/src/pages/detail/base/index.less
@@ -16,7 +16,7 @@
 }
 
 .detail-base-panel {
-  background-color: white;
+  background-color: @bg-color-container;
   padding: @spacer-3 @spacer-4 @spacer-4 @spacer-4;
   border-radius: @border-radius;
   margin-top: 0;
diff --git a/src/pages/detail/base/index.vue b/src/pages/detail/base/index.vue
index ae871e5..9aa0d53 100644
--- a/src/pages/detail/base/index.vue
+++ b/src/pages/detail/base/index.vue
@@ -2,9 +2,7 @@
   <div>
     <div class="detail-base-panel">
       <t-row class="detail-base-info" justify="space-between">
-        <p class="detail-base-info-title">
-          基本信息
-        </p>
+        <p class="detail-base-info-title">基本信息</p>
       </t-row>
       <div class="info-block">
         <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
@@ -23,9 +21,7 @@
       <t-divider style="margin-top: 24px; margin-bottom: 23px; border-top-color: rgba(255, 255, 255, 0)" />
       <div class="update-history">
         <t-row class="detail-base-info" justify="space-between">
-          <p class="detail-base-info-title">
-            变更记录
-          </p>
+          <p class="detail-base-info-title">变更记录</p>
         </t-row>
         <t-steps class="detail-base-info-steps" direction="vertical" theme="dot" :current="1">
           <t-step-item title="上传合同附件" content="这里是提示文字" />
diff --git a/src/pages/detail/deploy/constants.ts b/src/pages/detail/deploy/constants.ts
index c6db673..55f1025 100644
--- a/src/pages/detail/deploy/constants.ts
+++ b/src/pages/detail/deploy/constants.ts
@@ -1,3 +1,8 @@
+interface TableRowType {
+  name: string;
+  updateTime: string;
+}
+
 export const BASE_INFO_DATA = [
   {
     name: '集群名',
@@ -81,14 +86,13 @@ export const BASE_INFO_DATA = [
   },
 ];
 
-
 export const TABLE_COLUMNS = [
   {
     minWidth: '250',
     ellipsis: true,
     colKey: 'name',
     title: '项目名称',
-    sorter: (a, b) => a.name.substr(10) - b.name.substr(10),
+    sorter: (a: TableRowType, b: TableRowType) => a.name.length - b.name.length,
   },
   {
     minWidth: '200',
@@ -102,7 +106,7 @@ export const TABLE_COLUMNS = [
     ellipsis: true,
     colKey: 'updateTime',
     title: '创建时间',
-    sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
+    sorter: (a: TableRowType, b: TableRowType) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
   },
   {
     align: 'left',
diff --git a/src/pages/detail/secondary/index.less b/src/pages/detail/secondary/index.less
index 883c839..d0af381 100644
--- a/src/pages/detail/secondary/index.less
+++ b/src/pages/detail/secondary/index.less
@@ -1,7 +1,7 @@
 @import '@/style/variables.less';
 
 .secondary-notification {
-  background-color: white;
+  background-color: @bg-color-container;
   border-radius: @border-radius;
   padding: @spacer-3 @spacer-4;
 
diff --git a/src/pages/detail/secondary/index.vue b/src/pages/detail/secondary/index.vue
index 4bbd1ba..7672de9 100644
--- a/src/pages/detail/secondary/index.vue
+++ b/src/pages/detail/secondary/index.vue
@@ -34,7 +34,7 @@
           </t-list-item>
         </t-list>
         <div v-else class="secondary-msg-list__empty-list">
-          <img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空">
+          <img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" />
           <p>暂无通知</p>
         </div>
       </t-tab-panel>
@@ -48,10 +48,11 @@
   />
 </template>
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, ref, computed, ComputedRef } from 'vue';
 import { useStore } from 'vuex';
 import { NOTIFICATION_TYPES } from '@/constants';
 import ReadIcon from '@/assets/read.svg?component';
+import { NotificationItem } from '@/store/interface';
 
 const TAB_LIST = [
   {
@@ -75,27 +76,27 @@ export default defineComponent({
     const tabValue = ref('msgData');
 
     const visible = ref(false);
-    const selectedItem = ref(undefined);
+    const selectedItem = ref<NotificationItem>();
 
     const store = useStore();
 
     const { msgData } = store.state.notification;
 
-    const msgDataList = computed(() => {
+    const msgDataList: ComputedRef<NotificationItem[]> = computed(() => {
       if (tabValue.value === 'msgData') return msgData;
       if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
       if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
       return [];
     });
 
-    const handleClickDeleteBtn = (item) => {
+    const handleClickDeleteBtn = (item: NotificationItem) => {
       visible.value = true;
       selectedItem.value = item;
     };
 
-    const setReadStatus = (item) => {
+    const setReadStatus = (item: NotificationItem) => {
       const changeMsg = msgData;
-      changeMsg.forEach((e) => {
+      changeMsg.forEach((e: NotificationItem) => {
         if (e.id === item.id) {
           e.status = !e.status;
         }
@@ -106,8 +107,8 @@ export default defineComponent({
     const deleteMsg = () => {
       const item = selectedItem.value;
       const changeMsg = msgData;
-      changeMsg.forEach((e, index) => {
-        if (e.id === item.id) {
+      changeMsg.forEach((e: NotificationItem, index: number) => {
+        if (e.id === item?.id) {
           changeMsg.splice(index, 1);
         }
       });
diff --git a/src/pages/form/base/index.less b/src/pages/form/base/index.less
index ce51299..cdcef6c 100644
--- a/src/pages/form/base/index.less
+++ b/src/pages/form/base/index.less
@@ -7,7 +7,7 @@
 .@{prefix} {
 
   &-panel {
-    background-color: white;
+    background-color: @bg-color-container;
     padding: @spacer-3;
     border-radius: @border-radius;
   }
diff --git a/src/pages/form/step/index.less b/src/pages/form/step/index.less
index 33cf3a9..e022fe2 100644
--- a/src/pages/form/step/index.less
+++ b/src/pages/form/step/index.less
@@ -7,7 +7,7 @@
 .@{prefix} {
 
   &-panel {
-    background-color: white;
+    background-color: @bg-color-container;
 
     &.@{prefix}-step-panel {
       padding: 0;
diff --git a/src/pages/form/step/index.vue b/src/pages/form/step/index.vue
index 1d6ffd2..0cd9ae4 100644
--- a/src/pages/form/step/index.vue
+++ b/src/pages/form/step/index.vue
@@ -27,8 +27,8 @@
       class="step-form"
       :data="formData1"
       :rules="FORM_RULES"
-      label-align="left"
-      @submit="({ validateResult }) => onSubmit({ validateResult }, 1)"
+      label-align="right"
+      @submit="(result) => onSubmit(result, 1)"
     >
       <t-form-item label="合同名称" name="name">
         <t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable>
@@ -44,13 +44,9 @@
           </t-option>
         </t-select>
       </t-form-item>
-      <t-form-item label="开票金额">
-        {{ amount }} 元
-      </t-form-item>
+      <t-form-item label="开票金额"> {{ amount }} 元 </t-form-item>
       <t-form-item>
-        <t-button theme="primary" type="submit">
-          提交申请
-        </t-button>
+        <t-button theme="primary" type="submit"> 提交申请 </t-button>
       </t-form-item>
     </t-form>
 
@@ -62,7 +58,7 @@
       :rules="FORM_RULES"
       label-align="left"
       @reset="onReset(0)"
-      @submit="({ validateResult }) => onSubmit({ validateResult }, 2)"
+      @submit="(result) => onSubmit(result, 2)"
     >
       <t-form-item label="发票抬头" name="title">
         <t-input v-model="formData2.title" :style="{ width: '480px' }" placeholder="请输入发票抬头" />
@@ -86,12 +82,8 @@
         <t-input v-model="formData2.tel" :style="{ width: '480px' }" placeholder="请输入通知手机" />
       </t-form-item>
       <t-form-item>
-        <t-button type="reset" theme="default" variant="base">
-          上一步
-        </t-button>
-        <t-button theme="primary" type="submit">
-          下一步
-        </t-button>
+        <t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
+        <t-button theme="primary" type="submit"> 下一步 </t-button>
       </t-form-item>
     </t-form>
 
@@ -103,7 +95,7 @@
       :rules="FORM_RULES"
       label-align="left"
       @reset="onReset(1)"
-      @submit="({ validateResult }) => onSubmit({ validateResult }, 6)"
+      @submit="(result) => onSubmit(result, 6)"
     >
       <t-form-item label="收货人" name="consignee">
         <t-input v-model="formData3.consignee" :style="{ width: '480px' }" placeholder="请输入收货人" />
@@ -128,31 +120,19 @@
         <t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" placeholder="请输入详细地址" />
       </t-form-item>
       <t-form-item>
-        <t-button type="reset" theme="default" variant="base">
-          上一步
-        </t-button>
-        <t-button theme="primary" type="submit">
-          下一步
-        </t-button>
+        <t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
+        <t-button theme="primary" type="submit"> 下一步 </t-button>
       </t-form-item>
     </t-form>
 
     <!-- 分步表单4 -->
     <div v-show="activeForm === 6" class="step-form-4">
       <t-icon name="check-circle-filled" style="color: green" size="52px" />
-      <p class="text">
-        完成开票申请
-      </p>
-      <p class="tips">
-        预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待
-      </p>
+      <p class="text">完成开票申请</p>
+      <p class="tips">预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待</p>
       <div class="button-group">
-        <t-button theme="primary" @click="onReset(0)">
-          再次申请
-        </t-button>
-        <t-button variant="base" theme="default" @click="complete">
-          查看进度
-        </t-button>
+        <t-button theme="primary" @click="onReset(0)"> 再次申请 </t-button>
+        <t-button variant="base" theme="default" @click="complete"> 查看进度 </t-button>
       </div>
     </div>
   </div>
@@ -160,11 +140,18 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
-
+import { ValidateResultContext } from 'tdesign-vue-next';
 import { PREFIX } from '@/config/global';
-import { FORM_RULES, NAME_OPTIONS, TYPE_OPTIONS, ADDRESS_OPTIONS, INITIAL_DATA1, INITIAL_DATA2, INITIAL_DATA3 } from './constants';
-// 导入样式
-import './index.less';
+
+import {
+  FORM_RULES,
+  NAME_OPTIONS,
+  TYPE_OPTIONS,
+  ADDRESS_OPTIONS,
+  INITIAL_DATA1,
+  INITIAL_DATA2,
+  INITIAL_DATA3,
+} from './constants';
 
 export default defineComponent({
   name: 'FormStep',
@@ -198,12 +185,12 @@ export default defineComponent({
       formData3,
       activeForm,
       amount,
-      onSubmit({ validateResult }, val) {
-        if (validateResult === true) {
+      onSubmit(result: ValidateResultContext<FormData>, val: number) {
+        if (result.validateResult === true) {
           activeForm.value = val;
         }
       },
-      onReset(val) {
+      onReset(val: number) {
         activeForm.value = val;
       },
       complete() {
diff --git a/src/pages/list/base/constants.ts b/src/pages/list/base/constants.ts
index b0bb5fc..b85d68d 100644
--- a/src/pages/list/base/constants.ts
+++ b/src/pages/list/base/constants.ts
@@ -8,7 +8,12 @@ export const COLUMNS = [
     ellipsis: true,
     colKey: 'name',
   },
-  { title: '合同状态', colKey: 'status', width: 150, cell: { col: 'status' } },
+  {
+    title: '合同状态',
+    colKey: 'status',
+    width: 150,
+    cell: { col: 'status' },
+  },
   {
     title: '合同编号',
     minWidth: '100',
diff --git a/src/pages/list/filter/index.vue b/src/pages/list/filter/index.vue
index 8073281..62c40e1 100644
--- a/src/pages/list/filter/index.vue
+++ b/src/pages/list/filter/index.vue
@@ -14,9 +14,10 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 @import '@/style/index';
+
 .@{prefix} {
   &-panel {
-    background-color: white;
+    background-color: @bg-color-container;
     padding: @spacer-3;
     border-radius: @border-radius;
   }
diff --git a/src/pages/login/components/Register.vue b/src/pages/login/components/Register.vue
index d9b7fa2..b10bf7b 100644
--- a/src/pages/login/components/Register.vue
+++ b/src/pages/login/components/Register.vue
@@ -48,9 +48,7 @@
       <div class="check-container">
         <t-checkbox>我已阅读并同意 </t-checkbox><span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
       </div>
-      <t-button class="button-container" style="width: 400px" size="large" @click="handleRegister">
-        注册
-      </t-button>
+      <t-button class="button-container" style="width: 400px" size="large" @click="handleRegister"> 注册 </t-button>
     </div>
     <div class="bottom-container">
       <span class="tip" @click="type = 'eamil'">使用手机号注册</span>
@@ -103,9 +101,7 @@
       <div class="check-container">
         <t-checkbox>我已阅读并同意 </t-checkbox> <span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
       </div>
-      <t-button class="button-container" style="width: 400px" size="large" @click="handleRegister">
-        注册
-      </t-button>
+      <t-button class="button-container" style="width: 400px" size="large" @click="handleRegister"> 注册 </t-button>
     </div>
     <div class="bottom-container">
       <span class="tip" @click="type = 'phone'">使用邮箱注册</span>
@@ -117,7 +113,7 @@
 import { defineComponent, ref } from 'vue';
 import { useCounter } from '@/utils/hooks';
 
-const getEmails = (search:string) => [
+const getEmails = (search: string) => [
   {
     value: `${search}@qq.com`,
     label: `${search}@qq.com`,
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 5e24417..b7e4f0d 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -2,13 +2,13 @@
   <div class="login-wrapper">
     <div class="login-container">
       <div class="title-container">
-        <img class="icon" src="https://tdesign.gtimg.com/pro-template/logo%402x.png">
+        <img class="icon" src="https://tdesign.gtimg.com/pro-template/logo%402x.png" />
         <div class="side-title">
           <p class="tip1">
-            {{ type == 'register' ? '没有账号吗?' : "已有账号?" }}
+            {{ type == 'register' ? '没有账号吗?' : '已有账号?' }}
           </p>
           <p class="tip2" @click="switchType(type == 'register' ? 'login' : 'register')">
-            {{ type == 'register' ? '登录' : "注册新账号" }}
+            {{ type == 'register' ? '登录' : '注册新账号' }}
           </p>
         </div>
       </div>
@@ -33,7 +33,7 @@ export default defineComponent({
   setup() {
     const type = ref('login');
 
-    const switchType = (val:string) => {
+    const switchType = (val: string) => {
       type.value = val;
     };
 
diff --git a/src/pages/result/fail/index.vue b/src/pages/result/fail/index.vue
index 7ac14f1..d7bb73b 100644
--- a/src/pages/result/fail/index.vue
+++ b/src/pages/result/fail/index.vue
@@ -2,16 +2,10 @@
   <card>
     <div class="result-success">
       <t-icon class="result-success-icon" name="close-circle-filled" />
-      <div class="result-success-title">
-        项目创建失败
-      </div>
-      <div class="result-success-describe">
-        企业微信联系检查创建者权限，或返回修改
-      </div>
+      <div class="result-success-title">项目创建失败</div>
+      <div class="result-success-describe">企业微信联系检查创建者权限，或返回修改</div>
       <div>
-        <t-button @click="() => $router.push('/form/base')">
-          返回修改
-        </t-button>
+        <t-button @click="() => $router.push('/form/base')"> 返回修改 </t-button>
       </div>
     </div>
   </card>
@@ -38,13 +32,13 @@ export default defineComponent({
   height: 75vh;
   &-icon {
     font-size: 64px;
-    color: @error-color;
+    color: @text-color-secondary;
   }
 
   &-title {
     margin-top: 16px;
     font-size: 20px;
-    color: rgba(0, 0, 0, 0.9);
+    color: @text-color-primary;
     text-align: center;
     line-height: 22px;
   }
@@ -52,7 +46,7 @@ export default defineComponent({
   &-describe {
     margin: 8px 0 32px;
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
+    color: @text-color-secondary;
     line-height: 22px;
   }
 }
diff --git a/src/pages/result/success/index.vue b/src/pages/result/success/index.vue
index 85f5f99..a0fa921 100644
--- a/src/pages/result/success/index.vue
+++ b/src/pages/result/success/index.vue
@@ -2,19 +2,11 @@
   <card>
     <div class="result-success">
       <t-icon class="result-success-icon" name="check-circle-filled" />
-      <div class="result-success-title">
-        项目已创建成功
-      </div>
-      <div class="result-success-describe">
-        可以联系负责人分发应用
-      </div>
+      <div class="result-success-title">项目已创建成功</div>
+      <div class="result-success-describe">可以联系负责人分发应用</div>
       <div>
-        <t-button theme="default" @click="() => $router.push('/detail/advanced')">
-          查看进度
-        </t-button>
-        <t-button @click="() => $router.push('/form/base')">
-          再次创建
-        </t-button>
+        <t-button theme="default" @click="() => $router.push('/detail/advanced')"> 查看进度 </t-button>
+        <t-button @click="() => $router.push('/form/base')"> 再次创建 </t-button>
       </div>
     </div>
   </card>
@@ -24,6 +16,7 @@
 import { defineComponent } from 'vue';
 
 import Card from '@/components/card/index.vue';
+
 export default defineComponent({
   name: 'ResultSuccess',
   components: { Card },
@@ -48,7 +41,7 @@ export default defineComponent({
   &-title {
     margin-top: 16px;
     font-size: 20px;
-    color: rgba(0, 0, 0, 0.9);
+    color: @text-color-primary;
     text-align: center;
     line-height: 22px;
   }
@@ -56,7 +49,7 @@ export default defineComponent({
   &-describe {
     margin: 8px 0 32px;
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
+    color: @text-color-primary;
     line-height: 22px;
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index d776623..bf4515e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,10 +1,10 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import routeConfig from '@/config/routes';
 
-const layoutModules = import.meta.glob('../Layouts/*');
+const layoutModules = import.meta.glob('../layouts/*');
 const pagesModules = import.meta.glob('../pages/**/*.vue');
 const fristPagesModules = import.meta.glob('../pages/*.vue');
-const modules = Object.assign({}, layoutModules, fristPagesModules, pagesModules);
+const modules = { ...layoutModules, ...fristPagesModules, ...pagesModules };
 
 const getMenuRoutes = (list) => {
   if (!list) {
@@ -42,4 +42,3 @@ const router = createRouter({
   },
 });
 export default router;
-
diff --git a/src/store/modules/notification.ts b/src/store/modules/notification.ts
index 8f4e5b6..e986d4f 100644
--- a/src/store/modules/notification.ts
+++ b/src/store/modules/notification.ts
@@ -1,4 +1,6 @@
 // 定义的state初始值
+import { NotificationItem } from '../interface'
+
 const state = {
   msgData: [
     {
@@ -58,15 +60,18 @@ const state = {
   ],
 };
 
+type NotificationStateType = typeof state;
+type MsgDataType = typeof state.msgData;
+
 const mutations = {
-  setMsgData(state, data) {
+  setMsgData(state: NotificationStateType, data: MsgDataType) {
     state.msgData = data;
   },
 };
 
 const getters = {
-  unreadMsg: state => state.msgData.filter(item => item.status),
-  readMsg: state => state.msgData.filter(item => !item.status),
+  unreadMsg: (state: NotificationStateType) => state.msgData.filter((item: NotificationItem) => item.status),
+  readMsg: (state: NotificationStateType) => state.msgData.filter((item: NotificationItem) => !item.status),
 };
 
 const actions = {};
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 2d7e516..72549ae 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -4,12 +4,13 @@ import MENU_CONFIG from '@/config/routes';
 // 定义的state初始值
 const state = {
   ...STYLE_CONFIG,
+  showSettingPanel: false,
 };
 
 const mutations = {
   update(state, payload) {
     state.showBreadcrumb = payload.showBreadcrumb;
-    state.theme = payload.theme;
+    state.mode = payload.mode;
     state.layout = payload.layout;
     state.isSidebarCompact = payload.isSidebarCompact;
     state.logoPosition = payload.logoPosition;
@@ -18,6 +19,7 @@ const mutations = {
     state.isSidebarFixed = payload.isSidebarFixed;
     state.isHeaderFixed = payload.isHeaderFixed;
     state.showHeader = payload.showHeader;
+    state.showFooter = payload.showFooter;
   },
   toggleSidebarCompact(state) {
     state.isSidebarCompact = !state.isSidebarCompact;
@@ -25,17 +27,20 @@ const mutations = {
   showSidebarCompact(state, payload) {
     state.isSidebarCompact = payload;
   },
+  toggleSettingPanel(state, payload) {
+    state.showSettingPanel = payload;
+  },
 };
 
 const getters = {
-  showHeader: state => state.showHeader,
-  showSidebar: state => state.layout !== 'top',
-  showSidebarLogo: state => state.layout === 'side',
-  showHeaderLogo: state => state.layout !== 'side',
+  showHeader: (state) => state.showHeader,
+  showSidebar: (state) => state.layout !== 'top',
+  showSidebarLogo: (state) => state.layout === 'side',
+  showHeaderLogo: (state) => state.layout !== 'side',
   headerMenu: (state) => {
     if (state.layout === 'mix') {
       if (state.splitMenu) {
-        return MENU_CONFIG.map(menu => ({
+        return MENU_CONFIG.map((menu) => ({
           ...menu,
           children: [],
         }));
@@ -51,29 +56,35 @@ const getters = {
         const item = MENU_CONFIG[index];
         if (item.children && item.children.length > 0) {
           if (rootState.route.path.indexOf(item.path) === 0) {
-            return item.children.map(menuRouter => ({ ...menuRouter, path: `${item.path}/${menuRouter.path}` }));
+            return item.children.map((menuRouter) => ({ ...menuRouter, path: `${item.path}/${menuRouter.path}` }));
           }
         }
       }
     }
     return MENU_CONFIG;
   },
-  showAsideFooter: (state) => {
-    if (state.layout === 'mix' && !state.isSidebarFixed) {
-      return state.showFooter && state.isAsideFooter;
-    }
-    return state.showFooter;
-  },
-
-  showMainFooter: (state) => {
-    if (state.layout === 'mix' && !state.isSidebarFixed) {
-      return state.showFooter && !state.isAsideFooter;
-    }
-    return false;
-  },
+  showFooter: (state) => state.showFooter,
+  showSettingBtn: (state) => !state.showHeader,
 };
 
-const actions = {};
+const actions = {
+  async changeTheme({ commit, dispatch }, payload) {
+    console.log(payload);
+    dispatch('changeMode', payload);
+    dispatch('changeBrandTheme', payload);
+    commit('update', payload);
+  },
+  changeMode({ state }, payload) {
+    if (payload.mode !== state.mode) {
+      document.documentElement.setAttribute('theme-mode', payload.mode === 'dark' ? 'dark' : '');
+    }
+  },
+  changeBrandTheme({ state }, payload) {
+    if (payload.brand !== state.brandTheme) {
+      document.documentElement.setAttribute('theme-color', payload.brandTheme);
+    }
+  },
+};
 
 export default {
   namespaced: true,
diff --git a/src/style/index.less b/src/style/index.less
index 41a1e3b..19440fa 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -6,7 +6,9 @@
 
 @import './font-family.less';
 
-@import './sidenav.less';
+@import './side-nav.less';
+
+@import './theme/index.less';
 
 body {
   color: @text-color-secondary;
@@ -118,7 +120,7 @@ p {
   display: flex;
   flex-direction: column;
 }
-.@{prefix}-sidenav-layout {
+.@{prefix}-sideNav-layout {
 
   &-relative {
     height: 100%;
diff --git a/src/style/sidenav.less b/src/style/side-nav.less
similarity index 96%
rename from src/style/sidenav.less
rename to src/style/side-nav.less
index d8b419f..75cd815 100644
--- a/src/style/sidenav.less
+++ b/src/style/side-nav.less
@@ -16,7 +16,7 @@
     z-index: 100;
   }
 
-  &-sidenav {
+  &-sideNav {
     position: fixed;
     top: 0;
     bottom: 0;
@@ -66,7 +66,7 @@
   }
 
 
-  &-sidenav-placeholder {
+  &-sideNav-placeholder {
     flex: 1 1 232px;
     min-width: 232px;
     transition: all .3s;
diff --git a/src/style/theme/cyan.less b/src/style/theme/cyan.less
new file mode 100644
index 0000000..c2cf4d5
--- /dev/null
+++ b/src/style/theme/cyan.less
@@ -0,0 +1,13 @@
+:root[theme-color='cyan'],
+:root[theme-color='cyan'][theme-mode='dark'] {--td-brand-color: #0594FA;
+  --td-brand-color-1: #D6F7FF;
+  --td-brand-color-2: #B2ECFF;
+  --td-brand-color-3: #85DAFF;
+  --td-brand-color-4: #5CC5FC;
+  --td-brand-color-5: #31ADFB;
+  --td-brand-color-6: #0594FA;
+  --td-brand-color-7: #007EDF;
+  --td-brand-color-8: #0068C0;
+  --td-brand-color-9: #00549E;
+  --td-brand-color-10: #00417D;
+}
\ No newline at end of file
diff --git a/src/style/theme/dark.less b/src/style/theme/dark.less
new file mode 100644
index 0000000..0115e5d
--- /dev/null
+++ b/src/style/theme/dark.less
@@ -0,0 +1,164 @@
+:root[theme-mode='dark'] {
+  --td-brand-color-1: #1B2F51;
+  --td-brand-color-2: #173463;
+  --td-brand-color-3: #143975;
+  --td-brand-color-4: #103D88;
+  --td-brand-color-5: #0D429A;
+  --td-brand-color-6: #054BBE;
+  --td-brand-color-7: #2667D4;
+  --td-brand-color-8: #4582E6;
+  --td-brand-color-9: #699EF5;
+  --td-brand-color-10: #96BBF8;
+  
+  --td-warning-color-1: #4F2A1D;
+  --td-warning-color-2: #582F21;
+  --td-warning-color-3: #733C23;
+  --td-warning-color-4: #A75D2B;
+  --td-warning-color-5: #CF6E2D;
+  --td-warning-color-6: #DC7633;
+  --td-warning-color-7: #E8935C;
+  --td-warning-color-8: #ECBF91;
+  --td-warning-color-9: #EED7BF;
+  --td-warning-color-10: #F3E9DC;
+  
+  --td-error-color-1: #472324;
+  --td-error-color-2: #5E2A2D;
+  --td-error-color-3: #703439;
+  --td-error-color-4: #83383E;
+  --td-error-color-5: #A03F46;
+  --td-error-color-6: #C64751;
+  --td-error-color-7: #DE6670;
+  --td-error-color-8: #EC888E;
+  --td-error-color-9: #EDB1B6;
+  --td-error-color-10: #EECED0;
+  
+  --td-success-color-1: #193A2A;
+  --td-success-color-2: #1A4230;
+  --td-success-color-3: #17533D;
+  --td-success-color-4: #0D7A55;
+  --td-success-color-5: #059465;
+  --td-success-color-6: #43AF8A;
+  --td-success-color-7: #46BF96;
+  --td-success-color-8: #80D2B6;
+  --td-success-color-9: #B4E1D3;
+  --td-success-color-10: #DEEDE8;
+  
+  --td-gray-color-1: #F3F3F3;
+  --td-gray-color-2: #EEEEEE;
+  --td-gray-color-3: #E7E7E7;
+  --td-gray-color-4: #DCDCDC;
+  --td-gray-color-5: #C5C5C5;
+  --td-gray-color-6: #A6A6A6;
+  --td-gray-color-7: #8B8B8B;
+  --td-gray-color-8: #777777;
+  --td-gray-color-9: #5E5E5E;
+  --td-gray-color-10: #4B4B4B;
+  --td-gray-color-11: #383838;
+  --td-gray-color-12: #2C2C2C;
+  --td-gray-color-13: #242424;
+  --td-gray-color-14: #181818;
+  
+  // 文字 & 图标 颜色
+  --td-font-white-1: rgba(255, 255, 255, .9);
+  --td-font-white-2: rgba(255, 255, 255, .55);
+  --td-font-white-3: rgba(255, 255, 255, .35);
+  --td-font-white-4: rgba(255, 255, 255, .22);
+  
+  --td-font-gray-1: rgba(0, 0, 0, .9);
+  --td-font-gray-2: rgba(0, 0, 0, .6);
+  --td-font-gray-3: rgba(0, 0, 0, .4);
+  --td-font-gray-4: rgba(0, 0, 0, .26);
+  
+  // 基础颜色
+  --td-brand-color: var(--td-brand-color-8);     // 色彩-品牌-可操作
+  --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
+  --td-error-color: var(--td-error-color-6);     // 色彩-功能-失败
+  --td-success-color: var(--td-success-color-5); // 色彩-功能-成功
+  
+  
+  // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
+  --td-brand-color-hover: var(--td-brand-color-7);     // hover态
+  --td-brand-color-focus: var(--td-brand-color-2);     // focus态，包括鼠标和键盘
+  --td-brand-color-active: var(--td-brand-color-9);    // 点击态
+  --td-brand-color-disabled: var(--td-brand-color-3);  // 禁用态
+  --td-brand-color-light: var(--td-brand-color-1);     // 浅色的选中态
+  
+  // 警告色扩展
+  --td-warning-color-hover: var(--td-warning-color-4);
+  --td-warning-color-focus: var(--td-warning-color-2);
+  --td-warning-color-active: var(--td-warning-color-6);
+  --td-warning-color-disabled: var(--td-warning-color-3);
+  --td-warning-color-light: var(--td-warning-color-1);
+  
+  // 失败/错误色扩展
+  --td-error-color-hover: var(--td-error-color-5);
+  --td-error-color-focus: var(--td-error-color-2);
+  --td-error-color-active: var(--td-error-color-7);
+  --td-error-color-disabled: var(--td-error-color-3);
+  --td-error-color-light: var(--td-error-color-1);
+  
+  // 成功色扩展
+  --td-success-color-hover: var(--td-success-color-4);
+  --td-success-color-focus: var(--td-success-color-2);
+  --td-success-color-active: var(--td-success-color-6);
+  --td-success-color-disabled: var(--td-success-color-3);
+  --td-success-color-light: var(--td-success-color-1);
+  
+  // 遮罩
+  --td-mask-active: rgba(0, 0, 0, .4); // 遮罩-弹出
+  --td-mask-disabled: rgba(0, 0, 0, .6); // 遮罩-禁用
+  
+  // 背景色
+  --td-bg-color-page: var(--td-gray-color-14);                        // 色彩 - page
+  --td-bg-color-container: var(--td-gray-color-13);                   // 色彩 - 容器             
+  --td-bg-color-container-hover: var(--td-gray-color-12);             // 色彩 - 容器 - hover
+  --td-bg-color-container-active: var(--td-gray-color-10);            // 色彩 - 容器 - active
+  --td-bg-color-container-select: var(--td-gray-color-9);             // 色彩 - 容器 - select
+  
+  --td-bg-color-secondarycontainer: var(--td-gray-color-12);          // 色彩 - 次级容器
+  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);    // 色彩 - 次级容器 - hover
+  --td-bg-color-secondarycontainer-active: var(--td-gray-color-9);   // 色彩 - 次级容器 - active
+  
+  --td-bg-color-component: var(--td-gray-color-11);                   // 色彩  - 组件
+  --td-bg-color-component-hover: var(--td-gray-color-10);             // 色彩 - 组件 - hover
+  --td-bg-color-component-active: var(--td-gray-color-9);             // 色彩 - 组件 - active
+  --td-bg-color-component-disabled: var(--td-gray-color-12);          // 色彩 - 组件 - disabled
+  
+  // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+  --td-bg-color-specialcomponent: transparent;   
+  
+  // 文本颜色
+  --td-text-color-primary: var(--td-font-white-1);      // 色彩-文字-主要
+  --td-text-color-secondary: var(--td-font-white-2);    // 色彩-文字-次要
+  --td-text-color-placeholder: var(--td-font-white-3);  // 色彩-文字-占位符/说明
+  --td-text-color-disabled: var(--td-font-white-4);    // 色彩-文字-禁用
+  --td-text-color-anti: #fff;                      // 色彩-文字-反色
+  --td-text-color-brand: var(--td-brand-color-8);           // 色彩-文字-品牌
+  --td-text-color-link: var(--td-brand-color-8);            // 色彩-文字-链接
+  
+  // 分割线
+  --td-border-level-1-color: var(--td-gray-color-11);
+  --td-component-stroke: var(--td-gray-color-11);
+  // 边框
+  --td-border-level-2-color: var(--td-gray-color-9);
+  --td-component-border: var(--td-gray-color-9);
+  
+  // 基础/下层 投影 hover 使用的组件包括：表格 /
+  --td-shadow-1: 0px 4px 6px rgba(0, 0, 0, .06), 0px 1px 10px rgba(0, 0, 0, .08), 0px 2px 4px rgba(0, 0, 0, .12);
+  // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
+  --td-shadow-2: 0px 8px 10px rgba(0, 0, 0, .12), 0px 3px 14px rgba(0, 0, 0, .1), 0px 5px 5px rgba(0, 0, 0, .16);
+  // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
+  --td-shadow-3: 0px 16px 24px rgba(0, 0, 0, .14), 0px 6px 30px rgba(0, 0, 0, .12), 0px 8px 10px rgba(0, 0, 0, .2);
+  // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
+    
+  --td-shadow-inset-top: inset 0px .5px 0px #5E5E5E;
+  --td-shadow-inset-right: inset .5px 0px 0px #5E5E5E;
+  --td-shadow-inset-bottom: inset 0px -.5px 0px #5E5E5E;
+  --td-shadow-inset-left: inset -.5px 0px 0px #5E5E5E;
+  
+  // table 特定阴影
+  --td-table-shadow-color: rgba(0, 0, 0, .55);
+  
+  // 滚动条颜色
+  --td-scrollbar-color: rgba(255, 255, 255, .1);
+}
\ No newline at end of file
diff --git a/src/style/theme/green.less b/src/style/theme/green.less
new file mode 100644
index 0000000..abe5b31
--- /dev/null
+++ b/src/style/theme/green.less
@@ -0,0 +1,14 @@
+:root[theme-color='green'],
+:root[theme-color='green'][theme-mode='dark'] {
+  --td-brand-color: #00A870;
+  --td-brand-color-1: #DFF7ED;
+  --td-brand-color-2: #A9E8CD;
+  --td-brand-color-3: #69D5AB;
+  --td-brand-color-4: #30BF8B;
+  --td-brand-color-5: #00A870;
+  --td-brand-color-6: #00935D;
+  --td-brand-color-7: #007E4A;
+  --td-brand-color-8: #006937;
+  --td-brand-color-9: #005426;
+  --td-brand-color-10: #004114;
+}
\ No newline at end of file
diff --git a/src/style/theme/index.less b/src/style/theme/index.less
new file mode 100644
index 0000000..6d4e87f
--- /dev/null
+++ b/src/style/theme/index.less
@@ -0,0 +1,17 @@
+@import './cyan.less';
+
+@import './green.less';
+
+@import './light.less';
+
+@import './orange.less';
+
+@import './pink.less';
+
+@import './purple.less';
+
+@import './red.less';
+
+@import './yellow.less';
+
+@import './dark.less';
diff --git a/src/style/theme/light.less b/src/style/theme/light.less
new file mode 100644
index 0000000..9e0557f
--- /dev/null
+++ b/src/style/theme/light.less
@@ -0,0 +1,169 @@
+:root,
+:root[theme-mode='light'] {
+  --td-brand-color-8: #0052D9;
+  --td-brand-color-1: #ECF2FE;
+  --td-brand-color-2: #D4E3FC;
+  --td-brand-color-3: #BBD3FB;
+  --td-brand-color-4: #96BBF8;
+  --td-brand-color-5: #699EF5;
+  --td-brand-color-6: #4787F0;
+  --td-brand-color-7: #266FE8;
+  --td-brand-color-8: #0052D9;
+  --td-brand-color-9: #0034B5;
+  --td-brand-color-10: #001F97;
+
+  --td-warning-color-1: #FEF3E6;
+  --td-warning-color-2: #F9E0C7;
+  --td-warning-color-3: #F7C797;
+  --td-warning-color-4: #F2995F;
+  --td-warning-color-5: #ED7B2F;
+  --td-warning-color-6: #D35A21;
+  --td-warning-color-7: #BA431B;
+  --td-warning-color-8: #9E3610;
+  --td-warning-color-9: #842B0B;
+  --td-warning-color-10: #5A1907;
+
+  --td-error-color-1: #FDECEE;
+  --td-error-color-2: #F9D7D9;
+  --td-error-color-3: #F8B9BE;
+  --td-error-color-4: #F78D94;
+  --td-error-color-5: #F36D78;
+  --td-error-color-6: #E34D59;
+  --td-error-color-7: #C9353F;
+  --td-error-color-8: #B11F26;
+  --td-error-color-9: #951114;
+  --td-error-color-10: #680506;
+
+  --td-success-color-1: #E8F8F2;
+  --td-success-color-2: #BCEBDC;
+  --td-success-color-3: #85DBBE;
+  --td-success-color-4: #48C79C;
+  --td-success-color-5: #00A870;
+  --td-success-color-6: #078D5C;
+  --td-success-color-7: #067945;
+  --td-success-color-8: #056334;
+  --td-success-color-9: #044F2A;
+  --td-success-color-10: #033017;
+
+  --td-gray-color-1: #F3F3F3;
+  --td-gray-color-2: #EEEEEE;
+  --td-gray-color-3: #E7E7E7;
+  --td-gray-color-4: #DCDCDC;
+  --td-gray-color-5: #C5C5C5;
+  --td-gray-color-6: #A6A6A6;
+  --td-gray-color-7: #8B8B8B;
+  --td-gray-color-8: #777777;
+  --td-gray-color-9: #5E5E5E;
+  --td-gray-color-10: #4B4B4B;
+  --td-gray-color-11: #383838;
+  --td-gray-color-12: #2C2C2C;
+  --td-gray-color-13: #242424;
+  --td-gray-color-14: #181818;
+
+  // 文字 & 图标 颜色
+  --td-font-white-1: rgba(255, 255, 255, 1);
+  --td-font-white-2: rgba(255, 255, 255, .55);
+  --td-font-white-3: rgba(255, 255, 255, .35);
+  --td-font-white-4: rgba(255, 255, 255, .22);
+
+  --td-font-gray-1: rgba(0, 0, 0, .9);
+  --td-font-gray-2: rgba(0, 0, 0, .6);
+  --td-font-gray-3: rgba(0, 0, 0, .4);
+  --td-font-gray-4: rgba(0, 0, 0, .26);
+
+  // 基础颜色
+  --td-brand-color: var(--td-brand-color-8);     // 色彩-品牌-可操作
+  --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
+  --td-error-color: var(--td-error-color-6);     // 色彩-功能-失败
+  --td-success-color: var(--td-success-color-5); // 色彩-功能-成功
+
+
+  // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
+  --td-brand-color-hover: var(--td-brand-color-7);     // hover态
+  --td-brand-color-focus: var(--td-brand-color-2);     // focus态，包括鼠标和键盘
+  --td-brand-color-active: var(--td-brand-color-9);    // 点击态
+  --td-brand-color-disabled: var(--td-brand-color-3);  // 禁用态
+  --td-brand-color-light: var(--td-brand-color-1);     // 浅色的选中态
+
+  // 警告色扩展
+  --td-warning-color-hover: var(--td-warning-color-4);
+  --td-warning-color-focus: var(--td-warning-color-2);
+  --td-warning-color-active: var(--td-warning-color-6);
+  --td-warning-color-disabled: var(--td-warning-color-3);
+  --td-warning-color-light: var(--td-warning-color-1);
+
+  // 失败/错误色扩展
+  --td-error-color-hover: var(--td-error-color-5);
+  --td-error-color-focus: var(--td-error-color-2);
+  --td-error-color-active: var(--td-error-color-7);
+  --td-error-color-disabled: var(--td-error-color-3);
+  --td-error-color-light: var(--td-error-color-1);
+
+  // 成功色扩展
+  --td-success-color-hover: var(--td-success-color-4);
+  --td-success-color-focus: var(--td-success-color-2);
+  --td-success-color-active: var(--td-success-color-6);
+  --td-success-color-disabled: var(--td-success-color-3);
+  --td-success-color-light: var(--td-success-color-1);
+
+  // 遮罩
+  --td-mask-active: rgba(0, 0, 0, .6); // 遮罩-弹出
+  --td-mask-disabled: rgba(255, 255, 255, .6); // 遮罩-禁用
+
+  // 背景色
+  --td-bg-color-page: var(--td-gray-color-2);                        // 色彩 - page
+  --td-bg-color-container: #fff;                                // 色彩 - 容器                       
+  --td-bg-color-container-hover: var(--td-gray-color-1);             // 色彩 - 容器 - hover
+  --td-bg-color-container-active: var(--td-gray-color-3);            // 色彩 - 容器 - active
+  --td-bg-color-container-select: #fff;                         // 色彩 - 容器 - select
+
+  --td-bg-color-secondarycontainer: var(--td-gray-color-1);          // 色彩 - 次级容器
+  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);    // 色彩 - 次级容器 - hover
+  --td-bg-color-secondarycontainer-active: var(--td-gray-color-4);   // 色彩 - 次级容器 - active
+
+  --td-bg-color-component: var(--td-gray-color-3);                   // 色彩 - 组件
+  --td-bg-color-component-hover: var(--td-gray-color-4);             // 色彩 - 组件 - hover
+  --td-bg-color-component-active: var(--td-gray-color-6);            // 色彩 - 组件 - active
+  --td-bg-color-component-disabled: var(--td-gray-color-2);          // 色彩 - 组件 - disabled
+
+  // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+  --td-bg-color-specialcomponent: #fff;        
+
+  // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+  --td-bg-color-specialcomponent: #fff;        
+
+  // 文本颜色
+  --td-text-color-primary: var(--td-font-gray-1);      // 色彩-文字-主要
+  --td-text-color-secondary: var(--td-font-gray-2);    // 色彩-文字-次要
+  --td-text-color-placeholder: var(--td-font-gray-3);  // 色彩-文字-占位符/说明
+  --td-text-color-disabled: var(--td-font-gray-4);    // 色彩-文字-禁用
+  --td-text-color-anti: #fff;                      // 色彩-文字-反色
+  --td-text-color-brand: var(--td-brand-color-8);           // 色彩-文字-品牌
+  --td-text-color-link: var(--td-brand-color-8);            // 色彩-文字-链接
+
+  // 分割线
+  --td-border-level-1-color: var(--td-gray-color-3);
+  --td-component-stroke: var(--td-gray-color-3);
+  // 边框
+  --td-border-level-2-color: var(--td-gray-color-4);
+  --td-component-border: var(--td-gray-color-4);
+
+  // 基础/下层 投影 hover 使用的组件包括：表格 /
+  --td-shadow-1: 0px 1px 10px rgba(0, 0, 0, .05), 0px 4px 5px rgba(0, 0, 0, .08), 0px 2px 4px -1px rgba(0, 0, 0, .12);
+  // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
+  --td-shadow-2: 0px 3px 14px 2px rgba(0, 0, 0, .05), 0px 8px 10px 1px rgba(0, 0, 0, .06), 0px 5px 5px -3px rgba(0, 0, 0, .1);
+  // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
+  --td-shadow-3: 0px 6px 30px 5px rgba(0, 0, 0, .05), 0px 16px 24px 2px rgba(0, 0, 0, .04), 0px 8px 10px -5px rgba(0, 0, 0, .08);
+
+  // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
+  --td-shadow-inset-top: inset 0px .5px 0px #DCDCDC;
+  --td-shadow-inset-right: inset .5px 0px 0px #DCDCDC;
+  --td-shadow-inset-bottom: inset 0px -.5px 0px #DCDCDC;
+  --td-shadow-inset-left: inset -.5px 0px 0px #DCDCDC;
+  
+  // table 特定阴影
+  --td-table-shadow-color: rgba(0, 0, 0, .08);
+
+  // 滚动条颜色
+  --td-scrollbar-color: rgba(0, 0, 0, .1);
+}
diff --git a/src/style/theme/orange.less b/src/style/theme/orange.less
new file mode 100644
index 0000000..1a46533
--- /dev/null
+++ b/src/style/theme/orange.less
@@ -0,0 +1,14 @@
+:root[theme-color='orange'],
+:root[theme-color='orange'][theme-mode='dark'] {
+  --td-brand-color-1: #FFEFDB;
+  --td-brand-color-2: #FFD3A3;
+  --td-brand-color-3: #FFB473;
+  --td-brand-color-4: #FF9247;
+  --td-brand-color-5: #ED7B2F;
+  --td-brand-color-6: #D6621C;
+  --td-brand-color-7: #C24C08;
+  --td-brand-color-8: #A23C00;
+  --td-brand-color-9: #872D00;
+  --td-brand-color-10: #691F00;
+  --td-brand-color: #C24C08;
+}
\ No newline at end of file
diff --git a/src/style/theme/pink.less b/src/style/theme/pink.less
new file mode 100644
index 0000000..aa73a73
--- /dev/null
+++ b/src/style/theme/pink.less
@@ -0,0 +1,14 @@
+:root[theme-color='pink'],
+:root[theme-color='pink'][theme-mode='dark'] {
+  --td-brand-color: #ED49B4;
+  --td-brand-color-1: #FFE9FF;
+  --td-brand-color-2: #FFD1FC;
+  --td-brand-color-3: #FFB2F2;
+  --td-brand-color-4: #FF8FE1;
+  --td-brand-color-5: #FF66CC;
+  --td-brand-color-6: #ED49B4;
+  --td-brand-color-7: #D42C9D;
+  --td-brand-color-8: #BC0088;
+  --td-brand-color-9: #9B006B;
+  --td-brand-color-10: #7B0052;
+}
\ No newline at end of file
diff --git a/src/style/theme/purple.less b/src/style/theme/purple.less
new file mode 100644
index 0000000..9601266
--- /dev/null
+++ b/src/style/theme/purple.less
@@ -0,0 +1,14 @@
+:root[theme-color='purple'],
+:root[theme-color='purple'][theme-mode='dark'] {
+  --td-brand-color: #834EC2;
+  --td-brand-color-1: #F3E0FF;
+  --td-brand-color-2: #E6C4FF;
+  --td-brand-color-3: #D8ABFF;
+  --td-brand-color-4: #C68CFF;
+  --td-brand-color-5: #AE78F0;
+  --td-brand-color-6: #9963D8;
+  --td-brand-color-7: #834EC2;
+  --td-brand-color-8: #6D3BAC;
+  --td-brand-color-9: #572796;
+  --td-brand-color-10: #421381;
+}
\ No newline at end of file
diff --git a/src/style/theme/red.less b/src/style/theme/red.less
new file mode 100644
index 0000000..1f9e3b7
--- /dev/null
+++ b/src/style/theme/red.less
@@ -0,0 +1,14 @@
+:root[theme-color='red'],
+:root[theme-color='red'][theme-mode='dark'] {
+  --td-brand-color: #E34D59;
+  --td-brand-color-1: #FFE9E9;
+  --td-brand-color-2: #FFCCCE;
+  --td-brand-color-3: #FFACAF;
+  --td-brand-color-4: #FF888C;
+  --td-brand-color-5: #FB646D;
+  --td-brand-color-6: #E34D59;
+  --td-brand-color-7: #C93043;
+  --td-brand-color-8: #B01531;
+  --td-brand-color-9: #960022;
+  --td-brand-color-10: #730021;
+}
\ No newline at end of file
diff --git a/src/style/theme/yellow.less b/src/style/theme/yellow.less
new file mode 100644
index 0000000..385d193
--- /dev/null
+++ b/src/style/theme/yellow.less
@@ -0,0 +1,14 @@
+:root[theme-color='yellow'],
+:root[theme-color='yellow'][theme-mode='dark'] {
+  --td-brand-color: #EBB105;
+  --td-brand-color-1: #FFF8B8;
+  --td-brand-color-2: #FFE478;
+  --td-brand-color-3: #FBCA25;
+  --td-brand-color-4: #EBB105;
+  --td-brand-color-5: #D29C00;
+  --td-brand-color-6: #BA8700;
+  --td-brand-color-7: #A37200;
+  --td-brand-color-8: #8C5F00;
+  --td-brand-color-9: #754C00;
+  --td-brand-color-10: #5E3A00;
+}
\ No newline at end of file
diff --git a/src/utils/date.ts b/src/utils/date.ts
index c6be642..502ba4e 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,6 +1,6 @@
 // 获取常用时间
 import dayjs, { Dayjs } from 'dayjs';
 
-export const LAST_7_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(7, 'day'), dayjs().subtract(1, 'day')];
+export const LAST_7_DAYS = [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')];
 
-export const LAST_30_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(30, 'day'), dayjs().subtract(1, 'day')];
+export const LAST_30_DAYS = [dayjs().subtract(30, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')];
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index 818025d..0fe3715 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -3,12 +3,12 @@ import * as echarts from 'echarts/core';
 
 /**
  * eChart hook
- * @param domId 
- * @param chart 
+ * @param domId
+ * @param chart
  */
-export const useChart = (domId: string) => {
+export const useChart = (domId: string): Ref<echarts.ECharts> => {
   let chartContainer: HTMLCanvasElement;
-  const selfChart = ref<echarts.ECharts>();
+  const selfChart = ref<echarts.ECharts | any>();
   const updateContainer = () => {
     selfChart.value.resize({
       width: chartContainer.clientWidth,
@@ -23,40 +23,39 @@ export const useChart = (domId: string) => {
     selfChart.value = echarts.init(chartContainer);
   });
 
-
   window.addEventListener('resize', updateContainer, false);
 
   onUnmounted(() => {
     window.removeEventListener('resize', updateContainer);
   });
 
-  return selfChart
+  return selfChart;
 };
 
 /**
  * counter utils
- * @param duration 
- * @returns 
+ * @param duration
+ * @returns
  */
-export const useCounter = (duration: number = 60): [
-  Ref<number>, () => void
-] => {
-  let intervalTimer = null;
+export const useCounter = (duration = 60): [Ref<number>, () => void] => {
+  let intervalTimer: NodeJS.Timer;
   onMounted(() => {
-    clearInterval(intervalTimer)
-  })
+    clearInterval(intervalTimer);
+  });
   const countDown = ref(0);
 
-  return [countDown, () => {
-    countDown.value = duration;
-    intervalTimer = setInterval(() => {
-      if (countDown.value > 0) {
-        countDown.value -= 1;
-      } else {
-        clearInterval(intervalTimer);
-        countDown.value = 0;
-        intervalTimer = null;
-      }
-    }, 1000)
-  }];
-}
\ No newline at end of file
+  return [
+    countDown,
+    () => {
+      countDown.value = duration;
+      intervalTimer = setInterval(() => {
+        if (countDown.value > 0) {
+          countDown.value -= 1;
+        } else {
+          clearInterval(intervalTimer);
+          countDown.value = 0;
+        }
+      }, 1000);
+    },
+  ];
+};
diff --git a/src/utils/request.js b/src/utils/request.js
index b205577..38bdcbb 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,7 +17,7 @@ const instance = axios.create({
   withCredentials: true,
 });
 
-instance.interceptors.request.use(config => config);
+instance.interceptors.request.use((config) => config);
 
 instance.defaults.retry = 3;
 
@@ -28,8 +28,8 @@ instance.interceptors.response.use(
       if (data.code === CODE.REQUEST_SUCCESS) {
         return data;
       }
-      return response;
     }
+    return response;
   },
   (err) => {
     const { config } = err;
diff --git a/tsconfig.json b/tsconfig.json
index 03910f9..dfcc6b2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
-    "strict": false,
+    "strict": true,
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
@@ -12,8 +12,9 @@
     "noEmit": true,
     "baseUrl": "./",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["src/*"]
     }
   },
-  "include": ["**/*.ts", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["**/*.ts", "src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "compileOnSave": false
 }
diff --git a/vite.config.ts b/vite.config.ts
index b34f8f6..d1ab1c6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,38 +1,19 @@
 import { defineConfig } from 'vite';
 import { viteMockServe } from 'vite-plugin-mock';
-import { viteThemePlugin } from 'vite-plugin-theme';
 import createVuePlugin from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import svgLoader from 'vite-svg-loader';
 
-// import HttpProxyAgent from 'http-proxy-agent';
 import path from 'path';
 
-// import proxy from './src/config/proxy';
-import { getColorList, getGreyColor, getBrandColor } from './src/config/color';
-import USER_CONFIG from './src/config/style';
-
-const { brandTheme, backgroundTheme } = USER_CONFIG;
-
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
     alias: {
-      '~': path.resolve(__dirname, './'),
       '@': path.resolve(__dirname, './src'),
     },
   },
 
-  css: {
-    preprocessorOptions: {
-      less: {
-        modifyVars: {
-          ...getBrandColor(brandTheme),
-          ...getGreyColor(backgroundTheme),
-        },
-      },
-    },
-  },
 
   plugins: [
     createVuePlugin(),
@@ -41,9 +22,6 @@ export default defineConfig({
       mockPath: 'mock',
       localEnabled: true,
     }),
-    viteThemePlugin({
-      colorVariables: getColorList([getGreyColor(backgroundTheme), getBrandColor(brandTheme)]),
-    }),
     svgLoader(),
   ],