feat: 更新主题配置与系统设置

frontend-web/src/core/system-settings/api.ts

@@ -291,6 +291,8 @@ export type CustomThemeBaseMode = "light" | "dark";
 
 export interface CustomThemeColorOverrides {
   button_hover?: string | null;
+  navigation_gradient_start?: string | null;
+  navigation_gradient_end?: string | null;
   selected_background?: string | null;
   border?: string | null;
   muted?: string | null;

frontend-web/src/core/theme/custom-theme.ts

@@ -13,6 +13,8 @@ const BLACK: Rgb = { r: 0, g: 0, b: 0 };
 
 export const CUSTOM_THEME_ADVANCED_KEYS = [
   "button_hover",
+  "navigation_gradient_start",
+  "navigation_gradient_end",
   "selected_background",
   "border",
   "muted",
@@ -146,6 +148,18 @@ export function getCustomThemeTokens(theme: CustomThemeTokenInput): Record<strin
   const primaryHover = optionalHexColor(overrides.button_hover)
     ? toRgb(overrides.button_hover!)
     : defaultPrimaryHover;
+  // Keep the same left → main-colour → right treatment used by the built-in
+  // themes. These two values remain automatic unless the administrator opens
+  // “更多配色” and explicitly overrides one of them.
+  const defaultNavigationGradientStart = mix(primary, BLACK, isDark ? 0.46 : 0.3);
+  const defaultNavigationGradientEnd = mix(primary, WHITE, isDark ? 0.14 : 0.42);
+  const navigationGradientStart = optionalHexColor(overrides.navigation_gradient_start)
+    ? toRgb(overrides.navigation_gradient_start!)
+    : defaultNavigationGradientStart;
+  const navigationGradientEnd = optionalHexColor(overrides.navigation_gradient_end)
+    ? toRgb(overrides.navigation_gradient_end!)
+    : defaultNavigationGradientEnd;
+  const navigationForeground = readableForeground(mix(navigationGradientStart, navigationGradientEnd, 0.5));
   const primaryActive = isDark ? mix(primary, WHITE, 0.2) : mix(primary, BLACK, 0.2);
   const primaryForeground = optionalHexColor(overrides.primary_foreground) ?? readableForeground(primary);
   const buttonForeground = optionalHexColor(theme.text_color) ?? primaryForeground;
@@ -168,6 +182,8 @@ export function getCustomThemeTokens(theme: CustomThemeTokenInput): Record<strin
   const secondaryHex = toHex(secondary);
   const primaryHoverHex = toHex(primaryHover);
   const primaryActiveHex = toHex(primaryActive);
+  const navigationGradientStartHex = toHex(navigationGradientStart);
+  const navigationGradientEndHex = toHex(navigationGradientEnd);
   const sidebarHex = toHex(sidebar);
 
   return {
@@ -177,6 +193,9 @@ export function getCustomThemeTokens(theme: CustomThemeTokenInput): Record<strin
     "--brand-900": actionHex,
     "--brand-950": actionActiveHex,
     "--theme-button-hover": primaryHoverHex,
+    "--navigation-gradient-start": navigationGradientStartHex,
+    "--navigation-gradient-end": navigationGradientEndHex,
+    "--navigation-foreground": navigationForeground,
     "--theme-selected-background": accentHex,
     "--background": backgroundHex,
     "--foreground": foreground,