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

Merge branch 'develop' of github.com:Tencent/tdesign-vue-next-starter into main

Browse Source
This commit is contained in:
Uyarn 2023-01-10 15:44:13 +08:00
commit ec83f9f8fa
28 changed files with 147 additions and 508 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -30,7 +30,7 @@
"qs": "^6.10.5", "qs": "^6.10.5",
"tdesign-icons-vue-next": "^0.1.7", "tdesign-icons-vue-next": "^0.1.7",
"tdesign-vue-next": "^1.0.0", "tdesign-vue-next": "^1.0.0",
"tvision-color": "^1.3.1", "tvision-color": "^1.5.0",
"vue": "^3.2.31", "vue": "^3.2.31",
"vue-clipboard3": "^2.0.0", "vue-clipboard3": "^2.0.0",
"vue-router": "~4.1.5" "vue-router": "~4.1.5"

11
src/components/color/index.vue
View File

@ -3,10 +3,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getBrandColor } from '@/config/color'; import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
import { useSettingStore } from '@/store';
const store = useSettingStore();
const panelColor = const panelColor =
'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)'; 'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)';
@ -19,17 +16,17 @@ const props = defineProps({
const style = computed(() => { const style = computed(() => {
const { value } = props; const { value } = props;
const { colorList } = store;
return { return {
background: value !== 'dynamic' ? getBrandColor(value, colorList)['--td-brand-color'] : panelColor, background: DEFAULT_COLOR_OPTIONS.indexOf(value) > -1 ? value : panelColor,
}; };
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.color-container { .color-container {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50%; border-radius: var(--td-radius-circle);
display: inline-block; display: inline-block;
} }
</style> </style>

2
src/components/product-card/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<t-card theme="poster2"> <t-card theme="poster2" :bordered="false">
<template #avatar> <template #avatar>
<t-avatar size="56px"> <t-avatar size="56px">
<template #icon> <template #icon>

210
src/config/color.ts
View File

@ -1,138 +1,7 @@
/* eslint-disable indent */
import { Color } from 'tvision-color';
export type TColorToken = Record<string, string>; export type TColorToken = Record<string, string>;
export type TColorSeries = Record<string, TColorToken>; export type TColorSeries = Record<string, TColorToken>;
export const defaultLightColor = [ // TODO: 中性色暂时固定 待tvision-color生成带色彩倾向的中性色
'#0052d9',
'#0594fa',
'#00a870',
'#ebb105',
'#ed7b2f',
'#e34d59',
'#ed49b4',
'#834ec2',
];
export const defaultDarkColor = [
'#4582e6',
'#29a4fb',
'#03a56f',
'#ca8d03',
'#ed7b2f',
'#ea7b84',
'#f172c5',
'#ab87d5',
];
export const COLOR_TOKEN: TColorSeries = {
DEFAULT: {
'--td-brand-color': '#0052d9',
'--td-brand-color-1': '#f2f3ff',
'--td-brand-color-2': '#d9e1ff',
'--td-brand-color-3': '#b5c7ff',
'--td-brand-color-4': '#8eabff',
'--td-brand-color-5': '#618dff',
'--td-brand-color-6': '#366ef4',
'--td-brand-color-7': '#0052d9',
'--td-brand-color-8': '#003cab',
'--td-brand-color-9': '#002a7c',
'--td-brand-color-10': '#001a57',
},
CYAN: {
'--td-brand-color': '#0594FA',
'--td-brand-color-1': '#d7eefe',
'--td-brand-color-2': '#aeddfd',
'--td-brand-color-3': '#84cafd',
'--td-brand-color-4': '#58b8fc',
'--td-brand-color-5': '#29a4fb',
'--td-brand-color-6': '#0594FA',
'--td-brand-color-7': '#29a4fb',
'--td-brand-color-8': '#0594FA',
'--td-brand-color-9': '#0378df',
'--td-brand-color-10': '#01409b',
},
GREEN: {
'--td-brand-color': '#00A870',
'--td-brand-color-1': '#8dffd9',
'--td-brand-color-2': '#00f2a2',
'--td-brand-color-3': '#00dc92',
'--td-brand-color-4': '#00c583',
'--td-brand-color-5': '#00A870',
'--td-brand-color-6': '#009a5d',
'--td-brand-color-7': '#00c583',
'--td-brand-color-8': '#00A870',
'--td-brand-color-9': '#009a5d',
'--td-brand-color-10': '#004a14',
},
ORANGE: {
'--td-brand-color': '#ED7B2F',
'--td-brand-color-1': '#fce5d7',
'--td-brand-color-2': '#f8cdaf',
'--td-brand-color-3': '#f4b285',
'--td-brand-color-4': '#f19659',
'--td-brand-color-5': '#ED7B2F',
'--td-brand-color-6': '#e75510',
'--td-brand-color-7': '#f19659',
'--td-brand-color-8': '#ED7B2F',
'--td-brand-color-9': '#e75510',
'--td-brand-color-10': '#7f0a02',
},
RED: {
'--td-brand-color': '#E34D59',
'--td-brand-color-1': '#fbe5e7',
'--td-brand-color-2': '#f7ccd0',
'--td-brand-color-3': '#f3b2b8',
'--td-brand-color-4': '#ef989f',
'--td-brand-color-5': '#ea7b84',
'--td-brand-color-6': '#E34D59',
'--td-brand-color-7': '#ea7b84',
'--td-brand-color-8': '#E34D59',
'--td-brand-color-9': '#e42c3a',
'--td-brand-color-10': '#8d0309',
},
PINK: {
'--td-brand-color': '#ED49B4',
'--td-brand-color-1': '#fce5f4',
'--td-brand-color-2': '#facae9',
'--td-brand-color-3': '#f7aede',
'--td-brand-color-4': '#f491d2',
'--td-brand-color-5': '#f172c5',
'--td-brand-color-6': '#ED49B4',
'--td-brand-color-7': '#f172c5',
'--td-brand-color-8': '#ED49B4',
'--td-brand-color-9': '#e80f9d',
'--td-brand-color-10': '#8f025e',
},
PURPLE: {
'--td-brand-color': '#834EC2',
'--td-brand-color-1': '#eee6f7',
'--td-brand-color-2': '#ddceee',
'--td-brand-color-3': '#ccb6e6',
'--td-brand-color-4': '#bb9edc',
'--td-brand-color-5': '#ab87d5',
'--td-brand-color-6': '#9a6fce',
'--td-brand-color-7': '#9a6fce',
'--td-brand-color-8': '#834EC2',
'--td-brand-color-9': '#783ac3',
'--td-brand-color-10': '#4c1397',
},
YELLOW: {
'--td-brand-color': '#EBB105',
'--td-brand-color-1': '#fde9ab',
'--td-brand-color-2': '#fbd152',
'--td-brand-color-3': '#EBB105',
'--td-brand-color-4': '#dda204',
'--td-brand-color-5': '#ca8d03',
'--td-brand-color-6': '#b67803',
'--td-brand-color-7': '#fbd152',
'--td-brand-color-8': '#EBB105',
'--td-brand-color-9': '#dda204',
'--td-brand-color-10': '#603100',
},
};
export const LIGHT_CHART_COLORS = { export const LIGHT_CHART_COLORS = {
textColor: 'rgba(0, 0, 0, 0.9)', textColor: 'rgba(0, 0, 0, 0.9)',
placeholderColor: 'rgba(0, 0, 0, 0.35)', placeholderColor: 'rgba(0, 0, 0, 0.35)',
@ -149,70 +18,13 @@ export const DARK_CHART_COLORS = {
export type TChartColor = typeof LIGHT_CHART_COLORS; export type TChartColor = typeof LIGHT_CHART_COLORS;
function toUnderline(name: string): string { export const DEFAULT_COLOR_OPTIONS = [
return name.replace(/([A-Z])/g, '_$1').toUpperCase(); '#0052D9',
} '#0594FA',
'#00A870',
export function getBrandColor(type: string, colorList: TColorSeries): TColorToken { '#EBB105',
const name = /^#[A-F\d]{6}$/i.test(type) ? type : toUnderline(type); '#ED7B2F',
return colorList[name || 'DEFAULT']; '#E34D59',
} '#ED49B4',
'#834EC2',
export function getColorList(colorArray: Array<TColorToken>): Array<string> { ];
const pureColorList = [];
colorArray.map((colorToken) => Object.keys(colorToken).map((key) => pureColorList.push(colorToken[key])));
return pureColorList;
}
export function generateColorMap(theme: string, colorPalette: Array<string>, mode: 'light' | 'dark') {
const isDarkMode = mode === 'dark';
let brandColorIdx = colorPalette.indexOf(theme);
if (isDarkMode) {
// eslint-disable-next-line no-use-before-define
colorPalette.reverse().map((color) => {
const [h, s, l] = Color.colorTransform(color, 'hex', 'hsl');
return Color.colorTransform([h, Number(s) - 4, l], 'hsl', 'hex');
});
brandColorIdx = 5;
colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
}
const colorMap = {
'--td-brand-color': colorPalette[brandColorIdx], // 主题色
'--td-brand-color-1': colorPalette[0], // light
'--td-brand-color-2': colorPalette[1], // focus
'--td-brand-color-3': colorPalette[2], // disabled
'--td-brand-color-4': colorPalette[3],
'--td-brand-color-5': colorPalette[4],
'--td-brand-color-6': colorPalette[5],
'--td-brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover
'--td-brand-color-8': colorPalette[brandColorIdx], // 主题色
'--td-brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click
'--td-brand-color-10': colorPalette[9],
};
return colorMap;
}
export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode: 'light' | 'dark') {
const isDarkMode = mode === 'dark';
const root = !isDarkMode ? `:root[theme-color='${theme}']` : `:root[theme-color='${theme}'][theme-mode='dark']`;
const styleSheet = document.createElement('style');
styleSheet.type = 'text/css';
styleSheet.innerText = `${root}{
--td-brand-color: ${colorMap['--td-brand-color']};
--td-brand-color-1: ${colorMap['--td-brand-color-1']};
--td-brand-color-2: ${colorMap['--td-brand-color-2']};
--td-brand-color-3: ${colorMap['--td-brand-color-3']};
--td-brand-color-4: ${colorMap['--td-brand-color-4']};
--td-brand-color-5: ${colorMap['--td-brand-color-5']};
--td-brand-color-6: ${colorMap['--td-brand-color-6']};
--td-brand-color-7: ${colorMap['--td-brand-color-7']};
--td-brand-color-8: ${colorMap['--td-brand-color-8']};
--td-brand-color-9: ${colorMap['--td-brand-color-9']};
--td-brand-color-10: ${colorMap['--td-brand-color-10']};
}`;
document.head.appendChild(styleSheet);
}

3
src/config/style.ts
View File

@ -10,6 +10,5 @@ export default {
isHeaderFixed: true, isHeaderFixed: true,
isUseTabsRouter: false, isUseTabsRouter: false,
showHeader: true, showHeader: true,
backgroundTheme: 'blueGrey', brandTheme: '#0052D9',
brandTheme: 'default',
}; };

32
src/layouts/setting.vue
View File

@ -23,11 +23,7 @@
</t-radio-group> </t-radio-group>
<div class="setting-group-title">主题色</div> <div class="setting-group-title">主题色</div>
<t-radio-group v-model="formData.brandTheme"> <t-radio-group v-model="formData.brandTheme">
<div <div v-for="(item, index) in DEFAULT_COLOR_OPTIONS" :key="index" class="setting-layout-drawer">
v-for="(item, index) in COLOR_OPTIONS.slice(0, COLOR_OPTIONS.length - 1)"
:key="index"
class="setting-layout-drawer"
>
<t-radio-button :key="index" :value="item" class="setting-layout-color-group"> <t-radio-button :key="index" :value="item" class="setting-layout-color-group">
<color-container :value="item" /> <color-container :value="item" />
</t-radio-button> </t-radio-button>
@ -50,11 +46,8 @@
:swatch-colors="[]" :swatch-colors="[]"
/> />
</template> </template>
<t-radio-button <t-radio-button :value="dynamicColor" class="setting-layout-color-group dynamic-color-btn">
:value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]" <color-container :value="dynamicColor" />
class="setting-layout-color-group dynamic-color-btn"
>
<color-container :value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]" />
</t-radio-button> </t-radio-button>
</t-popup> </t-popup>
</div> </div>
@ -110,7 +103,8 @@ import Thumbnail from '@/components/thumbnail/index.vue';
import ColorContainer from '@/components/color/index.vue'; import ColorContainer from '@/components/color/index.vue';
import STYLE_CONFIG from '@/config/style'; import STYLE_CONFIG from '@/config/style';
import { insertThemeStylesheet, generateColorMap } from '@/config/color'; import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
import SettingDarkIcon from '@/assets/assets-setting-dark.svg'; import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
import SettingLightIcon from '@/assets/assets-setting-light.svg'; import SettingLightIcon from '@/assets/assets-setting-light.svg';
@ -119,12 +113,13 @@ import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
const settingStore = useSettingStore(); const settingStore = useSettingStore();
const LAYOUT_OPTION = ['side', 'top', 'mix']; const LAYOUT_OPTION = ['side', 'top', 'mix'];
const COLOR_OPTIONS = ['default', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'dynamic'];
const MODE_OPTIONS = [ const MODE_OPTIONS = [
{ type: 'light', text: '明亮' }, { type: 'light', text: '明亮' },
{ type: 'dark', text: '暗黑' }, { type: 'dark', text: '暗黑' },
{ type: 'auto', text: '跟随系统' }, { type: 'auto', text: '跟随系统' },
]; ];
const initStyleConfig = () => { const initStyleConfig = () => {
const styleConfig = STYLE_CONFIG; const styleConfig = STYLE_CONFIG;
for (const key in styleConfig) { for (const key in styleConfig) {
@ -136,6 +131,10 @@ const initStyleConfig = () => {
return styleConfig; return styleConfig;
}; };
const dynamicColor = computed(() => {
const isDynamic = DEFAULT_COLOR_OPTIONS.indexOf(formData.value.brandTheme) === -1;
return isDynamic ? formData.value.brandTheme : '';
});
const formData = ref({ ...initStyleConfig() }); const formData = ref({ ...initStyleConfig() });
const isColoPickerDisplay = ref(false); const isColoPickerDisplay = ref(false);
@ -151,14 +150,17 @@ const showSettingPanel = computed({
}); });
const changeColor = (hex: string) => { const changeColor = (hex: string) => {
const newPalette = Color.getPaletteByGradation({ const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
colors: [hex], colors: [hex],
step: 10, step: 10,
remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
})[0]; })[0];
const { mode } = settingStore; const { mode } = settingStore;
const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark');
const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark', brandColorIndex);
settingStore.addColor({ [hex]: colorMap }); settingStore.addColor({ [hex]: colorMap });
formData.value.brandTheme = hex;
settingStore.updateConfig({ ...formData.value, brandTheme: hex }); settingStore.updateConfig({ ...formData.value, brandTheme: hex });
insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark'); insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark');
}; };
@ -209,7 +211,7 @@ const getThumbnailUrl = (name: string): string => {
}; };
watchEffect(() => { watchEffect(() => {
settingStore.updateConfig(formData.value); if (formData.value.brandTheme) settingStore.updateConfig(formData.value);
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

4
src/pages/dashboard/base/components/MiddleChart.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<t-row :gutter="16" class="row-container"> <t-row :gutter="16" class="row-container">
<t-col :xs="12" :xl="9"> <t-col :xs="12" :xl="9">
<t-card title="统计数据" :subtitle="`(万元)${currentMonth}`" class="dashboard-chart-card"> <t-card title="统计数据" :subtitle="`(万元)${currentMonth}`" class="dashboard-chart-card" :bordered="false">
<template #option> <template #option>
<div class="dashboard-chart-title-container"> <div class="dashboard-chart-title-container">
<t-date-range-picker <t-date-range-picker
@ -22,7 +22,7 @@
</t-card> </t-card>
</t-col> </t-col>
<t-col :xs="12" :xl="3"> <t-col :xs="12" :xl="3">
<t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card"> <t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card" :bordered="false">
<div <div
id="countContainer" id="countContainer"
ref="countContainer" ref="countContainer"

2
src/pages/dashboard/base/components/OutputOverview.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<t-card> <t-card :bordered="false">
<t-row> <t-row>
<t-col :xs="12" :xl="9"> <t-col :xs="12" :xl="9">
<t-card <t-card

4
src/pages/dashboard/base/components/RankList.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<t-row :gutter="16" class="row-container"> <t-row :gutter="16" class="row-container">
<t-col :xs="12" :xl="6"> <t-col :xs="12" :xl="6">
<t-card title="销售订单排名" class="dashboard-rank-card"> <t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
<template #actions> <template #actions>
<t-radio-group default-value="dateVal"> <t-radio-group default-value="dateVal">
<t-radio-button value="dateVal">本周</t-radio-button> <t-radio-button value="dateVal">本周</t-radio-button>
@ -26,7 +26,7 @@
</t-card> </t-card>
</t-col> </t-col>
<t-col :xs="12" :xl="6"> <t-col :xs="12" :xl="6">
<t-card title="销售订单排名" class="dashboard-rank-card"> <t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
<template #actions> <template #actions>
<t-radio-group default-value="dateVal"> <t-radio-group default-value="dateVal">
<t-radio-button value="dateVal">本周</t-radio-button> <t-radio-button value="dateVal">本周</t-radio-button>

1
src/pages/dashboard/base/components/TopPanel.vue
View File

@ -3,6 +3,7 @@
<t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3"> <t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3">
<t-card <t-card
:title="item.title" :title="item.title"
:bordered="false"
:style="{ height: '168px' }" :style="{ height: '168px' }"
:class="{ 'dashboard-item': true, 'dashboard-item--main-color': index == 0 }" :class="{ 'dashboard-item': true, 'dashboard-item--main-color': index == 0 }"
> >

6
src/pages/dashboard/detail/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="dashboard-panel-detail"> <div class="dashboard-panel-detail">
<t-card title="本月采购申请情况" class="dashboard-detail-card"> <t-card title="本月采购申请情况" class="dashboard-detail-card" :bordered="false">
<t-row :gutter="[16, 16]"> <t-row :gutter="[16, 16]">
<t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3"> <t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3">
<t-card class="dashboard-list-card" :description="item.title"> <t-card class="dashboard-list-card" :description="item.title">
@ -18,7 +18,7 @@
</t-card> </t-card>
<t-row :gutter="[16, 16]" class="row-margin"> <t-row :gutter="[16, 16]" class="row-margin">
<t-col :xs="12" :xl="9"> <t-col :xs="12" :xl="9">
<t-card class="dashboard-detail-card" title="采购商品申请趋势" subtitle="(件)"> <t-card class="dashboard-detail-card" title="采购商品申请趋势" subtitle="(件)" :bordered="false">
<template #actions> <template #actions>
<t-date-range-picker <t-date-range-picker
class="card-date-picker-container" class="card-date-picker-container"
@ -41,7 +41,7 @@
/> />
</t-col> </t-col>
</t-row> </t-row>
<t-card :class="['dashboard-detail-card', 'row-margin']" title="采购商品满意度分布"> <t-card :class="['dashboard-detail-card', 'row-margin']" title="采购商品满意度分布" :bordered="false">
<template #actions> <template #actions>
<t-date-range-picker <t-date-range-picker
class="card-date-picker-container" class="card-date-picker-container"

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

@ -1,6 +1,6 @@
<template> <template>
<div class="detail-advanced"> <div class="detail-advanced">
<t-card title="基本信息"> <t-card title="基本信息" :bordered="false">
<div class="info-block"> <div class="info-block">
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item"> <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
<h1>{{ item.name }}</h1> <h1>{{ item.name }}</h1>
@ -18,7 +18,7 @@
</t-card> </t-card>
<!-- 发票进度 --> <!-- 发票进度 -->
<t-card title="发票进度" class="container-base-margin-top"> <t-card title="发票进度" class="container-base-margin-top" :bordered="false">
<t-row justify="space-between"> <t-row justify="space-between">
<t-steps :current="updateCurrent"> <t-steps :current="updateCurrent">
<t-step-item title="申请提交" content="已于12月21日提交" /> <t-step-item title="申请提交" content="已于12月21日提交" />
@ -30,7 +30,7 @@
</t-card> </t-card>
<!-- 产品目录 --> <!-- 产品目录 -->
<t-card title="产品目录" class="container-base-margin-top"> <t-card title="产品目录" class="container-base-margin-top" :bordered="false">
<template #option> <template #option>
<t-radio-group default-value="dateVal"> <t-radio-group default-value="dateVal">
<t-radio-button value="dateVal"> 季度 </t-radio-button> <t-radio-button value="dateVal"> 季度 </t-radio-button>
@ -53,7 +53,7 @@
</t-card> </t-card>
<!-- 产品采购明细 --> <!-- 产品采购明细 -->
<t-card title="产品采购明细" class="container-base-margin-top"> <t-card title="产品采购明细" class="container-base-margin-top" :bordered="false">
<t-table <t-table
:columns="columns" :columns="columns"
:data="data" :data="data"

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

@ -1,6 +1,6 @@
<template> <template>
<div class="detail-base"> <div class="detail-base">
<t-card title="基本信息"> <t-card title="基本信息" :bordered="false">
<div class="info-block"> <div class="info-block">
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item"> <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
<h1>{{ item.name }}</h1> <h1>{{ item.name }}</h1>
@ -17,7 +17,7 @@
</div> </div>
</t-card> </t-card>
<t-card title="变更记录" class="container-base-margin-top"> <t-card title="变更记录" class="container-base-margin-top" :bordered="false">
<t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1"> <t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1">
<t-step-item title="上传合同附件" content="这里是提示文字" /> <t-step-item title="上传合同附件" content="这里是提示文字" />
<t-step-item title="修改合同金额" content="这里是提示文字" /> <t-step-item title="修改合同金额" content="这里是提示文字" />

6
src/pages/detail/deploy/index.vue
View File

@ -2,14 +2,14 @@
<div class="detail-deploy"> <div class="detail-deploy">
<t-row :gutter="16"> <t-row :gutter="16">
<t-col :lg="6" :xs="12"> <t-col :lg="6" :xs="12">
<t-card title="部署趋势"> <t-card title="部署趋势" :bordered="false">
<div class="deploy-panel-left"> <div class="deploy-panel-left">
<div id="monitorContainer" style="width: 100%; height: 265px" /> <div id="monitorContainer" style="width: 100%; height: 265px" />
</div> </div>
</t-card> </t-card>
</t-col> </t-col>
<t-col :lg="6" :xs="12"> <t-col :lg="6" :xs="12">
<t-card title="告警情况"> <t-card title="告警情况" :bordered="false">
<template #option> <template #option>
<t-radio-group default-value="dateVal" @change="onAlertChange"> <t-radio-group default-value="dateVal" @change="onAlertChange">
<t-radio-button value="dateVal"> 本周 </t-radio-button> <t-radio-button value="dateVal"> 本周 </t-radio-button>
@ -22,7 +22,7 @@
</t-row> </t-row>
<!-- 项目列表 --> <!-- 项目列表 -->
<t-card title="项目列表" class="container-base-margin-top"> <t-card title="项目列表" class="container-base-margin-top" :bordered="false">
<t-table <t-table
:columns="columns" :columns="columns"
:data="data" :data="data"

2
src/pages/list/base/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<t-card class="list-card-container"> <t-card class="list-card-container" :bordered="false">
<t-row justify="space-between"> <t-row justify="space-between">
<div class="left-operation-container"> <div class="left-operation-container">
<t-button @click="handleSetupContract"> 新建合同 </t-button> <t-button @click="handleSetupContract"> 新建合同 </t-button>

10
src/pages/user/index.vue
View File

@ -9,7 +9,7 @@
<img src="@/assets/assets-tencent-logo.png" class="logo" /> <img src="@/assets/assets-tencent-logo.png" class="logo" />
</div> </div>
<t-card class="user-info-list" title="个人信息"> <t-card class="user-info-list" title="个人信息" :bordered="false">
<template #actions> <template #actions>
<t-button theme="default" shape="square" variant="text"> <t-button theme="default" shape="square" variant="text">
<t-icon name="edit" size="18" /> <t-icon name="edit" size="18" />
@ -27,7 +27,7 @@
</t-row> </t-row>
</t-card> </t-card>
<t-card class="content-container"> <t-card class="content-container" :bordered="false">
<t-tabs value="second"> <t-tabs value="second">
<t-tab-panel value="first" label="内容列表"> <t-tab-panel value="first" label="内容列表">
<p>内容列表</p> <p>内容列表</p>
@ -54,13 +54,13 @@
</t-col> </t-col>
<t-col :flex="1"> <t-col :flex="1">
<t-card class="user-intro"> <t-card class="user-intro" :bordered="false">
<t-avatar size="90px">T</t-avatar> <t-avatar size="90px">T</t-avatar>
<div class="name">My Account</div> <div class="name">My Account</div>
<div class="position">XXG 港澳业务拓展组员工 直客销售</div> <div class="position">XXG 港澳业务拓展组员工 直客销售</div>
</t-card> </t-card>
<t-card title="团队成员" class="user-team"> <t-card title="团队成员" class="user-team" :bordered="false">
<template #actions> <template #actions>
<t-button theme="default" shape="square" variant="text"> <t-button theme="default" shape="square" variant="text">
<t-icon name="edit" size="18" /> <t-icon name="edit" size="18" />
@ -73,7 +73,7 @@
</t-list> </t-list>
</t-card> </t-card>
<t-card title="服务产品" class="product-container"> <t-card title="服务产品" class="product-container" :bordered="false">
<template #actions> <template #actions>
<t-button theme="default" shape="square" variant="text"> <t-button theme="default" shape="square" variant="text">
<t-icon name="edit" size="18" /> <t-icon name="edit" size="18" />

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

@ -1,13 +1,15 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { Color } from 'tvision-color';
import keys from 'lodash/keys'; import keys from 'lodash/keys';
import { COLOR_TOKEN, LIGHT_CHART_COLORS, DARK_CHART_COLORS, TColorSeries } from '@/config/color'; import { LIGHT_CHART_COLORS, DARK_CHART_COLORS, TColorSeries } from '@/config/color';
import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
import STYLE_CONFIG from '@/config/style'; import STYLE_CONFIG from '@/config/style';
import { store } from '@/store'; import { store } from '@/store';
const state = { const state = {
...STYLE_CONFIG, ...STYLE_CONFIG,
showSettingPanel: false, showSettingPanel: false,
colorList: COLOR_TOKEN, colorList: {},
chartColors: LIGHT_CHART_COLORS, chartColors: LIGHT_CHART_COLORS,
}; };
@ -49,6 +51,16 @@ export const useSettingStore = defineStore('setting', {
this.chartColors = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS; this.chartColors = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS;
}, },
changeBrandTheme(brandTheme: string) { changeBrandTheme(brandTheme: string) {
const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
colors: [brandTheme],
step: 10,
remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
})[0];
const { mode } = this;
const colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex);
insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark');
document.documentElement.setAttribute('theme-color', brandTheme); document.documentElement.setAttribute('theme-color', brandTheme);
}, },
addColor(payload: TColorSeries) { addColor(payload: TColorSeries) {

2
src/style/index.less
View File

@ -1,3 +1,3 @@
@import './font-family.less'; @import './font-family.less';
@import './theme/index.less';
@import './reset.less'; @import './reset.less';

27
src/style/theme/cyan.less
View File

@ -1,27 +0,0 @@
:root[theme-color='cyan'] {
--td-brand-color: #0594fa;
--td-brand-color-1: #d7eefe;
--td-brand-color-2: #aeddfd;
--td-brand-color-3: #84cafd;
--td-brand-color-4: #58b8fc;
--td-brand-color-5: #29a4fb;
--td-brand-color-6: #0594fa;
--td-brand-color-7: #29a4fb;
--td-brand-color-8: #0594fa;
--td-brand-color-9: #0378df;
--td-brand-color-10: #01409b;
}
:root[theme-color='cyan'][theme-mode='dark'] {
--td-brand-color: #29a4fb;
--td-brand-color-1: #01409b;
--td-brand-color-2: #0152b3;
--td-brand-color-3: #0264ca;
--td-brand-color-4: #0378df;
--td-brand-color-5: #0594fa;
--td-brand-color-6: #29a4fb;
--td-brand-color-7: #0594fa;
--td-brand-color-8: #29a4fb;
--td-brand-color-9: #58b8fc;
--td-brand-color-10: #d7eefe;
}

26
src/style/theme/default.less
View File

@ -1,26 +0,0 @@
:root,
:root[theme-mode='light'] {
--td-brand-color-1: #f2f3ff;
--td-brand-color-2: #d9e1ff;
--td-brand-color-3: #b5c7ff;
--td-brand-color-4: #8eabff;
--td-brand-color-5: #618dff;
--td-brand-color-6: #366ef4;
--td-brand-color-7: #0052d9;
--td-brand-color-8: #003cab;
--td-brand-color-9: #002a7c;
--td-brand-color-10: #001a57;
}
:root[theme-mode='dark'] {
--td-brand-color-1: #1b2f51;
--td-brand-color-2: #173463;
--td-brand-color-3: #143975;
--td-brand-color-4: #103d88;
--td-brand-color-5: #0d429a;
--td-brand-color-6: #054bbe;
--td-brand-color-7: #2667d4;
--td-brand-color-8: #4582e6;
--td-brand-color-9: #699ef5;
--td-brand-color-10: #96bbf8;
}

26
src/style/theme/green.less
View File

@ -1,26 +0,0 @@
:root[theme-color='green'] {
--td-brand-color-1: #e8f8f2;
--td-brand-color-2: #bcebdc;
--td-brand-color-3: #85dbbe;
--td-brand-color-4: #48c79c;
--td-brand-color-5: #00a870;
--td-brand-color-6: #078d5c;
--td-brand-color-7: #067945;
--td-brand-color-8: #00a870;
--td-brand-color-9: #044f2a;
--td-brand-color-10: #033017;
}
:root[theme-color='green'][theme-mode='dark'] {
--td-brand-color: #03a56f;
--td-brand-color-1: #024b15;
--td-brand-color-2: #03965c;
--td-brand-color-3: #03a56f;
--td-brand-color-4: #04c383;
--td-brand-color-5: #03965c;
--td-brand-color-6: #03a56f;
--td-brand-color-7: #04c383;
--td-brand-color-8: #03a56f;
--td-brand-color-9: #05eb9f;
--td-brand-color-10: #91fdd9;
}

15
src/style/theme/index.less
View File

@ -1,15 +0,0 @@
@import './default.less';
@import './cyan.less';
@import './green.less';
@import './orange.less';
@import './pink.less';
@import './purple.less';
@import './red.less';
@import './yellow.less';

28
src/style/theme/orange.less
View File

@ -1,28 +0,0 @@
:root[theme-color='orange'] {
--td-brand-color: #ed7b2f;
--td-brand-color-1: #fce5d7;
--td-brand-color-2: #f8cdaf;
--td-brand-color-3: #f4b285;
--td-brand-color-4: #f19659;
--td-brand-color-5: #ed7b2f;
--td-brand-color-6: #e75510;
--td-brand-color-7: #f19659;
--td-brand-color-8: #ed7b2f;
--td-brand-color-9: #e75510;
--td-brand-color-10: #7f0a02;
--td-brand-color: #ed7b2f;
}
:root[theme-color='orange'][theme-mode='dark'] {
--td-brand-color: #ed7b2f;
--td-brand-color-1: #692204;
--td-brand-color-2: #873105;
--td-brand-color-3: #a24006;
--td-brand-color-4: #c25110;
--td-brand-color-5: #d66724;
--td-brand-color-6: #ed8139;
--td-brand-color-7: #ff9852;
--td-brand-color-8: #ed7b2f;
--td-brand-color-9: #ed7b2f;
--td-brand-color-10: #fce5d7;
}

27
src/style/theme/pink.less
View File

@ -1,27 +0,0 @@
:root[theme-color='pink'] {
--td-brand-color: #ed49b4;
--td-brand-color-1: #fce5f4;
--td-brand-color-2: #facae9;
--td-brand-color-3: #f7aede;
--td-brand-color-4: #f491d2;
--td-brand-color-5: #f172c5;
--td-brand-color-6: #ed49b4;
--td-brand-color-7: #f172c5;
--td-brand-color-8: #ed49b4;
--td-brand-color-9: #e80f9d;
--td-brand-color-10: #8f025e;
}
:root[theme-color='pink'][theme-mode='dark'] {
--td-brand-color: #ff70cf;
--td-brand-color-1: #5b374f;
--td-brand-color-2: #9b066d;
--td-brand-color-3: #bc088a;
--td-brand-color-4: #d435a0;
--td-brand-color-5: #ed53b7;
--td-brand-color-6: #ff70cf;
--td-brand-color-7: #ff99e4;
--td-brand-color-8: #ff70cf;
--td-brand-color-9: #ffdbfd;
--td-brand-color-10: #fff2ff;
}

27
src/style/theme/purple.less
View File

@ -1,27 +0,0 @@
:root[theme-color='purple'] {
--td-brand-color: #834ec2;
--td-brand-color-1: #eee6f7;
--td-brand-color-2: #ddceee;
--td-brand-color-3: #ccb6e6;
--td-brand-color-4: #bb9edc;
--td-brand-color-5: #ab87d5;
--td-brand-color-6: #9a6fce;
--td-brand-color-7: #9a6fce;
--td-brand-color-8: #834ec2;
--td-brand-color-9: #783ac3;
--td-brand-color-10: #4c1397;
}
:root[theme-color='purple'][theme-mode='dark'] {
--td-brand-color: #ab87d5;
--td-brand-color-1: #4c1397;
--td-brand-color-2: #6325b0;
--td-brand-color-3: #783ac3;
--td-brand-color-4: #834ec2;
--td-brand-color-5: #9a6fce;
--td-brand-color-6: #ab87d5;
--td-brand-color-7: #ab87d5;
--td-brand-color-8: #ab87d5;
--td-brand-color-9: #ccb6e6;
--td-brand-color-10: #eee6f7;
}

27
src/style/theme/red.less
View File

@ -1,27 +0,0 @@
:root[theme-color='red'] {
---td-brand-color: #e34d59;
--td-brand-color-1: #fbe5e7;
--td-brand-color-2: #f7ccd0;
--td-brand-color-3: #f3b2b8;
--td-brand-color-4: #ef989f;
--td-brand-color-5: #ea7b84;
--td-brand-color-6: #e34d59;
--td-brand-color-7: #ea7b84;
--td-brand-color-8: #e34d59;
--td-brand-color-9: #e42c3a;
--td-brand-color-10: #8d0309;
}
:root[theme-color='red'][theme-mode='dark'] {
--td-brand-color: #fb6e77;
--td-brand-color-1: #4f3335;
--td-brand-color-2: #960627;
--td-brand-color-3: #b01c37;
--td-brand-color-4: #c9384a;
--td-brand-color-5: #e35661;
--td-brand-color-6: #fb6e77;
--td-brand-color-7: #ff9195;
--td-brand-color-8: #fb6e77;
--td-brand-color-9: #ffd6d8;
--td-brand-color-10: #fff2f2;
}

27
src/style/theme/yellow.less
View File

@ -1,27 +0,0 @@
:root[theme-color='yellow'] {
--td-brand-color: #ebb105;
--td-brand-color-1: #fde9ab;
--td-brand-color-2: #fbd152;
--td-brand-color-3: #ebb105;
--td-brand-color-4: #dda204;
--td-brand-color-5: #ca8d03;
--td-brand-color-6: #b67803;
--td-brand-color-7: #fbd152;
--td-brand-color-8: #ebb105;
--td-brand-color-9: #dda204;
--td-brand-color-10: #603100;
}
:root[theme-color='yellow'][theme-mode='dark'] {
--td-brand-color: #ca8d03;
--td-brand-color-1: #603100;
--td-brand-color-2: #764101;
--td-brand-color-3: #8c5201;
--td-brand-color-4: #a16502;
--td-brand-color-5: #b67803;
--td-brand-color-6: #ca8d03;
--td-brand-color-7: #764101;
--td-brand-color-8: #ca8d03;
--td-brand-color-9: #a16502;
--td-brand-color-10: #fde9ab;
}

100
src/utils/color.ts
View File

@ -1,7 +1,7 @@
import { Color } from 'tvision-color'; import { Color } from 'tvision-color';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { getBrandColor, defaultLightColor, defaultDarkColor } from '@/config/color'; import trim from 'lodash/trim';
import { getSettingStore } from '@/store'; import { TColorToken } from '@/config/color';
/** /**
* 依据主题类型获取颜色 * 依据主题类型获取颜色
@ -10,37 +10,20 @@ import { getSettingStore } from '@/store';
* @param {string} theme * @param {string} theme
* @returns {} * @returns {}
*/ */
export function getColorFromTheme(theme: string): Array<string> { export function getColorFromTheme(): Array<string> {
const settingStore = getSettingStore(); const theme = trim(getComputedStyle(document.documentElement).getPropertyValue('--td-brand-color'));
const { colorList, mode } = settingStore; const themeColorList = Color.getRandomPalette({
const isDarkMode = mode === 'dark'; color: theme,
let themeColorList; colorGamut: 'bright',
const themeColor = getBrandColor(theme, colorList); number: 8,
});
if (!/^#[A-F\d]{6}$/i.test(theme)) {
theme = themeColor?.['--td-brand-color'] || '#0052D9';
const themIdx = defaultLightColor.indexOf(theme.toLocaleLowerCase());
const defaultGradients = !isDarkMode ? defaultLightColor : defaultDarkColor;
const spliceThemeList = defaultGradients.slice(0, themIdx);
themeColorList = defaultGradients.slice(themIdx, defaultGradients.length).concat(spliceThemeList);
} else {
theme = themeColor?.['--td-brand-color'];
themeColorList = Color.getRandomPalette({
color: theme,
colorGamut: 'bright',
number: 8,
});
}
return themeColorList; return themeColorList;
} }
/** 图表颜色 */ /** 图表颜色 */
export function getChartListColor(): Array<string> { export function getChartListColor(): Array<string> {
const settingStore = getSettingStore(); const res = getColorFromTheme();
const { brandTheme } = settingStore;
const res = getColorFromTheme(brandTheme);
return res; return res;
} }
@ -70,3 +53,66 @@ export function changeChartsTheme(chartsList: echarts.EChartsType[]): void {
} }
} }
} }
/**
* 根据当前主题色、模式等情景 计算最后生成的色阶
*/
export function generateColorMap(
theme: string,
colorPalette: Array<string>,
mode: 'light' | 'dark',
brandColorIdx: number,
) {
const isDarkMode = mode === 'dark';
if (isDarkMode) {
// eslint-disable-next-line no-use-before-define
colorPalette.reverse().map((color) => {
const [h, s, l] = Color.colorTransform(color, 'hex', 'hsl');
return Color.colorTransform([h, Number(s) - 4, l], 'hsl', 'hex');
});
brandColorIdx = 5;
colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
}
const colorMap = {
'--td-brand-color': colorPalette[brandColorIdx], // 主题色
'--td-brand-color-1': colorPalette[0], // light
'--td-brand-color-2': colorPalette[1], // focus
'--td-brand-color-3': colorPalette[2], // disabled
'--td-brand-color-4': colorPalette[3],
'--td-brand-color-5': colorPalette[4],
'--td-brand-color-6': colorPalette[5],
'--td-brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover
'--td-brand-color-8': colorPalette[brandColorIdx], // 主题色
'--td-brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click
'--td-brand-color-10': colorPalette[9],
};
return colorMap;
}
/**
* 将生成的样式嵌入头部
*/
export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode: 'light' | 'dark') {
const isDarkMode = mode === 'dark';
const root = !isDarkMode ? `:root[theme-color='${theme}']` : `:root[theme-color='${theme}'][theme-mode='dark']`;
const styleSheet = document.createElement('style');
styleSheet.type = 'text/css';
styleSheet.innerText = `${root}{
--td-brand-color: ${colorMap['--td-brand-color']};
--td-brand-color-1: ${colorMap['--td-brand-color-1']};
--td-brand-color-2: ${colorMap['--td-brand-color-2']};
--td-brand-color-3: ${colorMap['--td-brand-color-3']};
--td-brand-color-4: ${colorMap['--td-brand-color-4']};
--td-brand-color-5: ${colorMap['--td-brand-color-5']};
--td-brand-color-6: ${colorMap['--td-brand-color-6']};
--td-brand-color-7: ${colorMap['--td-brand-color-7']};
--td-brand-color-8: ${colorMap['--td-brand-color-8']};
--td-brand-color-9: ${colorMap['--td-brand-color-9']};
--td-brand-color-10: ${colorMap['--td-brand-color-10']};
}`;
document.head.appendChild(styleSheet);
}