Merge remote-tracking branch 'origin/master' into ji

# Conflicts: # frontend-web/src/components/workspace/input-box.tsx # offline-backend-20260512/backend/CLAUDE.md
2026-06-16 11:07:31 +08:00
commit fa70b31873
@@ -43,8 +43,8 @@
    width: 100%;
    height: 75px;
    margin-top: 13px;
-    font-family: Noto Sans S Chinese;
-    font-weight: 500;
+    font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
+    font-weight: 700;
    color: #fff;
    font-size: 20px;
    display: flex;
@@ -111,6 +111,42 @@
    word-break: break-all;
 }

+.sidebar-contnet--top-submenu .sidebar-contents {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.sidebar-contnet--top-submenu .item-nav {
+    height: auto;
+    min-height: 75px;
+    padding: 10px 2px;
+    font-size: 19px;
+    line-height: 1.35;
+}
+
+.sidebar-contnet--top-submenu .item-nav__label {
+    width: 3.1em;
+    max-width: 100%;
+    padding-left: 0;
+    letter-spacing: 0;
+    line-height: 1.35;
+    text-align: center;
+    word-break: normal;
+    overflow-wrap: normal;
+    white-space: normal;
+}
+
+.sidebar-contnet--top-submenu .item-nav__label--four-char {
+    width: 2.2em;
+}
+
+.sidebar-contnet--top-submenu .item-nav:hover::after,
+.sidebar-contnet--top-submenu .item-nav-active::after,
+.sidebar-contnet--top-submenu .item-nav-hovered::after {
+    top: auto;
+    bottom: 0;
+}
+
 .item-nav-content {
    width: 155px;
    height: calc(100vh - 4rem - 20px);
@@ -194,10 +230,10 @@
    border: 0;
    background: transparent;
    padding: 3px 0;
-    font-family: Noto Sans S Chinese;
+    font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
    font-size: 18px;
    line-height: 16px;
-    font-weight: 500;
+    font-weight: 700;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
@@ -343,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;
@@ -362,48 +405,31 @@
    border: 0;
    padding: 0 18px;
    background: transparent;
-    color: rgba(224, 242, 255, 0.9);
-    font-family: Noto Sans S Chinese;
-    font-size: 16px;
+    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: 18px;
    line-height: 1;
-    font-weight: 500;
+    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 {
@@ -443,10 +469,10 @@
    padding: 0 16px;
    background: rgba(2, 28, 65, 0.36);
    color: rgba(221, 242, 255, 0.78);
-    font-family: Noto Sans S Chinese;
+    font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1;
-    font-weight: 500;
+    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
@@ -472,3 +498,248 @@
    background: linear-gradient(90deg, rgba(62, 178, 255, 0) 0%, #4ee6ff 50%, rgba(62, 178, 255, 0) 100%);
    box-shadow: 0 0 10px rgba(78, 230, 255, 0.72);
 }
+
+/* ══════════════════════════════════════════════════════════════════════
+   浅色主题导航（红/蓝两套，颜色经 --brand-* 变量自动切换）
+   逻辑同深色：一级导航在顶栏、二级导航在侧边栏、三级导航在顶栏下方横条。
+   但一级导航不做深色那种围绕基座的特殊处理，正常横排即可。
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── 顶栏一级导航（白字落在 red/blue-header banner 上）──────────────────── */
+.light-topnav {
+    display: flex;
+    align-items: center;
+    height: 64px;
+    min-width: 0;
+    gap: 6px;
+    /* 整体往右移（用百分比，随容器宽度自适应；约等于宽屏下的 200px 量级） */
+    margin-left: 10%;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.light-topnav-item {
+    position: relative;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    padding: 0 18px;
+    border: 0;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.85);
+    /* 复用全局字体栈（与「多智能体会商」等页面一致）：Source Han Sans SC 在 Windows 上
+       常按字重分家族，放栈首会导致 font-weight 选不到粗体；用 --font-sans（Noto Sans SC
+       领先）才能正常加粗。 */
+    font-family: var(--font-sans);
+    font-size: 16px;
+    /* 普通项用 500（雅黑兜底下渲染为常规字面），选中项 700 才能看出粗体对比 */
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 0.18s ease;
+}
+
+.light-topnav-item:hover {
+    color: #ffffff;
+}
+
+/* 选中态：不改背景，文字加粗变亮 + 贴近导航栏底部一条粗白线 */
+.light-topnav-item--active,
+.light-topnav-item--active:hover {
+    color: #ffffff;
+    font-weight: 700;
+}
+
+.light-topnav-item--active::after {
+    content: '';
+    position: absolute;
+    left: 12px;
+    right: 12px;
+    bottom: 0;
+    height: 4px;
+    border-radius: 3px 3px 0 0;
+    background: #ffffff;
+}
+
+/* ── 侧边栏：二级图标卡片列（96px）+ 右侧三级列（展开时整体变宽，带过渡）──────── */
+.light-sidebar {
+    position: fixed;
+    left: 0;
+    top: 4rem;
+    z-index: 40;
+    width: 96px;
+    height: calc(100vh - 4rem);
+    display: flex;
+    flex-direction: row;
+    background: #ffffff;
+    border-right: 1px solid var(--border);
+    box-sizing: border-box;
+    overflow: hidden;
+    /* 展开三级列时整体变宽的过渡动画 */
+    transition: width 0.3s ease;
+}
+
+/* 展开三级列：96(二级) + 140(三级) = 236px */
+.light-sidebar--expanded {
+    width: 236px;
+}
+
+/* 二级列：固定 96px，竖排图标卡片 + 底部设置 */
+.light-sidebar__primary {
+    flex: 0 0 96px;
+    width: 96px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    /* 横向 padding 置 0：让选中态浅红背景能铺满与列宽一致 */
+    padding: 10px 0;
+    box-sizing: border-box;
+}
+
+/* 三级列：固定 140px，随侧边栏展开淡入 */
+.light-sidebar__secondary {
+    flex: 0 0 140px;
+    width: 140px;
+    height: 100%;
+    border-left: 1px solid var(--border);
+    /* 横向 padding 置 0：让三级选中背景能铺满与列宽一致（文字内缩由 subitem 自身 padding 保证） */
+    padding: 12px 0;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: #ffffff;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.light-sidebar--expanded .light-sidebar__secondary {
+    opacity: 1;
+}
+
+.light-sidebar__list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.light-sidebar-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 14px 4px;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: #222222;
+    /* 复用全局字体栈，确保加粗生效（详见 .light-topnav-item 注释） */
+    font-family: var(--font-sans);
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.3;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.light-sidebar-item__icon {
+    flex-shrink: 0;
+    /* 图标统一用主题色（红主题红、蓝主题蓝） */
+    color: var(--brand-900);
+    transition: color 0.18s ease, transform 0.18s ease;
+}
+
+.light-sidebar-item__label {
+    display: block;
+    width: 100%;
+    word-break: break-word;
+}
+
+.light-sidebar-item:hover {
+    background: var(--brand-200);
+}
+
+.light-sidebar-item:hover .light-sidebar-item__icon {
+    color: var(--brand-900);
+    transform: scale(1.05);
+}
+
+.light-sidebar-item--active {
+    background: var(--brand-200);
+    color: var(--brand-900);
+    font-weight: 600;
+    /* 选中态：去圆角去边框，浅红底铺满父元素宽度，右侧一条粗主题色边（用 inset 阴影避免挤压内容） */
+    box-shadow: inset -4px 0 0 0 var(--brand-900);
+}
+
+.light-sidebar-item--active .light-sidebar-item__icon {
+    color: var(--brand-900);
+}
+
+/* 侧边栏底部：设置入口（浅色模式不支持收起，故无收起按钮） */
+.light-sidebar__footer {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-top: 8px;
+    border-top: 1px solid var(--border);
+}
+
+/* ── 三级列条目（左对齐图标 + 文字，参考 xiugai-1.png）─────────────────────── */
+.light-sidebar-subnav {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.light-sidebar-subitem {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 10px;
+    border: 0;
+    background: transparent;
+    color: #222222;
+    font-family: var(--font-sans);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.3;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.light-sidebar-subitem__icon {
+    flex-shrink: 0;
+    /* 图标用主题色（红主题红、蓝主题蓝） */
+    color: var(--brand-900);
+}
+
+.light-sidebar-subitem__label {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.light-sidebar-subitem:hover {
+    background: var(--brand-200);
+}
+
+.light-sidebar-subitem--active {
+    background: var(--brand-200);
+    color: var(--brand-900);
+    font-weight: 700;
+    box-shadow: inset -4px 0 0 0 var(--brand-900);
+}
@@ -124,6 +124,13 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
    }
  };

+  const handleSecondItemClick = (item: MenuItem) => {
+    const path = item.path ?? findFirstRoutePath(item.children);
+    if (path) {
+      navigate(path);
+    }
+  };
+
  const handleMenuItemClick = (item: MenuItem) => {
    if (item.children?.length) {
      toggleExpanded(item.id);
@@ -135,6 +142,35 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
    }
  };

+  const activeTopItem =
+    visibleMenuItems.find((item) => item.id === activeTopId) ??
+    visibleMenuItems.find(hasActiveChild) ??
+    visibleMenuItems[0];
+  const sidebarMenuItemsToRender = inWujieEnv
+    ? visibleMenuItems
+    : activeTopItem?.children ?? [];
+  const isSidebarItemActive = (item: MenuItem) =>
+    inWujieEnv
+      ? item.id === activeTopId
+      : item.path
+        ? pathname === item.path
+        : hasActiveChild(item);
+  const handleSidebarItemClick = (item: MenuItem) => {
+    if (inWujieEnv) {
+      handleTopItemClick(item);
+      return;
+    }
+
+    handleSecondItemClick(item);
+  };
+  const getSidebarLabelClassName = (label: string) => {
+    if (!inWujieEnv && Array.from(label.trim()).length === 4) {
+      return "item-nav__label item-nav__label--four-char";
+    }
+
+    return "item-nav__label";
+  };
+
  const renderFlyoutMenu = (items: MenuItem[], level = 0) => (
    <div className={`sidebar-flyout-list sidebar-flyout-list--level-${level}`}>
      {items.map((item) => {
@@ -181,7 +217,7 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
  return (
    <aside className={`sidebar-contnet ${inWujieEnv ? "" : "sidebar-contnet--top-submenu"}`}>
      <div className="sidebar-contents">
-        {visibleMenuItems.map((item) => (
+        {sidebarMenuItemsToRender.map((item) => (
          <div
            key={item.id}
            className="item-nav-group"
@@ -198,10 +234,10 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
            <div className="item-nav-wrap">
              <button
                type="button"
-                className={`item-nav ${item.id === activeTopId ? "item-nav-active" : ""} ${hoveredTopId === item.id ? "item-nav-hovered" : ""}`}
-                onClick={() => handleTopItemClick(item)}
+                className={`item-nav ${isSidebarItemActive(item) ? "item-nav-active" : ""} ${hoveredTopId === item.id ? "item-nav-hovered" : ""}`}
+                onClick={() => handleSidebarItemClick(item)}
              >
-                <span className="item-nav__label">{item.label}</span>
+                <span className={getSidebarLabelClassName(item.label)}>{item.label}</span>
              </button>
              {inWujieEnv && item.children?.length && hoveredTopId === item.id ? (
                <span className="item-nav-hover-bridge" aria-hidden="true" />
@@ -0,0 +1,303 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import {
+  Bell,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  Folder,
+  FolderOpen,
+  Settings,
+  User,
+  Wrench,
+} from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { NotificationDialog } from "@/components/workspace/notification-dialog";
+import { SettingsDialog } from "@/components/workspace/settings";
+import { useTheme } from "@/contexts/ThemeContext";
+import { getStoredAuth } from "@/core/auth";
+import { useI18n } from "@/core/i18n/hooks";
+import { useUnreadCount } from "@/core/notifications";
+import {
+  defaultExpandedIds,
+  type MenuItem,
+} from "@/core/page-layout/sidebar-menu";
+import { useSidebarMenuItems } from "@/core/page-layout/use-sidebar-menu";
+
+type PageSidebarProps = {
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+};
+
+type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";
+
+export function PageSidebar({
+  collapsed,
+  onToggleCollapsed,
+}: PageSidebarProps) {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const isAdmin = getStoredAuth()?.system_role === "admin";
+  const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
+  const { t } = useI18n();
+  const { data: unreadCount = 0 } = useUnreadCount();
+  // defaultExpandedIds 是共享的 ReadonlySet，复制一份给 useState（避免外部突变）
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set(defaultExpandedIds));
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsDefaultSection, setSettingsDefaultSection] =
+    useState<SettingsSection>("appearance");
+  const [notificationOpen, setNotificationOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const openSettings = (section: SettingsSection) => {
+    setSettingsDefaultSection(section);
+    setSettingsOpen(true);
+  };
+
+  const iconButtonClass = isDark
+    ? "rounded-lg p-2 text-slate-400 transition-all duration-300 ease-out hover:scale-105 hover:bg-slate-800/50 hover:text-white"
+    : "rounded-lg p-2 text-gray-500 transition-all duration-300 ease-out hover:scale-105 hover:bg-red-50 hover:text-red-600";
+  const panelClass = isDark
+    ? "ml-4 space-y-1 border-l border-blue-800/30 pl-4"
+    : "ml-4 space-y-1 border-l border-red-100 pl-4";
+  const labelClass = (compact: boolean, small = false) =>
+    `overflow-hidden whitespace-nowrap transition-all duration-300 ease-out ${
+      compact ? "max-w-0 opacity-0" : "max-w-[220px] opacity-100"
+    } ${small ? "text-xs" : "text-sm"} flex-1 font-medium`;
+  const menuButtonClass = (isActive: boolean, depth = 0) =>
+    `group relative flex w-full items-center rounded-[2px] py-2 text-left transition-all duration-300 ease-out theme-transition ${
+      collapsed && depth === 0 ? "justify-center px-2" : "gap-3 px-3"
+    } ${
+      isActive
+        ? isDark
+          ? "bg-blue-500/15 text-cyan-300 font-semibold"
+          : "bg-red-50 text-red-600 font-semibold"
+        : isDark
+          ? "text-slate-400 hover:bg-slate-800/50 hover:text-white"
+          : "text-gray-600 hover:bg-red-50 hover:text-red-600"
+    }`;
+  const footerButtonClass = menuButtonClass(false, 0);
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const renderLeaf = (item: MenuItem, depth = 0) => {
+    const Icon = item.icon;
+    const isActive = !!item.path && pathname === item.path;
+
+    return (
+      <button
+        key={item.id}
+        type="button"
+        title={collapsed && depth === 0 ? item.label : undefined}
+        onClick={() => item.path && navigate(item.path)}
+        className={menuButtonClass(isActive, depth)}
+      >
+        {isActive && (
+          <span
+            className={`absolute left-0 inset-y-0 w-[3px] rounded-r ${
+              isDark ? "bg-cyan-300" : "bg-red-600"
+            }`}
+          />
+        )}
+        <Icon className={`${depth === 0 ? "h-[18px] w-[18px]" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out group-hover:scale-105`} />
+        {(!collapsed || depth > 0) && (
+          <span className={labelClass(false, depth > 0)}>
+            {item.label}
+          </span>
+        )}
+      </button>
+    );
+  };
+
+  const renderBranch = (item: MenuItem, depth = 0) => {
+    const expanded = expandedIds.has(item.id);
+    const isTopLevel = depth === 0;
+    const Icon = depth > 0 && item.icon === Folder && expanded ? FolderOpen : item.icon;
+
+    return (
+      <div key={item.id} className="space-y-1">
+        <button
+          type="button"
+          onClick={() => {
+            if (collapsed && isTopLevel) {
+              onToggleCollapsed();
+              return;
+            }
+            toggleExpanded(item.id);
+          }}
+          title={collapsed && isTopLevel ? item.label : undefined}
+          className={menuButtonClass(false, depth)}
+        >
+          <Icon
+            className={`${isTopLevel ? "h-[18px] w-[18px]" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out group-hover:scale-105 ${
+              expanded && depth > 0 ? "scale-105" : ""
+            }`}
+          />
+          {(!collapsed || !isTopLevel) && (
+            <span className={labelClass(false, depth > 0)}>
+              {item.label}
+            </span>
+          )}
+          {(!collapsed || !isTopLevel) && (
+            <ChevronRight
+              className={`h-4 w-4 transition-transform duration-300 ease-out ${expanded ? "rotate-90" : ""}`}
+            />
+          )}
+        </button>
+
+        {(!collapsed || !isTopLevel) && item.children && (
+          <div
+            className={`${panelClass} overflow-hidden transition-all duration-300 ease-out ${
+              expanded ? "max-h-[1200px] opacity-100" : "max-h-0 opacity-0"
+            }`}
+          >
+            {item.children.map((child) =>
+              child.children ? renderBranch(child, depth + 1) : renderLeaf(child, depth + 1),
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <SettingsDialog
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        defaultSection={settingsDefaultSection}
+      />
+      <NotificationDialog
+        open={notificationOpen}
+        onOpenChange={setNotificationOpen}
+      />
+      <aside
+        className={`fixed left-0 top-16 z-40 flex h-[calc(100vh-4rem)] flex-col overflow-hidden shadow-sm theme-transition transition-all duration-300 ${
+          isDark
+            ? "border-r border-blue-800/30 bg-slate-900"
+            : "border-r border-red-100 bg-white"
+        } ${collapsed ? "w-16" : "w-64"}`}
+      >
+      <button
+        type="button"
+        onClick={onToggleCollapsed}
+        title={collapsed ? "展开侧边栏" : "收起侧边栏"}
+        className={`absolute -right-3 top-6 z-50 flex h-6 w-6 items-center justify-center rounded-full shadow-md theme-transition ${
+          isDark
+            ? "bg-slate-700 text-slate-300 hover:bg-slate-600"
+            : "bg-white text-gray-500 hover:bg-red-50 hover:text-red-600 border border-red-100"
+        }`}
+      >
+        {collapsed ? <ChevronRight className="h-3 w-3" /> : <ChevronLeft className="h-3 w-3" />}
+      </button>
+
+      <nav className={`flex-1 overflow-y-auto ${collapsed ? "p-2" : "p-4"} space-y-2 transition-all duration-300 ease-out`}>
+        {visibleMenuItems.map((item) =>
+          item.children ? renderBranch(item) : renderLeaf(item),
+        )}
+      </nav>
+
+      <div
+        className={`mt-auto shrink-0 theme-transition ${
+          isDark ? "border-t border-blue-800/30" : "border-t border-red-100"
+        } ${collapsed ? "p-2" : "p-4"}`}
+      >
+        {mounted ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                title={collapsed ? t.workspace.settingsAndMore : undefined}
+                className={footerButtonClass}
+              >
+                <Settings className="h-5 w-5 flex-shrink-0" />
+                {!collapsed && (
+                  <>
+                    <span className={labelClass(false)}>
+                      {t.workspace.settingsAndMore}
+                    </span>
+                    <ChevronsUpDown className="h-4 w-4 flex-shrink-0" />
+                  </>
+                )}
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align={collapsed ? "start" : "end"}
+              side={collapsed ? "right" : "top"}
+              sideOffset={4}
+              className="min-w-56 rounded-lg"
+            >
+              <DropdownMenuItem onClick={() => setNotificationOpen(true)}>
+                <Bell className="size-4" />
+                {t.notifications.title}
+                {unreadCount > 0 && (
+                  <span
+                    className={`ml-auto flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium leading-none text-white ${
+                      isDark ? "bg-cyan-500" : "bg-red-500"
+                    }`}
+                  >
+                    {unreadCount > 99 ? "99+" : unreadCount}
+                  </span>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => openSettings("tools")}>
+                <Wrench className="size-4" />
+                {t.settings.sections.tools}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => openSettings("account")}>
+                <User className="size-4" />
+                个人信息
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <button
+            type="button"
+            className={`${footerButtonClass} pointer-events-none`}
+          >
+            <Settings className="h-5 w-5 flex-shrink-0" />
+            {!collapsed && (
+              <span className={labelClass(false)}>
+                {t.workspace.settingsAndMore}
+              </span>
+            )}
+          </button>
+        )}
+      </div>
+
+      <div
+        className={`pointer-events-none absolute right-0 top-0 h-32 w-32 rounded-full blur-3xl theme-transition ${
+          isDark ? "bg-blue-500/10" : "bg-red-500/5"
+        }`}
+      />
+      <div
+        className={`pointer-events-none absolute bottom-20 right-0 h-24 w-24 rounded-full blur-3xl theme-transition ${
+          isDark ? "bg-cyan-400/5" : "bg-red-400/5"
+        }`}
+      />
+    </aside>
+    </>
+  );
+}
@@ -22,14 +22,18 @@ import { NotificationDialog } from "@/components/workspace/notification-dialog";
 import { SettingsDialog } from "@/components/workspace/settings";
 import { useTheme } from "@/contexts/ThemeContext";
 import { getStoredAuth } from "@/core/auth";
+import { isWujieEnv } from "@/core/embed/wujie";
 import { useI18n } from "@/core/i18n/hooks";
 import { useUnreadCount } from "@/core/notifications";
 import {
  defaultExpandedIds,
+  getActiveThirdLevelItems,
  type MenuItem,
 } from "@/core/page-layout/sidebar-menu";
 import { useSidebarMenuItems } from "@/core/page-layout/use-sidebar-menu";

+import "@/components/page-sdebar.css";
+
 type PageSidebarProps = {
  collapsed: boolean;
  onToggleCollapsed: () => void;
@@ -37,7 +41,201 @@ type PageSidebarProps = {

 type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";

-export function PageSidebar({
+const hasActiveChild = (item: MenuItem, pathname: string): boolean => {
+  if (item.path && pathname === item.path) {
+    return true;
+  }
+  return item.children?.some((child) => hasActiveChild(child, pathname)) ?? false;
+};
+
+const findFirstRoutePath = (items?: MenuItem[]): string | null => {
+  if (!items?.length) {
+    return null;
+  }
+  for (const child of items) {
+    if (child.path) {
+      return child.path;
+    }
+    const nested = findFirstRoutePath(child.children);
+    if (nested) {
+      return nested;
+    }
+  }
+  return null;
+};
+
+/**
+ * 浅色侧边栏入口。
+ *
+ * - 普通桌面环境：渲染「二级导航图标卡片」（一级在顶栏、二级在侧边栏，参考 导航-1.png）。
+ * - wujie 嵌入环境：顶栏被宿主隐藏，一级导航无处安放，故回落到原手风琴整树菜单
+ *   （保证嵌入模式下所有层级仍可达，零回归）。
+ */
+export function PageSidebar({ collapsed, onToggleCollapsed }: PageSidebarProps) {
+  if (isWujieEnv()) {
+    return (
+      <LegacyAccordionSidebar
+        collapsed={collapsed}
+        onToggleCollapsed={onToggleCollapsed}
+      />
+    );
+  }
+  return <SecondaryNavSidebar />;
+}
+
+/**
+ * 浅色二级导航侧边栏（图标卡片，红/蓝主题色经 --brand-* 变量自动切换）。
+ * 浅色模式不支持侧边栏收起，故无收起按钮、不接收 collapsed 相关 props。
+ */
+function SecondaryNavSidebar() {
+  const isAdmin = getStoredAuth()?.system_role === "admin";
+  const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
+  const { t } = useI18n();
+  const { data: unreadCount = 0 } = useUnreadCount();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsDefaultSection, setSettingsDefaultSection] =
+    useState<SettingsSection>("appearance");
+  const [notificationOpen, setNotificationOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const openSettings = (section: SettingsSection) => {
+    setSettingsDefaultSection(section);
+    setSettingsOpen(true);
+  };
+
+  // 当前激活的一级菜单（与顶栏一级导航联动）；其 children 即侧边栏要渲染的二级导航。
+  const activeTopItem =
+    visibleMenuItems.find((item) => hasActiveChild(item, pathname)) ??
+    visibleMenuItems[0];
+  const secondaryItems = activeTopItem?.children ?? [];
+
+  const isItemActive = (item: MenuItem) =>
+    item.path ? pathname === item.path : hasActiveChild(item, pathname);
+
+  const handleItemClick = (item: MenuItem) => {
+    const path = item.path ?? findFirstRoutePath(item.children);
+    if (path) {
+      navigate(path);
+    }
+  };
+
+  // 当前激活二级项的三级子项；非空时侧边栏在右侧展开「三级列」并整体变宽（见 css 过渡）。
+  const thirdItems = getActiveThirdLevelItems(visibleMenuItems, pathname);
+  const expanded = thirdItems.length > 0;
+
+  return (
+    <>
+      <SettingsDialog
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        defaultSection={settingsDefaultSection}
+      />
+      <NotificationDialog
+        open={notificationOpen}
+        onOpenChange={setNotificationOpen}
+      />
+      <aside className={`light-sidebar ${expanded ? "light-sidebar--expanded" : ""}`}>
+        {/* 一级列：二级图标卡片 + 底部设置 */}
+        <div className="light-sidebar__primary">
+          <nav className="light-sidebar__list" aria-label="二级菜单">
+            {secondaryItems.map((item) => {
+              const Icon = item.icon;
+              const active = isItemActive(item);
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  title={item.label}
+                  onClick={() => handleItemClick(item)}
+                  className={`light-sidebar-item ${active ? "light-sidebar-item--active" : ""}`}
+                >
+                  <Icon className="light-sidebar-item__icon h-7 w-7" />
+                  <span className="light-sidebar-item__label">{item.label}</span>
+                </button>
+              );
+            })}
+          </nav>
+
+          <div className="light-sidebar__footer">
+            {mounted ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    title={t.workspace.settingsAndMore}
+                    className="light-sidebar-item"
+                  >
+                    <Settings className="light-sidebar-item__icon h-7 w-7" />
+                    <span className="light-sidebar-item__label">设置</span>
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="start"
+                  side="right"
+                  sideOffset={8}
+                  className="min-w-56 rounded-lg"
+                >
+                  <DropdownMenuItem onClick={() => setNotificationOpen(true)}>
+                    <Bell className="size-4" />
+                    {t.notifications.title}
+                    {unreadCount > 0 && (
+                      <span className="ml-auto flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--brand-900)] px-1 text-[10px] font-medium leading-none text-white">
+                        {unreadCount > 99 ? "99+" : unreadCount}
+                      </span>
+                    )}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => openSettings("tools")}>
+                    <Wrench className="size-4" />
+                    {t.settings.sections.tools}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => openSettings("account")}>
+                    <User className="size-4" />
+                    个人信息
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : null}
+          </div>
+        </div>
+
+        {/* 二级列：三级导航（激活二级项有三级子项时展开，整体动画见 css width transition） */}
+        <div className="light-sidebar__secondary" aria-hidden={!expanded}>
+          <nav className="light-sidebar-subnav" aria-label="三级菜单">
+            {thirdItems.map((child) => {
+              const ChildIcon = child.icon;
+              const childActive = child.path
+                ? pathname === child.path
+                : hasActiveChild(child, pathname);
+              return (
+                <button
+                  key={child.id}
+                  type="button"
+                  title={child.label}
+                  onClick={() => handleItemClick(child)}
+                  className={`light-sidebar-subitem ${childActive ? "light-sidebar-subitem--active" : ""}`}
+                >
+                  <ChildIcon className="light-sidebar-subitem__icon h-4 w-4" />
+                  <span className="light-sidebar-subitem__label">{child.label}</span>
+                </button>
+              );
+            })}
+          </nav>
+        </div>
+      </aside>
+    </>
+  );
+}
+
+/**
+ * 旧版浅色整树手风琴侧边栏。仅用于 wujie 嵌入环境（顶栏被宿主隐藏时保证所有层级可达）。
+ */
+function LegacyAccordionSidebar({
  collapsed,
  onToggleCollapsed,
 }: PageSidebarProps) {
@@ -66,9 +264,6 @@ export function PageSidebar({
    setSettingsOpen(true);
  };

-  const iconButtonClass = isDark
-    ? "rounded-lg p-2 text-slate-400 transition-all duration-300 ease-out hover:scale-105 hover:bg-slate-800/50 hover:text-white"
-    : "rounded-lg p-2 text-gray-500 transition-all duration-300 ease-out hover:scale-105 hover:bg-red-50 hover:text-red-600";
  const panelClass = isDark
    ? "ml-4 space-y-1 border-l border-blue-800/30 pl-4"
    : "ml-4 space-y-1 border-l border-red-100 pl-4";
@@ -77,8 +272,8 @@ export function PageSidebar({
      compact ? "max-w-0 opacity-0" : "max-w-[220px] opacity-100"
    } ${small ? "text-xs" : "text-sm"} flex-1 font-medium`;
  const menuButtonClass = (isActive: boolean, depth = 0) =>
-    `flex w-full items-center rounded-lg py-2 text-left transition-all duration-300 ease-out hover:-translate-y-0.5 theme-transition ${
-      collapsed && depth === 0 ? "justify-center px-2" : "gap-2 px-3"
+    `group relative flex w-full items-center rounded-[2px] py-2 text-left transition-all duration-300 ease-out theme-transition ${
+      collapsed && depth === 0 ? "justify-center px-2" : "gap-3 px-3"
    } ${
      isActive
        ? isDark
@@ -114,7 +309,14 @@ export function PageSidebar({
        onClick={() => item.path && navigate(item.path)}
        className={menuButtonClass(isActive, depth)}
      >
-        <Icon className={`${depth === 0 ? "h-5 w-5" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out`} />
+        {isActive && (
+          <span
+            className={`absolute left-0 inset-y-0 w-[3px] rounded-r ${
+              isDark ? "bg-cyan-300" : "bg-red-600"
+            }`}
+          />
+        )}
+        <Icon className={`${depth === 0 ? "h-[18px] w-[18px]" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out group-hover:scale-105`} />
        {(!collapsed || depth > 0) && (
          <span className={labelClass(false, depth > 0)}>
            {item.label}
@@ -144,7 +346,7 @@ export function PageSidebar({
          className={menuButtonClass(false, depth)}
        >
          <Icon
-            className={`${isTopLevel ? "h-5 w-5" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out ${
+            className={`${isTopLevel ? "h-[18px] w-[18px]" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out group-hover:scale-105 ${
              expanded && depth > 0 ? "scale-105" : ""
            }`}
          />
@@ -12,6 +12,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
 import { ViewModeToggle } from "@/components/workspace/view-mode-toggle";
+import { getStoredAuth } from "@/core/auth";
 import { useAgentsPaginated, usePrivateAgentsPaginated } from "@/core/agents";
 import type { Agent, AgentSort } from "@/core/agents";
 import { useI18n } from "@/core/i18n/hooks";
@@ -29,6 +30,8 @@ const PRIVATE_SQUARE_PASSWORD_KEY = "deer-flow.private-square-password";
 export function AgentGallery() {
  const { t } = useI18n();
  const router = useRouter();
+  // 「内置智能体」筛选仅管理员可见（后端 scope=builtin 也做了 admin 闸门兜底）。
+  const isAdmin = getStoredAuth()?.system_role === "admin";
  const [viewMode, setViewMode] = useViewMode("agent");
  const [activeTab, setActiveTab] = useState<string>("mine");
  const [search, setSearch] = useState("");
@@ -58,15 +61,21 @@ export function AgentGallery() {
  // If the active square tab disappears (admin removed that square), fall back
  // to "我的" so the gallery never points at a dead tab.
  useEffect(() => {
+    // 非管理员落到「内置」标签（理论上点不到，兜底）→ 回到「我的」。
+    if (activeTab === "builtin" && !isAdmin) {
+      setActiveTab("mine");
+      return;
+    }
    if (
      activeTab !== "mine" &&
      activeTab !== "private" &&
+      activeTab !== "builtin" &&
      squareTabs.length > 0 &&
      !squareTabs.some((sq) => sq.id === activeTab)
    ) {
      setActiveTab("mine");
    }
-  }, [activeTab, squareTabs]);
+  }, [activeTab, squareTabs, isAdmin]);

  const { data: privateStatus } = usePrivateSquareStatus();
  const privateFeatureAvailable = !!privateStatus?.enabled;
@@ -80,9 +89,16 @@ export function AgentGallery() {
  const [passwordInput, setPasswordInput] = useState("");

  // Only the active tab fetches. "广场" maps to the server "square" scope
-  // (built-in/published, never private), "我的" to "mine" (owned + favorited).
-  const isSquareTab = activeTab !== "mine" && activeTab !== "private";
-  const mainScope = activeTab === "mine" ? "mine" : "square";
+  // (built-in/published, never private), "我的" to "mine" (owned + favorited),
+  // "内置" to "builtin" (admin-only, user_id IS NULL).
+  const isSquareTab =
+    activeTab !== "mine" && activeTab !== "private" && activeTab !== "builtin";
+  const mainScope =
+    activeTab === "mine"
+      ? "mine"
+      : activeTab === "builtin"
+        ? "builtin"
+        : "square";
  const mainPage = pages[activeTab] ?? 1;
  const {
    agents: mainAgents,
@@ -393,6 +409,12 @@ export function AgentGallery() {
                  私密广场
                </TabsTrigger>
              )}
+              {isAdmin && (
+                <TabsTrigger value="builtin" title="内置/功能型智能体（仅管理员可见）">
+                  <BotIcon className="mr-1 h-3.5 w-3.5" />
+                  内置智能体
+                </TabsTrigger>
+              )}
            </TabsList>
            <div className="flex items-center gap-3">
              <span className="text-muted-foreground text-sm whitespace-nowrap">
@@ -490,6 +512,19 @@ export function AgentGallery() {
          })}
        </TabsContent>

+        {isAdmin && (
+          <TabsContent value="builtin" className="flex-1 overflow-y-auto p-6 mt-0">
+            {renderListBody({
+              list: mainAgents,
+              total: mainTotal,
+              isLoading: mainLoading,
+              isFetching: mainFetching,
+              tab: "builtin",
+              emptyDescription: "暂时没有内置智能体。",
+            })}
+          </TabsContent>
+        )}
+
        {privateFeatureAvailable && (
          <TabsContent
            value="private"
@@ -29,6 +29,8 @@ interface AgentSelectorProps {
  selectedAgentId: string | null;
  onAgentChange: (agentId: string | null) => void;
  disabled?: boolean;
+  /** 紧凑模式（CM 参考图）：触发器改为灰底胶囊 + 主色机器人图标。 */
+  compact?: boolean;
 }

 /**
@@ -44,6 +46,7 @@ export function AgentSelector({
  selectedAgentId,
  onAgentChange,
  disabled,
+  compact = false,
 }: AgentSelectorProps) {
  const [open, setOpen] = useState(false);
  const [manageOpen, setManageOpen] = useState(false);
@@ -76,12 +79,17 @@ export function AgentSelector({
            disabled={disabled}
            className={cn(
              "gap-1.5! rounded-full border px-3! shadow-none transition-colors",
-              selectedAgent
-                ? "border-[#d6a868] bg-[#fff3df] text-[#7a5417] hover:bg-[#ffe8c4]"
-                : "border-[#eee3d5] bg-[#fffaf5] text-[#7e6a57] hover:bg-white dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700",
+              compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
+              compact
+                ? "border-transparent bg-gray-50/60 text-gray-600 hover:bg-gray-100/80 hover:text-gray-800 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700"
+                : selectedAgent
+                  ? "border-[#d6a868] bg-[#fff3df] text-[#7a5417] hover:bg-[#ffe8c4]"
+                  : "border-[#eee3d5] bg-[#fffaf5] text-[#7e6a57] hover:bg-white dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700",
            )}
          >
-            <BotIcon className="size-3" />
+            <BotIcon
+              className={cn("size-3", compact && "text-[var(--primary)]")}
+            />
            <span className="max-w-[140px] truncate text-xs font-normal">
              {triggerLabel}
            </span>
@@ -4,15 +4,16 @@ import {
  ArrowDownIcon,
  Code2Icon,
  CopyIcon,
-  DownloadIcon,
-  EyeIcon,
-  FileType2Icon,
-  LoaderIcon,
-  PackageIcon,
-  SaveIcon,
-  UploadCloudIcon,
-  XIcon,
-} from "lucide-react";
+  DownloadIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  FileType2Icon,
+  LoaderIcon,
+  PackageIcon,
+  SaveIcon,
+  UploadCloudIcon,
+  XIcon,
+} from "lucide-react";
 import { useParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
@@ -37,11 +38,11 @@ import {
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { CodeEditor } from "@/components/workspace/code-editor";
 import { publishArtifactToKnowledge } from "@/core/agents/api";
-import { useAgent } from "@/core/agents/hooks";
-import { apiFetch } from "@/core/api";
-import {
-  downloadArtifactFile,
-} from "@/core/artifacts/download";
+import { useAgent } from "@/core/agents/hooks";
+import { apiFetch } from "@/core/api";
+import {
+  downloadArtifactFile,
+} from "@/core/artifacts/download";
 import {
  useArtifactContent,
  useUpdateArtifactContent,
@@ -120,12 +121,19 @@ export function ArtifactFileDetail({
  filepath: filepathFromProps,
  threadId,
  onClose,
+  allowVirtualMarkdownEdit = false,
 }: {
  className?: string;
  filepath: string;
  threadId: string;
  /** 覆盖默认关闭行为（仅 setOpen(false)）；圆桌 Step3 文件预览用于退出沙箱模式。 */
  onClose?: () => void;
+  /**
+   * 圆桌沙箱(Step2/Step3)用：流式结束后，把 `write-file:` 虚拟 md 预览切回真实
+   * artifacts API（可加载 + PATCH 保存），从而支持用户编辑（对齐主聊天页 md 可编辑）。
+   * 默认 false —— 主聊天页等其它调用方行为不变。
+   */
+  allowVirtualMarkdownEdit?: boolean;
 }) {
  const { t } = useI18n();
  const { artifacts, setOpen, select } = useArtifacts();
@@ -140,10 +148,6 @@ export function ArtifactFileDetail({
    }
    return filepathFromProps;
  }, [filepathFromProps, isWriteFileVirtual]);
-  /** write_file 流式预览走 tool args 文本；图片等二进制产物始终走 artifacts API。 */
-  const useWriteFileStreaming = useMemo(() => {
-    return isWriteFileVirtual && !isImageFile(filepath);
-  }, [filepath, isWriteFileVirtual]);
  const isSkillFile = useMemo(() => {
    return filepath.endsWith(".skill");
  }, [filepath]);
@@ -152,6 +156,24 @@ export function ArtifactFileDetail({
  const isSpreadsheetFile = useMemo(() => {
    return /\.xlsx$/i.test(filepath);
  }, [filepath]);
+  // 圆桌沙箱：write_file 虚拟预览的 md 在流式结束(thread 非 loading)后，切回真实
+  // artifacts API 加载并允许编辑/保存。流式进行中仍走内存 stub 只读预览；仅
+  // allowVirtualMarkdownEdit 开启的调用方(Step2/Step3 沙箱)生效，主聊天页不受影响。
+  const editVirtualMarkdown = useMemo(() => {
+    return (
+      allowVirtualMarkdownEdit &&
+      isWriteFileVirtual &&
+      !isImageFile(filepath) &&
+      !isMock &&
+      !thread.isLoading &&
+      checkCodeFile(filepath).language === "markdown"
+    );
+  }, [allowVirtualMarkdownEdit, isWriteFileVirtual, filepath, isMock, thread.isLoading]);
+  /** write_file 流式预览走 tool args 文本；图片等二进制产物始终走 artifacts API；
+   *  圆桌结束后可编辑的 md(editVirtualMarkdown)亦回到真实 API(可加载 + PATCH 保存)。 */
+  const useWriteFileStreaming = useMemo(() => {
+    return isWriteFileVirtual && !isImageFile(filepath) && !editVirtualMarkdown;
+  }, [filepath, isWriteFileVirtual, editVirtualMarkdown]);
  const { isCodeFile, language } = useMemo(() => {
    if (useWriteFileStreaming) {
      let nextLanguage = checkCodeFile(filepath).language;
@@ -172,7 +194,10 @@ export function ArtifactFileDetail({
  }, [language]);
  const { content, isApplyingEdit } = useArtifactContent({
    threadId,
-    filepath: filepathFromProps,
+    // editVirtualMarkdown：用解码后的真实路径走 artifacts API（而非 write-file 虚拟
+    // URL），这样保存后 useUpdateArtifactContent 写入的查询缓存才能命中，编辑内容
+    // 不会被旧的内存 stub 值覆盖回退。
+    filepath: editVirtualMarkdown ? filepath : filepathFromProps,
    enabled: isCodeFile && !useWriteFileStreaming,
  });

@@ -512,7 +537,22 @@ export function ArtifactFileDetail({
    }
  }, [displayContent, filepath]);

-  const handleDownloadWriteFile = useCallback(() => {
+  /** HTML 产物在新窗口打开（结果绘制汇总/大屏多页都需要全屏看）。
+   *  blob: URL 带 charset=utf-8（与预览/下载一致，防中文乱码）；URL 延迟回收，
+   *  给新窗口足够的加载时间。 */
+  const handleOpenInNewWindow = useCallback(() => {
+    const source = displayContent ?? "";
+    if (!source.trim()) {
+      toast.error("文件内容为空，暂时无法在新窗口打开");
+      return;
+    }
+    const blob = new Blob([source], { type: "text/html;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    window.open(url, "_blank", "noopener,noreferrer");
+    window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
+  }, [displayContent]);
+
+  const handleDownloadWriteFile = useCallback(() => {
    const source = displayContent ?? "";
    if (!source.trim()) {
      toast.error("文件内容为空，暂时无法下载");
@@ -544,7 +584,7 @@ export function ArtifactFileDetail({

  return (
    <Artifact className={cn(className)}>
-      <ArtifactHeader className="flex flex-wrap items-center gap-3 px-4 py-3">
+      <ArtifactHeader className="flex flex-wrap items-center gap-3 px-4 py-3">
        <div className="flex min-w-0 items-center gap-2">
          <div className="bg-muted/65 inline-flex min-w-0 items-center rounded-full border border-black/6 p-1 shadow-sm dark:border-white/8">
            <span className="bg-background text-muted-foreground inline-flex h-7 shrink-0 items-center rounded-full border border-black/6 px-2.5 text-[10px] font-semibold tracking-[0.16em] dark:border-white/8">
@@ -574,7 +614,7 @@ export function ArtifactFileDetail({
            </ArtifactTitle>
          </div>
        </div>
-        <div className="flex w-full items-center justify-center md:w-auto md:flex-1">
+        <div className="flex w-full items-center justify-center md:w-auto md:flex-1">
          {isSupportPreview && (
            <div className="flex items-center gap-2">
              <ToggleGroup
@@ -617,8 +657,8 @@ export function ArtifactFileDetail({
            </div>
          )}
        </div>
-        <div className="flex w-full items-center justify-end gap-2 md:ml-auto md:w-auto">
-          <ArtifactActions className="bg-muted/45 max-w-full flex-wrap justify-end rounded-3xl border border-black/6 p-1 dark:border-white/8">
+        <div className="flex w-full items-center justify-end gap-2 md:ml-auto md:w-auto">
+          <ArtifactActions className="bg-muted/45 max-w-full flex-wrap justify-end rounded-3xl border border-black/6 p-1 dark:border-white/8">
            {canPublishToKnowledge && (
              <ArtifactAction
                icon={isPublishingToKnowledge ? LoaderIcon : UploadCloudIcon}
@@ -677,6 +717,15 @@ export function ArtifactFileDetail({
                onClick={handleDownloadAsWord}
              />
            )}
+            {language === "html" && (
+              <ArtifactAction
+                icon={ExternalLinkIcon}
+                label="新窗口打开"
+                tooltip="在新窗口全屏打开 HTML"
+                disabled={!displayContent?.trim()}
+                onClick={handleOpenInNewWindow}
+              />
+            )}
            <ArtifactAction
              icon={DownloadIcon}
              label={t.common.download}
@@ -0,0 +1,49 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * 紧凑模式（正常 App）新对话落地页的品牌欢迎块 —— 按 CM-assistant 参考图重画。
+ * 仅展示，无交互。配色走主题 token（--workspace-brand / --primary），红/蓝/深蓝主题自适应。
+ * 非紧凑模式仍用 <Welcome/>，本组件不参与。
+ */
+export function CompactWelcome({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "mx-auto flex w-full flex-col items-center justify-center text-center select-none",
+        className,
+      )}
+    >
+      {/* CM logo：浅底圆环 + 主色渐变圆角方块 */}
+      <div
+        className="mb-3.5 inline-flex items-center justify-center rounded-full p-3"
+        style={{
+          backgroundColor:
+            "color-mix(in srgb, var(--workspace-brand) 5%, transparent)",
+          border:
+            "1px solid color-mix(in srgb, var(--workspace-brand) 12%, transparent)",
+        }}
+      >
+        <div
+          className="flex size-14 items-center justify-center rounded-2xl shadow-md"
+          style={{
+            backgroundImage:
+              "linear-gradient(to top right, var(--workspace-brand), color-mix(in srgb, var(--workspace-brand) 55%, white))",
+          }}
+        >
+          <span className="text-2xl font-black tracking-wide text-white italic">
+            CM
+          </span>
+        </div>
+      </div>
+
+      <h1 className="flex items-center justify-center gap-2 text-2xl font-bold tracking-tight text-foreground/90">
+        <span className="text-2xl">👋</span> 欢迎使用CM助手
+      </h1>
+      <p className="text-muted-foreground mx-auto mt-2 max-w-sm text-xs leading-relaxed">
+        基于先进深度推理模型，为您提供高效的市场分析、专业报告撰写、调研设计与协同脑暴支持。
+      </p>
+    </div>
+  );
+}
@@ -134,10 +134,14 @@ export function InputBox({
  agentSelector,
  assistantId,
  hideAdminRecommendedQuestions,
+  compact,
  ...props
 }: Omit<ComponentProps<typeof PromptInput>, "onSubmit"> & {
  assistantId?: string | null;
  status?: ChatStatus;
+  /** 紧凑模式（正常 App）新对话落地态：去掉旋转彩边、用 CM 参考图的白卡输入框，
+   *  并在推荐问题上方加「试试这些高频业务场景」标题。仅落地态生效，默认 false。 */
+  compact?: boolean;
  disabled?: boolean;
  context: Omit<
    AgentThreadContext,
@@ -568,15 +572,23 @@ export function InputBox({
          }}
        />
      )}
-      <div className={cn(isNewThread && "gemini-gradient-border gemini-shadow")}>
+      <div className={cn(isNewThread && !compact && "gemini-gradient-border gemini-shadow")}>
      <PromptInput
        className={cn(
-          "transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-3xl",
-          // landing 态：透明，让外层 gemini-gradient-border 提供白卡 + 旋转描边
-          // 对话态：常规白卡 + 中性边框 + 轻阴影
-          isNewThread
-            ? "rounded-3xl bg-transparent border-0 shadow-none ring-0"
-            : "rounded-3xl bg-background border border-border shadow-sm transition-shadow hover:shadow-md focus-within:border-ring/40 focus-within:shadow-md focus-within:ring-1 focus-within:ring-ring/20 dark:bg-slate-800 dark:border-slate-700",
+          "transition-all duration-300 ease-out",
+          // 紧凑落地态（CM 参考图）：表单作为白卡，内部 input-group 透明无边框，
+          // 避免双层描边；圆角对齐 2xl。
+          compact && isNewThread
+            ? "*:data-[slot='input-group']:rounded-2xl *:data-[slot='input-group']:border-0 *:data-[slot='input-group']:bg-transparent *:data-[slot='input-group']:shadow-none"
+            : "*:data-[slot='input-group']:rounded-3xl",
+          // 紧凑落地态（CM 参考图）：白卡 + 细边 + 轻阴影 + 主色聚焦环（无旋转彩边）
+          compact && isNewThread
+            ? "rounded-2xl border border-gray-200/70 bg-white overflow-hidden shadow-[0_4.5px_22px_rgba(0,0,0,0.025)] transition-all duration-300 focus-within:border-[color-mix(in_srgb,var(--primary)_35%,transparent)] focus-within:ring-4 focus-within:ring-[color-mix(in_srgb,var(--primary)_5%,transparent)] focus-within:shadow-[0_10px_35px_color-mix(in_srgb,var(--primary)_4%,transparent)] dark:border-slate-700 dark:bg-slate-800"
+            : // landing 态：透明，让外层 gemini-gradient-border 提供白卡 + 旋转描边
+              // 对话态：常规白卡 + 中性边框 + 轻阴影
+              isNewThread
+              ? "rounded-3xl bg-transparent border-0 shadow-none ring-0"
+              : "rounded-3xl bg-background border border-border shadow-sm transition-shadow hover:shadow-md focus-within:border-ring/40 focus-within:shadow-md focus-within:ring-1 focus-within:ring-ring/20 dark:bg-slate-800 dark:border-slate-700",
          className,
        )}
        disabled={disabled}
@@ -588,11 +600,14 @@ export function InputBox({
        <PromptInputAttachments>
          {(attachment) => <PromptInputAttachment data={attachment} />}
        </PromptInputAttachments>
-        <PromptInputBody className="absolute top-0 right-0 left-0 z-3">
+        <PromptInputBody
+          className={cn(!compact && "absolute top-0 right-0 left-0 z-3")}
+        >
          <PromptInputTextarea
            className={cn(
              "size-full px-2 py-1 text-[15px] leading-7 placeholder:text-muted-foreground/60",
              isNewThread && "min-h-[110px]!",
+              compact && "min-h-[84px]! px-3 pt-3 pb-1 text-[14px]",
            )}
            disabled={disabled}
            placeholder={t.inputBox.placeholder}
@@ -600,8 +615,15 @@ export function InputBox({
            defaultValue={initialValue}
          />
        </PromptInputBody>
-        <PromptInputFooter className="flex items-center border-t-0 px-2 pt-1 pb-1.5">
-          <PromptInputTools className="gap-1.5">
+        <PromptInputFooter
+          className={cn(
+            "flex items-center border-t-0 px-2 pt-1 pb-1.5",
+            compact && "gap-2 px-3 pt-1.5 pb-3",
+          )}
+        >
+          <PromptInputTools
+            className={cn("gap-1.5", compact && "flex-1 flex-wrap gap-2")}
+          >
            {/* TODO: Add more connectors here
          <PromptInputActionMenu>
            <PromptInputActionMenuTrigger className="px-2!" />
@@ -611,7 +633,13 @@ export function InputBox({
              />
            </PromptInputActionMenuContent>
          </PromptInputActionMenu> */}
-            <AddAttachmentsButton className="rounded-full border-0 bg-transparent px-2.5! shadow-none text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100" />
+            <AddAttachmentsButton
+              className={cn(
+                "rounded-full border-0 bg-transparent px-2.5! shadow-none text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
+                compact &&
+                  "gap-1.5! rounded-lg px-2.5! py-1! text-[11px] font-medium",
+              )}
+            />
            <Tooltip
              content={
                context.writing_mode
@@ -622,9 +650,12 @@ export function InputBox({
              <PromptInputButton
                className={cn(
                  "gap-1.5! rounded-full px-3! shadow-none",
+                  compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
                  context.writing_mode
                    ? "border border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200"
-                    : "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
+                    : compact
+                      ? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
+                      : "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
                )}
                onClick={handleWritingModeToggle}
              >
@@ -642,9 +673,12 @@ export function InputBox({
              <PromptInputButton
                className={cn(
                  "gap-1.5! rounded-full px-3! shadow-none",
+                  compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
                  memoryInjectionEnabled
                    ? "border border-blue-300 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-950/40 dark:text-blue-200"
-                    : "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
+                    : compact
+                      ? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
+                      : "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
                )}
                onClick={handleMemoryInjectionToggle}
              >
@@ -665,10 +699,13 @@ export function InputBox({
                disabled={ragModeLocked || disabled}
                className={cn(
                  "gap-1.5! rounded-full px-3! shadow-none",
+                  compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
                  ragModeLocked && "cursor-not-allowed opacity-80",
                  ragModeEnabled
                    ? "border border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-200"
-                    : "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
+                    : compact
+                      ? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
+                      : "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
                )}
                onClick={handleRagModeToggle}
              >
@@ -690,7 +727,20 @@ export function InputBox({
                    : "flash"
                }
              >
-                <PromptInputActionMenuTrigger className="gap-1.5! rounded-full border-0 bg-transparent px-3! text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100">
+                <PromptInputActionMenuTrigger
+                  className={cn(
+                    "gap-1.5! rounded-full border-0 bg-transparent px-3! text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
+                    compact && "rounded-lg border px-2.5! py-1! text-[11px] font-medium",
+                    compact &&
+                      (context.mode === "thinking"
+                        ? "border-indigo-200 bg-indigo-50/60 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-200"
+                        : context.mode === "pro"
+                          ? "border-violet-200 bg-violet-50/60 text-violet-700 hover:bg-violet-100 dark:border-violet-700 dark:bg-violet-950/40 dark:text-violet-200"
+                          : context.mode === "ultra"
+                            ? "border-amber-200 bg-amber-50/60 text-amber-700 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200"
+                            : "border-transparent bg-muted/40 hover:bg-muted hover:text-foreground"),
+                  )}
+                >
                  <div>
                    {context.mode === "flash" && <ZapIcon className="size-3" />}
                    {context.mode === "thinking" && (
@@ -852,7 +902,7 @@ export function InputBox({
            </PromptInputActionMenu>
            {supportReasoningEffort && context.mode !== "flash" && (
              <PromptInputActionMenu>
-                <PromptInputActionMenuTrigger className="gap-1.5! rounded-full border-0 bg-transparent px-3! text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100">
+                <PromptInputActionMenuTrigger className={cn("gap-1.5! rounded-full border-0 bg-transparent px-3! text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100", compact && "rounded-lg border border-border px-2.5! py-1! text-[13px]")}>
                  <div className="text-xs font-normal">
                    {t.inputBox.reasoningEffort}:
                    {context.reasoning_effort === "minimal" &&
@@ -967,12 +1017,13 @@ export function InputBox({
              </PromptInputActionMenu>
            )}
          </PromptInputTools>
-          <PromptInputTools className="gap-1.5">
+          <PromptInputTools className={cn("gap-1.5", compact && "gap-2")}>
            {agentSelector && (
              <AgentSelector
                selectedAgentId={agentSelector.selectedAgentId}
                onAgentChange={agentSelector.onAgentChange}
                disabled={disabled}
+                compact={compact}
              />
            )}
            {promptPrefix && (
@@ -1008,9 +1059,20 @@ export function InputBox({
              onOpenChange={setModelDialogOpen}
            >
              <ModelSelectorTrigger asChild>
-                <PromptInputButton className="rounded-full border-0 bg-transparent px-3 shadow-none text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100">
+                <PromptInputButton
+                  className={cn(
+                    "rounded-full border-0 bg-transparent px-3 shadow-none text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
+                    compact &&
+                      "rounded-lg border border-transparent bg-gray-50/60 px-2.5! py-1! font-mono text-gray-600 hover:bg-gray-100/80 hover:text-gray-800 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700",
+                  )}
+                >
                  <div className="flex min-w-0 flex-col items-start text-left">
-                    <ModelSelectorName className="text-xs font-normal">
+                    <ModelSelectorName
+                      className={cn(
+                        "text-xs font-normal",
+                        compact && "text-[11px]",
+                      )}
+                    >
                      {selectedModel?.display_name}
                    </ModelSelectorName>
                  </div>
@@ -1071,7 +1133,11 @@ export function InputBox({
              </DropdownMenu>
            )}
            <PromptInputSubmit
-              className="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"
+              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:bg-[color-mix(in_srgb,var(--primary)_88%,black)] disabled:bg-muted disabled:text-muted-foreground/40 dark:bg-[var(--primary)] dark:border-0 dark:text-[var(--primary-foreground)] dark:hover:bg-[color-mix(in_srgb,var(--primary)_88%,black)] dark:disabled:bg-muted",
+              )}
              disabled={disabled}
              variant="outline"
              status={status}
@@ -756,6 +756,9 @@ const WRITING_MODE_LABELS: Record<string, string> = {
  loose: "可结合通用知识",
 };
 const MATERIAL_SOURCE_LABELS: Record<string, string> = {
+  general: "通用检索",
+  notebook: "我的空间",
+  // 旧值（历史会话回显兼容）
  knowledge_base: "知识库",
  skill: "技能检索",
 };
@@ -5,6 +5,7 @@ import {
  Download,
  FileJson,
  FileText,
+  MessageSquare,
  MoreHorizontal,
  Pencil,
  Pin,
@@ -71,18 +72,22 @@ import {
 import { env } from "@/env";
 import { desensitize } from "@/lib/desensitize";
 import { isIMEComposing } from "@/lib/ime";
+import { cn } from "@/lib/utils";

-export function RecentChatList() {
+export function RecentChatList({ compact = false }: { compact?: boolean }) {
  const { t } = useI18n();
  const router = useRouter();
  const pathname = usePathname();
-  const [collapsed, setCollapsed] = useState(
+  const [internalCollapsed, setInternalCollapsed] = useState(
    () => localStorage.getItem("sidebar:recent-chats-collapsed") === "true",
  );
+  // 紧凑模式下整列由 WorkspaceSidebar 统一收起，列表本身始终展开、不显示标题折叠钮。
+  const collapsed = compact ? false : internalCollapsed;

  const toggleCollapsed = () => {
-    const next = !collapsed;
-    setCollapsed(next);
+    if (compact) return;
+    const next = !internalCollapsed;
+    setInternalCollapsed(next);
    localStorage.setItem("sidebar:recent-chats-collapsed", String(next));
  };
  const { thread_id: threadIdFromPath, agent_id: agentIdFromPath } =
@@ -189,17 +194,29 @@ export function RecentChatList() {
    <>
      <SidebarGroup className="px-2 pt-3 mt-2 border-t border-sidebar-border/60">
        <SidebarGroupLabel
-          className="text-muted-foreground/70 px-3 mb-1 text-[10px] font-semibold tracking-[0.12em] uppercase cursor-pointer select-none flex items-center justify-between hover:text-muted-foreground transition-colors"
+          className={cn(
+            "text-muted-foreground/70 px-3 mb-1 text-[10px] font-semibold tracking-[0.12em] uppercase select-none flex items-center justify-between transition-colors",
+            !compact && "cursor-pointer hover:text-muted-foreground",
+          )}
          onClick={toggleCollapsed}
        >
-          <span>
-            {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true"
-              ? t.sidebar.recentChats
-              : t.sidebar.demoChats}
+          <span className="flex items-center gap-2">
+            <span>
+              {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true"
+                ? t.sidebar.recentChats
+                : t.sidebar.demoChats}
+            </span>
+            {compact && (
+              <span className="text-muted-foreground bg-muted rounded-full px-1.5 py-0.5 text-[10px] font-normal tracking-normal tabular-nums">
+                {visibleThreads.length}
+              </span>
+            )}
          </span>
-          <ChevronDown
-            className={`w-3 h-3 shrink-0 transition-transform duration-200 ${collapsed ? "-rotate-90" : ""}`}
-          />
+          {!compact && (
+            <ChevronDown
+              className={`w-3 h-3 shrink-0 transition-transform duration-200 ${collapsed ? "-rotate-90" : ""}`}
+            />
+          )}
        </SidebarGroupLabel>
        <SidebarGroupContent
          className={`group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 overflow-hidden transition-all duration-200 ${
@@ -223,13 +240,26 @@ export function RecentChatList() {
                      className={
                        "rounded-lg h-7 px-3 text-[13px] text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/60 " +
                        "data-[active=true]:bg-white data-[active=true]:text-foreground data-[active=true]:shadow-[0_1px_2px_rgba(15,23,42,0.05)] " +
-                        "dark:data-[active=true]:bg-slate-700/80 dark:data-[active=true]:text-slate-100 dark:data-[active=true]:shadow-none"
+                        "dark:data-[active=true]:bg-slate-700/80 dark:data-[active=true]:text-slate-100 dark:data-[active=true]:shadow-none" +
+                        (compact
+                          ? " h-9 gap-2 rounded-md px-2.5 data-[active=true]:border data-[active=true]:border-border"
+                          : "")
                      }
                    >
                      <Link
                        className="flex w-full items-center gap-1 whitespace-nowrap group-hover/side-menu-item:overflow-hidden"
                        href={pathOfThread(thread)}
                      >
+                        {compact && (
+                          <MessageSquare
+                            className={
+                              "size-3.5 shrink-0 " +
+                              (isActive
+                                ? "text-[var(--primary)]"
+                                : "text-muted-foreground/70")
+                            }
+                          />
+                        )}
                        {pinned && (
                          <Pin className="size-3 shrink-0 text-muted-foreground/70" />
                        )}
@@ -1,7 +1,8 @@
 "use client";

-import { 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";
@@ -25,6 +26,7 @@ import { useLocalSettings } from "@/core/settings";
 import {
  useAppearanceSettings,
  useCitationDisplaySettings,
+  useLayoutMode,
  useUpdateAppearanceSettings,
  useUpdateCitationDisplaySettings,
 } from "@/core/system-settings/hooks";
@@ -42,9 +44,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";
@@ -55,17 +58,32 @@ export function AppearanceSettingsPage() {
  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 [effectiveLayoutMode, setLayoutMode] = useLayoutMode();
  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 });
+      const label =
+        value === "light" ? "浅色" : value === "dark" ? "深色" : "浅蓝";
+      toast.success(`已将系统默认主题设置为${label}`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "保存失败");
+    }
+  };
+
+  const handleSetDefaultLayoutMode = async (value: "full" | "compact") => {
+    if (value === globalLayoutMode) return;
+    try {
+      await updateAppearance.mutateAsync({ default_layout_mode: value });
      toast.success(
-        value === "light"
-          ? "已将系统默认主题设置为浅色"
-          : "已将系统默认主题设置为深色",
+        `已将系统默认界面模式设置为${value === "full" ? "全量模式" : "简洁模式"}`,
      );
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "保存失败");
@@ -107,12 +125,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,13 +156,86 @@ 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)}
            />
          ))}
        </div>
      </SettingsSection>

+      <Separator />
+
+      <SettingsSection
+        title="界面模式"
+        description="全量模式展示侧边栏与顶栏导航；简洁模式隐藏侧边栏与顶栏，获得更大的工作区。"
+      >
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant={effectiveLayoutMode !== "compact" ? "default" : "outline"}
+            size="sm"
+            onClick={() => {
+              setLayoutMode("full");
+              onClose?.();
+              navigate("/page/workspace/chats/new");
+            }}
+          >
+            <PanelLeftIcon className="mr-1.5 size-4" />
+            全量模式
+          </Button>
+          <Button
+            type="button"
+            variant={effectiveLayoutMode === "compact" ? "default" : "outline"}
+            size="sm"
+            onClick={() => {
+              setLayoutMode("compact");
+              onClose?.();
+              navigate("/page/workspace/chats/new");
+            }}
+          >
+            <LayoutIcon className="mr-1.5 size-4" />
+            简洁模式
+          </Button>
+        </div>
+      </SettingsSection>
+
+      {isAdmin && (
+        <>
+          <Separator />
+          <SettingsSection
+            title="系统默认界面模式（管理员）"
+            description="给所有还没有手动切换过界面模式的用户的默认；已经自己切换过的用户保留其个人选择不受影响。"
+          >
+            <div className="flex flex-wrap items-center gap-2">
+              <Button
+                type="button"
+                variant={globalLayoutMode === "full" ? "default" : "outline"}
+                size="sm"
+                onClick={() => void handleSetDefaultLayoutMode("full")}
+                disabled={updateAppearance.isPending}
+              >
+                <PanelLeftIcon className="mr-1.5 size-4" />
+                全量模式
+              </Button>
+              <Button
+                type="button"
+                variant={globalLayoutMode === "compact" ? "default" : "outline"}
+                size="sm"
+                onClick={() => void handleSetDefaultLayoutMode("compact")}
+                disabled={updateAppearance.isPending}
+              >
+                <LayoutIcon className="mr-1.5 size-4" />
+                简洁模式
+              </Button>
+              <p className="text-muted-foreground ml-2 text-xs">
+                当前系统默认：
+                {globalLayoutMode === "full" ? "全量模式" : "简洁模式"}
+              </p>
+            </div>
+          </SettingsSection>
+        </>
+      )}
+
      {isAdmin && (
        <>
          <Separator />
@@ -165,9 +264,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 +483,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 +514,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" />
@@ -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 />}
@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/sidebar";
 import { useI18n } from "@/core/i18n/hooks";
 // import { BotIcon, BrainIcon, ListChecks, MessageSquarePlus, MessagesSquare, SparklesIcon, UsersIcon } from "lucide-react";
-import { BookOpen, BotIcon, BrainIcon, ListChecks, MessageSquarePlus, MessagesSquare, PenLine, SparklesIcon, Users } from "lucide-react";
+import { BookOpen, BotIcon, BrainIcon, ListChecks, MessageSquarePlus, MessagesSquare, PenLine, Plus, SparklesIcon, Users } from "lucide-react";

 import { KnowledgeRagToggle } from "./knowledge-rag-toggle";
 import { SidebarCollapseButton } from "./workspace-header";
@@ -33,10 +33,19 @@ const NEW_CHAT_CLASS =
  "data-[active=true]:bg-primary/15 data-[active=true]:text-primary data-[active=true]:shadow-none " +
  "dark:text-primary-foreground dark:hover:bg-primary/15 dark:data-[active=true]:bg-primary/25";

+// 紧凑模式（CM 参考图）：白卡描边、居中、主色 + 图标
+const NEW_CHAT_COMPACT_CLASS =
+  "h-9 justify-center gap-2 rounded-xl bg-card text-[13px] font-semibold text-foreground transition-colors " +
+  "border border-[color-mix(in_srgb,var(--primary)_18%,transparent)] " +
+  "hover:bg-[color-mix(in_srgb,var(--primary)_4%,transparent)] hover:text-[var(--primary)] hover:border-[color-mix(in_srgb,var(--primary)_32%,transparent)] " +
+  "data-[active=true]:bg-card data-[active=true]:text-[var(--primary)] data-[active=true]:shadow-none";
+
 export function WorkspaceNavChatList({
  showCollapseTrigger = false,
+  compact = false,
 }: {
  showCollapseTrigger?: boolean;
+  compact?: boolean;
 }) {
  const { t } = useI18n();
  const pathname = usePathname();
@@ -60,21 +69,46 @@ export function WorkspaceNavChatList({
    <SidebarGroup className={cn("px-2", showCollapseTrigger ? "pt-3" : "pt-2")}>
      <SidebarMenu className="gap-1">
        <SidebarMenuItem>
-          <div className="flex items-center gap-1">
-            <SidebarMenuButton
-              isActive={pathname === "/page/workspace/chats/new"}
-              asChild
-              className={cn(NEW_CHAT_CLASS, showCollapseTrigger && "min-w-0 flex-1")}
-            >
-              <Link href="/page/workspace/chats/new" onClick={handleNewChatClick}>
-                <MessageSquarePlus />
-                <span>{t.sidebar.newChat}</span>
-              </Link>
-            </SidebarMenuButton>
-            {showCollapseTrigger && (
-              <SidebarCollapseButton className="size-8 shrink-0 rounded-xl" />
-            )}
-          </div>
+          {compact ? (
+            // 紧凑模式：新对话占满整行白卡样式 + 右侧收起钮（点击收起整列历史栏）。
+            <div className="flex items-center gap-1">
+              <SidebarMenuButton
+                isActive={pathname === "/page/workspace/chats/new"}
+                asChild
+                className={cn(NEW_CHAT_COMPACT_CLASS, "min-w-0 flex-1")}
+              >
+                <Link href="/page/workspace/chats/new" onClick={handleNewChatClick}>
+                  <Plus className="stroke-[2.5] text-[var(--primary)]" />
+                  <span>{t.sidebar.newChat}</span>
+                </Link>
+              </SidebarMenuButton>
+              {showCollapseTrigger && (
+                <SidebarCollapseButton className="size-8 shrink-0 rounded-xl" />
+              )}
+            </div>
+          ) : (
+            <div className="flex items-center gap-1">
+              <SidebarMenuButton
+                isActive={pathname === "/page/workspace/chats/new"}
+                asChild
+                className={cn(
+                  NEW_CHAT_CLASS,
+                  showCollapseTrigger && "min-w-0 flex-1",
+                )}
+              >
+                <Link
+                  href="/page/workspace/chats/new"
+                  onClick={handleNewChatClick}
+                >
+                  <MessageSquarePlus />
+                  <span>{t.sidebar.newChat}</span>
+                </Link>
+              </SidebarMenuButton>
+              {showCollapseTrigger && (
+                <SidebarCollapseButton className="size-8 shrink-0 rounded-xl" />
+              )}
+            </div>
+          )}
        </SidebarMenuItem>
        {!showCollapseTrigger && (
          <>
@@ -27,11 +27,47 @@ export function WorkspaceSidebar({
  const { theme } = useTheme();
  const useWhiteSidebar = compactChrome && theme === "light";

+  // 紧凑模式：用「外层定宽容器 + transition-[width]」做展开/收起过渡动画。
+  // collapsible="none" 的 Sidebar 是普通 in-flow 定宽块（非 absolute，故不受本布局对
+  // sidebar-container 的 absolute/left-0 覆盖影响），外层 overflow-hidden 把它从
+  // --sidebar-width 裁到 0、聊天区随宽度平滑回流；收起后整列不接收指针。
+  if (compactChrome) {
+    return (
+      <div
+        aria-hidden={!isSidebarOpen}
+        className={cn(
+          "h-full shrink-0 overflow-hidden transition-[width] duration-200 ease-out",
+          isSidebarOpen ? "w-(--sidebar-width)" : "w-0 pointer-events-none",
+        )}
+      >
+        <Sidebar
+          variant="sidebar"
+          collapsible="none"
+          className={cn(
+            "h-full w-(--sidebar-width)",
+            useWhiteSidebar &&
+              "[&_[data-slot=sidebar-inner]]:bg-white [&_[data-slot=sidebar-container]]:bg-white",
+            className,
+          )}
+          {...props}
+        >
+          <SidebarContent>
+            <WorkspaceNavChatList showCollapseTrigger compact />
+            <RecentChatList compact />
+          </SidebarContent>
+          <SidebarRail />
+        </Sidebar>
+      </div>
+    );
+  }
+
  return (
    <>
      <Sidebar
        variant="sidebar"
-        collapsible="icon"
+        // 紧凑模式：展开时为固定宽度整列（none，无内置折叠），收起由上面的条件渲染处理；
+        // 非紧凑沿用 icon。
+        collapsible={compactChrome ? "none" : "icon"}
        className={cn(
          useWhiteSidebar &&
            "[&_[data-slot=sidebar-inner]]:bg-white [&_[data-slot=sidebar-container]]:bg-white",
@@ -45,10 +81,15 @@ export function WorkspaceSidebar({
          </SidebarHeader>
        )}
        <SidebarContent>
-          <WorkspaceNavChatList showCollapseTrigger={compactChrome} />
-          {isSidebarOpen && <RecentChatList />}
-          {isSidebarOpen && <RecentRoundtableList />}
-          {isSidebarOpen && <RecentWritingList />}
+          <WorkspaceNavChatList
+            showCollapseTrigger={compactChrome}
+            compact={compactChrome}
+          />
+          {isSidebarOpen && <RecentChatList compact={compactChrome} />}
+          {/* 「多智能体会商」「最近写作」与「智能体/技能」等菜单项保持一致的显隐：
+              仅在非紧凑模式(!compactChrome)下展示，紧凑模式（有外层页面侧栏时）一并隐藏。 */}
+          {isSidebarOpen && !compactChrome && <RecentRoundtableList />}
+          {isSidebarOpen && !compactChrome && <RecentWritingList />}
        </SidebarContent>
        {!compactChrome && (
          <SidebarFooter>