fix(projects): 修复主题配置

.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
     'import/no-unresolved': 0,
     'no-shadow': 0,
     'import/prefer-default-export': 0,
+    'no-use-before-define': 'off',
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/no-inferrable-types': 0,
     '@typescript-eslint/ban-ts-ignore': 'off',
@@ -33,6 +34,7 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/no-unused-vars': ['warn', { ignoreRestSiblings: true }]
+    '@typescript-eslint/no-unused-vars': ['warn', { ignoreRestSiblings: true }],
+    '@typescript-eslint/no-use-before-define': ['error', { classes: true, functions: false, typedefs: false }]
   }
 };

src/interface/app.ts

@@ -5,4 +5,17 @@ export interface ThemeSettings {
   themeColor: string;
   /** 主题颜色列表 */
   themeColorList: string[];
+  /** 其他颜色 */
+  otherColor: OtherColor;
+}
+
+interface OtherColor {
+  /** 信息 */
+  info: string;
+  /** 成功 */
+  success: string;
+  /** 警告 */
+  warning: string;
+  /** 错误 */
+  error: string;
 }

src/main.ts

@@ -17,7 +17,7 @@ async function setupApp() {
   /** 挂载全局状态 */
   setupStore(app);
 
-  // 优先挂载一下 naiveApp 解决路由守卫，Axios中可使用，Dialog，Message 等之类组件
+  // 优先挂载一下 naiveApp 解决路由守卫，Axios中可使用，LoadingBar，Dialog，Message 等之类组件
   naiveApp.mount('#naiveApp', true);
 
   // 挂载路由

src/settings/theme/index.ts

@@ -1,6 +1,7 @@
 import type { ThemeSettings } from '@/interface';
 
 const themeColorList = [
+  '#409EFF',
   '#2d8cf0',
   '#0960bd',
   '#0084f4',
@@ -27,7 +28,14 @@ const themeSettings: ThemeSettings = {
   /** 系统主题色 */
   themeColor: themeColorList[0],
   /** 系统内置主题色列表 */
-  themeColorList
+  themeColorList,
+  /** 其他颜色 */
+  otherColor: {
+    info: '#2080f0',
+    success: '#67C23A',
+    warning: '#E6A23C',
+    error: '#F56C6C'
+  }
 };
 
 export default themeSettings;

src/store/modules/app/helpers.ts

@@ -0,0 +1,8 @@
+import { brightenColor, darkenColor } from '@/utils';
+
+export function getHoverAndPressedColor(color: string) {
+  return {
+    hover: brightenColor(color),
+    pressed: darkenColor(color)
+  };
+}

src/store/modules/app/index.ts

@@ -3,7 +3,7 @@ import type { GlobalThemeOverrides } from 'naive-ui';
 import { store } from '../../index';
 import { themeSettings } from '@/settings';
 import type { ThemeSettings } from '@/interface';
-import { brightenColor } from '@/utils';
+import { getHoverAndPressedColor } from './helpers';
 
 interface AppState {
   /** 主题配置 */
@@ -21,16 +21,36 @@ const appStore = defineStore({
   getters: {
     /** naive UI主题配置 */
     themeOverrids(): GlobalThemeOverrides {
-      const primaryColor = this.themeSettings.themeColor;
-      const primaryColorHover = brightenColor(primaryColor);
-      const primaryColorPressed = primaryColorHover;
+      const {
+        themeColor: primaryColor,
+        otherColor: { info: infoColor, success: successColor, warning: warningColor, error: errorColor }
+      } = this.themeSettings;
+
+      const { hover: primaryColorHover, pressed: primaryColorPressed } = getHoverAndPressedColor(primaryColor);
+      const { hover: infoColorHover, pressed: infoColorPressed } = getHoverAndPressedColor(infoColor);
+      const { hover: successColorHover, pressed: successColorPressed } = getHoverAndPressedColor(successColor);
+      const { hover: warningColorHover, pressed: warningColorPressed } = getHoverAndPressedColor(warningColor);
+      const { hover: errorColorHover, pressed: errorColorPressed } = getHoverAndPressedColor(errorColor);
+
       const colorLoading = primaryColor;
 
       return {
         common: {
           primaryColor,
           primaryColorHover,
-          primaryColorPressed
+          primaryColorPressed,
+          infoColor,
+          infoColorHover,
+          infoColorPressed,
+          successColor,
+          successColorHover,
+          successColorPressed,
+          warningColor,
+          warningColorHover,
+          warningColorPressed,
+          errorColor,
+          errorColorHover,
+          errorColorPressed
         },
         LoadingBar: {
           colorLoading

src/utils/common/color.ts

@@ -7,3 +7,11 @@ import chroma from 'chroma-js';
 export function brightenColor(color: string) {
   return chroma(color).brighten(0.5).hex();
 }
+
+/**
+ * 更暗的颜色
+ * @param color
+ */
+export function darkenColor(color: string) {
+  return chroma(color).darken(0.5).hex();
+}

src/utils/common/index.ts

@@ -12,4 +12,4 @@ export {
   isMap
 } from './typeof';
 
-export { brightenColor } from './color';
+export { brightenColor, darkenColor } from './color';

src/utils/index.ts

@@ -11,5 +11,6 @@ export {
   isRegExp,
   isSet,
   isMap,
-  brightenColor
+  brightenColor,
+  darkenColor
 } from './common';

src/views/home/index.vue

@@ -5,6 +5,14 @@
         {{ item.label }}
       </n-button>
     </n-space>
+    <n-space>
+      <n-button>Default</n-button>
+      <n-button type="primary">Primary</n-button>
+      <n-button type="info">Info</n-button>
+      <n-button type="success">Success</n-button>
+      <n-button type="warning">Warning</n-button>
+      <n-button type="error">Error</n-button>
+    </n-space>
     <router-link to="/system">system</router-link>
   </div>
 </template>