@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/views/timeline-view.tsx

@@ -15,260 +15,631 @@
 // 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 { memo, useEffect, useMemo, useRef, useState } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import {
-  DragDropProvider,
-  DragOverlay,
-  useDraggable,
-  type DragEndEvent,
-} from "@dnd-kit/react";
+/**
+ * 需求时间轴 = reui Gantt 组装（依赖箭头/里程碑/汇总条/设置菜单/乐观更新）。
+ *
+ * 数据流：props.stories（父级分页/刷新）→ applyOrder → 仅看已排期过滤 →
+ * override map 叠加（乐观改期）→ storyToGanttEvents / buildGanttResources 派生。
+ * 不做 setLocalStories 全量替换：派生保证 props.stories 刷新不打断乐观态，
+ * override 清除即天然回滚。
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useServerFn } from "@tanstack/react-start";
-import { toast } from "@/components/ui/toast";
+import { Settings2Icon } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { updateStoryFn } from "@/server/serverFns/story";
-import { buildTimelineRange, getRangeFromDates, parseDate, formatDateLocal } from "@/lib/datetime";
-import type { StoryListItem } from "../types";
-import { applyOrder } from "../display/order-resolver";
-import type { OrderKey } from "../display/types";
-import { VIRTUALIZE_THRESHOLD } from "@/lib/perf";
-import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { UserAvatar } from "@/components/shared-kit/avatars/user-avatar";
 import { InfiniteScrollSentinel } from "@/components/infinite-scroll-sentinel";
+import {
+  listStoryDependenciesFn,
+  updateStoryFn,
+} from "@/server/serverFns/story";
+import { listIterationsScopeFn } from "@/server/serverFns/iteration";
+import { formatDateLocal, parseDate } from "@/lib/datetime";
+import { VIRTUALIZE_THRESHOLD } from "@/lib/perf";
 import { m } from "@/paraglide/messages.js";
-import { toastError } from "@/lib/toast-error";
+import { Gantt } from "@/components/reui/gantt/gantt";
+import type {
+  GanttColumn,
+  GanttColumnContext,
+  GanttProps,
+} from "@/components/reui/gantt/gantt";
+import {
+  GanttDatePicker,
+  GanttNav,
+  GanttNavNext,
+  GanttNavPrev,
+  GanttNavToday,
+  GanttScaleSwitcher,
+  GanttTitle,
+} from "@/components/reui/gantt/gantt-nav";
+import { GanttView } from "@/components/reui/gantt/gantt-view";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { sentinelMirrorTop } from "./timeline/sentinel-geometry";
+import type {
+  GanttOccurrence,
+  GanttProposedUpdate,
+  GanttResource,
+  GanttScale,
+} from "@/components/reui/gantt/gantt-types";
+import { STATE_COLOR, STATE_LABEL } from "../constants";
+import {
+  TIMELINE_GROUP_KEYS,
+  type TimelineGroupKey,
+} from "../display/constants";
+import type { StoryListItem, UserBrief } from "../types";
+import { applyOrder } from "../display/order-resolver";
+import type { GroupContext, GroupKey, OrderKey } from "../display/types";
+import {
+  buildGanttResources,
+  ganttSummaryProgress,
+  mergeStoryOverrides,
+  storyToGanttEvents,
+  type IterationBaseline,
+  type StoryDependencyEdge,
+  type StoryGanttData,
+} from "./timeline/mappers";
+import {
+  buildGanttI18n,
+  ganttDateFnsLocale,
+} from "./timeline/i18n";
+import {
+  useDateCommit,
+  type StoryDateOverride,
+} from "./timeline/use-date-commit";
 
-const TIMELINE_ROW_HEIGHT = 40;
+const GANTT_SCALES = ["day", "week", "month", "quarter", "year"] as const;
 
-interface GanttBarProps {
-  story: StoryListItem;
-  left: number;
-  width: number;
-}
+/** 设置菜单里可显隐的自定义三列（id 与 columns 定义一一对应） */
+const GANTT_COLUMN_IDS = ["status", "assignee", "due"] as const;
+type GanttColumnId = (typeof GANTT_COLUMN_IDS)[number];
 
-const GanttBar = memo(function GanttBar({ story, left, width }: GanttBarProps) {
-  const { ref, isDragging } = useDraggable({ id: story.id });
-  return (
-    <div
-      ref={ref}
-      style={{
-        left: `${left}%`,
-        width: `${width}%`,
-      }}
-      className={cn(
-        "absolute top-1/2 h-6 -translate-y-1/2 cursor-grab rounded bg-primary/80 text-xs text-primary-foreground",
-        isDragging && "opacity-60",
-      )}
-    >
-      <span className="truncate px-2">{story.identifier} {story.name}</span>
-    </div>
-  );
-});
+/**
+ * 甘特分组 clamp 白名单（R-9）：单一事实源 = display/constants.ts 的
+ * TIMELINE_GROUP_KEYS（与 display-dropdown 的 timeline 选项同源消费）。
+ * 非 白名单键（如 createdBy/project——mappers 经 resolver 路径其实支持，
+ * 不列入是产品收敛；以及 crafted 持久值）→ 防御性回落不分组。
+ */
+/** 当前维度下有 children 的组节点 id 集合（`${groupKey}:${key}` 形态由
+ * mappers 的 ganttGroupResourceId 统一产生，勿手拼）；低于虚拟化阈值恒空 */
+function collectGroupNodeIds(
+  stories: StoryListItem[],
+  groupBy: TimelineGroupKey,
+  ctx: GroupContext,
+  showEmptyGroups: boolean,
+): string[] {
+  if (stories.length <= VIRTUALIZE_THRESHOLD) return [];
+  const ids: string[] = [];
+  const walk = (nodes: GanttResource[]) => {
+    for (const node of nodes) {
+      if (node.children?.length) {
+        ids.push(node.id);
+        walk(node.children);
+      }
+    }
+  };
+  walk(buildGanttResources(stories, groupBy, { ctx, showEmptyGroups }));
+  return ids;
+}
 
 interface TimelineViewProps {
   stories: StoryListItem[];
   onOpenStory: (id: string) => void;
   orderBy: OrderKey;
+  /** 分组维度：单一事实源 = DisplayOptions.groupBy（工具栏「显示选项」） */
+  groupBy: GroupKey;
+  /** 分组上下文（mappers ctx：assignee/labels/project 组标签元数据） */
+  users: UserBrief[];
+  labels: { id: string; name: string; color: string }[];
+  projects: { id: string; name: string; displayId: string | null; icon: string }[];
+  /** 显示空组（DisplayOptions.showEmptyGroups 透传 mappers） */
+  showEmptyGroups: boolean;
   onLoadMore: () => void;
   hasMore: boolean;
 }
 
-export function TimelineView({ stories, onOpenStory, orderBy, onLoadMore, hasMore }: TimelineViewProps) {
-  const [mode, setMode] = useState<"month" | "week">("month");
-  const [localStories, setLocalStories] = useState(stories);
-  const [dragSource, setDragSource] = useState<StoryListItem | null>(null);
-  useEffect(() => { setLocalStories(stories); }, [stories]);
+export function TimelineView({
+  stories,
+  onOpenStory,
+  orderBy,
+  groupBy,
+  users,
+  labels,
+  projects,
+  showEmptyGroups,
+  onLoadMore,
+  hasMore,
+}: TimelineViewProps) {
   const updateStory = useServerFn(updateStoryFn);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const timelineRef = useRef<HTMLDivElement>(null);
+  const listDependencies = useServerFn(listStoryDependenciesFn);
+  const listIterations = useServerFn(listIterationsScopeFn);
 
-  const dates = useMemo(
-    () => localStories.filter((s) => s.startDate).map((s) => parseDate(s.startDate!)),
-    [localStories],
-  );
-  const range = useMemo(() => getRangeFromDates(dates), [dates]);
-  const ticks = useMemo(() => buildTimelineRange(range.start, range.end, mode), [range, mode]);
-  const totalDays = useMemo(
-    () => Math.max(Math.round((range.end.getTime() - range.start.getTime()) / 86400000), 1),
-    [range],
+  // 防御性 clamp：dropdown 已收敛为白名单六键，持久化值/旧 saved view 仍可能
+  // 携带白名单外键（如 list 侧存下的 project/createdBy）——非白名单 → 不分组
+  const effectiveGroupBy: TimelineGroupKey = (TIMELINE_GROUP_KEYS as readonly string[]).includes(
+    groupBy,
+  )
+    ? (groupBy as TimelineGroupKey)
+    : "none";
+  const [scheduledOnly, setScheduledOnly] = useState(false);
+  const [scale, setScale] = useState<GanttScale>("month");
+  const [dependencyLines, setDependencyLines] = useState(true);
+  const [visibleColumns, setVisibleColumns] = useState<GanttColumnId[]>([
+    ...GANTT_COLUMN_IDS,
+  ]);
+
+  // 超过虚拟化阈值时组默认折叠（初始态裁决）：按 effectiveGroupBy 计算
+  // 组节点 id 集合（走 collectGroupNodeIds，形态来自 mappers 单一来源）——
+  // saved groupBy=state 挂载时折叠即生效。reui Gantt 的受控
+  // collapsedGroups/onCollapsedGroupsChange 把折叠态上收本组件。
+  const [collapsedGroups, setCollapsedGroups] = useState<string[]>(() =>
+    collectGroupNodeIds(
+      stories,
+      effectiveGroupBy,
+      { users, labels, projects },
+      showEmptyGroups,
+    ),
   );
-  const unscheduled = useMemo(() => applyOrder(localStories.filter((s) => !s.startDate), orderBy), [localStories, orderBy]);
-  const scheduled = useMemo(() => applyOrder(localStories.filter((s) => s.startDate), orderBy), [localStories, orderBy]);
-  const today = new Date();
+  // 折叠重算（审查修复轮 1）：groupBy 切换 / 增长首次跨阈值时对当前维度
+  // 重新 collect——组 id 带维度前缀，切维度后旧集合全失配即全展开，丢掉
+  // L1 折叠的性能动机（251+ 行全渲染）。**同维度内**后续增长不触发（用户
+  // 展开后不再干预，含 loadMore 新增组节点），仅两个触发点重算：
+  // 维度变化 / 低于→高于阈值。
+  const collapsedDimRef = useRef<TimelineGroupKey>(effectiveGroupBy);
+  const overThresholdRef = useRef(stories.length > VIRTUALIZE_THRESHOLD);
+  useEffect(() => {
+    const overThreshold = stories.length > VIRTUALIZE_THRESHOLD;
+    const dimensionChanged = collapsedDimRef.current !== effectiveGroupBy;
+    const crossedThreshold = !overThresholdRef.current && overThreshold;
+    collapsedDimRef.current = effectiveGroupBy;
+    overThresholdRef.current = overThreshold;
+    if (!dimensionChanged && !crossedThreshold) return;
+    setCollapsedGroups(
+      collectGroupNodeIds(
+        stories,
+        effectiveGroupBy,
+        { users, labels, projects },
+        showEmptyGroups,
+      ),
+    );
+  }, [effectiveGroupBy, stories, users, labels, projects, showEmptyGroups]);
 
-  const paused = dragSource !== null;
-  const virtualize = !paused && scheduled.length > VIRTUALIZE_THRESHOLD;
-  const rowVirtualizer = useVirtualizer({
-    count: virtualize ? scheduled.length : 0,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => TIMELINE_ROW_HEIGHT,
-    overscan: 8,
+  // ── 乐观改期：override map（storyId → 覆盖日期）────────────────────
+  const [overrides, setOverrides] = useState(
+    () => new Map<string, StoryDateOverride>(),
+  );
+  const handleCommit = useCallback((storyId: string, dates: StoryDateOverride) => {
+    setOverrides((prev) => new Map(prev).set(storyId, dates));
+  }, []);
+  const handleReject = useCallback((storyId: string) => {
+    setOverrides((prev) => {
+      if (!prev.has(storyId)) return prev;
+      const next = new Map(prev);
+      next.delete(storyId);
+      return next;
+    });
+  }, []);
+  const { commitStoryRange, isCommitPending } = useDateCommit(updateStory, {
+    onCommit: handleCommit,
+    onReject: handleReject,
   });
 
-  const dayOffset = (d: Date) => Math.round((d.getTime() - range.start.getTime()) / 86400000);
+  // ── 依赖边（甘特箭头数据源）：按 stories 的项目范围变化重拉 ─────────
+  // 「全部项目」页（projectId 混杂/为空）→ undefined = 成员关系内全量聚合
+  const projectId = useMemo(() => {
+    const ids = new Set(
+      stories
+        .map((s) => s.projectId)
+        .filter((v): v is string => !!v),
+    );
+    return ids.size === 1 ? ids.values().next().value : undefined;
+  }, [stories]);
+  const [edges, setEdges] = useState<StoryDependencyEdge[]>([]);
+  useEffect(() => {
+    let cancelled = false;
+    listDependencies({ data: { projectId } })
+      .then((res: { edges: StoryDependencyEdge[] }) => {
+        if (!cancelled) setEdges(res.edges);
+      })
+      .catch((e: unknown) => {
+        // R-6：失败上报留排查线索；保留降级语义（清空 = 无箭头），不引 toast
+        // （依赖线是非阻塞装饰数据）
+        console.error("[timeline] listStoryDependenciesFn failed:", e);
+        if (!cancelled) setEdges([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [listDependencies, projectId]);
 
-  const todayOffset = dayOffset(today);
-  const showToday = todayOffset >= 0 && todayOffset <= totalDays;
-  const todayLeft = (todayOffset / totalDays) * 100;
+  // ── 迭代基线（iteration 分组零成员组域 + 组节点 ghost band）────────
+  // 与依赖边同 projectId 推导、同「失败降级为空」语义（基线丢失仅 ghost
+  // band 不可见，不阻塞渲染）
+  const [iterations, setIterations] = useState<IterationBaseline[]>([]);
+  useEffect(() => {
+    let cancelled = false;
+    listIterations({ data: { projectId } })
+      .then(
+        (res: {
+          items: { id: string; name: string; startDate: string | Date; endDate: string | Date }[];
+        }) => {
+          if (cancelled) return;
+          // schema 为 DateTime（零点 UTC 墙钟的 naive timestamp）：如实还原
+          setIterations(
+            res.items.map((i) => ({
+              id: i.id,
+              start: new Date(i.startDate),
+              end: new Date(i.endDate),
+            })),
+          );
+        },
+      )
+      .catch((e: unknown) => {
+        // 与依赖边同款上报（审查修复轮 1）：降级语义保留（空 = 无 ghost
+        // band / 零成员组域），不引 toast
+        console.error("[timeline] listIterationsScopeFn failed:", e);
+        if (!cancelled) setIterations([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [listIterations, projectId]);
 
-  const handleDragStart = (event: { operation: { source: { id: unknown } | null } }) => {
-    const sourceId = event.operation.source?.id;
-    if (sourceId == null) return;
-    setDragSource(localStories.find((s) => s.id === String(sourceId)) ?? null);
-  };
+  // ── 派生：排序 → 仅看已排期 → override 叠加 → 甘特事件/资源树 ───────
+  const ordered = useMemo(() => applyOrder(stories, orderBy), [stories, orderBy]);
+  const visibleStories = useMemo(
+    () =>
+      scheduledOnly
+        ? // R-4：与 storyToGanttEvents 生成事件口径一致（二者有其一即有事件
+          // 条/菱形）——按 startDate 单边过滤会把 target-only 菱形滤没
+          ordered.filter((s) => s.startDate != null || s.targetDate != null)
+        : ordered,
+    [ordered, scheduledOnly],
+  );
+  const withOverrides = useMemo(
+    () => mergeStoryOverrides(visibleStories, overrides, isCommitPending),
+    [visibleStories, overrides, isCommitPending],
+  );
+  const events = useMemo(
+    () =>
+      storyToGanttEvents(withOverrides, edges).map((e) => {
+        const s = e.data?.story;
+        // start-only 条形的 end 是合成的 start+1 天，无真实末端可缩：
+        // 禁 resize，堵住手势把合成末端隐式写成 targetDate 的路径
+        if (s && s.startDate != null && s.targetDate == null) {
+          return { ...e, resizable: false };
+        }
+        return e;
+      }),
+    [withOverrides, edges],
+  );
+  const groupCtx = useMemo(() => ({ users, labels, projects }), [users, labels, projects]);
+  const resources = useMemo(
+    () =>
+      buildGanttResources(withOverrides, effectiveGroupBy, {
+        ctx: groupCtx,
+        iterations,
+        showEmptyGroups,
+        // 「无迭代」组文案由调用方注入（mappers 纯函数不吃 paraglide）
+        noIterationLabel: m.iterations_editor_none(),
+      }),
+    [withOverrides, effectiveGroupBy, groupCtx, iterations, showEmptyGroups],
+  );
+  const storyById = useMemo(
+    () => new Map(withOverrides.map((s) => [s.id, s])),
+    [withOverrides],
+  );
+  const ganttI18n = useMemo(() => buildGanttI18n(), []);
 
-  const handleDragEnd = async (event: DragEndEvent) => {
-    if (event.canceled) return;
-    setDragSource(null);
-    const active = event.operation.source;
-    if (!active) return;
-    const deltaX = event.operation.transform?.x ?? 0;
-    const story = localStories.find((s) => s.id === String(active.id));
-    if (!story || !story.startDate) return;
-    const timelineWidth = timelineRef.current?.clientWidth ?? 800;
-    const pxPerDay = timelineWidth / (totalDays || 1);
-    const days = Math.round(deltaX / pxPerDay);
-    if (days === 0) return;
-    const oldStart = parseDate(story.startDate!);
-    const newStart = new Date(oldStart);
-    newStart.setDate(oldStart.getDate() + days);
-    const newStartStr = formatDateLocal(newStart);
-    let newTargetStr: string | undefined;
-    if (story.targetDate) {
-      const oldTarget = parseDate(story.targetDate);
-      const newTarget = new Date(oldTarget);
-      newTarget.setDate(oldTarget.getDate() + days);
-      newTargetStr = formatDateLocal(newTarget);
-    }
-    const prev = localStories;
-    setLocalStories(localStories.map((s) => (s.id === story.id ? { ...s, startDate: newStartStr, targetDate: newTargetStr ?? s.targetDate } : s)));
-    try {
-      await updateStory({
-        data: { storyId: story.id, startDate: newStartStr, targetDate: newTargetStr ?? null },
-      });
-      toast.success(m.story_timeline_dateUpdated());
-    } catch (e) {
-      setLocalStories(prev);
-      toastError(e, m.story_timeline_dateUpdateFailed());
-    }
-  };
+  // ── 交互：点击开 Peek / 拖拽改期提交门卫 ────────────────────────────
+  const handleEventClick = useCallback(
+    (occurrence: GanttOccurrence<StoryGanttData>) => {
+      const id = occurrence.event.data?.story.id;
+      if (id) onOpenStory(id);
+    },
+    [onOpenStory],
+  );
+  const handleResourceClick = useCallback(
+    (ctx: GanttColumnContext) => {
+      // 组行只承担折叠/汇总，不打开详情；叶子行（id=story.id）开 Peek
+      if (ctx.isGroup) return;
+      const story = storyById.get(ctx.resource.id);
+      if (story) onOpenStory(story.id);
+    },
+    [storyById, onOpenStory],
+  );
+  // 同步门卫：true 接受手势（乐观态由 onCommit 写入），false 拒绝还原；
+  // 异步落库/失败回滚在 useDateCommit 内部
+  const handleEventUpdate = useCallback(
+    (update: GanttProposedUpdate<StoryGanttData>): boolean => {
+      const story = update.event.data?.story;
+      if (!story) return false;
+      return commitStoryRange(story, update.start, update.end);
+    },
+    [commitStoryRange],
+  );
 
-  return (
-    <div className="flex h-full flex-col gap-3">
-      <div className="flex items-center gap-2">
-        <Button variant={mode === "month" ? "default" : "outline"} size="sm" onClick={() => setMode("month")}>{m.story_calendar_month()}</Button>
-        <Button variant={mode === "week" ? "default" : "outline"} size="sm" onClick={() => setMode("week")}>{m.story_calendar_week()}</Button>
-        <span className="ml-auto text-xs text-muted-foreground">{formatDateLocal(range.start)} ~ {formatDateLocal(range.end)}</span>
+  // ── 树面板自定义三列（列显隐走设置菜单） ────────────────────────────
+  const columns = useMemo<GanttColumn[]>(() => {
+    const dash = <span className="text-muted-foreground">—</span>;
+    const all: GanttColumn[] = [
+      {
+        id: "status",
+        title: m.story_gantt_column_status(),
+        width: 96,
+        render: ({ resource, isGroup }) => {
+          if (isGroup) return null;
+          const s = storyById.get(resource.id);
+          if (!s) return null;
+          return (
+            <Badge variant="outline" className={STATE_COLOR[s.state]}>
+              {STATE_LABEL[s.state]()}
+            </Badge>
+          );
+        },
+      },
+      {
+        id: "assignee",
+        title: m.story_gantt_column_assignee(),
+        width: 72,
+        render: ({ resource, isGroup }) => {
+          if (isGroup) return null;
+          const a = storyById.get(resource.id)?.assignee;
+          if (!a) return dash;
+          return (
+            <UserAvatar
+              avatarConfig={a.avatarConfig}
+              bgShape={a.bgShape}
+              bgColor={a.bgColor}
+              name={a.username}
+              size="sm"
+            />
+          );
+        },
+      },
+      {
+        id: "due",
+        title: m.story_gantt_column_due(),
+        width: 96,
+        render: ({ resource, isGroup }) => {
+          if (isGroup) return null;
+          const s = storyById.get(resource.id);
+          if (!s?.targetDate) return dash;
+          // 脏串守卫：parse 结果为 Invalid Date 时显示 dash，而非渲染 NaN-NaN-NaN
+          const d = parseDate(s.targetDate);
+          if (Number.isNaN(d.getTime())) return dash;
+          return (
+            <span className="tabular-nums">
+              {formatDateLocal(d)}
+            </span>
+          );
+        },
+      },
+    ];
+    return all.filter((c) => visibleColumns.includes(c.id as GanttColumnId));
+  }, [storyById, visibleColumns]);
+
+  const toggleColumn = useCallback((id: GanttColumnId) => {
+    setVisibleColumns((prev) =>
+      prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id],
+    );
+  }, []);
+
+  // ── 设置菜单（columnsMenu 插槽：刻度/列显隐/依赖线/仅看已排期） ──────
+  const settingsMenu = (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7"
+            aria-label={m.story_gantt_settings()}
+            title={m.story_gantt_settings()}
+          />
+        }
+      >
+        <Settings2Icon className="size-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-44">
+        {/* 分组不在此菜单：单一事实源 = DisplayOptions.groupBy（工具栏
+          「显示选项」dropdown，timeline 白名单见 display-dropdown） */}
+        <DropdownMenuRadioGroup
+          value={scale}
+          onValueChange={(v) => setScale(v as GanttScale)}
+        >
+          {GANTT_SCALES.map((s) => (
+            <DropdownMenuRadioItem key={s} value={s}>
+              {ganttI18n.labels.scales[s]}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+        {GANTT_COLUMN_IDS.map((id) => (
+          <DropdownMenuCheckboxItem
+            key={id}
+            checked={visibleColumns.includes(id)}
+            onCheckedChange={() => toggleColumn(id)}
+            closeOnClick={false}
+          >
+            {id === "status"
+              ? m.story_gantt_column_status()
+              : id === "assignee"
+                ? m.story_gantt_column_assignee()
+                : m.story_gantt_column_due()}
+          </DropdownMenuCheckboxItem>
+        ))}
+        <DropdownMenuCheckboxItem
+          checked={dependencyLines}
+          onCheckedChange={(checked) => setDependencyLines(checked === true)}
+          closeOnClick={false}
+        >
+          {m.story_gantt_dep_lines()}
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={scheduledOnly}
+          onCheckedChange={(checked) => setScheduledOnly(checked === true)}
+          closeOnClick={false}
+        >
+          {m.story_gantt_scheduled_only()}
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
+  const renderNoResources = useCallback(
+    () => (
+      <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+        {m.story_kanban_noStories()}
       </div>
+    ),
+    [],
+  );
 
-      <div ref={scrollRef} className="min-h-0 flex-1 overflow-auto">
-        <DragDropProvider onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-          <div className="relative">
-            {/* 刻度行 */}
-            <div ref={timelineRef} className="flex h-8 border-b">
-              {ticks.map((tick, i) => (
-                <div key={i} className="flex-1 border-r text-center text-xs text-muted-foreground">
-                  {tick.label}
-                </div>
-              ))}
-            </div>
+  // 组节点色点（R-11 渲染收口）：resource.color（CSS 变量色值）此前仅
+  // baseline band 消费，无基线的组（priority/assignee/labels/state）色值
+  // 不可见——经 reui renderResourceLabel 扩展点在组标题前补色点，叶子行
+  // 不渲染色点（状态色已由状态列徽章承载）
+  const renderResourceLabel = useCallback<
+    NonNullable<GanttProps<StoryGanttData>["renderResourceLabel"]>
+  >(({ resource, isGroup }) => {
+    if (!isGroup || !resource.color) {
+      return <span className="truncate">{resource.title}</span>;
+    }
+    return (
+      <span className="flex min-w-0 items-center gap-1.5">
+        <span
+          aria-hidden
+          data-slot="gantt-group-color-dot"
+          className="size-2 shrink-0 rounded-full"
+          style={{ background: resource.color }}
+        />
+        <span className="truncate">{resource.title}</span>
+      </span>
+    );
+  }, []);
 
-            {/* 需求行 */}
-            <div
-              className="relative"
-              style={virtualize ? { height: rowVirtualizer.getTotalSize() } : undefined}
-            >
-              {/* 今日竖线：放在与条形同参考宽度（left-40 right-0）的容器内，避免百分比基准不一致 */}
-              <div className="pointer-events-none absolute left-40 right-0 bottom-0 top-0">
-                {showToday && (
-                  <div
-                    className="absolute bottom-0 top-0 z-10 border-l-2 border-dashed border-primary/40"
-                    style={{ left: `${todayLeft}%` }}
-                  />
-                )}
-              </div>
-              {virtualize ? (
-                rowVirtualizer.getVirtualItems().map((virtualRow) => {
-                  const story = scheduled[virtualRow.index];
-                  const start = parseDate(story.startDate!);
-                  const end = story.targetDate ? parseDate(story.targetDate) : start;
-                  const left = (dayOffset(start) / totalDays) * 100;
-                  const width = Math.max(((dayOffset(end) - dayOffset(start) + 1) / totalDays) * 100, 2);
-                  return (
-                    <div
-                      key={story.id}
-                      className="absolute left-0 right-0 top-0 h-10 border-b"
-                      style={{ transform: `translateY(${virtualRow.start}px)` }}
-                    >
-                      <div className="absolute left-0 top-1/2 z-20 w-40 -translate-y-1/2 truncate px-2 text-xs">
-                        <button
-                          type="button"
-                          onClick={() => onOpenStory(story.id)}
-                          className="font-mono text-muted-foreground hover:text-foreground"
-                        >
-                          {story.identifier}
-                        </button>
-                      </div>
-                      <div className="absolute left-40 right-0 top-0 h-full">
-                        <GanttBar story={story} left={left} width={width} />
-                      </div>
-                    </div>
-                  );
-                })
-              ) : (
-                scheduled.map((story) => {
-                  const start = parseDate(story.startDate!);
-                  const end = story.targetDate ? parseDate(story.targetDate) : start;
-                  const left = (dayOffset(start) / totalDays) * 100;
-                  const width = Math.max(((dayOffset(end) - dayOffset(start) + 1) / totalDays) * 100, 2);
-                  return (
-                    <div key={story.id} className="relative h-10 border-b">
-                      <div className="absolute left-0 top-1/2 z-20 w-40 -translate-y-1/2 truncate px-2 text-xs">
-                        <button
-                          type="button"
-                          onClick={() => onOpenStory(story.id)}
-                          className="font-mono text-muted-foreground hover:text-foreground"
-                        >
-                          {story.identifier}
-                        </button>
-                      </div>
-                      <div className="absolute left-40 right-0 top-0 h-full">
-                        <GanttBar story={story} left={left} width={width} />
-                      </div>
-                    </div>
-                  );
-                })
-              )}
-              {scheduled.length === 0 && (
-                <div className="py-8 text-center text-sm text-muted-foreground">{m.story_timeline_noScheduled()}</div>
-              )}
-            </div>
+  // ── 无限滚动哨兵：gantt 的滚动 viewport 在 GanttView 内部，用覆盖层
+  // 镜像「内容末端」——哨兵钉在 (viewport 顶 + scrollHeight - scrollTop)，
+  // 滚到内容底部时进入浏览器视界触发 IntersectionObserver。⚠ root 必须
+  // 留空（隐式视口）：哨兵挂在 ganttHost 覆盖层，不是 scroll viewport 的
+  // DOM 后代——IO 规范对非后代 target 按空交集处理（实测 isIntersecting
+  // 恒 false），传 viewport 当 root 会让 loadMore 永不触发。
+  // 重挂仍以 viewport 元素身份为 key（seq 递增），不能用 key={scale}：
+  // 同一次 commit 内 child effect 先于本组件的重查 effect 执行，按 scale
+  // 重挂会让哨兵读到上一拍尚未更新的旧 viewport；seq 键让重挂落在新
+  // viewport 已写入的下一次 commit。
+  const ganttHostRef = useRef<HTMLDivElement | null>(null);
+  const sentinelSpotRef = useRef<HTMLDivElement | null>(null);
+  const [viewportState, setViewportState] = useState<{
+    el: HTMLElement | null;
+    seq: number;
+  }>({ el: null, seq: 0 });
+  useEffect(() => {
+    const vp =
+      ganttHostRef.current?.querySelector<HTMLElement>(
+        "[data-slot=gantt-timeline-pane] [data-slot=scroll-area-viewport]",
+      ) ?? null;
+    setViewportState((prev) =>
+      prev.el === vp ? prev : { el: vp, seq: prev.seq + 1 },
+    );
+  }, [scale]);
+  useEffect(() => {
+    const vp = viewportState.el;
+    const spot = sentinelSpotRef.current;
+    if (!vp || !spot) return;
+    const host = ganttHostRef.current;
+    const topOffset = host
+      ? vp.getBoundingClientRect().top - host.getBoundingClientRect().top
+      : 0;
+    // 行高恒定（h-7），effect 内缓存一次，不在滚动路径反复 getBoundingClientRect
+    const row = spot.firstElementChild;
+    const rowH = row ? row.getBoundingClientRect().height : 28;
+    const place = () => {
+      // 镜像上移一个行高（sentinel-geometry.ts 几何契约）：自然镜像
+      // raw = topOffset + (scrollHeight - scrollTop) 在全部滚动范围内恒在
+      // 覆盖层裁剪盒之外——按 raw 减 rowH 摆放，滚到最后 rowH 行程内行进入
+      // 盒内触发 loadMore；加载后 scrollHeight 增大使行整体退回盒外重新武装
+      spot.style.top = `${sentinelMirrorTop({
+        scrollTop: vp.scrollTop,
+        scrollHeight: vp.scrollHeight,
+        clientHeight: vp.clientHeight,
+        rowH,
+        topOffset,
+      })}px`;
+    };
+    place();
+    vp.addEventListener("scroll", place, { passive: true });
+    const ro = new ResizeObserver(place);
+    ro.observe(vp);
+    return () => {
+      vp.removeEventListener("scroll", place);
+      ro.disconnect();
+    };
+  }, [viewportState.el]);
 
-            {/* 未排期行 */}
-            <div className="border-t py-3">
-              <div className="mb-2 text-xs font-medium text-muted-foreground">{m.story_calendar_unscheduled({ count: unscheduled.length })}</div>
-              <div className="flex flex-wrap gap-2">
-                {unscheduled.map((s) => (
-                  <button
-                    key={s.id}
-                    type="button"
-                    onClick={() => onOpenStory(s.id)}
-                    className="rounded-md border px-2 py-1 text-xs hover:bg-accent"
-                  >
-                    {s.identifier} {s.name}
-                  </button>
-                ))}
-              </div>
+  return (
+    <div ref={ganttHostRef} className="relative flex h-full min-h-0 flex-col">
+      <Gantt
+        className="min-h-0 flex-1"
+        events={events}
+        resources={resources}
+        i18n={ganttI18n}
+        locale={ganttDateFnsLocale()}
+        scale={scale}
+        onScaleChange={setScale}
+        initialCenter="now"
+        columns={columns}
+        columnsMenu={settingsMenu}
+        dependencyLines={dependencyLines}
+        summaryBars
+        getSummaryProgress={ganttSummaryProgress}
+        collapsedGroups={collapsedGroups}
+        onCollapsedGroupsChange={setCollapsedGroups}
+        rowCheckboxes={false}
+        onEventUpdate={handleEventUpdate}
+        onEventClick={handleEventClick}
+        onResourceClick={handleResourceClick}
+        renderResourceLabel={renderResourceLabel}
+        renderNoResources={renderNoResources}
+      >
+        {/* 自定义组合（reui 默认组合不含日期选择器）：默认四件 + goToDate
+          入口——跳转日历是甘特导航验收项；children 形式替换默认组合，故
+          TooltipProvider 参数与 reui 默认实现保持一致 */}
+        <GanttNav>
+          <TooltipProvider delay={600} closeDelay={0} timeout={300}>
+            <GanttNavToday />
+            <GanttScaleSwitcher />
+            <div className="flex items-center">
+              <GanttNavPrev />
+              <GanttDatePicker />
+              <GanttNavNext />
             </div>
+            <GanttTitle />
+            <div className="grow" />
+          </TooltipProvider>
+        </GanttNav>
+        <GanttView />
+      </Gantt>
+      <div className="pointer-events-none absolute inset-0 z-20 overflow-hidden">
+        {viewportState.el && (
+          <div key={viewportState.seq} ref={sentinelSpotRef} className="absolute inset-x-0">
+            <InfiniteScrollSentinel
+              loadedAllLabel={m.story_loadedAll()}
+              onLoadMore={onLoadMore}
+              hasMore={hasMore}
+            />
           </div>
-          <DragOverlay dropAnimation={null}>
-            {dragSource ? (
-              <div className="truncate rounded bg-primary/90 px-2 text-xs text-primary-foreground shadow-lg">
-                {dragSource.identifier} {dragSource.name}
-              </div>
-            ) : null}
-          </DragOverlay>
-        </DragDropProvider>
-        <InfiniteScrollSentinel loadedAllLabel={m.story_loadedAll()} onLoadMore={onLoadMore} hasMore={hasMore} rootRef={scrollRef} />
+        )}
       </div>
     </div>
   );