Vue Antd Admin 主题定制完全指南

Vue Antd Admin 主题定制完全指南

vue-antd-admin 🐜 Ant Design Pro's implementation with Vue 项目地址: https://gitcode.com/gh_mirrors/vu/vue-antd-admin

前言

Vue Antd Admin 作为一款优秀的中后台前端解决方案，提供了强大的主题定制能力。本文将全面介绍如何在该项目中定制主题颜色、主题模式、导航布局等视觉元素，帮助你打造独具特色的管理系统界面。

主题颜色定制

1. 主题色配置

系统内置了7种预设主题色供选择：

• 火山红 (#fa541c)
• 日暮黄 (#fadb14)
• 极光绿 (#3eaf7c)
• 明青 (#13c2c2)
• 拂晓蓝 (#1890ff)
• 酱紫 (#722ed1)
• 法式洋红 (#eb2f96)

如需自定义主题色，只需修改 src/config/config.js 文件：

module.exports = {
  theme: {
    color: '#13c2c2', // 替换为你喜欢的HEX色值
    mode: 'night'
  }
}

系统会根据主题色自动生成配套色系，并应用到所有组件中。在样式文件中，可以直接使用 @theme-color 这个LESS变量。

注意：主题色仅支持HEX格式，使用RGB或其他格式可能导致配套色系生成失败。

2. 功能色配置

系统定义了三种功能色：

| 类型 | 默认色值 | LESS变量 | |--------|----------|----------------| | 成功色 | #52c41a | @success-color | | 警告色 | #faad14 | @warning-color | | 错误色 | #f5222d | @error-color |

同样可以在配置文件中修改：

module.exports = {
  theme: {
    success: '#52c41a',
    warning: '#faad14',
    error: '#f5222d'
  }
}

3. 文本与背景色

系统为不同主题模式预设了文本和背景色：

文本色

• 亮色/暗色菜单模式：

  • 标题色：rgba(0,0,0,0.85)
  • 文本色：rgba(0,0,0,0.65)
  • 次级文本色：rgba(0,0,0,0.45)

• 黑夜模式：

  • 标题色：rgba(255,255,255,0.85)
  • 文本色：rgba(255,255,255,0.65)
  • 次级文本色：rgba(255,255,255,0.45)

背景色

• 亮色/暗色菜单模式：

  • 布局背景：#f0f2f5
  • 基础背景：#fff
  • 悬停背景：rgba(0,0,0,0.025)
  • 边框色：#f0f0f0
  • 阴影色：rgba(0,0,0,0.15)

• 黑夜模式：

  • 布局背景：#000
  • 基础背景：#141414
  • 悬停背景：rgba(255,255,255,0.025)
  • 边框色：#303030
  • 阴影色：rgba(255,255,255,0.15)

注意：文本和背景色不建议修改，否则可能导致主题切换异常。如项目不需要主题切换功能，可自行覆盖这些样式。

4. Ant Design 色系

系统集成了Ant Design完整的色板系统，包括12种色系，每种色系提供10个渐变色阶。例如：

• 拂晓蓝 (blue)
• 酱紫 (purple)
• 明青 (cyan)
• 极光绿 (green)
• 法式洋红 (magenta)
• 薄暮 (red)
• 日暮 (orange)
• 日出 (yellow)
• 火山 (volcano)
• 极客蓝 (geekblue)
• 青柠 (lime)
• 金盏花 (gold)

在样式中可直接使用对应的LESS变量，如 @blue-1 到 @blue-10。

主题模式配置

系统提供三种主题模式：

1. light - 亮色菜单模式
2. dark - 暗色菜单模式
3. night - 黑夜模式

在配置文件中设置默认模式：

module.exports = {
  theme: {
    mode: 'night' // light | dark | night
  }
}

导航布局配置

系统支持两种导航布局：

1. side - 侧边导航（默认）
2. head - 顶部导航

配置方式：

module.exports = {
  layout: 'side' // side | head
}

动画效果配置

系统集成了animate.css动画库，支持页面切换动画效果：

module.exports = {
  animate: {
    disabled: false, // 是否禁用动画
    name: 'roll',    // 动画名称
    direction: 'default' // 动画方向
  }
}

支持的动画效果可参考 src/config/default/animate.config.js 文件。

其他实用配置

色弱模式

为视觉障碍用户提供的辅助功能：

module.exports = {
  weekMode: true // 开启色弱模式
}

多页签模式

控制是否启用多页签功能：

module.exports = {
  multiPage: true // 开启多页签
}

动态修改配置

所有主题配置都已映射到Vuex的setting模块中，可以通过提交mutations实时修改：

this.$store.commit('setting/updateTheme', {
  color: '#1890ff',
  mode: 'light'
})

最佳实践

1. 优先使用LESS变量：在样式代码中使用 @theme-color、@success-color 等变量，而非固定色值
2. 保持一致性：修改主题色后，确保功能色与主题色协调
3. 考虑可访问性：确保文本与背景有足够的对比度
4. 性能优化：动画效果不宜过多，避免影响用户体验

通过本文介绍的各种配置选项，你可以轻松打造出符合品牌特色的管理系统界面。建议在实际开发前，先在测试环境中预览各种配置效果，找到最适合的组合方案。

vue-antd-admin 🐜 Ant Design Pro's implementation with Vue 项目地址: https://gitcode.com/gh_mirrors/vu/vue-antd-admin