From 12a89593d13fa38810c7af54c7ea8cb72ae65a10 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期二, 14 一月 2025 14:56:45 +0800
Subject: [PATCH] 使用 url 参数传 session
---
src/utils/theme.ts | 87 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 86 insertions(+), 1 deletions(-)
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 398053a..bf1b4ea 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,5 +1,5 @@
import { ElMessage } from 'element-plus';
-
+import { genMixColor } from './gen-color'
/**
* 棰滆壊杞崲鍑芥暟
* @method hexToRgb hex 棰滆壊杞� rgb 棰滆壊
@@ -61,3 +61,88 @@
getLightColor,
};
}
+// 涓婚閰嶇疆绫诲瀷瀹氫箟
+export type Theme = {
+ // 杩欓噷鐣欏嚭鍙嫇灞曠┖闂达紙濡俠anner鍥撅紝鑳屾櫙鍥撅紝鏂囨锛屾爣棰樼瓑锛夛紝灏嗕富棰樿壊宓屽鍦ㄥ璞″唴
+ colors: {
+ primary?: string;
+ info?: string;
+ warning?: string;
+ success?: string;
+ danger?: string;
+ };
+};
+
+// 榛樿涓婚閰嶇疆
+export const defaultThemeConfig: Theme = {
+ colors: {
+ primary: '#FF6A00',
+ info: '#eeeeee',
+ warning: '#fbbd23',
+ danger: '#f87272',
+ success: '#36d399',
+ },
+};
+
+// 鏈湴缂撳瓨 key
+const THEME_KEY = 'theme';
+
+// 鑾峰彇鏈湴缂撳瓨涓婚
+export const getTheme = (): Theme => {
+ const theme = localStorage.getItem(THEME_KEY);
+ return theme ? JSON.parse(theme) : defaultThemeConfig;
+};
+
+// 璁剧疆涓婚
+export const setTheme = (data = defaultThemeConfig) => {
+ const oldTheme = getTheme();
+
+ // 灏嗕紶鍏ラ厤缃笌鏃х殑涓婚鍚堝苟锛屼互濉ˉ缂虹渷鐨勫��
+ data = Object.assign({}, oldTheme, data);
+
+ // 灏嗙紦瀛樺埌娴忚鍣�
+ localStorage.setItem(THEME_KEY, JSON.stringify(data));
+
+ // TODO:灏嗕富棰樻洿鏂板埌css鍙橀噺涓紝浣夸箣鐢熸晥
+ updateThemeColorVar(data);
+};
+
+
+// ...
+
+// 璁剧疆css鍙橀噺
+function setStyleProperty(propName: string, value: string) {
+ document.documentElement.style.setProperty(propName, value);
+}
+
+// 鏇存柊涓婚鑹插埌css鍙橀噺
+function updateThemeColorVar({ colors }: Theme) {
+ // 閬嶅巻褰撳墠涓婚鑹诧紝鐢熸垚娣峰悎鑹诧紝骞舵洿鏂板埌css鍙橀噺锛坱ailwind + elementPlus锛�
+ for (const brand in colors) {
+ updateBrandExtendColorsVar(
+ colors[brand as keyof Theme['colors']] as string,
+ brand
+ );
+ }
+
+ function updateBrandExtendColorsVar(color: string, name: string) {
+ // TODO:鐢熸垚娣峰悎鑹�
+ const { DEFAULT, dark, light } = genMixColor(color);
+ // 姣忕涓婚鑹茬敱娴呭埌娣卞垎涓轰簲涓樁姊互渚涘紑鍙戣�呬娇鐢ㄣ��
+ setStyleProperty(`--${name}-lighter-color`, light[5]);
+ setStyleProperty(`--${name}-light-color`, light[3]);
+ setStyleProperty(`--${name}-color`, DEFAULT);
+ setStyleProperty(`--${name}-deep-color`, dark[2]);
+ setStyleProperty(`--${name}-deeper-color`, dark[4]);
+
+ // elementPlus涓婚鑹叉洿鏂�
+ setStyleProperty(`--el-color-${name}`, DEFAULT);
+ setStyleProperty(`--el-color-${name}-dark-2`, dark[2]);
+ setStyleProperty(`--el-color-${name}-light-3`, light[3]);
+ setStyleProperty(`--el-color-${name}-light-5`, light[5]);
+ setStyleProperty(`--el-color-${name}-light-7`, light[7]);
+ setStyleProperty(`--el-color-${name}-light-8`, light[8]);
+ setStyleProperty(`--el-color-${name}-light-9`, light[9]);
+ }
+}
+
--
Gitblit v1.9.3