tt/youlai-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 修复小程序显示问题

Browse Source
This commit is contained in:
ray
2025-04-28 08:08:47 +08:00
parent 7a04eea075
commit 93c5fe873e
12 changed files with 289 additions and 705 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/store/modules/theme.ts
View File

@@ -1,5 +1,7 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { applyThemeToMiniProgram } from "@/utils/theme";
import { getLighterColor, getDarkerColor } from "@/utils/colorUtils";
// 从缓存获取主题色
const getThemeColor = (): string => {
@@ -21,52 +23,20 @@ export const useThemeStore = defineStore("theme", () => {
primaryColor.value = color;
setThemeColorCache(color);
// 设置CSS变量，方便全局使用
document.documentElement.style.setProperty("--primary-color", color);
// 检测运行环境，区分处理
if (typeof document !== "undefined") {
// H5环境
document.documentElement.style.setProperty("--primary-color", color);
// 计算衍生色
const lighterColor = getLighterColor(color, 0.8);
const darkerColor = getDarkerColor(color, 0.8);
document.documentElement.style.setProperty("--primary-color-light", lighterColor);
document.documentElement.style.setProperty("--primary-color-dark", darkerColor);
};
// 获取浅色版本主题色
const getLighterColor = (hexColor: string, factor: number): string => {
// 去掉#前缀
const hex = hexColor.replace("#", "");
// 解析RGB值
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);
// 调亮颜色
r = Math.min(255, Math.floor(r + (255 - r) * factor));
g = Math.min(255, Math.floor(g + (255 - g) * factor));
b = Math.min(255, Math.floor(b + (255 - b) * factor));
// 转回16进制
return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
};
// 获取深色版本主题色
const getDarkerColor = (hexColor: string, factor: number): string => {
// 去掉#前缀
const hex = hexColor.replace("#", "");
// 解析RGB值
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);
// 调暗颜色
r = Math.max(0, Math.floor(r * factor));
g = Math.max(0, Math.floor(g * factor));
b = Math.max(0, Math.floor(b * factor));
// 转回16进制
return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
// 计算衍生色
const lighterColor = getLighterColor(color, 0.8);
const darkerColor = getDarkerColor(color, 0.8);
document.documentElement.style.setProperty("--primary-color-light", lighterColor);
document.documentElement.style.setProperty("--primary-color-dark", darkerColor);
} else {
// 小程序环境
applyThemeToMiniProgram(color);
}
};
// 初始化，应用主题色