image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-09-20 02:34:24 +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
lib
es
esm
node_modules
common
src/_common
static
cypress
script/test/cypress
_site
temp*
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;
@ -13,5 +12,3 @@ declare module '*.svg' {
const CONTENT: string;
export default CONTENT;
}

2
index.html
View File

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

4
src/App.vue
View File

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

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

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

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

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

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

@ -1,5 +1,5 @@
<template>
<img :class="className" :src="url">
<img :class="className" :src="url" />
</template>
<script lang="ts">
import { defineComponent, computed, PropType } from 'vue';
@ -35,7 +35,6 @@ export default defineComponent({
@import url('@/style/index.less');
.thumbnail {
&-container {
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="M8 11L8 4" stroke="currentColor" stroke-width="1.5" />
</svg>
<svg
v-else
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<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="M8 5V12" stroke="currentColor" stroke-width="1.5" />
</svg>
@ -70,6 +63,7 @@ export default defineComponent({
</script>
<style lang="less" scoped>
@import '@/style/variables.less';
.trend {
&-container {
&__up {

6
src/config/color.ts
View File

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

14
src/config/routes.ts
View File

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

2
src/config/style.ts
View File

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

12
src/interface.ts
View File

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

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

@ -21,12 +21,7 @@
</div>
<div class="operater-item">
<span class="operater-item-info">{{ data.info }}</span>
<t-icon
class="operater-item-icon"
name="chevron-right"
size="small"
style="color: rgba(0, 0, 0, 0.26)"
/>
<t-icon class="operater-item-icon" name="chevron-right" size="small" style="color: rgba(0, 0, 0, 0.26)" />
</div>
</div>
<div class="operater-footer">
@ -36,8 +31,8 @@
theme="line"
:percentage="(data.use / data.stock) * 100"
:label="false"
:color="(data.use / data.stock) < 0.5 ? '#E24D59' : ''"
:track-color="(data.use / data.stock) < 0.5 ? '#FCD4D4' : '#D4E3FC'"
:color="data.use / data.stock < 0.5 ? '#E24D59' : ''"
:track-color="data.use / data.stock < 0.5 ? '#FCD4D4' : '#D4E3FC'"
/>
</div>
</div>
@ -50,6 +45,9 @@ export default defineComponent({
props: {
data: {
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 = [
{
name: '合同名称',
@ -84,14 +91,14 @@ export const TABLE_COLUMNS_DATA = [
ellipsis: true,
colKey: 'index',
title: '申请号',
sorter: (a, b) => a.index.substr(3) - b.index.substr(3),
sorter: (a: TableRowType, b: TableRowType) => a.index - b.index,
},
{
minWidth: '100',
ellipsis: true,
colKey: 'pdName',
title: '产品名称',
sorter: (a, b) => a.pdName.length - b.pdName.length,
sorter: (a: TableRowType, b: TableRowType) => a.pdName.length - b.pdName.length,
},
{
minWidth: '250',
@ -104,7 +111,7 @@ export const TABLE_COLUMNS_DATA = [
ellipsis: true,
colKey: 'purchaseNum',
title: '采购数量',
sorter: (a, b) => a.purchaseNum - b.purchaseNum,
sorter: (a: TableRowType, b: TableRowType) => a.purchaseNum - b.purchaseNum,
},
{
minWidth: '100',
@ -118,7 +125,7 @@ export const TABLE_COLUMNS_DATA = [
ellipsis: true,
colKey: 'updateTime',
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',

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

@ -33,12 +33,8 @@
<card title="产品目录">
<template #option>
<t-radio-group default-value="dateVal">
<t-radio-button value="dateVal">
季度
</t-radio-button>
<t-radio-button value="monthVal">
月份
</t-radio-button>
<t-radio-button value="dateVal"> 季度 </t-radio-button>
<t-radio-button value="monthVal"> 月份 </t-radio-button>
</t-radio-group>
</template>
<t-row class="operater-block-container">

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

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

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

@ -2,9 +2,7 @@
<div>
<div class="detail-base-panel">
<t-row class="detail-base-info" justify="space-between">
<p class="detail-base-info-title">
基本信息
</p>
<p class="detail-base-info-title">基本信息</p>
</t-row>
<div class="info-block">
<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)" />
<div class="update-history">
<t-row class="detail-base-info" justify="space-between">
<p class="detail-base-info-title">
变更记录
</p>
<p class="detail-base-info-title">变更记录</p>
</t-row>
<t-steps class="detail-base-info-steps" direction="vertical" theme="dot" :current="1">
<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 = [
{
name: '集群名',
@ -81,14 +86,13 @@ export const BASE_INFO_DATA = [
},
];
export const TABLE_COLUMNS = [
{
minWidth: '250',
ellipsis: true,
colKey: 'name',
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',
@ -102,7 +106,7 @@ export const TABLE_COLUMNS = [
ellipsis: true,
colKey: 'updateTime',
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',

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -48,9 +48,7 @@
<div class="check-container">
<t-checkbox>我已阅读并同意 </t-checkbox><span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
</div>
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister">
注册
</t-button>
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister"> 注册 </t-button>
</div>
<div class="bottom-container">
<span class="tip" @click="type = 'eamil'">使用手机号注册</span>
@ -103,9 +101,7 @@
<div class="check-container">
<t-checkbox>我已阅读并同意 </t-checkbox> <span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
</div>
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister">
注册
</t-button>
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister"> 注册 </t-button>
</div>
<div class="bottom-container">
<span class="tip" @click="type = 'phone'">使用邮箱注册</span>

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

@ -2,13 +2,13 @@
<div class="login-wrapper">
<div class="login-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">
<p class="tip1">
{{ type == 'register' ? '没有账号吗?' : "已有账号?" }}
{{ type == 'register' ? '没有账号吗?' : '已有账号?' }}
</p>
<p class="tip2" @click="switchType(type == 'register' ? 'login' : 'register')">
{{ type == 'register' ? '登录' : "注册新账号" }}
{{ type == 'register' ? '登录' : '注册新账号' }}
</p>
</div>
</div>

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

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

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

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

5
src/router/index.ts
View File

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

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

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

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

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

6
src/style/index.less
View File

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

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

@ -16,7 +16,7 @@
z-index: 100;
}
&-sidenav {
&-sideNav {
position: fixed;
top: 0;
bottom: 0;
@ -66,7 +66,7 @@
}
&-sidenav-placeholder {
&-sideNav-placeholder {
flex: 1 1 232px;
min-width: 232px;
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';
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 chart
*/
export const useChart = (domId: string) => {
export const useChart = (domId: string): Ref<echarts.ECharts> => {
let chartContainer: HTMLCanvasElement;
const selfChart = ref<echarts.ECharts>();
const selfChart = ref<echarts.ECharts | any>();
const updateContainer = () => {
selfChart.value.resize({
width: chartContainer.clientWidth,
@ -23,14 +23,13 @@ export const useChart = (domId: string) => {
selfChart.value = echarts.init(chartContainer);
});
window.addEventListener('resize', updateContainer, false);
onUnmounted(() => {
window.removeEventListener('resize', updateContainer);
});
return selfChart
return selfChart;
};
/**
@ -38,16 +37,16 @@ export const useChart = (domId: string) => {
* @param duration
* @returns
*/
export const useCounter = (duration: number = 60): [
Ref<number>, () => void
] => {
let intervalTimer = null;
export const useCounter = (duration = 60): [Ref<number>, () => void] => {
let intervalTimer: NodeJS.Timer;
onMounted(() => {
clearInterval(intervalTimer)
})
clearInterval(intervalTimer);
});
const countDown = ref(0);
return [countDown, () => {
return [
countDown,
() => {
countDown.value = duration;
intervalTimer = setInterval(() => {
if (countDown.value > 0) {
@ -55,8 +54,8 @@ export const useCounter = (duration: number = 60): [
} else {
clearInterval(intervalTimer);
countDown.value = 0;
intervalTimer = null;
}
}, 1000)
}];
}
}, 1000);
},
];
};

4
src/utils/request.js
View File

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

7
tsconfig.json
View File

@ -3,7 +3,7 @@
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": false,
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
@ -12,8 +12,9 @@
"noEmit": true,
"baseUrl": "./",
"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 { viteMockServe } from 'vite-plugin-mock';
import { viteThemePlugin } from 'vite-plugin-theme';
import createVuePlugin from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader';
// import HttpProxyAgent from 'http-proxy-agent';
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/
export default defineConfig({
resolve: {
alias: {
'~': path.resolve(__dirname, './'),
'@': path.resolve(__dirname, './src'),
},
},
css: {
preprocessorOptions: {
less: {
modifyVars: {
...getBrandColor(brandTheme),
...getGreyColor(backgroundTheme),
},
},
},
},
plugins: [
createVuePlugin(),
@ -41,9 +22,6 @@ export default defineConfig({
mockPath: 'mock',
localEnabled: true,
}),
viteThemePlugin({
colorVariables: getColorList([getGreyColor(backgroundTheme), getBrandColor(brandTheme)]),
}),
svgLoader(),
],