@allbluecn/web-app 0.5.0 → 0.5.1

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

@@ -50,24 +50,29 @@ export function StoryDetailCategories() {
   return (
     <>
       {CATEGORIES.map((cat) => (
-        <Popover key={cat.key}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
-              title={t(cat.tooltip)}
-            >
-              <cat.icon className="size-3.5 text-muted-foreground" />
-              {t(cat.label)}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent align="start" className="w-[320px] p-4">
-            <div className="text-sm text-muted-foreground">
-              {t(cat.placeholder)}
-            </div>
-          </PopoverContent>
-        </Popover>
+        <React.Fragment key={cat.key}>
+          {cat.key === "bug" && (
+            <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
+          )}
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+                title={t(cat.tooltip)}
+              >
+                <cat.icon className="size-3.5 text-muted-foreground" />
+                {t(cat.label)}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-[320px] p-4">
+              <div className="text-sm text-muted-foreground">
+                {t(cat.placeholder)}
+              </div>
+            </PopoverContent>
+          </Popover>
+        </React.Fragment>
       ))}
     </>
   );

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

@@ -448,6 +448,7 @@ export function StoryDetailChildrenPanel({
                                       children: prev.hierarchy.children.map((c) => c.id === storyId ? { ...c, ...patch } : c),
                                     },
                                   }));
+                                  refreshChildren();
                                 }
                               }}
                             />
@@ -495,6 +496,7 @@ export function StoryDetailChildrenPanel({
                               children: prev.hierarchy.children.map((c) => c.id === storyId ? { ...c, ...patch } : c),
                             },
                           }));
+                          refreshChildren();
                         }
                       }}
                     />

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

@@ -288,6 +288,8 @@ export function StoryDetailDependencyPanel({
         next.delete(rowId);
         return next;
       });
+    } else {
+      refreshDependencies();
     }
   };
 
@@ -354,29 +356,35 @@ export function StoryDetailDependencyPanel({
 
   const renderSection = (
     titleKey: string,
-    group: DependencySection,
+    sectionKey: DependencySection,
     rows: DependencyRow[],
     groups: GroupNode[],
-  ) => (
-    <div>
-      <div className="flex h-9 items-center gap-1.5 bg-muted/50 px-2">
-        <span className="text-sm font-medium">{t(titleKey)}</span>
-        <span className="inline-flex h-4 shrink-0 items-center rounded border px-1.5 text-[10px] font-normal text-muted-foreground whitespace-nowrap">
-          {rows.length}
-        </span>
-      </div>
-      {rows.length === 0 ? (
-        <p className="flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground">
-          <span className="w-4 shrink-0" aria-hidden />
-          {t("relation.none")}
-        </p>
-      ) : filters.groupBy === "none" ? (
-        rows.map((row) => renderRow(row, group))
-      ) : (
-        groups.map((node) => renderGroupItems(node, group, 0, `${group}:${node.key}`))
-      )}
-    </div>
-  );
+  ) => {
+    const isCollapsed = collapsed[`${sectionKey}:root`] ?? false;
+    return (
+      <Collapsible open={!isCollapsed} onOpenChange={(open) => setCollapsed((p) => ({ ...p, [`${sectionKey}:root`]: !open }))}>
+        <CollapsibleTrigger asChild>
+          <div className="flex h-9 cursor-pointer items-center gap-1.5 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors">
+            <ChevronDown className={`size-3 shrink-0 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : "rotate-0"}`} />
+            <span>{t(titleKey)}</span>
+            <span className="ml-1 text-xs text-muted-foreground">{rows.length}</span>
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          {rows.length === 0 ? (
+            <p className="flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground">
+              <span className="w-4 shrink-0" aria-hidden />
+              {t("relation.none")}
+            </p>
+          ) : filters.groupBy === "none" ? (
+            rows.map((row) => renderRow(row, sectionKey))
+          ) : (
+            groups.map((node) => renderGroupItems(node, sectionKey, 0, `${sectionKey}:${node.key}`))
+          )}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  };
 
   return (
     <Collapsible defaultOpen>

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

@@ -19,13 +19,20 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useServerFn } from "@tanstack/react-start";
 import { toast } from "sonner";
+import { LinkIcon, Paperclip, BookOpenText } from "lucide-react";
+import { Button } from "@/components/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";
-import { StoryDetailLinks } from "./story-detail-toolbar/links";
-import { StoryDetailAttachments } from "./story-detail-toolbar/attachments";
-import { StoryDetailKnowledge } from "./story-detail-toolbar/knowledge";
 import { StoryDetailCategories } from "./story-detail-toolbar/categories";
+import {
+  AssociatedAttachmentsPanel,
+  type AssociatedDialogKind,
+} from "./story-detail-toolbar/associated-attachments-panel";
+import { LinkManageDialog } from "../relations/link-manage-dialog";
+import { AttachmentManageDialog } from "../relations/attachment-manage-dialog";
+import { KnowledgeSelectDialog } from "../relations/knowledge-select-dialog";
+import { getLinksFn, getAttachmentsFn, getLinkedDocsFn } 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";
@@ -39,15 +46,20 @@ interface StoryDetailToolbarProps {
   projectId: 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 }[];
 }
 
-export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data, onRefresh, users, projects, labels }: StoryDetailToolbarProps) {
+export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data, onRefresh, onAppendActivities, users, projects, labels }: StoryDetailToolbarProps) {
   const { t } = useTranslation("story");
   const [actionOpen, setActionOpen] = React.useState<"create" | "select" | null>(null);
   const [dependencyDialogOpen, setDependencyDialogOpen] = React.useState(false);
+  const [assocDialogOpen, setAssocDialogOpen] = React.useState<AssociatedDialogKind | null>(null);
+  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);
   const addDependencies = useServerFn(addDependenciesFn);
 
@@ -78,6 +90,10 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
       const res = await addDependencies({ data: { items } });
       if (res.created.length > 0) {
         toast.success(t("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) => t(`dependency.errors.${f.reason}`)))].join("、");
@@ -117,9 +133,46 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
     }
   };
 
-  const handleCreateSuccess = () => {
+  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 handleOpenAssocDialog = (kind: AssociatedDialogKind, editLink?: import("../types").StoryLinkItem, editAttachmentItem?: import("../types").StoryAttachmentItem) => {
+    setLinkInitialEdit(editLink ?? null);
+    setEditAttachment(editAttachmentItem ?? null);
+    setAssocDialogOpen(kind);
   };
 
   return (
@@ -133,9 +186,48 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
 
         <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
 
-        <StoryDetailLinks storyId={storyId} data={data} onRefresh={onRefresh} />
-        <StoryDetailAttachments storyId={storyId} data={data} onRefresh={onRefresh} />
-        <StoryDetailKnowledge storyId={storyId} data={data} onRefresh={onRefresh} />
+        <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" />
+          {t("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"
+          onClick={() => handleOpenAssocDialog("attachment")}
+        >
+          <Paperclip className="size-3.5 text-muted-foreground" />
+          {t("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"
+          onClick={() => handleOpenAssocDialog("knowledge")}
+        >
+          <BookOpenText className="size-3.5 text-muted-foreground" />
+          {t("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" />
 
@@ -167,6 +259,13 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         onOpenAdd={() => setDependencyDialogOpen(true)}
       />
 
+      <AssociatedAttachmentsPanel
+        storyId={storyId}
+        data={data}
+        onRefresh={onRefresh}
+        onOpenDialog={handleOpenAssocDialog}
+      />
+
       <StorySelectDialog
         open={actionOpen === "select"}
         onOpenChange={(open) => {
@@ -216,6 +315,53 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         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();
+        }}
+      />
     </div>
   );
 }

package/src/components/story/inline-editors/story-select-dialog.tsx

@@ -562,8 +562,9 @@ export function StorySelectDialog({
                     const owner = projectById.get(story.projectId);
                     return (
                       <li key={story.id}>
-                        <button
-                          type="button"
+                        <div
+                          role="button"
+                          tabIndex={0}
                           onClick={() => {
                             if (isMulti) {
                               setSelectedIds((prev) =>
@@ -575,7 +576,21 @@ export function StorySelectDialog({
                               setSelectedIds([story.id]);
                             }
                           }}
-                          className={`flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition-colors ${
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              if (isMulti) {
+                                setSelectedIds((prev) =>
+                                  prev.includes(story.id)
+                                    ? prev.filter((id) => id !== story.id)
+                                    : [...prev, story.id],
+                                );
+                              } else {
+                                setSelectedIds([story.id]);
+                              }
+                            }
+                          }}
+                          className={`flex w-full cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition-colors ${
                             isSelected
                               ? "bg-accent ring-1 ring-primary/30"
                               : "hover:bg-muted"
@@ -617,7 +632,7 @@ export function StorySelectDialog({
                           {!isMulti && isSelected && (
                             <Check className="size-4 shrink-0 text-primary" />
                           )}
-                        </button>
+                        </div>
                       </li>
                     );
                   })}

package/src/components/story/relations/__tests__/attachment-manage-dialog.test.tsx

@@ -0,0 +1,171 @@
+// 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/>.
+
+// jsdom 缺少 ResizeObserver，Radix Dialog 依赖它
+const MockResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+if (typeof globalThis.ResizeObserver === "undefined") {
+  (globalThis as any).ResizeObserver = MockResizeObserver;
+}
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor, type RenderResult } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+vi.mock("sonner", () => ({
+  toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() },
+}));
+
+const fns = vi.hoisted(() => ({ uploadFetch: vi.fn() }));
+
+// 上传走 /api/attachments/upload（multipart fetch），mock 全局 fetch
+vi.stubGlobal("fetch", fns.uploadFetch);
+
+function uploadResponse(body: Record<string, unknown>) {
+  return {
+    ok: true,
+    json: () => Promise.resolve(body),
+  };
+}
+
+import { AttachmentManageDialog } from "../attachment-manage-dialog";
+import type { StoryAttachmentItem } from "../../types";
+
+const ATTS: StoryAttachmentItem[] = [
+  { id: "a1", fileName: "设计稿.png", fileSize: 2048, mimeType: "image/png", storageUrl: "/mock-storage/1" },
+  { id: "a2", fileName: "说明.pdf", fileSize: 1048576, mimeType: "application/pdf", storageUrl: "/mock-storage/2" },
+];
+
+function setup(): RenderResult & { onUpdate: ReturnType<typeof vi.fn>; onOpenChange: ReturnType<typeof vi.fn> } {
+  const onUpdate = vi.fn();
+  const onOpenChange = vi.fn();
+  const view = render(
+    <TooltipProvider>
+      <AttachmentManageDialog
+        open
+        onOpenChange={onOpenChange}
+        storyId="s1"
+        data={ATTS}
+        onUpdate={onUpdate}
+      />
+    </TooltipProvider>,
+  );
+  return { ...view, onUpdate, onOpenChange };
+}
+
+function getFileInput() {
+  return document.querySelector('input[type="file"]') as HTMLInputElement;
+}
+
+function stageFile(file: File) {
+  fireEvent.change(getFileInput(), { target: { files: [file] } });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  fns.uploadFetch.mockResolvedValue(
+    uploadResponse({
+      id: "a3",
+      fileName: "新文件.txt",
+      fileSize: 5,
+      mimeType: "text/plain",
+      storageUrl: "/api/attachments/a3/content",
+    }),
+  );
+});
+
+describe("AttachmentManageDialog", () => {
+  it("不渲染已有附件列表，仅保留上传区", () => {
+    setup();
+    expect(screen.queryByText("设计稿.png")).not.toBeInTheDocument();
+    expect(screen.getByText("点击或拖拽上传")).toBeInTheDocument();
+  });
+
+  it("选择文件后先在弹窗内预览（暂存），点击确认上传才发起 POST", async () => {
+    setup();
+    const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
+    stageFile(file);
+    // 暂存预览：文件名 + 移除按钮出现
+    expect(screen.getByRole("button", { name: "移除" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "移除" })).toBeInTheDocument();
+    // 未确认前不发起上传
+    expect(fns.uploadFetch).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "确认上传" }));
+    await waitFor(() => expect(fns.uploadFetch).toHaveBeenCalled());
+    const [url, init] = fns.uploadFetch.mock.calls[0];
+    expect(url).toBe("/api/attachments/upload");
+    expect(init.method).toBe("POST");
+    const formData = init.body as FormData;
+    expect(formData.get("storyId")).toBe("s1");
+    expect(formData.get("file")).toBeInstanceOf(File);
+  });
+
+  it("确认上传成功后回调 onUpdate（含内容路由 URL）并关闭弹窗", async () => {
+    const { onUpdate, onOpenChange } = setup();
+    const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
+    stageFile(file);
+    fireEvent.click(screen.getByRole("button", { name: "确认上传" }));
+    await waitFor(() => expect(onUpdate).toHaveBeenCalled());
+    const added = onUpdate.mock.calls[0][0][0];
+    expect(added.storageUrl).toBe("/api/attachments/a3/content");
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("描述随确认上传提交到 FormData", async () => {
+    setup();
+    const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
+    stageFile(file);
+    fireEvent.change(screen.getByPlaceholderText("补充说明…"), { target: { value: "测试描述" } });
+    fireEvent.click(screen.getByRole("button", { name: "确认上传" }));
+    await waitFor(() => expect(fns.uploadFetch).toHaveBeenCalled());
+    const formData = fns.uploadFetch.mock.calls[0][1].body as FormData;
+    expect(formData.get("description")).toBe("测试描述");
+  });
+
+  it("上传接口报错时 toast 提示且不回调 onUpdate", async () => {
+    const { toast } = await import("sonner");
+    fns.uploadFetch.mockResolvedValue({ ok: false, json: () => Promise.resolve({ error: "文件大小需在 10MB 以内" }) });
+    const { onUpdate } = setup();
+    const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
+    stageFile(file);
+    fireEvent.click(screen.getByRole("button", { name: "确认上传" }));
+    await waitFor(() => expect(toast.error).toHaveBeenCalled());
+    expect(onUpdate).not.toHaveBeenCalled();
+  });
+
+  it("超过 10MB 的文件被拒绝且不入暂存列表", async () => {
+    const { toast } = await import("sonner");
+    setup();
+    const big = new File([new ArrayBuffer(11 * 1024 * 1024)], "大文件.zip", { type: "application/zip" });
+    stageFile(big);
+    await waitFor(() => expect(toast.error).toHaveBeenCalled());
+    expect(fns.uploadFetch).not.toHaveBeenCalled();
+    expect(screen.queryByText("大文件.zip")).not.toBeInTheDocument();
+  });
+
+  it("取消按钮关闭弹窗", () => {
+    const { onOpenChange } = setup();
+    const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
+    stageFile(file);
+    expect(screen.getByRole("button", { name: "移除" })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "取消" }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});