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";
|
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,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
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