refactor(theme): buildThemeConfig 改为对象参数,algorithm 支持紧凑模式组合
This commit is contained in:
@@ -2,9 +2,15 @@ import { theme } from "antd";
|
||||
|
||||
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 algorithm = isDark ? theme.darkAlgorithm : theme.defaultAlgorithm;
|
||||
const baseAlgorithm = isDark ? theme.darkAlgorithm : theme.defaultAlgorithm;
|
||||
const algorithm = compact ? [baseAlgorithm, theme.compactAlgorithm] : [baseAlgorithm];
|
||||
|
||||
return {
|
||||
algorithm,
|
||||
@@ -27,7 +33,7 @@ export function buildThemeConfig(effectiveTheme: EffectiveTheme) {
|
||||
borderRadius: 10,
|
||||
colorLink: isDark ? "#a3a3a3" : "#0a0a0a",
|
||||
colorPrimary: isDark ? "#525252" : "#0a0a0a",
|
||||
controlHeight: 36,
|
||||
controlHeight: compact ? 28 : 36,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
48
tests/web/shared/theme-config.test.ts
Normal file
48
tests/web/shared/theme-config.test.ts
Normal 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");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user