Feat/updateconfig (#2)

* 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

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

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>

View File

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

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

View File

@ -1,32 +1,29 @@
<template>
<card>
<div class="result-container">
<img class="result-bg-img" :src="bgUrl">
<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>
</div>
<div class="result-container">
<img class="result-bg-img" :src="bgUrl" />
<div class="result-title">
{{ title }}
</div>
</card>
<div class="result-tip">
{{ tip }}
</div>
<slot />
</div>
</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: '',

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

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 {

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

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: [

View File

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

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;

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

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,51 +104,66 @@ 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,
series: [
{
data: [
100,
130,
184,
218,
{
value: 135,
itemStyle: {
color: '#ECF2FE',
},
const barDataset = {
...datasetAxis,
color: chartListColor(),
series: [
{
data: [
100,
130,
184,
218,
{
value: 135,
itemStyle: {
color: chartListColor()[1],
},
{
value: 118,
itemStyle: {
color: '#ECF2FE',
},
},
{
value: 118,
itemStyle: {
color: chartListColor()[1],
},
{
value: 60,
itemStyle: {
color: '#ECF2FE',
},
},
{
value: 60,
itemStyle: {
color: chartListColor()[1],
},
],
type,
},
],
};
return barDataset;
}
},
],
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'];
} else {
dateValueList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
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 {
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];

View File

@ -3,30 +3,35 @@ 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,
},
];
export const PRODUCT_LIST = [
export const PRODUCT_LIST = [
{
description: 'SSL证书又叫服务器证书腾讯云为您提供证书的一站式服务包括免费、付费证书的申请、管理及部',
index: 1,

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 {};
},
},
},
});

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',

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">
@ -150,7 +146,7 @@ export default defineComponent({
const fetchData = async () => {
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) {
const { list = [] } = res.data;
data.value = list;

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;

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="这里是提示文字" />

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',

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;

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

View File

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

View File

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

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">
预计13个工作日会将电子发票发至邮箱发票邮寄请耐心等待
</p>
<p class="text">完成开票申请</p>
<p class="tips">预计13个工作日会将电子发票发至邮箱发票邮寄请耐心等待</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() {

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',

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

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>
@ -117,7 +113,7 @@
import { defineComponent, ref } from 'vue';
import { useCounter } from '@/utils/hooks';
const getEmails = (search:string) => [
const getEmails = (search: string) => [
{
value: `${search}@qq.com`,
label: `${search}@qq.com`,

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>
@ -33,7 +33,7 @@ export default defineComponent({
setup() {
const type = ref('login');
const switchType = (val:string) => {
const switchType = (val: string) => {
type.value = val;
};

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

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

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;

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 = {};

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,

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%;

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

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

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

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

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

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

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')];

View File

@ -3,12 +3,12 @@ import * as echarts from 'echarts/core';
/**
* eChart hook
* @param domId
* @param chart
* @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,40 +23,39 @@ export const useChart = (domId: string) => {
selfChart.value = echarts.init(chartContainer);
});
window.addEventListener('resize', updateContainer, false);
onUnmounted(() => {
window.removeEventListener('resize', updateContainer);
});
return selfChart
return selfChart;
};
/**
* counter utils
* @param duration
* @returns
* @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, () => {
countDown.value = duration;
intervalTimer = setInterval(() => {
if (countDown.value > 0) {
countDown.value -= 1;
} else {
clearInterval(intervalTimer);
countDown.value = 0;
intervalTimer = null;
}
}, 1000)
}];
}
return [
countDown,
() => {
countDown.value = duration;
intervalTimer = setInterval(() => {
if (countDown.value > 0) {
countDown.value -= 1;
} else {
clearInterval(intervalTimer);
countDown.value = 0;
}
}, 1000);
},
];
};

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;

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
}

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(),
],