feat(ui): 浅蓝主题、外观设置与圆桌看板主题适配，优化工作区布局

新增 lightblue 主题与外观设置联动，圆桌 Step3 看板/report 统一配色；工作区侧边栏、输入框与轻应用 iframe 主题参数同步更新。

Co-authored-by: Cursor <cursoragent@cursor.com>

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { LayoutGridIcon, ListIcon, MoonIcon, SunIcon } from "lucide-react";
+import { DropletIcon, LayoutGridIcon, ListIcon, MoonIcon, SunIcon } from "lucide-react";
 import { useMemo, type ComponentType, type SVGProps } from "react";
 import { toast } from "sonner";
 
@@ -58,15 +58,15 @@ export function AppearanceSettingsPage() {
   const cleanupWords =
     citationDisplay?.cleanup_words ?? settings.display.citationCleanupWords ?? [];
 
-  const handleSetGlobalDefault = async (value: "light" | "dark") => {
+  const handleSetGlobalDefault = async (
+    value: "light" | "dark" | "lightblue",
+  ) => {
     if (value === globalDefault) return;
     try {
       await updateAppearance.mutateAsync({ default_theme: value });
-      toast.success(
-        value === "light"
-          ? "已将系统默认主题设置为浅色"
-          : "已将系统默认主题设置为深色",
-      );
+      const label =
+        value === "light" ? "浅色" : value === "dark" ? "深色" : "浅蓝";
+      toast.success(`已将系统默认主题设置为${label}`);
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "保存失败");
     }
@@ -107,12 +107,20 @@ export function AppearanceSettingsPage() {
         description: t.settings.appearance.darkDescription,
         icon: MoonIcon,
       },
+      {
+        id: "lightblue",
+        label: t.settings.appearance.lightblue,
+        description: t.settings.appearance.lightblueDescription,
+        icon: DropletIcon,
+      },
     ],
     [
       t.settings.appearance.dark,
       t.settings.appearance.darkDescription,
       t.settings.appearance.light,
       t.settings.appearance.lightDescription,
+      t.settings.appearance.lightblue,
+      t.settings.appearance.lightblueDescription,
     ],
   );
 
@@ -130,7 +138,7 @@ export function AppearanceSettingsPage() {
               label={option.label}
               description={option.description}
               active={currentTheme === option.id}
-              mode={option.id as "light" | "dark"}
+              mode={option.id as "light" | "dark" | "lightblue"}
               onSelect={(value) => setTheme(value)}
             />
           ))}
@@ -165,9 +173,23 @@ export function AppearanceSettingsPage() {
                 <MoonIcon className="mr-1.5 size-4" />
                 深色
               </Button>
+              <Button
+                type="button"
+                variant={globalDefault === "lightblue" ? "default" : "outline"}
+                size="sm"
+                onClick={() => void handleSetGlobalDefault("lightblue")}
+                disabled={updateAppearance.isPending}
+              >
+                <DropletIcon className="mr-1.5 size-4" />
+                浅蓝
+              </Button>
               <p className="text-muted-foreground ml-2 text-xs">
                 当前系统默认：
-                {globalDefault === "light" ? "浅色" : "深色"}
+                {globalDefault === "light"
+                  ? "浅色"
+                  : globalDefault === "dark"
+                    ? "深色"
+                    : "浅蓝"}
               </p>
             </div>
           </SettingsSection>
@@ -370,8 +392,8 @@ function ThemePreviewCard({
   label: string;
   description: string;
   active: boolean;
-  mode: "light" | "dark";
-  onSelect: (mode: "light" | "dark") => void;
+  mode: "light" | "dark" | "lightblue";
+  onSelect: (mode: "light" | "dark" | "lightblue") => void;
 }) {
   const previewMode = mode;
   return (
@@ -401,14 +423,20 @@ function ThemePreviewCard({
           "relative overflow-hidden rounded-md border text-xs transition-colors",
           previewMode === "dark"
             ? "border-neutral-800 bg-neutral-900 text-neutral-200"
-            : "border-slate-200 bg-white text-slate-900",
+            : previewMode === "lightblue"
+              ? "border-blue-200 bg-white text-slate-900"
+              : "border-slate-200 bg-white text-slate-900",
         )}
       >
         <div className="border-border/50 flex items-center gap-2 border-b px-3 py-2">
           <div
             className={cn(
               "h-2 w-2 rounded-full",
-              previewMode === "dark" ? "bg-emerald-400" : "bg-emerald-500",
+              previewMode === "dark"
+                ? "bg-emerald-400"
+                : previewMode === "lightblue"
+                  ? "bg-blue-500"
+                  : "bg-emerald-500",
             )}
           />
           <div className="h-2 w-10 rounded-full bg-current/20" />