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

新增 lightblue 主题与外观设置联动，圆桌 Step3 看板/report 统一配色；工作区侧边栏、输入框与轻应用 iframe 主题参数同步更新。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-14 12:43:16 +08:00
1 parent 30d4f9667b
commit c702119e66
@@ -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>
@@ -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>
+  );
+}
@@ -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,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" />
@@ -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>