zzh
b5edbb8447
新增石米等淡色背景预设并设为默认，修复页面配置抽屉偶发不弹出问题，移除登录欢迎卡；同步 IDE 官网导航与背景样式，并扩展管理端工作台统计展示。 Co-authored-by: Cursor <cursoragent@cursor.com>
81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
/**
|
||
* 页面背景色：OMS 与官网首页共用 localStorage
|
||
*/
|
||
|
||
export const PAGE_BACKGROUND_STORAGE_KEY = 'app-page-background-color';
|
||
|
||
export const DEFAULT_PAGE_BACKGROUND = '#f5f4f1';
|
||
|
||
export const PAGE_BACKGROUND_PRESETS = [
|
||
{ color: '#f0f3f4', labelKey: 'settings.pageBg.default' },
|
||
{ color: '#f6f1e7', labelKey: 'settings.pageBg.ningzhi' },
|
||
{ color: '#f4f6f9', labelKey: 'settings.pageBg.mist' },
|
||
{ color: '#f5f4f1', labelKey: 'settings.pageBg.stone' },
|
||
{ color: '#f1f4f2', labelKey: 'settings.pageBg.sage' },
|
||
{ color: '#f5f2f7', labelKey: 'settings.pageBg.lilac' },
|
||
{ color: '#f0f2f6', labelKey: 'settings.pageBg.slate' },
|
||
{ color: '#faf9f7', labelKey: 'settings.pageBg.pearl' },
|
||
{ color: '#ffffff', labelKey: 'settings.pageBg.white' },
|
||
] as const;
|
||
|
||
function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
|
||
const m = hex.replace(/^#/, '').match(/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
|
||
if (!m) return null;
|
||
return {
|
||
r: parseInt(m[1], 16),
|
||
g: parseInt(m[2], 16),
|
||
b: parseInt(m[3], 16),
|
||
};
|
||
}
|
||
|
||
function rgbToHex(r: number, g: number, b: number): string {
|
||
return (
|
||
'#' +
|
||
[r, g, b]
|
||
.map((x) => Math.round(Math.max(0, Math.min(255, x))).toString(16).padStart(2, '0'))
|
||
.join('')
|
||
);
|
||
}
|
||
|
||
/** 生成略浅一档的背景色（用于官网辅助层） */
|
||
function softenHex(hex: string, mixWhite = 0.55): string {
|
||
const rgb = hexToRgb(hex);
|
||
if (!rgb) return hex;
|
||
const r = Math.round(rgb.r * (1 - mixWhite) + 255 * mixWhite);
|
||
const g = Math.round(rgb.g * (1 - mixWhite) + 255 * mixWhite);
|
||
const b = Math.round(rgb.b * (1 - mixWhite) + 255 * mixWhite);
|
||
return rgbToHex(r, g, b);
|
||
}
|
||
|
||
export function getStoredPageBackground(): string | null {
|
||
try {
|
||
return localStorage.getItem(PAGE_BACKGROUND_STORAGE_KEY);
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
export function setStoredPageBackground(hex: string): void {
|
||
try {
|
||
localStorage.setItem(PAGE_BACKGROUND_STORAGE_KEY, hex);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}
|
||
|
||
/** 写入 OMS + 官网首页共用的背景 CSS 变量 */
|
||
export function applyPageBackgroundColor(hex: string): void {
|
||
const color = hex.startsWith('#') ? hex : `#${hex}`;
|
||
const root = document.documentElement;
|
||
const warmPageBgs = new Set(['#f6f1e7', '#f5f4f1', '#faf9f7']);
|
||
const soft = softenHex(color, warmPageBgs.has(color.toLowerCase()) ? 0.42 : 0.55);
|
||
|
||
root.style.setProperty('--app-page-bg', color);
|
||
root.style.setProperty('--kc-page-bg', color);
|
||
root.style.setProperty('--kc-neutral', soft);
|
||
root.style.setProperty('--ai-bg', color);
|
||
root.style.setProperty('--ai-canvas', color);
|
||
root.style.setProperty('--ai-bg-soft', soft);
|
||
root.style.setProperty('--ai-header-bg', `color-mix(in srgb, ${color} 94%, transparent)`);
|
||
}
|