jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(projects): refactor @sa/color-palette => @sa/color & perf @sa/utils

Browse Source
This commit is contained in:
Soybean
2024-04-26 01:42:35 +08:00
parent 1cb3816e48
commit 34999971fd
31 changed files with 269 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/store/modules/theme/index.ts
View File

@ -2,7 +2,7 @@ import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
import type { Ref } from 'vue';
import { defineStore } from 'pinia';
import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
import { getColorPalette } from '@sa/color-palette';
import { getPaletteColorByNumber } from '@sa/color';
import { SetupStoreId } from '@/enum';
import { localStg } from '@/utils/storage';
import {
@ -99,13 +99,18 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
* @param color Theme color
*/
function updateThemeColors(key: App.Theme.ThemeColorKey, color: string) {
// get a color palette by provided color and color name, and use the suitable color
const { main } = getColorPalette(color);
let colorValue = color;
if (settings.value.recommendColor) {
// get a color palette by provided color and color name, and use the suitable color
colorValue = getPaletteColorByNumber(color, 500, true);
}
if (key === 'primary') {
settings.value.themeColor = main.hex;
settings.value.themeColor = colorValue;
} else {
settings.value.otherColor[key] = main.hex;
settings.value.otherColor[key] = colorValue;
}
}

21
src/store/modules/theme/shared.ts
View File

@ -1,6 +1,5 @@
import type { GlobalThemeOverrides } from 'naive-ui';
import { getColorByPaletteNumber, getColorPalette } from '@sa/color-palette';
import { addColorAlpha, getRgbOfColor } from '@sa/utils';
import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
import { overrideThemeSettings, themeSettings } from '@/theme/settings';
import { themeVars } from '@/theme/vars';
import { toggleHtmlClass } from '@/utils/common';
@ -77,17 +76,17 @@ export function createThemeToken(colors: App.Theme.ThemeColor) {
*
* @param colors Theme colors
*/
function createThemePaletteColors(colors: App.Theme.ThemeColor) {
function createThemePaletteColors(colors: App.Theme.ThemeColor, recommended = false) {
const colorKeys = Object.keys(colors) as App.Theme.ThemeColorKey[];
const colorPaletteVar = {} as App.Theme.ThemePaletteColor;
colorKeys.forEach(key => {
const { palettes, main } = getColorPalette(colors[key]);
const colorMap = getColorPalette(colors[key], recommended);
colorPaletteVar[key] = main.hex;
colorPaletteVar[key] = colorMap.get(500)!;
palettes.forEach(item => {
colorPaletteVar[`${key}-${item.number}`] = item.hex;
colorMap.forEach((hex, number) => {
colorPaletteVar[`${key}-${number}`] = hex;
});
});
@ -117,7 +116,7 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {
if (key === 'colors') {
cssVarsKey = removeRgbPrefix(cssVarsKey);
const { r, g, b } = getRgbOfColor(cssValue);
const { r, g, b } = getRgb(cssValue);
cssValue = `${r} ${g} ${b}`;
}
@ -207,12 +206,12 @@ interface NaiveColorAction {
*
* @param colors Theme colors
*/
function getNaiveThemeColors(colors: App.Theme.ThemeColor) {
function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false) {
const colorActions: NaiveColorAction[] = [
{ scene: '', handler: color => color },
{ scene: 'Suppl', handler: color => color },
{ scene: 'Hover', handler: color => getColorByPaletteNumber(color, 500) },
{ scene: 'Pressed', handler: color => getColorByPaletteNumber(color, 700) },
{ scene: 'Hover', handler: color => getPaletteColorByNumber(color, 500, recommended) },
{ scene: 'Pressed', handler: color => getPaletteColorByNumber(color, 700, recommended) },
{ scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
];