chore: spell fix and user index change theme (#18)

* chore: spell fix and user index change theme * chore: global config upgrade * chore: remove useless code
3 years ago · fd323ace03
13 changed files with 103 additions and 112 deletions
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint -e $GIT_PARAMS
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
--- a/package.json
+++ b/package.json
@ -11,13 +11,13 @@
    "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
    "lint:fix": "eslint --ext .vue,.js,jsx,.ts,.tsx ./ --max-warnings 0 --fix",
    "stylelint": "stylelint src/**/*.{html,vue,sass,less}",
-    "stylelint:fix": "stylelint --cache --fix src/**/*.{html,vue,vss,sass,less}"
+    "stylelint:fix": "stylelint --cache --fix src/**/*.{html,vue,vss,sass,less}",
+    "prepare": "husky install"
  },
  "dependencies": {
    "@vitejs/plugin-legacy": "^1.5.3",
    "dayjs": "^1.10.6",
    "echarts": "~5.1.2",
-    "lint-staged": "^10.5.4",
    "nprogress": "^0.2.0",
    "qrcode.vue": "^1.7.0",
    "tdesign-icons-vue": "0.0.4",
@ -42,16 +42,15 @@
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-vue": "^7.8.0",
    "http-proxy-agent": "^4.0.1",
-    "husky": "^4.2.5",
+    "husky": "^7.0.4",
    "less": "^4.1.0",
-    "less-loader": "^7.2.1",
-    "less-vars-to-js": "^1.3.0",
+    "lint-staged": "^12.1.2",
    "mockjs": "^1.1.0",
    "prettier": "^2.3.2",
    "stylelint": "^13.13.1",
-    "stylelint-config-airbnb": "0.0.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-less": "^1.0.1",
    "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.20.1",
    "vite": "^2.6.14",
    "vite-plugin-mock": "^2.3.0",
    "vite-plugin-theme": "^0.8.1",
@ -76,11 +75,11 @@
    "*.{js,jsx,vue,ts,tsx}": [
      "prettier --write",
      "npm run lint:fix",
-      "git add"
+      "git add ."
    ],
    "*.{html,vue,vss,sass,less}": [
      "npm run stylelint:fix",
-      "git add"
+      "git add ."
    ]
  },
  "bit": {
--- a/src/config/color.ts
+++ b/src/config/color.ts
@ -98,69 +98,69 @@ const COLOR_TOKEN: ColorSeries = {
    '@brand-color-10': '#001F97',
  },
  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': '#0052D9',
+    '@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',
--- 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
@ -88,8 +88,8 @@ export function getRandomArray(num = 100): number {
  return resultNum;
 }

-/** 首页 dashbord 折线图 */
-export function constructInitDashbordDataset(type: string) {
+/** 首页 dashboard 折线图 */
+export function constructInitDashboardDataset(type: string) {
  const dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
  const datasetAxis = {
    xAxis: {
@ -366,7 +366,7 @@ export function getSmoothLineDataSet(dateTime: any = []): any {
 }

 /** 折线图数据 */
-export function getFolderlineDataSet(dateTime: any = []): any {
+export function getFolderLineDataSet(dateTime: any = []): any {
  let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
  if (dateTime.length > 0) {
    const devideNum = 7;
@ -658,7 +658,7 @@ export function getSelftItemList(productName: string, devideNum: number): string
 * @export
 * @returns {any[]}
 */
-export function getScattlerDataSet(dateTime: Array<string> = []): any {
+export function getScatterDataSet(dateTime: Array<string> = []): any {
  const divideNum = 10;
  const timeArray = [];
  const inArray = [];
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@ -217,7 +217,7 @@ import {
  constructInitDataset,
  getPieChartDataSet,
  getLineChartDataSet,
-  constructInitDashbordDataset,
+  constructInitDashboardDataset,
 } from './index';
 import { PANE_LIST, SALE_TEND_LIST, BUY_TEND_LIST, SALE_COLUMNS, BUY_COLUMNS } from '@/service/service-base';

@ -262,14 +262,14 @@ export default {
      this.moneyContainer = document.getElementById('moneyContainer');
    }
    this.moneyCharts = echarts.init(this.moneyContainer);
-    this.moneyCharts.setOption(constructInitDashbordDataset('line'));
+    this.moneyCharts.setOption(constructInitDashboardDataset('line'));

    // 退款图
    if (!this.incomeContainer) {
      this.incomeContainer = document.getElementById('refundContainer');
    }
    this.incomeCharts = echarts.init(this.incomeContainer);
-    this.incomeCharts.setOption(constructInitDashbordDataset('bar'));
+    this.incomeCharts.setOption(constructInitDashboardDataset('bar'));

    // 出入库概览
    if (!this.dataContainer) {
@ -399,7 +399,7 @@ export default {

  .dashboard-item-block {
    color: @text-color-anti;
-    opacity: 0.6;
+    opacity: .6;
  }

  .dashboard-item-bottom {
--- 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
@ -72,7 +72,7 @@ import { LAST_7_DAYS } from '@/utils/date';

 import ProductCard from '@/pages/list/card/components/compoonent-card.vue';
 import { PANE_LIST_DATA, PRODUCT_LIST } from '@/service/service-detail';
-import { changeChartsTheme, getFolderlineDataSet, getScattlerDataSet } from '../base';
+import { changeChartsTheme, getFolderLineDataSet, getScatterDataSet } from '../base';

 echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]);

@ -113,7 +113,7 @@ export default {
      this.lineContainer = document.getElementById('lineContainer');
    }
    this.lineChart = echarts.init(this.lineContainer);
-    this.lineChart.setOption(getFolderlineDataSet());
+    this.lineChart.setOption(getFolderLineDataSet());

    window.addEventListener('resize', this.updateContainer, false);

@ -121,16 +121,16 @@ export default {
      this.scatterContainer = document.getElementById('scatterContainer');
    }
    this.scatterChart = echarts.init(this.scatterContainer);
-    this.scatterChart.setOption(getScattlerDataSet());
+    this.scatterChart.setOption(getScatterDataSet());
  },
  methods: {
    /** 采购商品满意度选择 */
    onHappinesChange(value) {
-      this.scatterChart.setOption(getScattlerDataSet(value));
+      this.scatterChart.setOption(getScatterDataSet(value));
    },
    /** 采购商品申请趋势选择 */
    onMaterialChange(value) {
-      this.lineChart.setOption(getFolderlineDataSet(value));
+      this.lineChart.setOption(getFolderLineDataSet(value));
    },
    updateContainer() {
      this.lineChart.resize({
--- 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
@ -29,7 +29,7 @@
        </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>
@ -37,7 +37,7 @@
              <card class="card-padding-no" title="主页访问数据" describe="（次）">
                <template #options>
                  <t-date-picker
-                    class="time-picker"
+                    class="card-date-picker-container"
                    :default-value="LAST_7_DAYS"
                    theme="primary"
                    mode="date"
@ -96,11 +96,12 @@ import { prefix } from '@/config/global';

 import { LAST_7_DAYS } from '@/utils/date.ts';
 import * as echarts from 'echarts/core';
+import { mapState } from 'vuex';

 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
 import { LineChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
-import { getFolderlineDataSet } from '@/pages/dashboard/base/index';
+import { changeChartsTheme, getFolderLineDataSet } from '@/pages/dashboard/base/index';

 import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from '@/service/service-user';

@ -124,6 +125,15 @@ export default {
      PRODUCT_LIST,
    };
  },
+  computed: {
+    ...mapState('setting', ['brandTheme']),
+  },
+  watch: {
+    brandTheme() {
+      console.log(123);
+      changeChartsTheme([this.lineChart]);
+    },
+  },
  mounted() {
    if (!this.lineContainer) {
      this.lineContainer = document.getElementById('lineContainer');
@ -136,7 +146,7 @@ export default {
        x2: 10, // 默认80px
        y2: 30, // 默认60px
      },
-      ...getFolderlineDataSet(),
+      ...getFolderLineDataSet(),
    });

    window.addEventListener('resize', this.updateContainer, false);
@ -144,7 +154,7 @@ export default {
  methods: {
    /** 图表选择 */
    onLineChange(value) {
-      this.lineChart.setOption(getFolderlineDataSet(value));
+      this.lineChart.setOption(getFolderLineDataSet(value));
    },
    updateContainer() {
      this.lineChart.resize({
--- a/src/style/index.less
+++ b/src/style/index.less
@ -80,4 +80,8 @@ p {

 .container-base-margin-top {
  margin-top: 16px;
-}
+}
+
+.card-date-picker-container {
+  width: 240px;
+}
--- a/stylelint.config.js
+++ b/stylelint.config.js
@ -1,10 +1,5 @@
 module.exports = {
  defaultSeverity: 'error',
-  extends: ['stylelint-config-airbnb'],
-  plugins: ['stylelint-scss'],
-  rules: {
-    'max-nesting-depth': 10,
-    'string-quotes': 'single',
-    'declaration-property-value-disallowed-list': { '/^border/': ['none'] },
-  },
+  extends: ['stylelint-config-prettier'],
+  plugins: ['stylelint-less'],
 };