@allbluecn/web-app 0.4.22 → 0.5.1

package/src/components/story/__tests__/dependency-type-badge.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from "vitest";
+import {
+  DEPENDENCY_TYPE_OPTIONS,
+  dependencyTypeBadgeKey,
+  dependencyTypeOption,
+  toDependencyEdge,
+} from "../constants";
+
+describe("DEPENDENCY_TYPE_OPTIONS", () => {
+  it("共 6 项，key 唯一，每组各 3 项", () => {
+    expect(DEPENDENCY_TYPE_OPTIONS).toHaveLength(6);
+    const keys = DEPENDENCY_TYPE_OPTIONS.map((o) => o.key);
+    expect(new Set(keys).size).toBe(6);
+    expect(
+      DEPENDENCY_TYPE_OPTIONS.filter((o) => o.group === "dependsOn"),
+    ).toHaveLength(3);
+    expect(
+      DEPENDENCY_TYPE_OPTIONS.filter((o) => o.group === "dependents"),
+    ).toHaveLength(3);
+  });
+
+  it("每项含 optionLabelKey/badgeLabelKey/tooltipLabelKey/edge/group，edge 为三种正向类型且每组各覆盖一次", () => {
+    for (const group of ["dependsOn", "dependents"] as const) {
+      const edges = new Set(
+        DEPENDENCY_TYPE_OPTIONS.filter((o) => o.group === group).map(
+          (o) => o.edge,
+        ),
+      );
+      expect(edges).toEqual(
+        new Set(["BLOCKS", "STARTS_BEFORE", "FINISHES_BEFORE"]),
+      );
+    }
+    for (const o of DEPENDENCY_TYPE_OPTIONS) {
+      expect(o.optionLabelKey).toMatch(/^dependency\.options\./);
+      expect(o.badgeLabelKey).toMatch(/^dependency\.labels\./);
+      expect(o.tooltipLabelKey).toMatch(/^dependency\.tooltips\./);
+      expect(o.reversed).toBe(o.group === "dependsOn");
+    }
+  });
+});
+
+describe("dependencyTypeOption / dependencyTypeBadgeKey", () => {
+  it("dependents 组（我领先）→ blocking/starts_before/finishes_before", () => {
+    expect(dependencyTypeBadgeKey("dependents", "BLOCKS")).toBe("blocking");
+    expect(
+      dependencyTypeBadgeKey("dependents", "STARTS_BEFORE"),
+    ).toBe("starts_before");
+    expect(
+      dependencyTypeBadgeKey("dependents", "FINISHES_BEFORE"),
+    ).toBe("finishes_before");
+  });
+
+  it("dependsOn 组（对方领先）→ blocked_by/starts_after/finishes_after", () => {
+    expect(dependencyTypeBadgeKey("dependsOn", "BLOCKS")).toBe("blocked_by");
+    expect(
+      dependencyTypeBadgeKey("dependsOn", "STARTS_BEFORE"),
+    ).toBe("starts_after");
+    expect(
+      dependencyTypeBadgeKey("dependsOn", "FINISHES_BEFORE"),
+    ).toBe("finishes_after");
+  });
+
+  it("dependencyTypeOption 返回含句式 label 的完整选项", () => {
+    const o = dependencyTypeOption("dependsOn", "BLOCKS");
+    expect(o.key).toBe("blocked_by");
+    expect(o.optionLabelKey).toBe("dependency.options.blocked_by");
+    expect(o.badgeLabelKey).toBe("dependency.labels.blocked_by");
+  });
+});
+
+describe("toDependencyEdge", () => {
+  it("reversed=false：我领先，source=我", () => {
+    const o = DEPENDENCY_TYPE_OPTIONS.find((x) => x.key === "blocking")!;
+    expect(toDependencyEdge(o, "s1", "s2")).toEqual({
+      sourceId: "s1",
+      targetId: "s2",
+      type: "BLOCKS",
+    });
+  });
+
+  it("reversed=true：对方领先，source/target 交换", () => {
+    const o = DEPENDENCY_TYPE_OPTIONS.find((x) => x.key === "blocked_by")!;
+    expect(toDependencyEdge(o, "s1", "s2")).toEqual({
+      sourceId: "s2",
+      targetId: "s1",
+      type: "BLOCKS",
+    });
+  });
+});

package/src/components/story/constants.ts

@@ -15,8 +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 { ArrowUpRight, ArrowDownRight, Link, 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 type { DependencyType } from "./types";
+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, ListTree, ArrowLeftRight, Link2, Paperclip, BookOpen, type LucideIcon } from "lucide-react";
+import type { DependencyEdgeType, DependencyGroup } from "./types";
 
 export type StoryState = "backlog" | "todo" | "in_progress" | "done" | "cancelled";
 export type StoryPriority = "urgent" | "high" | "medium" | "low" | "none";
@@ -101,6 +101,11 @@ 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",
+  link_added: "activity.link_added",
+  attachment_added: "activity.attachment_added",
+  kb_linked: "activity.kb_linked",
 };
 
 export const ACTIVITY_ICON: Record<string, LucideIcon> = {
@@ -119,54 +124,122 @@ startDate_changed: CalendarPlus2,
     project_transferred: Repeat2,
     parent_changed: GitPullRequestArrow,
     parent_removed: GitPullRequestArrow,
+    child_added: ListTree,
+    dependency_added: ArrowLeftRight,
+    link_added: Link2,
+    attachment_added: Paperclip,
+    kb_linked: BookOpen,
   };
 
-// ====== P3：关联关系常量 ======
-
-// 依赖类型常量
-export const DEPENDENCY_TYPES: {
-  BLOCKS: DependencyType;
-  BLOCKED_BY: DependencyType;
-  RELATES_TO: DependencyType;
-} = {
-  BLOCKS: "blocks",
-  BLOCKED_BY: "blocked_by",
-  RELATES_TO: "relates_to",
-} as const;
-
-// 依赖类型标签
-export const DEPENDENCY_LABELS: Record<DependencyType, string> = {
-  blocks: "dependency.blocks",
-  blocked_by: "dependency.blocked_by",
-  relates_to: "dependency.relates_to",
-} as const;
-
-// 依赖类型图标
-export const DEPENDENCY_ICONS: Record<DependencyType, LucideIcon> = {
-  blocks: ArrowUpRight,
-  blocked_by: ArrowDownRight,
-  relates_to: Link,
-} as const;
-
-// 依赖类型颜色（Tailwind 类名）
-export const DEPENDENCY_COLORS: Record<DependencyType, { text: string; bg: string }> = {
-  blocks: { text: "text-red-600", bg: "bg-red-50" },
-  blocked_by: { text: "text-amber-600", bg: "bg-amber-50" },
-  relates_to: { text: "text-blue-600", bg: "bg-blue-50" },
-} as const;
-
-// 依赖方向提示
-export const DEPENDENCY_DIRECTIONS: Record<DependencyType, string> = {
-  blocks: "dependency.direction.blocks",
-  blocked_by: "dependency.direction.blocked_by",
-  relates_to: "dependency.direction.relates_to",
-} as const;
-
-// Accordion item value（用于 collapsible 状态）
-export const RELATIONS_ACCORDION_ITEMS = {
-  HIERARCHY: "hierarchy",
-  DEPENDENCIES: "dependencies",
-  LINKS: "links",
-  ATTACHMENTS: "attachments",
-  KNOWLEDGE: "knowledge",
-} as const;
+// ====== 依赖关系常量（对齐 Plane，新模型） ======
+
+// UI 依赖类型选择项（Plane 模型：3 种依赖类型 FS/SS/FF × 2 个方向视角）
+// group="dependents"（我领先，所选需求等我）：存 (X, Y, edge)
+// group="dependsOn"（对方领先，我等所选需求）：存 (Y, X, edge)
+export interface DependencyTypeOption {
+  key:
+    | "blocking"
+    | "blocked_by"
+    | "starts_before"
+    | "starts_after"
+    | "finishes_before"
+    | "finishes_after";
+  group: keyof DependencyGroup;
+  /** 选择器文案 key（被选需求未知，用「所选需求」占位） */
+  optionLabelKey: string;
+  /** 行内标签文案 key（{{identifier}} 插值被选需求编号） */
+  badgeLabelKey: string;
+  /** tooltip 文案 key（{{identifier}} 插值被选需求编号 + {{me}} 插值当前需求编号） */
+  tooltipLabelKey: string;
+  edge: DependencyEdgeType;
+  /** 与 group 等价的方向标志：true = 存 (Y, X, edge) */
+  reversed: boolean;
+}
+
+export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
+  {
+    key: "blocked_by",
+    group: "dependsOn",
+    optionLabelKey: "dependency.options.blocked_by",
+    badgeLabelKey: "dependency.labels.blocked_by",
+    tooltipLabelKey: "dependency.tooltips.blocked_by",
+    edge: "BLOCKS",
+    reversed: true,
+  },
+  {
+    key: "starts_after",
+    group: "dependsOn",
+    optionLabelKey: "dependency.options.starts_after",
+    badgeLabelKey: "dependency.labels.starts_after",
+    tooltipLabelKey: "dependency.tooltips.starts_after",
+    edge: "STARTS_BEFORE",
+    reversed: true,
+  },
+  {
+    key: "finishes_after",
+    group: "dependsOn",
+    optionLabelKey: "dependency.options.finishes_after",
+    badgeLabelKey: "dependency.labels.finishes_after",
+    tooltipLabelKey: "dependency.tooltips.finishes_after",
+    edge: "FINISHES_BEFORE",
+    reversed: true,
+  },
+  {
+    key: "blocking",
+    group: "dependents",
+    optionLabelKey: "dependency.options.blocking",
+    badgeLabelKey: "dependency.labels.blocking",
+    tooltipLabelKey: "dependency.tooltips.blocking",
+    edge: "BLOCKS",
+    reversed: false,
+  },
+  {
+    key: "starts_before",
+    group: "dependents",
+    optionLabelKey: "dependency.options.starts_before",
+    badgeLabelKey: "dependency.labels.starts_before",
+    tooltipLabelKey: "dependency.tooltips.starts_before",
+    edge: "STARTS_BEFORE",
+    reversed: false,
+  },
+  {
+    key: "finishes_before",
+    group: "dependents",
+    optionLabelKey: "dependency.options.finishes_before",
+    badgeLabelKey: "dependency.labels.finishes_before",
+    tooltipLabelKey: "dependency.tooltips.finishes_before",
+    edge: "FINISHES_BEFORE",
+    reversed: false,
+  },
+];
+
+// 展示推导：分组 × 存储边类型 → 选择项（查 DEPENDENCY_TYPE_OPTIONS，映射真相单一）
+export function dependencyTypeOption(
+  group: keyof DependencyGroup,
+  depType: DependencyEdgeType,
+): DependencyTypeOption {
+  const option = DEPENDENCY_TYPE_OPTIONS.find(
+    (o) => o.edge === depType && o.group === group,
+  );
+  if (!option) throw new Error(`未知的依赖组合: ${group} ${depType}`);
+  return option;
+}
+
+// 兼容保留：仅需要 key 时使用
+export function dependencyTypeBadgeKey(
+  group: keyof DependencyGroup,
+  depType: DependencyEdgeType,
+): DependencyTypeOption["key"] {
+  return dependencyTypeOption(group, depType).key;
+}
+
+// 选择项 → 规范化存储边（提交时方向映射用）
+export function toDependencyEdge(
+  option: DependencyTypeOption,
+  currentStoryId: string,
+  targetStoryId: string,
+): { sourceId: string; targetId: string; type: DependencyEdgeType } {
+  return option.reversed
+    ? { sourceId: targetStoryId, targetId: currentStoryId, type: option.edge }
+    : { sourceId: currentStoryId, targetId: targetStoryId, type: option.edge };
+}

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

@@ -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({
@@ -176,11 +179,14 @@ export function CreateStoryDialog({
       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 {

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/activity-timeline.tsx

@@ -322,11 +322,26 @@ interface ActivityTimelineProps {
   users?: UserBrief[];
 }
 
+/** 关联类 action 集合：描述文案带 {{value}} 插值（对象名或数量） */
+const OBJECT_ACTIVITY_ACTIONS: Record<string, true> = {
+  child_added: true,
+  dependency_added: true,
+  link_added: true,
+  attachment_added: true,
+  kb_linked: 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) {

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

@@ -35,6 +35,7 @@ import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { updateStoryFn, listStoryReactionsFn, toggleStoryReactionFn } from "@/server/serverFns/story";
+import { formatTimestamp } from "@/lib/datetime";
 import { toast } from "sonner";
 import type { StoryDetail, UserBrief, CommentWithReplies, ActivityItem, ReactionGroup, RelationsData } from "../types";
 import { parseStoryDescription, serializeStoryDescription } from "../types";
@@ -321,13 +322,21 @@ export function StoryDetailBody({
     updateField("description", json);
   }, [updateField]);
 
+  // 截止日期已过期（未完成/未取消）→ 红色，与子需求列表样式一致
+  const dueOverdue = !!(
+    story.targetDate &&
+    story.state !== "done" &&
+    story.state !== "cancelled" &&
+    new Date(story.targetDate.slice(0, 10)) < new Date(new Date().toISOString().slice(0, 10))
+  );
+
   const metaBar = (
     <div className="flex flex-wrap items-center gap-2 px-6">
       <StateEditor value={story.state} onChange={(v) => updateField("state", v)} variant="button" />
       <PriorityEditor value={story.priority} onChange={(v) => updateField("priority", v)} variant="button" />
       <AssigneeEditor assignee={story.assignee} users={users} onChange={(v) => updateField("assigneeId", v)} variant="button" />
       <DateEditor value={story.startDate} onChange={(v) => updateField("startDate", v)} label={t("detail.startDate")} icon={CalendarPlus2} />
-      <DateEditor value={story.targetDate} onChange={(v) => updateField("targetDate", v)} label={t("detail.dueDate")} icon={CalendarCheck} />
+      <DateEditor value={story.targetDate} onChange={(v) => updateField("targetDate", v)} label={t("detail.dueDate")} icon={CalendarCheck} overdue={dueOverdue} />
     </div>
   );
 
@@ -532,9 +541,11 @@ export function StoryDetailBody({
         <div className="py-2">
           <StoryDetailToolbar
             storyId={story.id}
+            storyIdentifier={identifier}
             projectId={story.projectId}
             data={relationsData}
             onRefresh={onRelationsUpdate ?? (() => { })}
+            onAppendActivities={onAppendActivities}
             users={users}
             projects={projects?.map((p) => ({ ...p, displayId: p.displayId ?? null }))}
             labels={labels}
@@ -567,12 +578,12 @@ export function StoryDetailBody({
         <div className="flex items-center gap-2 text-xs">
           <ClockPlus className="size-4 shrink-0 text-muted-foreground" />
           <span className="text-muted-foreground shrink-0">{t("detail.createdAt")}</span>
-          <span>{new Date(story.createdAt).toLocaleString()}</span>
+          <span>{formatTimestamp(story.createdAt)}</span>
         </div>
         <div className="flex items-center gap-2 text-xs">
           <ClockArrowUp className="size-4 shrink-0 text-muted-foreground" />
           <span className="text-muted-foreground shrink-0">{t("detail.updatedAt")}</span>
-          <span>{new Date(story.updatedAt).toLocaleString()}</span>
+          <span>{formatTimestamp(story.updatedAt)}</span>
         </div>
       </div>