feat: add functional colors to the theme configuration; 🌟

新增：主题配置增加功能性颜色；

src/config/default/antd.config.js

@@ -2,6 +2,9 @@
 const ANTD = {
   primary: {
     color: '#1890ff',
+    warning: '#faad14',
+    success: '#52c41a',
+    error: '#f5222d',
     light: {
       menuColors: ['#000c17', '#001529', '#002140']
     },

src/utils/colors.js

@@ -10,6 +10,20 @@ function getAntdColors(color, mode) {
   return generate(color, options)
 }
 
+// 获取功能性颜色
+function getFunctionalColors(mode) {
+  let options = mode && (mode == themeMode.NIGHT) ? {theme: 'dark'} : undefined
+  const {success, warning, error} = ANTD.primary
+  const successColors = generate(success, options)
+  const warningColors = generate(warning, options)
+  const errorColors = generate(error, options)
+  return {
+    success: [...successColors.slice(0, 3), successColors[5]],
+    warning: [...warningColors.slice(0, 3), warningColors[5]],
+    error: [...errorColors.slice(0, 3), errorColors[5]]
+  }
+}
+
 // 获取菜单色系
 function getMenuColors(color, mode) {
   if (mode == themeMode.NIGHT) {
@@ -39,7 +53,8 @@ function getThemeToggleColors(color, mode) {
   contentColors = [...new Set(contentColors)]
   // rgb 格式的主题色
   let rgbColors = [toNum3(primary).join(',')]
-  return {primary, mainColors, subColors, menuColors, contentColors, rgbColors}
+  let functionalColors = getFunctionalColors(mode)
+  return {primary, mainColors, subColors, menuColors, contentColors, rgbColors, functionalColors}
 }
 
 function toNum3(color) {
@@ -78,5 +93,6 @@ module.exports = {
   toNum3,
   getAntdColors,
   getMenuColors,
-  getThemeToggleColors
+  getThemeToggleColors,
+  getFunctionalColors
 }

src/utils/themeUtil.js

@@ -1,6 +1,6 @@
 const client = require('webpack-theme-color-replacer/client')
 const {theme} = require('../config')
-const {getMenuColors, getAntdColors, getThemeToggleColors} = require('../utils/colors')
+const {getMenuColors, getAntdColors, getThemeToggleColors, getFunctionalColors} = require('../utils/colors')
 const {ANTD} = require('../config/default')
 
 module.exports = {
@@ -13,7 +13,10 @@ module.exports = {
       ...replaceColors.subColors,
       ...replaceColors.menuColors,
       ...replaceColors.contentColors,
-      ...replaceColors.rgbColors
+      ...replaceColors.rgbColors,
+      ...replaceColors.functionalColors.success,
+      ...replaceColors.functionalColors.warning,
+      ...replaceColors.functionalColors.error,
     ]
     return themeColors
   },
@@ -25,6 +28,7 @@ module.exports = {
     let _color = color || theme.color
     const palettes = getAntdColors(_color, theme.mode)
     const menuColors = getMenuColors(_color, theme.mode)
+    const {success, warning, error} = getFunctionalColors(theme.mode)
     const primary = palettes[5]
     return {
       'primary-color': primary,
@@ -39,8 +43,17 @@ module.exports = {
       'primary-9': palettes[8],
       'primary-10': palettes[9],
       'info-color': primary,
+      'success-color': success[3],
+      'warning-color': warning[3],
+      'error-color': error[3],
       'alert-info-bg-color': palettes[0],
-      'alert-info-border-color': palettes[3],
+      'alert-info-border-color': palettes[2],
+      'alert-success-bg-color': success[0],
+      'alert-success-border-color': success[2],
+      'alert-warning-bg-color': warning[0],
+      'alert-warning-border-color': warning[2],
+      'alert-error-bg-color': error[0],
+      'alert-error-border-color': error[2],
       'processing-color': primary,
       'menu-dark-submenu-bg': menuColors[0],
       'layout-header-background': menuColors[1],