fix: echarts resize error (#28)

* fix: echarts resize error * chore: remove useless code * feat: update icon * feat: compress bg img * docs: readme update
2024-12-22 21:16:32 +08:00 · 2021-12-13 20:12:32 +08:00 · 2021-12-13 20:12:32 +08:00 · 266d032520
commit 266d032520
parent 2633b461ed
26 changed files with 292 additions and 235 deletions
--- a/README.md
+++ b/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/>
-
-## 路由和菜单
-
-菜单（侧边栏和面包屑）由路由配置自动生成，根据路由变化可自动匹配，开发者无需手动处理这些逻辑。
-可在<a href="./src/config/routes.js">src/config/routes.js</a>文件中修改。
-
-菜单和路由的映射如下：
+// 修复 stylelint
+npm run stylelint:fix

 ```
-    {
-        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/>

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

  return pureColorList;
--- a/src/layouts/blank.vue
+++ b/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;
--- a/src/layouts/components/Content.vue
+++ b/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';

--- a/src/layouts/components/SideNav.tsx
+++ b/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`} />
                  )}
--- a/src/pages/dashboard/base/index.less
+++ b/src/pages/dashboard/base/index.less
@ -93,7 +93,3 @@
 .row-container {
  margin-top: 16px;
 }
-
-.card-date-picker-container {
-  width: 240px;
-}
--- a/src/pages/dashboard/base/index.ts
+++ b/src/pages/dashboard/base/index.ts
@ -76,8 +76,8 @@ export function getRandomArray(num = 100) {
  return resultNum;
 }

-/** 首页 dashbord 折线图 */
-export function constructInitDashbordDataset(type: string) {
+/** 首页 dashboard 折线图 */
+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;
-    dateArray = getDateArray(dateTime, devideNum);
+    const divideNum = 7;
+    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);
      }
    }
  }
--- a/src/pages/dashboard/base/index.vue
+++ b/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');
-    const moneyCharts = useChart('moneyContainer');
-    const stokeCharts = useChart('stokeContainer');
-    const monitorChart = useChart('monitorContainer');
-    const countChart = useChart('countContainer');
-    const initCharts = () => {
-      refundCharts.value.setOption(constructInitDashbordDataset('bar'));
-      moneyCharts.value.setOption(constructInitDashbordDataset('line'));
-      stokeCharts.value.setOption(constructInitDataset(LAST_7_DAYS));
-      monitorChart.value.setOption(getLineChartDataSet());
-      countChart.value.setOption(getPieChartDataSet());
+    // refundCharts
+    let refundContainer: HTMLElement;
+    let refundChart: echarts.ECharts;
+    onMounted(() => {
+      refundContainer = document.getElementById('refundContainer');
+      refundChart = echarts.init(refundContainer);
+      refundChart.setOption(constructInitDashboardDataset('bar'));
+    });
+
+    // moneyCharts
+    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([
-          refundCharts.value,
-          moneyCharts.value,
-          stokeCharts.value,
-          monitorChart.value,
-          countChart.value,
-        ]);
+        changeChartsTheme([refundChart, moneyChart, stokeChart, monitorChart, countChart]);
      },
    );

@ -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[]) {
-        stokeCharts.value.setOption(constructInitDataset(checkedValues));
+      onStokeDataChange(checkedValues: string[]) {
+        stokeChart.setOption(constructInitDataset(checkedValues));
      },
      rehandleClickOp(val: MouseEvent) {
        console.log(val);
--- a/src/pages/dashboard/detail/index.less
+++ b/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;
 }
--- a/src/pages/dashboard/detail/index.vue
+++ b/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');
-    const scatterChart = useChart('scatterContainer');
+    // lineChart logic
+    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));
      },
    };
  },
--- a/src/pages/detail/deploy/index.vue
+++ b/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');
-    const dataChart = useChart('dataContainer');
-
-    const intervalTimer = null;
-
+    // monitorChart logic
+    let monitorContainer: HTMLElement;
+    let monitorChart: echarts.ECharts;
    onMounted(() => {
-      fetchData();
-      dataChart.value.setOption(get2ColBarChartDataSet());
-      monitorChart.value.setOption(getSmoothLineDataSet());
-
+      monitorContainer = document.getElementById('monitorContainer');
+      monitorChart = echarts.init(monitorContainer);
+      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,
--- a/src/pages/login/components/Header.vue
+++ b/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;
--- a/src/pages/login/components/Login.vue
+++ b/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" />
--- a/src/pages/user/index.less
+++ b/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 {
--- a/src/pages/user/index.vue
+++ b/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 { useStore } from 'vuex';
+import { defineComponent, nextTick, onMounted, onUnmounted } from 'vue';

 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 = () => {
-      // lineChart.value.setOption(getFolderLineDataSet(value));
+    const onLineChange = (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({
-      //   grid: {
-      //     x: 30, // 默认是80px
-      //     y: 30, // 默认是60px
-      //     x2: 10, // 默认80px
-      //     y2: 30, // 默认60px
-      //   },
-      //   ...getFolderLineDataSet(),
-      // });
+      nextTick(() => {
+        initChart();
+      });
+      window.addEventListener('resize', updateContainer, false);
    });

-    const store = useStore();
-    watch(
-      () => store.state.setting.brandTheme,
-      () => {
-        // changeChartsTheme([lineChart.value]);
-      },
-    );
+    onUnmounted(() => {
+      window.removeEventListener('resize', updateContainer);
+    });

    return {
      LAST_7_DAYS,
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -16,7 +16,7 @@ const defaultRouterList: Array<RouteRecordRaw> = [
  },
  {
    path: '/',
-    redirect: '/login',
+    redirect: '/dashboard/base',
    component: () => import('@/layouts/blank.vue'),
  },
 ];
--- a/src/router/modules/components.ts
+++ b/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',
--- a/src/store/modules/setting.ts
+++ b/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;
--- a/src/store/modules/user.ts
+++ b/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') {
--- a/src/style/index.less
+++ b/src/style/index.less
@ -75,3 +75,7 @@ p {
 .container-base-margin-top {
  margin-top: 16px;
 }
+
+.card-date-picker-container {
+  width: 240px;
+}
--- a/src/style/layout.less
+++ b/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;
    }

--- a/src/utils/hooks.ts
+++ b/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({
-    //   width: chartContainer.clientWidth,
-    //   height: chartContainer.clientHeight,
-    // });
+    // TODO resize 报错，响应式的问题，待处理
+    selfChart.value.resize({
+      width: chartContainer.clientWidth,
+      height: chartContainer.clientHeight,
+    });
  };

  onMounted(() => {