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

feat: upgrade the third phase of the component

Browse Source
This commit is contained in:
pengYYYYY 2021-10-18 17:04:47 +08:00
parent 9811a061b6
commit 7282a8a48d
18 changed files with 1831 additions and 843 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.gitignore vendored
View File

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

8
.stylelintignore Normal file
View File

@ -0,0 +1,8 @@
# .stylelintignore
# 旧的不需打包的样式库
*.min.css
# 其他类型文件
*.js
*.jpg
*.woff

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

@ -1,10 +1,7 @@
<template>
<div :class="containerCls">
<div
v-show="title || describe"
class="card-title"
>
<span>
<div :class="titleCls">
<span :class="titleTextCls">
{{ title }}
<span
v-if="describe"
@ -18,42 +15,87 @@
<div class="card-content">
<slot />
</div>
<div
v-if="size !== 'small'"
class="card-spacer-bottom"
/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, PropType, computed } from 'vue';
export default defineComponent({
name: 'Card',
props: {
title: String,
title: String as PropType<string>,
compact: {
type: Boolean,
type: Boolean as PropType<boolean>,
default: false,
},
describe: String,
describe: String as PropType<string>,
size: {
type: String as PropType<string>,
default: 'default',
},
computed: {
containerCls() {
return ['card-container', { 'card-container-compact': this.compact }];
},
setup(props) {
const containerCls = computed(() => {
const { compact } = props;
return ['card-container', { 'card-container-compact': compact }];
});
const titleCls = computed(() => {
const { size } = props;
return [
'card-title',
{
'card-title-small': size === 'small',
'card-title-default': size !== 'small',
},
];
});
const titleTextCls = computed(() => {
const { size } = props;
return [
{
'card-title-text-small': size === 'small',
'card-title-text-default': size !== 'small',
},
];
});
return {
containerCls,
titleCls,
titleTextCls,
};
},
});
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.t-col > .card-container {
margin: 0;
}
.card {
&-option {
position: absolute;
top: 20px;
right: 24px;
display: flex;
align-items: center;
justify-content: center;
}
&-container {
padding: 24px;
padding: 24px 32px;
margin: 16px 0;
background: #fff;
border-radius: @border-radius;
width: 100%;
display: flex;
flex-direction: column;
&-compact {
padding: 16px 16px 0;
@ -65,17 +107,32 @@ export default defineComponent({
&-title {
display: flex;
justify-content: space-between;
font-size: 16px;
line-height: 24px;
font-family: PingFangSC-Medium;
margin-bottom: 16px;
font-size: 20px;
line-height: 22px;
font-family: PingFangSC-Regular;
font-weight: 500;
color: @text-level-1-color;
color: @text-color-primary;
&-small {
margin-bottom: 8px;
}
&-default {
margin-bottom: 16px;
}
&-text {
display: inline-flex;
&-default {
margin: @spacer 0;
}
}
}
&-describe {
font-size: 14px;
color: rgba(0, 0, 0, 0.6);
color: rgba(0, 0, 0, .6);
line-height: 22px;
}
@ -83,6 +140,11 @@ export default defineComponent({
display: flex;
justify-content: space-between;
flex-direction: column;
flex: 1;
}
&-spacer-bottom {
height: @spacer;
}
}
</style>

36
src/components/color.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<div
:style="style"
class="color-container"
/>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import { getBrandColor } from '@/config/color';
export default defineComponent({
name: 'Color',
props: {
value: {
type: String,
default: 'default',
},
},
setup(props) {
const style = computed(() => {
const { value } = props;
return {
backgroundColor: getBrandColor(value)['@brand-color'],
};
});
return { style };
},
});
</script>
<style lang="less" scoped>
.color-container {
width: 24px;
height: 24px;
display: inline-block;
}
</style>

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

@ -27,6 +27,7 @@
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import Card from '@/components/card/index.vue';
export default defineComponent({
name: 'Result',
components: { Card },
@ -44,7 +45,9 @@ export default defineComponent({
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.result {
&-link {
color: @primary-color;
text-decoration: none;

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

@ -5,7 +5,7 @@
>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, computed } from 'vue';
export default defineComponent({
name: 'Thumbnail',
@ -19,22 +19,26 @@ export default defineComponent({
default: 'layout',
},
},
computed: {
className() {
setup(props) {
const className = computed(() => {
const { type } = props;
return [
'thumbnail-container',
{
'thumbnail-circle': this.type === 'circle',
'thumbnail-layout': this.type === 'layout',
'thumbnail-circle': type === 'circle',
'thumbnail-layout': type === 'layout',
},
];
},
});
return { className };
},
});
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.thumbnail {
&-container {
display: inline-block;
}

132
src/components/trend/index.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<span :class="containerCls">
<span :class="iconCls">
<svg
v-if="type === 'up'"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<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"
>
<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>
</span>
<span>{{ describe }}</span>
</span>
</template>
<script lang="ts">
import { defineComponent, computed, PropType } from 'vue';
export default defineComponent({
name: 'Trend',
props: {
type: String as PropType<string>,
describe: [String, Number] as PropType<string | number>,
isReverseColor: Boolean as PropType<boolean>,
},
setup(props) {
const containerCls = computed(() => {
const { isReverseColor, type } = props;
return [
'trend-container',
{
'trend-container__reverse': isReverseColor,
'trend-container__up': !isReverseColor && type === 'up',
'trend-container__down': !isReverseColor && type === 'down',
},
];
});
const iconCls = computed(() => ['trend-icon-container']);
return {
containerCls,
iconCls,
};
},
});
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.trend {
&-container {
&__up {
color: #e34d59 !important;
display: inline-flex;
align-items: center;
justify-content: center;
.trend-icon-container {
background: #f9d7d9;
margin-right: 4px;
}
}
&__down {
color: #00a870 !important;
display: inline-flex;
align-items: center;
justify-content: center;
.trend-icon-container {
background: #bcebdc;
margin-right: 4px;
}
}
&__reverse {
color: #ffffff !important;
display: inline-flex;
align-items: center;
justify-content: center;
.trend-icon-container {
background: @brand-color-5;
margin-right: 4px;
}
}
.trend-icon-container {
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
}
}
}
</style>

106
src/config/color.ts Normal file
View File

@ -0,0 +1,106 @@
type ColorToken = Record<string, string>;
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;
}

2
src/config/style.ts
View File

@ -9,4 +9,6 @@ export default {
isSidebarFixed: true,
isHeaderFixed: true,
showHeader: true,
backgroundTheme: 'blueGrey',
brandTheme: 'default',
};

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

@ -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 {
.dashboard-item-perfix {
margin-right: 0 !important;
}
}
.dashboard-item-bottom {
.dashboard-item {
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
flex: 1;
.dashboard-item-bottom-left {
.dashboard-item-top {
display: flex;
flex-direction: row;
align-items:flex-start;
align-items: flex-start;
&-unit {
font-size: 14px;
color: rgba(0,0,0,0.90);
padding-left: 4px;
padding-top: 17px;
}
&-number {
> span {
display: inline-block;
color: black;
font-size: 36px;
line-height: 44px;
}
}
}
}
.dashboard-item-bottom-right {
.dashboard-item-bottom {
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;
> .t-icon {
cursor: pointer;
color: inherit;
}
.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);
}
}

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

@ -1,5 +1,29 @@
import { getBrandColor } from '@/config/color';
import dayjs from 'dayjs';
/** 图表颜色 */
let chartListColor: Array<string> = ['#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<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
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<string> = []) {
const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
// const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
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<string> = []) {
.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<string> = ['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<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
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<string> = []) {
* @param {Array<string>} [dateTime=[]]
* @returns {*}
*/
export function getLineChartDataSet(dateTime: Array<string> = []): any {
if (dateTime.length > 0) {
const devideNum = 10;
const dateArray: Array<string> = 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(),
],
['杯子', 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<string> = ['#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;
type: 'line',
smooth: true,
},
{
name: '收款金额',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
smooth: true,
},
],
};
// 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),
],
],
area: {
smooth: true,
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;
},
},
],
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: ['直接访问'],
},
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,
},
},
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),
],
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'
},
},
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,
},
},
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),
],
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<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 {string} theme
*/
export function changeChartsTheme(chartsList: Array<any>, theme: string): void {
if (chartsList && chartsList.length) {
const chartChangeColor: Array<any> = 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);
}
}
}
}

145
src/pages/dashboard/detail/index.less
View File

@ -1,139 +1,69 @@
@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;
}
}
.dashboard-detail-container {
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);
&:hover {
background: @gray-color-1;
cursor: pointer;
}
h1 {
font-size: 36px;
color: rgba(0,0,0,0.90);
color: rgba(0,0,0,.90);
font-weight: 500;
padding-top: 8px;
padding-bottom: 24px;
span {
font-size: 14px;
color: rgba(0,0,0,0.30);
color: rgba(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);
justify-content: space-between;
font-size: 14px;
color: rgba(0,0,0,.40);
text-align: left;
line-height: 20px;
}
line-height: 22px;
> span {
display: flex;
}
}
}
.dashboard-detail-bottom-container {
padding: 20px 24px;
background-color: white;
@ -141,7 +71,8 @@
margin-top: 16px;
min-height: 400px;
.dashboard-chart-title-container {
width: 240px;
}
}
.trend-container {
margin-left: 4px;
}

62
src/pages/login/index.less
View File

@ -1,4 +1,5 @@
@import '@/style/index';
.login-wrapper {
width: 100%;
height: 100%;
@ -7,6 +8,7 @@
background-position: 50%;
position: relative;
}
.login-container {
position: absolute;
top: 28%;
@ -14,21 +16,28 @@
min-height: 500px;
line-height: 22px;
}
.title-container {
.icon {
width: 290px;
height: 60px;
}
.side-title {
margin-top: 24.9px;
.tip1, .tip2 {
.tip1,
.tip2 {
display: inline-block;
margin-right: 8px;
}
.tip1 {
font-size: 14px;
color: rgba(0,0,0,0.60);
color: rgba(0,0,0,.60);
}
.tip2 {
font-size: 14px;
color: @brand-color-8;
@ -38,37 +47,48 @@
}
.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;
}
}
}
}
.login-step3 {
.input-container {
margin-top: 34px;
}
}
.input-container {
.tip-container {
margin-bottom: 16px;
.tip1 {
font-size: 14px;
color: rgba(0,0,0,0.60);
color: rgba(0,0,0,.60);
}
.tip2 {
float: right;
font-size: 14px;
@ -80,12 +100,14 @@
}
}
}
.button-container {
margin-top: 16px;
}
.check-container {
font-size: 14px;
color: rgba(0,0,0,0.60);
color: rgba(0,0,0,.60);
.tip {
float: right;
@ -96,33 +118,43 @@
}
.login-step1 {
.bottom-container {
margin-top: 72px;
}
}
.login-step3 {
.bottom-container {
margin-top: 32px;
}
.input-container .tip-container {
width: 192px;
}
}
.login-step2 {
.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;
@ -130,12 +162,14 @@
}
}
.rex-check {
font-family: PingFangSC-Regular;
font-size: 14px;
color: @text-color-placeholder;
line-height: 22px;
}
.format-correct {
color: @text-color-primary;
@ -145,21 +179,25 @@
}
.login-step4 {
.input-container {
margin-top: 64px;
.t-input {
display: block;
}
.t-popup-reference {
margin: 24px 0;
}
.verification-code {
margin-bottom: 24px;
.t-input {
display: inline-block;
}
button {
width: 102px;
height: 40px;
@ -167,10 +205,13 @@
}
}
}
.bottom-container {
margin-top: 66px;
}
.check-container {
.t-checkbox__label {
color: @text-color-secondary;
@ -182,23 +223,29 @@
}
.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;
@ -210,21 +257,25 @@
}
.login-step6 {
.input-container {
margin-top: 64px;
.t-input {
display: block;
}
.t-popup-reference {
margin: 24px 0;
}
.verification-code {
margin: 24px 0;
.t-input {
display: inline-block;
}
button {
width: 102px;
height: 40px;
@ -232,10 +283,13 @@
}
}
}
.bottom-container {
margin-top: 66px;
}
.check-container {
.t-checkbox__label {
color: @text-color-secondary;

6
src/style/font-family.less
View File

@ -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-family: 'TencentSansW7';
src: url('data:application/font-woff;charset=utf-8;base64,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') format('woff');
font-weight: normal;
font-style: normal;
}
}

119
src/style/index.less
View File

@ -1,8 +1,12 @@
@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;
@ -12,56 +16,57 @@ body {
-webkit-font-smoothing: antialiased;
padding: 0;
min-width: @screen-sm-min;
}
pre {
font-family: @font-family;
}
}
ul,
dl,
li,
dd,
dt {
pre {
font-family: @font-family;
}
ul,
dl,
li,
dd,
dt {
margin: 0;
padding: 0;
list-style: none;
}
}
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0;
margin-bottom: 0;
margin: 0;
}
}
* {
* {
box-sizing: border-box;
}
}
.@{prefix}-text-ellipsis {
.@{prefix}-text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.@{prefix}-text-tip {
.@{prefix}-text-tip {
font-size: 12px;
color: @text-level-3-color;
}
}
.@{prefix}-pic {
.@{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;
@ -81,9 +86,9 @@ body {
&:focus {
text-decoration: none;
}
}
}
.@{prefix}-link {
.@{prefix}-link {
color: @primary-color;
text-decoration: none;
@ -106,62 +111,62 @@ body {
&:focus {
text-decoration: none;
}
}
}
// 布局元素调整
.@{prefix}-wrapper {
// 布局元素调整
.@{prefix}-wrapper {
height: 100vh;
display: flex;
flex-direction: column;
}
.@{prefix}-sidenav-layout {
}
.@{prefix}-sidenav-layout {
&-relative {
height: 100%;
}
}
.@{prefix}-content-layout {
}
.@{prefix}-content-layout {
margin: @spacer-3;
}
}
.@{prefix}-footer-layout {
.@{prefix}-footer-layout {
padding: 0;
margin-bottom: @spacer-2;
}
}
.@{prefix}-footer {
color: rgba(0, 0, 0, 0.3);
.@{prefix}-footer {
color: rgba(0, 0, 0, .3);
line-height: 20px;
text-align: center;
}
}
.@{prefix}-icon-container {
.@{prefix}-icon-container {
width: 16px;
height: 16px;
margin-left: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
.@{prefix}-flat-icon {
.@{prefix}-flat-icon {
width: 10px;
height: 3px;
background: rgba(0,0,0,0.60);
}
background: rgba(0,0,0,.60);
}
.@{prefix}-up-triangle {
.@{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 {
.@{prefix}-down-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 8px 6px 0 6px;
border-color: #E34D59 transparent transparent transparent;
}
}

28
src/style/sidenav.less
View File

@ -1,22 +1,22 @@
@import './variables.less';
@import './font-family.less';
.@{prefix} {
&-sidebar-layout {
height: 100%;
}
&-sidebar-compact {
width: 64px;
.@{prefix}-sidenav-logo-wrapper {
padding-left: 16px;
}
}
&-sidebar-layout-side {
z-index: 100;
}
&-sidenav{
&-sidenav {
position: fixed;
top: 0;
bottom: 0;
@ -47,15 +47,19 @@
align-items: center;
width: 100%;
}
&-logo-t-logo {
width: 32px;
margin-left: 16px;
}
&-logo-tdesign-logo {
width: 112px;
}
&-logo-normal {
font-family: TencentSansKoreanW7;
color: @primary-color;
color: @brand-color;
font-size: @font-size-l;
transition: all .3s;
}
@ -75,8 +79,9 @@
}
}
.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 {
@ -84,13 +89,4 @@
display: inline-flex;
height: 64px;
margin-left: 24px;
}
.optional-icon {
color: #000000;
cursor: pointer;
&:hover {
color: @primary-color;
}
}
}

10
stylelint.config.js Normal file
View File

@ -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'] },
},
};

39
vite.config.ts
View File

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