pqc
/
live-code-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化体验

This commit is contained in:
pqcqaq 2024-07-18 14:20:25 +08:00
parent 439d21e3e6
commit ce89729bac
2 changed files with 20 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/utils/function/index.ts Normal file
View File

@ -0,0 +1,7 @@
export const useDebounce = (fn: Function, delay: number) => {
let timeout: any;
return (...args: any[]) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
};

116
src/utils/theme/index.ts
View File

@ -7,6 +7,7 @@ import {
UpdateThemeColor, UpdateThemeColor,
} from "../../../typings"; } from "../../../typings";
import { themeColorSchema } from "../../data/colors"; import { themeColorSchema } from "../../data/colors";
import { useDebounce } from "../function";
export function updateThemeColor({ export function updateThemeColor({
themeClass, themeClass,
@ -224,101 +225,6 @@ export const setTailwindExtendProps = (colors: Record<string, string>) => {
theme: { theme: {
extend: { extend: {
colors: { colors: {
// primary: {
// 1: "var(--primary-1)",
// 2: "var(--primary-2)",
// 3: "var(--primary-3)",
// 4: "var(--primary-4)",
// 5: "var(--primary-5)",
// 6: "var(--primary-6)",
// 7: "var(--primary-7)",
// },
// success: {
// 1: "var(--success-1)",
// 2: "var(--success-2)",
// 3: "var(--success-3)",
// 4: "var(--success-4)",
// 5: "var(--success-5)",
// 6: "var(--success-6)",
// 7: "var(--success-7)",
// },
// warning: {
// 1: "var(--warning-1)",
// 2: "var(--warning-2)",
// 3: "var(--warning-3)",
// 4: "var(--warning-4)",
// 5: "var(--warning-5)",
// 6: "var(--warning-6)",
// 7: "var(--warning-7)",
// },
// danger: {
// 1: "var(--danger-1)",
// 2: "var(--danger-2)",
// 3: "var(--danger-3)",
// 4: "var(--danger-4)",
// 5: "var(--danger-5)",
// 6: "var(--danger-6)",
// 7: "var(--danger-7)",
// },
// link: {
// 1: "var(--link-1)",
// 2: "var(--link-2)",
// 3: "var(--link-3)",
// 4: "var(--link-4)",
// 5: "var(--link-5)",
// 6: "var(--link-6)",
// 7: "var(--link-7)",
// },
// background: {
// 1: "var(--color-bg-1)",
// 2: "var(--color-bg-2)",
// 3: "var(--color-bg-3)",
// 4: "var(--color-bg-4)",
// 5: "var(--color-bg-5)",
// white: "var(--color-bg-white)",
// },
// text: {
// 1: "var(--color-text-1)",
// 2: "var(--color-text-2)",
// 3: "var(--color-text-3)",
// 4: "var(--color-text-4)",
// },
// border: {
// 1: "var(--color-border-1)",
// 2: "var(--color-border-2)",
// 3: "var(--color-border-3)",
// 4: "var(--color-border-4)",
// },
// fill: {
// 1: "var(--color-fill-1)",
// 2: "var(--color-fill-2)",
// 3: "var(--color-fill-3)",
// 4: "var(--color-fill-4)",
// },
// data: {
// 1: "var(--data-1)",
// 2: "var(--data-2)",
// 3: "var(--data-3)",
// 4: "var(--data-4)",
// 5: "var(--data-5)",
// 6: "var(--data-6)",
// 7: "var(--data-7)",
// 8: "var(--data-8)",
// 9: "var(--data-9)",
// 10: "var(--data-10)",
// 11: "var(--data-11)",
// 12: "var(--data-12)",
// 13: "var(--data-13)",
// 14: "var(--data-14)",
// 15: "var(--data-15)",
// 16: "var(--data-16)",
// 17: "var(--data-17)",
// 18: "var(--data-18)",
// 19: "var(--data-19)",
// 20: "var(--data-20)",
// },
// shadow: "--color-shadow",
// TODO: 这里使用传入的颜色
...colors, ...colors,
}, },
}, },
@ -333,17 +239,21 @@ const themeMap = {
} as const; } as const;
export const createLightTheme = (themeVariables: ThemeVariables) => { export const createLightTheme = (themeVariables: ThemeVariables) => {
if (themeLightId) { return useDebounce(() => {
document.getElementById(themeLightId)?.remove(); if (themeLightId) {
} document.getElementById(themeLightId)?.remove();
themeLightId = createTheme(themeMap.light, themeVariables); }
themeLightId = createTheme(themeMap.light, themeVariables);
}, 50)();
}; };
export const createDarkTheme = (themeVariables: ThemeVariables) => { export const createDarkTheme = (themeVariables: ThemeVariables) => {
if (themeDarkId) { return useDebounce(() => {
document.getElementById(themeDarkId)?.remove(); if (themeDarkId) {
} document.getElementById(themeDarkId)?.remove();
themeDarkId = createTheme(themeMap.dark, themeVariables); }
themeDarkId = createTheme(themeMap.dark, themeVariables);
}, 50)();
}; };
export const getColorAsync = async () => { export const getColorAsync = async () => {