@allbluecn/web-app 0.5.0 → 0.6.0

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, Repeat2, CalendarPlus2, Hash, MessageCircleCheck, RefreshCcwDot, CircleFadingPlus, CircleArrowUp, CircleArrowRight, CircleArrowDown, CircleSlash, CircleDashed, CircleCheckBig, LoaderCircle, CheckCircle2, XCircle, FilePlus, FilePenLine, MessageSquareText, Flag, UserRound, Text, Calendar, CalendarCheck, Tags, TextInitial, Building2, GitBranch, type LucideIcon } from "lucide-react";
+import { GitPullRequestArrow, CircleFadingArrowUp, Repeat, Repeat2, CalendarPlus2, Hash, MessageCircleCheck, RefreshCcwDot, CircleFadingPlus, CircleArrowUp, CircleArrowRight, CircleArrowDown, CircleSlash, CircleDashed, CircleCheckBig, LoaderCircle, CheckCircle2, XCircle, FilePlus, FilePenLine, MessageSquareText, Flag, UserRound, Text, Calendar, CalendarCheck, Tags, TextInitial, Building2, GitBranch, ListTree, ArrowLeftRight, ArrowDownToDot, Link2, Paperclip, BookOpen, Unlink, Trash2, BookX, FileX, ArrowRightFromLine, ArrowLeftToLine, ArrowUpFromDot, type LucideIcon } from "lucide-react";
 import type { DependencyEdgeType, DependencyGroup } from "./types";
 
 export type StoryState = "backlog" | "todo" | "in_progress" | "done" | "cancelled";
@@ -101,6 +101,19 @@ export const ACTIVITY_LABEL: Record<string, string> = {
   project_transferred: "activity.project_transferred",
   parent_changed: "activity.parent_changed",
   parent_removed: "activity.parent_removed",
+  child_added: "activity.child_added",
+  dependency_added: "activity.dependency_added",
+  dependency_removed: "activity.dependency_removed",
+  link_added: "activity.link_added",
+  link_updated: "activity.link_updated",
+  link_removed: "activity.link_removed",
+  attachment_added: "activity.attachment_added",
+  attachment_updated: "activity.attachment_updated",
+  attachment_removed: "activity.attachment_removed",
+  kb_linked: "activity.kb_linked",
+  kb_unlinked: "activity.kb_unlinked",
+  prd_unlinked: "activity.prd_unlinked",
+  iteration_changed: "activity.iteration_changed",
 };
 
 export const ACTIVITY_ICON: Record<string, LucideIcon> = {
@@ -119,6 +132,19 @@ startDate_changed: CalendarPlus2,
     project_transferred: Repeat2,
     parent_changed: GitPullRequestArrow,
     parent_removed: GitPullRequestArrow,
+    child_added: ListTree,
+    dependency_added: ArrowLeftRight,
+    dependency_removed: Unlink,
+    link_added: Link2,
+    link_updated: Link2,
+    link_removed: Unlink,
+    attachment_added: Paperclip,
+    attachment_updated: FilePenLine,
+    attachment_removed: Trash2,
+    kb_linked: BookOpen,
+    kb_unlinked: BookX,
+    prd_unlinked: FileX,
+    iteration_changed: Repeat,
   };
 
 // ====== 依赖关系常量（对齐 Plane，新模型） ======
@@ -144,6 +170,10 @@ export interface DependencyTypeOption {
   edge: DependencyEdgeType;
   /** 与 group 等价的方向标志：true = 存 (Y, X, edge) */
   reversed: boolean;
+  /** 选择器/行内标签显示的图标（lucide 组件引用） */
+  icon: LucideIcon;
+  /** 图标旋转角度（deg），每个图标方向语义不同可单独设定；0 或不填不旋转 */
+  iconRotation: number;
 }
 
 export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
@@ -155,6 +185,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.blocked_by",
     edge: "BLOCKS",
     reversed: true,
+    icon: ArrowRightFromLine,
+    iconRotation: 0,
   },
   {
     key: "starts_after",
@@ -164,6 +196,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.starts_after",
     edge: "STARTS_BEFORE",
     reversed: true,
+    icon: ArrowUpFromDot,
+    iconRotation: 90,
   },
   {
     key: "finishes_after",
@@ -173,6 +207,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.finishes_after",
     edge: "FINISHES_BEFORE",
     reversed: true,
+    icon: ArrowLeftToLine,
+    iconRotation: 0,
   },
   {
     key: "blocking",
@@ -182,6 +218,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.blocking",
     edge: "BLOCKS",
     reversed: false,
+    icon: ArrowRightFromLine,
+    iconRotation: 0,
   },
   {
     key: "starts_before",
@@ -191,6 +229,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.starts_before",
     edge: "STARTS_BEFORE",
     reversed: false,
+    icon: ArrowUpFromDot,
+    iconRotation: 90,
   },
   {
     key: "finishes_before",
@@ -200,6 +240,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.finishes_before",
     edge: "FINISHES_BEFORE",
     reversed: false,
+    icon: ArrowLeftToLine,
+    iconRotation: 0,
   },
 ];
 

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

@@ -20,7 +20,7 @@ import { CalendarCheck, CalendarPlus2, Sprout } from "lucide-react"
 import { UserAvatar } from "@allbluecn/ui"
 import { useForm } from "@tanstack/react-form"
 import { useTranslation } from "react-i18next"
-import { ProjectIconDisplay } from "@/components/project/project-icon"
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 
@@ -63,7 +63,10 @@ interface CreateStoryDialogProps {
   initialState?: string
   initialParentId?: string
   initialProjectId?: string
-  onSuccess?: (story: { id: string; name: string; identifier?: string }) => void
+  onSuccess?: (
+    story: { id: string; name: string; identifier?: string },
+    activities?: import("./types").ActivityItem[],
+  ) => void
 }
 
 export function CreateStoryDialog({
@@ -120,10 +123,12 @@ export function CreateStoryDialog({
       form.setFieldValue("startDate", initialStartDate ?? "")
       form.setFieldValue("targetDate", "")
       form.setFieldValue("labelIds", [])
-      if (initialProjectId) {
-        form.setFieldValue("projectId", initialProjectId)
-      } else {
-        ensureBuiltinProjectFn().then((p) => form.setFieldValue("projectId", p.id)).catch(() => {})
+      if (!continuousCreate) {
+        if (initialProjectId) {
+          form.setFieldValue("projectId", initialProjectId)
+        } else {
+          ensureBuiltinProjectFn().then((p) => form.setFieldValue("projectId", p.id)).catch(() => {})
+        }
       }
       setDescription({ html: "", markdown: "" })
       setIsEditorFocused(false)
@@ -173,14 +178,35 @@ export function CreateStoryDialog({
           labelIds: values.labelIds,
         },
       })
-      form.reset()
-      setDescription({ html: "", markdown: "" })
+      if (tiptapEditorRef.current) {
+        tiptapEditorRef.current.commands.clearContent()
+      }
+      if (continuousCreate) {
+        const currentProjectId = form.state.values.projectId
+        form.setFieldValue("name", "")
+        setDescription({ html: "", markdown: "" })
+        form.setFieldValue("state", initialState ?? "backlog")
+        form.setFieldValue("priority", "none")
+        form.setFieldValue("assigneeId", "none")
+        form.setFieldValue("startDate", initialStartDate ?? "")
+        form.setFieldValue("targetDate", "")
+        form.setFieldValue("labelIds", [])
+        if (currentProjectId) {
+          form.setFieldValue("projectId", currentProjectId)
+        }
+      } else {
+        form.reset()
+        setDescription({ html: "", markdown: "" })
+      }
       if (!continuousCreate) onOpenChange(false)
-      onSuccess?.({
-        id: res.id,
-        name: res.name,
-        identifier: res.identifier,
-      })
+      onSuccess?.(
+        {
+          id: res.id,
+          name: res.name,
+          identifier: res.identifier,
+        },
+        res.activities,
+      )
     } catch (err) {
       setError(err instanceof Error ? err.message : t("create.failed"))
     } finally {
@@ -214,7 +240,7 @@ export function CreateStoryDialog({
                     className="h-8 gap-1.5 border-0 bg-muted/50 px-2.5 text-sm font-medium"
                   >
                     {selectedProject ? (
-                      <ProjectIconDisplay name={selectedProject.icon} size={16} />
+                      <LucideIconByName name={selectedProject.icon} size={16} />
                     ) : (
                       <Sprout className="size-4 text-muted-foreground" />
                     )}
@@ -230,7 +256,7 @@ export function CreateStoryDialog({
                       className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${field.value === p.id ? "bg-accent font-medium" : "hover:bg-muted"}`}
                     >
                       <span className="flex min-w-0 items-center gap-2">
-                        <ProjectIconDisplay name={p.icon} size={16} />
+                        <LucideIconByName name={p.icon} size={16} />
                         <span className="truncate">{p.name}</span>
                       </span>
                       {p.displayId && (
@@ -318,7 +344,7 @@ export function CreateStoryDialog({
                 <DateEditor value={field.value || null} onChange={(v) => field.handleChange(v ?? "")} label={t("create.dueDate")} icon={CalendarCheck} />
               )} />
               <form.Field name="labelIds" children={(field) => (
-                <LabelsEditor labelIds={field.value as string[]} labels={labels} onChange={(v) => field.handleChange(v as string[])} variant="button" />
+                <LabelsEditor labelIds={field.value as string[]} labels={labels} onChange={(v) => field.handleChange(v as string[])} variant="button" aiContext={{ name: () => ((form.state.values.name as string) ?? "").trim() }} />
               )} />
             </div>
 

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

@@ -0,0 +1,114 @@
+// 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 { describe, it, expect, vi, beforeEach } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("@tanstack/react-start", () => ({
+  useServerFn: (fn: any) => vi.fn().mockImplementation((args: any) => fn(args)),
+}));
+vi.mock("@/server/serverFns/story", () => ({
+  removeLinkFn: vi.fn(async () => ({})),
+  removeAttachmentFn: vi.fn(async () => ({})),
+  unlinkDocFn: vi.fn(async () => ({})),
+  checkLinkEmbeddableFn: vi.fn(async () => ({ embeddable: true })),
+}));
+vi.mock("@/server/serverFns/knowledge", () => ({
+  getDocumentFn: vi.fn(async () => ({ content: { html: "<p>hello</p>", markdown: "hello" } })),
+}));
+vi.mock("sonner", () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+vi.mock("@tanstack/react-router", () => ({
+  Link: ({ children, to, params }: any) => React.createElement("a", { href: to, "data-to": to, ...params }, children),
+}));
+
+import { AssociatedAttachmentsPanel } from "../story-detail-toolbar/associated-attachments-panel";
+import type { RelationsData } from "../../types";
+
+const data = {
+  links: [{ id: "l1", url: "https://a.com", title: "站点A", description: null }],
+  attachments: [
+    { id: "a1", fileName: "文件.png", fileSize: 2048, mimeType: "image/png", storageUrl: "/m/1" },
+  ],
+  knowledge: {
+    prds: [],
+    docs: [
+      { id: "d1", title: "知识页", kbId: "kb1", kbName: "团队库", kbIcon: "notebook", docIcon: null, parentId: null },
+    ],
+  },
+} as unknown as RelationsData;
+
+function setup(props?: { data: RelationsData }) {
+  const onOpenDialog = vi.fn();
+  render(
+    <AssociatedAttachmentsPanel
+      storyId="s1"
+      data={props?.data ?? data}
+      onRefresh={vi.fn()}
+      onOpenDialog={onOpenDialog}
+    />,
+  );
+  return { onOpenDialog };
+}
+
+describe("AssociatedAttachmentsPanel", () => {
+  it("三类资源合并渲染，计数 badge 为总数 3，默认列表视图", () => {
+    setup();
+    expect(screen.getByText("关联附件")).toBeInTheDocument();
+    expect(screen.getByText("3")).toBeInTheDocument();
+    expect(screen.getByText("站点A")).toBeInTheDocument();
+    expect(screen.getByText("文件.png")).toBeInTheDocument();
+    expect(screen.getByText("知识页")).toBeInTheDocument();
+    expect(screen.getByText("团队库")).toBeInTheDocument();
+  });
+
+  it("点击预览按钮切换到预览模式，渲染网格布局", () => {
+    setup();
+    fireEvent.click(screen.getByRole("button", { name: "预览" }));
+    expect(screen.getByTestId("associated-items").getAttribute("data-mode")).toBe("preview");
+  });
+
+  it("空数据整面板不渲染", () => {
+    const empty = {
+      links: [],
+      attachments: [],
+      knowledge: { prds: [], docs: [] },
+    } as unknown as RelationsData;
+    const { container } = render(
+      <AssociatedAttachmentsPanel
+        storyId="s1"
+        data={empty}
+        onRefresh={vi.fn()}
+        onOpenDialog={vi.fn()}
+      />,
+    );
+    expect(container.querySelector("[data-testid='associated-panel']")).toBeNull();
+  });
+
+  it("点击编辑链接回调 onOpenDialog('link', link)", () => {
+    const { onOpenDialog } = setup();
+    const editBtns = screen.getAllByRole("button", { name: "编辑" });
+    // 第一个是链接的编辑按钮，第二个是附件的编辑按钮
+    fireEvent.click(editBtns[0]);
+    expect(onOpenDialog).toHaveBeenCalledWith(
+      "link",
+      expect.objectContaining({ id: "l1" }),
+    );
+  });
+});

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

@@ -0,0 +1,62 @@
+// 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 { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { StoryDetailCategories } from "../story-detail-toolbar/categories";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+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 />);
+    expect(screen.getByText("categories.prd.label")).toBeTruthy();
+    expect(screen.getByText("categories.ui.label")).toBeTruthy();
+    expect(screen.getByText("categories.bug.label")).toBeTruthy();
+    expect(screen.getByText("categories.testCase.label")).toBeTruthy();
+    expect(screen.getByText("categories.acceptance.label")).toBeTruthy();
+    expect(screen.getByText("categories.retro.label")).toBeTruthy();
+  });
+
+  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"),
+    );
+    expect(separator).toBeTruthy();
+  });
+
+  it("bug 前后各有一个 button", () => {
+    renderWithProviders(<StoryDetailCategories />);
+    const bugBtn = screen.getByText("categories.bug.label")
+      .closest("button")!;
+    expect(bugBtn).toBeTruthy();
+  });
+});

package/src/components/story/detail/__tests__/dependencies-button.test.tsx

@@ -0,0 +1,49 @@
+// 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 { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { StoryDetailDependencies } from "../story-detail-toolbar/dependencies";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const renderWithProviders = (ui: React.ReactElement) =>
+  render(<TooltipProvider>{ui}</TooltipProvider>);
+
+describe("StoryDetailDependencies", () => {
+  it("渲染 button，包含 Waypoints 图标和文本", () => {
+    renderWithProviders(
+      <StoryDetailDependencies onOpenAdd={vi.fn()} />,
+    );
+    const btn = screen.getByRole("button");
+    expect(btn).toBeTruthy();
+    expect(screen.getByText("relations.addDependency")).toBeTruthy();
+    expect(btn).toHaveAttribute("title", "relations.dependencyTitle");
+  });
+
+  it("点击 button 触发 onOpenAdd", () => {
+    const onOpenAdd = vi.fn();
+    renderWithProviders(
+      <StoryDetailDependencies onOpenAdd={onOpenAdd} />,
+    );
+    fireEvent.click(screen.getByRole("button"));
+    expect(onOpenAdd).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/story/detail/activity-timeline.tsx

@@ -30,11 +30,11 @@ import {
   type StoryState,
   type StoryPriority,
 } from "@/components/story/constants";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import { listProjectsBriefFn } from "@/server/serverFns/project";
 import type { ActivityItem, UserBrief } from "@/components/story/types";
 import { groupActivities, type ActivityGroup } from "@/lib/story/activity-grouper";
-import { ArrowUpFromDot, ChevronDown, Dot, Sparkles, Layers, UserRound } from "lucide-react";
+import { ArrowUpFromDot, ArrowRight, ChevronDown, Dot, Sparkles, Layers, UserRound } from "lucide-react";
 import { sanitize } from "@/lib/sanitize";
 
 function getDiffDecorator(
@@ -55,7 +55,7 @@ function getDiffDecorator(
     return <Icon className="size-3 shrink-0 text-muted-foreground" />;
   }
   if (action === "project_transferred") {
-    return <ProjectIconDisplay name={projectIconName} size={12} className="shrink-0" />;
+    return <LucideIconByName name={projectIconName} size={12} className="shrink-0" />;
   }
   if (action === "assignee_changed") {
     // 优先用用户头像，找不到时降级为通用图标
@@ -250,7 +250,7 @@ function DiffCompare({ oldValue, newValue, oldDecorator, newDecorator, plain, bl
                 </div>
               </div>
               <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 flex size-5 items-center justify-center rounded-full bg-background border">
-                <ArrowUpFromDot className="size-2.5 text-muted-foreground rotate-90" />
+                <ArrowRight className="size-2.5 text-muted-foreground" />
               </div>
               <div className="w-1/2 bg-green-50/40 dark:bg-green-950/20 p-2 pl-4">
                 <div className="flex items-center gap-1.5">
@@ -322,11 +322,33 @@ interface ActivityTimelineProps {
   users?: UserBrief[];
 }
 
+/** 关联类 action 集合：描述文案带 {{value}} 插值（对象名或数量） */
+const OBJECT_ACTIVITY_ACTIONS: Record<string, true> = {
+  child_added: true,
+  dependency_added: true,
+  dependency_removed: true,
+  link_added: true,
+  link_updated: true,
+  link_removed: true,
+  attachment_added: true,
+  attachment_updated: true,
+  attachment_removed: true,
+  kb_linked: true,
+  kb_unlinked: true,
+  prd_unlinked: true,
+};
+
 function describeActivity(a: ActivityItem, t: TFunction): string {
   if (a.action === "project_transferred" || a.action === "identifier_changed") {
     return t(ACTIVITY_LABEL[a.action] ?? a.action);
   }
 
+  // 关联类动作（添加子需求/依赖/链接/附件/知识库）：newValue 为对象描述或数量，走插值文案
+  if (a.action in OBJECT_ACTIVITY_ACTIONS) {
+    const key = ACTIVITY_LABEL[a.action];
+    return t(key, { value: a.newValue ?? "" });
+  }
+
   const fieldLabel = ACTIVITY_LABEL[a.action] ?? a.action;
 
   if (!a.field) {