功能：完善自定义主题与独立登录会话

frontend-web/src/components/ui/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90",
+            "cursor-pointer bg-primary text-[var(--button-foreground,var(--primary-foreground))] hover:bg-primary/90",
         destructive:
           "cursor-pointer bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:

frontend-web/src/components/workspace/agent-icon-color.ts

@@ -47,10 +47,18 @@ type AgentAvatarTheme =
   | "lightyellow"
   | "light"
   | "lightblue"
-  | "lightgreen";
+  | "lightgreen"
+  | `custom-theme-${string}`;
 
 /** Returns a stable avatar gradient and readable icon color for each theme. */
 export function agentColor(id: string, theme: AgentAvatarTheme) {
+  if (theme.startsWith("custom-theme-")) {
+    return {
+      from: "var(--accent)",
+      to: "var(--brand-200)",
+      foreground: "var(--accent-foreground)",
+    };
+  }
   let hash = 0;
   for (let i = 0; i < id.length; i++) {
     hash = (hash * 31 + id.charCodeAt(i)) >>> 0;

frontend-web/src/components/workspace/appearance-controls.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Check, ExternalLink, LayoutIcon, PanelLeftIcon, Shirt } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { Button } from "@/components/ui/button";
@@ -84,8 +84,23 @@ export function CompactShortcutButtons({ tone }: { tone: AppearanceControlTone }
 
 export function ThemeSwitcher({ tone }: { tone: AppearanceControlTone }) {
   const { theme, setTheme } = useTheme();
+  const { data: appearance } = useAppearanceSettings();
   const [open, setOpen] = useState(false);
   const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const swatches = useMemo(
+    () => [
+      ...THEME_SWATCHES,
+      ...(appearance?.custom_themes ?? [])
+        .filter((preset) => preset.enabled)
+        .sort((a, b) => a.sort_order - b.sort_order)
+        .map((preset) => ({
+          id: preset.id as ThemeType,
+          label: preset.name,
+          color: preset.primary,
+        })),
+    ],
+    [appearance?.custom_themes],
+  );
 
   const cancelClose = () => {
     if (closeTimer.current) {
@@ -124,9 +139,9 @@ export function ThemeSwitcher({ tone }: { tone: AppearanceControlTone }) {
       </Button>
       {open ? (
         <div className="absolute top-full left-1/2 z-50 -translate-x-1/2 pt-2">
-          <div className="relative flex items-center gap-2 rounded-lg border border-black/5 bg-white px-2.5 py-1.5 shadow-lg">
-            <div className="absolute -top-1 left-1/2 size-2 -translate-x-1/2 rotate-45 rounded-[1px] border-t border-l border-black/5 bg-white" />
-            {THEME_SWATCHES.map((swatch) => {
+          <div className="relative flex max-w-64 flex-wrap items-center justify-center gap-2 rounded-lg border border-border bg-popover px-2.5 py-1.5 shadow-lg">
+            <div className="absolute -top-1 left-1/2 size-2 -translate-x-1/2 rotate-45 rounded-[1px] border-t border-l border-border bg-popover" />
+            {swatches.map((swatch) => {
               const active = theme === swatch.id;
               return (
                 <button

frontend-web/src/components/workspace/input-box.tsx

@@ -1172,7 +1172,7 @@ export function InputBox({
               className={cn(
                 "rounded-full border-border bg-background shadow-sm hover:bg-muted dark:bg-blue-500 dark:border-blue-500 dark:text-white dark:hover:bg-blue-400 dark:shadow-none",
                 compact &&
-                  "size-7 rounded-lg border-0 bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90 disabled:bg-muted disabled:text-muted-foreground/40 dark:bg-[var(--primary)] dark:border-0 dark:text-[var(--primary-foreground)] dark:hover:opacity-90 dark:disabled:bg-muted",
+                  "size-7 rounded-lg border-0 bg-[var(--primary)] text-[var(--button-foreground,var(--primary-foreground))] hover:opacity-90 disabled:bg-muted disabled:text-muted-foreground/40 dark:bg-[var(--primary)] dark:border-0 dark:text-[var(--button-foreground,var(--primary-foreground))] dark:hover:opacity-90 dark:disabled:bg-muted",
               )}
               disabled={disabled}
               variant="outline"

frontend-web/src/components/workspace/settings/appearance-settings-page.tsx

@@ -11,6 +11,7 @@ import {
   ListIcon,
   MoonIcon,
   PanelLeftIcon,
+  PaletteIcon,
   Plus,
   SnowflakeIcon,
   SunIcon,
@@ -20,7 +21,7 @@ import { useEffect, useMemo, useState, type ComponentType, type SVGProps } from
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
-import { useTheme } from "@/contexts/ThemeContext";
+import { useTheme, type ThemeType } from "@/contexts/ThemeContext";
 
 import { FONT_SCALE_OPTIONS } from "@/components/font-scale";
 import { Button } from "@/components/ui/button";
@@ -63,9 +64,10 @@ import {
 import PrivateSquareSettingsPage from "@/pages/PrivateSquareSettingsPage";
 import PublishSquaresSettingsPage from "@/pages/PublishSquaresSettingsPage";
 import PromptPrefixSettingsPage from "@/pages/PromptPrefixSettingsPage";
-import SkillCompressionSettingsPage from "@/pages/SkillCompressionSettingsPage";
-
-import { SettingsSection } from "./settings-section";
+import SkillCompressionSettingsPage from "@/pages/SkillCompressionSettingsPage";
+
+import { CustomThemeLibrarySettings } from "./custom-theme-library-settings";
+import { SettingsSection } from "./settings-section";
 
 const languageOptions: { value: Locale; label: string }[] = [
   { value: "en-US", label: enUS.locale.localName },
@@ -176,9 +178,21 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
   const { data: citationDisplay } = useCitationDisplaySettings();
   const updateCitationDisplay = useUpdateCitationDisplaySettings();
   const globalDefault = appearance?.default_theme ?? "light";
-  const globalSkillView = appearance?.default_skill_view ?? "list";
-  const globalAgentView = appearance?.default_agent_view ?? "card";
-  const globalLayoutMode = appearance?.default_layout_mode ?? "full";
+  const globalSkillView = appearance?.default_skill_view ?? "list";
+  const globalAgentView = appearance?.default_agent_view ?? "card";
+  const globalLayoutMode = appearance?.default_layout_mode ?? "full";
+  const globalDefaultLabel = useMemo(() => {
+    const customTheme = (appearance?.custom_themes ?? []).find(
+      (preset) => preset.id === globalDefault,
+    );
+    if (customTheme) return customTheme.name;
+    if (globalDefault === "light") return "浅色";
+    if (globalDefault === "dark") return "深色";
+    if (globalDefault === "lightgreen") return "绿色";
+    if (globalDefault === "iceblue") return "冰川蓝";
+    if (globalDefault === "lightyellow") return "浅黄色";
+    return "浅蓝";
+  }, [appearance?.custom_themes, globalDefault]);
   // 有效界面模式：用户自己选过则以其为准，否则跟随管理员系统默认（再否则会话级回退）。
   const [effectiveLayoutMode, setLayoutMode] = useLayoutMode();
   const cleanupWords =
@@ -428,18 +442,34 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
         description={t.settings.appearance.themeDescription}
       >
         <div className="grid gap-3 lg:grid-cols-2">
-          {themeOptions.map((option) => (
-            <ThemePreviewCard
+          {themeOptions.map((option) => (
+            <ThemePreviewCard
               key={option.id}
               icon={option.icon}
               label={option.label}
               description={option.description}
               active={currentTheme === option.id}
               mode={option.id as "light" | "dark" | "lightblue" | "lightgreen" | "iceblue" | "lightyellow"}
-              onSelect={(value) => setTheme(value)}
-            />
-          ))}
-        </div>
+              onSelect={(value) => setTheme(value)}
+            />
+          ))}
+          {(appearance?.custom_themes ?? [])
+            .filter((preset) => preset.enabled)
+            .sort((a, b) => a.sort_order - b.sort_order)
+            .map((preset) => (
+              <ThemePreviewCard
+                key={preset.id}
+                icon={PaletteIcon}
+                label={preset.name}
+                description={`自定义主题 · 主色 ${preset.primary}`}
+                active={currentTheme === preset.id}
+                mode={preset.id}
+                previewDark={preset.mode === "dark"}
+                accentColor={preset.primary}
+                onSelect={(value) => setTheme(value)}
+              />
+            ))}
+        </div>
       </SettingsSection>
 
       <Separator />
@@ -617,26 +647,40 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
                 <SunIcon className="mr-1.5 size-4" />
                 浅黄色
               </Button>
-              <p className="text-muted-foreground ml-2 text-xs">
-                当前系统默认：
-                {globalDefault === "light"
-                  ? "浅色"
-                  : globalDefault === "dark"
-                    ? "深色"
-                    : globalDefault === "lightgreen"
-                      ? "绿色"
-                      : globalDefault === "iceblue"
-                        ? "冰川蓝"
-                        : globalDefault === "lightyellow"
-                          ? "浅黄色"
-                          : "浅蓝"}
-              </p>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() =>
+                  document
+                    .getElementById("custom-theme-library")
+                    ?.scrollIntoView({ behavior: "smooth", block: "start" })
+                }
+              >
+                <PaletteIcon className="mr-1.5 size-4" />
+                管理自定义主题
+              </Button>
+              <p className="text-muted-foreground ml-2 text-xs">
+                当前系统默认：{globalDefaultLabel}
+              </p>
             </div>
           </SettingsSection>
-        </>
-      )}
-
-      {isAdmin && (
+        </>
+      )}
+
+      {isAdmin && (
+        <div id="custom-theme-library" className="scroll-mt-4">
+          <Separator />
+          <SettingsSection
+            title="自定义主题库（管理员）"
+            description="管理员可按品牌主色创建主题，并设置为系统默认；用户只会看到已启用的主题并可自行切换。"
+          >
+            <CustomThemeLibrarySettings />
+          </SettingsSection>
+        </div>
+      )}
+
+      {isAdmin && (
         <>
           <Separator />
           <SettingsSection
@@ -1137,19 +1181,24 @@ function CompactShortcutSettings({
 function ThemePreviewCard({
   icon: Icon,
   label,
-  description,
-  active,
-  mode,
-  onSelect,
-}: {
-  icon: ComponentType<SVGProps<SVGSVGElement>>;
-  label: string;
-  description: string;
-  active: boolean;
-  mode: "light" | "dark" | "lightblue" | "lightgreen" | "iceblue" | "lightyellow";
-  onSelect: (mode: "light" | "dark" | "lightblue" | "lightgreen" | "iceblue" | "lightyellow") => void;
-}) {
-  const previewMode = mode;
+  description,
+  active,
+  mode,
+  previewDark,
+  accentColor,
+  onSelect,
+}: {
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  label: string;
+  description: string;
+  active: boolean;
+  mode: ThemeType;
+  previewDark?: boolean;
+  accentColor?: string;
+  onSelect: (mode: ThemeType) => void;
+}) {
+  const previewMode = mode;
+  const isDarkPreview = previewDark ?? previewMode === "dark";
   return (
     <button
       type="button"
@@ -1175,7 +1224,7 @@ function ThemePreviewCard({
       <div
         className={cn(
           "relative overflow-hidden rounded-md border text-xs transition-colors",
-          previewMode === "dark"
+          isDarkPreview
             ? "border-neutral-800 bg-neutral-900 text-neutral-200"
             : previewMode === "lightblue"
               ? "border-blue-200 bg-white text-slate-900"
@@ -1192,18 +1241,21 @@ function ThemePreviewCard({
           <div
             className={cn(
               "h-2 w-2 rounded-full",
-              previewMode === "dark"
-                ? "bg-emerald-400"
-                : previewMode === "lightblue"
-                  ? "bg-blue-500"
-                : previewMode === "lightgreen"
-                  ? "bg-[#07c05f]"
-                  : previewMode === "iceblue"
-                    ? "bg-[#9BCEF1]"
-                    : previewMode === "lightyellow"
-                      ? "bg-[#F3FBD9]"
-                      : "bg-[#cf1322]",
-            )}
+              accentColor
+                ? ""
+                : isDarkPreview
+                  ? "bg-emerald-400"
+                  : previewMode === "lightblue"
+                    ? "bg-blue-500"
+                    : previewMode === "lightgreen"
+                      ? "bg-[#07c05f]"
+                      : previewMode === "iceblue"
+                        ? "bg-[#9BCEF1]"
+                        : previewMode === "lightyellow"
+                          ? "bg-[#F3FBD9]"
+                          : "bg-[#cf1322]",
+            )}
+            style={accentColor ? { backgroundColor: accentColor } : undefined}
           />
           <div className="h-2 w-10 rounded-full bg-current/20" />
           <div className="h-2 w-6 rounded-full bg-current/15" />

frontend-web/src/components/workspace/settings/custom-theme-library-settings.tsx

@@ -0,0 +1,753 @@
+"use client";
+
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CheckIcon,
+  MoonIcon,
+  PaletteIcon,
+  PlusIcon,
+  RotateCcwIcon,
+  SaveIcon,
+  SlidersHorizontalIcon,
+  SunIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { useEffect, useId, useMemo, useState, type CSSProperties } from "react";
+import { ColorPickerPanel } from "tdesign-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import type {
+  CustomThemeColorOverrides,
+  CustomThemePreset,
+} from "@/core/system-settings/api";
+import {
+  useAppearanceSettings,
+  useUpdateAppearanceSettings,
+} from "@/core/system-settings/hooks";
+import {
+  CUSTOM_THEME_ADVANCED_KEYS,
+  getCustomThemeAutomaticTokens,
+  getCustomThemeTokens,
+  normalizeHexColor,
+  customThemeTextContrast,
+  type CustomThemeAdvancedKey,
+} from "@/core/theme/custom-theme";
+import { cn } from "@/lib/utils";
+
+const MAX_CUSTOM_THEMES = 12;
+const SUGGESTED_COLORS = [
+  "#9BCEF1",
+  "#F3FBD9",
+  "#7AB8F5",
+  "#8ED1B2",
+  "#C6B4F6",
+  "#F3C5A6",
+  "#F3B1B7",
+  "#63C4C8",
+];
+const TEXT_COLORS = ["#202A3A", "#172033", "#2D587A", "#4C6330", "#F4F7FB", "#FFFFFF"];
+
+const ADVANCED_COLOR_FIELDS: Array<{
+  key: CustomThemeAdvancedKey;
+  label: string;
+  description: string;
+  token: string;
+}> = [
+  {
+    key: "button_hover",
+    label: "按钮悬停色",
+    description: "主按钮悬停时的背景色",
+    token: "--theme-button-hover",
+  },
+  {
+    key: "selected_background",
+    label: "选中背景",
+    description: "左侧菜单、卡片选中时的浅背景",
+    token: "--theme-selected-background",
+  },
+  {
+    key: "border",
+    label: "边框色",
+    description: "卡片、输入框和分隔线",
+    token: "--border",
+  },
+  {
+    key: "muted",
+    label: "弱化背景",
+    description: "次级区域与弱化容器",
+    token: "--muted",
+  },
+  {
+    key: "muted_text",
+    label: "辅助文字",
+    description: "说明、占位和次要信息文字",
+    token: "--muted-foreground",
+  },
+  {
+    key: "destructive",
+    label: "删除/危险色",
+    description: "删除按钮、错误与危险操作的颜色",
+    token: "--destructive",
+  },
+  {
+    key: "brand_title",
+    label: "栏目标题文字",
+    description: "业务链、分析记录等带图标栏目标题",
+    token: "--brand-title-foreground",
+  },
+  {
+    key: "primary_foreground",
+    label: "主色块文字（Logo/状态标签）",
+    description: "Logo 的 C、启用状态和默认标签；不影响主按钮文字",
+    token: "--primary-foreground",
+  },
+];
+
+function makeThemeId(): `custom-theme-${string}` {
+  const suffix =
+    typeof crypto !== "undefined" && "randomUUID" in crypto
+      ? crypto.randomUUID().replace(/[^a-z0-9-]/gi, "").toLowerCase()
+      : `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`;
+  return `custom-theme-${suffix}`;
+}
+
+function newCustomTheme(order: number): CustomThemePreset {
+  return {
+    id: makeThemeId(),
+    name: `自定义主题 ${order + 1}`,
+    primary: "#9BCEF1",
+    text_color: null,
+    mode: "light",
+    overrides: {},
+    enabled: true,
+    sort_order: order,
+  };
+}
+
+function normalizeColorOverrides(
+  overrides: CustomThemeColorOverrides | undefined,
+): CustomThemeColorOverrides {
+  const normalized: CustomThemeColorOverrides = {};
+  for (const key of CUSTOM_THEME_ADVANCED_KEYS) {
+    const value = overrides?.[key];
+    if (typeof value === "string" && value.trim()) {
+      normalized[key] = normalizeHexColor(value);
+    }
+  }
+  return normalized;
+}
+
+function normalizeThemeDrafts(
+  themes: CustomThemePreset[] | undefined,
+): CustomThemePreset[] {
+  return [...(themes ?? [])]
+    .sort((a, b) => a.sort_order - b.sort_order)
+    .map((theme, index) => ({
+      ...theme,
+      id: theme.id || makeThemeId(),
+      name: theme.name || `自定义主题 ${index + 1}`,
+      primary: normalizeHexColor(theme.primary),
+      text_color:
+        typeof theme.text_color === "string" && theme.text_color.trim()
+          ? normalizeHexColor(theme.text_color)
+          : null,
+      mode: theme.mode === "dark" ? "dark" : "light",
+      overrides: normalizeColorOverrides(theme.overrides),
+      enabled: theme.enabled !== false,
+      sort_order: index,
+    }));
+}
+
+/**
+ * Render the TDesign panel inside the settings dialog instead of its default
+ * body-level popup. The dialog otherwise treats clicks inside that portal as
+ * outside interactions and closes the picker while a colour is being chosen.
+ */
+function InlineThemeColorPicker({
+  value,
+  fallback,
+  swatchColors,
+  onCommit,
+  ariaLabel = "选择颜色",
+}: {
+  value: string;
+  fallback?: string;
+  swatchColors: string[];
+  onCommit: (value: string) => void;
+  ariaLabel?: string;
+}) {
+  const normalizedValue = normalizeHexColor(value, fallback);
+  const [pendingValue, setPendingValue] = useState(normalizedValue);
+  const [open, setOpen] = useState(false);
+  const panelId = useId();
+
+  useEffect(() => {
+    if (!open) setPendingValue(normalizedValue);
+  }, [normalizedValue, open]);
+
+  return (
+    <div className="w-fit">
+      <button
+        type="button"
+        className="flex h-10 min-w-32 items-center gap-2 rounded-md border bg-background px-2 font-mono text-sm shadow-xs transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label={ariaLabel}
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={() => setOpen((visible) => !visible)}
+      >
+        <span
+          className="size-7 rounded border"
+          style={{ backgroundColor: pendingValue }}
+          aria-hidden
+        />
+        {pendingValue}
+      </button>
+      {open && (
+        <div
+          id={panelId}
+          className="mt-2 w-fit rounded-lg border bg-background p-2 shadow-lg"
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <ColorPickerPanel
+            value={pendingValue}
+            format="HEX"
+            colorModes={["monochrome"]}
+            enableAlpha={false}
+            swatchColors={swatchColors}
+            onChange={(color) => setPendingValue(normalizeHexColor(String(color), fallback))}
+          />
+          <div className="mt-2 flex justify-end gap-2 border-t pt-2">
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                setPendingValue(normalizedValue);
+                setOpen(false);
+              }}
+            >
+              取消
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              onClick={() => {
+                setOpen(false);
+                onCommit(pendingValue);
+              }}
+            >
+              应用颜色
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CustomThemePreview({ theme }: { theme: CustomThemePreset }) {
+  const tokens = getCustomThemeTokens(theme) as CSSProperties;
+  const buttonContrast = customThemeTextContrast(theme);
+  const isButtonContrastLow = buttonContrast < 4.5;
+
+  return (
+    <div
+      className="overflow-hidden rounded-lg border"
+      style={tokens}
+      aria-label={`${theme.name} 的颜色预览`}
+    >
+      <div className="flex items-center gap-2 border-b border-[var(--border)] bg-[var(--background)] px-3 py-2">
+        <span
+          className="flex size-5 items-center justify-center rounded-md bg-[var(--primary)] text-[10px] font-bold text-[var(--primary-foreground)] ring-2 ring-[var(--ring)]"
+          aria-hidden
+        >
+          C
+        </span>
+        <span className="text-xs font-semibold text-[var(--foreground)]">
+          实时预览
+        </span>
+        <span
+          className={cn(
+            "ml-auto text-[11px]",
+            isButtonContrastLow
+              ? "text-amber-700 dark:text-amber-300"
+              : "text-[var(--muted-foreground)]",
+          )}
+        >
+          主按钮对比度 {buttonContrast.toFixed(1)}:1
+        </span>
+      </div>
+      <div className="grid gap-2 bg-[var(--background)] p-3 sm:grid-cols-[1fr_auto]">
+        <div className="rounded-md border border-[var(--border)] bg-[var(--card)] p-2.5">
+          <div className="text-xs font-semibold text-[var(--brand-title-foreground)]">
+            {theme.name || "未命名主题"}
+          </div>
+          <div className="mt-1 text-[11px] text-[var(--muted-foreground)]">
+            页面正文自动生成；主按钮文字可单独指定。
+          </div>
+        </div>
+        <button
+          type="button"
+          className="rounded-md bg-[var(--primary)] px-3 py-2 text-xs font-semibold text-[var(--button-foreground,var(--primary-foreground))] shadow-sm"
+          tabIndex={-1}
+        >
+          主按钮
+        </button>
+        {isButtonContrastLow && (
+          <p className="sm:col-span-2 text-[11px] text-amber-700 dark:text-amber-300">
+            当前按钮文字会按您的颜色设置展示，但对比度低于 4.5:1，建议改用更深的主色或恢复自动。
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function AdvancedThemeColorControls({
+  theme,
+  onPatch,
+}: {
+  theme: CustomThemePreset;
+  onPatch: (patch: Partial<CustomThemePreset>) => void;
+}) {
+  const automaticTokens = getCustomThemeAutomaticTokens({
+    primary: theme.primary,
+    mode: theme.mode,
+  });
+
+  const setOverride = (key: CustomThemeAdvancedKey, value: string) => {
+    const overrides = { ...(theme.overrides ?? {}) };
+    if (!value.trim()) {
+      delete overrides[key];
+    } else {
+      overrides[key] = value;
+    }
+    onPatch({ overrides });
+  };
+
+  return (
+    <div className="space-y-3 rounded-lg border border-dashed bg-muted/15 p-3">
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div>
+          <div className="text-sm font-medium">更多配色</div>
+          <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
+            默认由主色自动推导。仅在品牌规范有明确要求时，选择单项覆盖；“恢复自动”会重新跟随主色。
+          </p>
+        </div>
+        <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+          已覆盖 {Object.keys(theme.overrides ?? {}).length} 项
+        </span>
+      </div>
+      <div className="grid gap-3 lg:grid-cols-2">
+        {ADVANCED_COLOR_FIELDS.map((field) => {
+          const explicit = theme.overrides?.[field.key];
+          const automatic = automaticTokens[field.token] ?? "#0062D9";
+          const value = explicit ?? automatic;
+          return (
+            <div key={field.key} className="rounded-md border bg-background p-3">
+              <div className="mb-2 flex items-start justify-between gap-2">
+                <div>
+                  <div className="text-xs font-semibold">{field.label}</div>
+                  <div className="mt-0.5 text-[11px] text-muted-foreground">
+                    {field.description}
+                  </div>
+                </div>
+                {explicit ? (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2 text-xs"
+                    onClick={() => setOverride(field.key, "")}
+                  >
+                    <RotateCcwIcon className="mr-1 size-3.5" />
+                    恢复自动
+                  </Button>
+                ) : (
+                  <span className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">
+                    自动
+                  </span>
+                )}
+              </div>
+              <div className="flex flex-wrap items-end gap-2">
+                <InlineThemeColorPicker
+                  value={value}
+                  swatchColors={SUGGESTED_COLORS}
+                  onCommit={(color) => setOverride(field.key, color)}
+                  ariaLabel={`${theme.name || "自定义主题"}${field.label}选色器`}
+                />
+                <Input
+                  value={value}
+                  maxLength={7}
+                  className="h-8 w-28 font-mono text-xs uppercase"
+                  onChange={(event) => setOverride(field.key, event.target.value)}
+                  onBlur={(event) =>
+                    setOverride(
+                      field.key,
+                      event.target.value.trim()
+                        ? normalizeHexColor(event.target.value)
+                        : "",
+                    )
+                  }
+                  aria-label={`${theme.name || "自定义主题"}${field.label}十六进制值`}
+                />
+              </div>
+              {!explicit && (
+                <p className="mt-2 text-[11px] text-muted-foreground">
+                  当前自动值：{automatic}
+                </p>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function CustomThemeLibrarySettings() {
+  const { data: appearance } = useAppearanceSettings();
+  const updateAppearance = useUpdateAppearanceSettings();
+  const [drafts, setDrafts] = useState<CustomThemePreset[]>([]);
+  const [advancedThemeIds, setAdvancedThemeIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+
+  useEffect(() => {
+    setDrafts(normalizeThemeDrafts(appearance?.custom_themes));
+  }, [appearance?.custom_themes]);
+
+  const hasChanges = useMemo(
+    () =>
+      JSON.stringify(normalizeThemeDrafts(appearance?.custom_themes)) !==
+      JSON.stringify(normalizeThemeDrafts(drafts)),
+    [appearance?.custom_themes, drafts],
+  );
+
+  const patchTheme = (id: string, patch: Partial<CustomThemePreset>) => {
+    setDrafts((items) =>
+      items.map((item) => (item.id === id ? { ...item, ...patch } : item)),
+    );
+  };
+
+  const toggleAdvancedTheme = (id: string) => {
+    setAdvancedThemeIds((ids) => {
+      const next = new Set(ids);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const handleSave = async () => {
+    const cleaned = normalizeThemeDrafts(drafts).map((theme) => ({
+      ...theme,
+      name: theme.name.trim(),
+      primary: normalizeHexColor(theme.primary),
+    }));
+    if (cleaned.some((theme) => !theme.name)) {
+      toast.error("请为每个主题填写名称");
+      return;
+    }
+    const names = cleaned.map((theme) => theme.name.toLocaleLowerCase());
+    if (new Set(names).size !== names.length) {
+      toast.error("主题名称不能重复");
+      return;
+    }
+
+    try {
+      await updateAppearance.mutateAsync({ custom_themes: cleaned });
+      toast.success("自定义主题库已保存，所有用户可在主题切换器中选择已启用主题");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "保存主题库失败");
+    }
+  };
+
+  const handleSetDefault = async (theme: CustomThemePreset) => {
+    if (!theme.enabled || appearance?.default_theme === theme.id) return;
+    if (!(appearance?.custom_themes ?? []).some((preset) => preset.id === theme.id)) {
+      toast.info("请先保存主题库，再将新主题设为系统默认");
+      return;
+    }
+    try {
+      await updateAppearance.mutateAsync({ default_theme: theme.id });
+      toast.success(`已将“${theme.name || "自定义主题"}”设为系统默认主题`);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "设置系统默认主题失败");
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <p className="max-w-2xl text-xs leading-relaxed text-muted-foreground">
+          默认只需设置主色、主按钮文字与明暗模式；系统会自动生成页面正文、背景、边框、弱化、选中和悬停色。点击“更多”后才按需覆盖个别交互色，停用后不再向用户展示，最多可保存 {MAX_CUSTOM_THEMES} 个。
+        </p>
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={() =>
+              setDrafts((items) =>
+                items.length >= MAX_CUSTOM_THEMES
+                  ? items
+                  : [...items, newCustomTheme(items.length)],
+              )
+            }
+            disabled={drafts.length >= MAX_CUSTOM_THEMES || updateAppearance.isPending}
+          >
+            <PlusIcon className="mr-1.5 size-4" />
+            添加主题
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            onClick={() => void handleSave()}
+            disabled={!hasChanges || updateAppearance.isPending}
+          >
+            <SaveIcon className="mr-1.5 size-4" />
+            保存主题库
+          </Button>
+        </div>
+      </div>
+
+      {drafts.length === 0 ? (
+        <div className="rounded-lg border border-dashed bg-muted/20 px-5 py-8 text-center">
+          <PaletteIcon className="mx-auto mb-2 size-5 text-muted-foreground" />
+          <div className="text-sm font-medium">还没有自定义主题</div>
+          <p className="mt-1 text-xs text-muted-foreground">
+            添加后，用户可以从右上角主题切换器中自行选择。
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {drafts.map((theme, index) => {
+            const isDefault = appearance?.default_theme === theme.id;
+            const advancedOpen = advancedThemeIds.has(theme.id);
+            const automaticTokens = getCustomThemeAutomaticTokens({
+              primary: theme.primary,
+              mode: theme.mode,
+            });
+            const textColor = theme.text_color ?? automaticTokens["--foreground"] ?? "#202A3A";
+            return (
+              <div key={theme.id} className="space-y-4 rounded-xl border bg-card p-4">
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                  <div className="flex items-center gap-2">
+                    <PaletteIcon className="size-4 text-primary" />
+                    <span className="text-sm font-semibold">主题 {index + 1}</span>
+                    {isDefault && (
+                      <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                        <CheckIcon className="size-3" />
+                        系统默认
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                      <Switch
+                        checked={theme.enabled}
+                        onCheckedChange={(enabled) => patchTheme(theme.id, { enabled })}
+                        aria-label={`启用${theme.name || "自定义主题"}`}
+                      />
+                      {theme.enabled ? "启用" : "停用"}
+                    </label>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant={isDefault ? "default" : "outline"}
+                      onClick={() => void handleSetDefault(theme)}
+                      disabled={!theme.enabled || isDefault || hasChanges || updateAppearance.isPending}
+                    >
+                      设为默认
+                    </Button>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      onClick={() => toggleAdvancedTheme(theme.id)}
+                      aria-expanded={advancedOpen}
+                      aria-controls={`${theme.id}-advanced-colors`}
+                    >
+                      <SlidersHorizontalIcon className="mr-1.5 size-4" />
+                      更多
+                      {advancedOpen ? (
+                        <ChevronUpIcon className="ml-1 size-3.5" />
+                      ) : (
+                        <ChevronDownIcon className="ml-1 size-3.5" />
+                      )}
+                    </Button>
+                    <Button
+                      type="button"
+                      size="icon-sm"
+                      variant="ghost"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() =>
+                        setDrafts((items) =>
+                          items
+                            .filter((item) => item.id !== theme.id)
+                            .map((item, order) => ({ ...item, sort_order: order })),
+                        )
+                      }
+                      title="删除主题"
+                      aria-label={`删除${theme.name || "自定义主题"}`}
+                    >
+                      <Trash2Icon className="size-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(180px,0.55fr)_150px_150px]">
+                  <label className="space-y-1.5">
+                    <span className="text-xs font-medium">主题名称</span>
+                    <Input
+                      value={theme.name}
+                      maxLength={32}
+                      onChange={(event) => patchTheme(theme.id, { name: event.target.value })}
+                      placeholder="例如：品牌浅蓝"
+                    />
+                  </label>
+                  <label className="space-y-1.5">
+                    <span className="text-xs font-medium">基础模式</span>
+                    <Select
+                      value={theme.mode}
+                      onValueChange={(value) =>
+                        patchTheme(theme.id, {
+                          mode: value === "dark" ? "dark" : "light",
+                        })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="light">
+                          <span className="inline-flex items-center gap-1.5"><SunIcon className="size-3.5" />浅色</span>
+                        </SelectItem>
+                        <SelectItem value="dark">
+                          <span className="inline-flex items-center gap-1.5"><MoonIcon className="size-3.5" />深色</span>
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </label>
+                  <label className="space-y-1.5">
+                    <span className="text-xs font-medium">主色值</span>
+                    <Input
+                      value={theme.primary}
+                      maxLength={7}
+                      className="font-mono uppercase"
+                      onChange={(event) => patchTheme(theme.id, { primary: event.target.value })}
+                      onBlur={() =>
+                        patchTheme(theme.id, {
+                          primary: normalizeHexColor(theme.primary),
+                        })
+                      }
+                      aria-label={`${theme.name || "自定义主题"}主色十六进制值`}
+                    />
+                  </label>
+                  <div className="space-y-1.5">
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="text-xs font-medium">主按钮文字</span>
+                      {theme.text_color ? (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 px-1.5 text-[11px]"
+                          onClick={() => patchTheme(theme.id, { text_color: null })}
+                        >
+                          自动
+                        </Button>
+                      ) : (
+                        <span className="text-[11px] text-muted-foreground">自动</span>
+                      )}
+                    </div>
+                    <Input
+                      value={textColor}
+                      maxLength={7}
+                      className="font-mono uppercase"
+                      onChange={(event) =>
+                        patchTheme(theme.id, { text_color: event.target.value })
+                      }
+                      onBlur={(event) =>
+                        patchTheme(theme.id, {
+                          text_color: event.target.value.trim()
+                            ? normalizeHexColor(event.target.value)
+                            : null,
+                        })
+                      }
+                        aria-label={`${theme.name || "自定义主题"}主按钮文字十六进制值`}
+                    />
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap items-end gap-3 rounded-lg border bg-muted/15 p-3">
+                  <div className="space-y-1.5">
+                    <span className="text-xs font-medium">选择主色</span>
+                    <InlineThemeColorPicker
+                      value={theme.primary}
+                      swatchColors={SUGGESTED_COLORS}
+                      onCommit={(primary) => patchTheme(theme.id, { primary })}
+                      ariaLabel={`${theme.name || "自定义主题"}主色选色器`}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <span className="text-xs font-medium">选择主按钮文字</span>
+                    <InlineThemeColorPicker
+                      value={textColor}
+                      fallback="#202A3A"
+                      swatchColors={TEXT_COLORS}
+                      onCommit={(text_color) => patchTheme(theme.id, { text_color })}
+                      ariaLabel={`${theme.name || "自定义主题"}主按钮文字选色器`}
+                    />
+                  </div>
+                  <div className="flex flex-wrap gap-1.5 pb-0.5">
+                    {SUGGESTED_COLORS.map((color) => (
+                      <button
+                        key={color}
+                        type="button"
+                        className={cn(
+                          "size-7 rounded-md border shadow-sm transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                          normalizeHexColor(theme.primary) === color
+                            ? "ring-2 ring-primary ring-offset-2"
+                            : "border-border",
+                        )}
+                        style={{ backgroundColor: color }}
+                        onClick={() => patchTheme(theme.id, { primary: color })}
+                        title={`使用 ${color}`}
+                        aria-label={`使用主色 ${color}`}
+                      />
+                    ))}
+                  </div>
+                </div>
+
+                {advancedOpen && (
+                  <div id={`${theme.id}-advanced-colors`}>
+                    <AdvancedThemeColorControls
+                      theme={theme}
+                      onPatch={(patch) => patchTheme(theme.id, patch)}
+                    />
+                  </div>
+                )}
+
+                <CustomThemePreview theme={{ ...theme, primary: normalizeHexColor(theme.primary) }} />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

frontend-web/src/components/workspace/workspace-nav-chat-list.tsx

@@ -184,7 +184,7 @@ export function WorkspaceNavChatList({
                 </Link>
               </SidebarMenuButton>
             </SidebarMenuItem>
-            <SidebarMenuItem>
+            {/* <SidebarMenuItem>
               <SidebarMenuButton
                 isActive={pathname.startsWith("/page/workspace/roundtable/position")}
                 asChild
@@ -192,10 +192,10 @@ export function WorkspaceNavChatList({
               >
                 <Link href="/page/workspace/roundtable/position">
                   <BriefcaseBusiness />
-                  <span>岗位会商</span>
+                  <span>岗位会商1</span>
                 </Link>
               </SidebarMenuButton>
-            </SidebarMenuItem>
+            </SidebarMenuItem> */}
             <SidebarMenuItem>
               <SidebarMenuButton
                 isActive={pathname === "/page/workspace/scheduled/tasks"}