@allbluecn/web-app 0.17.2 → 0.18.0

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

@@ -0,0 +1,185 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 任务 23：需求变更过期提示条（照 generate-dialog.test.tsx 样板）。断言面（简报步骤 1）：
+// ① getStoryStalenessFn 返回 stale=true 且有关联用例 → 列表顶部提示条
+//    「需求已更新，建议 AI 比对刷新」+ CTA 点击打开生成对话框（testcase-gen-dialog）
+// ② stale=false → 零提示条（不渲染空壳）
+// ③ 零关联用例 → 不发 staleness 查询（无可过期对象）
+// ④ staleness 查询失败 → 静默降级无提示条（不阻塞面板正常渲染）
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+
+const mocks = vi.hoisted(() => ({
+  listTestCasesFn: vi.fn(),
+  getStoryStalenessFn: vi.fn(),
+  startGenerationFn: vi.fn(),
+  getLinkedDocsFn: vi.fn(),
+  listProjectsBriefFn: vi.fn(),
+  navigate: vi.fn(),
+  toastSuccess: vi.fn(),
+  toastError: vi.fn(),
+  useFeature: vi.fn(),
+}));
+
+vi.mock("@tanstack/react-start", () => ({
+  useServerFn: (fn: unknown) => fn,
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+  useNavigate: () => mocks.navigate,
+  Link: ({ children }: { children?: React.ReactNode }) => <a>{children}</a>,
+}));
+
+vi.mock("@/server/serverFns/testcase/testcase-crud", () => ({
+  listTestCasesFn: mocks.listTestCasesFn,
+}));
+
+vi.mock("@/server/serverFns/testcase/stats", () => ({
+  getStoryStalenessFn: mocks.getStoryStalenessFn,
+}));
+
+// generate-dialog 值引入 generation/story 模块——真实文件顶层 createServerFn
+// 在本文件的 react-start mock（仅 useServerFn）下无法求值，照 generate-dialog
+// 测试先例整模块 mock
+vi.mock("@/server/serverFns/testcase/generation", () => ({
+  startGenerationFn: mocks.startGenerationFn,
+}));
+
+vi.mock("@/server/serverFns/story", () => ({
+  getLinkedDocsFn: mocks.getLinkedDocsFn,
+}));
+
+vi.mock("@/server/serverFns/project", () => ({
+  listProjectsBriefFn: mocks.listProjectsBriefFn,
+}));
+
+vi.mock("@/components/billing/use-feature", () => ({
+  useFeature: mocks.useFeature,
+}));
+
+vi.mock("@allbluecn/ui/toast", () => ({
+  toast: { success: mocks.toastSuccess, error: mocks.toastError },
+}));
+
+// presetStory 入口不打开选 Story 弹窗，mock 掉避免拖入真实依赖
+vi.mock("@/components/story/inline-editors/story-select-dialog", () => ({
+  StorySelectDialog: () => null,
+}));
+
+import { StoryDetailTestCases } from "../related-test-cases";
+import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
+
+const caseRow = (id: string, over: Partial<TestCaseSummary> = {}): TestCaseSummary => ({
+  id,
+  sequenceId: 1,
+  identifier: `REQ-TC${id}`,
+  projectId: "proj-1",
+  folderId: null,
+  storyId: "story-1",
+  title: `用例 ${id}`,
+  precondition: null,
+  steps: { steps: [] },
+  type: "functional",
+  priority: "p1",
+  state: "draft",
+  version: 1,
+  automation: "none",
+  aiGenerated: false,
+  assignee: null,
+  createdBy: { id: "u-1", username: "alice", email: "a@b.c", avatarConfig: null, bgShape: "circle", bgColor: "" },
+  archived: false,
+  createdAt: "2026-10-01T00:00:00.000Z",
+  updatedAt: "2026-10-01T00:00:00.000Z",
+  ...over,
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.useFeature.mockReturnValue({ enabled: true, loading: false });
+  mocks.listProjectsBriefFn.mockResolvedValue([]);
+  mocks.listTestCasesFn.mockResolvedValue({ items: [caseRow("1"), caseRow("2")] });
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("StoryDetailTestCases 需求变更过期提示条", () => {
+  it("stale=true → 列表顶部提示条 + CTA 打开生成对话框", async () => {
+    mocks.getStoryStalenessFn.mockResolvedValue({
+      stale: true,
+      storyUpdatedAt: "2026-10-05T12:00:00.000Z",
+      latestCaseCreatedAt: "2026-10-01T00:00:00.000Z",
+    });
+
+    render(<StoryDetailTestCases storyId="story-1" projectId="proj-1" />);
+
+    const banner = await screen.findByTestId("story-testcases-stale");
+    expect(within(banner).getByText("需求已更新，建议 AI 比对刷新")).toBeTruthy();
+
+    // CTA（提示条内第二个生成入口）点击 → 打开与头部入口同一组件形态的生成对话框
+    fireEvent.click(within(banner).getByTestId("testcase-gen-entry"));
+    expect(await screen.findByTestId("testcase-gen-dialog")).toBeTruthy();
+    // 详情入口预选：对话框内 Story 已锁定为当前需求
+    expect(await screen.findByTestId("testcase-gen-storyLinked")).toBeTruthy();
+  });
+
+  it("stale=false → 零提示条", async () => {
+    mocks.getStoryStalenessFn.mockResolvedValue({
+      stale: false,
+      storyUpdatedAt: "2026-10-01T00:00:00.000Z",
+      latestCaseCreatedAt: "2026-10-05T00:00:00.000Z",
+    });
+
+    render(<StoryDetailTestCases storyId="story-1" projectId="proj-1" />);
+
+    await waitFor(() => {
+      expect(mocks.getStoryStalenessFn).toHaveBeenCalledWith({ data: { storyId: "story-1" } });
+    });
+    await waitFor(() => {
+      expect(screen.queryByTestId("story-testcases-stale")).toBeNull();
+    });
+    // 面板本体照常渲染
+    expect(await screen.findByTestId("story-testcases")).toBeTruthy();
+  });
+
+  it("零关联用例 → 不发 staleness 查询", async () => {
+    mocks.listTestCasesFn.mockResolvedValue({ items: [] });
+
+    render(<StoryDetailTestCases storyId="story-1" projectId="proj-1" />);
+
+    await waitFor(() => {
+      expect(mocks.listTestCasesFn).toHaveBeenCalled();
+    });
+    await waitFor(() => {
+      expect(screen.queryByTestId("story-testcases-stale")).toBeNull();
+    });
+    expect(mocks.getStoryStalenessFn).not.toHaveBeenCalled();
+  });
+
+  it("staleness 查询失败 → 静默降级，面板照常渲染", async () => {
+    mocks.getStoryStalenessFn.mockRejectedValue(new Error("boom"));
+
+    render(<StoryDetailTestCases storyId="story-1" projectId="proj-1" />);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("story-testcases-stale")).toBeNull();
+    });
+    expect(await screen.findByTestId("story-testcases")).toBeTruthy();
+  });
+});

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

@@ -16,10 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react";
-import { useTheme } from "next-themes";
 import { Link as RouterLink } from "@tanstack/react-router";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "@/components/ui/toast";
 import {
   BookOpenText,
   ChevronDown,
@@ -36,10 +34,10 @@ import {
   Unlink,
   ChartNoAxesGantt,
 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Button } from "@allbluecn/ui/button";
+import { Badge } from "@allbluecn/ui/badge";
+import { Dialog, DialogContent } from "@allbluecn/ui/dialog";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@allbluecn/ui/collapsible";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { FilePreview } from "@/components/story/relations/file-preview";
@@ -52,6 +50,7 @@ import { generalGroupLabel } from "../../relations/general-groups";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
 import type { AssociatedItem, RelationsData, StoryLinkItem, StoryAttachmentItem } from "../../types";
 import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
 
 export type AssociatedDialogKind = "link" | "attachment" | "knowledge";
 
@@ -264,7 +263,6 @@ function DocHtmlPreview({ kbId, docId, title }: { kbId: string; docId: string; t
   }
   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">
-      {/* eslint-disable-next-line react/no-danger -- 内容已经过 DOMPurify sanitize */}
       <div dangerouslySetInnerHTML={{ __html: sanitize(html) }} />
     </div>
   );
@@ -386,7 +384,7 @@ export function AssociatedAttachmentsPanel({
       if (res?.activity) onAppendActivities?.([res.activity]);
       onRefresh((prev) => ({ ...prev, links: prev.links.filter((l) => l.id !== id) }));
     } catch (err) {
-      toast.error((err as Error)?.message || m.story_linkDialog_removeFailed());
+      toastError(err, m.story_linkDialog_removeFailed());
     }
   };
 
@@ -399,7 +397,7 @@ export function AssociatedAttachmentsPanel({
         attachments: prev.attachments.filter((a) => a.id !== id),
       }));
     } catch (err) {
-      toast.error((err as Error)?.message || m.story_attachmentDialog_removeFailed());
+      toastError(err, m.story_attachmentDialog_removeFailed());
     }
   };
 
@@ -412,7 +410,7 @@ export function AssociatedAttachmentsPanel({
         knowledge: { ...prev.knowledge, docs: prev.knowledge.docs.filter((d) => d.id !== docId) },
       }));
     } catch (err) {
-      toast.error((err as Error)?.message || m.story_knowledgeDialog_linkFailed());
+      toastError(err, m.story_knowledgeDialog_linkFailed());
     }
   };
 

package/src/components/story/detail/story-detail-toolbar/categories.tsx

@@ -25,7 +25,7 @@ import {
   CircleCheckBig,
   Speech,
 } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@allbluecn/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
 interface StoryDetailCategoryConfig {

package/src/components/story/detail/story-detail-toolbar/children.tsx

@@ -23,18 +23,17 @@ import {
   SquareDashedMousePointer,
   ChartNoAxesGantt,
 } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@allbluecn/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@allbluecn/ui/dropdown-menu";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { toast } from "@/components/ui/toast";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@allbluecn/ui/collapsible";
+import { toast } from "@allbluecn/ui/toast";
 import {
   removeChildFn,
   bulkArchiveStoriesFn,
@@ -50,6 +49,7 @@ import type { DisplayOptions } from "../../display/types";
 import type { RelationsData, StoryListItem, UserBrief } from "../../types";
 import type { StoryPatch } from "../../display/group-fields";
 import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
 
 export interface StoryDetailChildrenButtonProps {
   onAction: (action: "create" | "select") => void;
@@ -184,7 +184,7 @@ export function StoryDetailChildrenPanel({
         },
       }));
     } catch (e) {
-      toast.error((e as Error)?.message || m.story_children_removeChildFailed());
+      toastError(e, m.story_children_removeChildFailed());
     }
   };
 
@@ -235,7 +235,7 @@ export function StoryDetailChildrenPanel({
       setSelectedIds(new Set());
       refreshChildren();
     } catch (e) {
-      toast.error((e as Error)?.message || m.story_children_archiveFailed());
+      toastError(e, m.story_children_archiveFailed());
     } finally {
       setBusy(false);
     }
@@ -251,7 +251,7 @@ export function StoryDetailChildrenPanel({
       setSelectedIds(new Set());
       refreshChildren();
     } catch (e) {
-      toast.error((e as Error)?.message || m.story_children_deleteFailed());
+      toastError(e, m.story_children_deleteFailed());
     } finally {
       setBusy(false);
     }
@@ -266,7 +266,7 @@ export function StoryDetailChildrenPanel({
       toast.success(m.story_children_bulkUpdated());
       refreshChildren();
     } catch (e) {
-      toast.error((e as Error)?.message || m.story_children_bulkUpdateFailed());
+      toastError(e, m.story_children_bulkUpdateFailed());
     } finally {
       setBusy(false);
     }

package/src/components/story/detail/story-detail-toolbar/dependencies.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Waypoints } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@allbluecn/ui/button";
 import { m } from "@/paraglide/messages.js";
 
 export function StoryDetailDependencies({

package/src/components/story/detail/story-detail-toolbar/dependency-panel.tsx

@@ -17,11 +17,11 @@
 
 import * as React from "react";
 import { Plus, ChevronDown, ChartNoAxesGantt } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@allbluecn/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@allbluecn/ui/collapsible";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "@/components/ui/toast";
+import { toast } from "@allbluecn/ui/toast";
 import {
   removeDependencyFn,
   updateDependencyFn,
@@ -39,6 +39,7 @@ import type { DisplayOptions, GroupNode } from "../../display/types";
 import type { StoryPatch } from "../../display/group-fields";
 import type { RelationsData, UserBrief, DependencyRow } from "../../types";
 import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
 
 const DEPENDENCY_ERROR_LABELS: Record<string, () => string> = {
   CYCLE: m.story_dependency_errors_CYCLE,
@@ -187,7 +188,8 @@ export function StoryDetailDependencyPanel({
         return next;
       });
     } catch (e) {
-      toast.error(isNetworkError(e) ? m.story_dependency_networkFailed() : (e as Error)?.message || m.story_dependency_removeFailed());
+      if (isNetworkError(e)) toast.error(m.story_dependency_networkFailed());
+      else toastError(e, m.story_dependency_removeFailed());
     }
   };
 
@@ -225,9 +227,8 @@ export function StoryDetailDependencyPanel({
         applyRowsUpdate((rows) => [moved, ...rows], option.group);
       }
     } catch (e) {
-      toast.error(
-        isNetworkError(e) ? m.story_dependency_networkFailed() : (e as Error)?.message || m.story_dependency_updateFailed(),
-      );
+      if (isNetworkError(e)) toast.error(m.story_dependency_networkFailed());
+      else toastError(e, m.story_dependency_updateFailed());
     }
   };
 
@@ -249,7 +250,8 @@ export function StoryDetailDependencyPanel({
       setSelectedIds(new Set());
       refreshDependencies();
     } catch (e) {
-      toast.error(isNetworkError(e) ? m.story_dependency_networkFailed() : (e as Error)?.message || m.story_dependency_removeFailed());
+      if (isNetworkError(e)) toast.error(m.story_dependency_networkFailed());
+      else toastError(e, m.story_dependency_removeFailed());
     } finally {
       setBusy(false);
     }
@@ -269,7 +271,7 @@ export function StoryDetailDependencyPanel({
       setSelectedIds(new Set());
       refreshDependencies();
     } catch (e) {
-      toast.error((e as Error)?.message || m.story_children_archiveFailed());
+      toastError(e, m.story_children_archiveFailed());
     } finally {
       setBusy(false);
     }
@@ -285,7 +287,7 @@ export function StoryDetailDependencyPanel({
       setSelectedIds(new Set());
       refreshDependencies();
     } catch (e) {
-      toast.error((e as Error)?.message || m.story_children_deleteFailed());
+      toastError(e, m.story_children_deleteFailed());
     } finally {
       setBusy(false);
     }
@@ -300,7 +302,7 @@ export function StoryDetailDependencyPanel({
       toast.success(m.story_dependency_bulkUpdated());
       refreshDependencies();
     } catch (e) {
-      toast.error((e as Error)?.message || m.story_children_bulkUpdateFailed());
+      toastError(e, m.story_children_bulkUpdateFailed());
     } finally {
       setBusy(false);
     }

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

@@ -0,0 +1,163 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 需求详情「测试用例」关联区（任务 12 双向关联的 Story 侧）。复用 listTestCasesFn
+// 的 storyId 筛选拉关联用例，Collapsible 列表（标识符 + 标题 + 状态/优先级标签）行
+// 点击跳用例详情，头部条数即覆盖摘要（N 条用例，P1 只显条数）。
+// 任务 21：头部常驻「生成测试用例」入口（testcase 域 generate-dialog 反向引用——
+// 本文件本就横跨 story/testcase 两域：listTestCasesFn + filters 已是同向先例），
+// 零关联用例也渲染面板（生成入口正是空态时的主操作），仅列表区块按条数显隐。
+// 展示模式照 associated-attachments-panel 的 Collapsible 头部惯例。
+// 任务 23：需求变更过期提示条——getStoryStalenessFn 判定 story.updatedAt 晚于关联
+// 用例 max(createdAt) 时在用例列表顶部渲染警示条（amber 惯例同 plan-detail），CTA
+// 复用 GenerateTestCasesButton（presetStory + label 覆盖）直接开同一生成对话框——
+// 与头部入口是同组件双实例（各自 useFeature 门控 + 懒加载项目花名册），零状态提升。
+import * as React from "react";
+import { Link } from "@tanstack/react-router";
+import { AlertTriangle, ChevronDown, ListChecks } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@allbluecn/ui/collapsible";
+import { listTestCasesFn } from "@/server/serverFns/testcase/testcase-crud";
+import { getStoryStalenessFn } from "@/server/serverFns/testcase/stats";
+import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
+import { GenerateTestCasesButton } from "@/components/testcase/ai/generate-dialog";
+import { priorityLabel, stateLabel } from "@/components/testcase/filters";
+import { m } from "@/paraglide/messages.js";
+
+export function StoryDetailTestCases({ storyId, projectId }: { storyId: string; projectId: string | null }) {
+  const [cases, setCases] = React.useState<TestCaseSummary[] | null>(null);
+  const [stale, setStale] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!projectId) return;
+    let cancelled = false;
+    listTestCasesFn({ data: { projectId, storyId, take: 50 } })
+      .then((res: { items: TestCaseSummary[] }) => {
+        if (!cancelled) setCases(res.items);
+      })
+      .catch(() => {
+        if (!cancelled) setCases([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, storyId]);
+
+  // 过期检测（任务 23）：仅在确认有关联用例后查询（零用例无可过期对象，服务端
+  // 同口径恒 false）；cases 变化（如生成完成后刷新）时重判
+  React.useEffect(() => {
+    if (!projectId || !cases || cases.length === 0) return;
+    let cancelled = false;
+    getStoryStalenessFn({ data: { storyId } })
+      .then((res: { stale: boolean }) => {
+        if (!cancelled) setStale(res.stale);
+      })
+      .catch(() => {
+        if (!cancelled) setStale(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, storyId, cases]);
+
+  if (!projectId || !cases) return null;
+
+  return (
+    <Collapsible defaultOpen data-testid="story-testcases-panel" className="px-6">
+      <CollapsibleTrigger
+        render={
+          <div
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                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 transition-colors hover:text-foreground"
+      >
+        <div className="flex items-center gap-1.5">
+          <ListChecks className="size-3.5 text-muted-foreground" />
+          <span>{m.testcase_storyCases_title()}</span>
+          {cases.length > 0 && (
+            <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+              {cases.length}
+            </span>
+          )}
+          <ChevronDown className="size-3 text-muted-foreground transition-transform group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90" />
+        </div>
+        <span className="ml-auto flex items-center gap-2 font-normal text-muted-foreground">
+          {cases.length > 0 && <span>{m.testcase_storyCases_summary({ count: cases.length })}</span>}
+          {/* stopPropagation：头部整行是折叠 trigger，按钮点击不切换折叠态 */}
+          <span onClick={(e) => e.stopPropagation()}>
+            <GenerateTestCasesButton
+              presetStory={{ id: storyId }}
+              projectId={projectId}
+              label={m.testcase_gen_entryButton()}
+              className="h-7 gap-1 px-2 text-xs"
+            />
+          </span>
+        </span>
+      </CollapsibleTrigger>
+      {cases.length > 0 && (
+        <CollapsibleContent className="pb-2">
+          {stale && (
+            <div
+              data-testid="story-testcases-stale"
+              className="mb-2 flex items-center gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400"
+            >
+              <AlertTriangle className="size-3.5 shrink-0" />
+              <span className="min-w-0 flex-1">{m.testcase_stats_staleMessage()}</span>
+              {/* stopPropagation：提示条虽非 trigger 所在，惯用同头部入口防切换折叠态 */}
+              <span onClick={(e) => e.stopPropagation()}>
+                <GenerateTestCasesButton
+                  presetStory={{ id: storyId }}
+                  projectId={projectId}
+                  label={m.testcase_stats_staleAction()}
+                  className="h-6 gap-1 px-2 text-xs"
+                />
+              </span>
+            </div>
+          )}
+          <ul data-testid="story-testcases" className="flex flex-col overflow-hidden rounded-lg border">
+            {cases.map((c) => (
+              <li key={c.id}>
+                <Link
+                  to="/test-cases/$caseId"
+                  params={{ caseId: c.id }}
+                  data-testid={`story-testcase-${c.id}`}
+                  className="flex h-10 items-center gap-2 border-b border-border/40 px-3 text-sm transition-colors last:border-b-0 hover:bg-muted/40"
+                >
+                  <span className="w-24 shrink-0 font-mono text-xs text-muted-foreground">
+                    {c.identifier}
+                  </span>
+                  <span className="min-w-0 flex-1 truncate font-medium">{c.title}</span>
+                  <span className="shrink-0 text-xs text-muted-foreground">{stateLabel(c.state)}</span>
+                  <span className="shrink-0 text-xs font-medium text-muted-foreground">
+                    {priorityLabel(c.priority)}
+                  </span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </CollapsibleContent>
+      )}
+    </Collapsible>
+  );
+}

package/src/components/story/detail/story-detail-toolbar.tsx

@@ -17,9 +17,9 @@
 
 import * as React from "react";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "@/components/ui/toast";
+import { toast } from "@allbluecn/ui/toast";
 import { LinkIcon, Paperclip, BookOpenText } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@allbluecn/ui/button";
 import { StoryDetailChildrenButton, StoryDetailChildrenPanel } from "./story-detail-toolbar/children";
 import { StoryDetailDependencies } from "./story-detail-toolbar/dependencies";
 import { StoryDetailDependencyPanel } from "./story-detail-toolbar/dependency-panel";
@@ -28,6 +28,7 @@ import {
   AssociatedAttachmentsPanel,
   type AssociatedDialogKind,
 } from "./story-detail-toolbar/associated-attachments-panel";
+import { StoryDetailTestCases } from "./story-detail-toolbar/related-test-cases";
 import { LinkManageDialog } from "../relations/link-manage-dialog";
 import { AttachmentManageDialog } from "../relations/attachment-manage-dialog";
 import { KnowledgeSelectDialog } from "../relations/knowledge-select-dialog";
@@ -38,6 +39,7 @@ import { addDependenciesFn, getDependenciesFn, listChildStoriesFn } from "@/serv
 import { DEPENDENCY_TYPE_OPTIONS, toDependencyEdge, type DependencyTypeOption } from "../constants";
 import type { RelationsData, UserBrief } from "../types";
 import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
 
 const DEPENDENCY_ERROR_LABELS: Record<string, () => string> = {
   CYCLE: m.story_dependency_errors_CYCLE,
@@ -109,7 +111,7 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
       }
       refreshDependencies();
     } catch (e) {
-      toast.error((e as Error)?.message || m.story_dependency_addFailed());
+      toastError(e, m.story_dependency_addFailed());
     }
   };
 
@@ -276,6 +278,9 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         onAppendActivities={onAppendActivities}
       />
 
+      {/* 测试用例关联区（任务 12）：列出 storyId 挂载的用例 + 覆盖摘要（P1 只显条数） */}
+      <StoryDetailTestCases storyId={storyId} projectId={projectId} />
+
       <StorySelectDialog
         open={actionOpen === "select"}
         onOpenChange={(open) => {

package/src/components/story/detail/story-properties.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { GitPullRequestArrow, Tag, CalendarRange } from "lucide-react";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@allbluecn/ui/collapsible";
 import { ChevronDown } from "lucide-react";
 import type { StoryState } from "../constants";
 import type { ActivityItem } from "../types";

package/src/components/story/display/__tests__/display-dropdown.test.tsx

@@ -17,7 +17,7 @@
 
 import { describe, it, expect, vi, beforeAll, beforeEach } from "vitest";
 import { render, screen, fireEvent, within } from "@testing-library/react";
-import { TooltipProvider } from "@/components/ui/tooltip";
+import { TooltipProvider } from "@allbluecn/ui/tooltip";
 import { DisplayDropdown } from "../display-dropdown";
 import { DEFAULT_DISPLAY_OPTIONS } from "../types";
 import { buildDefaultView } from "../../views/view-types";

package/src/components/story/display/display-dropdown.tsx

@@ -15,11 +15,11 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useMemo, useState, type ReactNode } from "react";
+import { useMemo, useState } from "react";
 import { ArrowDownNarrowWide, ArrowUpWideNarrow, ChartNoAxesGantt, Check, ChevronRight, ChevronDown, Lock, type LucideIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Switch } from "@/components/ui/switch";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Button } from "@allbluecn/ui/button";
+import { Switch } from "@allbluecn/ui/switch";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip";
 import { useFeature } from "@/components/billing/use-feature";
 import {
   Popover,