feat(ui): theme & layout improvements

- Dark-blue theme background assets and styling integration
- Appearance settings with layoutMode (full/compact) preference
- Settings dialog and auth context updates
- AI writing form and panel refinements
- Open Canvas context updates
- Roundtable planning styling and dashboard enhancements
- Strategy components and header updates
- Light app management and routing improvements
- Global style enhancements for dark theme
- Various page layout and workspace routing optimizations

frontend-web/src/components/page-sdebar.css

@@ -379,6 +379,13 @@
     overflow-y: hidden;
 }
 
+/* 左右分组：不撑满、不裁切选中高光 */
+.top-submenu-bar--group {
+    flex: 0 0 auto;
+    margin-left: 0;
+    overflow: visible;
+}
+
 .top-submenu-list {
     min-width: max-content;
     height: 64px;
@@ -398,48 +405,31 @@
     border: 0;
     padding: 0 18px;
     background: transparent;
-    color: rgba(224, 242, 255, 0.9);
+    color: rgba(255, 255, 255, 0.8);
     font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
-    font-size: 16px;
+    font-size: 18px;
     line-height: 1;
     font-weight: 700;
     letter-spacing: 0;
     white-space: nowrap;
     cursor: pointer;
-    overflow: hidden;
-    transition: color 0.18s ease, text-shadow 0.18s ease, background 0.18s ease;
+    overflow: visible;
+    transition: color 0.18s ease, text-shadow 0.18s ease;
 }
 
-.top-submenu-item:hover,
+.top-submenu-item:hover {
+    color: #9fe3ff;
+    text-shadow: 0 0 10px rgba(91, 210, 255, 0.4);
+}
+
+/* 选中态：设计稿提供的 nav-active.svg 发光高光 + 青色文字 */
 .top-submenu-item--active {
-    color: #ffffff;
-    text-shadow: 0 0 10px rgba(91, 210, 255, 0.45);
-    background:
-        linear-gradient(135deg, rgba(15, 84, 169, 0.52) 0%, rgba(5, 43, 103, 0.34) 76%),
-        linear-gradient(180deg, rgba(39, 126, 230, 0.2) 0%, rgba(0, 50, 122, 0.26) 100%);
-    box-shadow: inset 0 1px 0 rgba(98, 180, 255, 0.16), inset 0 -18px 22px rgba(0, 31, 79, 0.24);
-}
-
-.top-submenu-item--active::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 2px;
-    background: linear-gradient(90deg, rgba(59, 162, 255, 0) 0%, #35d7ff 50%, rgba(59, 162, 255, 0) 100%);
-    box-shadow: 0 0 12px rgba(53, 215, 255, 0.9), 0 -6px 18px rgba(33, 143, 255, 0.36);
-}
-
-.top-submenu-item--active::after {
-    content: '';
-    position: absolute;
-    left: 16px;
-    right: 16px;
-    bottom: 0;
-    height: 16px;
-    background: radial-gradient(ellipse at bottom, rgba(37, 189, 255, 0.34) 0%, rgba(37, 189, 255, 0) 68%);
-    pointer-events: none;
+    color: #64cdf5;
+    text-shadow: 0 0 12px rgba(100, 205, 245, 0.5);
+    background-image: url("../assets/img/nav-active.svg");
+    background-repeat: no-repeat;
+    background-position: center calc(50% + 7px);
+    background-size: 152px 42px;
 }
 
 .third-submenu-bar {

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

@@ -1,7 +1,8 @@
 "use client";
 
-import { DropletIcon, LayoutGridIcon, ListIcon, MoonIcon, SunIcon } from "lucide-react";
+import { DropletIcon, LayoutGridIcon, LayoutIcon, ListIcon, MoonIcon, PanelLeftIcon, SunIcon } from "lucide-react";
 import { useMemo, type ComponentType, type SVGProps } from "react";
+import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
 import { useTheme } from "@/contexts/ThemeContext";
@@ -42,9 +43,10 @@ const languageOptions: { value: Locale; label: string }[] = [
   { value: "zh-CN", label: zhCN.locale.localName },
 ];
 
-export function AppearanceSettingsPage() {
+export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
   const { t, locale, changeLocale } = useI18n();
   const { theme, setTheme } = useTheme();
+  const navigate = useNavigate();
   const currentTheme = theme;
   const [settings, setSettings] = useLocalSettings();
   const isAdmin = getStoredAuth()?.system_role === "admin";
@@ -145,6 +147,42 @@ export function AppearanceSettingsPage() {
         </div>
       </SettingsSection>
 
+      <Separator />
+
+      <SettingsSection
+        title="界面模式"
+        description="全量模式展示侧边栏与顶栏导航；简洁模式隐藏侧边栏与顶栏，获得更大的工作区。"
+      >
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant={settings.display.layoutMode !== "compact" ? "default" : "outline"}
+            size="sm"
+            onClick={() => {
+              setSettings("display", { layoutMode: "full" });
+              onClose?.();
+              navigate("/page/workspace/chats/new");
+            }}
+          >
+            <PanelLeftIcon className="mr-1.5 size-4" />
+            全量模式
+          </Button>
+          <Button
+            type="button"
+            variant={settings.display.layoutMode === "compact" ? "default" : "outline"}
+            size="sm"
+            onClick={() => {
+              setSettings("display", { layoutMode: "compact" });
+              onClose?.();
+              navigate("/page/workspace/chats/new");
+            }}
+          >
+            <LayoutIcon className="mr-1.5 size-4" />
+            简洁模式
+          </Button>
+        </div>
+      </SettingsSection>
+
       {isAdmin && (
         <>
           <Separator />

frontend-web/src/components/workspace/settings/settings-dialog.tsx

@@ -121,7 +121,9 @@ export function SettingsDialog(props: SettingsDialogProps) {
           <ScrollArea className="h-full min-h-0 min-w-0 rounded-lg border">
             <div className="min-w-0 space-y-8 p-6">
               {activeSection === "account" && <AccountSettingsPage />}
-              {activeSection === "appearance" && <AppearanceSettingsPage />}
+              {activeSection === "appearance" && (
+                <AppearanceSettingsPage onClose={() => props.onOpenChange?.(false)} />
+              )}
               {activeSection === "memory" && <MemorySettingsPage />}
               {activeSection === "tools" && <ToolSettingsPage />}
               {activeSection === "about" && <AboutSettingsPage />}