@allbluecn/web-app 0.4.22 → 0.5.0

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

@@ -19,7 +19,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDebouncedCallback, SEARCH_DEBOUNCE_MS } from "@/lib/pacer";
 import { cn } from "@/lib/utils";
-import { Search, Sprout, ChevronsUpDown, Check, Trees, ListFilter, Flag } from "lucide-react";
+import { Search, Sprout, ChevronsUpDown, Check, Trees, ListFilter, Flag, Waypoints } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { ProjectIconDisplay } from "@/components/project/project-icon";
@@ -50,7 +50,9 @@ import {
   STATE_LABEL,
   STORY_STATES,
   STORY_PRIORITIES,
+  DEPENDENCY_TYPE_OPTIONS,
   type StoryState,
+  type DependencyTypeOption,
 } from "../constants";
 import { PriorityIcon } from "../priority-icon";
 
@@ -71,7 +73,7 @@ interface StorySelectDialogProps {
   initialProjectId?: string | null;
   defaultSelectedParentId?: string | null;
   defaultSelectedParentIds?: string[];
-  mode?: "parent" | "child";
+  mode?: "parent" | "child" | "dependency";
   onSelected: (parentId: string | string[]) => void;
   onActivities?: (activities: ActivityItem[]) => void;
   skipTransfer?: boolean;
@@ -79,9 +81,15 @@ interface StorySelectDialogProps {
   excludeProjectIds?: string[];
   hideAllProjects?: boolean;
   filteredTip?: string;
+  /** dependency 模式：额外排除的需求 id（已建立依赖的对方） */
+  excludeIds?: string[];
+  /** dependency 模式：当前选中的依赖类型（受控），由父组件持有以便提交时映射方向 */
+  dependencyType?: DependencyTypeOption["key"];
+  onDependencyTypeChange?: (key: DependencyTypeOption["key"]) => void;
 }
 
 const ALL_PROJECTS = "__all__";
+const EMPTY_IDS: string[] = [];
 const ALL_STATES = STORY_STATES.map((s) => s.value);
 const ALL_PRIORITIES = STORY_PRIORITIES.map((p) => p.value);
 
@@ -101,10 +109,13 @@ export function StorySelectDialog({
   excludeProjectIds = [],
   hideAllProjects = false,
   filteredTip,
+  excludeIds = EMPTY_IDS,
+  dependencyType,
+  onDependencyTypeChange,
 }: StorySelectDialogProps) {
   const { t } = useTranslation("story");
   const resolvedTitle = title ?? t("select.defaultTitle");
-  const isMulti = mode === "child";
+  const isMulti = mode === "child" || mode === "dependency";
   const [projectFilter, setProjectFilter] = useState<string>(ALL_PROJECTS);
   const [items, setItems] = useState<ParentStoryItem[]>([]);
   const [search, setSearch] = useState("");
@@ -117,6 +128,7 @@ export function StorySelectDialog({
   const [projectPopoverOpen, setProjectPopoverOpen] = useState(false);
   const [statePopoverOpen, setStatePopoverOpen] = useState(false);
   const [priorityPopoverOpen, setPriorityPopoverOpen] = useState(false);
+  const [depPopoverOpen, setDepPopoverOpen] = useState(false);
   const [selectedStates, setSelectedStates] = useState<Set<string>>(
     () => new Set(ALL_STATES),
   );
@@ -209,6 +221,7 @@ export function StorySelectDialog({
         projectId: projectFilter === ALL_PROJECTS ? undefined : projectFilter,
         search: debouncedSearch || undefined,
         excludeStoryId: storyId,
+        excludeIds: excludeIds.length > 0 ? excludeIds : undefined,
         mode,
       },
     })
@@ -226,7 +239,7 @@ export function StorySelectDialog({
         if (reqId !== requestIdRef.current) return;
         setLoading(false);
       });
-  }, [open, projectFilter, debouncedSearch, storyId, mode]);
+  }, [open, projectFilter, debouncedSearch, storyId, excludeIds, mode]);
 
   const loadMore = useCallback(async () => {
     if (loading || !hasMore || !nextCursor) return;
@@ -239,6 +252,7 @@ export function StorySelectDialog({
           search: debouncedSearch || undefined,
           cursor: nextCursor,
           excludeStoryId: storyId,
+          excludeIds: excludeIds.length > 0 ? excludeIds : undefined,
           mode,
         },
       });
@@ -253,11 +267,17 @@ export function StorySelectDialog({
       if (reqId !== requestIdRef.current) return;
       setLoading(false);
     }
-  }, [loading, hasMore, nextCursor, projectFilter, debouncedSearch, storyId, mode]);
+  }, [loading, hasMore, nextCursor, projectFilter, debouncedSearch, storyId, excludeIds, mode]);
 
   // 点击 Popover 外部时关闭（Dialog 嵌套下 Radix 事件被拦截）
   useEffect(() => {
-    if (!projectPopoverOpen && !statePopoverOpen && !priorityPopoverOpen) return;
+    if (
+      !projectPopoverOpen &&
+      !statePopoverOpen &&
+      !priorityPopoverOpen &&
+      !depPopoverOpen
+    )
+      return;
     const handlePointerDown = (e: PointerEvent) => {
       const target = e.target as Node;
       const content = document.querySelector('[data-slot="popover-content"]');
@@ -271,11 +291,12 @@ export function StorySelectDialog({
         setProjectPopoverOpen(false);
         setStatePopoverOpen(false);
         setPriorityPopoverOpen(false);
+        setDepPopoverOpen(false);
       }
     };
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
-  }, [projectPopoverOpen, statePopoverOpen, priorityPopoverOpen]);
+  }, [projectPopoverOpen, statePopoverOpen, priorityPopoverOpen, depPopoverOpen]);
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const el = e.currentTarget;
@@ -288,8 +309,8 @@ export function StorySelectDialog({
   const handleSubmit = async () => {
     if (selectedIds.length === 0) return;
     if (skipTransfer) {
+      // dependency 模式：关闭时机由回调方控制（部分失败时保留弹窗与已选项）
       const parentId = isMulti ? selectedIds : selectedIds[0];
-      onOpenChange(false);
       onSelected(parentId);
       return;
     }
@@ -384,7 +405,7 @@ export function StorySelectDialog({
                         )}
                       >
                         <Icon className={cn("size-3.5 shrink-0", STATE_ICON_COLOR[s.value])} />
-                        <span className="flex-1">{s.label}</span>
+                        <span className="flex-1">{t(s.label)}</span>
                         {checked && <Check className="size-3.5 shrink-0 text-primary" />}
                       </button>
                     );
@@ -432,7 +453,7 @@ export function StorySelectDialog({
                         )}
                       >
                         <PriorityIcon priority={p.value} />
-                        <span className="flex-1">{p.label}</span>
+                        <span className="flex-1">{t(p.label)}</span>
                         {checked && <Check className="size-3.5 shrink-0 text-primary" />}
                       </button>
                     );
@@ -579,7 +600,7 @@ export function StorySelectDialog({
                               STATE_COLOR[state] ?? STATE_COLOR.backlog
                             }`}
                           >
-                            {STATE_LABEL[state] ?? state}
+                            {t(STATE_LABEL[state] ?? state)}
                           </span>
                           <PriorityIcon priority={priority} />
                           <span className="shrink-0 font-mono text-xs text-muted-foreground">
@@ -638,6 +659,57 @@ export function StorySelectDialog({
               <span className="text-xs text-muted-foreground">
                 {selectedCount > 0 ? t("select.selectedCount", { count: selectedCount }) : t("select.pleaseSelect")}
               </span>
+              {mode === "dependency" && (
+                <Popover open={depPopoverOpen} onOpenChange={setDepPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className={cn(
+                        "h-9 gap-1.5",
+                        !dependencyType && "text-muted-foreground",
+                      )}
+                    >
+                      <Waypoints className="size-3.5" />
+                      {dependencyType
+                        ? t(
+                            DEPENDENCY_TYPE_OPTIONS.find((o) => o.key === dependencyType)!
+                              .optionLabelKey,
+                          )
+                        : t("dependency.typePlaceholder")}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent align="start" className="w-80 p-1">
+                    {(["dependsOn", "dependents"] as const).map((group, gi) => (
+                      <div key={group} className={cn(gi > 0 && "mt-1 border-t pt-1")}>
+                        <p className="px-2 py-1 text-xs font-medium text-muted-foreground">
+                          {t(`dependency.optionGroups.${group}`)}
+                        </p>
+                        {DEPENDENCY_TYPE_OPTIONS.filter((o) => o.group === group).map((opt) => {
+                          const checked = dependencyType === opt.key;
+                          return (
+                            <button
+                              key={opt.key}
+                              type="button"
+                              onClick={() => {
+                                onDependencyTypeChange?.(opt.key);
+                                setDepPopoverOpen(false);
+                              }}
+                              className={cn(
+                                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-muted",
+                                checked && "font-medium",
+                              )}
+                            >
+                              <span className="flex-1">{t(opt.optionLabelKey)}</span>
+                              {checked && <Check className="size-3.5 shrink-0 text-primary" />}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    ))}
+                  </PopoverContent>
+                </Popover>
+              )}
             </div>
           )}
           <div className="flex items-center gap-3">
@@ -650,7 +722,11 @@ export function StorySelectDialog({
             </Button>
             <Button
               onClick={handleSubmit}
-              disabled={(isMulti ? selectedCount === 0 : selectedIds.length === 0) || submitting}
+              disabled={
+                (isMulti ? selectedCount === 0 : selectedIds.length === 0) ||
+                submitting ||
+                (mode === "dependency" && !dependencyType)
+              }
             >
               {submitting ? t("select.loading") : isMulti ? t("select.confirmWithCount", { count: selectedCount }) : t("select.confirm")}
             </Button>

package/src/components/story/peek-panel.tsx

@@ -246,7 +246,14 @@ export function StoryPeekPanel({
       <>
         <div
           className="absolute inset-y-0 right-0 z-20 flex w-[min(100%,max(85vw,560px),1200px)] flex-col overflow-hidden border-l bg-popover rounded-r-2xl rounded-l-none shadow-xl ring-1 ring-foreground/10 @max-[1399px]:rounded-l-2xl"
-          onClick={(e) => e.stopPropagation()}
+          onClick={(e) => {
+            // 仅拦截本容器 DOM 内的点击（防止冒泡到列表背景误关 peek）。
+            // Radix 弹层 portal 到 body、不在本容器 DOM 内，其合成事件冒泡会经过这里，
+            // 若 stopPropagation 会同时终止原生 click 冒泡到 document，
+            // 导致 DismissableLayer 的 outside-dismiss 判定失效（弹窗内 popover 无法关闭）。
+            if (!e.currentTarget.contains(e.target as Node)) return;
+            e.stopPropagation();
+          }}
         >
           {header}
           {body}

package/src/components/story/relations/story-ref-row.tsx

@@ -0,0 +1,319 @@
+// 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 * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Archive, MoreHorizontal, Trash2, Waypoints, CalendarCheck, CalendarPlus2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import {
+  updateStoryFn,
+  archiveStoryFn,
+  unarchiveStoryFn,
+  deleteStoryFn,
+} from "@/server/serverFns/story";
+import { PriorityEditor, StateEditor, AssigneeEditor, DateEditor, LabelsEditor } from "../inline-editors";
+import { NameConfirmDialog } from "@/components/shared/name-confirm-dialog";
+import { cn } from "@/lib/utils";
+import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { Badge } from "@/components/ui/badge";
+import { dependencyTypeOption } from "../constants";
+import type { DisplayProperty } from "../display/types";
+import type { StoryPatch } from "../display/group-fields";
+import type {
+  StoryListItem,
+  UserBrief,
+  DependencyEdgeType,
+  DependencyGroup,
+} from "../types";
+
+/** 行内编辑/归档/删除后回传给面板的补丁载荷（StoryPatch 字段 + 面板控制信号） */
+export type StoryRelationPatch = StoryPatch & {
+  archived?: boolean;
+  archivedAt?: string | null;
+  deleted?: boolean;
+};
+
+export interface StoryRefRowProps {
+  story: StoryListItem;
+  users: UserBrief[];
+  labels: { id: string; name: string; color: string }[];
+  parentProjectId: string | null;
+  projects: { id: string; name: string; icon: string; displayId: string | null }[];
+  selected: boolean;
+  properties: DisplayProperty[];
+  onToggle: (id: string) => void;
+  onOpenStory: (id: string) => void;
+  onStoryRefresh: (storyId: string, patch: StoryRelationPatch) => void;
+  /** 移除关系：子需求=移除子需求，依赖=移除依赖 */
+  onRemove: (storyId: string) => void;
+  removeMenuLabel: string;
+  /** 依赖行类型标签：传 depType + group 时行内渲染类型 Badge */
+  dependencyMeta?: { depType: DependencyEdgeType; group: keyof DependencyGroup };
+  /** 当前需求编号（tooltip 中以编号替代「我」指代当前需求） */
+  currentIdentifier?: string;
+}
+
+export function StoryRefRow({
+  story,
+  users,
+  labels,
+  parentProjectId,
+  projects,
+  selected,
+  properties,
+  onToggle,
+  onOpenStory,
+  onStoryRefresh,
+  onRemove,
+  removeMenuLabel,
+  dependencyMeta,
+  currentIdentifier,
+}: StoryRefRowProps) {
+  const { t } = useTranslation("story");
+  const [storyState, setStoryState] = React.useState(story);
+  React.useEffect(() => {
+    setStoryState(story);
+  }, [story]);
+  const updateStory = useServerFn(updateStoryFn);
+  const archiveStory = useServerFn(archiveStoryFn);
+  const unarchiveStory = useServerFn(unarchiveStoryFn);
+  const deleteStory = useServerFn(deleteStoryFn);
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+
+  const crossProject = storyState.projectId !== parentProjectId;
+  const storyProjectInfo = projects.find((p) => p.id === storyState.projectId) ?? null;
+
+  const updateField = async (patch: Record<string, any>) => {
+    const updated = { ...storyState, ...patch };
+    setStoryState(updated);
+    try {
+      await updateStory({ data: { storyId: story.id, ...patch } });
+      onStoryRefresh(story.id, patch);
+    } catch (e) {
+      setStoryState(story);
+      toast.error((e as Error)?.message || t("children.updateFailed"));
+    }
+  };
+
+  const currentLabelIds = storyState.labels.map((l) => l.id);
+  const overdue = !!(
+    storyState.targetDate &&
+    storyState.state !== "done" &&
+    new Date(storyState.targetDate.slice(0, 10)) < new Date(new Date().toISOString().slice(0, 10))
+  );
+
+  const canArchiveSingle = storyState.state === "done" || storyState.state === "cancelled";
+
+  const handleArchive = async () => {
+    if (!canArchiveSingle) {
+      toast.error(t("children.archiveOnlyDone"));
+      return;
+    }
+    try {
+      await archiveStory({ data: { storyId: story.id } });
+      onStoryRefresh(story.id, { archived: true, archivedAt: new Date().toISOString() });
+      toast.success(t("children.archived"));
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.archiveFailed"));
+    }
+  };
+
+  const handleUnarchive = async () => {
+    try {
+      await unarchiveStory({ data: { storyId: story.id } });
+      onStoryRefresh(story.id, { archived: false, archivedAt: null });
+      toast.success(t("children.unarchived"));
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.unarchiveFailed"));
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      await deleteStory({ data: { storyId: story.id } });
+      onStoryRefresh(story.id, { deleted: true });
+      toast.success(t("children.deleted"));
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.deleteFailed"));
+    }
+  };
+
+  const showArchived = !storyState.archived;
+
+  return (
+    <div
+      className={`group flex items-center gap-1.5 px-2 py-1.5 text-sm transition-colors ${selected ? "bg-muted/20" : "bg-card hover:bg-accent/40"} border-b border-border/40`}
+    >
+      <Checkbox
+        checked={selected}
+        onCheckedChange={() => onToggle(story.id)}
+        aria-label={t("children.selectStory", { name: story.name })}
+        className={cn(
+          "shrink-0 transition-opacity",
+          selected ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+        )}
+      />
+      <button
+        type="button"
+        onClick={() => onOpenStory(storyState.id)}
+        className="flex h-8 min-w-0 flex-1 items-center gap-2 text-left"
+      >
+        {crossProject && storyProjectInfo ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                className="shrink-0"
+                style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }}
+              >
+                <ProjectIconDisplay name={storyProjectInfo.icon} size={14} />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
+              <span className="opacity-80">{t("children.crossProject")}</span>
+              <span className="font-medium">{storyProjectInfo.name}</span>
+            </TooltipContent>
+          </Tooltip>
+        ) : storyProjectInfo ? (
+          <ProjectIconDisplay
+            name={storyProjectInfo.icon}
+            size={14}
+            className="shrink-0 text-muted-foreground"
+          />
+        ) : null}
+        {crossProject && storyProjectInfo ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                className="font-mono text-xs shrink-0"
+                style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }}
+              >
+                {storyState.identifier}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
+              <span className="opacity-80">{t("children.crossProject")}</span>
+              <span className="font-medium">{storyProjectInfo.name}</span>
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <span className="font-mono text-xs text-muted-foreground shrink-0">{storyState.identifier}</span>
+        )}
+        {dependencyMeta && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Badge variant="outline" className="max-w-56 shrink-0 truncate text-[10px] font-normal text-muted-foreground">
+                {t(dependencyTypeOption(dependencyMeta.group, dependencyMeta.depType).badgeLabelKey, {
+                  identifier: storyState.identifier,
+                })}
+              </Badge>
+            </TooltipTrigger>
+            <TooltipContent side="top" className="text-xs">
+              {t(
+                currentIdentifier
+                  ? dependencyTypeOption(dependencyMeta.group, dependencyMeta.depType).tooltipLabelKey
+                  : dependencyTypeOption(dependencyMeta.group, dependencyMeta.depType).badgeLabelKey,
+                {
+                  identifier: storyState.identifier,
+                  me: currentIdentifier,
+                },
+              )}
+            </TooltipContent>
+          </Tooltip>
+        )}
+        <span className="min-w-0 flex-1 truncate font-medium">{storyState.name}</span>
+      </button>
+      {properties.includes("priority") && (
+        <PriorityEditor value={storyState.priority} onChange={(v) => updateField({ priority: v })} variant="button" />
+      )}
+      {properties.includes("state") && (
+        <StateEditor value={storyState.state} onChange={(v) => updateField({ state: v })} variant="button" />
+      )}
+      {properties.includes("assignee") && (
+        <AssigneeEditor assignee={storyState.assignee} users={users} onChange={(v) => updateField({ assigneeId: v })} variant="button" />
+      )}
+      {properties.includes("startDate") && (
+<DateEditor value={storyState.startDate} onChange={(v) => updateField({ startDate: v })} label={t("children.startDate")} icon={CalendarPlus2} />
+        )}
+        {properties.includes("dueDate") && (
+        <DateEditor value={storyState.targetDate} onChange={(v) => updateField({ targetDate: v })} label={t("children.dueDate")} icon={CalendarCheck} overdue={overdue} />
+      )}
+      {properties.includes("labels") && (
+        <LabelsEditor labelIds={currentLabelIds} labels={labels} onChange={(v) => updateField({ labelIds: v })} variant="button" />
+      )}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="size-7 p-0 ml-auto border border-border/60 rounded hover:bg-muted">
+            <MoreHorizontal className="size-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-40" sideOffset={4}>
+          <DropdownMenuItem onClick={() => onRemove(story.id)}>
+            <Waypoints className="mr-2 size-4" />
+            {removeMenuLabel}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          {showArchived ? (
+            <>
+              {canArchiveSingle && (
+                <>
+                  <DropdownMenuItem onClick={handleArchive}>
+                    <Archive className="mr-2 size-4" />
+                    {t("children.archive")}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </>
+              )}
+              <DropdownMenuItem
+                onClick={() => setDeleteDialogOpen(true)}
+                className="text-destructive focus:text-destructive"
+              >
+                <Trash2 className="mr-2 size-4" />
+                {t("children.delete")}
+              </DropdownMenuItem>
+            </>
+          ) : (
+            <DropdownMenuItem onClick={handleUnarchive}>
+              <Archive className="mr-2 size-4" />
+              {t("children.unarchive")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <NameConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        title={t("children.deleteTitle")}
+        description={t("children.deleteDescription")}
+        confirmText={t("children.delete")}
+        expectedName={storyState.identifier ?? storyState.id ?? ""}
+        onConfirm={handleDelete}
+      />
+    </div>
+  );
+}

package/src/components/story/story-list-view.tsx

@@ -170,8 +170,10 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
 
   const {
     groups: pagedGroups,
+    isLoading: pagedGroupsLoading,
     refresh: refreshPagedGroups,
     loadMore: loadGroupMore,
+    patchStory: patchPagedStory,
   } = usePagedStoryGroups({
     filters,
     conditions: filterConditions,
@@ -501,7 +503,7 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
           )}
           {view === "calendar" && <CalendarView stories={stories.items} onCreate={handleCreate} onOpenStory={handleOpenStory} orderBy={displayFilters.orderBy} />}
           {view === "list" && (
-            <StoryList groups={pagedGroups} displayFilters={displayFilters} users={users} labels={labels} projects={projects} onRefresh={listRefresh} onOpenStory={handleOpenStory} onCreate={handleCreate} onLoadMoreGroup={loadGroupMore} projectContext={projectContext} projectId={projectId} />
+            <StoryList groups={pagedGroups} isLoading={pagedGroupsLoading} displayFilters={displayFilters} users={users} labels={labels} projects={projects} onRefresh={listRefresh} onPatchStory={patchPagedStory} onOpenStory={handleOpenStory} onCreate={handleCreate} onLoadMoreGroup={loadGroupMore} projectContext={projectContext} projectId={projectId} />
           )}
           {view === "timeline" && <TimelineView stories={stories.items} onOpenStory={handleOpenStory} orderBy={displayFilters.orderBy} onLoadMore={loadMore} hasMore={hasMore} />}
         </div>

package/src/components/story/story-panel-header.tsx

@@ -217,7 +217,10 @@ export function StoryPanelHeader({
 
         {!hidePrevNext && (onPrevious || onNext) && (
           <>
-            <Separator orientation="vertical" data-vertical className="h-4 data-vertical:self-center mx-1" />
+            {/* 外层 div 限高：Separator 默认 data-[orientation=vertical]:h-full（属性选择器特异性高于单类），直接写 h-4 无法覆盖，会撑满整个 header 高度 */}
+            <div className="mx-1 flex h-4 items-center">
+              <Separator orientation="vertical" className="h-full" />
+            </div>
             {onPrevious && (
               <Tooltip>
                 <TooltipTrigger asChild>

package/src/components/story/types.ts

@@ -111,9 +111,6 @@ export function serializeStoryDescription(html: string, markdown: string): strin
   return JSON.stringify({ html, markdown });
 }
 
-// 依赖类型
-export type DependencyType = "blocks" | "blocked_by" | "relates_to";
-
 // Story 简要信息（用于关联关系）
 export interface StoryBrief {
   id: string;
@@ -134,21 +131,6 @@ export interface StoryTreeNode {
   children?: StoryTreeNode[];
 }
 
-// 依赖项（去重）
-export interface DependencyItem {
-  id: string;
-  title: string;
-  status: StoryState;
-  type: DependencyType;
-}
-
-// 依赖分组
-export interface DependencyGroup {
-  blocking: DependencyItem[];
-  blockedBy: DependencyItem[];
-  relatesTo: DependencyItem[];
-}
-
 // 链接项
 export interface StoryLinkItem {
   id: string;
@@ -193,3 +175,20 @@ export interface RelationsData {
     docs: DocBrief[];
   };
 }
+
+// ====== 依赖关系（对齐 Plane，新模型） ======
+
+// 规范化存储类型：语义统一为「source 领先于 target」
+export type DependencyEdgeType = "BLOCKS" | "STARTS_BEFORE" | "FINISHES_BEFORE";
+
+// 依赖行 = 完整需求列表项 + 依赖元信息（支撑内联编辑与分组）
+export interface DependencyRow extends StoryListItem {
+  depId: string; // story_dependencies 行 id（移除依赖用）
+  depType: DependencyEdgeType;
+}
+
+// 双视角分组（RelationsData.dependencies 最终形态，任务 2 切换引用）
+export interface DependencyGroup {
+  dependsOn: DependencyRow[]; // 此需求依赖的（对方领先，边 targetId = 我）
+  dependents: DependencyRow[]; // 依赖此需求的（我领先，边 sourceId = 我）
+}