@allbluecn/web-app 0.18.2 → 0.19.0

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

@@ -0,0 +1,613 @@
+// 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/>.
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "@/components/ui/toast";
+import { LinkIcon, Paperclip, BookOpenText, ChevronDown, GitBranch, Waypoints } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { StoryDetailChildrenButton, StoryDetailChildrenPanel } from "./children";
+import { StoryDetailDependencies } from "./dependencies";
+import { StoryDetailDependencyPanel } from "./dependency-panel";
+import {
+  StoryDetailCategoryButtons,
+  StoryDetailCategoryDialogs,
+  STORY_CATEGORY_ITEMS,
+  type StoryCategoryKey,
+} from "./categories";
+import {
+  AssociatedAttachmentsPanel,
+  type AssociatedDialogKind,
+} from "./associated-attachments-panel";
+import { StoryDetailTestCases } from "./related-test-cases";
+import { StoryBugsPanel } from "@/components/bug/story-bugs-panel";
+import { LinkManageDialog } from "../../relations/link-manage-dialog";
+import { AttachmentManageDialog } from "../../relations/attachment-manage-dialog";
+import { KnowledgeSelectDialog } from "../../relations/knowledge-select-dialog";
+import { DesignSelectDialog, type DesignSelectMode } from "../../relations/design-select-dialog";
+import { getLinksFn, getAttachmentsFn, getLinkedDocsFn, getLinkedDesignsFn } from "@/server/serverFns/story";
+import { StorySelectDialog } from "../../inline-editors/story-select-dialog";
+import { CreateStoryDialog } from "../../create-story-dialog";
+import { addDependenciesFn, getDependenciesFn, listChildStoriesFn } from "@/server/serverFns/story";
+import { DEPENDENCY_TYPE_OPTIONS, toDependencyEdge, type DependencyTypeOption } from "../../constants";
+import { useToolbarOverflow } from "../../ai/use-toolbar-overflow";
+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,
+  DUPLICATED: m.story_dependency_errors_DUPLICATED,
+  SELF: m.story_dependency_errors_SELF,
+}
+
+interface StoryDetailToolbarProps {
+  storyId: string;
+  /** 当前需求编号（依赖 tooltip 文案用） */
+  storyIdentifier?: string;
+  projectId: string | null;
+  /** 需求最近更新时间（编辑保存后变化，测试用例面板以此重判 stale） */
+  storyUpdatedAt?: string | null;
+  data: RelationsData;
+  onRefresh: (next: (prev: RelationsData) => RelationsData) => void;
+  /** 关联类操作产生的活动即时追加到时间线 */
+  onAppendActivities?: (items: import("../../types").ActivityItem[]) => void;
+  users?: UserBrief[];
+  projects?: { id: string; name: string; icon: string; displayId: string | null }[];
+  labels?: { id: string; name: string; color: string }[];
+  onNavigateInPanel?: (targetId: string, targetIdentifier?: string, relationKind?: "child" | "dependency") => void;
+  /** 用例/BUG 行的面板内叠加打开（peek 传入；缺省整页跳转） */
+  onOpenEntity?: (entity: import("../../types").StoryEntityOverlay) => void;
+}
+
+export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, storyUpdatedAt, data, onRefresh, onAppendActivities, users, projects, labels, onNavigateInPanel, onOpenEntity }: StoryDetailToolbarProps) {
+  const [actionOpen, setActionOpen] = React.useState<"create" | "select" | null>(null);
+  const [dependencyDialogOpen, setDependencyDialogOpen] = React.useState(false);
+  const [assocDialogOpen, setAssocDialogOpen] = React.useState<AssociatedDialogKind | null>(null);
+  const [designDialog, setDesignDialog] = React.useState<{ open: boolean; mode: DesignSelectMode }>({ open: false, mode: "design" });
+  const [linkInitialEdit, setLinkInitialEdit] = React.useState<import("../../types").StoryLinkItem | null>(null);
+  const [editAttachment, setEditAttachment] = React.useState<import("../../types").StoryAttachmentItem | null>(null);
+  const [dependencyType, setDependencyType] = React.useState<DependencyTypeOption["key"] | undefined>(undefined);
+  // 关联测试用例提交成功 → bump 刷新测试用例面板（面板数据自持，refreshKey 变化重拉）
+  const [casesRefreshKey, setCasesRefreshKey] = React.useState(0);
+  // 工具栏 BUG 按钮关联成功 → bump 刷新 BUG 面板
+  const [bugsRefreshKey, setBugsRefreshKey] = React.useState(0);
+  // 分类弹窗（测试用例/BUG）受控状态——按钮直开与「更多」菜单代理同链路
+  const [categoryActive, setCategoryActive] = React.useState<StoryCategoryKey | null>(null);
+  const addDependencies = useServerFn(addDependenciesFn);
+
+  // ── toolbar 溢出收拢（交互同 AI 生成行：尾部「更多 N」下拉）────────
+  const toolbarRef = React.useRef<HTMLDivElement>(null);
+  const toolbarMeasureRef = React.useRef<HTMLDivElement>(null);
+  const { visibleCount, hasOverflow } = useToolbarOverflow({
+    containerRef: toolbarRef,
+    measureRef: toolbarMeasureRef,
+    gap: 0,
+    moreButtonWidth: 76,
+  });
+
+  const categoryActions: Record<StoryCategoryKey, () => void> = {
+    prd: () => handleOpenDesignDialog("prd"),
+    ui: () => handleOpenDesignDialog("ui"),
+    case: () => setCategoryActive("case"),
+    bug: () => setCategoryActive("bug"),
+  };
+
+  // 收拢单元顺序（含分隔线）：分隔线归属其后按钮，按钮收进则前置分隔线不渲染
+  const toolbarUnits = [
+    { key: "children" },
+    { key: "sep-1", separator: true },
+    { key: "dependency" },
+    { key: "sep-2", separator: true },
+    { key: "link" },
+    { key: "attachment" },
+    { key: "knowledge" },
+    { key: "sep-3", separator: true },
+    { key: "prd" },
+    { key: "ui" },
+    { key: "sep-4", separator: true },
+    { key: "case" },
+    { key: "bug" },
+  ];
+  const visibleUnits = React.useMemo(() => {
+    const sliced = toolbarUnits.slice(0, Math.min(visibleCount, toolbarUnits.length));
+    while (sliced.length > 0 && sliced[sliced.length - 1].separator) sliced.pop();
+    return sliced;
+  }, [visibleCount]);
+  const visibleKeys = React.useMemo(() => new Set(visibleUnits.map((u) => u.key)), [visibleUnits]);
+
+  const moreItems = React.useMemo(() => {
+    const all = [
+      { key: "children", icon: GitBranch, label: m.story_children_addChild(), run: () => handleChildAction("create") },
+      { key: "dependency", icon: Waypoints, label: m.story_relations_addDependency(), run: () => setDependencyDialogOpen(true) },
+      { key: "link", icon: LinkIcon, label: m.story_linkDialog_button(), run: () => handleOpenAssocDialog("link") },
+      { key: "attachment", icon: Paperclip, label: m.story_attachmentDialog_button(), run: () => handleOpenAssocDialog("attachment") },
+      { key: "knowledge", icon: BookOpenText, label: m.story_knowledgeDialog_button(), run: () => handleOpenAssocDialog("knowledge") },
+      ...STORY_CATEGORY_ITEMS.map((c) => ({
+        key: c.key as string,
+        icon: c.icon,
+        label: c.label(),
+        run: () => categoryActions[c.key](),
+      })),
+    ];
+    return all.filter((it) => !visibleKeys.has(it.key));
+  }, [visibleKeys]);
+
+  const dependencyExcludeIds = React.useMemo(
+    () => [
+      storyId,
+      ...data.dependencies.dependsOn.map((r) => r.id),
+      ...data.dependencies.dependents.map((r) => r.id),
+    ],
+    [storyId, data.dependencies],
+  );
+
+  const refreshDependencies = async () => {
+    try {
+      const dependencies = await getDependenciesFn({ data: { storyId } });
+      onRefresh((prev) => ({ ...prev, dependencies }));
+    } catch {
+      // 静默兜底：保留现有面板数据
+    }
+  };
+
+  const handleDependencySubmit = async (ids: string | string[]) => {
+    const option = DEPENDENCY_TYPE_OPTIONS.find((o) => o.key === dependencyType);
+    if (!option) return;
+    const targetIds = Array.isArray(ids) ? ids : [ids];
+    const items = targetIds.map((targetId) => toDependencyEdge(option, storyId, targetId));
+    try {
+      const res = await addDependencies({ data: { items } });
+      if (res.created.length > 0) {
+        toast.success(m.story_dependency_added({ count: res.created.length }));
+        const mine = res.activities
+          .filter((a) => a.storyId === storyId)
+          .map(({ storyId: _sid, ...rest }) => rest);
+        if (mine.length > 0) onAppendActivities?.(mine);
+      }
+      if (res.failed.length > 0) {
+        const reasons = [...new Set(res.failed.map((f) => DEPENDENCY_ERROR_LABELS[f.reason]?.() ?? f.reason))].join("、");
+        toast.warning(m.story_dependency_addPartialFailed({ failed: res.failed.length, reasons }));
+      } else {
+        setDependencyDialogOpen(false);
+      }
+      refreshDependencies();
+    } catch (e) {
+      toastError(e, m.story_dependency_addFailed());
+    }
+  };
+
+  const handleChildAction = (action: "create" | "select") => {
+    setActionOpen(action);
+  };
+
+  const refreshChildren = async () => {
+    try {
+      const children = await listChildStoriesFn({ data: { parentId: storyId } });
+      onRefresh((prev) => ({
+        ...prev,
+        hierarchy: {
+          ...prev.hierarchy,
+          children,
+          hasChildren: children.length > 0,
+        },
+      }));
+    } catch {
+      onRefresh((prev) => ({
+        ...prev,
+        hierarchy: {
+          ...prev.hierarchy,
+          hasChildren: true,
+        },
+      }));
+    }
+  };
+
+  const handleCreateSuccess = (
+    _story: { id: string; name: string; identifier?: string },
+    activities?: import("../../types").ActivityItem[],
+  ) => {
+    setActionOpen(null);
+    refreshChildren();
+    if (activities && activities.length > 0) onAppendActivities?.(activities);
+  };
+
+  const refreshLinks = async () => {
+    try {
+      const links = await getLinksFn({ data: { storyId } });
+      onRefresh((prev) => ({ ...prev, links }));
+    } catch {
+      // 静默兜底
+    }
+  };
+
+  const refreshAttachments = async () => {
+    try {
+      const attachments = await getAttachmentsFn({ data: { storyId } });
+      onRefresh((prev) => ({ ...prev, attachments }));
+    } catch {
+      // 静默兜底
+    }
+  };
+
+  const refreshKnowledge = async () => {
+    try {
+      const docs = await getLinkedDocsFn({ data: { storyId } });
+      onRefresh((prev) => ({ ...prev, knowledge: { ...prev.knowledge, docs } }));
+    } catch {
+      // 静默兜底
+    }
+  };
+
+  const refreshDesigns = async () => {
+    try {
+      const prds = await getLinkedDesignsFn({ data: { storyId } });
+      onRefresh((prev) => ({ ...prev, knowledge: { ...prev.knowledge, prds } }));
+    } catch {
+      // 静默兜底
+    }
+  };
+
+  const handleOpenDesignDialog = (mode: DesignSelectMode) => {
+    setDesignDialog({ open: true, mode });
+  };
+
+  const handleOpenAssocDialog = (kind: AssociatedDialogKind, editLink?: import("../../types").StoryLinkItem, editAttachmentItem?: import("../../types").StoryAttachmentItem) => {
+    if (kind === "design") {
+      handleOpenDesignDialog("design");
+      return;
+    }
+    setLinkInitialEdit(editLink ?? null);
+    setEditAttachment(editAttachmentItem ?? null);
+    setAssocDialogOpen(kind);
+  };
+
+  return (
+    <div className="px-3">
+      {/* 检测容器撑满整行供溢出测量；视觉条 w-fit 贴合内容——宽屏边框不超出按钮范围 */}
+      <div ref={toolbarRef} className="w-full min-w-0">
+      <div className="relative flex items-center gap-0 rounded-lg border bg-muted/40 p-1 w-fit max-w-full overflow-hidden">
+        {/* 隐藏测量层：portal 到 body——留在滚动容器子树内会撑出横向滚动区
+            （fixed 后代在 Chromium 中仍计入 overflow-auto 容器的 scrollWidth） */}
+        {typeof document !== "undefined" && createPortal(
+          <div ref={toolbarMeasureRef} aria-hidden className="fixed top-0 left-0 -z-10 invisible flex items-center gap-0 pointer-events-none">
+          <StoryDetailChildrenButton onAction={() => {}} />
+          <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
+          <StoryDetailDependencies onOpenAdd={() => {}} />
+          <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
+          <Button variant="ghost" size="sm" className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md" tabIndex={-1}>
+            <LinkIcon className="size-3.5 text-muted-foreground" />
+            {m.story_linkDialog_button()}
+            {data.links.length > 0 && (
+              <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+                {data.links.length}
+              </span>
+            )}
+          </Button>
+          <Button variant="ghost" size="sm" className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md" tabIndex={-1}>
+            <Paperclip className="size-3.5 text-muted-foreground" />
+            {m.story_attachmentDialog_button()}
+            {data.attachments.length > 0 && (
+              <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+                {data.attachments.length}
+              </span>
+            )}
+          </Button>
+          <Button variant="ghost" size="sm" className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md" tabIndex={-1}>
+            <BookOpenText className="size-3.5 text-muted-foreground" />
+            {m.story_knowledgeDialog_button()}
+            {data.knowledge.docs.length > 0 && (
+              <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+                {data.knowledge.docs.length}
+              </span>
+            )}
+          </Button>
+          <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
+          <StoryDetailCategoryButtons onAction={() => {}} />
+          </div>,
+          document.body
+        )}
+
+        {visibleKeys.has("children") && <StoryDetailChildrenButton onAction={handleChildAction} />}
+
+        {visibleKeys.has("sep-1") && <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />}
+
+        {visibleKeys.has("dependency") && <StoryDetailDependencies onOpenAdd={() => setDependencyDialogOpen(true)} />}
+
+        {visibleKeys.has("sep-2") && <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />}
+
+        {visibleKeys.has("link") && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+            onClick={() => handleOpenAssocDialog("link")}
+          >
+            <LinkIcon className="size-3.5 text-muted-foreground" />
+            {m.story_linkDialog_button()}
+            {data.links.length > 0 && (
+              <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+                {data.links.length}
+              </span>
+            )}
+          </Button>
+        )}
+        {visibleKeys.has("attachment") && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+            onClick={() => handleOpenAssocDialog("attachment")}
+          >
+            <Paperclip className="size-3.5 text-muted-foreground" />
+            {m.story_attachmentDialog_button()}
+            {data.attachments.length > 0 && (
+              <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+                {data.attachments.length}
+              </span>
+            )}
+          </Button>
+        )}
+        {visibleKeys.has("knowledge") && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+            onClick={() => handleOpenAssocDialog("knowledge")}
+          >
+            <BookOpenText className="size-3.5 text-muted-foreground" />
+            {m.story_knowledgeDialog_button()}
+            {data.knowledge.docs.length > 0 && (
+              <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+                {data.knowledge.docs.length}
+              </span>
+            )}
+          </Button>
+        )}
+
+        {visibleKeys.has("sep-3") && <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />}
+
+        <StoryDetailCategoryButtons onAction={(key) => categoryActions[key]()} collapsedKeys={new Set(STORY_CATEGORY_ITEMS.map((c) => c.key).filter((key) => !visibleKeys.has(key)))} />
+
+        {hasOverflow && (
+          <ToolbarMoreMenu
+            items={moreItems}
+            onAction={(key) => moreItems.find((it) => it.key === key)?.run()}
+          />
+        )}
+      </div>
+      </div>
+
+      <StoryDetailChildrenPanel
+        storyId={storyId}
+        projectId={projectId}
+        data={data.hierarchy}
+        onRefresh={onRefresh}
+        refreshChildren={refreshChildren}
+        users={users}
+        projects={projects}
+        labels={labels}
+        onAction={handleChildAction}
+        onNavigateInPanel={onNavigateInPanel}
+      />
+
+      <StoryDetailDependencyPanel
+        storyId={storyId}
+        storyIdentifier={storyIdentifier}
+        projectId={projectId}
+        data={data.dependencies}
+        onRefresh={onRefresh}
+        refreshDependencies={refreshDependencies}
+        users={users}
+        projects={projects}
+        labels={labels}
+        onOpenAdd={() => setDependencyDialogOpen(true)}
+        onAppendActivities={onAppendActivities}
+        onNavigateInPanel={onNavigateInPanel}
+      />
+
+      <AssociatedAttachmentsPanel
+        storyId={storyId}
+        data={data}
+        onRefresh={onRefresh}
+        onOpenDialog={handleOpenAssocDialog}
+        onAppendActivities={onAppendActivities}
+      />
+
+      {/* 测试用例关联区（任务 12）：列出 storyId 挂载的用例 + 覆盖摘要（P1 只显条数） */}
+      <StoryDetailTestCases
+        storyId={storyId}
+        projectId={projectId}
+        users={users}
+        refreshKey={casesRefreshKey}
+        storyUpdatedAt={storyUpdatedAt}
+        onOpenEntity={onOpenEntity}
+      />
+
+      {/* 关联 BUG 区：bug.storyId 单值挂载的 BUG 列表 + 关联弹窗 */}
+      <StoryBugsPanel
+        storyId={storyId}
+        projectId={projectId}
+        users={users}
+        refreshKey={bugsRefreshKey}
+        onOpenEntity={onOpenEntity}
+      />
+
+      <StorySelectDialog
+        open={actionOpen === "select"}
+        onOpenChange={(open) => {
+          if (!open) setActionOpen(null);
+        }}
+        storyId={storyId}
+        projects={projects ?? []}
+        initialProjectId={projectId ?? undefined}
+        mode="child"
+        title={m.story_children_selectChild()}
+        defaultSelectedParentIds={data.hierarchy.children.map((c) => c.id)}
+        onSelected={() => {
+          setActionOpen(null);
+          refreshChildren();
+        }}
+      />
+
+      <StorySelectDialog
+        open={dependencyDialogOpen}
+        onOpenChange={(open) => {
+          if (!open) setDependencyDialogOpen(false);
+        }}
+        storyId={storyId}
+        projects={projects ?? []}
+        initialProjectId={projectId ?? undefined}
+        mode="dependency"
+        skipTransfer
+        title={m.story_dependency_add()}
+        excludeIds={dependencyExcludeIds}
+        dependencyType={dependencyType}
+        onDependencyTypeChange={setDependencyType}
+        onSelected={(ids) => {
+          void handleDependencySubmit(ids);
+        }}
+      />
+
+      <CreateStoryDialog
+        open={actionOpen === "create"}
+        onOpenChange={(open) => {
+          if (!open) setActionOpen(null);
+        }}
+        users={users ?? []}
+        projects={projects ?? []}
+        labels={labels ?? []}
+        initialState="backlog"
+        initialParentId={storyId}
+        initialProjectId={projectId ?? undefined}
+        onSuccess={handleCreateSuccess}
+      />
+
+      <LinkManageDialog
+        open={assocDialogOpen === "link"}
+        onOpenChange={(v) => {
+          if (!v) {
+            setAssocDialogOpen(null);
+            setLinkInitialEdit(null);
+          }
+        }}
+        storyId={storyId}
+        data={data.links}
+        initialEdit={linkInitialEdit}
+        onActivity={(a) => onAppendActivities?.([a])}
+        onUpdate={(links) => {
+          onRefresh((prev) => ({ ...prev, links }));
+          void refreshLinks();
+        }}
+      />
+
+      <AttachmentManageDialog
+        open={assocDialogOpen === "attachment"}
+        onOpenChange={(v) => {
+          if (!v) { setAssocDialogOpen(null); setEditAttachment(null); }
+        }}
+        storyId={storyId}
+        data={data.attachments}
+        editItem={editAttachment}
+        onActivity={(a) => onAppendActivities?.([a])}
+        onUpdate={(attachments) => {
+          onRefresh((prev) => ({ ...prev, attachments }));
+          void refreshAttachments();
+        }}
+      />
+
+      <KnowledgeSelectDialog
+        open={assocDialogOpen === "knowledge"}
+        onOpenChange={(v) => {
+          if (!v) setAssocDialogOpen(null);
+        }}
+        storyId={storyId}
+        linkedDocs={data.knowledge.docs}
+        onActivity={(a) => onAppendActivities?.([a])}
+        onUpdate={(docs) => {
+          onRefresh((prev) => ({ ...prev, knowledge: { ...prev.knowledge, docs } }));
+          void refreshKnowledge();
+        }}
+      />
+
+      {/* 关联设计弹窗（PRD/UI/设计组 + 按钮共用单例；链接统一落 knowledge.prds → 面板「设计」组） */}
+      <DesignSelectDialog
+        open={designDialog.open}
+        onOpenChange={(v) => {
+          if (!v) setDesignDialog((prev) => ({ ...prev, open: false }));
+        }}
+        mode={designDialog.mode}
+        storyId={storyId}
+        linkedDesigns={data.knowledge.prds}
+        onActivity={(a) => onAppendActivities?.([a])}
+        onUpdate={(prds) => {
+          onRefresh((prev) => ({ ...prev, knowledge: { ...prev.knowledge, prds } }));
+          void refreshDesigns();
+        }}
+      />
+
+      {/* 分类弹窗（测试用例/BUG）——按钮直开与「更多」菜单代理共用受控状态 */}
+      <StoryDetailCategoryDialogs
+        storyId={storyId}
+        projectId={projectId}
+        active={categoryActive}
+        onOpenChange={setCategoryActive}
+        onLinked={() => setCasesRefreshKey((k) => k + 1)}
+        onBugLinked={() => setBugsRefreshKey((k) => k + 1)}
+      />
+    </div>
+  );
+}
+/** 尾部「更多 N」下拉（形态同 AI 生成行 MorePopover）：收纳溢出按钮，点击代理原动作 */
+function ToolbarMoreMenu({
+  items,
+  onAction,
+}: {
+  items: Array<{ key: string; icon: React.ComponentType<{ className?: string }>; label: string; run: () => void }>;
+  onAction: (key: string) => void;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="ghost" size="sm" className="h-7 shrink-0 gap-1 px-2.5 text-xs font-normal hover:bg-muted rounded-md">
+            <ChevronDown className="size-3.5 text-muted-foreground" />
+            {m.story_storyAi_more_title()}
+            {items.length > 0 && (
+              <span className="ml-0.5 rounded bg-muted px-1 text-[10px] leading-none">{items.length}</span>
+            )}
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end" className="w-44">
+        {items.map((it) => (
+          <DropdownMenuItem key={it.key} onClick={() => onAction(it.key)} className="text-xs gap-1.5 py-2">
+            <it.icon className="size-3.5" />
+            {it.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}