From a5b177e8e186fa2aca19a65e4c8da019e7b14790 Mon Sep 17 00:00:00 2001 From: PY Date: Sat, 27 Nov 2021 18:50:07 +0800 Subject: [PATCH] refactor: login page replace form component (#9) Co-authored-by: pengYYYYY --- .eslintrc | 17 +- package.json | 9 +- src/assets/t-logo.svg | 41 ++++ src/config/color.ts | 2 +- src/interface.ts | 4 + src/pages/dashboard/base/index.ts | 19 +- src/pages/dashboard/detail/index.vue | 20 +- src/pages/detail/advanced/index.vue | 4 +- src/pages/detail/deploy/index.vue | 4 +- src/pages/login/components/Login.vue | 174 +++++++--------- src/pages/login/components/Register.vue | 262 ++++++++++-------------- src/pages/login/helper.ts | 41 ++++ src/pages/login/index.less | 220 ++++++++++---------- src/pages/login/index.vue | 2 +- src/pages/user/index.vue | 13 +- src/utils/date.ts | 2 +- src/utils/hooks.ts | 2 +- src/utils/{request.js => request.ts} | 4 +- tsconfig.json | 1 - 19 files changed, 425 insertions(+), 416 deletions(-) create mode 100644 src/assets/t-logo.svg create mode 100644 src/pages/login/helper.ts rename src/utils/{request.js => request.ts} (95%) diff --git a/.eslintrc b/.eslintrc index 5e20934..34ec7c1 100644 --- a/.eslintrc +++ b/.eslintrc @@ -32,17 +32,20 @@ ] }, "rules": { - "import/extensions": "off", - "import/no-unresolved": "off", - "@typescript-eslint/no-explicit-any": "off", + "no-console": "off", "no-continue": "off", "no-restricted-syntax": "off", + "no-plusplus": "off", + "no-param-reassign": "off", + "no-shadow": "off", "guard-for-in": "off", + + "import/extensions": "off", + "import/no-unresolved": "off", "import/no-extraneous-dependencies": "off", "import/prefer-default-export": "off", - "no-plusplus": "off", - "@typescript-eslint/explicit-module-boundary-types": "off", - "no-param-reassign": "off", - "no-shadow": "off" + + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" } } \ No newline at end of file diff --git a/package.json b/package.json index 0be8a2c..2353d07 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,8 @@ "name": "tdesign-vue-next-starter", "version": "0.0.1", "scripts": { - "dev:mock": "vite --open --mode mock", - "dev": "vite --open --mode development", - "dev:linux": "vite --mode developmenet", + "start:mock": "vite --open --mode mock", + "start": "vite --open --mode development", "build:test": "vite build --mode test", "build": "vue-tsc --noEmit && vite build", "serve": "vite preview", @@ -27,9 +26,9 @@ "devDependencies": { "@commitlint/cli": "^13.1.0", "@commitlint/config-conventional": "^13.1.0", + "@types/echarts": "^4.9.10", "@typescript-eslint/eslint-plugin": "^4.29.3", "@typescript-eslint/parser": "^4.29.3", - "@types/echarts": "^4.9.10", "@vitejs/plugin-vue": "^1.3.0", "@vitejs/plugin-vue-jsx": "^1.1.7", "@vue/compiler-sfc": "^3.0.5", @@ -47,7 +46,7 @@ "less": "^4.1.1", "mockjs": "^1.1.0", "prettier": "^2.4.1", - "stylelint": "^13.13.1", + "stylelint": "^14.1.0", "stylelint-config-airbnb": "^0.0.0", "stylelint-order": "^4.1.0", "stylelint-scss": "^3.20.0", diff --git a/src/assets/t-logo.svg b/src/assets/t-logo.svg new file mode 100644 index 0000000..61044ed --- /dev/null +++ b/src/assets/t-logo.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/config/color.ts b/src/config/color.ts index 3434779..788e162 100644 --- a/src/config/color.ts +++ b/src/config/color.ts @@ -158,7 +158,7 @@ export function getBrandColor(type: string): ColorToken { } export function getColorList(colorArray: ColorToken[]): string[] { - const pureColorList = []; + const pureColorList: string[] = []; colorArray.map((colorToken) => Object.keys(colorToken).map((key) => pureColorList.push(colorToken[key]))); return pureColorList; diff --git a/src/interface.ts b/src/interface.ts index 0a8d3bc..3a8056d 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -17,3 +17,7 @@ export type ModeType = 'dark' | 'light'; export type SettingType = typeof STYLE_CONFIG; export type ClassName = { [className: string]: any } | ClassName[] | string; + +export type CommonObjType = { + [key: string]: string | number +} \ No newline at end of file diff --git a/src/pages/dashboard/base/index.ts b/src/pages/dashboard/base/index.ts index 22c95f3..d04d79c 100644 --- a/src/pages/dashboard/base/index.ts +++ b/src/pages/dashboard/base/index.ts @@ -1,8 +1,8 @@ -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import * as echarts from 'echarts/core'; import { getBrandColor } from '@/config/color'; import store from '@/store'; - +import { CommonObjType } from '@/interface'; const { state } = store; /** @@ -349,9 +349,9 @@ export function getSmoothLineDataSet(dateTime = []) { } /** 折线图数据 */ -export function getFolderlineDataSet(dateTime?: []) { +export function getFolderLineDataSet(dateTime?: string[]) { let dateArray: Array = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; - if (dateTime.length > 0) { + if (dateTime && dateTime.length > 0) { const devideNum = 7; dateArray = getDateArray(dateTime, devideNum); } @@ -637,7 +637,7 @@ export function getSelftItemList(productName: string, devideNum: number): string * @export * @returns {} */ -export function getScattlerDataSet(dateTime: Array = []) { +export function getScatterDataSet(dateTime: Array = []) { const divideNum = 10; const timeArray = []; const inArray = []; @@ -774,7 +774,7 @@ export function getAreaChartDataSet() { emphasis: { focus: 'series', }, - animationDelay(idx) { + animationDelay(idx: number) { return idx * 10; }, }, @@ -785,13 +785,13 @@ export function getAreaChartDataSet() { emphasis: { focus: 'series', }, - animationDelay(idx) { + animationDelay(idx: number) { return idx * 10 + 100; }, }, ], animationEasing: 'elasticOut', - animationDelayUpdate(idx) { + animationDelayUpdate(idx: number) { return idx * 5; }, }; @@ -994,8 +994,7 @@ export function get2ColBarChartDataSet(isMonth = false) { barWidth: '30%', data: thisYearListCopy, itemStyle: { - color: (params) => { - // console.log('chartListColor', chartListColor()); + color: (params: CommonObjType) => { if (params.value >= 200) { return '#E34D59'; } diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue index 3ecd088..dd9921e 100644 --- a/src/pages/dashboard/detail/index.vue +++ b/src/pages/dashboard/detail/index.vue @@ -45,7 +45,7 @@ theme="primary" mode="date" range - @change="onHappinesChange" + @change="onSatisfyChange" /> 导出数据 @@ -63,7 +63,7 @@ import { LineChart, ScatterChart } from 'echarts/charts'; import { CanvasRenderer } from 'echarts/renderers'; import ProductCard from '@/pages/list/card/components/Card.vue'; -import { changeChartsTheme, getFolderlineDataSet, getScattlerDataSet } from '../base/index'; +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'; @@ -87,24 +87,24 @@ export default defineComponent({ const store = useStore(); watch( () => store.state.setting.brandTheme, - (val) => { - changeChartsTheme([lineChart.value, scatterChart.value], val); + () => { + changeChartsTheme([lineChart.value, scatterChart.value]); }, ); onMounted(() => { - lineChart.value.setOption(getFolderlineDataSet()); - scatterChart.value.setOption(getScattlerDataSet()); + lineChart.value.setOption(getFolderLineDataSet()); + scatterChart.value.setOption(getScatterDataSet()); }); return { LAST_7_DAYS, PRODUCT_LIST, PANE_LIST_DATA, - onHappinesChange() { - scatterChart.value.setOption(getScattlerDataSet()); + onSatisfyChange() { + scatterChart.value.setOption(getScatterDataSet()); }, - onMaterialChange(value) { - lineChart.value.setOption(getFolderlineDataSet(value)); + onMaterialChange(value: string[]) { + lineChart.value.setOption(getFolderLineDataSet(value)); }, }; }, diff --git a/src/pages/detail/advanced/index.vue b/src/pages/detail/advanced/index.vue index f804cef..965415b 100644 --- a/src/pages/detail/advanced/index.vue +++ b/src/pages/detail/advanced/index.vue @@ -135,7 +135,7 @@ export default defineComponent({ const updateCurrent = ref(0); - const setpUpdate = () => { + const stepUpdate = () => { setInterval(() => { if (updateCurrent.value > 5) { updateCurrent.value = -1; @@ -161,7 +161,7 @@ export default defineComponent({ }; onMounted(() => { - setpUpdate(); + stepUpdate(); fetchData(); }); diff --git a/src/pages/detail/deploy/index.vue b/src/pages/detail/deploy/index.vue index db7f54b..4484415 100644 --- a/src/pages/detail/deploy/index.vue +++ b/src/pages/detail/deploy/index.vue @@ -149,8 +149,8 @@ export default defineComponent({ const store = useStore(); watch( () => store.state.setting.brandTheme, - (val) => { - changeChartsTheme([monitorChart.value, dataChart.value], val); + () => { + changeChartsTheme([monitorChart.value, dataChart.value]); }, ); diff --git a/src/pages/login/components/Login.vue b/src/pages/login/components/Login.vue index feff449..4becbb3 100644 --- a/src/pages/login/components/Login.vue +++ b/src/pages/login/components/Login.vue @@ -1,21 +1,29 @@