@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/ai/__tests__/action-registry.test.ts

@@ -25,11 +25,11 @@ import {
 
 describe("action-registry", () => {
   describe("ACTION_REGISTRY", () => {
-    it("包含 9 个动作，stream-text 动作存在", () => {
-      expect(ACTION_REGISTRY).toHaveLength(9)
+    it("包含 8 个动作，stream-text 动作存在", () => {
+      expect(ACTION_REGISTRY).toHaveLength(8)
       const streamTextModes = ACTION_REGISTRY.filter((a) => a.mode === "stream-text")
       expect(streamTextModes.map((a) => a.type).sort()).toEqual(
-        ["acceptance", "expand", "generate", "polish"],
+        ["expand", "generate", "polish"],
       )
     })
 
@@ -48,29 +48,29 @@ describe("action-registry", () => {
 
   describe("getVisibleActions", () => {
     const allShow: ShowActionProps = {
-      showGenerate: true, showExpand: true, showPolish: true, showAcceptance: true,
+      showGenerate: true, showPolish: true, showExpand: true,
       showSplit: true, showTestCase: true, showPrototype: true, showUi: true, showCode: true,
     }
 
-    it("全部 show=true 时返回全部 9 个，按注册表顺序", () => {
+    it("全部 show=true 时返回全部 8 个，按注册表顺序", () => {
       const result = getVisibleActions(allShow, null)
-      expect(result).toHaveLength(9)
+      expect(result).toHaveLength(8)
       expect(result.map((a) => a.type)).toEqual(
         ACTION_REGISTRY.map((a) => a.type),
       )
     })
 
-    it("默认（不传新 props）只返回 4 个现有动作", () => {
+    it("默认（不传新 props）只返回 3 个现有动作", () => {
       const result = getVisibleActions({}, null)
       expect(result.map((a) => a.type)).toEqual([
-        "generate", "expand", "polish", "acceptance",
+        "generate", "expand", "polish",
       ])
     })
 
     it("按 order 重排顺序", () => {
       const order: StoryAIAction[] = [
         "ui", "prototype", "testCase", "split",
-        "acceptance", "polish", "expand", "generate", "code",
+        "polish", "expand", "generate", "code",
       ]
       const result = getVisibleActions(allShow, order)
       expect(result.map((a) => a.type)).toEqual(order)
@@ -87,10 +87,10 @@ describe("action-registry", () => {
       const result = getVisibleActions(allShow, order)
       const types = result.map((a) => a.type)
       expect(types.slice(0, 2)).toEqual(["generate", "expand"])
-      expect(types).toHaveLength(9)
+      expect(types).toHaveLength(8)
       // 缺失的按 ACTION_REGISTRY 注册顺序追加
       expect(types.slice(2)).toEqual([
-        "polish", "split", "testCase", "acceptance", "prototype", "ui", "code",
+        "polish", "split", "testCase", "prototype", "ui", "code",
       ])
     })
   })

package/src/components/story/ai/action-registry.ts

@@ -17,16 +17,17 @@
 
 import {
   Sparkles, PencilSparkles, WandSparkles, FlaskConical,
-  Split, TestTubeDiagonal, PencilRuler, Palette, PenTool,
+  Split, PencilRuler, Palette, PenTool,
 } from "lucide-react"
 import type * as React from "react"
 import { m } from "@/paraglide/messages.js"
 
 export type StoryAIAction =
-  | "generate" | "expand" | "polish" | "acceptance"
+  | "generate" | "expand" | "polish"
   | "split" | "testCase" | "prototype" | "ui" | "code"
 
-export type ActionMode = "stream-text" | "preview-create" | "dialog-config" | "reserved"
+export type ActionMode =
+  | "stream-text" | "preview-create" | "dialog-config" | "dialog-testcase" | "reserved"
 
 export interface ActionDef {
   type: StoryAIAction
@@ -45,8 +46,7 @@ export const ACTION_REGISTRY: ActionDef[] = [
   { type: "expand",     label: "扩写",     hint: "补充实现细节与背景",  icon: PencilSparkles, mode: "stream-text", requiresText: true, labelFn: m.story_storyAi_actionRegistry_expand_label, hintFn: m.story_storyAi_actionRegistry_expand_hint },
   { type: "polish",     label: "润色",     hint: "使表述更清晰专业",    icon: WandSparkles,   mode: "stream-text", requiresText: true, labelFn: m.story_storyAi_actionRegistry_polish_label, hintFn: m.story_storyAi_actionRegistry_polish_hint },
   { type: "split",      label: "拆需求",   hint: "AI 拆解为子需求",     icon: Split,          mode: "preview-create", labelFn: m.story_storyAi_actionRegistry_split_label, hintFn: m.story_storyAi_actionRegistry_split_hint },
-  { type: "testCase",   label: "写测例",   hint: "生成测试用例",        icon: TestTubeDiagonal,       mode: "reserved", labelFn: m.story_storyAi_actionRegistry_testCase_label, hintFn: m.story_storyAi_actionRegistry_testCase_hint },
-  { type: "acceptance", label: "写验收", hint: "补充验收标准",        icon: FlaskConical,          mode: "stream-text", labelFn: m.story_storyAi_actionRegistry_acceptance_label, hintFn: m.story_storyAi_actionRegistry_acceptance_hint },
+  { type: "testCase",   label: "写测例",   hint: "生成测试用例",        icon: FlaskConical, mode: "dialog-testcase", labelFn: m.story_storyAi_actionRegistry_testCase_label, hintFn: m.story_storyAi_actionRegistry_testCase_hint },
   { type: "prototype",  label: "画原型",   hint: "在 PRD 画板绘制原型", icon: PencilRuler,    mode: "dialog-config", labelFn: m.story_storyAi_actionRegistry_prototype_label, hintFn: m.story_storyAi_actionRegistry_prototype_hint },
   { type: "ui",         label: "画UI",     hint: "在设计画板绘制 UI",   icon: PenTool,        mode: "reserved", labelFn: m.story_storyAi_actionRegistry_ui_label, hintFn: m.story_storyAi_actionRegistry_ui_hint },
   { type: "code",       label: "写代码",   hint: "生成代码",           icon: Palette,        mode: "reserved", labelFn: m.story_storyAi_actionRegistry_code_label, hintFn: m.story_storyAi_actionRegistry_code_hint },
@@ -56,7 +56,6 @@ export interface ShowActionProps {
   showGenerate?: boolean
   showExpand?: boolean
   showPolish?: boolean
-  showAcceptance?: boolean
   showSplit?: boolean
   showTestCase?: boolean
   showPrototype?: boolean
@@ -68,7 +67,6 @@ const SHOW_KEY: Record<StoryAIAction, keyof ShowActionProps> = {
   generate: "showGenerate",
   expand: "showExpand",
   polish: "showPolish",
-  acceptance: "showAcceptance",
   split: "showSplit",
   testCase: "showTestCase",
   prototype: "showPrototype",

package/src/components/story/ai/handlers/stream-text.ts

@@ -30,7 +30,6 @@ const POLISH_ACTION_MAP: Record<string, StoryAiPolishAction> = {
   generate: "expand",
   expand: "expand",
   polish: "polish",
-  acceptance: "acceptance",
 }
 
 export interface StreamTextArgs {
@@ -46,7 +45,7 @@ export interface StreamTextArgs {
 }
 
 export interface StreamTextAction {
-  type: "generate" | "expand" | "polish" | "acceptance" | null
+  type: "generate" | "expand" | "polish" | null
 }
 
 export function useStreamTextAction(args: StreamTextArgs) {
@@ -73,7 +72,6 @@ export function useStreamTextAction(args: StreamTextArgs) {
       generate: { requiresTitle: true },
       expand: { requiresText: true },
       polish: { requiresText: true },
-      acceptance: {},
     } as const
     const actionDef = aDef[type]
     const requiresTitle = "requiresTitle" in actionDef && actionDef.requiresTitle

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

@@ -15,7 +15,8 @@
 // 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, useEffect, useRef, useState } from "react"
+import {useEffect,useMemo,useRef,useState} from "react";
+import { createPortal } from "react-dom";
 import {
   Check, X, Loader2, Square,
   Cpu, ChevronDown,
@@ -39,12 +40,17 @@ import { useToolbarOverflow } from "./use-toolbar-overflow"
 import { MorePopover } from "./handlers/more-popover"
 import { StorySplitDialog } from "./split-dialog"
 import { StoryPrototypeDialog } from "./prototype-dialog"
+import { useFeature } from "@/components/billing/use-feature"
+import { listProjectsBriefFn } from "@/server/serverFns/project"
+import {
+  GenerateTestCasesDialog,
+  type ProjectBrief,
+} from "@/components/testcase/ai/generate-dialog"
 import { m } from "@/paraglide/messages.js";
 
 export type StoryDescriptionAIMode = "text" | "editor"
 
-// 向后兼容：保留旧类型名导出
-export type StoryDescriptionAIAction = "generate" | "expand" | "polish" | "acceptance"
+export type StoryDescriptionAIAction = "generate" | "expand" | "polish"
 
 export interface StoryAiToolbarProps extends ShowActionProps {
   storyId?: string
@@ -74,13 +80,13 @@ export function StoryAiToolbar(props: StoryAiToolbarProps) {
     model, groups = [], onModelChange, showModelSelect = true,
     modelSelectVariant = "leading",
     fill = false,
-    showGenerate = true, showExpand = true, showPolish = true, showAcceptance = true,
+    showGenerate = true, showExpand = true, showPolish = true,
     showSplit = false, showTestCase = false, showPrototype = false, showUi = false,
     showCode = false,
   } = props
 
   const showProps: ShowActionProps = {
-    showGenerate, showExpand, showPolish, showAcceptance,
+    showGenerate, showExpand, showPolish,
     showSplit, showTestCase, showPrototype, showUi, showCode,
   }
   // 固定顺序：始终用 ACTION_REGISTRY 默认顺序（已移除用户自定义排序）
@@ -94,6 +100,27 @@ export function StoryAiToolbar(props: StoryAiToolbarProps) {
   const [popoverOpen, setPopoverOpen] = useState(false)
   const [splitOpen, setSplitOpen] = useState(false)
   const [prototypeOpen, setPrototypeOpen] = useState(false)
+  // 写测例（task: 接入 AI 生成测试用例）：复用 testcase 域生成对话框（presetStory
+  // 预选当前需求）；feature 门控只做体验优化（按钮禁用），服务端 requireFeature 是边界
+  const [testCaseOpen, setTestCaseOpen] = useState(false)
+  const [projects, setProjects] = useState<ProjectBrief[] | null>(null)
+  const testCaseFeature = useFeature("testGeneration")
+  const testCaseLocked = !testCaseFeature.loading && !testCaseFeature.enabled
+
+  useEffect(() => {
+    if (!testCaseOpen || projects) return
+    let cancelled = false
+    listProjectsBriefFn()
+      .then((rows) => {
+        if (!cancelled) setProjects(rows)
+      })
+      .catch(() => {
+        if (!cancelled) setProjects([])
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [testCaseOpen, projects])
 
   useEffect(() => {
     if (isGenerating && popoverOpen) setPopoverOpen(false)
@@ -116,13 +143,17 @@ export function StoryAiToolbar(props: StoryAiToolbarProps) {
   const visibleShown = hasOverflow ? visibleActions.slice(0, visibleCount) : visibleActions
   const collapsedActions = hasOverflow ? visibleActions.slice(visibleCount) : []
 
-  const HAS_DRAFT_UI = new Set<StoryAIAction>(["expand", "polish", "acceptance"])
+  const HAS_DRAFT_UI = new Set<StoryAIAction>(["expand", "polish"])
 
   const onActionClick = (type: StoryAIAction) => {
     const def = ACTION_REGISTRY.find((a) => a.type === type)
     if (!def) return
     if (def.mode === "stream-text") {
-      handle(type as "generate" | "expand" | "polish" | "acceptance")
+      handle(type as "generate" | "expand" | "polish")
+      return
+    }
+    if (type === "testCase") {
+      setTestCaseOpen(true)
       return
     }
     if (def.mode === "reserved") {
@@ -201,21 +232,25 @@ export function StoryAiToolbar(props: StoryAiToolbarProps) {
     <div ref={containerRef} className={`group relative flex items-center gap-1 min-w-0 flex-nowrap${fill ? " flex-[1_1_auto]" : ""}`}>
       {showModelSelect && !isTrailing && renderModelSelect("leading")}
 
-      {/* 隐藏测量层：渲染全部按钮的天然宽度，供溢出计算使用 */}
-      <div ref={measureRef} aria-hidden className="absolute -z-10 invisible flex items-center gap-1 pointer-events-none">
-        {visibleActions.map((a) => (
-          <Button key={a.type} variant="ghost" size="sm" className="h-7 px-2 text-xs text-muted-foreground">
-            <a.icon className="mr-1 size-3" />{a.labelFn()}
-          </Button>
-        ))}
-      </div>
+      {/* 隐藏测量层：portal 到 body——留在滚动容器子树内会撑出横向滚动区 */}
+      {typeof document !== "undefined" && createPortal(
+        <div ref={measureRef} aria-hidden className="fixed top-0 left-0 -z-10 invisible flex items-center gap-1 pointer-events-none">
+          {visibleActions.map((a) => (
+            <Button key={a.type} variant="ghost" size="sm" className="h-7 px-2 text-xs text-muted-foreground">
+              <a.icon className="mr-1 size-3" />{a.labelFn()}
+            </Button>
+          ))}
+        </div>,
+        document.body
+      )}
 
       {visibleShown.map((a, idx) => {
         const isActive = action === a.type
         const disabled =
           isGenerating ||
           (a.requiresTitle && !title?.trim()) ||
-          (a.requiresText && !description.trim())
+          (a.requiresText && !description.trim()) ||
+          (a.type === "testCase" && testCaseLocked)
         return (
           <Tooltip key={a.type}>
             <TooltipTrigger render={<span />}>
@@ -278,6 +313,13 @@ export function StoryAiToolbar(props: StoryAiToolbarProps) {
         open={prototypeOpen}
         onOpenChange={setPrototypeOpen}
       />
+
+      <GenerateTestCasesDialog
+        open={testCaseOpen}
+        onOpenChange={setTestCaseOpen}
+        projects={projects ?? []}
+        presetStory={storyId ? { id: storyId } : null}
+      />
     </div>
   )
 }

package/src/components/story/ai/use-toolbar-overflow.ts

@@ -167,17 +167,14 @@ export function useToolbarOverflow(args: UseToolbarOverflowArgs): OverflowResult
   useEffect(() => {
     const container = containerRef.current
     if (!container) return
-    let frame = 0
+    // RO 回调内同步测量——RO 每帧至多投递一次已天然节流；之前经 rAF 转发会在
+    // 拖拽窗口（live resize）时被推迟到布局空闲，表现为拖动中不更新、停顿才变
     const ro = new ResizeObserver(() => {
-      cancelAnimationFrame(frame)
-      frame = requestAnimationFrame(() => {
-        const next = measure()
-        if (next) apply(next)
-      })
+      const next = measure()
+      if (next) apply(next)
     })
     ro.observe(container)
     return () => {
-      cancelAnimationFrame(frame)
       ro.disconnect()
     }
   }, [containerRef, measure, apply])

package/src/components/story/columns.tsx

@@ -119,7 +119,7 @@ export function createStoryColumns(): ColumnDef<typeof storyTableFeatures, Story
         <div className="flex items-center gap-2">
           <UserAvatar
             avatarConfig={a.avatarConfig}
-            bgShape={a.bgShape as "circle" | "rounded" | "square" | null}
+            bgShape={a.bgShape}
             bgColor={a.bgColor}
             name={a.username}
             size="sm"
@@ -198,7 +198,7 @@ export function createStoryColumns(): ColumnDef<typeof storyTableFeatures, Story
         <div className="flex items-center gap-2">
           <UserAvatar
             avatarConfig={c.avatarConfig}
-            bgShape={c.bgShape as "circle" | "rounded" | "square" | null}
+            bgShape={c.bgShape}
             bgColor={c.bgColor}
             name={c.username}
             size="sm"

package/src/components/story/constants.ts

@@ -15,7 +15,7 @@
 // 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 { GitPullRequestArrow, CircleFadingArrowUp, Repeat, Repeat2, CalendarPlus2, Hash, MessageCircleCheck, RefreshCcwDot, CircleFadingPlus, CircleArrowUp, CircleArrowRight, CircleArrowDown, CircleSlash, CircleDashed, CircleCheckBig, LoaderCircle, CheckCircle2, XCircle, FilePenLine, Flag, UserRound, CalendarCheck, Tags, TextInitial, ListTree, ArrowLeftRight, Link2, Paperclip, BookOpen, Unlink, Trash2, BookX, FileX, ArrowRightFromLine, ArrowLeftToLine, ArrowUpFromDot, type LucideIcon } from "lucide-react";
+import { GitPullRequestArrow, CircleFadingArrowUp, Repeat, Repeat2, CalendarPlus2, Hash, MessageCircleCheck, RefreshCcwDot, CircleFadingPlus, CircleArrowUp, CircleArrowRight, CircleArrowDown, CircleSlash, CircleDashed, CircleCheckBig, LoaderCircle, CheckCircle2, XCircle, FilePenLine, FilePlus2, Flag, UserRound, CalendarCheck, Tags, TextInitial, ListTree, ArrowLeftRight, Link2, Paperclip, BookOpen, Unlink, Trash2, BookX, FileX, ArrowRightFromLine, ArrowLeftToLine, ArrowUpFromDot, ListChecks, Bug, type LucideIcon } from "lucide-react";
 import { m } from '@/paraglide/messages.js';
 import type { DependencyEdgeType, DependencyGroup } from "./types";
 
@@ -89,6 +89,9 @@ export const PRIORITY_ICON: Record<StoryPriority, LucideIcon> = {
 export const ACTIVITY_LABEL: Record<string, () => string> = {
   created: m.story_activity_created,
   updated: m.story_activity_updated,
+  // 协同落库活动（apps/collab exporters/story.ts COLLAB_STORY_UPDATE_ACTION，
+  // 任务 21 遗留收口：缺标签时时间线显示原始 key）
+  collab_update: m.story_activity_collab_update,
   commented: m.story_activity_commented,
   state_changed: m.story_activity_state_changed,
   priority_changed: m.story_activity_priority_changed,
@@ -117,12 +120,19 @@ export const ACTIVITY_LABEL_INTERPOLATED: Record<string, (inputs: { value: strin
   attachment_removed: m.story_activity_attachment_removed,
   kb_linked: m.story_activity_kb_linked,
   kb_unlinked: m.story_activity_kb_unlinked,
+  prd_linked: m.story_activity_prd_linked,
   prd_unlinked: m.story_activity_prd_unlinked,
+  testcase_added: m.story_activity_testcase_added,
+  testcase_removed: m.story_activity_testcase_removed,
+  testcase_created: m.story_activity_testcase_created,
+  bug_linked: m.story_activity_bug_linked,
+  bug_unlinked: m.story_activity_bug_unlinked,
 };
 
 export const ACTIVITY_ICON: Record<string, LucideIcon> = {
   created: CircleFadingPlus,
   updated: RefreshCcwDot,
+  collab_update: RefreshCcwDot,
   commented: MessageCircleCheck,
   state_changed: CircleDashed,
   priority_changed: Flag,
@@ -147,8 +157,14 @@ startDate_changed: CalendarPlus2,
     attachment_removed: Trash2,
     kb_linked: BookOpen,
     kb_unlinked: BookX,
+    prd_linked: FilePlus2,
     prd_unlinked: FileX,
     iteration_changed: Repeat,
+    testcase_added: ListChecks,
+    testcase_removed: Unlink,
+    testcase_created: ListChecks,
+    bug_linked: Bug,
+    bug_unlinked: Unlink,
   };
 
 // ====== 依赖关系常量（对齐 Plane，新模型） ======

package/src/components/story/create-story-dialog.tsx

@@ -42,7 +42,7 @@ import type { StoryPriority, StoryState } from "./constants"
 import type { UserBrief } from "./types"
 import { serializeStoryDescription } from "./types"
 import { StateEditor, PriorityEditor, AssigneeEditor, DateEditor, LabelsEditor } from "./inline-editors"
-import { createStorySchema } from "./schemas/story-create"
+import { createStorySchema } from "./story-create-schema"
 
 import { NotionDocEditor } from "@/components/tiptap/notion-like"
 import { StoryAiToolbar } from "./ai/story-ai-toolbar"
@@ -56,6 +56,7 @@ interface CreateStoryDialogProps {
   projects: { id: string; name: string; displayId: string | null; icon: string }[]
   labels: { id: string; name: string; color: string }[]
   initialStartDate?: string
+  initialTargetDate?: string
   initialState?: string
   initialParentId?: string
   initialProjectId?: string
@@ -72,6 +73,7 @@ export function CreateStoryDialog({
   projects,
   labels,
   initialStartDate,
+  initialTargetDate,
   initialState,
   initialParentId,
   initialProjectId,
@@ -85,7 +87,7 @@ export function CreateStoryDialog({
       priority: "none",
       assigneeId: "none",
       startDate: initialStartDate ?? "",
-      targetDate: "",
+      targetDate: initialTargetDate ?? "",
       labelIds: [] as string[],
     },
     validators: [{ run: createStorySchema, triggers: ['change'] }] as any,
@@ -116,7 +118,7 @@ export function CreateStoryDialog({
       form.setFieldValue("priority", "none")
       form.setFieldValue("assigneeId", "none")
       form.setFieldValue("startDate", initialStartDate ?? "")
-      form.setFieldValue("targetDate", "")
+      form.setFieldValue("targetDate", initialTargetDate ?? "")
       form.setFieldValue("labelIds", [])
       if (!continuousCreate) {
         if (initialProjectId) {
@@ -128,7 +130,7 @@ export function CreateStoryDialog({
       setDescription({ html: "", markdown: "" })
       setIsEditorFocused(false)
     }
-  }, [open, initialStartDate, initialState, initialProjectId, form])
+  }, [open, initialStartDate, initialTargetDate, initialState, initialProjectId, form])
 
   useEffect(() => {
     if (!open) return
@@ -184,7 +186,7 @@ export function CreateStoryDialog({
         form.setFieldValue("priority", "none")
         form.setFieldValue("assigneeId", "none")
         form.setFieldValue("startDate", initialStartDate ?? "")
-        form.setFieldValue("targetDate", "")
+        form.setFieldValue("targetDate", initialTargetDate ?? "")
         form.setFieldValue("labelIds", [])
         if (currentProjectId) {
           form.setFieldValue("projectId", currentProjectId)
@@ -219,7 +221,7 @@ export function CreateStoryDialog({
         if (!loading) onOpenChange(v)
       }}
     >
-      <DialogContent className="sm:max-w-260 -mt-50">
+      <DialogContent className="sm:max-w-[min(65rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="text-xl">{m.story_create_title()}</DialogTitle>
         </DialogHeader>
@@ -313,7 +315,6 @@ export function CreateStoryDialog({
                     groups={aiGroups}
                     onModelChange={setAiModel}
                     onGenerating={setAiGenerating}
-                    showAcceptance={false}
                   />
                 </div>
             </div>

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

@@ -17,7 +17,7 @@
 
 import { describe, it, expect, vi } from "vitest";
 import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, within } from "@testing-library/react";
 
 vi.mock("@tanstack/react-start", () => ({
   useServerFn: (fn: any) => vi.fn().mockImplementation((args: any) => fn(args)),
@@ -26,11 +26,18 @@ vi.mock("@/server/serverFns/story", () => ({
   removeLinkFn: vi.fn(async () => ({})),
   removeAttachmentFn: vi.fn(async () => ({})),
   unlinkDocFn: vi.fn(async () => ({})),
+  unlinkDesignFn: vi.fn(async () => ({ ok: true })),
   checkLinkEmbeddableFn: vi.fn(async () => ({ embeddable: true })),
 }));
 vi.mock("@/server/serverFns/knowledge", () => ({
   getDocumentFn: vi.fn(async () => ({ content: { html: "<p>hello</p>", markdown: "hello" } })),
 }));
+vi.mock("@/server/serverFns/design", () => ({
+  getDesignPreviewFn: vi.fn(async () => ({
+    design: { id: "ds1", name: "PRD 文档", icon: "file", description: null },
+    html: "<p>设计文档内容</p>",
+  })),
+}));
 vi.mock("@/components/ui/toast", () => ({
   toast: { success: vi.fn(), error: vi.fn() },
 }));
@@ -47,7 +54,7 @@ const data = {
     { id: "a1", fileName: "文件.png", fileSize: 2048, mimeType: "image/png", storageUrl: "/m/1" },
   ],
   knowledge: {
-    prds: [],
+    prds: [{ id: "ds1", title: "PRD 文档", icon: "file" }],
     docs: [
       { id: "d1", title: "知识页", kbId: "kb1", kbName: "团队库", kbIcon: "notebook", docIcon: null, parentId: null },
     ],
@@ -68,14 +75,17 @@ function setup(props?: { data: RelationsData }) {
 }
 
 describe("AssociatedAttachmentsPanel", () => {
-  it("三类资源合并渲染，计数 badge 为总数 3，默认列表视图", () => {
+  it("四类资源合并渲染，计数 badge 为总数 4，默认列表视图", () => {
     setup();
     expect(screen.getByText("关联附件")).toBeInTheDocument();
-    expect(screen.getByText("3")).toBeInTheDocument();
+    expect(screen.getByText("4")).toBeInTheDocument();
     expect(screen.getByText("站点A")).toBeInTheDocument();
     expect(screen.getByText("文件.png")).toBeInTheDocument();
     expect(screen.getByText("知识页")).toBeInTheDocument();
     expect(screen.getByText("团队库")).toBeInTheDocument();
+    // 组头与设计行 Badge 均为「设计」，设计行标题单独断言
+    expect(screen.getAllByText("设计").length).toBeGreaterThanOrEqual(2);
+    expect(screen.getByText("PRD 文档")).toBeInTheDocument();
   });
 
   it("点击预览按钮切换到预览模式，渲染网格布局", () => {
@@ -111,4 +121,28 @@ describe("AssociatedAttachmentsPanel", () => {
       expect.objectContaining({ id: "l1" }),
     );
   });
+
+  it("设计行「打开」走 /design/canvas/$id，解联按钮回调 unlinkDesignFn", async () => {
+    const { unlinkDesignFn } = await import("@/server/serverFns/story");
+    const onRefresh = vi.fn();
+    render(
+      <AssociatedAttachmentsPanel
+        storyId="s1"
+        data={data}
+        onRefresh={onRefresh}
+        onOpenDialog={vi.fn()}
+      />,
+    );
+    // 前序用例可能已把预览模式持久化进 localStorage，先强制回列表视图
+    fireEvent.click(screen.getByRole("button", { name: "列表" }));
+    // mock 的 Link 不透传 title（无可访问名），限定设计行内取链接断言 href
+    const designRow = screen.getByText("PRD 文档").closest("div")!;
+    const openBtn = within(designRow).getByRole("link");
+    // 测试 mock 的 Link href 为路由模式串（params 不拼进 href）
+    expect(openBtn.getAttribute("href")).toContain("/design/canvas/");
+    // 「取消关联」在 doc 行也存在，限定设计行作用域点击
+    fireEvent.click(within(designRow).getByRole("button", { name: "取消关联" }));
+    await vi.waitFor(() => expect(unlinkDesignFn).toHaveBeenCalledWith({ data: { storyId: "s1", designId: "ds1" } }));
+    await vi.waitFor(() => expect(onRefresh).toHaveBeenCalled());
+  });
 });

package/src/components/story/detail/__tests__/categories.test.tsx

@@ -15,46 +15,72 @@
 // 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 { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { StoryDetailCategories } from "../story-detail-toolbar/categories";
+import {
+  StoryDetailCategoryButtons,
+  StoryDetailCategoryDialogs,
+  type StoryCategoryKey,
+} from "../story-detail-toolbar/categories";
 
 ;
 
 const renderWithProviders = (ui: React.ReactElement) =>
   render(<TooltipProvider>{ui}</TooltipProvider>);
 
-describe("StoryDetailCategories", () => {
-  it("渲染 6 个 category button", () => {
-    renderWithProviders(<StoryDetailCategories />);
-    const buttons = screen.getAllByRole("button");
-    expect(buttons).toHaveLength(6);
-  });
-
-  it("渲染 6 个 category 标签", () => {
-    renderWithProviders(<StoryDetailCategories />);
+describe("StoryDetailCategoryButtons", () => {
+  it("渲染 4 个 category 按钮", () => {
+    renderWithProviders(<StoryDetailCategoryButtons onAction={() => {}} />);
     expect(screen.getByText("PRD")).toBeTruthy();
     expect(screen.getByText("UI")).toBeTruthy();
-    expect(screen.getByText("BUG")).toBeTruthy();
     expect(screen.getByText("测试用例")).toBeTruthy();
-    expect(screen.getByText("验收")).toBeTruthy();
-    expect(screen.getByText("复盘")).toBeTruthy();
+    expect(screen.getByText("BUG")).toBeTruthy();
+  });
+
+  it("点击按钮回调对应 key", () => {
+    const onAction = vi.fn();
+    renderWithProviders(<StoryDetailCategoryButtons onAction={onAction} />);
+    fireEvent.click(screen.getByText("PRD"));
+    expect(onAction).toHaveBeenCalledWith("prd");
+    fireEvent.click(screen.getByText("UI"));
+    expect(onAction).toHaveBeenCalledWith("ui");
   });
 
-  it("bug 和 test-case 之间有一个分隔线", () => {
-    renderWithProviders(<StoryDetailCategories />);
-    const spans = document.querySelectorAll("span");
-    const separator = Array.from(spans).find((s) =>
-      s.className.includes("w-px") && s.className.includes("h-4"),
+  it("collapsedKeys 中的按钮不渲染（溢出收拢让位）", () => {
+    renderWithProviders(
+      <StoryDetailCategoryButtons onAction={() => {}} collapsedKeys={new Set<StoryCategoryKey>(["prd", "ui"])} />,
     );
-    expect(separator).toBeTruthy();
+    expect(screen.queryByText("PRD")).toBeNull();
+    expect(screen.queryByText("UI")).toBeNull();
+    expect(screen.getByText("测试用例")).toBeTruthy();
+    expect(screen.getByText("BUG")).toBeTruthy();
   });
+});
 
-  it("bug 前后各有一个 button", () => {
-    renderWithProviders(<StoryDetailCategories />);
-    const bugBtn = screen.getByText("BUG")
-      .closest("button")!;
-    expect(bugBtn).toBeTruthy();
+describe("StoryDetailCategoryDialogs", () => {
+  it("active=case 打开用例弹窗、active=bug 打开 BUG 弹窗", () => {
+    const { rerender } = renderWithProviders(
+      <StoryDetailCategoryDialogs
+        storyId="s1"
+        projectId="p1"
+        active="case"
+        onOpenChange={() => {}}
+        onLinked={() => {}}
+      />,
+    );
+    // 用例弹窗标题（SelectCasesDialog）；BUG 弹窗未开
+    expect(document.querySelector("[role='dialog']")).toBeTruthy();
+    rerender(
+      <TooltipProvider>
+        <StoryDetailCategoryDialogs
+          storyId="s1"
+          projectId="p1"
+          active="bug"
+          onOpenChange={() => {}}
+          onLinked={() => {}}
+        />
+      </TooltipProvider>,
+    );
   });
 });