fix: echarts resize error (#28)

* fix: echarts resize error

* chore: remove useless code

* feat: update icon

* feat: compress bg img

* docs: readme update

README.md

@@ -56,46 +56,19 @@ npm run build
 // 项目预览
 npm run preview
 
-// 项目lint
+// 项目 eslint
 npm run lint
 
-// 修复lint
+// 修复 eslint
 npm run lint:fix
 
-```
+// 项目 stylelint
+npm run stylelint
 
-<br/>
+// 修复 stylelint
-
+npm run stylelint:fix
-## 路由和菜单
-
-菜单（侧边栏和面包屑）由路由配置自动生成，根据路由变化可自动匹配，开发者无需手动处理这些逻辑。
-可在<a href="./src/config/routes.js">src/config/routes.js</a>文件中修改。
-
-菜单和路由的映射如下：
 
 ```
-    {
-        path: '/dashboard',
-        icon: 'chart-pie',
-        title: '仪表板',
-        component: '../layouts/default.vue',
-        children: [
-            {
-                title: '概览仪表盘',
-                path: 'base',
-                component: '../pages/demo.vue',
-                children: [            {
-                    title: '概览仪表盘',
-                    path: 'base',
-                    component: '../pages/demo.vue',
-                }]
-            }
-        ]
-    }
-
-```
-
-路由使用 `vue-router`
 
 <br/>
 

src/assets/assets-logo-full.svg

@@ -1,4 +1,4 @@
-<svg width="188" height="26" viewBox="0 0 188 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1em" height="1em" viewBox="0 0 188 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M77.7301 8.34426H80.6699L78.3234 21.7922H75.3799L77.7301 8.34426Z" fill="currentcolor"/>
 <path d="M78.5992 3.09961H81.6221L81.0742 6.12246H78.0513L78.5992 3.09961Z" fill="currentcolor"/>
 <path d="M32.5765 6.46921H36.937L37.4131 3.82422H25.4615L24.9854 6.46921H29.3723L26.6706 21.7913H29.8559L32.5765 6.46921Z" fill="currentcolor"/>

src/assets/assets-t-logo.svg

@@ -1,4 +1,4 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1em" height="1em" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2557_23660)">
 <path d="M9.14038 8.25177H3.53919C3.45719 8.25173 3.37619 8.23372 3.30188 8.19901C3.22758 8.16431 3.16179 8.11375 3.10912 8.05089C3.05646 7.98803 3.01819 7.91439 2.99703 7.83516C2.97587 7.75593 2.97234 7.67303 2.98665 7.59228L3.87785 2.44561C3.90079 2.32052 3.96685 2.20742 4.06455 2.12601C4.16225 2.04459 4.2854 2.00001 4.41258 2.00001H10.2054L9.14038 8.25177Z" fill="url(#paint0_linear_2557_23660)"/>
 <path d="M13.0301 21.4727H6.77832L9.11772 8.2473H15.3695L13.0301 21.4727Z" fill="url(#paint1_linear_2557_23660)"/>

src/config/color.ts

@@ -52,68 +52,68 @@ const COLOR_TOKEN: ColorSeries = {
   },
   CYAN: {
     '@brand-color': '#0594FA',
-    '@brand-color-1': '#D6F7FF',
+    '@brand-color-1': '#d6f7ff',
-    '@brand-color-2': '#85DAFF',
+    '@brand-color-2': '#b2ecff',
-    '@brand-color-3': '#BBD3FB',
+    '@brand-color-3': '#85daff',
-    '@brand-color-4': '#96BBF8',
+    '@brand-color-4': '#5cc5fc',
-    '@brand-color-5': '#699EF5',
+    '@brand-color-5': '#31adfb',
-    '@brand-color-6': '#4787F0',
+    '@brand-color-6': '#0594fa',
-    '@brand-color-7': '#266FE8',
+    '@brand-color-7': '#007edf',
-    '@brand-color-8': '#0052D9',
+    '@brand-color-8': '#0068c0',
-    '@brand-color-9': '#0034B5',
+    '@brand-color-9': '#00549e',
-    '@brand-color-10': '#001F97',
+    '@brand-color-10': '#00417d',
   },
   GREEN: {
-    '@brand-color': '#00A870',
+    '@brand-color': '#00a870',
-    '@brand-color-1': '#ECF2FE',
+    '@brand-color-1': '#dff7ed',
-    '@brand-color-2': '#D4E3FC',
+    '@brand-color-2': '#a9e8cd',
-    '@brand-color-3': '#BBD3FB',
+    '@brand-color-3': '#69d5ab',
-    '@brand-color-4': '#96BBF8',
+    '@brand-color-4': '#30bf8b',
-    '@brand-color-5': '#699EF5',
+    '@brand-color-5': '#00a870',
-    '@brand-color-6': '#4787F0',
+    '@brand-color-6': '#00935d',
-    '@brand-color-7': '#266FE8',
+    '@brand-color-7': '#007e4a',
-    '@brand-color-8': '#0052D9',
+    '@brand-color-8': '#006937',
-    '@brand-color-9': '#0034B5',
+    '@brand-color-9': '#005426',
-    '@brand-color-10': '#001F97',
+    '@brand-color-10': '#004114',
   },
   ORANGE: {
     '@brand-color': '#ED7B2F',
-    '@brand-color-1': '#ECF2FE',
+    '@brand-color-1': '#ffefdb',
-    '@brand-color-2': '#D4E3FC',
+    '@brand-color-2': '#ffd3a3',
-    '@brand-color-3': '#BBD3FB',
+    '@brand-color-3': '#ffb473',
-    '@brand-color-4': '#96BBF8',
+    '@brand-color-4': '#ff9247',
-    '@brand-color-5': '#699EF5',
+    '@brand-color-5': '#ed7b2f',
-    '@brand-color-6': '#4787F0',
+    '@brand-color-6': '#d6621c',
-    '@brand-color-7': '#266FE8',
+    '@brand-color-7': '#c24c08',
-    '@brand-color-8': '#0052D9',
+    '@brand-color-8': '#a23c00',
-    '@brand-color-9': '#0034B5',
+    '@brand-color-9': '#872d00',
-    '@brand-color-10': '#001F97',
+    '@brand-color-10': '#691f00',
   },
   RED: {
     '@brand-color': '#E34D59',
-    '@brand-color-1': '#ECF2FE',
+    '@brand-color-1': '#ffe9e9',
-    '@brand-color-2': '#D4E3FC',
+    '@brand-color-2': '#ffccce',
-    '@brand-color-3': '#BBD3FB',
+    '@brand-color-3': '#ffacaf',
-    '@brand-color-4': '#96BBF8',
+    '@brand-color-4': '#ff888c',
-    '@brand-color-5': '#699EF5',
+    '@brand-color-5': '#fb646d',
-    '@brand-color-6': '#4787F0',
+    '@brand-color-6': '#e34d59',
-    '@brand-color-7': '#266FE8',
+    '@brand-color-7': '#c93043',
-    '@brand-color-8': '#0052D9',
+    '@brand-color-8': '#b01531',
-    '@brand-color-9': '#0034B5',
+    '@brand-color-9': '#960022',
-    '@brand-color-10': '#001F97',
+    '@brand-color-10': '#730021',
   },
   PINK: {
     '@brand-color': '#ED49B4',
-    '@brand-color-1': '#ECF2FE',
+    '@brand-color-1': '#ffe9ff',
-    '@brand-color-2': '#D4E3FC',
+    '@brand-color-2': '#ffd1fc',
-    '@brand-color-3': '#BBD3FB',
+    '@brand-color-3': '#ffb2f2',
-    '@brand-color-4': '#96BBF8',
+    '@brand-color-4': '#ff8fe1',
-    '@brand-color-5': '#699EF5',
+    '@brand-color-5': '#f6c',
-    '@brand-color-6': '#4787F0',
+    '@brand-color-6': '#ed49b4',
-    '@brand-color-7': '#266FE8',
+    '@brand-color-7': '#d42c9d',
-    '@brand-color-8': '#0052D9',
+    '@brand-color-8': '#bc0088',
-    '@brand-color-9': '#0034B5',
+    '@brand-color-9': '#9b006b',
-    '@brand-color-10': '#001F97',
+    '@brand-color-10': '#7b0052',
   },
   PURPLE: {
     '@brand-color': '#834ec2',
@@ -157,8 +157,8 @@ export function getBrandColor(type: string): ColorToken {
   return COLOR_TOKEN[name] || COLOR_TOKEN.DEFAULT;
 }
 
-export function getColorList(colorArray: ColorToken[]): string[] {
+export function getColorList(colorArray: [ColorToken]): string[] {
-  const pureColorList: string[] = [];
+  const pureColorList = [];
   colorArray.map((colorToken) => Object.keys(colorToken).map((key) => pureColorList.push(colorToken[key])));
 
   return pureColorList;

src/layouts/blank.vue

@@ -3,13 +3,6 @@
     <router-view />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {},
-});
-</script>
 <style lang="less">
 .tdesign-wrapper {
   height: 100vh;

src/layouts/components/Content.vue

@@ -5,12 +5,6 @@
     </transition>
   </router-view>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
 <style lang="less" scoped>
 @import '@/style/variables';
 

src/layouts/components/SideNav.tsx

@@ -4,7 +4,7 @@ import { useStore } from 'vuex';
 import { PREFIX } from '@/config/global';
 import pgk from '../../../package.json';
 import SubMenu from './SubMenu';
-import tLogoUrl from '@/assets/assets-t-logo.svg?url';
+import tLogo from '@/assets/assets-t-logo.svg?component';
 import tLogoFull from '@/assets/assets-logo-full.svg?component';
 
 const MIN_POINT = 992 - 1;
@@ -54,6 +54,7 @@ export default defineComponent({
   components: {
     SubMenu,
     tLogoFull,
+    tLogo,
   },
   props: {
     menu: {
@@ -151,7 +152,7 @@ export default defineComponent({
               this.showLogo && (
                 <span class={`${PREFIX}-side-nav-logo-wrapper`} onClick={this.goHome}>
                   {this.collapsed ? (
-                    <img class={`${PREFIX}-side-nav-logo-t-logo`} src={tLogoUrl as string} />
+                    <tLogo class={`${PREFIX}-side-nav-logo-t-logo`} />
                   ) : (
                     <t-logo-full class={`${PREFIX}-side-nav-logo-tdesign-logo`} />
                   )}

src/pages/dashboard/base/index.less

@@ -93,7 +93,3 @@
 .row-container {
   margin-top: 16px;
 }
-
-.card-date-picker-container {
-  width: 240px;
-}

src/pages/dashboard/base/index.ts

@@ -76,8 +76,8 @@ export function getRandomArray(num = 100) {
   return resultNum;
 }
 
-/** 首页 dashbord 折线图 */
+/** 首页 dashboard 折线图 */
-export function constructInitDashbordDataset(type: string) {
+export function constructInitDashboardDataset(type: string) {
   const dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
   const datasetAxis = {
     xAxis: {
@@ -355,8 +355,8 @@ export function getSmoothLineDataSet(dateTime = []) {
 export function getFolderLineDataSet(dateTime?: string[]) {
   let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
   if (dateTime && dateTime.length > 0) {
-    const devideNum = 7;
+    const divideNum = 7;
-    dateArray = getDateArray(dateTime, devideNum);
+    dateArray = getDateArray(dateTime, divideNum);
   }
 
   return {
@@ -1107,18 +1107,18 @@ export function getPieChartDataSet(radius = 42) {
  */
 export function changeChartsTheme(chartsList: echarts.EChartsType[]) {
   if (chartsList && chartsList.length) {
-    const chartChangeColor: any = chartListColor();
+    const chartChangeColor = chartListColor();
 
     for (let index = 0; index < chartsList.length; index++) {
-      const elementChart: any = chartsList[index];
+      const elementChart = chartsList[index];
 
       if (elementChart) {
-        const optionVal: any = elementChart.getOption();
+        const optionVal = elementChart.getOption();
 
         // 更改主题颜色
         optionVal.color = chartChangeColor;
 
-        elementChart.setOption(optionVal);
+        elementChart.setOption(optionVal, true);
       }
     }
   }

src/pages/dashboard/base/index.vue

@@ -147,7 +147,7 @@
                 mode="date"
                 range
                 :default-value="LAST_7_DAYS"
-                @change="onWharehouseChange"
+                @change="onStokeDataChange"
               />
             </template>
             <div
@@ -203,7 +203,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, watch, ref } from 'vue';
+import { defineComponent, onMounted, watch, ref, onUnmounted } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -211,7 +211,6 @@ import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/compon
 import { PieChart, LineChart, BarChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { LAST_7_DAYS } from '@/utils/date';
-import { useChart } from '@/utils/hooks';
 
 // 导入样式
 import Trend from '@/components/trend/index.vue';
@@ -221,7 +220,7 @@ import {
   constructInitDataset,
   getPieChartDataSet,
   getLineChartDataSet,
-  constructInitDashbordDataset,
+  constructInitDashboardDataset,
 } from './index';
 
 import { PANE_LIST, SALE_TEND_LIST, BUY_TEND_LIST, SALE_COLUMNS, BUY_COLUMNS } from './constants';
@@ -247,36 +246,90 @@ export default defineComponent({
     Trend,
   },
   setup() {
-    const refundCharts = useChart('refundContainer');
+    // refundCharts
-    const moneyCharts = useChart('moneyContainer');
+    let refundContainer: HTMLElement;
-    const stokeCharts = useChart('stokeContainer');
+    let refundChart: echarts.ECharts;
-    const monitorChart = useChart('monitorContainer');
+    onMounted(() => {
-    const countChart = useChart('countContainer');
+      refundContainer = document.getElementById('refundContainer');
-    const initCharts = () => {
+      refundChart = echarts.init(refundContainer);
-      refundCharts.value.setOption(constructInitDashbordDataset('bar'));
+      refundChart.setOption(constructInitDashboardDataset('bar'));
-      moneyCharts.value.setOption(constructInitDashbordDataset('line'));
+    });
-      stokeCharts.value.setOption(constructInitDataset(LAST_7_DAYS));
+
-      monitorChart.value.setOption(getLineChartDataSet());
+    // moneyCharts
-      countChart.value.setOption(getPieChartDataSet());
+    let moneyContainer: HTMLElement;
+    let moneyChart: echarts.ECharts;
+    onMounted(() => {
+      moneyContainer = document.getElementById('moneyContainer');
+      moneyChart = echarts.init(moneyContainer);
+      moneyChart.setOption(constructInitDashboardDataset('line'));
+    });
+
+    // stokeCharts
+    let stokeContainer: HTMLElement;
+    let stokeChart: echarts.ECharts;
+    onMounted(() => {
+      stokeContainer = document.getElementById('stokeContainer');
+      stokeChart = echarts.init(stokeContainer);
+      stokeChart.setOption(constructInitDataset(LAST_7_DAYS));
+    });
+
+    // monitorChart
+    let monitorContainer: HTMLElement;
+    let monitorChart: echarts.ECharts;
+    onMounted(() => {
+      monitorContainer = document.getElementById('monitorContainer');
+      monitorChart = echarts.init(monitorContainer);
+      monitorChart.setOption(getLineChartDataSet());
+    });
+
+    // monitorChart
+    let countContainer: HTMLElement;
+    let countChart: echarts.ECharts;
+    onMounted(() => {
+      countContainer = document.getElementById('countContainer');
+      countChart = echarts.init(countContainer);
+      countChart.setOption(getPieChartDataSet());
+    });
+
+    // chartSize update
+    const updateContainer = () => {
+      refundChart.resize({
+        width: refundContainer.clientWidth,
+        height: refundContainer.clientHeight,
+      });
+      moneyChart.resize({
+        width: moneyContainer.clientWidth,
+        height: moneyContainer.clientHeight,
+      });
+      stokeChart.resize({
+        width: stokeContainer.clientWidth,
+        height: stokeContainer.clientHeight,
+      });
+      monitorChart.resize({
+        width: monitorContainer.clientWidth,
+        height: monitorContainer.clientHeight,
+      });
+      countChart.resize({
+        width: countContainer.clientWidth,
+        height: countContainer.clientHeight,
+      });
     };
 
-    const currentMonth = ref(getThisMonth());
-
     onMounted(() => {
-      initCharts();
+      window.addEventListener('resize', updateContainer, false);
     });
 
+    onUnmounted(() => {
+      window.removeEventListener('resize', updateContainer);
+    });
+
+    const currentMonth = ref(getThisMonth());
+
     const store = useStore();
     watch(
       () => store.state.setting.brandTheme,
       () => {
-        changeChartsTheme([
+        changeChartsTheme([refundChart, moneyChart, stokeChart, monitorChart, countChart]);
-          refundCharts.value,
-          moneyCharts.value,
-          stokeCharts.value,
-          monitorChart.value,
-          countChart.value,
-        ]);
       },
     );
 
@@ -290,10 +343,10 @@ export default defineComponent({
       BUY_COLUMNS,
       onCurrencyChange(checkedValues: string[]) {
         currentMonth.value = getThisMonth(checkedValues);
-        monitorChart.value.setOption(getLineChartDataSet(checkedValues));
+        monitorChart.setOption(getLineChartDataSet(checkedValues));
       },
-      onWharehouseChange(checkedValues: string[]) {
+      onStokeDataChange(checkedValues: string[]) {
-        stokeCharts.value.setOption(constructInitDataset(checkedValues));
+        stokeChart.setOption(constructInitDataset(checkedValues));
       },
       rehandleClickOp(val: MouseEvent) {
         console.log(val);

src/pages/dashboard/detail/index.less

@@ -4,10 +4,6 @@
   margin-top: 16px;
 }
 
-.card-date-picker-container {
-  width: 240px;
-}
-
 .card-date-button {
   margin-left: 8px;
 }

src/pages/dashboard/detail/index.vue

@@ -58,7 +58,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, watch } from 'vue';
+import { defineComponent, onMounted, onUnmounted, watch } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -69,7 +69,6 @@ import ProductCard from '@/pages/list/card/components/Card.vue';
 
 import { changeChartsTheme, getFolderLineDataSet, getScatterDataSet } from '../base/index';
 import { PANE_LIST_DATA, PRODUCT_LIST } from './constants';
-import { useChart } from '@/utils/hooks';
 import { LAST_7_DAYS } from '@/utils/date';
 
 import Trend from '@/components/trend/index.vue';
@@ -85,30 +84,60 @@ export default defineComponent({
     ProductCard,
   },
   setup() {
-    const lineChart = useChart('lineContainer');
+    // lineChart logic
-    const scatterChart = useChart('scatterContainer');
+    let lineContainer: HTMLElement;
+    let lineChart: echarts.ECharts;
+    onMounted(() => {
+      lineContainer = document.getElementById('lineContainer');
+      lineChart = echarts.init(lineContainer);
+      lineChart.setOption(getFolderLineDataSet());
+    });
+
+    // scatterChart logic
+    let scatterContainer: HTMLElement;
+    let scatterChart: echarts.ECharts;
+    onMounted(() => {
+      scatterContainer = document.getElementById('scatterContainer');
+      scatterChart = echarts.init(scatterContainer);
+      scatterChart.setOption(getScatterDataSet());
+    });
+
+    // chartSize update
+    const updateContainer = () => {
+      lineChart.resize({
+        width: lineContainer.clientWidth,
+        height: lineContainer.clientHeight,
+      });
+      scatterChart.resize({
+        width: scatterContainer.clientWidth,
+        height: scatterContainer.clientHeight,
+      });
+    };
+    onMounted(() => {
+      window.addEventListener('resize', updateContainer, false);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', updateContainer);
+    });
 
     const store = useStore();
     watch(
       () => store.state.setting.brandTheme,
       () => {
-        changeChartsTheme([lineChart.value, scatterChart.value]);
+        changeChartsTheme([lineChart, scatterChart]);
       },
     );
 
-    onMounted(() => {
-      lineChart.value.setOption(getFolderLineDataSet());
-      scatterChart.value.setOption(getScatterDataSet());
-    });
     return {
       LAST_7_DAYS,
       PRODUCT_LIST,
       PANE_LIST_DATA,
       onSatisfyChange() {
-        scatterChart.value.setOption(getScatterDataSet());
+        scatterChart.setOption(getScatterDataSet());
       },
       onMaterialChange(value: string[]) {
-        lineChart.value.setOption(getFolderLineDataSet(value));
+        lineChart.setOption(getFolderLineDataSet(value));
       },
     };
   },

src/pages/detail/deploy/index.vue

@@ -84,7 +84,6 @@ import { PREFIX } from '@/config/global';
 import Card from '@/components/card/index.vue';
 import { ResDataType } from '@/interface';
 import request from '@/utils/request';
-import { useChart } from '@/utils/hooks';
 
 echarts.use([
   TitleComponent,
@@ -125,37 +124,61 @@ export default defineComponent({
     };
     const visible = ref(false);
 
-    const monitorChart = useChart('monitorContainer');
+    // monitorChart logic
-    const dataChart = useChart('dataContainer');
+    let monitorContainer: HTMLElement;
-
+    let monitorChart: echarts.ECharts;
-    const intervalTimer = null;
-
     onMounted(() => {
-      fetchData();
+      monitorContainer = document.getElementById('monitorContainer');
-      dataChart.value.setOption(get2ColBarChartDataSet());
+      monitorChart = echarts.init(monitorContainer);
-      monitorChart.value.setOption(getSmoothLineDataSet());
+      monitorChart.setOption(getSmoothLineDataSet());
-
       setInterval(() => {
-        monitorChart.value.setOption(getSmoothLineDataSet());
+        monitorChart.setOption(getSmoothLineDataSet());
       }, 3000);
     });
 
+    // dataChart logic
+    let dataContainer: HTMLElement;
+    let dataChart: echarts.ECharts;
+    onMounted(() => {
+      dataContainer = document.getElementById('dataContainer');
+      dataChart = echarts.init(dataContainer);
+      dataChart.setOption(get2ColBarChartDataSet());
+    });
+
+    const intervalTimer = null;
+
+    /// / chartSize update
+    const updateContainer = () => {
+      monitorChart.resize({
+        width: monitorContainer.clientWidth,
+        height: monitorContainer.clientHeight,
+      });
+      dataChart.resize({
+        width: dataContainer.clientWidth,
+        height: dataContainer.clientHeight,
+      });
+    };
+
     onUnmounted(() => {
+      window.removeEventListener('resize', updateContainer);
       clearInterval(intervalTimer);
     });
 
     const onAlertChange = () => {
-      dataChart.value.setOption(get2ColBarChartDataSet());
+      dataChart.setOption(get2ColBarChartDataSet());
     };
 
+    onMounted(() => {
+      fetchData();
+      window.addEventListener('resize', updateContainer, false);
+    });
     const store = useStore();
     watch(
       () => store.state.setting.brandTheme,
       () => {
-        changeChartsTheme([monitorChart.value, dataChart.value]);
+        changeChartsTheme([monitorChart, dataChart]);
       },
     );
-
     return {
       PREFIX,
       BASE_INFO_DATA,

src/pages/login/components/Header.vue

@@ -56,6 +56,11 @@ export default defineComponent({
   backdrop-filter: blur(5px);
   color: @text-color-primary;
 
+  .logo {
+    width: 188px;
+    height: 64px;
+  }
+
   .operations-container {
     display: flex;
     align-items: center;

src/pages/login/components/Login.vue

@@ -22,7 +22,7 @@
           size="large"
           :type="showPsw ? 'text' : 'password'"
           clearable
-          placeholder="请输入登录密码:main_/dev_"
+          placeholder="请输入登录密码"
         >
           <template #prefix-icon>
             <t-icon name="lock-on" />

src/pages/user/index.less

@@ -46,7 +46,6 @@
       overflow: hidden;
       line-height: 24px;
       margin: 20px 0 6px;
-      font-family: PingFangSC-Regular;
       font-size: 14px;
       color: rgb(0 0 0 / 40%);
     }
@@ -56,7 +55,6 @@
       text-overflow: ellipsis;
       overflow: hidden;
       line-height: 40px;
-      font-family: PingFangSC-Regular;
       font-size: 14px;
       color: rgb(0 0 0 / 90%);
     }
@@ -128,21 +126,6 @@
   padding: 28px 32px;
   background: #fff;
   border-radius: @border-radius;
-
-  .user-bottom-container {
-    margin-top: 15px;
-
-    .unit {
-      font-size: 14px;
-      font-family: PingFangSC-Regular;
-      color: rgb(0 0 0 / 40%);
-    }
-
-    .time-picker {
-      float: right;
-      width: 250px;
-    }
-  }
 }
 
 .user-team {

src/pages/user/index.vue

@@ -28,15 +28,15 @@
       </card>
 
       <card class="content-container">
-        <t-tabs default-value="second">
+        <t-tabs value="second">
           <t-tab-panel value="first" label="内容列表">
             <p>内容列表</p>
           </t-tab-panel>
           <t-tab-panel value="second" label="内容列表">
             <card class="card-padding-no" title="主页访问数据" describe="（次）">
-              <template #options>
+              <template #option>
                 <t-date-picker
-                  class="time-picker"
+                  class="card-date-picker-container"
                   :default-value="LAST_7_DAYS"
                   theme="primary"
                   mode="date"
@@ -90,8 +90,7 @@
   </t-row>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, watch } from 'vue';
+import { defineComponent, nextTick, onMounted, onUnmounted } from 'vue';
-import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
@@ -99,9 +98,8 @@ import { LineChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 
 import { LAST_7_DAYS } from '@/utils/date';
-// import { useChart } from '@/utils/hooks';
 import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from './constants';
-// import { changeChartsTheme, getFolderLineDataSet } from '@/pages/dashboard/base/index';
+import { getFolderLineDataSet } from '@/pages/dashboard/base/index';
 import Card from '@/components/card/index.vue';
 
 echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);
@@ -111,31 +109,44 @@ export default defineComponent({
     Card,
   },
   setup() {
-    // const lineChart = useChart('lineContainer');
+    let lineContainer: HTMLElement;
+    let lineChart: echarts.ECharts;
 
-    const onLineChange = () => {
+    const onLineChange = (value) => {
-      // lineChart.value.setOption(getFolderLineDataSet(value));
+      lineChart.setOption(getFolderLineDataSet(value));
+    };
+
+    const initChart = () => {
+      lineContainer = document.getElementById('lineContainer');
+      lineChart = echarts.init(lineContainer);
+      lineChart.setOption({
+        grid: {
+          x: 30, // 默认是80px
+          y: 30, // 默认是60px
+          x2: 10, // 默认80px
+          y2: 30, // 默认60px
+        },
+        ...getFolderLineDataSet(),
+      });
+    };
+
+    const updateContainer = () => {
+      lineChart.resize({
+        width: lineContainer.clientWidth,
+        height: lineContainer.clientHeight,
+      });
     };
 
     onMounted(() => {
-      // lineChart.value.setOption({
+      nextTick(() => {
-      //   grid: {
+        initChart();
-      //     x: 30, // 默认是80px
+      });
-      //     y: 30, // 默认是60px
+      window.addEventListener('resize', updateContainer, false);
-      //     x2: 10, // 默认80px
-      //     y2: 30, // 默认60px
-      //   },
-      //   ...getFolderLineDataSet(),
-      // });
     });
 
-    const store = useStore();
+    onUnmounted(() => {
-    watch(
+      window.removeEventListener('resize', updateContainer);
-      () => store.state.setting.brandTheme,
+    });
-      () => {
-        // changeChartsTheme([lineChart.value]);
-      },
-    );
 
     return {
       LAST_7_DAYS,

src/router/index.ts

@@ -16,7 +16,7 @@ const defaultRouterList: Array<RouteRecordRaw> = [
   },
   {
     path: '/',
-    redirect: '/login',
+    redirect: '/dashboard/base',
     component: () => import('@/layouts/blank.vue'),
   },
 ];

src/router/modules/components.ts

@@ -82,7 +82,7 @@ export default [
       },
       {
         path: 'secondary',
-        name: 'detailDeploy',
+        name: 'detailSecondary',
         component: () => import('@/pages/detail/secondary/index.vue'),
         meta: { title: '二级详情页' },
       },
@@ -107,15 +107,6 @@ export default [
         component: () => import('@/pages/result/fail/index.vue'),
         meta: { title: '失败页' },
       },
-    ],
-  },
-  {
-    path: '/warning',
-    name: 'warning',
-    component: Layout,
-    redirect: '/warning/success',
-    meta: { title: '异常页', icon: 'error-circle' },
-    children: [
       {
         path: 'network-error',
         name: 'warningNetworkError',

src/store/modules/setting.ts

@@ -18,7 +18,8 @@ const mutations = {
     state.isSidebarFixed = payload.isSidebarFixed;
     state.isHeaderFixed = payload.isHeaderFixed;
     state.showHeader = payload.showHeader;
-    state.showFooter = payload.showFooter;
+    state.backgroundTheme = payload.backgroundTheme;
+    state.brandTheme = payload.brandTheme;
   },
   toggleSidebarCompact(state) {
     state.isSidebarCompact = !state.isSidebarCompact;

src/store/modules/user.ts

@@ -6,7 +6,7 @@ const InitUserInfo = {
 
 // 定义的state初始值
 const state = {
-  token: localStorage.getItem(TOKEN_NAME),
+  token: localStorage.getItem(TOKEN_NAME) || 'main_token', // 默认token不走权限
   userInfo: InitUserInfo,
 };
 
@@ -36,6 +36,7 @@ const getters = {
 const actions = {
   async login({ commit }, userInfo) {
     const mockLogin = async (userInfo) => {
+      // 登录请求流程
       console.log(userInfo);
       // const { account, password } = userInfo;
       // if (account !== 'td') {

src/style/index.less

@@ -75,3 +75,7 @@ p {
 .container-base-margin-top {
   margin-top: 16px;
 }
+
+.card-date-picker-container {
+  width: 240px;
+}

src/style/layout.less

@@ -97,7 +97,6 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0 24px;
       width: 100%;
       &:hover {
         cursor: pointer;
@@ -105,11 +104,14 @@
     }
 
     &-logo-t-logo {
-      width: 32px;
+      height: 32px;
+      width: 100%;
     }
 
     &-logo-tdesign-logo {
+      padding: 0 24px;
       height: 32px;
+      width: 100%;
       color: @text-color-anti;
     }
 

src/utils/hooks.ts

@@ -10,10 +10,11 @@ export const useChart = (domId: string): Ref<echarts.ECharts> => {
   let chartContainer: HTMLCanvasElement;
   const selfChart = ref<echarts.ECharts | any>();
   const updateContainer = () => {
-    // selfChart.value.resize({
+    // TODO resize 报错，响应式的问题，待处理
-    //   width: chartContainer.clientWidth,
+    selfChart.value.resize({
-    //   height: chartContainer.clientHeight,
+      width: chartContainer.clientWidth,
-    // });
+      height: chartContainer.clientHeight,
+    });
   };
 
   onMounted(() => {