From ff24fda5ee12074e7130122ca311d0ce174cc184 Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Fri, 27 Aug 2021 12:00:09 +0800
Subject: [PATCH] =?UTF-8?q?fix(projects):=20=E4=BF=AE=E5=A4=8D=E4=B8=BB?=
=?UTF-8?q?=E9=A2=98=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.eslintrc.js | 4 +++-
src/interface/app.ts | 13 +++++++++++++
src/main.ts | 2 +-
src/settings/theme/index.ts | 10 +++++++++-
src/store/modules/app/helpers.ts | 8 ++++++++
src/store/modules/app/index.ts | 30 +++++++++++++++++++++++++-----
src/utils/common/color.ts | 8 ++++++++
src/utils/common/index.ts | 2 +-
src/utils/index.ts | 3 ++-
src/views/home/index.vue | 8 ++++++++
10 files changed, 78 insertions(+), 10 deletions(-)
create mode 100644 src/store/modules/app/helpers.ts
diff --git a/.eslintrc.js b/.eslintrc.js
index d2c7e0f6..c8c1fc79 100644
--- a/.eslintrc.js
+++ b/.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 }]
}
};
diff --git a/src/interface/app.ts b/src/interface/app.ts
index 9d7f39d6..5c0ad0a4 100644
--- a/src/interface/app.ts
+++ b/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;
}
diff --git a/src/main.ts b/src/main.ts
index 0105be84..ab02d46d 100644
--- a/src/main.ts
+++ b/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);
// 挂载路由
diff --git a/src/settings/theme/index.ts b/src/settings/theme/index.ts
index fe3383bc..5523b0c2 100644
--- a/src/settings/theme/index.ts
+++ b/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;
diff --git a/src/store/modules/app/helpers.ts b/src/store/modules/app/helpers.ts
new file mode 100644
index 00000000..20c57821
--- /dev/null
+++ b/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)
+ };
+}
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index 55457340..b91e7e91 100644
--- a/src/store/modules/app/index.ts
+++ b/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
diff --git a/src/utils/common/color.ts b/src/utils/common/color.ts
index e989d132..66493baf 100644
--- a/src/utils/common/color.ts
+++ b/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();
+}
diff --git a/src/utils/common/index.ts b/src/utils/common/index.ts
index 9e149deb..c5bd9e07 100644
--- a/src/utils/common/index.ts
+++ b/src/utils/common/index.ts
@@ -12,4 +12,4 @@ export {
isMap
} from './typeof';
-export { brightenColor } from './color';
+export { brightenColor, darkenColor } from './color';
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 35d9a867..183b6e1f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -11,5 +11,6 @@ export {
isRegExp,
isSet,
isMap,
- brightenColor
+ brightenColor,
+ darkenColor
} from './common';
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8d371eb7..dc5e1b68 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -5,6 +5,14 @@
{{ item.label }}
+
+ Default
+ Primary
+ Info
+ Success
+ Warning
+ Error
+
system