image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 02:56:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat/updateconfig (#2)

Browse Source 
* 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>
This commit is contained in:
PY 2021-11-26 10:45:04 +08:00 committed by GitHub
parent 07b63e32fa
commit 75df4f1672
52 changed files with 1162 additions and 503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
.eslintignore
View File

@ -2,29 +2,12 @@ snapshot*
dist dist
lib lib
es es
esm
node_modules node_modules
common src/_common
static static
cypress cypress
script/test/cypress script/test/cypress
_site _site
temp* temp*
static/ 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

3
globals.d.ts vendored
View File

@ -1,4 +1,3 @@
// 通用声明 // 通用声明
declare type ClassName = { [className: string]: any } | ClassName[] | string; declare type ClassName = { [className: string]: any } | ClassName[] | string;
@ -13,5 +12,3 @@ declare module '*.svg' {
const CONTENT: string; const CONTENT: string;
export default CONTENT; export default CONTENT;
} }

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TDesign Starter Vue Next</title> <title>TDesign Vue Next Starter</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

4
src/App.vue
View File

@ -1,6 +1,4 @@
<template> <template>
<router-view /> <router-view />
</template> </template>
<script> <script></script>
</script>

4
src/components/card/index.vue
View File

@ -90,7 +90,7 @@ export default defineComponent({
&-container { &-container {
padding: 24px 32px; padding: 24px 32px;
margin: 16px 0; margin: 16px 0;
background: #fff; background: @bg-color-container;
border-radius: @border-radius; border-radius: @border-radius;
width: 100%; width: 100%;
display: flex; display: flex;
@ -135,7 +135,7 @@ export default defineComponent({
&-describe { &-describe {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.6); color: @bg-color-container;
line-height: 22px; line-height: 22px;
} }

21
src/components/result/index.vue
View File

@ -1,32 +1,29 @@
<template> <template>
<card>
<div class="result-container"> <div class="result-container">
<img class="result-bg-img" :src="bgUrl"> <img class="result-bg-img" :src="bgUrl" />
<div class="result-title">
{{ title }}
</div>
<div class="result-tip"> <div class="result-tip">
{{ tip }} {{ tip }}
</div> </div>
<div> <slot />
<router-link class="tdesign-pro-main-link" to="/">
<t-button theme="primary" variant="text">
返回首页
</t-button>
</router-link>
</div> </div>
</div>
</card>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from 'vue'; import { defineComponent, PropType } from 'vue';
import Card from '@/components/card/index.vue';
export default defineComponent({ export default defineComponent({
name: 'Result', name: 'Result',
components: { Card },
props: { props: {
bgUrl: { bgUrl: {
type: String as PropType<string>, type: String as PropType<string>,
default: '', default: '',
}, },
title: {
type: String as PropType<string>,
default: '',
},
tip: { tip: {
type: String as PropType<string>, type: String as PropType<string>,
default: '', default: '',

3
src/components/thumbnail/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<img :class="className" :src="url"> <img :class="className" :src="url" />
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, computed, PropType } from 'vue'; import { defineComponent, computed, PropType } from 'vue';
@ -35,7 +35,6 @@ export default defineComponent({
@import url('@/style/index.less'); @import url('@/style/index.less');
.thumbnail { .thumbnail {
&-container { &-container {
display: inline-block; display: inline-block;
} }

10
src/components/trend/index.vue
View File

@ -12,14 +12,7 @@
<path d="M11.5 8L8 11.5L4.5 8" stroke="currentColor" stroke-width="1.5" /> <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" /> <path d="M8 11L8 4" stroke="currentColor" stroke-width="1.5" />
</svg> </svg>
<svg <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/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="M4.5 8L8 4.5L11.5 8" stroke="currentColor" stroke-width="1.5" />
<path d="M8 5V12" stroke="currentColor" stroke-width="1.5" /> <path d="M8 5V12" stroke="currentColor" stroke-width="1.5" />
</svg> </svg>
@ -70,6 +63,7 @@ export default defineComponent({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less';
.trend { .trend {
&-container { &-container {
&__up { &__up {

6
src/config/color.ts
View File

@ -52,8 +52,8 @@ const COLOR_TOKEN: ColorSeries = {
}, },
CYAN: { CYAN: {
'@brand-color': '#0594FA', '@brand-color': '#0594FA',
'@brand-color-1': '#ECF2FE', '@brand-color-1': '#D6F7FF',
'@brand-color-2': '#D4E3FC', '@brand-color-2': '#85DAFF',
'@brand-color-3': '#BBD3FB', '@brand-color-3': '#BBD3FB',
'@brand-color-4': '#96BBF8', '@brand-color-4': '#96BBF8',
'@brand-color-5': '#699EF5', '@brand-color-5': '#699EF5',
@ -159,7 +159,7 @@ export function getBrandColor(type: string): ColorToken {
export function getColorList(colorArray: ColorToken[]): string[] { export function getColorList(colorArray: ColorToken[]): string[] {
const pureColorList = []; 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; return pureColorList;
} }

14
src/config/routes.ts
View File

@ -3,7 +3,7 @@ export default [
path: '/dashboard', path: '/dashboard',
icon: 'dashboard', icon: 'dashboard',
title: '仪表盘', title: '仪表盘',
component: '../Layouts/index.tsx', component: '../layouts/index.tsx',
redirect: '/dashboard/base', redirect: '/dashboard/base',
children: [ children: [
{ {
@ -22,7 +22,7 @@ export default [
path: '/list', path: '/list',
icon: 'view-module', icon: 'view-module',
title: '列表页', title: '列表页',
component: '../Layouts/index.tsx', component: '../layouts/index.tsx',
redirect: '/list/base', redirect: '/list/base',
children: [ children: [
{ {
@ -51,7 +51,7 @@ export default [
path: '/form', path: '/form',
icon: 'queue', icon: 'queue',
title: '表单页', title: '表单页',
component: '../Layouts/index.tsx', component: '../layouts/index.tsx',
redirect: '/form/base', redirect: '/form/base',
children: [ children: [
{ {
@ -70,7 +70,7 @@ export default [
path: '/detail', path: '/detail',
icon: 'layers', icon: 'layers',
title: '详情页', title: '详情页',
component: '../Layouts/index.tsx', component: '../layouts/index.tsx',
redirect: '/detail/base', redirect: '/detail/base',
children: [ children: [
{ {
@ -101,7 +101,7 @@ export default [
path: '/result', path: '/result',
icon: 'check-circle', icon: 'check-circle',
title: '结果页', title: '结果页',
component: '../Layouts/index.tsx', component: '../layouts/index.tsx',
redirect: '/result/success', redirect: '/result/success',
children: [ children: [
{ {
@ -145,7 +145,7 @@ export default [
path: '/user', path: '/user',
icon: 'user-circle', icon: 'user-circle',
title: '个人页', title: '个人页',
component: '../Layouts/index.tsx', component: '../layouts/index.tsx',
redirect: '/user/index', redirect: '/user/index',
children: [ children: [
{ {
@ -159,7 +159,7 @@ export default [
{ {
path: '/login', path: '/login',
title: '登录页', title: '登录页',
component: '../Layouts/blank.vue', component: '../layouts/blank.vue',
icon: 'chevron-right-rectangle', icon: 'chevron-right-rectangle',
redirect: '/login/index', redirect: '/login/index',
children: [ children: [

2
src/config/style.ts
View File

@ -2,7 +2,7 @@ export default {
showFooter: true, showFooter: true,
isSidebarCompact: false, isSidebarCompact: false,
showBreadcrumb: false, showBreadcrumb: false,
theme: 'dark', mode: 'light',
layout: 'side', layout: 'side',
splitMenu: false, splitMenu: false,
isFooterAside: false, isFooterAside: false,

12
src/interface.ts
View File

@ -1,6 +1,8 @@
import STYLE_CONFIG from '@/config/style';
export interface ResDataType { export interface ResDataType {
code: number, code: number;
data: any data: any;
} }
export interface MenuRoute { export interface MenuRoute {
@ -9,3 +11,9 @@ export interface MenuRoute {
icon?: string; icon?: string;
children: MenuRoute[]; children: MenuRoute[];
} }
export type ModeType = 'dark' | 'light';
export type SettingType = typeof STYLE_CONFIG;
export type ClassName = { [className: string]: any } | ClassName[] | string;

43
src/pages/dashboard/base/index.less
View File

@ -1,18 +1,42 @@
@import '@/style/index'; @import '@/style/index';
@media (max-width: @screen-md-max) { @media (max-width: @screen-md-max) {
} }
.t-tabs__content { .t-tabs__content {
padding-top: @spacer-3; 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 { .dashboard-panel {
padding: 0; padding: 0;
border-radius: @border-radius; border-radius: @border-radius;
>div {
padding: 4px;
}
.card-container { .card-container {
.card-content { .card-content {
@ -21,6 +45,10 @@
color: @text-color-primary; color: @text-color-primary;
padding-bottom: 4px; padding-bottom: 4px;
} }
.t-table-content {
overflow: auto;
}
} }
.t-table th, .t-table th,
@ -50,7 +78,6 @@
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
> span { > span {
display: inline-block; display: inline-block;
color: black; color: black;
@ -64,12 +91,12 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center;
> .t-icon { > .t-icon {
cursor: pointer; cursor: pointer;
color: inherit; color: inherit;
} }
} }
@ -106,9 +133,7 @@
border-radius: @border-radius; border-radius: @border-radius;
margin-left: 16px; margin-left: 16px;
width: 100%; width: 100%;
// min-width: 300px;
height: 320px; height: 320px;
} }
} }
@ -257,12 +282,12 @@
justify-content: center; justify-content: center;
width: 56px; width: 56px;
height: 56px; height: 56px;
background: #ECF2FE; background: @brand-color-1;
border-radius: 50%; border-radius: 50%;
.t-icon { .t-icon {
font-size: 24px; font-size: 24px;
color: #0052D9; color: @brand-color;
} }
} }
} }
@ -291,7 +316,7 @@
} }
.overview-pannel { .overview-pannel {
background-color: white; background-color: @bg-color-container;
border-radius: 3px; border-radius: 3px;
} }

601
src/pages/dashboard/base/index.ts
View File

@ -1,8 +1,40 @@
import { getBrandColor } from '@/config/color';
import dayjs, { Dayjs } from 'dayjs'; 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; 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 * @memberOf DashboardBase
*/ */
export function getRandomArray(num = 100): number { export function getRandomArray(num = 100) {
let resultNum = Number((Math.random() * num).toFixed(0)); let resultNum = Number((Math.random() * num).toFixed(0));
if (resultNum <= 1) { if (resultNum <= 1) {
@ -86,15 +104,30 @@ export function constructInitDashbordDataset(type: string) {
{ {
data: [150, 230, 224, 218, 135, 147, 260], data: [150, 230, 224, 218, 135, 147, 260],
type, type,
showSymbol: true,
symbol: 'circle',
symbolSize: 0,
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' },
],
},
itemStyle: {
normal: {
lineStyle: {
width: 2,
},
},
},
}, },
], ],
}; };
return lineDataset; return lineDataset;
} }
if (type === 'bar') {
const barDataset = { const barDataset = {
...datasetAxis, ...datasetAxis,
color: chartListColor, color: chartListColor(),
series: [ series: [
{ {
data: [ data: [
@ -105,32 +138,32 @@ export function constructInitDashbordDataset(type: string) {
{ {
value: 135, value: 135,
itemStyle: { itemStyle: {
color: '#ECF2FE', color: chartListColor()[1],
}, },
}, },
{ {
value: 118, value: 118,
itemStyle: { itemStyle: {
color: '#ECF2FE', color: chartListColor()[1],
}, },
}, },
{ {
value: 60, value: 60,
itemStyle: { itemStyle: {
color: '#ECF2FE', color: chartListColor()[1],
}, },
}, },
], ],
type, type,
barWidth: 9,
}, },
], ],
}; };
return barDataset; return barDataset;
}
} }
/** 柱状图数据源 */ /** 柱状图数据源 */
export function constructInitDataset(dateTime: Array<Dayjs> = []) { export function constructInitDataset(dateTime: Array<string> = []) {
// const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']]; // const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
const divideNum = 10; const divideNum = 10;
const timeArray = []; const timeArray = [];
@ -139,8 +172,8 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
for (let i = 0; i < divideNum; i++) { for (let i = 0; i < divideNum; i++) {
// const [timeArray, inArray, outArray] = dataset; // const [timeArray, inArray, outArray] = dataset;
if (dateTime.length > 0) { if (dateTime.length > 0) {
const dateAbsTime: number = (dateTime[1].valueOf() - dateTime[0].valueOf()) / divideNum; const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
const enhandTime: number = dateTime[0].valueOf() + dateAbsTime * i; const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
// console.log('dateAbsTime..', dateAbsTime, enhandTime); // console.log('dateAbsTime..', dateAbsTime, enhandTime);
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD')); timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
} else { } else {
@ -156,16 +189,28 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
// console.log('timeArray..', timeArray); // console.log('timeArray..', timeArray);
const dataset = { const dataset = {
color: chartListColor, color: chartListColor(),
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: timeArray, data: timeArray,
axisLabel: {
color: 'rgba(0, 0, 0, 0.4)',
},
axisLine: {
lineStyle: {
color: chartListColor()[1],
width: 1,
},
},
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: {
color: 'rgba(0, 0, 0, 0.4)',
},
}, },
grid: { grid: {
top: '5%', top: '5%',
@ -174,21 +219,34 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
bottom: '60px', bottom: '60px',
}, },
legend: { legend: {
icon: 'rect',
itemWidth: 12,
itemHeight: 4,
itemGap: 48,
textStyle: {
fontSize: 12,
color: 'rgba(0, 0, 0, 0.6)',
},
left: 'center', left: 'center',
bottom: '0', bottom: '0',
orient: 'horizontal', orient: 'horizontal',
data: ['出库', '入库'], data: ['本月', '上月'],
}, },
series: [ series: [
{ {
name: '出库', name: '本月',
data: outArray, data: outArray,
type: 'bar', type: 'bar',
}, },
{ {
name: '入库', name: '上月',
data: inArray, data: inArray,
type: 'bar', 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']; let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
if (dateTime.length > 0) { if (dateTime.length > 0) {
const devideNum = 7; const devideNum = 7;
@ -205,27 +263,44 @@ export function getSmoothLineDataSet(dateTime: any = []): any {
} }
return { return {
color: chartListColor, color: chartListColor(),
tooltip: {
trigger: 'item',
},
grid: {
top: '10px',
left: '0',
right: '20px',
bottom: '36px',
containLabel: true,
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: dateArray, data: dateArray,
boundaryGap: false, boundaryGap: false,
axisLabel: {
color: 'rgba(0, 0, 0, 0.4)',
},
axisLine: {
lineStyle: {
color: '#E3E6EB',
width: 1,
},
},
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
}, axisLabel: {
tooltip: { color: 'rgba(0, 0, 0, 0.4)',
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
}, },
}, },
legend: { legend: {
data: ['本月', '上月'], data: ['本月', '上月'],
icon: 'roundRect', icon: 'circle',
bottom: '15%', bottom: '0',
itemGap: 60, itemGap: 48,
itemHeight: 8,
itemWidth: 8,
}, },
series: [ series: [
{ {
@ -241,7 +316,15 @@ export function getSmoothLineDataSet(dateTime: any = []): any {
], ],
type: 'line', type: 'line',
smooth: true, smooth: true,
color: '#BCC4D0', color: chartListColor()[0],
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
areaStyle: {
normal: {
color: '#0053D92F',
},
},
}, },
{ {
name: '本月', name: '本月',
@ -256,17 +339,17 @@ export function getSmoothLineDataSet(dateTime: any = []): any {
], ],
type: 'line', type: 'line',
smooth: true, smooth: true,
areaStyle: { showSymbol: true,
opacity: 0.1, symbol: 'circle',
}, symbolSize: 8,
color: '#0052D9', color: chartListColor()[1],
}, },
], ],
}; };
} }
/** 折线图数据 */ /** 折线图数据 */
export function getFolderlineDataSet(dateTime: any = []): any { export function getFolderlineDataSet(dateTime?: []) {
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
if (dateTime.length > 0) { if (dateTime.length > 0) {
const devideNum = 7; const devideNum = 7;
@ -274,7 +357,7 @@ export function getFolderlineDataSet(dateTime: any = []): any {
} }
return { return {
color: chartListColor, color: chartListColor(),
grid: { grid: {
top: '5%', top: '5%',
right: '1px', right: '1px',
@ -290,15 +373,31 @@ export function getFolderlineDataSet(dateTime: any = []): any {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: dateArray, data: dateArray,
boundaryGap: false,
axisLabel: {
color: 'rgba(0, 0, 0, 0.4)',
},
axisLine: {
lineStyle: {
color: '#E3E6EB',
width: 1,
},
},
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: {
color: 'rgba(0, 0, 0, 0.4)',
},
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
}, },
series: [ series: [
{ {
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '杯子', name: '杯子',
stack: '总量', stack: '总量',
data: [ data: [
@ -311,8 +410,17 @@ export function getFolderlineDataSet(dateTime: any = []): any {
getRandomArray(), getRandomArray(),
], ],
type: 'line', type: 'line',
itemStyle: {
normal: {
borderColor: '#ffffff',
borderWidth: 1,
},
},
}, },
{ {
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '茶叶', name: '茶叶',
stack: '总量', stack: '总量',
data: [ data: [
@ -325,8 +433,17 @@ export function getFolderlineDataSet(dateTime: any = []): any {
getRandomArray(), getRandomArray(),
], ],
type: 'line', type: 'line',
itemStyle: {
normal: {
borderColor: '#ffffff',
borderWidth: 1,
},
},
}, },
{ {
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '蜂蜜', name: '蜂蜜',
stack: '总量', stack: '总量',
data: [ data: [
@ -339,8 +456,17 @@ export function getFolderlineDataSet(dateTime: any = []): any {
getRandomArray(), getRandomArray(),
], ],
type: 'line', type: 'line',
itemStyle: {
normal: {
borderColor: '#ffffff',
borderWidth: 1,
},
},
}, },
{ {
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '面粉', name: '面粉',
stack: '总量', stack: '总量',
data: [ data: [
@ -353,6 +479,12 @@ export function getFolderlineDataSet(dateTime: any = []): any {
getRandomArray(), getRandomArray(),
], ],
type: 'line', type: 'line',
itemStyle: {
normal: {
borderColor: '#ffffff',
borderWidth: 1,
},
},
}, },
], ],
}; };
@ -365,21 +497,37 @@ export function getFolderlineDataSet(dateTime: any = []): any {
* @param {Array<string>} [dateTime=[]] * @param {Array<string>} [dateTime=[]]
* @returns {*} * @returns {*}
*/ */
export function getLineChartDataSet(checkedValues = ''): any { export function getLineChartDataSet(dateTime: Array<string> = []) {
let dateValueList = []; const divideNum = 10;
if (checkedValues === 'monthVal') { const timeArray = [];
dateValueList = ['1', '3', '8', '13', '18', '23', '28']; 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 { } else {
dateValueList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; timeArray.push(
dayjs()
.subtract(divideNum - i, 'day')
.format('MM-DD'),
);
}
inArray.push(getRandomArray().toString());
outArray.push(getRandomArray().toString());
} }
const dataSet = { const dataSet = {
color: chartListColor, color: chartListColor(),
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
}, },
grid: { grid: {
left: '0', left: '0',
right: '0', right: '20px',
top: '5px', top: '5px',
bottom: '36px', bottom: '36px',
containLabel: true, containLabel: true,
@ -388,47 +536,82 @@ export function getLineChartDataSet(checkedValues = ''): any {
left: 'center', left: 'center',
bottom: '0', bottom: '0',
orient: 'horizontal', // legend 横向布局。 orient: 'horizontal', // legend 横向布局。
data: ['付款金额', '收款金额'], data: ['本月', '上月'],
textStyle: {
fontSize: 12,
color: 'rgba(0, 0, 0, 0.6)',
},
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: dateValueList, data: timeArray,
boundaryGap: false,
axisLabel: {
color: 'rgba(0, 0, 0, 0.4)',
},
axisLine: {
lineStyle: {
color: '#E3E6EB',
width: 1,
},
},
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: {
color: 'rgba(0, 0, 0, 0.4)',
},
}, },
series: [ series: [
{ {
name: '付款金额', name: '本月',
data: [ data: outArray,
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line', 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: '收款金额', name: '上月',
data: [ data: inArray,
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line', 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; return dataSet;
} }
@ -452,19 +635,72 @@ export function getSelftItemList(productName: string, devideNum: number): string
* 散点图数据 * 散点图数据
* *
* @export * @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 { return {
color: chartListColor, color: chartListColor(),
xAxis: {}, xAxis: {
yAxis: {}, 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: { tooltip: {
trigger: 'item', trigger: 'item',
}, },
grid: { grid: {
top: '5%', top: '5px',
left: '18px', left: '25px',
right: '5px', right: '5px',
bottom: '60px', bottom: '60px',
}, },
@ -472,36 +708,21 @@ export function getScattlerDataSet(): any {
left: 'center', left: 'center',
bottom: '0', bottom: '0',
orient: 'horizontal', // legend 横向布局。 orient: 'horizontal', // legend 横向布局。
data: ['满意度'], data: ['按摩仪', '咖啡机'],
itemHeight: 8,
itemWidth: 8,
}, },
series: [ series: [
{ {
name: '满意度', name: '按摩仪',
symbolSize: 10, symbolSize: 10,
data: [ data: outArray.reverse(),
[getRandomArray(Math.random() * 10.0), getRandomArray(Math.random() * 8.04)], type: 'scatter',
[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)], name: '咖啡机',
[getRandomArray(Math.random() * 11.0), getRandomArray(Math.random() * 8.33)], symbolSize: 10,
[getRandomArray(Math.random() * 14.0), getRandomArray(Math.random() * 7.66)], data: inArray.concat(inArray.reverse()),
[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)],
],
type: 'scatter', type: 'scatter',
}, },
], ],
@ -512,11 +733,9 @@ export function getScattlerDataSet(): any {
* 获域图数据结构 * 获域图数据结构
* *
* @export * @export
* @returns {any[]} * @returns {}
*/ */
export function getAreaChartDataSet(text = ''): any { export function getAreaChartDataSet() {
console.log(text);
const xAxisData = []; const xAxisData = [];
const data1 = []; const data1 = [];
const data2 = []; const data2 = [];
@ -527,7 +746,7 @@ export function getAreaChartDataSet(text = ''): any {
} }
return { return {
color: chartListColor, color: chartListColor(),
// title: { // title: {
// text: '柱状图动画延迟', // text: '柱状图动画延迟',
// }, // },
@ -585,10 +804,10 @@ export function getAreaChartDataSet(text = ''): any {
* @param {boolean} [isMonth=false] * @param {boolean} [isMonth=false]
* @returns {*} * @returns {*}
*/ */
export function getColumnChartDataSet(isMonth = false): any { export function getColumnChartDataSet(isMonth = false) {
if (isMonth) { if (isMonth) {
return { return {
color: chartListColor, color: chartListColor(),
legend: { legend: {
left: 'center', left: 'center',
top: '10%', top: '10%',
@ -640,9 +859,8 @@ export function getColumnChartDataSet(isMonth = false): any {
], ],
}; };
} }
return { return {
color: chartListColor, color: chartListColor(),
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { 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] * @param {boolean} [isMonth=false]
* @returns {*} * @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 { return {
color: chartListColor, color: chartListColor(),
tooltip: { tooltip: {
trigger: 'axis', trigger: 'item',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
}, },
grid: { grid: {
top: '0', top: '10px',
left: '0', left: '0',
right: '0', right: '0',
// bottom: '10%', bottom: '36px',
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
@ -726,32 +950,40 @@ export function get2ColBarChartDataSet(): any {
axisTick: { axisTick: {
alignWithLabel: true, alignWithLabel: true,
}, },
axisLabel: {
color: 'rgba(0, 0, 0, 0.4)',
},
axisLine: {
lineStyle: {
color: '#E3E6EB',
width: 1,
},
},
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
axisLabel: {
color: 'rgba(0, 0, 0, 0.4)',
},
}, },
], ],
legend: { legend: {
data: ['去年', '今年'], data: ['去年', '今年'],
bottom: '0', bottom: '0',
itemGap: 60, icon: 'rect',
itemGap: 48,
itemHeight: 4,
itemWidth: 12,
itemStyle: {},
}, },
series: [ series: [
{ {
name: '去年', name: '去年',
type: 'bar', type: 'bar',
barWidth: '20%', barWidth: '30%',
data: [ data: lastYearListCopy,
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),
],
itemStyle: { itemStyle: {
color: '#BCC4D0', color: '#BCC4D0',
}, },
@ -759,18 +991,11 @@ export function get2ColBarChartDataSet(): any {
{ {
name: '今年', name: '今年',
type: 'bar', type: 'bar',
barWidth: '20%', barWidth: '30%',
data: [ data: thisYearListCopy,
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),
],
itemStyle: { itemStyle: {
color: (params) => { color: (params) => {
// console.log('chartListColor', chartListColor());
if (params.value >= 200) { if (params.value >= 200) {
return '#E34D59'; return '#E34D59';
} }
@ -789,9 +1014,9 @@ export function get2ColBarChartDataSet(): any {
* @param {number} [radius=1] * @param {number} [radius=1]
* @returns {*} * @returns {*}
*/ */
export function getPieChartDataSet(radius = 42): any { export function getPieChartDataSet(radius = 42) {
return { return {
color: chartListColor, color: chartListColor(),
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
}, },
@ -800,6 +1025,12 @@ export function getPieChartDataSet(radius = 42): any {
right: '0', right: '0',
}, },
legend: { legend: {
itemWidth: 12,
itemHeight: 4,
textStyle: {
fontSize: 12,
color: 'rgba(0, 0, 0, 0.6)',
},
left: 'center', left: 'center',
bottom: '0', bottom: '0',
orient: 'horizontal', // legend 横向布局。 orient: 'horizontal', // legend 横向布局。
@ -808,17 +1039,43 @@ export function getPieChartDataSet(radius = 42): any {
{ {
name: '销售渠道', name: '销售渠道',
type: 'pie', type: 'pie',
radius: ['45%', '60%'], radius: ['48%', '60%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: true, show: true,
position: 'center', 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: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: '12', formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
fontWeight: 'bold', rich: {
value: {
color: '#303133',
fontSize: 36,
fontWeight: 'normal',
lineHeight: 46,
},
name: {
color: '#909399',
fontSize: 14,
lineHeight: 14,
},
},
}, },
}, },
labelLine: { 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 * @export
* @param {Array<any>} chartsList * @param {Array<string>} chartsList
* @param {string} theme * @param {string} theme
*/ */
export function changeChartsTheme(chartsList: Array<any>, theme: string): void { export function changeChartsTheme(chartsList: echarts.EChartsType[]) {
if (chartsList && chartsList.length) { if (chartsList && chartsList.length) {
const chartChangeColor: Array<any> = getColorFromTheme(theme) || chartListColor; const chartChangeColor: any = chartListColor();
chartListColor = chartChangeColor;
for (let index = 0; index < chartsList.length; index++) { for (let index = 0; index < chartsList.length; index++) {
const elementChart: any = chartsList[index]; const elementChart: any = chartsList[index];

15
src/pages/dashboard/detail/constants.ts
View File

@ -3,23 +3,28 @@ export const PANE_LIST_DATA = [
title: '总申请数（次）', title: '总申请数（次）',
count: 1126, count: 1126,
percent: 10, percent: 10,
}, { },
{
title: '供应商数量（个）', title: '供应商数量（个）',
count: 1126, count: 1126,
percent: -13, percent: -13,
}, { },
{
title: '采购商品品类（类）', title: '采购商品品类（类）',
count: 1126, count: 1126,
percent: 10, percent: 10,
}, { },
{
title: '申请人数量（人）', title: '申请人数量（人）',
count: 1126, count: 1126,
percent: 44, percent: 44,
}, { },
{
title: '申请完成率（%）', title: '申请完成率（%）',
count: 1126, count: 1126,
percent: 70, percent: 70,
}, { },
{
title: '到货及时率（%）', title: '到货及时率（%）',
count: 78, count: 78,
percent: 16, percent: 16,

14
src/pages/detail/advanced/components/Product.vue
View File

@ -21,12 +21,7 @@
</div> </div>
<div class="operater-item"> <div class="operater-item">
<span class="operater-item-info">{{ data.info }}</span> <span class="operater-item-info">{{ data.info }}</span>
<t-icon <t-icon class="operater-item-icon" name="chevron-right" size="small" style="color: rgba(0, 0, 0, 0.26)" />
class="operater-item-icon"
name="chevron-right"
size="small"
style="color: rgba(0, 0, 0, 0.26)"
/>
</div> </div>
</div> </div>
<div class="operater-footer"> <div class="operater-footer">
@ -36,8 +31,8 @@
theme="line" theme="line"
:percentage="(data.use / data.stock) * 100" :percentage="(data.use / data.stock) * 100"
:label="false" :label="false"
:color="(data.use / data.stock) < 0.5 ? '#E24D59' : ''" :color="data.use / data.stock < 0.5 ? '#E24D59' : ''"
:track-color="(data.use / data.stock) < 0.5 ? '#FCD4D4' : '#D4E3FC'" :track-color="data.use / data.stock < 0.5 ? '#FCD4D4' : '#D4E3FC'"
/> />
</div> </div>
</div> </div>
@ -50,6 +45,9 @@ export default defineComponent({
props: { props: {
data: { data: {
type: Object, type: Object,
default: () => {
return {};
},
}, },
}, },
}); });

15
src/pages/detail/advanced/constants.ts
View File

@ -1,3 +1,10 @@
interface TableRowType {
index: number;
pdName: string;
purchaseNum: number;
updateTime: string;
}
export const BASE_INFO_DATA = [ export const BASE_INFO_DATA = [
{ {
name: '合同名称', name: '合同名称',
@ -84,14 +91,14 @@ export const TABLE_COLUMNS_DATA = [
ellipsis: true, ellipsis: true,
colKey: 'index', colKey: 'index',
title: '申请号', title: '申请号',
sorter: (a, b) => a.index.substr(3) - b.index.substr(3), sorter: (a: TableRowType, b: TableRowType) => a.index - b.index,
}, },
{ {
minWidth: '100', minWidth: '100',
ellipsis: true, ellipsis: true,
colKey: 'pdName', colKey: 'pdName',
title: '产品名称', title: '产品名称',
sorter: (a, b) => a.pdName.length - b.pdName.length, sorter: (a: TableRowType, b: TableRowType) => a.pdName.length - b.pdName.length,
}, },
{ {
minWidth: '250', minWidth: '250',
@ -104,7 +111,7 @@ export const TABLE_COLUMNS_DATA = [
ellipsis: true, ellipsis: true,
colKey: 'purchaseNum', colKey: 'purchaseNum',
title: '采购数量', title: '采购数量',
sorter: (a, b) => a.purchaseNum - b.purchaseNum, sorter: (a: TableRowType, b: TableRowType) => a.purchaseNum - b.purchaseNum,
}, },
{ {
minWidth: '100', minWidth: '100',
@ -118,7 +125,7 @@ export const TABLE_COLUMNS_DATA = [
ellipsis: true, ellipsis: true,
colKey: 'updateTime', colKey: 'updateTime',
title: '创建时间', 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', align: 'left',

10
src/pages/detail/advanced/index.vue
View File

@ -33,12 +33,8 @@
<card title="产品目录"> <card title="产品目录">
<template #option> <template #option>
<t-radio-group default-value="dateVal"> <t-radio-group default-value="dateVal">
<t-radio-button value="dateVal"> <t-radio-button value="dateVal"> 季度 </t-radio-button>
季度 <t-radio-button value="monthVal"> 月份 </t-radio-button>
</t-radio-button>
<t-radio-button value="monthVal">
月份
</t-radio-button>
</t-radio-group> </t-radio-group>
</template> </template>
<t-row class="operater-block-container"> <t-row class="operater-block-container">
@ -150,7 +146,7 @@ export default defineComponent({
const fetchData = async () => { const fetchData = async () => {
try { 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) { if (res.code === 0) {
const { list = [] } = res.data; const { list = [] } = res.data;
data.value = list; data.value = list;

2
src/pages/detail/base/index.less
View File

@ -16,7 +16,7 @@
} }
.detail-base-panel { .detail-base-panel {
background-color: white; background-color: @bg-color-container;
padding: @spacer-3 @spacer-4 @spacer-4 @spacer-4; padding: @spacer-3 @spacer-4 @spacer-4 @spacer-4;
border-radius: @border-radius; border-radius: @border-radius;
margin-top: 0; margin-top: 0;

8
src/pages/detail/base/index.vue
View File

@ -2,9 +2,7 @@
<div> <div>
<div class="detail-base-panel"> <div class="detail-base-panel">
<t-row class="detail-base-info" justify="space-between"> <t-row class="detail-base-info" justify="space-between">
<p class="detail-base-info-title"> <p class="detail-base-info-title">基本信息</p>
基本信息
</p>
</t-row> </t-row>
<div class="info-block"> <div class="info-block">
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item"> <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)" /> <t-divider style="margin-top: 24px; margin-bottom: 23px; border-top-color: rgba(255, 255, 255, 0)" />
<div class="update-history"> <div class="update-history">
<t-row class="detail-base-info" justify="space-between"> <t-row class="detail-base-info" justify="space-between">
<p class="detail-base-info-title"> <p class="detail-base-info-title">变更记录</p>
变更记录
</p>
</t-row> </t-row>
<t-steps class="detail-base-info-steps" direction="vertical" theme="dot" :current="1"> <t-steps class="detail-base-info-steps" direction="vertical" theme="dot" :current="1">
<t-step-item title="上传合同附件" content="这里是提示文字" /> <t-step-item title="上传合同附件" content="这里是提示文字" />

10
src/pages/detail/deploy/constants.ts
View File

@ -1,3 +1,8 @@
interface TableRowType {
name: string;
updateTime: string;
}
export const BASE_INFO_DATA = [ export const BASE_INFO_DATA = [
{ {
name: '集群名', name: '集群名',
@ -81,14 +86,13 @@ export const BASE_INFO_DATA = [
}, },
]; ];
export const TABLE_COLUMNS = [ export const TABLE_COLUMNS = [
{ {
minWidth: '250', minWidth: '250',
ellipsis: true, ellipsis: true,
colKey: 'name', colKey: 'name',
title: '项目名称', 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', minWidth: '200',
@ -102,7 +106,7 @@ export const TABLE_COLUMNS = [
ellipsis: true, ellipsis: true,
colKey: 'updateTime', colKey: 'updateTime',
title: '创建时间', 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', align: 'left',

2
src/pages/detail/secondary/index.less
View File

@ -1,7 +1,7 @@
@import '@/style/variables.less'; @import '@/style/variables.less';
.secondary-notification { .secondary-notification {
background-color: white; background-color: @bg-color-container;
border-radius: @border-radius; border-radius: @border-radius;
padding: @spacer-3 @spacer-4; padding: @spacer-3 @spacer-4;

19
src/pages/detail/secondary/index.vue
View File

@ -34,7 +34,7 @@
</t-list-item> </t-list-item>
</t-list> </t-list>
<div v-else class="secondary-msg-list__empty-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> <p>暂无通知</p>
</div> </div>
</t-tab-panel> </t-tab-panel>
@ -48,10 +48,11 @@
/> />
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, computed } from 'vue'; import { defineComponent, ref, computed, ComputedRef } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { NOTIFICATION_TYPES } from '@/constants'; import { NOTIFICATION_TYPES } from '@/constants';
import ReadIcon from '@/assets/read.svg?component'; import ReadIcon from '@/assets/read.svg?component';
import { NotificationItem } from '@/store/interface';
const TAB_LIST = [ const TAB_LIST = [
{ {
@ -75,27 +76,27 @@ export default defineComponent({
const tabValue = ref('msgData'); const tabValue = ref('msgData');
const visible = ref(false); const visible = ref(false);
const selectedItem = ref(undefined); const selectedItem = ref<NotificationItem>();
const store = useStore(); const store = useStore();
const { msgData } = store.state.notification; const { msgData } = store.state.notification;
const msgDataList = computed(() => { const msgDataList: ComputedRef<NotificationItem[]> = computed(() => {
if (tabValue.value === 'msgData') return msgData; if (tabValue.value === 'msgData') return msgData;
if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg']; if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
if (tabValue.value === 'readMsg') return store.getters['notification/readMsg']; if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
return []; return [];
}); });
const handleClickDeleteBtn = (item) => { const handleClickDeleteBtn = (item: NotificationItem) => {
visible.value = true; visible.value = true;
selectedItem.value = item; selectedItem.value = item;
}; };
const setReadStatus = (item) => { const setReadStatus = (item: NotificationItem) => {
const changeMsg = msgData; const changeMsg = msgData;
changeMsg.forEach((e) => { changeMsg.forEach((e: NotificationItem) => {
if (e.id === item.id) { if (e.id === item.id) {
e.status = !e.status; e.status = !e.status;
} }
@ -106,8 +107,8 @@ export default defineComponent({
const deleteMsg = () => { const deleteMsg = () => {
const item = selectedItem.value; const item = selectedItem.value;
const changeMsg = msgData; const changeMsg = msgData;
changeMsg.forEach((e, index) => { changeMsg.forEach((e: NotificationItem, index: number) => {
if (e.id === item.id) { if (e.id === item?.id) {
changeMsg.splice(index, 1); changeMsg.splice(index, 1);
} }
}); });

2
src/pages/form/base/index.less
View File

@ -7,7 +7,7 @@
.@{prefix} { .@{prefix} {
&-panel { &-panel {
background-color: white; background-color: @bg-color-container;
padding: @spacer-3; padding: @spacer-3;
border-radius: @border-radius; border-radius: @border-radius;
} }

2
src/pages/form/step/index.less
View File

@ -7,7 +7,7 @@
.@{prefix} { .@{prefix} {
&-panel { &-panel {
background-color: white; background-color: @bg-color-container;
&.@{prefix}-step-panel { &.@{prefix}-step-panel {
padding: 0; padding: 0;

69
src/pages/form/step/index.vue
View File

@ -27,8 +27,8 @@
class="step-form" class="step-form"
:data="formData1" :data="formData1"
:rules="FORM_RULES" :rules="FORM_RULES"
label-align="left" label-align="right"
@submit="({ validateResult }) => onSubmit({ validateResult }, 1)" @submit="(result) => onSubmit(result, 1)"
> >
<t-form-item label="合同名称" name="name"> <t-form-item label="合同名称" name="name">
<t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable> <t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable>
@ -44,13 +44,9 @@
</t-option> </t-option>
</t-select> </t-select>
</t-form-item> </t-form-item>
<t-form-item label="开票金额"> <t-form-item label="开票金额"> {{ amount }} 元 </t-form-item>
{{ amount }} 元
</t-form-item>
<t-form-item> <t-form-item>
<t-button theme="primary" type="submit"> <t-button theme="primary" type="submit"> 提交申请 </t-button>
提交申请
</t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
@ -62,7 +58,7 @@
:rules="FORM_RULES" :rules="FORM_RULES"
label-align="left" label-align="left"
@reset="onReset(0)" @reset="onReset(0)"
@submit="({ validateResult }) => onSubmit({ validateResult }, 2)" @submit="(result) => onSubmit(result, 2)"
> >
<t-form-item label="发票抬头" name="title"> <t-form-item label="发票抬头" name="title">
<t-input v-model="formData2.title" :style="{ width: '480px' }" placeholder="请输入发票抬头" /> <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-input v-model="formData2.tel" :style="{ width: '480px' }" placeholder="请输入通知手机" />
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-button type="reset" theme="default" variant="base"> <t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
上一步 <t-button theme="primary" type="submit"> 下一步 </t-button>
</t-button>
<t-button theme="primary" type="submit">
下一步
</t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
@ -103,7 +95,7 @@
:rules="FORM_RULES" :rules="FORM_RULES"
label-align="left" label-align="left"
@reset="onReset(1)" @reset="onReset(1)"
@submit="({ validateResult }) => onSubmit({ validateResult }, 6)" @submit="(result) => onSubmit(result, 6)"
> >
<t-form-item label="收货人" name="consignee"> <t-form-item label="收货人" name="consignee">
<t-input v-model="formData3.consignee" :style="{ width: '480px' }" placeholder="请输入收货人" /> <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-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" placeholder="请输入详细地址" />
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-button type="reset" theme="default" variant="base"> <t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
上一步 <t-button theme="primary" type="submit"> 下一步 </t-button>
</t-button>
<t-button theme="primary" type="submit">
下一步
</t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
<!-- 分步表单4 --> <!-- 分步表单4 -->
<div v-show="activeForm === 6" class="step-form-4"> <div v-show="activeForm === 6" class="step-form-4">
<t-icon name="check-circle-filled" style="color: green" size="52px" /> <t-icon name="check-circle-filled" style="color: green" size="52px" />
<p class="text"> <p class="text">完成开票申请</p>
完成开票申请 <p class="tips">预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待</p>
</p>
<p class="tips">
预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待
</p>
<div class="button-group"> <div class="button-group">
<t-button theme="primary" @click="onReset(0)"> <t-button theme="primary" @click="onReset(0)"> 再次申请 </t-button>
再次申请 <t-button variant="base" theme="default" @click="complete"> 查看进度 </t-button>
</t-button>
<t-button variant="base" theme="default" @click="complete">
查看进度
</t-button>
</div> </div>
</div> </div>
</div> </div>
@ -160,11 +140,18 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, computed } from 'vue'; import { defineComponent, ref, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { ValidateResultContext } from 'tdesign-vue-next';
import { PREFIX } from '@/config/global'; import { PREFIX } from '@/config/global';
import { FORM_RULES, NAME_OPTIONS, TYPE_OPTIONS, ADDRESS_OPTIONS, INITIAL_DATA1, INITIAL_DATA2, INITIAL_DATA3 } from './constants';
// 导入样式 import {
import './index.less'; FORM_RULES,
NAME_OPTIONS,
TYPE_OPTIONS,
ADDRESS_OPTIONS,
INITIAL_DATA1,
INITIAL_DATA2,
INITIAL_DATA3,
} from './constants';
export default defineComponent({ export default defineComponent({
name: 'FormStep', name: 'FormStep',
@ -198,12 +185,12 @@ export default defineComponent({
formData3, formData3,
activeForm, activeForm,
amount, amount,
onSubmit({ validateResult }, val) { onSubmit(result: ValidateResultContext<FormData>, val: number) {
if (validateResult === true) { if (result.validateResult === true) {
activeForm.value = val; activeForm.value = val;
} }
}, },
onReset(val) { onReset(val: number) {
activeForm.value = val; activeForm.value = val;
}, },
complete() { complete() {

7
src/pages/list/base/constants.ts
View File

@ -8,7 +8,12 @@ export const COLUMNS = [
ellipsis: true, ellipsis: true,
colKey: 'name', colKey: 'name',
}, },
{ title: '合同状态', colKey: 'status', width: 150, cell: { col: 'status' } }, {
title: '合同状态',
colKey: 'status',
width: 150,
cell: { col: 'status' },
},
{ {
title: '合同编号', title: '合同编号',
minWidth: '100', minWidth: '100',

3
src/pages/list/filter/index.vue
View File

@ -14,9 +14,10 @@ export default defineComponent({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/index'; @import '@/style/index';
.@{prefix} { .@{prefix} {
&-panel { &-panel {
background-color: white; background-color: @bg-color-container;
padding: @spacer-3; padding: @spacer-3;
border-radius: @border-radius; border-radius: @border-radius;
} }

10
src/pages/login/components/Register.vue
View File

@ -48,9 +48,7 @@
<div class="check-container"> <div class="check-container">
<t-checkbox>我已阅读并同意 </t-checkbox><span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span> <t-checkbox>我已阅读并同意 </t-checkbox><span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
</div> </div>
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister"> <t-button class="button-container" style="width: 400px" size="large" @click="handleRegister"> 注册 </t-button>
注册
</t-button>
</div> </div>
<div class="bottom-container"> <div class="bottom-container">
<span class="tip" @click="type = 'eamil'">使用手机号注册</span> <span class="tip" @click="type = 'eamil'">使用手机号注册</span>
@ -103,9 +101,7 @@
<div class="check-container"> <div class="check-container">
<t-checkbox>我已阅读并同意 </t-checkbox> <span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span> <t-checkbox>我已阅读并同意 </t-checkbox> <span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
</div> </div>
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister"> <t-button class="button-container" style="width: 400px" size="large" @click="handleRegister"> 注册 </t-button>
注册
</t-button>
</div> </div>
<div class="bottom-container"> <div class="bottom-container">
<span class="tip" @click="type = 'phone'">使用邮箱注册</span> <span class="tip" @click="type = 'phone'">使用邮箱注册</span>
@ -117,7 +113,7 @@
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
import { useCounter } from '@/utils/hooks'; import { useCounter } from '@/utils/hooks';
const getEmails = (search:string) => [ const getEmails = (search: string) => [
{ {
value: `${search}@qq.com`, value: `${search}@qq.com`,
label: `${search}@qq.com`, label: `${search}@qq.com`,

8
src/pages/login/index.vue
View File

@ -2,13 +2,13 @@
<div class="login-wrapper"> <div class="login-wrapper">
<div class="login-container"> <div class="login-container">
<div class="title-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"> <div class="side-title">
<p class="tip1"> <p class="tip1">
{{ type == 'register' ? '没有账号吗?' : "已有账号?" }} {{ type == 'register' ? '没有账号吗?' : '已有账号?' }}
</p> </p>
<p class="tip2" @click="switchType(type == 'register' ? 'login' : 'register')"> <p class="tip2" @click="switchType(type == 'register' ? 'login' : 'register')">
{{ type == 'register' ? '登录' : "注册新账号" }} {{ type == 'register' ? '登录' : '注册新账号' }}
</p> </p>
</div> </div>
</div> </div>
@ -33,7 +33,7 @@ export default defineComponent({
setup() { setup() {
const type = ref('login'); const type = ref('login');
const switchType = (val:string) => { const switchType = (val: string) => {
type.value = val; type.value = val;
}; };

18
src/pages/result/fail/index.vue
View File

@ -2,16 +2,10 @@
<card> <card>
<div class="result-success"> <div class="result-success">
<t-icon class="result-success-icon" name="close-circle-filled" /> <t-icon class="result-success-icon" name="close-circle-filled" />
<div class="result-success-title"> <div class="result-success-title">项目创建失败</div>
项目创建失败 <div class="result-success-describe">企业微信联系检查创建者权限，或返回修改</div>
</div>
<div class="result-success-describe">
企业微信联系检查创建者权限，或返回修改
</div>
<div> <div>
<t-button @click="() => $router.push('/form/base')"> <t-button @click="() => $router.push('/form/base')"> 返回修改 </t-button>
返回修改
</t-button>
</div> </div>
</div> </div>
</card> </card>
@ -38,13 +32,13 @@ export default defineComponent({
height: 75vh; height: 75vh;
&-icon { &-icon {
font-size: 64px; font-size: 64px;
color: @error-color; color: @text-color-secondary;
} }
&-title { &-title {
margin-top: 16px; margin-top: 16px;
font-size: 20px; font-size: 20px;
color: rgba(0, 0, 0, 0.9); color: @text-color-primary;
text-align: center; text-align: center;
line-height: 22px; line-height: 22px;
} }
@ -52,7 +46,7 @@ export default defineComponent({
&-describe { &-describe {
margin: 8px 0 32px; margin: 8px 0 32px;
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.6); color: @text-color-secondary;
line-height: 22px; line-height: 22px;
} }
} }

21
src/pages/result/success/index.vue
View File

@ -2,19 +2,11 @@
<card> <card>
<div class="result-success"> <div class="result-success">
<t-icon class="result-success-icon" name="check-circle-filled" /> <t-icon class="result-success-icon" name="check-circle-filled" />
<div class="result-success-title"> <div class="result-success-title">项目已创建成功</div>
项目已创建成功 <div class="result-success-describe">可以联系负责人分发应用</div>
</div>
<div class="result-success-describe">
可以联系负责人分发应用
</div>
<div> <div>
<t-button theme="default" @click="() => $router.push('/detail/advanced')"> <t-button theme="default" @click="() => $router.push('/detail/advanced')"> 查看进度 </t-button>
查看进度 <t-button @click="() => $router.push('/form/base')"> 再次创建 </t-button>
</t-button>
<t-button @click="() => $router.push('/form/base')">
再次创建
</t-button>
</div> </div>
</div> </div>
</card> </card>
@ -24,6 +16,7 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import Card from '@/components/card/index.vue'; import Card from '@/components/card/index.vue';
export default defineComponent({ export default defineComponent({
name: 'ResultSuccess', name: 'ResultSuccess',
components: { Card }, components: { Card },
@ -48,7 +41,7 @@ export default defineComponent({
&-title { &-title {
margin-top: 16px; margin-top: 16px;
font-size: 20px; font-size: 20px;
color: rgba(0, 0, 0, 0.9); color: @text-color-primary;
text-align: center; text-align: center;
line-height: 22px; line-height: 22px;
} }
@ -56,7 +49,7 @@ export default defineComponent({
&-describe { &-describe {
margin: 8px 0 32px; margin: 8px 0 32px;
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.6); color: @text-color-primary;
line-height: 22px; line-height: 22px;
} }
} }

5
src/router/index.ts
View File

@ -1,10 +1,10 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import routeConfig from '@/config/routes'; 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 pagesModules = import.meta.glob('../pages/**/*.vue');
const fristPagesModules = 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) => { const getMenuRoutes = (list) => {
if (!list) { if (!list) {
@ -42,4 +42,3 @@ const router = createRouter({
}, },
}); });
export default router; export default router;

11
src/store/modules/notification.ts
View File

@ -1,4 +1,6 @@
// 定义的state初始值 // 定义的state初始值
import { NotificationItem } from '../interface'
const state = { const state = {
msgData: [ msgData: [
{ {
@ -58,15 +60,18 @@ const state = {
], ],
}; };
type NotificationStateType = typeof state;
type MsgDataType = typeof state.msgData;
const mutations = { const mutations = {
setMsgData(state, data) { setMsgData(state: NotificationStateType, data: MsgDataType) {
state.msgData = data; state.msgData = data;
}, },
}; };
const getters = { const getters = {
unreadMsg: state => state.msgData.filter(item => item.status), unreadMsg: (state: NotificationStateType) => state.msgData.filter((item: NotificationItem) => item.status),
readMsg: state => state.msgData.filter(item => !item.status), readMsg: (state: NotificationStateType) => state.msgData.filter((item: NotificationItem) => !item.status),
}; };
const actions = {}; const actions = {};

53
src/store/modules/setting.ts
View File

@ -4,12 +4,13 @@ import MENU_CONFIG from '@/config/routes';
// 定义的state初始值 // 定义的state初始值
const state = { const state = {
...STYLE_CONFIG, ...STYLE_CONFIG,
showSettingPanel: false,
}; };
const mutations = { const mutations = {
update(state, payload) { update(state, payload) {
state.showBreadcrumb = payload.showBreadcrumb; state.showBreadcrumb = payload.showBreadcrumb;
state.theme = payload.theme; state.mode = payload.mode;
state.layout = payload.layout; state.layout = payload.layout;
state.isSidebarCompact = payload.isSidebarCompact; state.isSidebarCompact = payload.isSidebarCompact;
state.logoPosition = payload.logoPosition; state.logoPosition = payload.logoPosition;
@ -18,6 +19,7 @@ const mutations = {
state.isSidebarFixed = payload.isSidebarFixed; state.isSidebarFixed = payload.isSidebarFixed;
state.isHeaderFixed = payload.isHeaderFixed; state.isHeaderFixed = payload.isHeaderFixed;
state.showHeader = payload.showHeader; state.showHeader = payload.showHeader;
state.showFooter = payload.showFooter;
}, },
toggleSidebarCompact(state) { toggleSidebarCompact(state) {
state.isSidebarCompact = !state.isSidebarCompact; state.isSidebarCompact = !state.isSidebarCompact;
@ -25,17 +27,20 @@ const mutations = {
showSidebarCompact(state, payload) { showSidebarCompact(state, payload) {
state.isSidebarCompact = payload; state.isSidebarCompact = payload;
}, },
toggleSettingPanel(state, payload) {
state.showSettingPanel = payload;
},
}; };
const getters = { const getters = {
showHeader: state => state.showHeader, showHeader: (state) => state.showHeader,
showSidebar: state => state.layout !== 'top', showSidebar: (state) => state.layout !== 'top',
showSidebarLogo: state => state.layout === 'side', showSidebarLogo: (state) => state.layout === 'side',
showHeaderLogo: state => state.layout !== 'side', showHeaderLogo: (state) => state.layout !== 'side',
headerMenu: (state) => { headerMenu: (state) => {
if (state.layout === 'mix') { if (state.layout === 'mix') {
if (state.splitMenu) { if (state.splitMenu) {
return MENU_CONFIG.map(menu => ({ return MENU_CONFIG.map((menu) => ({
...menu, ...menu,
children: [], children: [],
})); }));
@ -51,29 +56,35 @@ const getters = {
const item = MENU_CONFIG[index]; const item = MENU_CONFIG[index];
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
if (rootState.route.path.indexOf(item.path) === 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; return MENU_CONFIG;
}, },
showAsideFooter: (state) => { showFooter: (state) => state.showFooter,
if (state.layout === 'mix' && !state.isSidebarFixed) { showSettingBtn: (state) => !state.showHeader,
return state.showFooter && state.isAsideFooter;
}
return state.showFooter;
},
showMainFooter: (state) => {
if (state.layout === 'mix' && !state.isSidebarFixed) {
return state.showFooter && !state.isAsideFooter;
}
return false;
},
}; };
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 { export default {
namespaced: true, namespaced: true,

6
src/style/index.less
View File

@ -6,7 +6,9 @@
@import './font-family.less'; @import './font-family.less';
@import './sidenav.less'; @import './side-nav.less';
@import './theme/index.less';
body { body {
color: @text-color-secondary; color: @text-color-secondary;
@ -118,7 +120,7 @@ p {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.@{prefix}-sidenav-layout { .@{prefix}-sideNav-layout {
&-relative { &-relative {
height: 100%; height: 100%;

4
src/style/sidenav.less → src/style/side-nav.less
View File

@ -16,7 +16,7 @@
z-index: 100; z-index: 100;
} }
&-sidenav { &-sideNav {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -66,7 +66,7 @@
} }
&-sidenav-placeholder { &-sideNav-placeholder {
flex: 1 1 232px; flex: 1 1 232px;
min-width: 232px; min-width: 232px;
transition: all .3s; transition: all .3s;

13
src/style/theme/cyan.less Normal file
View File

@ -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;
}

164
src/style/theme/dark.less Normal file
View File

@ -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);
}

14
src/style/theme/green.less Normal file
View File

@ -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;
}

17
src/style/theme/index.less Normal file
View File

@ -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';

169
src/style/theme/light.less Normal file
View File

@ -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);
}

14
src/style/theme/orange.less Normal file
View File

@ -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;
}

14
src/style/theme/pink.less Normal file
View File

@ -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;
}

14
src/style/theme/purple.less Normal file
View File

@ -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;
}

14
src/style/theme/red.less Normal file
View File

@ -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;
}

14
src/style/theme/yellow.less Normal file
View File

@ -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;
}

4
src/utils/date.ts
View File

@ -1,6 +1,6 @@
// 获取常用时间 // 获取常用时间
import dayjs, { Dayjs } from 'dayjs'; 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')];

29
src/utils/hooks.ts
View File

@ -6,9 +6,9 @@ import * as echarts from 'echarts/core';
* @param domId * @param domId
* @param chart * @param chart
*/ */
export const useChart = (domId: string) => { export const useChart = (domId: string): Ref<echarts.ECharts> => {
let chartContainer: HTMLCanvasElement; let chartContainer: HTMLCanvasElement;
const selfChart = ref<echarts.ECharts>(); const selfChart = ref<echarts.ECharts | any>();
const updateContainer = () => { const updateContainer = () => {
selfChart.value.resize({ selfChart.value.resize({
width: chartContainer.clientWidth, width: chartContainer.clientWidth,
@ -23,14 +23,13 @@ export const useChart = (domId: string) => {
selfChart.value = echarts.init(chartContainer); selfChart.value = echarts.init(chartContainer);
}); });
window.addEventListener('resize', updateContainer, false); window.addEventListener('resize', updateContainer, false);
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', updateContainer); window.removeEventListener('resize', updateContainer);
}); });
return selfChart return selfChart;
}; };
/** /**
@ -38,16 +37,16 @@ export const useChart = (domId: string) => {
* @param duration * @param duration
* @returns * @returns
*/ */
export const useCounter = (duration: number = 60): [ export const useCounter = (duration = 60): [Ref<number>, () => void] => {
Ref<number>, () => void let intervalTimer: NodeJS.Timer;
] => {
let intervalTimer = null;
onMounted(() => { onMounted(() => {
clearInterval(intervalTimer) clearInterval(intervalTimer);
}) });
const countDown = ref(0); const countDown = ref(0);
return [countDown, () => { return [
countDown,
() => {
countDown.value = duration; countDown.value = duration;
intervalTimer = setInterval(() => { intervalTimer = setInterval(() => {
if (countDown.value > 0) { if (countDown.value > 0) {
@ -55,8 +54,8 @@ export const useCounter = (duration: number = 60): [
} else { } else {
clearInterval(intervalTimer); clearInterval(intervalTimer);
countDown.value = 0; countDown.value = 0;
intervalTimer = null;
} }
}, 1000) }, 1000);
}]; },
} ];
};

4
src/utils/request.js
View File

@ -17,7 +17,7 @@ const instance = axios.create({
withCredentials: true, withCredentials: true,
}); });
instance.interceptors.request.use(config => config); instance.interceptors.request.use((config) => config);
instance.defaults.retry = 3; instance.defaults.retry = 3;
@ -28,8 +28,8 @@ instance.interceptors.response.use(
if (data.code === CODE.REQUEST_SUCCESS) { if (data.code === CODE.REQUEST_SUCCESS) {
return data; return data;
} }
return response;
} }
return response;
}, },
(err) => { (err) => {
const { config } = err; const { config } = err;

7
tsconfig.json
View File

@ -3,7 +3,7 @@
"target": "esnext", "target": "esnext",
"module": "esnext", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"strict": false, "strict": true,
"jsx": "preserve", "jsx": "preserve",
"sourceMap": true, "sourceMap": true,
"resolveJsonModule": true, "resolveJsonModule": true,
@ -12,8 +12,9 @@
"noEmit": true, "noEmit": true,
"baseUrl": "./", "baseUrl": "./",
"paths": { "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
} }

22
vite.config.ts
View File

@ -1,38 +1,19 @@
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import { viteMockServe } from 'vite-plugin-mock'; import { viteMockServe } from 'vite-plugin-mock';
import { viteThemePlugin } from 'vite-plugin-theme';
import createVuePlugin from '@vitejs/plugin-vue'; import createVuePlugin from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx'; import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader'; import svgLoader from 'vite-svg-loader';
// import HttpProxyAgent from 'http-proxy-agent';
import path from 'path'; 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/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
resolve: { resolve: {
alias: { alias: {
'~': path.resolve(__dirname, './'),
'@': path.resolve(__dirname, './src'), '@': path.resolve(__dirname, './src'),
}, },
}, },
css: {
preprocessorOptions: {
less: {
modifyVars: {
...getBrandColor(brandTheme),
...getGreyColor(backgroundTheme),
},
},
},
},
plugins: [ plugins: [
createVuePlugin(), createVuePlugin(),
@ -41,9 +22,6 @@ export default defineConfig({
mockPath: 'mock', mockPath: 'mock',
localEnabled: true, localEnabled: true,
}), }),
viteThemePlugin({
colorVariables: getColorList([getGreyColor(backgroundTheme), getBrandColor(brandTheme)]),
}),
svgLoader(), svgLoader(),
], ],