@allbluecn/web-app 0.4.22 → 0.5.0

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, 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";
@@ -121,52 +121,115 @@ startDate_changed: CalendarPlus2,
     parent_removed: GitPullRequestArrow,
   };
 
-// ====== 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/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,6 +541,7 @@ export function StoryDetailBody({
         <div className="py-2">
           <StoryDetailToolbar
             storyId={story.id}
+            storyIdentifier={identifier}
             projectId={story.projectId}
             data={relationsData}
             onRefresh={onRelationsUpdate ?? (() => { })}
@@ -567,12 +577,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>