diff --git a/.gitignore b/.gitignore index 1fda54c..729d4c5 100755 --- a/.gitignore +++ b/.gitignore @@ -17,15 +17,7 @@ coverage test-report.html .idea/ yarn.lock +yarn-error.log *.zip .history -script/test/cypress/screenshots -script/test/cypress/videos -script/test/cypress/results -script/test/cypress/support -results/ -yarn-error.log -cypress -cypress.json -Dockerfile -robotMsg.json +.stylelintcache diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000..1b7da3c --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,8 @@ +# .stylelintignore +# 旧的不需打包的样式库 +*.min.css + +# 其他类型文件 +*.js +*.jpg +*.woff diff --git a/src/components/card/index.vue b/src/components/card/index.vue index 7d7a686..e38b04d 100644 --- a/src/components/card/index.vue +++ b/src/components/card/index.vue @@ -1,10 +1,7 @@ diff --git a/src/components/color.vue b/src/components/color.vue new file mode 100644 index 0000000..2237060 --- /dev/null +++ b/src/components/color.vue @@ -0,0 +1,36 @@ + + + diff --git a/src/components/result/index.vue b/src/components/result/index.vue index 9fdbc8e..75eb5ed 100644 --- a/src/components/result/index.vue +++ b/src/components/result/index.vue @@ -27,6 +27,7 @@ diff --git a/src/config/color.ts b/src/config/color.ts new file mode 100644 index 0000000..3ab8870 --- /dev/null +++ b/src/config/color.ts @@ -0,0 +1,106 @@ +type ColorToken = Record; + +const BLUE_GREY_TOKEN: ColorToken = { + '@gray-color-1': '#F1F2F5', + '@gray-color-2': '#EBEDF1', + '@gray-color-3': '#E3E6EB', + '@gray-color-4': '#D6DBE3', + '@gray-color-5': '#BCC4D0', + '@gray-color-6': '#97A3B7', + '@gray-color-7': '#7787A2', + '@gray-color-8': '#5F7292', + '@gray-color-9': '#4B5B76', + '@gray-color-10': '#3C485C', + '@gray-color-11': '#2C3645', + '@gray-color-12': '#232A35', + '@gray-color-13': '#1C222B', + '@gray-color-14': '#13161B', +}; + +const NEUTRAL_GREY_TOKEN: ColorToken = { + '@gray-color-1': '#F3F3F3', + '@gray-color-2': '#EEEEEE', + '@gray-color-3': '#E7E7E7', + '@gray-color-4': '#DCDCDC', + '@gray-color-5': '#C5C5C5', + '@gray-color-6': '#A6A6A6', + '@gray-color-7': '#8B8B8B', + '@gray-color-8': '#777777', + '@gray-color-9': '#5E5E5E', + '@gray-color-10': '#4B4B4B', + '@gray-color-11': '#383838', + '@gray-color-12': '#2C2C2C', + '@gray-color-13': '#242424', + '@gray-color-14': '#181818', +}; +const DEFAULT_TOKEN: ColorToken = { + '@brand-color': '#0052D9', + '@brand-color-1': '#ECF2FE', + '@brand-color-2': '#D4E3FC', + '@brand-color-3': '#BBD3FB', + '@brand-color-4': '#96BBF8', + '@brand-color-5': '#699EF5', + '@brand-color-6': '#4787F0', + '@brand-color-7': '#266FE8', + '@brand-color-8': '#0052D9', + '@brand-color-9': '#0034B5', + '@brand-color-10': '#001F97', +}; + +const PURPLE_TOKEN: ColorToken = { + '@brand-color': '#834ec2', + '@brand-color-1': '#f3e0ff', + '@brand-color-2': '#e6c4ff', + '@brand-color-3': '#d8abff', + '@brand-color-4': '#c68cff', + '@brand-color-5': '#ae78f0', + '@brand-color-6': '#9963d8', + '@brand-color-7': '#834ec2', + '@brand-color-8': '#6d3bac', + '@brand-color-9': '#572796', + '@brand-color-10': '#421381', +}; + +const YELLOW_TOKEN: ColorToken = { + '@brand-color': '#ebb105', + '@brand-color-1': '#fff8b8', + '@brand-color-2': '#ffe478', + '@brand-color-3': '#fbca25', + '@brand-color-4': '#ebb105', + '@brand-color-5': '#d29c00', + '@brand-color-6': '#ba8700', + '@brand-color-7': '#a37200', + '@brand-color-8': '#8c5f00', + '@brand-color-9': '#754c00', + '@brand-color-10': '#5e3a00', +}; + +export function getGreyColor(type: string): ColorToken { + if (type === 'blueGrey') { + return BLUE_GREY_TOKEN; + } + if (type === 'neutralGrey') { + return NEUTRAL_GREY_TOKEN; + } + + return {}; +} + +export function getBrandColor(type: string): ColorToken { + if (type === 'yellow') { + return YELLOW_TOKEN; + } + + if (type === 'purple') { + return PURPLE_TOKEN; + } + + return DEFAULT_TOKEN; +} + +export function getColorList(colorArray: ColorToken[]): string[] { + const pureColorList = []; + colorArray.map(colorToken => Object.keys(colorToken).map(key => pureColorList.push(colorToken[key]))); + + return pureColorList; +} diff --git a/src/config/style.ts b/src/config/style.ts index 6d184d1..fca9821 100644 --- a/src/config/style.ts +++ b/src/config/style.ts @@ -9,4 +9,6 @@ export default { isSidebarFixed: true, isHeaderFixed: true, showHeader: true, + backgroundTheme: 'blueGrey', + brandTheme: 'default', }; diff --git a/src/pages/dashboard/base/index.less b/src/pages/dashboard/base/index.less index 0ad0f33..a036bd9 100644 --- a/src/pages/dashboard/base/index.less +++ b/src/pages/dashboard/base/index.less @@ -1,19 +1,10 @@ @import '@/style/index'; @media (max-width: @screen-md-max) { - .dashboard-panel .t-col-3 { - min-width: 50%; - &:first-child { - margin-bottom: 16px; - } - } - } -.dashboard-panel .t-col { - .card-container { - margin: 0; - } + } + .t-tabs__content { padding-top: @spacer-3; } @@ -23,127 +14,63 @@ border-radius: @border-radius; .card-container { + .card-content { + &-label-title { color: @text-color-primary; padding-bottom: 4px; } } - .t-table th, .t-table td { + + .t-table th, + .t-table td { padding: 10px 8px; } + .t-table tr { color: @text-color-primary; } } } - .dashboard-item-perfix { - margin-right: 0 !important; +.dashboard-item-perfix { + margin-right: 0 !important; +} + + +.dashboard-item { + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 1; + + .dashboard-item-top { + display: flex; + flex-direction: row; + align-items: flex-start; + + + > span { + display: inline-block; + color: black; + font-size: 36px; + line-height: 44px; + } + } +} + +.dashboard-item-bottom { + display: flex; + flex-direction: row; + justify-content: space-between; + + > .t-icon { + cursor: pointer; + color: inherit; } - - .dashboard-item-bottom { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-end; - - .dashboard-item-bottom-left { - display: flex; - flex-direction: row; - align-items:flex-start; - - &-unit { - font-size: 14px; - color: rgba(0,0,0,0.90); - padding-left: 4px; - padding-top: 17px; - } - - &-number { - display: inline-block; - color: black; - font-size: 36px; - line-height: 44px; - } - } - } - - .dashboard-item-bottom-right { - display: flex; - flex-direction: row; - justify-content: space-between; - height: 55px; - - .dashboard-item-bottom-emergency { - width: 96px; - height: 32px; - background: #FFE9E9; - border-radius: 16px; - font-size: 14px; - color: #E34D59; - display: flex; - align-items: center; - justify-content: center; - margin-top: 15px; - } - - .dashboard-item-bottom-right-top { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - - h1 { - font-size: 14px; - color: rgba(0,0,0,0.60); - padding-right: 8px; - } - div { - height: 24px; - // font-weight: bold; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding-top: 14px; - - > span { - color: #00A870; - } - } - } - .dashboard-item-bottom-right-bottom { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - - h1 { - font-size: 14px; - color: rgba(0,0,0,0.60); - padding-right: 8px; - } - div { - height: 24px; - background: #FFE9E9; - border-radius: @border-radius; - color: #E34D59; - // font-weight: bold; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 1px 8px; - - .t-icon-caret-up { - margin-left: 5px !important; - } - } - } - - } +} @@ -212,6 +139,7 @@ padding-top: 16px; li { + .dashboard-chart-tend-item-title { color: grey !important; } @@ -233,6 +161,7 @@ .dashboard-chart-tend-left { display: flex; flex-direction: row; + .dashboard-chart-tend-num { width: 48px; } @@ -257,11 +186,13 @@ &-describe { font-size: 14px !important; - color: rgba(0,0,0,0.60) !important; + color: rgba(0,0,0,.60) !important; text-align: left; line-height: 22px; } + &-container { + .t-date-picker { width: 240px; } @@ -269,7 +200,7 @@ span { font-size: 16px; - color: rgba(0,0,0,0.90); + color: rgba(0,0,0,.90); overflow: hidden; text-overflow: ellipsis; } @@ -298,6 +229,7 @@ } } } + .dashboard-chart-container { margin: 0 auto; } @@ -306,4 +238,76 @@ display: flex; align-items: center; justify-content: center; + line-height: 22px; + color: @text-color-placeholder; } + +.dashboard-item-trend { + margin-left: 4px; +} + +.dashbord-item-left { + position: absolute; + top: 32px; + right: 32px; + + > span { + display: inline-flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + background: #ECF2FE; + border-radius: 50%; + + .t-icon { + font-size: 24px; + color: #0052D9; + } + } +} + +.dashbord-rank { + display: inline-flex; + width: 24px; + height: 24px; + border-radius: 50%; + color: white; + font-size: 14px; + background-color: @gray-color-5; + align-items: center; + justify-content: center; + font-weight: 700; + + + &__top { + background: @brand-color; + } + +} + +.row-container { + margin-bottom: 8px !important; +} + +.overview-pannel { + background-color: white; + border-radius: 3px; +} + +.card-container.main-color { + background: @brand-color; + color: white; + + .card-describe { + color: white; + } + + .dashboard-item-top span { + color: white; + } + + .dashboard-item-block { + color: rgba(255,255,255,.55); + } +} \ No newline at end of file diff --git a/src/pages/dashboard/base/index.ts b/src/pages/dashboard/base/index.ts index d18c2b0..c08ead3 100644 --- a/src/pages/dashboard/base/index.ts +++ b/src/pages/dashboard/base/index.ts @@ -1,5 +1,29 @@ +import { getBrandColor } from '@/config/color'; import dayjs from 'dayjs'; +/** 图表颜色 */ +let chartListColor: Array = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F']; + +/** + * 获取表头数据 + * + * @export + * @param {string[]} dateTime + * @param {number} divideNum + * @returns {string[]} + */ +export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] { + const timeArray: string[] = []; + if (dateTime.length > 0) { + for (let i = 0; i < divideNum; 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; + timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD')); + } + } + + return timeArray; +} export class DashboardBase { /** 更新容器尺寸 */ setContainerSize(containerCopyValue: HTMLElement, absWidth = 0, absHeight = 0): void { @@ -23,7 +47,7 @@ export class DashboardBase { * * @memberOf DashboardBase */ -export function getRandomNum(num = 100): number { +export function getRandomArray(num = 100): number { let resultNum = Number((Math.random() * num).toFixed(0)); if (resultNum <= 1) { @@ -33,13 +57,87 @@ export function getRandomNum(num = 100): number { return resultNum; } +/** 首页 dashbord 折线图 */ +export function constructInitDashbordDataset(type: string) { + const dateArray: Array = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; + const datasetAxis = { + xAxis: { + type: 'category', + show: false, + data: dateArray, + }, + yAxis: { + show: false, + type: 'value', + }, + grid: { + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + }; + + if (type === 'line') { + const lineDataset = { + ...datasetAxis, + color: ['#fff'], + series: [ + { + data: [150, 230, 224, 218, 135, 147, 260], + type, + }, + ], + }; + return lineDataset; + } + if (type === 'bar') { + const barDataset = { + ...datasetAxis, + color: chartListColor, + series: [ + { + data: [ + 100, + 130, + 184, + 218, + { + value: 135, + itemStyle: { + color: '#ECF2FE', + }, + }, + { + value: 118, + itemStyle: { + color: '#ECF2FE', + }, + }, + { + value: 60, + itemStyle: { + color: '#ECF2FE', + }, + }, + ], + type, + }, + ], + }; + return barDataset; + } +} + /** 柱状图数据源 */ export function constructInitDataset(dateTime: Array = []) { - const dataset: Array> = [['时间'], ['入库'], ['出库']]; + // const dataset: Array> = [['时间'], ['入库'], ['出库']]; const divideNum = 10; - + const timeArray = []; + const inArray = []; + const outArray = []; for (let i = 0; i < divideNum; i++) { - const [timeArray, inArray, outArray] = dataset; + // 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; @@ -51,12 +149,215 @@ export function constructInitDataset(dateTime: Array = []) { .format('YYYY-MM-DD')); } - inArray.push(getRandomNum().toString()); - outArray.push(getRandomNum().toString()); + inArray.push(getRandomArray().toString()); + outArray.push(getRandomArray().toString()); } + + // console.log('timeArray..', timeArray); + + const dataset = { + color: chartListColor, + tooltip: { + trigger: 'item', + }, + xAxis: { + type: 'category', + data: timeArray, + }, + yAxis: { + type: 'value', + }, + grid: { + top: '5%', + left: '25px', + right: 0, + bottom: '60px', + }, + legend: { + left: 'center', + bottom: '0', + orient: 'horizontal', + data: ['出库', '入库'], + }, + series: [ + { + name: '出库', + data: outArray, + type: 'bar', + }, + { + name: '入库', + data: inArray, + type: 'bar', + }, + ], + }; + return dataset; } +/** 平滑图数据 */ +export function getSmoothLineDataSet(dateTime: any = []): any { + let dateArray: Array = ['00:00', '02:00', '04:00', '06:00']; + if (dateTime.length > 0) { + const devideNum = 7; + dateArray = getDateArray(dateTime, devideNum); + } + + return { + color: chartListColor, + xAxis: { + type: 'category', + data: dateArray, + boundaryGap: false, + }, + yAxis: { + type: 'value', + }, + tooltip: { + trigger: 'axis', + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' + }, + }, + legend: { + data: ['本月', '上月'], + icon: 'roundRect', + bottom: '15%', + itemGap: 60, + }, + series: [ + { + name: '上月', + data: [ + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + ], + type: 'line', + smooth: true, + color: '#BCC4D0', + }, + { + name: '本月', + data: [ + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + ], + type: 'line', + smooth: true, + areaStyle: { + opacity: 0.1, + }, + color: '#0052D9', + }, + ], + }; +} + +/** 折线图数据 */ +export function getFolderlineDataSet(dateTime: any = []): any { + let dateArray: Array = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; + if (dateTime.length > 0) { + const devideNum = 7; + dateArray = getDateArray(dateTime, devideNum); + } + + return { + color: chartListColor, + grid: { + top: '5%', + right: '1px', + left: '30px', + bottom: '60px', + }, + legend: { + left: 'center', + bottom: '0', + orient: 'horizontal', // legend 横向布局。 + data: ['杯子', '茶叶', '蜂蜜', '面粉'], + }, + xAxis: { + type: 'category', + data: dateArray, + }, + yAxis: { + type: 'value', + }, + tooltip: { + trigger: 'item', + }, + series: [ + { + name: '杯子', + stack: '总量', + data: [ + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + ], + type: 'line', + }, + { + name: '茶叶', + stack: '总量', + data: [ + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + ], + type: 'line', + }, + { + name: '蜂蜜', + stack: '总量', + data: [ + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + ], + type: 'line', + }, + { + name: '面粉', + stack: '总量', + data: [ + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + ], + type: 'line', + }, + ], + }; +} + /** * 线性图表数据源 * @@ -64,60 +365,71 @@ export function constructInitDataset(dateTime: Array = []) { * @param {Array} [dateTime=[]] * @returns {*} */ -export function getLineChartDataSet(dateTime: Array = []): any { - if (dateTime.length > 0) { - const devideNum = 10; - const dateArray: Array = getDateArray(dateTime, devideNum); - return [ - dateArray, - getSelftItemList('杯子', devideNum), - getSelftItemList('茶叶', devideNum), - getSelftItemList('蜂蜜', devideNum), - getSelftItemList('面粉', devideNum), - ]; +export function getLineChartDataSet(checkedValues = ''): any { + let dateValueList = []; + if (checkedValues === 'monthVal') { + dateValueList = ['1', '3', '8', '13', '18', '23', '28']; + } else { + dateValueList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; } - return [ - [ - '日期', - '2020-01-16', - '2020-01-17', - '2020-01-18', - '2020-01-19', - '2020-01-20', - '2020-01-21', - '2020-01-22', - '2020-01-23', - '2020-01-24', - '2020-01-25', + const dataSet = { + color: chartListColor, + tooltip: { + trigger: 'item', + }, + grid: { + left: '0', + right: '0', + top: '5px', + bottom: '36px', + containLabel: true, + }, + legend: { + left: 'center', + bottom: '0', + orient: 'horizontal', // legend 横向布局。 + data: ['付款金额', '收款金额'], + }, + xAxis: { + type: 'category', + data: dateValueList, + }, + yAxis: { + type: 'value', + }, + series: [ + { + name: '付款金额', + data: [ + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + ], + type: 'line', + smooth: true, + }, + { + name: '收款金额', + data: [ + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + getRandomArray(), + ], + type: 'line', + smooth: true, + }, ], - ['杯子', 5, 15, 15, 25, 24, 13, 32, 37, 43, 35], - ['茶叶', 1, 6, 13, 38, 39, 44, 48, 75, 62, 52], - ['蜂蜜', 16, 22, 27, 22, 32, 35, 23, 32, 33, 25], - ['面粉', 12, 12, 25, 29, 21, 30, 37, 47, 40, 47], - ]; -} -/** 图表颜色 */ -export const CHART_LIST_COLOR: Array = ['#0052D9', '#00A870', '#7D46BD', '#0594FA', '#ED7B2F']; - -/** - * 获取表头数据 - * - * @export - * @param {string[]} dateTime - * @param {number} divideNum - * @returns {string[]} - */ -export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] { - const timeArray: string[] = ['日期']; - if (dateTime.length > 0) { - for (let i = 0; i < divideNum; 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; - timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD')); - } - } - - return timeArray; + }; + // console.log('getLineChartDataSet..', dataSet); + return dataSet; } /** @@ -130,7 +442,7 @@ export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] export function getSelftItemList(productName: string, devideNum: number): string[] { const productArray: string[] = [productName]; for (let i = 0; i < devideNum; i++) { - productArray.push(getRandomNum(100 * i).toString()); + productArray.push(getRandomArray(100 * i).toString()); } return productArray; @@ -142,19 +454,58 @@ export function getSelftItemList(productName: string, devideNum: number): string * @export * @returns {any[]} */ -export function getScattlerDataSet(): any[] { - const scatterData = [...Array(40)].map(() => [ - getRandomNum(Math.random() * 100), - getRandomNum(Math.random() * 200), - getRandomNum(Math.random() * 30), - getRandomNum(Math.random() * 400), - ]); - - return [ - ['咖啡机质量', '咖啡机效果', '按摩仪质量', '按摩仪效果'], - [getRandomNum(100), getRandomNum(200), getRandomNum(100), getRandomNum(500)], - ...scatterData, - ]; +export function getScattlerDataSet(): any { + return { + color: chartListColor, + xAxis: {}, + yAxis: {}, + tooltip: { + trigger: 'item', + }, + grid: { + top: '5%', + left: '18px', + right: '5px', + bottom: '60px', + }, + legend: { + left: 'center', + bottom: '0', + orient: 'horizontal', // legend 横向布局。 + data: ['满意度'], + }, + series: [ + { + 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)], + ], + type: 'scatter', + }, + ], + }; } /** @@ -164,33 +515,66 @@ export function getScattlerDataSet(): any[] { * @returns {any[]} */ export function getAreaChartDataSet(text = ''): any { + console.log(text); + + const xAxisData = []; + const data1 = []; + const data2 = []; + for (let i = 0; i < 50; i++) { + xAxisData.push(`${i}`); + data1.push((getRandomArray() * Math.sin(i / 5) * (i / 5 - 5) + i / 6) * 2); + data2.push((getRandomArray() * Math.cos(i / 5) * (i / 5 - 5) + i / 6) * 2); + } + return { - title: { - text, + color: chartListColor, + // title: { + // text: '柱状图动画延迟', + // }, + legend: { + left: 'center', + bottom: '5%', + orient: 'horizontal', + data: ['测试', '上线'], }, - dataset: [ - ['时间', '00:00', '02:00', '04:00', '06:00', '08:00'], - [ - '测试', - getRandomNum(Math.random() * 100), - getRandomNum(Math.random() * 200), - getRandomNum(Math.random() * 300), - getRandomNum(Math.random() * 400), - getRandomNum(Math.random() * 500), - ], - [ - '上线', - getRandomNum(Math.random() * 100), - getRandomNum(Math.random() * 200), - getRandomNum(Math.random() * 300), - getRandomNum(Math.random() * 400), - getRandomNum(Math.random() * 500), - ], + tooltip: { + trigger: 'item', + }, + xAxis: { + data: xAxisData, + splitLine: { + show: false, + }, + }, + yAxis: {}, + series: [ + { + name: '测试', + type: 'bar', + data: data1, + emphasis: { + focus: 'series', + }, + animationDelay(idx) { + return idx * 10; + }, + }, + { + name: '上线', + type: 'bar', + data: data2, + emphasis: { + focus: 'series', + }, + animationDelay(idx) { + return idx * 10 + 100; + }, + }, ], - area: { - smooth: true, + animationEasing: 'elasticOut', + animationDelayUpdate(idx) { + return idx * 5; }, - injectOption: option => ({ ...option, color: CHART_LIST_COLOR }), }; } @@ -204,43 +588,197 @@ export function getAreaChartDataSet(text = ''): any { export function getColumnChartDataSet(isMonth = false): any { if (isMonth) { return { - title: { - text: '', + color: chartListColor, + legend: { + left: 'center', + top: '10%', + orient: 'horizontal', // legend 横向布局。 + data: ['直接访问'], }, - dataset: [ - ['日期', '1', '4', '8', '12', '16', '20', '24'], - [ - '告警', - getRandomNum(Math.random() * 800), - getRandomNum(Math.random() * 700), - getRandomNum(Math.random() * 600), - getRandomNum(Math.random() * 500), - getRandomNum(Math.random() * 400), - getRandomNum(Math.random() * 300), - getRandomNum(Math.random() * 100), - ], + tooltip: { + trigger: 'axis', + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' + }, + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + data: ['1', '4', '8', '12', '16', '20', '24'], + axisTick: { + alignWithLabel: true, + }, + }, + ], + yAxis: [ + { + type: 'value', + }, + ], + series: [ + { + name: '直接访问', + type: 'bar', + barWidth: '60%', + 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), + ], + }, ], - injectOption: option => ({ ...option, color: CHART_LIST_COLOR }), }; } + return { - title: { - text: '', + color: chartListColor, + tooltip: { + trigger: 'axis', + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' + }, }, - dataset: [ - ['时间', '周一', '周二', '周三', '周四', '周五', '周六', '周日'], - [ - '告警', - getRandomNum(Math.random() * 200), - getRandomNum(Math.random() * 300), - getRandomNum(Math.random() * 600), - getRandomNum(Math.random() * 500), - getRandomNum(Math.random() * 100), - getRandomNum(Math.random() * 300), - getRandomNum(Math.random() * 100), - ], + legend: { + left: 'center', + bottom: '0%', + orient: 'horizontal', // legend 横向布局。 + data: ['直接访问'], + }, + grid: { + left: '3%', + right: '4%', + bottom: '13%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], + axisTick: { + alignWithLabel: true, + }, + }, + ], + yAxis: [ + { + type: 'value', + }, + ], + 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), + ], + }, + ], + }; +} + +/** + * 柱状图数据结构 + * + * @export + * @param {boolean} [isMonth=false] + * @returns {*} + */ +export function get2ColBarChartDataSet(): any { + return { + color: chartListColor, + tooltip: { + trigger: 'axis', + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' + }, + }, + grid: { + top: '0', + left: '0', + right: '0', + // bottom: '10%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], + axisTick: { + alignWithLabel: true, + }, + }, + ], + yAxis: [ + { + type: 'value', + }, + ], + legend: { + data: ['去年', '今年'], + bottom: '0', + itemGap: 60, + }, + 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), + ], + itemStyle: { + color: '#BCC4D0', + }, + }, + { + 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), + ], + itemStyle: { + color: (params) => { + if (params.value >= 200) { + return '#E34D59'; + } + return '#0052D9'; + }, + }, + }, ], - injectOption: option => ({ ...option, color: CHART_LIST_COLOR }), }; } @@ -253,16 +791,94 @@ export function getColumnChartDataSet(isMonth = false): any { */ export function getPieChartDataSet(radius = 42): any { return { - title: { - text: '', + color: chartListColor, + tooltip: { + trigger: 'item', }, - dataset: [ - ['状态', '审核中', '待履行', '履行中', '已完成'], - ['数量', 67, 45, radius, 36], + grid: { + top: '0', + right: '0', + }, + legend: { + left: 'center', + bottom: '0', + orient: 'horizontal', // legend 横向布局。 + }, + series: [ + { + name: '销售渠道', + type: 'pie', + radius: ['45%', '60%'], + avoidLabelOverlap: false, + label: { + show: true, + position: 'center', + }, + emphasis: { + label: { + show: true, + fontSize: '12', + fontWeight: 'bold', + }, + }, + labelLine: { + show: false, + }, + data: [ + { value: 1048, name: '线上' }, + { value: radius * 7, name: '门店' }, + ], + }, ], - injectOption: option => ({ ...option, color: CHART_LIST_COLOR }), - pie: { - radius: ['45%', '60%'], // 设置内圆和外圆半径 - }, }; } + +/** + * 依据主题类型获取颜色 + * + * @export + * @param {string} theme + * @returns {any[]} + */ +export function getColorFromTheme(theme: string): any[] { + const themeColor: any = getBrandColor(theme); + const themeColorList: Array = []; + + // 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} chartsList + * @param {string} theme + */ +export function changeChartsTheme(chartsList: Array, theme: string): void { + if (chartsList && chartsList.length) { + const chartChangeColor: Array = getColorFromTheme(theme) || chartListColor; + chartListColor = chartChangeColor; + + for (let index = 0; index < chartsList.length; index++) { + const elementChart: any = chartsList[index]; + + if (elementChart) { + const optionVal: any = elementChart.getOption(); + + // 更改主题颜色 + optionVal.color = chartChangeColor; + + elementChart.setOption(optionVal); + } + } + } +} diff --git a/src/pages/dashboard/detail/index.less b/src/pages/dashboard/detail/index.less index a188fd5..c214df6 100644 --- a/src/pages/dashboard/detail/index.less +++ b/src/pages/dashboard/detail/index.less @@ -1,138 +1,68 @@ @import '@/style/index'; + .t-tabs__content { padding-top: @spacer-3; } -.dashboard-panel-detail { - padding: 0; - border-radius: @border-radius; - } - -// 标题内容 -.dashboard-chart-title { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - font-weight: bold; - - span { - font-size: 16px; - color: rgba(0,0,0,0.90); - overflow: hidden; - text-overflow: ellipsis; - } - - .dashboard-chart-title-date { - display: flex; - flex-direction: row; - border: 1px solid #DDDDDD; - border-radius: @border-radius; - padding: 5px 8px; - align-items: center; - justify-content: center; - font-weight: normal; - - .dashboard-chart-title-to { - color: rgba(0,0,0,0.30); - padding: 0 10px; - } - - .t-icon-creditcard { - margin-left: 20px !important; - } - } - - .dashboard-chart-title-search { - display: flex; - flex-direction: row; - border: 1px solid #DDDDDD; - border-radius: @border-radius; - padding: 0; - align-items: center; - justify-content: center; - font-weight: normal; - - input { - border: solid 0px #ffffff !important; - } - } - - label { - font-weight: normal !important; - padding: 5px 15px !important; - - .t-radio-button__label { - font-size: 10px !important; - } - } +.list-card-item + .list-card-item { + margin-top: 16px; } +.dashboard-panel-detail { + margin-top: -16px; +} -.dashboard-detail-top-container { - padding: 20px 24px; - background-color: white; +.card-date-picker { + width: 240px; +} + +.card-date-button { + margin-left: 8px; +} + +.dashboard-detail-container-item { + height: 168px; + border: solid 1px #ebebeb; + padding: 24px 32px; + box-sizing: border-box; border-radius: @border-radius; - .dashboard-detail-box { - .dashboard-detail-container-item:not(:last-child) { - border-right: solid 1px #EBEBEB; - margin-right: 22.5px; - } - @media screen and (min-width: @screen-md-max) { - .dashboard-detail-container-item-perfix { - border-right: solid 1px #EBEBEB; - margin-right: 22.5px; - } - display: flex; - } - @media screen and (max-width: @screen-md-max - 1px) and (min-width: 0) { - display: normal; + &:hover { + background: @gray-color-1; + cursor: pointer; + } + + h1 { + font-size: 36px; + color: rgba(0,0,0,.90); + font-weight: 500; + padding-top: 8px; + padding-bottom: 24px; + + span { + font-size: 14px; + color: rgba(0,0,0,.30); + padding-left: 8px; } } - .dashboard-detail-container { + + .dashboard-detail-container-item-text { display: flex; - flex: 1; flex-direction: row; - padding-top: 20px; - - .dashboard-detail-container-item { - min-width: 108px; - width: 100%; - height: 106px; - - span { - font-size: 14px; - color: rgba(0,0,0,0.60); - } - - h1 { - font-size: 36px; - color: rgba(0,0,0,0.90); - font-weight: 500; - padding-top: 8px; - - span { - font-size: 14px; - color: rgba(0,0,0,0.30); - padding-left: 8px; - } - } - - .dashboard-detail-container-item-text { - // color: #E34D59; - display: flex; - flex-direction: row; - align-items: center; - justify-items: center; - font-size: 12px; - color: rgba(0,0,0,0.40); - text-align: left; - line-height: 20px; - } + align-items: center; + justify-content: space-between; + font-size: 14px; + color: rgba(0,0,0,.40); + text-align: left; + line-height: 22px; + + > span { + display: flex; } } } + + .dashboard-detail-bottom-container { padding: 20px 24px; @@ -141,7 +71,8 @@ margin-top: 16px; min-height: 400px; - .dashboard-chart-title-container { - width: 240px; - } } + +.trend-container { + margin-left: 4px; +} \ No newline at end of file diff --git a/src/pages/login/index.less b/src/pages/login/index.less index 162e602..3b1ebd0 100644 --- a/src/pages/login/index.less +++ b/src/pages/login/index.less @@ -1,247 +1,301 @@ @import '@/style/index'; + .login-wrapper { - width: 100%; - height: 100%; - background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg); - background-size: cover; - background-position: 50%; - position: relative; + width: 100%; + height: 100%; + background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg); + background-size: cover; + background-position: 50%; + position: relative; } + .login-container { - position: absolute; - top: 28%; - left: 12%; - min-height: 500px; - line-height: 22px; + position: absolute; + top: 28%; + left: 12%; + min-height: 500px; + line-height: 22px; } + .title-container { - .icon { - width: 290px; - height: 60px; - } - .side-title { - margin-top: 24.9px; - .tip1, .tip2 { - display: inline-block; - margin-right: 8px; - } - .tip1 { - font-size: 14px; - color: rgba(0,0,0,0.60); - } - .tip2 { - font-size: 14px; - color: @brand-color-8; - cursor: pointer; - } - } + + .icon { + width: 290px; + height: 60px; + } + + .side-title { + margin-top: 24.9px; + + .tip1, + .tip2 { + display: inline-block; + margin-right: 8px; + } + + .tip1 { + font-size: 14px; + color: rgba(0,0,0,.60); + } + + .tip2 { + font-size: 14px; + color: @brand-color-8; + cursor: pointer; + } + } } .login-step1 { - .input-container { - margin-top: 72px; - .t-input { - display: block; - } - .t-popup-reference { - margin: 24px 0; - } - } - .check-container { - .t-checkbox__label { - color: @text-color-secondary; - span { - color: @brand-color-8; - } - } - } + .input-container { + margin-top: 72px; + + .t-input { + display: block; + } + + .t-popup-reference { + margin: 24px 0; + } + } + + .check-container { + + .t-checkbox__label { + color: @text-color-secondary; + + span { + color: @brand-color-8; + } + } + } } + .login-step3 { - .input-container { - margin-top: 34px; - } + + .input-container { + margin-top: 34px; + } } + .input-container { - .tip-container { - margin-bottom: 16px; - .tip1 { - font-size: 14px; - color: rgba(0,0,0,0.60); - } - .tip2 { - float: right; - font-size: 14px; - color: @brand-color-8; - .t-icon { - height: 20px; - vertical-align: text-bottom; - } - } - } - .button-container { - margin-top: 16px; - } - .check-container { - font-size: 14px; - color: rgba(0,0,0,0.60); + .tip-container { + margin-bottom: 16px; - .tip { - float: right; - font-size: 14px; - color: @brand-color-8; - } - } + .tip1 { + font-size: 14px; + color: rgba(0,0,0,.60); + } + + .tip2 { + float: right; + font-size: 14px; + color: @brand-color-8; + + .t-icon { + height: 20px; + vertical-align: text-bottom; + } + } + } + + .button-container { + margin-top: 16px; + } + + .check-container { + font-size: 14px; + color: rgba(0,0,0,.60); + + .tip { + float: right; + font-size: 14px; + color: @brand-color-8; + } + } } .login-step1 { - .bottom-container { - margin-top: 72px; - } + + .bottom-container { + margin-top: 72px; + } } + .login-step3 { - .bottom-container { - margin-top: 32px; - } - .input-container .tip-container { - width: 192px; - } + + .bottom-container { + margin-top: 32px; + } + + .input-container .tip-container { + width: 192px; + } } + .login-step2 { - .input-container { - margin-top: 108.9px; - .tip1 { - cursor: pointer; - } - } + + .input-container { + margin-top: 108.9px; + + .tip1 { + cursor: pointer; + } + } } + .bottom-container { - margin-top: 66px; - .tip { - font-size: 14px; - color: @brand-color-8; - cursor: pointer; - } - i { - font-style: normal; - color: @gray-color-3; - margin: 0 14px; - } + margin-top: 66px; + + .tip { + font-size: 14px; + color: @brand-color-8; + cursor: pointer; + } + + i { + font-style: normal; + color: @gray-color-3; + margin: 0 14px; + } } + .rex-check { - font-family: PingFangSC-Regular; - font-size: 14px; - color: @text-color-placeholder; - line-height: 22px; + font-family: PingFangSC-Regular; + font-size: 14px; + color: @text-color-placeholder; + line-height: 22px; } + .format-correct { - color: @text-color-primary; + color: @text-color-primary; - .t-icon { - color: @success-color-5; - } + .t-icon { + color: @success-color-5; + } } .login-step4 { - .input-container { - margin-top: 64px; - .t-input { - display: block; - } - .t-popup-reference { - margin: 24px 0; - } - .verification-code { - margin-bottom: 24px; + .input-container { + margin-top: 64px; - .t-input { - display: inline-block; - } - button { - width: 102px; - height: 40px; - margin-left: 11px; - } - } - } - .bottom-container { - margin-top: 66px; - } - .check-container { - .t-checkbox__label { - color: @text-color-secondary; + .t-input { + display: block; + } - span { - color: @brand-color-8; - } - } - } + .t-popup-reference { + margin: 24px 0; + } + + .verification-code { + margin-bottom: 24px; + + .t-input { + display: inline-block; + } + + button { + width: 102px; + height: 40px; + margin-left: 11px; + } + } + } + + .bottom-container { + margin-top: 66px; + } + + .check-container { + + .t-checkbox__label { + color: @text-color-secondary; + + span { + color: @brand-color-8; + } + } + } } .login-step5 { - .input-container { - margin-top: 64px; - .t-input { - display: block; - } - .t-popup-reference { - margin: 24px 0; - } - .t-select-popup-reference { - margin: 0; - } - } - .bottom-container { - margin-top: 66px; - } - .check-container { - .t-checkbox__label { - color: @text-color-secondary; + .input-container { + margin-top: 64px; - span { - color: @brand-color-8; - } - } - } + .t-input { + display: block; + } + + .t-popup-reference { + margin: 24px 0; + } + + .t-select-popup-reference { + margin: 0; + } + } + + .bottom-container { + margin-top: 66px; + } + + .check-container { + + .t-checkbox__label { + color: @text-color-secondary; + + span { + color: @brand-color-8; + } + } + } } .login-step6 { - .input-container { - margin-top: 64px; - .t-input { - display: block; - } - .t-popup-reference { - margin: 24px 0; - } - .verification-code { - margin: 24px 0; + .input-container { + margin-top: 64px; - .t-input { - display: inline-block; - } - button { - width: 102px; - height: 40px; - margin-left: 11px; - } - } - } - .bottom-container { - margin-top: 66px; - } - .check-container { - .t-checkbox__label { - color: @text-color-secondary; + .t-input { + display: block; + } - span { - color: @brand-color-8; - } - } - } + .t-popup-reference { + margin: 24px 0; + } + + .verification-code { + margin: 24px 0; + + .t-input { + display: inline-block; + } + + button { + width: 102px; + height: 40px; + margin-left: 11px; + } + } + } + + .bottom-container { + margin-top: 66px; + } + + .check-container { + + .t-checkbox__label { + color: @text-color-secondary; + + span { + color: @brand-color-8; + } + } + } } \ No newline at end of file diff --git a/src/style/font-family.less b/src/style/font-family.less index c677a52..4ed16ce 100644 --- a/src/style/font-family.less +++ b/src/style/font-family.less @@ -1,6 +1,6 @@ @font-face { - font-family: "TencentSansW7"; - src: url("data:application/font-woff;charset=utf-8;base64,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") format("woff"); - font-weight: normal; - font-style: normal; - } \ No newline at end of file + font-family: 'TencentSansW7'; + src: url('data:application/font-woff;charset=utf-8;base64,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') format('woff'); + font-weight: normal; + font-style: normal; +} \ No newline at end of file diff --git a/src/style/index.less b/src/style/index.less index 6554dc3..5a6c41b 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -1,167 +1,172 @@ -@import "./common.less"; -@import "./variables.less"; -@import "./rewrite.less"; -@import "./font-family.less"; -@import "./sidenav.less"; +@import './common.less'; + +@import './variables.less'; + +@import './rewrite.less'; + +@import './font-family.less'; + +@import './sidenav.less'; body { - color: @text-level-2-color; - font-family: -apple-system, BlinkMacSystemFont, @font-family; - font-size: @font-size-base; - line-height: 1.5; - -webkit-font-smoothing: antialiased; - padding: 0; - min-width: @screen-sm-min; - } - pre { - font-family: @font-family; - } + color: @text-level-2-color; + font-family: -apple-system, BlinkMacSystemFont, @font-family; + font-size: @font-size-base; + line-height: 1.5; + -webkit-font-smoothing: antialiased; + padding: 0; + min-width: @screen-sm-min; +} + +pre { + font-family: @font-family; +} - ul, - dl, - li, - dd, - dt { - margin: 0; - padding: 0; - list-style: none; - } +ul, +dl, +li, +dd, +dt { + margin: 0; + padding: 0; + list-style: none; +} - figure, - h1, - h2, - h3, - h4, - h5, - h6, - p { - margin-top: 0; - margin-bottom: 0; - margin: 0; - } +figure, +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin-top: 0; + margin-bottom: 0; + margin: 0; +} - * { - box-sizing: border-box; - } +* { + box-sizing: border-box; +} - .@{prefix}-text-ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } +.@{prefix}-text-ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} - .@{prefix}-text-tip { - font-size: 12px; - color: @text-level-3-color; - } +.@{prefix}-text-tip { + font-size: 12px; + color: @text-level-3-color; +} - .@{prefix}-pic { - background-position: center; - background-repeat: no-repeat; - background-size: 100%; - } +.@{prefix}-pic { + background-position: center; + background-repeat: no-repeat; + background-size: 100%; +} - .@{prefix}-main-link { +.@{prefix}-main-link { + color: @text-level-1-color; + text-decoration: none; + cursor: pointer; + + &:hover { color: @text-level-1-color; - text-decoration: none; - cursor: pointer; - - &:hover { - color: @text-level-1-color; - } - - &:active { - color: @text-level-1-color; - } - - &--active { - color: #000; - } - - &:focus { - text-decoration: none; - } } - .@{prefix}-link { - color: @primary-color; - + &:active { + color: @text-level-1-color; + } + + &--active { + color: #000; + } + + &:focus { text-decoration: none; - margin-right: @spacer-3; + } +} + +.@{prefix}-link { + color: @primary-color; - cursor: pointer; + text-decoration: none; + margin-right: @spacer-3; + + cursor: pointer; - &:hover { - color: @primary-color; - } - - &:active { - color: @primary-color; - } - - &--active { - color: @primary-color; - } - - &:focus { - text-decoration: none; - } + &:hover { + color: @primary-color; } - // 布局元素调整 - .@{prefix}-wrapper { - height: 100vh; - display: flex; - flex-direction: column; + &:active { + color: @primary-color; } - .@{prefix}-sidenav-layout { + + &--active { + color: @primary-color; + } + + &:focus { + text-decoration: none; + } +} + +// 布局元素调整 +.@{prefix}-wrapper { + height: 100vh; + display: flex; + flex-direction: column; +} +.@{prefix}-sidenav-layout { - &-relative { - height: 100%; - } - } - .@{prefix}-content-layout { - margin: @spacer-3; + &-relative { + height: 100%; } +} +.@{prefix}-content-layout { + margin: @spacer-3; +} - .@{prefix}-footer-layout { - padding: 0; - margin-bottom: @spacer-2; - } +.@{prefix}-footer-layout { + padding: 0; + margin-bottom: @spacer-2; +} - .@{prefix}-footer { - color: rgba(0, 0, 0, 0.3); - line-height: 20px; - text-align: center; - } +.@{prefix}-footer { + color: rgba(0, 0, 0, .3); + line-height: 20px; + text-align: center; +} - .@{prefix}-icon-container { - width: 16px; - height: 16px; - margin-left: 4px; - display: inline-flex; - align-items: center; - justify-content: center; - } +.@{prefix}-icon-container { + width: 16px; + height: 16px; + margin-left: 4px; + display: inline-flex; + align-items: center; + justify-content: center; +} - .@{prefix}-flat-icon { - width: 10px; - height: 3px; - background: rgba(0,0,0,0.60); - } +.@{prefix}-flat-icon { + width: 10px; + height: 3px; + background: rgba(0,0,0,.60); +} - .@{prefix}-up-triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 0 6px 8px 6px; - border-color: transparent transparent #00A870 transparent; - } +.@{prefix}-up-triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 0 6px 8px 6px; + border-color: transparent transparent #00A870 transparent; +} - .@{prefix}-down-triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 8px 6px 0 6px; - border-color: #E34D59 transparent transparent transparent; - } \ No newline at end of file +.@{prefix}-down-triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 8px 6px 0 6px; + border-color: #E34D59 transparent transparent transparent; +} \ No newline at end of file diff --git a/src/style/sidenav.less b/src/style/sidenav.less index d5686b3..d8b419f 100644 --- a/src/style/sidenav.less +++ b/src/style/sidenav.less @@ -1,96 +1,92 @@ @import './variables.less'; + @import './font-family.less'; .@{prefix} { - &-sidebar-layout { - height: 100%; + + &-sidebar-layout { + height: 100%; + } + + &-sidebar-compact { + width: 64px; + } + + &-sidebar-layout-side { + z-index: 100; + } + + &-sidenav { + position: fixed; + top: 0; + bottom: 0; + z-index: 10; + transition: all .3s; + min-height: 100%; + + &-mix { + top: 64px; + + &-fixed { + top: 64px; + z-index: 0; + } } - - &-sidebar-compact { - width: 64px; - .@{prefix}-sidenav-logo-wrapper { - padding-left: 16px; - } - } - &-sidebar-layout-side { - z-index: 100; - } - - &-sidenav{ - position: fixed; - top: 0; - bottom: 0; - z-index: 10; - transition: all .3s; - min-height: 100%; - - &-mix { - top: 64px; - - &-fixed { - top: 64px; - z-index: 0; - } - } - &-no-fixed { - position: relative; - z-index: 1; - } - - &-no-logo { - z-index: 1; - } - - &-logo-wrapper { - display: flex; - align-items: center; - width: 100%; - } - &-logo-t-logo { - width: 32px; - } - &-logo-tdesign-logo { - width: 112px; - } - &-logo-normal { - font-family: TencentSansKoreanW7; - color: @primary-color; - font-size: @font-size-l; - transition: all .3s; - } + &-no-fixed { + position: relative; + z-index: 1; } - - &-sidenav-placeholder { - flex: 1 1 232px; - min-width: 232px; - transition: all .3s; - - &-hidden { - flex: 1 1 72px; - min-width: 72px; - transition: all .3s; - } + &-no-logo { + z-index: 1; } + &-logo-wrapper { + display: flex; + align-items: center; + width: 100%; + } + + &-logo-t-logo { + width: 32px; + margin-left: 16px; + } + + &-logo-tdesign-logo { + width: 112px; + } + + &-logo-normal { + font-family: TencentSansKoreanW7; + color: @brand-color; + font-size: @font-size-l; + transition: all .3s; + } + } + + + &-sidenav-placeholder { + flex: 1 1 232px; + min-width: 232px; + transition: all .3s; + + &-hidden { + flex: 1 1 72px; + min-width: 72px; + transition: all .3s; + } + } + } + .t-menu--dark .t-menu__options:not(:empty) .t-icon-menu-unfold { - color: rgba(255, 255, 255, 0.55) + color: rgba(255, 255, 255, .55) } .logo-container { - cursor: pointer; - display: inline-flex; - height: 64px; - margin-left: 24px; - } - - .optional-icon { - color: #000000; - cursor: pointer; - - &:hover { - color: @primary-color; - } - } \ No newline at end of file + cursor: pointer; + display: inline-flex; + height: 64px; + margin-left: 24px; +} diff --git a/stylelint.config.js b/stylelint.config.js new file mode 100644 index 0000000..1ac648e --- /dev/null +++ b/stylelint.config.js @@ -0,0 +1,10 @@ +module.exports = { + defaultSeverity: 'error', + extends: ['stylelint-config-airbnb'], + plugins: ['stylelint-scss'], + rules: { + 'max-nesting-depth': 10, + 'string-quotes': 'single', + 'declaration-property-value-disallowed-list': { '/^border/': ['none'] }, + }, +}; diff --git a/vite.config.ts b/vite.config.ts index 00c4775..32f2daf 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,12 +1,18 @@ import { defineConfig } from 'vite'; -// import { viteMockServe } from 'vite-plugin-mock'; +import { viteMockServe } from 'vite-plugin-mock'; +import { viteThemePlugin } from 'vite-plugin-theme'; +import createVuePlugin from '@vitejs/plugin-vue'; +import createSvgPlugin from 'vite-plugin-vue-svg'; import vueJsx from '@vitejs/plugin-vue-jsx'; -import vue from '@vitejs/plugin-vue'; +import HttpProxyAgent from 'http-proxy-agent'; +import path from 'path'; -// import proxy from './src/config/proxy'; -// const HttpProxyAgent = require('http-proxy-agent'); -const path = require('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({ @@ -16,10 +22,31 @@ export default defineConfig({ '@': path.resolve(__dirname, './src'), }, }, + + css: { + preprocessorOptions: { + less: { + modifyVars: { + ...getBrandColor(brandTheme), + ...getGreyColor(backgroundTheme), + }, + }, + }, + }, + plugins: [ - vue(), + createVuePlugin(), vueJsx(), + viteMockServe({ + mockPath: 'mock', + localEnabled: true, + }), + viteThemePlugin({ + colorVariables: getColorList([getGreyColor(backgroundTheme), getBrandColor(brandTheme)]), + }), + createSvgPlugin(), ], + server: { port: 3002, },