@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/detail/story-detail-toolbar/__tests__/related-test-cases.test.tsx

@@ -21,6 +21,9 @@
 // ② stale=false → 零提示条（不渲染空壳）
 // ③ 零关联用例 → 不发 staleness 查询（无可过期对象）
 // ④ staleness 查询失败 → 静默降级无提示条（不阻塞面板正常渲染）
+// 面板升级（对齐子需求面板样式交互）后新增断言面：
+// ⑤ AI 生成用例（aiGenerated）与手建用例同列表渲染，deprecated 被过滤
+// ⑥ 显示选项切分组 → 组头出现；行复选多选 → 批量条出现，归档走 bulk serverFn
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 
@@ -30,6 +33,10 @@ const mocks = vi.hoisted(() => ({
   startGenerationFn: vi.fn(),
   getLinkedDocsFn: vi.fn(),
   listProjectsBriefFn: vi.fn(),
+  bulkArchiveTestCasesFn: vi.fn(),
+  bulkDeleteTestCasesFn: vi.fn(),
+  bulkUpdateTestCasesFn: vi.fn(),
+  listFoldersFn: vi.fn(),
   navigate: vi.fn(),
   toastSuccess: vi.fn(),
   toastError: vi.fn(),
@@ -53,6 +60,16 @@ vi.mock("@/server/serverFns/testcase/stats", () => ({
   getStoryStalenessFn: mocks.getStoryStalenessFn,
 }));
 
+vi.mock("@/server/serverFns/testcase/bulk", () => ({
+  bulkArchiveTestCasesFn: mocks.bulkArchiveTestCasesFn,
+  bulkDeleteTestCasesFn: mocks.bulkDeleteTestCasesFn,
+  bulkUpdateTestCasesFn: mocks.bulkUpdateTestCasesFn,
+}));
+
+vi.mock("@/server/serverFns/testcase/testcase-folders", () => ({
+  listFoldersFn: mocks.listFoldersFn,
+}));
+
 // generate-dialog 值引入 generation/story 模块——真实文件顶层 createServerFn
 // 在本文件的 react-start mock（仅 useServerFn）下无法求值，照 generate-dialog
 // 测试先例整模块 mock
@@ -72,6 +89,38 @@ vi.mock("@/components/billing/use-feature", () => ({
   useFeature: mocks.useFeature,
 }));
 
+// CaseRow 拖入行内编辑器（inline-editors/folder-tree/presence collab 链）——
+// 真实组件在 jsdom + 本文件 react-start mock 下无法求值。面板测试关注面板级
+// 交互（分组/多选/批量），行内编辑由 testcase list-view 域测试覆盖，整模块
+// mock 为轻量替身（保持 testid/checkbox/title 断言面一致）。
+vi.mock("@/components/testcase/list/case-row", () => ({
+  CaseRow: ({
+    caseItem,
+    checked,
+    onToggleSelect,
+    onOpen,
+  }: {
+    caseItem: { id: string; identifier: string; title: string };
+    checked?: boolean;
+    onToggleSelect?: (id: string) => void;
+    onOpen?: (id: string) => void;
+  }) => (
+    <div data-testid="case-row" data-case-id={caseItem.id}>
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={checked ?? false}
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggleSelect?.(caseItem.id);
+        }}
+      />
+      <span>{caseItem.identifier}</span>
+      <span>{caseItem.title}</span>
+    </div>
+  ),
+}));
+
 vi.mock("@/components/ui/toast", () => ({
   toast: { success: mocks.toastSuccess, error: mocks.toastError },
 }));
@@ -81,6 +130,10 @@ vi.mock("@/components/story/inline-editors/story-select-dialog", () => ({
   StorySelectDialog: () => null,
 }));
 
+vi.mock("@/components/testcase/detail/select-cases-dialog", () => ({
+  SelectCasesDialog: () => null,
+}));
+
 import { StoryDetailTestCases } from "../related-test-cases";
 import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
 
@@ -112,6 +165,7 @@ beforeEach(() => {
   vi.clearAllMocks();
   mocks.useFeature.mockReturnValue({ enabled: true, loading: false });
   mocks.listProjectsBriefFn.mockResolvedValue([]);
+  mocks.listFoldersFn.mockResolvedValue({ folders: [] });
   mocks.listTestCasesFn.mockResolvedValue({ items: [caseRow("1"), caseRow("2")] });
 });
 
@@ -120,7 +174,7 @@ afterEach(() => {
 });
 
 describe("StoryDetailTestCases 需求变更过期提示条", () => {
-  it("stale=true → 列表顶部提示条 + CTA 打开生成对话框", async () => {
+  it("stale=true → 头部 AI 按钮存在 + 点击打开生成对话框", async () => {
     mocks.getStoryStalenessFn.mockResolvedValue({
       stale: true,
       storyUpdatedAt: "2026-10-05T12:00:00.000Z",
@@ -129,13 +183,13 @@ describe("StoryDetailTestCases 需求变更过期提示条", () => {
 
     render(<StoryDetailTestCases storyId="story-1" projectId="proj-1" />);
 
-    const banner = await screen.findByTestId("story-testcases-stale");
-    expect(within(banner).getByText("需求已更新，建议 AI 比对刷新")).toBeTruthy();
+    // stale 图标按钮出现在头部（筛选按钮左侧），无 amber 横条
+    const staleBtn = await screen.findByTestId("story-testcases-ai-btn");
+    expect(screen.queryByTestId("story-testcases-stale")).toBeNull();
 
-    // CTA（提示条内第二个生成入口）点击 → 打开与头部入口同一组件形态的生成对话框
-    fireEvent.click(within(banner).getByTestId("testcase-gen-entry"));
+    // 点击图标按钮 → 打开生成对话框（预选当前需求）
+    fireEvent.click(staleBtn);
     expect(await screen.findByTestId("testcase-gen-dialog")).toBeTruthy();
-    // 详情入口预选：对话框内 Story 已锁定为当前需求
     expect(await screen.findByTestId("testcase-gen-storyLinked")).toBeTruthy();
   });
 
@@ -151,11 +205,13 @@ describe("StoryDetailTestCases 需求变更过期提示条", () => {
     await waitFor(() => {
       expect(mocks.getStoryStalenessFn).toHaveBeenCalledWith({ data: { storyId: "story-1" } });
     });
+    // stale 提示条不出现，但 AI 生成按钮常显示
     await waitFor(() => {
-      expect(screen.queryByTestId("story-testcases-stale")).toBeNull();
+      expect(screen.queryByTestId("story-testcases-stale-hint")).toBeNull();
     });
+    expect(screen.getByTestId("story-testcases-ai-btn")).toBeTruthy();
     // 面板本体照常渲染
-    expect(await screen.findByTestId("story-testcases")).toBeTruthy();
+    expect(await screen.findByTestId("story-testcases-panel")).toBeTruthy();
   });
 
   it("零关联用例 → 不发 staleness 查询", async () => {
@@ -178,8 +234,115 @@ describe("StoryDetailTestCases 需求变更过期提示条", () => {
     render(<StoryDetailTestCases storyId="story-1" projectId="proj-1" />);
 
     await waitFor(() => {
-      expect(screen.queryByTestId("story-testcases-stale")).toBeNull();
+      expect(screen.queryByTestId("story-testcases-stale-btn")).toBeNull();
+    });
+    expect(await screen.findByTestId("story-testcases-panel")).toBeTruthy();
+  });
+
+  it("AI 生成用例与手建用例同列表渲染，deprecated 被过滤", async () => {
+    mocks.listTestCasesFn.mockResolvedValue({
+      items: [
+        caseRow("1", { aiGenerated: true, state: "approved" }),
+        caseRow("2", { aiGenerated: false, state: "draft" }),
+        caseRow("3", { aiGenerated: true, state: "deprecated" }),
+      ],
+    });
+
+    render(<StoryDetailTestCases storyId="story-1" projectId="proj-1" />);
+
+    expect(await screen.findByText("用例 1")).toBeTruthy();
+    expect(screen.getByText("用例 2")).toBeTruthy();
+    // deprecated（AI 评审拒绝留痕）不显示
+    expect(screen.queryByText("用例 3")).toBeNull();
+    // 全部组头计数 = 可见用例数（2），且组头存在
+    expect(screen.getByText("全部")).toBeTruthy();
+    expect(screen.getAllByText("2").length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("显示选项切按状态分组 → 组头出现；行复选多选 → 批量条出现且归档走 bulk", async () => {
+    mocks.listTestCasesFn.mockResolvedValue({
+      items: [caseRow("1", { state: "draft" }), caseRow("2", { state: "approved" })],
+    });
+
+    render(<StoryDetailTestCases storyId="story-1" projectId="proj-1" />);
+
+    // 等数据落地（头部在 cases 加载前不渲染）
+    await screen.findByText("用例 1");
+
+    // 打开显示选项，在分组区切「按状态」（子分组区有同名选项，须分区定位）
+    fireEvent.click(screen.getByTestId("story-testcases-display"));
+    const groupSection = document.querySelector('[data-section="groupBy"]');
+    expect(groupSection).toBeTruthy();
+    fireEvent.click(within(groupSection as HTMLElement).getByText("按状态"));
+    expect(await screen.findByText("草稿")).toBeTruthy();
+    expect(screen.getByText("已批准")).toBeTruthy();
+
+    // 行复选两条 → 批量条出现 → 归档调用 bulkArchiveTestCasesFn
+    const rows = await screen.findAllByTestId("case-row");
+    expect(rows).toHaveLength(2);
+    fireEvent.click(rows[0].querySelector('button[role="checkbox"], [role="checkbox"]')!);
+    fireEvent.click(rows[1].querySelector('button[role="checkbox"], [role="checkbox"]')!);
+    const batchbar = await screen.findByTestId("story-testcases-batchbar");
+    expect(within(batchbar).getByText("已选 2 条")).toBeTruthy();
+
+    mocks.bulkArchiveTestCasesFn.mockResolvedValue({ archived: 2 });
+    fireEvent.click(within(batchbar).getByText("归档"));
+    await waitFor(() => {
+      expect(mocks.bulkArchiveTestCasesFn).toHaveBeenCalledWith({
+        data: { caseIds: ["1", "2"] },
+      });
+    });
+  });
+
+  it("关联超单页上限 → 游标翻页拉全量（不再截断）", async () => {
+    mocks.listTestCasesFn
+      .mockResolvedValueOnce({
+        items: [caseRow("1"), caseRow("2")],
+        nextCursor: "case-2",
+      })
+      .mockResolvedValueOnce({
+        items: [caseRow("3")],
+        nextCursor: null,
+      });
+
+    render(<StoryDetailTestCases storyId="story-1" projectId="proj-1" />);
+
+    // 两页数据都渲染
+    expect(await screen.findByText("用例 3")).toBeTruthy();
+    expect(screen.getByText("用例 1")).toBeTruthy();
+    expect(screen.getByText("用例 2")).toBeTruthy();
+
+    // 首页 take=200（服务端上限），次页带首页末条 cursor 续拉
+    expect(mocks.listTestCasesFn).toHaveBeenNthCalledWith(1, {
+      data: { projectId: "proj-1", storyId: "story-1", take: 200 },
+    });
+    expect(mocks.listTestCasesFn).toHaveBeenNthCalledWith(2, {
+      data: { projectId: "proj-1", storyId: "story-1", take: 200, cursor: "case-2" },
+    });
+  });
+
+  it("storyUpdatedAt 变化（需求编辑保存）→ staleness 即时重判", async () => {
+    mocks.getStoryStalenessFn.mockResolvedValue({ stale: false });
+    const { rerender } = render(
+      <StoryDetailTestCases storyId="story-1" projectId="proj-1" storyUpdatedAt="2026-10-01T00:00:00.000Z" />,
+    );
+    await screen.findByTestId("story-testcases-panel");
+    const callsAfterMount = mocks.getStoryStalenessFn.mock.calls.length;
+    expect(callsAfterMount).toBeGreaterThan(0);
+
+    // 需求编辑保存 → updatedAt 变化 → 不刷新页面即时重判
+    rerender(
+      <StoryDetailTestCases storyId="story-1" projectId="proj-1" storyUpdatedAt="2026-10-10T12:00:00.000Z" />,
+    );
+    await waitFor(() => {
+      expect(mocks.getStoryStalenessFn.mock.calls.length).toBeGreaterThan(callsAfterMount);
+    });
+    // 相同 updatedAt 重渲染不重复查询
+    rerender(
+      <StoryDetailTestCases storyId="story-1" projectId="proj-1" storyUpdatedAt="2026-10-10T12:00:00.000Z" />,
+    );
+    await waitFor(() => {
+      expect(mocks.getStoryStalenessFn.mock.calls.length).toBe(callsAfterMount + 1);
     });
-    expect(await screen.findByTestId("story-testcases")).toBeTruthy();
   });
 });

package/src/components/story/detail/story-detail-toolbar/associated-attachments-panel.tsx

@@ -42,8 +42,9 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { cn } from "@/lib/utils";
 import { FilePreview } from "@/components/story/relations/file-preview";
 import { resolveVideoEmbed } from "@/lib/story/video-embed";
-import { removeLinkFn, removeAttachmentFn, unlinkDocFn, checkLinkEmbeddableFn } from "@/server/serverFns/story";
+import { removeLinkFn, removeAttachmentFn, unlinkDocFn, checkLinkEmbeddableFn, unlinkDesignFn } from "@/server/serverFns/story";
 import { getDocumentFn } from "@/server/serverFns/knowledge";
+import { getDesignPreviewFn } from "@/server/serverFns/design";
 import { sanitize } from "@/lib/sanitize";
 import { formatFileSize, getFaviconUrl, getFileTypeIcon, extractLinkTitle, getMimeTypeLabel } from "../../relations/format";
 import { generalGroupLabel } from "../../relations/general-groups";
@@ -51,8 +52,9 @@ import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-pick
 import type { AssociatedItem, RelationsData, StoryLinkItem, StoryAttachmentItem } from "../../types";
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
+import { useStoryPanelOpen } from "@/lib/hooks/use-story-panel-open";
 
-export type AssociatedDialogKind = "link" | "attachment" | "knowledge";
+export type AssociatedDialogKind = "link" | "attachment" | "knowledge" | "design";
 
 export interface AssociatedAttachmentsPanelProps {
   storyId: string;
@@ -278,6 +280,55 @@ function ExternalDocPreview({ group, title }: { group: string; title: string })
   );
 }
 
+/** 设计预览卡：属主拉首页文档 html 渲染；画板型/空文档/非属主降级占位卡 */
+function DesignPreview({ designId, title, icon }: { designId: string; title: string; icon: string }) {
+  const getPreview = useServerFn(getDesignPreviewFn);
+  const [html, setHtml] = React.useState<string | null>(null);
+  const [state, setState] = React.useState<"loading" | "ready" | "fallback">("loading");
+
+  React.useEffect(() => {
+    let cancelled = false;
+    getPreview({ data: { id: designId } })
+      .then((res: { error?: string; html?: string | null }) => {
+        if (cancelled) return;
+        if (res.error || typeof res.html !== "string") {
+          setState("fallback");
+        } else {
+          setHtml(res.html || "<p></p>");
+          setState("ready");
+        }
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setState("fallback");
+      });
+    return () => { cancelled = true; };
+  }, [designId, getPreview]);
+
+  if (state === "loading") {
+    return (
+      <div className="flex h-48 w-full items-center justify-center rounded-md border bg-background text-sm text-muted-foreground">
+        <Loader2 className="mr-2 size-4 animate-spin" />
+        加载中…
+      </div>
+    );
+  }
+  if (state === "fallback") {
+    return (
+      <div className="flex h-48 w-full flex-col items-center justify-center gap-2 rounded-md border bg-muted/30 text-sm text-muted-foreground">
+        <LucideIconByName name={icon} size={24} className="text-muted-foreground" />
+        <span className="max-w-full truncate px-4 font-medium text-foreground">{title}</span>
+        <span>{m.story_designDialog_goToCanvas()}</span>
+      </div>
+    );
+  }
+  return (
+    <div className="prose prose-sm h-48 w-full max-w-none overflow-y-auto rounded-md border bg-background px-3 py-2 dark:prose-invert">
+      <div dangerouslySetInnerHTML={{ __html: sanitize(html ?? "") }} />
+    </div>
+  );
+}
+
 function ItemPreview({ item, onFullscreen }: { item: AssociatedItem; onFullscreen?: () => void }) {
   if (item.kind === "link") {
     return <LinkPreview url={item.data.url} />;
@@ -285,6 +336,9 @@ function ItemPreview({ item, onFullscreen }: { item: AssociatedItem; onFullscree
   if (item.kind === "attachment") {
     return <AttachmentFileView attachment={item.data} onFullscreen={onFullscreen} />;
   }
+  if (item.kind === "design") {
+    return <DesignPreview designId={item.data.id} title={item.data.title} icon={item.data.icon} />;
+  }
   if (item.data.kbId.startsWith("ext:")) {
     const group = item.data.kbId.slice("ext:".length);
     return <ExternalDocPreview group={group} title={item.data.title} />;
@@ -299,9 +353,11 @@ export function AssociatedAttachmentsPanel({
   onOpenDialog,
   onAppendActivities,
 }: AssociatedAttachmentsPanelProps) {
+  const [panelOpen, setPanelOpen] = useStoryPanelOpen(storyId, "attachments");
   const removeLink = useServerFn(removeLinkFn);
   const removeAttachment = useServerFn(removeAttachmentFn);
   const unlinkDoc = useServerFn(unlinkDocFn);
+  const unlinkDesign = useServerFn(unlinkDesignFn);
   const [mode, setMode] = React.useState<"list" | "preview">("list");
   const [groupCollapsed, setGroupCollapsed] = React.useState<Record<string, boolean>>({});
   const [fullscreenAttachment, setFullscreenAttachment] = React.useState<StoryAttachmentItem | null>(null);
@@ -354,6 +410,7 @@ export function AssociatedAttachmentsPanel({
       ...data.links.map((l) => ({ kind: "link" as const, data: l })),
       ...data.attachments.map((a) => ({ kind: "attachment" as const, data: a })),
       ...data.knowledge.docs.map((d) => ({ kind: "doc" as const, data: d })),
+      ...data.knowledge.prds.map((d) => ({ kind: "design" as const, data: d })),
     ],
     [data],
   );
@@ -362,6 +419,7 @@ export function AssociatedAttachmentsPanel({
     const linkItems = items.filter((i) => i.kind === "link");
     const attachmentItems = items.filter((i) => i.kind === "attachment");
     const docItems = items.filter((i) => i.kind === "doc");
+    const designItems = items.filter((i) => i.kind === "design");
 
     // 如果启用了附件类型筛选，则过滤 attachmentItems
     const filteredAttachmentItems = activeTypeFilters.size > 0
@@ -375,6 +433,7 @@ export function AssociatedAttachmentsPanel({
       { kind: "link" as const, label: m.story_associatedAttachments_groupLink(), count: linkItems.length, items: linkItems },
       { kind: "attachment" as const, label: m.story_associatedAttachments_groupAttachment(), count: filteredAttachmentItems.length, items: filteredAttachmentItems },
       { kind: "doc" as const, label: m.story_associatedAttachments_groupKb(), count: docItems.length, items: docItems },
+      { kind: "design" as const, label: m.story_associatedAttachments_groupDesign(), count: designItems.length, items: designItems },
     ].filter((g) => g.count > 0);
   }, [items, activeTypeFilters]);
 
@@ -414,6 +473,19 @@ export function AssociatedAttachmentsPanel({
     }
   };
 
+  const handleUnlinkDesign = async (designId: string) => {
+    try {
+      const res = await unlinkDesign({ data: { storyId, designId } });
+      if (res?.activity) onAppendActivities?.([res.activity]);
+      onRefresh((prev) => ({
+        ...prev,
+        knowledge: { ...prev.knowledge, prds: prev.knowledge.prds.filter((d) => d.id !== designId) },
+      }));
+    } catch (err) {
+      toastError(err, m.story_designDialog_linkFailed());
+    }
+  };
+
   const getHost = (url: string) => {
     try {
       return new URL(url).hostname;
@@ -534,6 +606,37 @@ export function AssociatedAttachmentsPanel({
           </>
         );
       }
+      case "design":
+        return (
+          <>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              nativeButton={false}
+              render={
+                <RouterLink
+                  to="/design/canvas/$id"
+                  params={{ id: item.data.id }}
+                  title={m.story_designDialog_goToCanvas()}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              }
+            >
+              <ExternalLink className="size-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              title={m.story_associatedAttachments_removeLink()}
+              aria-label={m.story_associatedAttachments_removeLink()}
+              onClick={() => handleUnlinkDesign(item.data.id)}
+            >
+              <Unlink className="size-3.5" />
+            </Button>
+          </>
+        );
     }
   };
 
@@ -586,6 +689,19 @@ export function AssociatedAttachmentsPanel({
         </div>
       );
     }
+    if (item.kind === "design") {
+      return (
+        <div key={key} className="flex items-center gap-1.5 border-b border-border/40 px-2 py-2 last:border-b-0">
+          <span className="w-4 shrink-0" aria-hidden />
+          <LucideIconByName name={item.data.icon} size={14} className="shrink-0 text-muted-foreground" />
+          <span className="min-w-0 flex-1 truncate text-sm text-foreground">{item.data.title}</span>
+          <Badge variant="secondary" className="shrink-0 text-[10px] h-4">
+            {m.story_associatedAttachments_groupDesign()}
+          </Badge>
+          <div className="flex items-center gap-0.5 shrink-0">{renderActionsInline(item)}</div>
+        </div>
+      );
+    }
     return (
       <div key={key} className="flex items-center gap-1.5 border-b border-border/40 px-2 py-2 last:border-b-0">
         <span className="w-4 shrink-0" aria-hidden />
@@ -645,6 +761,25 @@ export function AssociatedAttachmentsPanel({
         </div>
       );
     }
+    if (item.kind === "design") {
+      return (
+        <div key={key} className="group relative flex flex-col gap-2 rounded-lg border p-3">
+          <div className="flex items-center gap-2">
+            <LucideIconByName name={item.data.icon} size={20} className="shrink-0 text-muted-foreground" />
+            <span className="min-w-0 truncate text-sm font-medium text-foreground">{item.data.title}</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Badge variant="secondary" className="shrink-0 text-[10px] h-4">
+              {m.story_associatedAttachments_groupDesign()}
+            </Badge>
+          </div>
+          <div className="absolute right-2 top-2 hidden gap-0.5 rounded-md border bg-background p-0.5 group-hover:flex">
+            {renderActionsInline(item, true)}
+          </div>
+          <ItemPreview item={item} />
+        </div>
+      );
+    }
     return (
       <div key={key} className="group relative flex flex-col gap-2 rounded-lg border p-3">
         <div className="flex items-center gap-2">
@@ -665,7 +800,7 @@ export function AssociatedAttachmentsPanel({
 
   return (
     <>
-      <Collapsible defaultOpen data-testid="associated-panel">
+      <Collapsible open={panelOpen} onOpenChange={setPanelOpen} data-testid="associated-panel">
       <CollapsibleTrigger render={<div role="button"
           tabIndex={0}
           onKeyDown={(e) => {
@@ -673,13 +808,14 @@ export function AssociatedAttachmentsPanel({
               e.preventDefault();
               (e.currentTarget as HTMLDivElement).click();
             }
-          }} />} className="group flex w-full cursor-pointer items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors">
+          }} />} className="group sticky top-0 z-20 flex w-full cursor-pointer items-center gap-2 bg-[var(--detail-surface,var(--background))] pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors">
           <div className="flex items-center gap-1.5">
             <span>{m.story_associatedAttachments_title()}</span>
             <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
               {items.length}
             </span>
-            <ChevronDown className="size-3 text-muted-foreground transition-transform group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90" />
+            {/* Base UI Trigger 暴露 data-panel-open（非 Radix 的 data-state），折叠时 -rotate-90 转向右 */}
+            <ChevronDown className="size-3 text-muted-foreground transition-transform -rotate-90 group-data-[panel-open]:rotate-0" />
           </div>
           <div className="flex items-center gap-1 ml-auto" onClick={(e) => e.stopPropagation()}>
             <Button
@@ -704,7 +840,7 @@ export function AssociatedAttachmentsPanel({
             </Button>
           </div>
         </CollapsibleTrigger>
-      <CollapsibleContent className="pb-2">
+      <CollapsibleContent className="pb-2" keepMounted>
         <div
           data-testid="associated-items"
           data-mode={mode}
@@ -714,7 +850,7 @@ export function AssociatedAttachmentsPanel({
             const isCollapsed = groupCollapsed[group.kind] ?? false;
             return (
               <Collapsible key={group.kind} open={!isCollapsed} onOpenChange={(open) => setGroupCollapsed((p) => ({ ...p, [group.kind]: !open }))}>
-                <CollapsibleTrigger render={<div className="flex h-9 cursor-pointer items-center gap-1.5 border-b border-border/40 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors" />}>
+                <CollapsibleTrigger render={<div className="flex h-9 cursor-pointer items-center gap-1.5 border-b border-border/40 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors dark:bg-muted/30" />}>
                     <ChevronDown className={`size-3 shrink-0 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : "rotate-0"}`} />
                     <span>{group.label}</span>
                     <span className="ml-1 text-xs text-muted-foreground">{group.count}</span>
@@ -731,7 +867,7 @@ export function AssociatedAttachmentsPanel({
                                 <span className="absolute -right-1 -top-1 size-1.5 rounded-full bg-primary" />
                               )}
                             </PopoverTrigger>
-                          <PopoverContent align="end" className="w-52 p-2">
+                          <PopoverContent align="end" className="w-52 p-2 duration-0 data-open:animate-none">
                             <div className="text-xs font-medium text-muted-foreground my-1 px-1">
                               {m.story_associatedAttachments_filterByType()}
                             </div>