@allbluecn/web-app 0.4.22 → 0.5.1

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

@@ -17,30 +17,95 @@
 
 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 { StoryDetailLinks } from "./story-detail-toolbar/links";
-import { StoryDetailAttachments } from "./story-detail-toolbar/attachments";
-import { StoryDetailKnowledge } from "./story-detail-toolbar/knowledge";
+import { StoryDetailDependencyPanel } from "./story-detail-toolbar/dependency-panel";
 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 { listChildStoriesFn } from "@/server/serverFns/story";
+import { addDependenciesFn, getDependenciesFn, listChildStoriesFn } from "@/server/serverFns/story";
+import { DEPENDENCY_TYPE_OPTIONS, toDependencyEdge, type DependencyTypeOption } from "../constants";
 import type { RelationsData, UserBrief } from "../types";
 
 interface StoryDetailToolbarProps {
   storyId: string;
+  /** 当前需求编号（依赖 tooltip 文案用） */
+  storyIdentifier?: string;
   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, 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);
+
+  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(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("、");
+        toast.warning(t("dependency.addPartialFailed", { failed: res.failed.length, reasons }));
+      } else {
+        setDependencyDialogOpen(false);
+      }
+      refreshDependencies();
+    } catch (e) {
+      toast.error((e as Error)?.message || t("dependency.addFailed"));
+    }
+  };
 
   const handleChildAction = (action: "create" | "select") => {
     setActionOpen(action);
@@ -68,9 +133,46 @@ export function StoryDetailToolbar({ storyId, projectId, data, onRefresh, users,
     }
   };
 
-  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 (
@@ -80,13 +182,52 @@ export function StoryDetailToolbar({ storyId, projectId, data, onRefresh, users,
 
         <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
 
-        <StoryDetailDependencies storyId={storyId} data={data} onRefresh={onRefresh} />
+        <StoryDetailDependencies onOpenAdd={() => setDependencyDialogOpen(true)} />
 
         <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" />
 
@@ -105,6 +246,26 @@ export function StoryDetailToolbar({ storyId, projectId, data, onRefresh, users,
         onAction={handleChildAction}
       />
 
+      <StoryDetailDependencyPanel
+        storyId={storyId}
+        storyIdentifier={storyIdentifier}
+        projectId={projectId}
+        data={data.dependencies}
+        onRefresh={onRefresh}
+        refreshDependencies={refreshDependencies}
+        users={users}
+        projects={projects}
+        labels={labels}
+        onOpenAdd={() => setDependencyDialogOpen(true)}
+      />
+
+      <AssociatedAttachmentsPanel
+        storyId={storyId}
+        data={data}
+        onRefresh={onRefresh}
+        onOpenDialog={handleOpenAssocDialog}
+      />
+
       <StorySelectDialog
         open={actionOpen === "select"}
         onOpenChange={(open) => {
@@ -122,6 +283,25 @@ export function StoryDetailToolbar({ storyId, projectId, data, onRefresh, users,
         }}
       />
 
+      <StorySelectDialog
+        open={dependencyDialogOpen}
+        onOpenChange={(open) => {
+          if (!open) setDependencyDialogOpen(false);
+        }}
+        storyId={storyId}
+        projects={projects ?? []}
+        initialProjectId={projectId ?? undefined}
+        mode="dependency"
+        skipTransfer
+        title={t("dependency.add")}
+        excludeIds={dependencyExcludeIds}
+        dependencyType={dependencyType}
+        onDependencyTypeChange={setDependencyType}
+        onSelected={(ids) => {
+          void handleDependencySubmit(ids);
+        }}
+      />
+
       <CreateStoryDialog
         open={actionOpen === "create"}
         onOpenChange={(open) => {
@@ -135,6 +315,53 @@ export function StoryDetailToolbar({ storyId, projectId, data, onRefresh, users,
         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/display/__tests__/use-paged-story-groups.test.ts

@@ -39,6 +39,10 @@ const makeStory = (over: Partial<StoryListItem> & { id: string }): StoryListItem
   ...over,
 });
 
+const makeUser = (id: string): PagedStoriesArgs["users"][number] => ({
+  id, username: `user-${id}`, email: `${id}@test.dev`, avatarConfig: null, bgShape: null, bgColor: null,
+});
+
 const makeArgs = (over: Partial<PagedStoriesArgs> = {}): PagedStoriesArgs => ({
   filters: { projectId: undefined, search: undefined },
   conditions: [],
@@ -46,6 +50,7 @@ const makeArgs = (over: Partial<PagedStoriesArgs> = {}): PagedStoriesArgs => ({
   users: [],
   labels: [],
   projects: [],
+  minLoadingMs: 0,
   ...over,
 });
 
@@ -71,10 +76,40 @@ describe("usePagedStoryGroups", () => {
       data: expect.objectContaining({ archived: false, groupBy: "state" }),
     });
     expect(h.listAllGroupsItemsFn.mock.calls[0][0].data).toEqual(
-      expect.objectContaining({ groupBy: "state", groupCount: 2, skip: 0, take: 100 }),
+      expect.objectContaining({ groupBy: "state", groupCount: 5, skip: 0, take: 100 }),
     );
   });
 
+  it("初始加载并行拉取：组 keys 与首屏 items 同时请求（1 个 RTT）", async () => {
+    h.listStoryGroupsFn.mockResolvedValue({ groups: [{ key: "todo", total: 1 }, { key: "done", total: 1 }] });
+    h.listAllGroupsItemsFn.mockResolvedValue({
+      grouped: { todo: [makeStory({ id: "a", state: "todo" })], done: [makeStory({ id: "b", state: "done" })] },
+    });
+
+    const { result } = renderHook(() => usePagedStoryGroups(makeArgs()));
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    // 组 keys 请求与 items 请求都已发出（并行）
+    expect(h.listStoryGroupsFn).toHaveBeenCalledTimes(1);
+    expect(h.listAllGroupsItemsFn).toHaveBeenCalledTimes(1);
+    // items 直接按组 keys 组装，无需第二次请求
+    expect(result.current.groups[0].items.map((s) => s.id)).toEqual(["a"]);
+    expect(result.current.groups[1].items.map((s) => s.id)).toEqual(["b"]);
+  });
+
+  it("数据先于最短展示时间到达时，骨架保持到 minLoadingMs 后才切换", async () => {
+    h.listStoryGroupsFn.mockResolvedValue({ groups: [{ key: "todo", total: 1 }] });
+    h.listAllGroupsItemsFn.mockResolvedValue({ grouped: { todo: [makeStory({ id: "a" })] } });
+
+    const { result } = renderHook(() => usePagedStoryGroups(makeArgs({ minLoadingMs: 200 })));
+    expect(result.current.isLoading).toBe(true);
+    // 数据已返回但骨架仍在最短展示窗口内（150ms < 200ms）
+    await new Promise((r) => setTimeout(r, 150));
+    expect(result.current.isLoading).toBe(true);
+    await waitFor(() => expect(result.current.isLoading).toBe(false), { timeout: 2000 });
+    expect(result.current.groups[0].items.map((s) => s.id)).toEqual(["a"]);
+  });
+
   it("loadMore 追加下一页并去重、更新 total/hasMore", async () => {
     h.listStoryGroupsFn.mockResolvedValue({ groups: [{ key: "todo", total: 3 }] });
     h.listAllGroupsItemsFn.mockResolvedValue({ grouped: { todo: [makeStory({ id: "a" })] } });
@@ -270,4 +305,120 @@ describe("usePagedStoryGroups", () => {
       expect.objectContaining({ archived: true, projectId: undefined, search: "foo" }),
     );
   });
+
+  describe("patchStory 乐观原地更新", () => {
+    const setup = async (
+      display: Partial<typeof DEFAULT_DISPLAY_OPTIONS> = {},
+      opts: { items?: StoryListItem[]; users?: PagedStoriesArgs["users"] } = {},
+    ) => {
+      // items 顺序模拟服务端已排序的返回（客户端不重排首屏数据）
+      const items = opts.items ?? [
+        makeStory({ id: "a", priority: "low", createdAt: "2024-01-01" }),
+        makeStory({ id: "b", priority: "high", createdAt: "2024-01-02" }),
+      ];
+      h.listStoryGroupsFn.mockResolvedValue({ groups: [{ key: "todo", total: items.length }] });
+      h.listAllGroupsItemsFn.mockResolvedValue({ grouped: { todo: items } });
+      const { result } = renderHook(() =>
+        usePagedStoryGroups(
+          makeArgs({ display: { ...DEFAULT_DISPLAY_OPTIONS, ...display }, users: opts.users ?? [] }),
+        ),
+      );
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
+      return result;
+    };
+
+    it("未触发分组/排序规则：原位替换，位置与分组不变", async () => {
+      const result = await setup({}, { users: [makeUser("u9")] });
+      const callsBefore = h.listStoryGroupsFn.mock.calls.length;
+
+      act(() =>
+        result.current.patchStory("a", { assigneeId: "u9" }),
+      );
+
+      const todo = result.current.groups[0];
+      expect(todo.items.map((s) => s.id)).toEqual(["a", "b"]); // 位置不变
+      expect(todo.items[0].assignee?.id).toBe("u9"); // 值已乐观更新
+      expect(h.listStoryGroupsFn.mock.calls.length).toBe(callsBefore); // 未触发 refresh
+    });
+
+    it("仅触发排序规则：组内重插，分组不变", async () => {
+      // 服务端 priority desc 已排序：b(high) 在前，a(low) 在后
+      const result = await setup(
+        { orderBy: "priority", orderDir: "desc" },
+        {
+          items: [
+            makeStory({ id: "b", priority: "high" }),
+            makeStory({ id: "a", priority: "low" }),
+          ],
+        },
+      );
+      expect(result.current.groups[0].items.map((s) => s.id)).toEqual(["b", "a"]);
+
+      act(() => result.current.patchStory("a", { priority: "urgent" }));
+
+      expect(result.current.groups[0].key).toBe("todo"); // 分组不变
+      expect(result.current.groups[0].items.map((s) => s.id)).toEqual(["a", "b"]);
+      expect(result.current.groups[0].items[0].priority).toBe("urgent");
+    });
+
+    it("触发分组规则：回退全量 refresh", async () => {
+      const result = await setup();
+
+      act(() => result.current.patchStory("a", { state: "done" }));
+
+      expect(h.listStoryGroupsFn.mock.calls.length).toBeGreaterThan(1); // refresh 触发重新加载
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
+    });
+
+    it("排序=updated 时任意字段编辑触发组内重插（updatedAt 变最新）", async () => {
+      // 服务端 updatedAt desc 已排序：b(01-02) 在前，a(01-01) 在后
+      const result = await setup(
+        { orderBy: "updated", orderDir: "desc" },
+        {
+          items: [
+            makeStory({ id: "b", updatedAt: "2024-01-02" }),
+            makeStory({ id: "a", updatedAt: "2024-01-01" }),
+          ],
+        },
+      );
+      expect(result.current.groups[0].items.map((s) => s.id)).toEqual(["b", "a"]);
+
+      act(() => result.current.patchStory("a", { assigneeId: null }));
+
+      expect(result.current.groups[0].items.map((s) => s.id)).toEqual(["a", "b"]); // a 的 updatedAt 变最新
+    });
+
+    it("labels 分组维度被编辑时回退 refresh", async () => {
+      const result = await setup({ groupBy: "labels" });
+      const callsBefore = h.listStoryGroupsFn.mock.calls.length;
+
+      act(() => result.current.patchStory("a", { labelIds: ["l1"] }));
+
+      expect(h.listStoryGroupsFn.mock.calls.length).toBeGreaterThan(callsBefore);
+    });
+
+    it("子分组内未触发规则：原位替换且父组计数不变", async () => {
+      h.listStoryGroupsFn
+        .mockResolvedValueOnce({ groups: [{ key: "todo", total: 2 }] })
+        .mockResolvedValueOnce({ groups: [{ key: "u9", total: 2 }] });
+      h.listStoriesInGroupFn.mockResolvedValue({
+        items: [makeStory({ id: "a" }), makeStory({ id: "b" })],
+        total: 2,
+        hasMore: false,
+      });
+      const { result } = renderHook(() =>
+        usePagedStoryGroups(
+          makeArgs({ display: { ...DEFAULT_DISPLAY_OPTIONS, groupBy: "state", subGroupBy: "assignee" } }),
+        ),
+      );
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+      act(() => result.current.patchStory("a", { priority: "low" }));
+
+      const parent = result.current.groups[0];
+      expect(parent.subGroups?.[0].items.map((s) => s.id)).toEqual(["a", "b"]); // 位置不变
+      expect(parent.subGroups?.[0].items[0].priority).toBe("low");
+      expect(parent.totalCount).toBe(2); // 父组计数不变
+    });
+  });
 });