chore: complete type of color

src/config/color.ts

@@ -1,7 +1,7 @@
 import hexToHsl from 'hex-to-hsl';
 /* eslint-disable indent */
-export type ColorToken = Record<string, string>;
+export type TColorToken = Record<string, string>;
-export type ColorSeries = Record<string, ColorToken>;
+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']`;
 

src/layouts/setting.vue

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

src/pages/dashboard/base/index.ts

@@ -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([]);
 

src/pages/dashboard/base/index.vue

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

src/pages/dashboard/detail/index.vue

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

src/store/modules/permission.ts

@@ -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 = [];

src/store/modules/setting.ts

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

src/store/modules/user.ts

@@ -17,8 +17,8 @@ export const useUserStore = defineStore('user', {
     },
   },
   actions: {
-    async login(userInfo) {
+    async login(userInfo: Record<string, unknown>) {
-      const mockLogin = async (userInfo) => {
+      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',