refactor(theme): buildThemeConfig 改为对象参数,algorithm 支持紧凑模式组合

This commit is contained in:
2026-06-06 22:42:18 +08:00
parent 91ae52320b
commit eccc3f62d2
2 changed files with 57 additions and 3 deletions

View File

@@ -2,9 +2,15 @@ import { theme } from "antd";
import type { EffectiveTheme } from "../hooks/use-theme-preference"; import type { EffectiveTheme } from "../hooks/use-theme-preference";
export function buildThemeConfig(effectiveTheme: EffectiveTheme) { interface BuildThemeConfigOptions {
compact?: boolean;
effectiveTheme: EffectiveTheme;
}
export function buildThemeConfig({ compact = false, effectiveTheme }: BuildThemeConfigOptions) {
const isDark = effectiveTheme === "dark"; const isDark = effectiveTheme === "dark";
const algorithm = isDark ? theme.darkAlgorithm : theme.defaultAlgorithm; const baseAlgorithm = isDark ? theme.darkAlgorithm : theme.defaultAlgorithm;
const algorithm = compact ? [baseAlgorithm, theme.compactAlgorithm] : [baseAlgorithm];
return { return {
algorithm, algorithm,
@@ -27,7 +33,7 @@ export function buildThemeConfig(effectiveTheme: EffectiveTheme) {
borderRadius: 10, borderRadius: 10,
colorLink: isDark ? "#a3a3a3" : "#0a0a0a", colorLink: isDark ? "#a3a3a3" : "#0a0a0a",
colorPrimary: isDark ? "#525252" : "#0a0a0a", colorPrimary: isDark ? "#525252" : "#0a0a0a",
controlHeight: 36, controlHeight: compact ? 28 : 36,
}, },
}; };
} }

View File

@@ -0,0 +1,48 @@
import { describe, expect, test } from "bun:test";
import { theme } from "antd";
import { buildThemeConfig } from "../../../src/web/shared/theme/theme-config";
describe("buildThemeConfig", () => {
test("compact=false 浅色:algorithm 仅 defaultAlgorithm,controlHeight=36", () => {
const config = buildThemeConfig({ compact: false, effectiveTheme: "light" });
expect(config.algorithm).toEqual([theme.defaultAlgorithm]);
expect(config.token.controlHeight).toBe(36);
});
test("compact=false 深色:algorithm 仅 darkAlgorithm,controlHeight=36", () => {
const config = buildThemeConfig({ compact: false, effectiveTheme: "dark" });
expect(config.algorithm).toEqual([theme.darkAlgorithm]);
expect(config.token.controlHeight).toBe(36);
});
test("compact=true 浅色:algorithm 包含 defaultAlgorithm + compactAlgorithm,controlHeight=28", () => {
const config = buildThemeConfig({ compact: true, effectiveTheme: "light" });
expect(config.algorithm).toEqual([theme.defaultAlgorithm, theme.compactAlgorithm]);
expect(config.token.controlHeight).toBe(28);
});
test("compact=true 深色:algorithm 包含 darkAlgorithm + compactAlgorithm,controlHeight=28", () => {
const config = buildThemeConfig({ compact: true, effectiveTheme: "dark" });
expect(config.algorithm).toEqual([theme.darkAlgorithm, theme.compactAlgorithm]);
expect(config.token.controlHeight).toBe(28);
});
test("compact 缺省时等同于 false", () => {
const config = buildThemeConfig({ effectiveTheme: "light" });
expect(config.algorithm).toEqual([theme.defaultAlgorithm]);
expect(config.token.controlHeight).toBe(36);
});
test("深色主题配色保持不变", () => {
const config = buildThemeConfig({ compact: false, effectiveTheme: "dark" });
expect(config.token.colorPrimary).toBe("#525252");
expect(config.token.colorLink).toBe("#a3a3a3");
});
test("浅色主题配色保持不变", () => {
const config = buildThemeConfig({ compact: false, effectiveTheme: "light" });
expect(config.token.colorPrimary).toBe("#0a0a0a");
expect(config.token.colorLink).toBe("#0a0a0a");
});
});