diff --git a/mock/api/route.ts b/mock/api/route.ts
index 97650dd3c..925653f63 100644
--- a/mock/api/route.ts
+++ b/mock/api/route.ts
@@ -12,8 +12,7 @@ const routes: AuthRoute.Route[] = [
component: 'self',
meta: {
title: '分析页',
- requiresAuth: true,
- keepAlive: true
+ requiresAuth: true
}
},
{
@@ -98,7 +97,6 @@ const routes: AuthRoute.Route[] = [
title: '关于',
requiresAuth: true,
singleLayout: 'basic',
- keepAlive: true,
permissions: ['super', 'admin', 'test'],
icon: 'fluent:book-information-24-regular',
order: 7
diff --git a/public/resource/loading.js b/public/resource/loading.js
index 6530ba415..156f9dab4 100644
--- a/public/resource/loading.js
+++ b/public/resource/loading.js
@@ -34,8 +34,8 @@ function initSvgLogo(id) {
function addThemeColorCssVars() {
const key = '__THEME_COLOR__';
- const themeColor = '#1890ff';
- const cssVars = window.localStorage.getItem(key) || `--primary-color: ${themeColor}`;
+ const themeColor = window.localStorage.getItem(key) || '#1890ff';
+ const cssVars = `--primary-color: ${themeColor}`;
document.documentElement.style.cssText = cssVars;
}
diff --git a/src/interface/theme.ts b/src/interface/theme.ts
index dc319a42f..2a40aa04e 100644
--- a/src/interface/theme.ts
+++ b/src/interface/theme.ts
@@ -13,6 +13,8 @@ export interface ThemeSetting {
themeColorList: string[];
/** 其他颜色 */
otherColor: ThemeOtherColor;
+ /** 是否自定义info的颜色(默认取比主题色深一级的颜色) */
+ isCustomizeInfoColor: boolean;
/** 固定头部和多页签 */
fixedHeaderAndTab: boolean;
/** 显示重载按钮 */
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index bb851459c..49075b957 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -1,6 +1,7 @@
- 更多颜色
+
+
+ 更多颜色
+
diff --git a/src/package/SoybeanLayout/src/components/LayoutContent.vue b/src/package/SoybeanLayout/src/components/LayoutContent.vue
index 711a038a0..bd8978ef9 100644
--- a/src/package/SoybeanLayout/src/components/LayoutContent.vue
+++ b/src/package/SoybeanLayout/src/components/LayoutContent.vue
@@ -36,6 +36,7 @@ const style = computed(() => {
diff --git a/src/package/SoybeanLayout/src/index.vue b/src/package/SoybeanLayout/src/index.vue
index dec0c3a7b..76efc6dc6 100644
--- a/src/package/SoybeanLayout/src/index.vue
+++ b/src/package/SoybeanLayout/src/index.vue
@@ -17,6 +17,7 @@
v-bind="commonProps"
:fixed="fixedHeaderAndTab"
:z-index="tabZIndex"
+ :min-width="minWidth"
:top="headerHeight"
:height="tabHeight"
:padding-left="siderWidth"
@@ -46,6 +47,7 @@
v-bind="commonProps"
:fixed="fixedFooter"
:z-index="footerZIndex"
+ :min-width="minWidth"
:height="footerHeight"
:padding-left="siderWidth"
:style="footerTransform"
diff --git a/src/settings/color.ts b/src/settings/color.ts
index 256e6dcf9..b14fbb7be 100644
--- a/src/settings/color.ts
+++ b/src/settings/color.ts
@@ -11,3 +11,10 @@ interface TraditionColor {
/** 中国传统颜色 */
export const traditionColors = colorJson as TraditionColor[];
+
+export function isInTraditionColors(color: string) {
+ return traditionColors.some(item => {
+ const flag = item.data.some(v => v.color === color);
+ return flag;
+ });
+}
diff --git a/src/settings/theme.ts b/src/settings/theme.ts
index b47b04373..a10583a84 100644
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -3,28 +3,29 @@ import type { ThemeSetting } from '@/interface';
const themeColorList = [
'#1890ff',
- '#007AFF',
- '#2d8cf0',
'#409EFF',
- '#536dfe',
+ '#2d8cf0',
+ '#007AFF',
+ '#5ac8fa',
'#5856D6',
+ '#536dfe',
+ '#9c27b0',
+ '#AF52DE',
'#0096c7',
'#00C1D4',
- '#009688',
- '#5AC8FA',
'#34C759',
- '#71EFA3',
+ '#43a047',
+ '#7cb342',
+ '#c0ca33',
'#78DEC7',
- '#FC5404',
- '#ee4f12',
- '#FF9500',
- '#fadb14',
- '#FFCC00',
- '#FF3B30',
- '#FF2D55',
- '#ff5c93',
- '#9c27b0',
- '#AF52DE'
+ '#e53935',
+ '#d81b60',
+ '#f4511e',
+ '#fb8c00',
+ '#ffb300',
+ '#fdd835',
+ '#6d4c41',
+ '#546e7a'
];
const defaultThemeSetting: ThemeSetting = {
@@ -47,6 +48,7 @@ const defaultThemeSetting: ThemeSetting = {
warning: '#faad14',
error: '#f5222d'
},
+ isCustomizeInfoColor: false,
fixedHeaderAndTab: true,
showReload: true,
header: {
diff --git a/src/store/modules/theme/helpers.ts b/src/store/modules/theme/helpers.ts
index 41180ec65..f0549d79c 100644
--- a/src/store/modules/theme/helpers.ts
+++ b/src/store/modules/theme/helpers.ts
@@ -1,6 +1,16 @@
import type { GlobalThemeOverrides } from 'naive-ui';
-import { kebabCase } from 'lodash-es';
-import { getColorPalette, addColorAlpha } from '@/utils';
+import { cloneDeep, kebabCase } from 'lodash-es';
+import { themeSetting } from '@/settings';
+import { getThemeColor, getColorPalette, addColorAlpha } from '@/utils';
+
+/** 获取主题配置 */
+export function getThemeSettings() {
+ const themeColor = getThemeColor() || themeSetting.themeColor;
+ const info = themeSetting.isCustomizeInfoColor ? themeSetting.otherColor.info : getColorPalette(themeColor, 7);
+ const otherColor = { ...themeSetting.otherColor, info };
+ const setting = cloneDeep({ ...themeSetting, themeColor, otherColor });
+ return setting;
+}
type ColorType = 'primary' | 'info' | 'success' | 'warning' | 'error';
type ColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active';
@@ -38,7 +48,10 @@ function getThemeColors(colors: [ColorType, string][]) {
/** 获取naive的主题颜色 */
export function getNaiveThemeOverrides(colors: Record): GlobalThemeOverrides {
- const { primary, info, success, warning, error } = colors;
+ const { primary, success, warning, error } = colors;
+
+ const info = themeSetting.isCustomizeInfoColor ? colors.info : getColorPalette(primary, 7);
+
const themeColors = getThemeColors([
['primary', primary],
['info', info],
@@ -70,7 +83,7 @@ export function addThemeCssVarsToHtml(themeVars: ThemeVars) {
style.push(`--${kebabCase(key)}: ${themeVars[key]}`);
});
const styleStr = style.join(';');
- document.documentElement.style.cssText = styleStr;
+ document.documentElement.style.cssText += styleStr;
}
/** windicss 暗黑模式 */
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 4828095f7..085dea05f 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -1,7 +1,5 @@
import { defineStore } from 'pinia';
import { darkTheme } from 'naive-ui';
-import { cloneDeep } from 'lodash-es';
-import { themeSetting } from '@/settings';
import type {
ThemeSetting,
ThemeLayoutMode,
@@ -9,12 +7,12 @@ import type {
ThemeHorizontalMenuPosition,
ThemeAnimateMode
} from '@/interface';
-import { getNaiveThemeOverrides, addThemeCssVarsToHtml } from './helpers';
+import { getThemeSettings, getNaiveThemeOverrides, addThemeCssVarsToHtml } from './helpers';
type ThemeState = ThemeSetting;
export const useThemeStore = defineStore('theme-store', {
- state: (): ThemeState => cloneDeep(themeSetting),
+ state: (): ThemeState => getThemeSettings(),
getters: {
/** naiveUI的主题配置 */
naiveThemeOverrides(state) {
diff --git a/src/store/subscribe/theme.ts b/src/store/subscribe/theme.ts
index 3b0afeac8..c802cbb6a 100644
--- a/src/store/subscribe/theme.ts
+++ b/src/store/subscribe/theme.ts
@@ -1,7 +1,7 @@
import { watch, onUnmounted } from 'vue';
import { useOsTheme } from 'naive-ui';
import { useElementSize } from '@vueuse/core';
-import { EnumStorageKey } from '@/enum';
+import { setThemeColor } from '@/utils';
import { useThemeStore } from '../modules';
/** 订阅theme store */
@@ -14,7 +14,7 @@ export default function subscribeThemeStore() {
const stopThemeColor = watch(
() => theme.themeColor,
newValue => {
- window.localStorage.setItem(EnumStorageKey['theme-color'], `--primary-color: ${newValue};`);
+ setThemeColor(newValue);
},
{ immediate: true }
);
diff --git a/src/utils/common/color.ts b/src/utils/common/color.ts
index ca3b003b4..a249367bf 100644
--- a/src/utils/common/color.ts
+++ b/src/utils/common/color.ts
@@ -136,3 +136,11 @@ export function addColorAlpha(color: string, alpha: number) {
export function mixColor(firstColor: string, secondColor: string, ratio: number) {
return colord(firstColor).mix(secondColor, ratio).toHex();
}
+
+/**
+ * 是否是白颜色
+ * @param color - 颜色
+ */
+export function isWhiteColor(color: string) {
+ return colord(color).isEqual('#ffffff');
+}
diff --git a/src/utils/common/index.ts b/src/utils/common/index.ts
index 144642a2f..5050e9062 100644
--- a/src/utils/common/index.ts
+++ b/src/utils/common/index.ts
@@ -5,3 +5,4 @@ export * from './number';
export * from './object';
export * from './icon';
export * from './design-pattern';
+export * from './theme';
diff --git a/src/utils/common/theme.ts b/src/utils/common/theme.ts
new file mode 100644
index 000000000..fe1bd20c2
--- /dev/null
+++ b/src/utils/common/theme.ts
@@ -0,0 +1,16 @@
+import { EnumStorageKey } from '@/enum';
+
+/**
+ * 缓存主题颜色
+ * @param color
+ */
+export function setThemeColor(color: string) {
+ window.localStorage.setItem(EnumStorageKey['theme-color'], color);
+}
+
+/**
+ * 获取缓存的主题颜色
+ */
+export function getThemeColor() {
+ return window.localStorage.getItem(EnumStorageKey['theme-color']);
+}