主题配置#

XinAdmin 前端提供了灵活的主题配置系统，支持多种预设主题和自定义主题设置。主题系统基于 Ant Design 的主题定制能力，并结合 Zustand 状态管理实现了动态主题切换功能。

预设主题#

系统提供了多种预设主题，满足不同场景的视觉需求：

• 默认主题 (light): 传统的亮色主题，适用于日常办公环境
• 暗黑主题 (dark): 深色主题，减少视觉疲劳，适合夜间使用
• 粉色主题 (pink): 温馨的粉色系主题，适合女性用户或柔和场景
• 绿色主题 (green): 清新的绿色主题，适合知识协作类应用

每个预设主题都包含完整的色彩搭配方案，涵盖品牌色、文字色、背景色等各个方面的配色。

主题配置项#

主题配置项定义了系统的外观和行为，主要包括以下几个方面：

基础色彩配置#

• colorPrimary: 品牌主色调，用于按钮、链接等重要元素
• colorError: 错误状态颜色
• colorSuccess: 成功状态颜色
• colorWarning: 警告状态颜色
• colorText: 基础文字颜色
• colorBg: 基础背景颜色
• colorBorder: 边框颜色

布局尺寸配置#

• borderRadius: 基础组件的圆角大小
• controlHeight: 按钮和输入框等基础控件的高度
• headerHeight: 头部高度
• headerPadding: 头部两侧内边距
• siderWeight: 侧边栏宽度
• bodyPadding: 内容区域内边距

行为配置#

• motion: 是否开启动画效果
• fixedFooter: 是否固定页脚
• layoutBorder: 是否开启布局边框
• algorithm: 主题算法（默认算法、暗黑算法等）

主题算法#

XinAdmin 支持多种主题算法，可以改变整体视觉效果：

• defaultAlgorithm: 默认算法，提供标准的明亮主题
• darkAlgorithm: 暗黑算法，提供深色主题
• defaultCompactAlgorithm: 默认+紧凑算法，提供明亮紧凑主题
• darkCompactAlgorithm: 暗黑+紧凑算法，提供深色紧凑主题

主题算法通过 Ant Design 的 theme 配置应用到整个应用，确保所有组件保持一致的视觉风格。

主题切换实现#

主题切换通过 Zustand 状态管理实现，具体流程如下：

// 主题配置状态管理
const setThemeConfig = useGlobalStore(state => state.setThemeConfig);
const themeConfig = useGlobalStore(state => state.themeConfig);

// 使用防抖函数优化性能
const changeSetting = debounce((key: string, value: any) => {
  transitionTheme(() => {
    setThemeConfig({...themeConfig, [key]: value});
  });
}, 300, {leading: true, trailing: false});

系统还提供了两种主题切换动画效果：

• 平滑过渡: 使用 transitionTheme 实现全局主题平滑过渡
• 圆形扩散: 使用 transitionThemeWithCircle 实现从点击位置向外扩散的动画效果

自定义主题#

用户可以通过设置抽屉来自定义主题，也可以直接修改主题配置文件。自定义主题时，建议继承预设主题配置并仅修改需要变更的部分：

// 自定义主题示例
const customTheme: ThemeProps = {
  ...defaultColorTheme,  // 继承默认主题
  colorPrimary: "#FF6B6B",  // 自定义品牌色
  borderRadius: 12,         // 自定义圆角
  algorithm: "darkAlgorithm" // 使用暗黑算法
};

响应式主题#

主题系统还支持响应式特性，能够根据屏幕尺寸自动调整布局和样式。系统提供了四种布局模式：

• side: 侧边栏布局，适用于中大型应用
• top: 顶部导航布局，适用于简单导航结构
• mix: 混合布局，结合侧边栏和顶部导航
• columns: 分栏布局，适用于复杂的多级导航

通过合理配置这些主题选项，开发者可以根据具体业务需求打造独特的用户体验。