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

chore: complete type of color

Browse Source
This commit is contained in:
Uyarn 2022-03-01 16:56:03 +08:00
parent dd246e40b7
commit bf8d8f4e6f
8 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/config/color.ts
View File

@ -1,7 +1,7 @@
import hexToHsl from 'hex-to-hsl';
/* eslint-disable indent */
export type ColorToken = Record<string, string>;
export type ColorSeries = Record<string, ColorToken>;
export type TColorToken = Record<string, string>;
export type TColorSeries = Record<string, TColorToken>;
export const defaultLightColor = [
'#0052d9',
@ -24,7 +24,7 @@ export const defaultDarkColor = [
'#ab87d5',
];
export const BACKGROUND_TOKEN: ColorSeries = {
export const BACKGROUND_TOKEN: TColorSeries = {
BLUE_GREY: {
'@gray-color-1': '#F1F2F5',
'@gray-color-2': '#EBEDF1',
@ -60,7 +60,7 @@ export const BACKGROUND_TOKEN: ColorSeries = {
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const NEUTRAL_GREY_TOKEN: ColorToken = {
export const NEUTRAL_GREY_TOKEN: TColorToken = {
'@gray-color-1': '#F3F3F3',
'@gray-color-2': '#EEEEEE',
'@gray-color-3': '#E7E7E7',
@ -77,7 +77,7 @@ export const NEUTRAL_GREY_TOKEN: ColorToken = {
'@gray-color-14': '#181818',
};
export const COLOR_TOKEN: ColorSeries = {
export const COLOR_TOKEN: TColorSeries = {
DEFAULT: {
'@brand-color': '#0052D9',
'@brand-color-1': '#e0ebff',
@ -185,35 +185,37 @@ export const COLOR_TOKEN: ColorSeries = {
},
};
export const LIGHT_CHART_COLORS: ColorToken = {
export const LIGHT_CHART_COLORS = {
textColor: 'rgba(0, 0, 0, 0.9)',
placeholderColor: 'rgba(0, 0, 0, 0.35)',
borderColor: '#dcdcdc',
containerColor: '#fff',
};
export const DARK_CHART_COLORS: ColorToken = {
export const DARK_CHART_COLORS = {
textColor: 'rgba(255, 255, 255, 0.9)',
placeholderColor: 'rgba(255, 255, 255, 0.35)',
borderColor: '#5e5e5e',
containerColor: '#242424',
};
export type TChartColor = typeof LIGHT_CHART_COLORS;
function toUnderline(name: string): string {
return name.replace(/([A-Z])/g, '_$1').toUpperCase();
}
export function getGreyColor(type: string): ColorToken {
export function getGreyColor(type: string): TColorToken {
const name = toUnderline(type);
return BACKGROUND_TOKEN[name] || {};
}
export function getBrandColor(type: string, colorList: ColorSeries): ColorToken {
export function getBrandColor(type: string, colorList: TColorSeries): TColorToken {
const name = /^#[A-F\d]{6}$/i.test(type) ? type : toUnderline(type);
return colorList[name || 'DEFAULT'];
}
export function getColorList(colorArray: Array<ColorToken>): Array<string> {
export function getColorList(colorArray: Array<TColorToken>): Array<string> {
const pureColorList = [];
colorArray.map((colorToken) => Object.keys(colorToken).map((key) => pureColorList.push(colorToken[key])));
@ -262,7 +264,7 @@ export function generateColorMap(theme: string, colorPalette: Array<string>, mod
};
return colorMap;
}
export function insertThemeStylesheet(theme: string, colorMap: ColorToken, mode: 'light' | 'dark') {
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']`;

5
src/layouts/setting.vue
View File

@ -103,9 +103,6 @@ import 'vue-color-kit/dist/vue-color-kit.css';
import STYLE_CONFIG from '@/config/style';
import { insertThemeStylesheet, generateColorMap } from '@/config/color';
import Thumbnail from '@/components/thumbnail/index.vue';
import ColorContainer from '@/components/color/index.vue';
import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
import SettingLightIcon from '@/assets/assets-setting-light.svg';
import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
@ -128,7 +125,7 @@ const showSettingPanel = computed({
get() {
return settingStore.showSettingPanel;
},
set(newVal) {
set(newVal: boolean) {
settingStore.updateConfig({
showSettingPanel: newVal,
});

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

@ -1,7 +1,7 @@
import dayjs from 'dayjs';
import * as echarts from 'echarts/core';
import { Color } from 'tvision-color';
import { getBrandColor, defaultLightColor, defaultDarkColor } from '@/config/color';
import { getBrandColor, defaultLightColor, defaultDarkColor, TChartColor } from '@/config/color';
import { getSettingStore } from '@/store';
/**
@ -177,7 +177,7 @@ export function constructInitDataset({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime: Array<string> } & Record<string, string>) {
}: { dateTime: Array<string> } & TChartColor) {
// const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
const divideNum = 10;
const timeArray = [];
@ -275,7 +275,7 @@ export function getSmoothLineDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & Record<string, string>) {
}: { dateTime?: Array<string> } & TChartColor) {
let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
if (dateTime.length > 0) {
const divideNum = 7;
@ -382,7 +382,7 @@ export function getFolderLineDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & Record<string, string>) {
}: { dateTime?: Array<string> } & TChartColor) {
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
if (dateTime.length > 0) {
const divideNum = 7;
@ -542,7 +542,7 @@ export function getLineChartDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & Record<string, string>) {
}: { dateTime?: Array<string> } & TChartColor) {
const divideNum = 10;
const timeArray = [];
const inArray = [];
@ -678,7 +678,7 @@ export function getScatterDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & Record<string, string>): any {
}: { dateTime?: Array<string> } & TChartColor): any {
const divideNum = 40;
const timeArray = [];
const inArray = [];
@ -974,7 +974,7 @@ export function get2ColBarChartDataSet({
isMonth = false,
placeholderColor,
borderColor,
}: { isMonth?: boolean } & Record<string, string>) {
}: { isMonth?: boolean } & TChartColor) {
let lastYearListCopy = lastYearList.concat([]);
let thisYearListCopy = lastYearList.concat([]);

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

@ -276,7 +276,7 @@ const renderStokeChart = () => {
stokeContainer = document.getElementById('stokeContainer');
}
stokeChart = echarts.init(stokeContainer);
stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...(chartColors.value as any) }));
stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value }));
};
// monitorChart
@ -374,10 +374,10 @@ watch(
const onCurrencyChange = (checkedValues: string[]) => {
currentMonth.value = getThisMonth(checkedValues);
monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...(chartColors.value as any) }));
monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value }));
};
const onStokeDataChange = (checkedValues: string[]) => {
stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...(chartColors.value as any) }));
stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
};
const rehandleClickOp = (val: MouseEvent) => {
console.log(val);

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

@ -146,7 +146,7 @@ const onSatisfyChange = () => {
const onMaterialChange = (value: string[]) => {
const chartColors = computed(() => store.chartColors);
lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...(chartColors.value as any) }));
lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
};
</script>
<style lang="less" scoped>

9
src/store/modules/permission.ts
View File

@ -1,8 +1,9 @@
import { defineStore } from 'pinia';
import { RouteRecordRaw } from 'vue-router';
import router, { asyncRouterList, page404 } from '@/router';
import { store } from '@/store';
function filterPermissionsRouters(routes, roles) {
function filterPermissionsRouters(routes: Array<RouteRecordRaw>, roles: Array<unknown>) {
const res = [];
routes.forEach((route) => {
const children = [];
@ -26,7 +27,7 @@ export const usePermissionStore = defineStore('permission', {
routers: [],
}),
actions: {
async initRoutes(roles) {
async initRoutes(roles: Array<unknown>) {
let accessedRouters;
// special token
@ -39,12 +40,12 @@ export const usePermissionStore = defineStore('permission', {
this.routers = accessedRouters;
// register routers
accessedRouters.concat(page404).forEach((item) => {
accessedRouters.concat(page404).forEach((item: RouteRecordRaw) => {
router.addRoute(item);
});
},
async restore() {
this.routers.concat(page404).forEach((item) => {
this.routers.concat(page404).forEach((item: RouteRecordRaw) => {
if (router.hasRoute(item.name)) router.removeRoute(item.name);
});
this.routers = [];

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

@ -10,6 +10,8 @@ const state = {
chartColors: LIGHT_CHART_COLORS,
};
export type TState = typeof state;
export const useSettingStore = defineStore('setting', {
state: () => state,
getters: {
@ -48,7 +50,7 @@ export const useSettingStore = defineStore('setting', {
changeBrandTheme(brandTheme: string) {
document.documentElement.setAttribute('theme-color', brandTheme);
},
updateConfig(payload) {
updateConfig(payload: Partial<TState>) {
for (const key in payload) {
if (payload[key] !== undefined) {
this[key] = payload[key];

6
src/store/modules/user.ts
View File

@ -17,8 +17,8 @@ export const useUserStore = defineStore('user', {
},
},
actions: {
async login(userInfo) {
const mockLogin = async (userInfo) => {
async login(userInfo: Record<string, unknown>) {
const mockLogin = async (userInfo: Record<string, unknown>) => {
// 登录请求流程
console.log(userInfo);
// const { account, password } = userInfo;
@ -53,7 +53,7 @@ export const useUserStore = defineStore('user', {
}
},
async getUserInfo() {
const mockRemoteUserInfo = async (token) => {
const mockRemoteUserInfo = async (token: string) => {
if (token === 'main_token') {
return {
name: 'td_main',