516 lines
16 KiB
JavaScript
516 lines
16 KiB
JavaScript
import { createTheme, alpha } from '@mui/material/styles';
|
||
|
||
/* ============================================================
|
||
* 后台 Material Design 3 主题
|
||
*
|
||
* - 与前台 public/css/style.css 的 MD3 token 保持同源：
|
||
* 默认主色 #6750a4 时直接复用前台 token 值（浅/深两套），
|
||
* 自定义主色时用 tonal ramp 近似生成整套 token。
|
||
* - 组件形态按 MD3 规范覆盖：pill 按钮、大圆角卡片/弹窗、
|
||
* surface 色阶、弱边框 + 低阴影（surface tint）。
|
||
* ============================================================ */
|
||
|
||
const DEFAULT_SEED = '#6750a4';
|
||
|
||
/* ---------- 颜色工具 ---------- */
|
||
|
||
function clamp(v) { return Math.min(255, Math.max(0, Math.round(v))); }
|
||
|
||
function hexToRgb(hex) {
|
||
let h = String(hex).replace('#', '');
|
||
if (h.length === 3) h = h.split('').map((c) => c + c).join('');
|
||
const n = parseInt(h, 16);
|
||
return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
|
||
}
|
||
|
||
function rgbToHex(r, g, b) {
|
||
const to = (v) => clamp(v).toString(16).padStart(2, '0');
|
||
return `#${to(r)}${to(g)}${to(b)}`;
|
||
}
|
||
|
||
function mix(a, b, w) {
|
||
const ca = hexToRgb(a);
|
||
const cb = hexToRgb(b);
|
||
return rgbToHex(
|
||
ca[0] + (cb[0] - ca[0]) * w,
|
||
ca[1] + (cb[1] - ca[1]) * w,
|
||
ca[2] + (cb[2] - ca[2]) * w
|
||
);
|
||
}
|
||
|
||
function hexToHsl(hex) {
|
||
const [r, g, b] = hexToRgb(hex).map((v) => v / 255);
|
||
const max = Math.max(r, g, b);
|
||
const min = Math.min(r, g, b);
|
||
const l = (max + min) / 2;
|
||
let h = 0;
|
||
let s = 0;
|
||
if (max !== min) {
|
||
const d = max - min;
|
||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||
if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
|
||
else if (max === g) h = (b - r) / d + 2;
|
||
else h = (r - g) / d + 4;
|
||
h *= 60;
|
||
}
|
||
return [h, s, l];
|
||
}
|
||
|
||
function hslToHex(h, s, l) {
|
||
h = ((h % 360) + 360) % 360;
|
||
const c = (1 - Math.abs(2 * l - 1)) * s;
|
||
const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
|
||
const m = l - c / 2;
|
||
let rgb;
|
||
if (h < 60) rgb = [c, x, 0];
|
||
else if (h < 120) rgb = [x, c, 0];
|
||
else if (h < 180) rgb = [0, c, x];
|
||
else if (h < 240) rgb = [0, x, c];
|
||
else if (h < 300) rgb = [x, 0, c];
|
||
else rgb = [c, 0, x];
|
||
return rgbToHex((rgb[0] + m) * 255, (rgb[1] + m) * 255, (rgb[2] + m) * 255);
|
||
}
|
||
|
||
function grayscale(hex) {
|
||
const [r, g, b] = hexToRgb(hex);
|
||
const v = clamp(0.299 * r + 0.587 * g + 0.114 * b);
|
||
return rgbToHex(v, v, v);
|
||
}
|
||
|
||
/* MD3 tonal ramp 近似：tone t = 向白/黑按比例混合（t40 即 seed 本身） */
|
||
function tone(seed, t) {
|
||
if (t >= 40) return mix(seed, '#ffffff', (t - 40) / 60);
|
||
return mix(seed, '#000000', (40 - t) / 40);
|
||
}
|
||
|
||
/* 派生色：可旋转色相 / 降低饱和度后再套 tone */
|
||
function tonal(seed, t, { hue = 0, sat = 1 } = {}) {
|
||
let base = seed;
|
||
if (hue) {
|
||
const [h, s, l] = hexToHsl(base);
|
||
base = hslToHex(h + hue, s, l);
|
||
}
|
||
if (sat < 1) base = mix(base, grayscale(base), 1 - sat);
|
||
return tone(base, t);
|
||
}
|
||
|
||
/* ---------- 前台同源 token（默认主色 #6750a4，取自 public/css/style.css） ---------- */
|
||
|
||
const LIGHT_TOKENS = {
|
||
primary: '#6750a4',
|
||
onPrimary: '#ffffff',
|
||
primaryContainer: '#eadfff',
|
||
onPrimaryContainer: '#21005d',
|
||
secondary: '#625b71',
|
||
onSecondary: '#ffffff',
|
||
secondaryContainer: '#e8def8',
|
||
onSecondaryContainer: '#1d192b',
|
||
tertiary: '#7d5260',
|
||
onTertiary: '#ffffff',
|
||
tertiaryContainer: '#ffd8e4',
|
||
onTertiaryContainer: '#31111d',
|
||
surface: '#fffbfe',
|
||
onSurface: '#1c1b1f',
|
||
surfaceVariant: '#e7e0ec',
|
||
onSurfaceVariant: '#49454f',
|
||
surfaceContainerLow: '#f7f2fa',
|
||
surfaceContainer: '#f3edf7',
|
||
surfaceContainerHigh: '#ece6f0',
|
||
outline: '#79747e',
|
||
outlineVariant: '#cac4d0',
|
||
error: '#b3261e',
|
||
onError: '#ffffff',
|
||
inverseSurface: '#313033',
|
||
inverseOnSurface: '#f4eff4',
|
||
};
|
||
|
||
const DARK_TOKENS = {
|
||
primary: '#d0bcff',
|
||
onPrimary: '#381e72',
|
||
primaryContainer: '#4f378b',
|
||
onPrimaryContainer: '#eadfff',
|
||
secondary: '#ccc2dc',
|
||
onSecondary: '#332d41',
|
||
secondaryContainer: '#4a4458',
|
||
onSecondaryContainer: '#e8def8',
|
||
tertiary: '#efb8c8',
|
||
onTertiary: '#492532',
|
||
tertiaryContainer: '#61343f',
|
||
onTertiaryContainer: '#ffd8e4',
|
||
surface: '#1c1b1f',
|
||
onSurface: '#e6e1e5',
|
||
surfaceVariant: '#49454f',
|
||
onSurfaceVariant: '#cac4d0',
|
||
surfaceContainerLow: '#211f26',
|
||
surfaceContainer: '#25232a',
|
||
surfaceContainerHigh: '#2b2930',
|
||
outline: '#938f99',
|
||
outlineVariant: '#49454f',
|
||
error: '#f2b8b5',
|
||
onError: '#601410',
|
||
inverseSurface: '#e6e1e5',
|
||
inverseOnSurface: '#313033',
|
||
};
|
||
|
||
function buildPalette(seed, dark) {
|
||
if (String(seed).toLowerCase() === DEFAULT_SEED) return dark ? DARK_TOKENS : LIGHT_TOKENS;
|
||
// 自定义主色：surface 色阶保持 MD3 基线，色相相关 token 由 tonal ramp 派生
|
||
const sat = 0.55; // secondary 适度去饱和，贴近 MD3 参考值
|
||
const hue = 32; // tertiary 色相偏移
|
||
if (dark) {
|
||
return {
|
||
primary: tone(seed, 80),
|
||
onPrimary: tone(seed, 20),
|
||
primaryContainer: tone(seed, 30),
|
||
onPrimaryContainer: tone(seed, 90),
|
||
secondary: tonal(seed, 80, { sat }),
|
||
onSecondary: tonal(seed, 20, { sat }),
|
||
secondaryContainer: tonal(seed, 30, { sat }),
|
||
onSecondaryContainer: tonal(seed, 90, { sat }),
|
||
tertiary: tonal(seed, 80, { hue }),
|
||
onTertiary: tonal(seed, 20, { hue }),
|
||
tertiaryContainer: tonal(seed, 30, { hue }),
|
||
onTertiaryContainer: tonal(seed, 90, { hue }),
|
||
...DARK_TOKENS_DERIVED,
|
||
};
|
||
}
|
||
return {
|
||
primary: tone(seed, 40),
|
||
onPrimary: '#ffffff',
|
||
primaryContainer: tone(seed, 90),
|
||
onPrimaryContainer: tone(seed, 10),
|
||
secondary: tonal(seed, 40, { sat }),
|
||
onSecondary: '#ffffff',
|
||
secondaryContainer: tonal(seed, 90, { sat }),
|
||
onSecondaryContainer: tonal(seed, 10, { sat }),
|
||
tertiary: tonal(seed, 40, { hue }),
|
||
onTertiary: '#ffffff',
|
||
tertiaryContainer: tonal(seed, 90, { hue }),
|
||
onTertiaryContainer: tonal(seed, 10, { hue }),
|
||
...LIGHT_TOKENS_DERIVED,
|
||
};
|
||
}
|
||
|
||
// 派生模式下 surface 相关与 error 沿用 MD3 基线
|
||
const LIGHT_TOKENS_DERIVED = {
|
||
surface: '#fffbfe',
|
||
onSurface: '#1c1b1f',
|
||
surfaceVariant: '#e7e0ec',
|
||
onSurfaceVariant: '#49454f',
|
||
surfaceContainerLow: '#f7f2fa',
|
||
surfaceContainer: '#f3edf7',
|
||
surfaceContainerHigh: '#ece6f0',
|
||
outline: '#79747e',
|
||
outlineVariant: '#cac4d0',
|
||
error: '#b3261e',
|
||
onError: '#ffffff',
|
||
inverseSurface: '#313033',
|
||
inverseOnSurface: '#f4eff4',
|
||
};
|
||
|
||
const DARK_TOKENS_DERIVED = {
|
||
surface: '#1c1b1f',
|
||
onSurface: '#e6e1e5',
|
||
surfaceVariant: '#49454f',
|
||
onSurfaceVariant: '#cac4d0',
|
||
surfaceContainerLow: '#211f26',
|
||
surfaceContainer: '#25232a',
|
||
surfaceContainerHigh: '#2b2930',
|
||
outline: '#938f99',
|
||
outlineVariant: '#49454f',
|
||
error: '#f2b8b5',
|
||
onError: '#601410',
|
||
inverseSurface: '#e6e1e5',
|
||
inverseOnSurface: '#313033',
|
||
};
|
||
|
||
/* ---------- MD3 柔和阴影（surface tint 而非硬投影） ---------- */
|
||
|
||
function md3Shadows() {
|
||
const shadows = ['none'];
|
||
for (let i = 1; i <= 24; i += 1) {
|
||
const a = Math.min(0.26, 0.05 + i * 0.008).toFixed(3);
|
||
const b = Math.min(0.15, 0.03 + i * 0.005).toFixed(3);
|
||
const y1 = Math.min(3, 1 + Math.floor(i / 8));
|
||
const y2 = Math.min(2, 1 + Math.floor(i / 12));
|
||
const b1 = Math.min(8, 2 + Math.floor(i / 3));
|
||
const b2 = Math.min(6, 1 + Math.floor(i / 5));
|
||
shadows.push(`0px ${y1}px ${b1}px rgba(0,0,0,${a}), 0px ${y2}px ${b2}px rgba(0,0,0,${b})`);
|
||
}
|
||
return shadows;
|
||
}
|
||
|
||
/* ---------- 主题工厂 ---------- */
|
||
|
||
export function createMD3Theme({ mode = 'light', primary = DEFAULT_SEED } = {}) {
|
||
const dark = mode === 'dark';
|
||
const p = buildPalette(primary, dark);
|
||
const shadows = md3Shadows();
|
||
const fontFamily = "'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif";
|
||
|
||
// filled / tonal 按钮的 hover 色（MD3 hover = 相邻 tone）
|
||
const hoverPrimary = dark ? tone(p.primary, 90) : tone(p.primary, 35);
|
||
|
||
return createTheme({
|
||
palette: {
|
||
mode,
|
||
primary: {
|
||
main: p.primary,
|
||
contrastText: p.onPrimary,
|
||
container: p.primaryContainer,
|
||
onContainer: p.onPrimaryContainer,
|
||
},
|
||
secondary: {
|
||
main: p.secondary,
|
||
contrastText: p.onSecondary,
|
||
container: p.secondaryContainer,
|
||
onContainer: p.onSecondaryContainer,
|
||
},
|
||
tertiary: {
|
||
main: p.tertiary,
|
||
contrastText: p.onTertiary,
|
||
container: p.tertiaryContainer,
|
||
onContainer: p.onTertiaryContainer,
|
||
},
|
||
error: { main: p.error, contrastText: p.onError },
|
||
background: { default: p.surface, paper: p.surfaceContainerLow },
|
||
text: {
|
||
primary: p.onSurface,
|
||
secondary: p.onSurfaceVariant,
|
||
disabled: alpha(p.onSurface, 0.38),
|
||
},
|
||
divider: p.outlineVariant,
|
||
action: {
|
||
hover: alpha(p.onSurface, 0.08),
|
||
selected: alpha(p.onSurface, 0.08),
|
||
disabled: alpha(p.onSurface, 0.38),
|
||
disabledBackground: alpha(p.onSurface, 0.12),
|
||
},
|
||
},
|
||
shape: { borderRadius: 8 },
|
||
typography: {
|
||
fontFamily,
|
||
h4: { fontSize: 28, fontWeight: 500, letterSpacing: 0 },
|
||
h5: { fontSize: 24, fontWeight: 500, letterSpacing: 0 },
|
||
h6: { fontSize: 22, fontWeight: 500, letterSpacing: 0.15 },
|
||
subtitle1: { fontSize: 16, fontWeight: 500, letterSpacing: 0.15 },
|
||
body1: { fontSize: 16, lineHeight: 1.5 },
|
||
body2: { fontSize: 14, lineHeight: 1.5 },
|
||
button: { fontSize: 14, fontWeight: 500, letterSpacing: 0.1 },
|
||
caption: { fontSize: 12, fontWeight: 400, letterSpacing: 0.4 },
|
||
},
|
||
shadows,
|
||
components: {
|
||
/* MD3 顶栏：surfaceContainer + 细边框，去硬阴影 */
|
||
MuiAppBar: {
|
||
defaultProps: { color: 'inherit', elevation: 0 },
|
||
styleOverrides: {
|
||
root: {
|
||
backgroundColor: p.surfaceContainer,
|
||
color: p.onSurface,
|
||
boxShadow: 'none',
|
||
borderBottom: `1px solid ${p.outlineVariant}`,
|
||
backgroundImage: 'none',
|
||
},
|
||
},
|
||
},
|
||
|
||
/* MD3 导航抽屉：surfaceContainerLow + 右侧细边框 */
|
||
MuiDrawer: {
|
||
styleOverrides: {
|
||
paper: {
|
||
backgroundColor: p.surfaceContainerLow,
|
||
borderRight: `1px solid ${p.outlineVariant}`,
|
||
boxShadow: 'none',
|
||
backgroundImage: 'none',
|
||
},
|
||
},
|
||
},
|
||
|
||
/* MD3 导航项：胶囊选中态（secondaryContainer） */
|
||
MuiListItemButton: {
|
||
styleOverrides: {
|
||
root: {
|
||
borderRadius: 24,
|
||
margin: '4px 10px',
|
||
paddingTop: 8,
|
||
paddingBottom: 8,
|
||
'& .MuiListItemIcon-root': { color: p.onSurfaceVariant, minWidth: 40 },
|
||
'& .MuiListItemText-primary': { fontWeight: 500, fontSize: 14 },
|
||
'&.Mui-selected': {
|
||
backgroundColor: p.secondaryContainer,
|
||
color: p.onSecondaryContainer,
|
||
'&:hover': { backgroundColor: p.secondaryContainer },
|
||
'& .MuiListItemIcon-root': { color: p.onSecondaryContainer },
|
||
},
|
||
},
|
||
},
|
||
},
|
||
|
||
/* MD3 按钮：pill 圆角、无阴影、文字不转大写 */
|
||
MuiButton: {
|
||
defaultProps: { disableElevation: true },
|
||
styleOverrides: {
|
||
root: {
|
||
borderRadius: 20,
|
||
textTransform: 'none',
|
||
fontWeight: 500,
|
||
letterSpacing: '0.1px',
|
||
height: 40,
|
||
padding: '0 24px',
|
||
},
|
||
sizeSmall: { height: 32, padding: '0 16px', fontSize: 13 },
|
||
sizeLarge: { height: 48, padding: '0 28px', fontSize: 15 },
|
||
containedPrimary: {
|
||
backgroundColor: p.primary,
|
||
color: p.onPrimary,
|
||
'&:hover': { backgroundColor: hoverPrimary, boxShadow: shadows[1] },
|
||
},
|
||
containedError: { boxShadow: 'none' },
|
||
outlined: { borderColor: p.outline },
|
||
outlinedPrimary: {
|
||
borderColor: p.outline,
|
||
'&:hover': { borderColor: p.onSurface, backgroundColor: alpha(p.primary, 0.08) },
|
||
},
|
||
outlinedError: { color: p.error, borderColor: p.outline, '&:hover': { backgroundColor: alpha(p.error, 0.08) } },
|
||
textPrimary: { color: p.primary, '&:hover': { backgroundColor: alpha(p.primary, 0.08) } },
|
||
textError: { color: p.error },
|
||
},
|
||
},
|
||
|
||
/* MD3 卡片：surfaceContainerLow + 弱边框 + 12px 圆角 */
|
||
MuiCard: {
|
||
styleOverrides: {
|
||
root: {
|
||
borderRadius: 12,
|
||
backgroundColor: p.surfaceContainerLow,
|
||
border: `1px solid ${p.outlineVariant}`,
|
||
boxShadow: 'none',
|
||
backgroundImage: 'none',
|
||
},
|
||
},
|
||
},
|
||
|
||
/* 设置页的普通 Paper（默认 elevation=1）同样 MD3 化 */
|
||
MuiPaper: {
|
||
styleOverrides: {
|
||
rounded: { borderRadius: 12 },
|
||
elevation1: {
|
||
backgroundColor: p.surfaceContainerLow,
|
||
border: `1px solid ${p.outlineVariant}`,
|
||
boxShadow: 'none',
|
||
backgroundImage: 'none',
|
||
},
|
||
outlined: { borderColor: p.outlineVariant },
|
||
},
|
||
},
|
||
|
||
/* MD3 弹窗：28px 大圆角 + surfaceContainerHigh */
|
||
MuiDialog: {
|
||
styleOverrides: {
|
||
paper: {
|
||
borderRadius: 28,
|
||
backgroundColor: p.surfaceContainerHigh,
|
||
border: `1px solid ${p.outlineVariant}`,
|
||
boxShadow: shadows[4],
|
||
backgroundImage: 'none',
|
||
},
|
||
},
|
||
},
|
||
MuiDialogTitle: {
|
||
styleOverrides: { root: { fontSize: 22, fontWeight: 500, padding: '24px 24px 8px' } },
|
||
},
|
||
MuiDialogContent: {
|
||
styleOverrides: { root: { padding: '8px 24px', color: p.onSurface } },
|
||
},
|
||
MuiDialogActions: {
|
||
styleOverrides: { root: { padding: '16px 24px 24px', gap: 8 } },
|
||
},
|
||
|
||
/* MD3 输入框：4px 圆角 + 中性 outline 边框 */
|
||
MuiOutlinedInput: {
|
||
styleOverrides: {
|
||
root: { borderRadius: 4 },
|
||
notchedOutline: { borderColor: p.outline },
|
||
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: p.onSurface },
|
||
},
|
||
},
|
||
|
||
/* MD3 Chip：8px 圆角 + outline 边框 */
|
||
MuiChip: {
|
||
styleOverrides: {
|
||
root: { borderRadius: 8, fontWeight: 500 },
|
||
outlined: { borderColor: p.outline },
|
||
},
|
||
},
|
||
|
||
/* MD3 表格：outline-variant 分隔线、紧凑密度 */
|
||
MuiTableCell: {
|
||
styleOverrides: {
|
||
root: { borderBottom: `1px solid ${p.outlineVariant}`, padding: '14px 16px', fontSize: 14 },
|
||
head: { color: p.onSurfaceVariant, fontWeight: 600, fontSize: 13 },
|
||
},
|
||
},
|
||
|
||
/* MD3 开关：开 = primary 轨道 + 白 thumb，关 = surfaceContainerHigh 轨道 */
|
||
MuiSwitch: {
|
||
styleOverrides: {
|
||
root: {},
|
||
switchBase: {
|
||
color: p.outline,
|
||
'&.Mui-checked': { color: p.primary },
|
||
'&.Mui-checked + .MuiSwitch-track': { backgroundColor: p.primary, opacity: 1 },
|
||
},
|
||
track: { backgroundColor: p.surfaceContainerHigh, opacity: 1 },
|
||
},
|
||
},
|
||
|
||
/* MD3 分段按钮：secondaryContainer 选中态 */
|
||
MuiToggleButton: {
|
||
styleOverrides: {
|
||
root: {
|
||
borderRadius: 20,
|
||
textTransform: 'none',
|
||
borderColor: p.outline,
|
||
'&.Mui-selected': {
|
||
backgroundColor: p.secondaryContainer,
|
||
color: p.onSecondaryContainer,
|
||
borderColor: p.outline,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
|
||
/* MD3 头像：primaryContainer 底 + onPrimaryContainer 字 */
|
||
MuiAvatar: {
|
||
styleOverrides: {
|
||
root: { backgroundColor: p.primaryContainer, color: p.onPrimaryContainer },
|
||
},
|
||
},
|
||
|
||
/* MD3 提示：inverseSurface 底 */
|
||
MuiTooltip: {
|
||
styleOverrides: {
|
||
tooltip: {
|
||
backgroundColor: p.inverseSurface,
|
||
color: p.inverseOnSurface,
|
||
borderRadius: 4,
|
||
fontSize: 12,
|
||
padding: '6px 8px',
|
||
},
|
||
arrow: { color: p.inverseSurface },
|
||
},
|
||
},
|
||
|
||
/* 图标按钮去底色圆角适配 */
|
||
MuiIconButton: {
|
||
styleOverrides: {
|
||
root: { borderRadius: 999 },
|
||
},
|
||
},
|
||
},
|
||
});
|
||
}
|
||
|
||
export default createMD3Theme;
|