@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/story-bugs-panel.tsx

@@ -0,0 +1,1090 @@
+// 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/>.
+
+// 需求详情「关联 BUG」面板——交互骨架照 StoryDetailTestCases（related-test-cases.tsx）：
+// Collapsible 头部（标题+计数徽章+chevron+右侧 AI 位预留+筛选 POP++关联按钮）
+// + 本地分组（state/severity/assignee/none）+ 行复选多选 + 底部批量条
+// （设置状态/严重度 + 移出/删除）+ 行尾更多菜单（移出关联）。
+// 数据源：listBugsByStoryFn 按 storyId 反查（单值关联，一次取全）；
+// 批量走 bulkUpdateBugsFn（状态/严重度）与 bulkUnlinkBugsFromStoryFn（移出）。
+import * as React from "react";
+import { useNavigate } from "@tanstack/react-router";
+import {
+  ArrowDownNarrowWide,
+  ArrowUpWideNarrow,
+  BrushCleaning,
+  Bug as BugIcon,
+  ChartNoAxesGantt,
+  Check,
+  ChevronDown,
+  MoreHorizontal,
+  Plus,
+  UserRound,
+  X,
+} from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { listBugsByStoryFn, bulkUnlinkBugsFromStoryFn } from "@/server/serverFns/bug/bug-story-bulk";
+import { bulkArchiveBugsFn, bulkDeleteBugsFn, bulkUpdateBugsFn } from "@/server/serverFns/bug/bug-crud";
+import { BUG_STATES, BUG_SEVERITIES, BUG_STATE_RANK, type BugState, type BugSeverity } from "@/shared/bug/constants";
+import { UserAvatar } from "@/components/shared-kit";
+import type { UserBrief, StoryEntityOverlay } from "@/components/story/types";
+import type { AvatarConfig } from "@allbluecn/kernel";
+import { BugSelectDialog } from "@/components/bug/select-bug-dialog";
+import { m } from "@/paraglide/messages.js";
+import { toast } from "@/components/ui/toast";
+import { toastError } from "@/lib/toast-error";
+import { cn } from "@/lib/utils";
+import { usePanelFrozenGroups } from "@/components/story/detail/story-detail-toolbar/use-panel-frozen-groups";
+import {
+  useStoryPanelOpen,
+  useStoryPanelGroupCollapsed,
+  useStoryPanelFilters,
+} from "@/lib/hooks/use-story-panel-open";
+
+type BugRow = {
+  id: string;
+  identifier: string;
+  title: string;
+  state: string;
+  severity: string;
+  assignee: { id: string; username: string; email: string; avatarConfig: unknown; bgShape: string | null; bgColor: string | null } | null;
+  labels: { id: string; name: string; color: string }[];
+  lastOccurAt: string;
+  updatedAt: string;
+};
+
+type StoryBugsGroupBy = "none" | "state" | "severity" | "assignee";
+type StoryBugsSubGroupBy = "none" | "state" | "severity" | "assignee";
+type StoryBugsOrderBy = "lastOccur" | "created" | "severity" | "state";
+type OrderDir = "asc" | "desc";
+
+interface StoryBugsFilters {
+  groupBy: StoryBugsGroupBy;
+  subGroupBy: StoryBugsSubGroupBy;
+  orderBy: StoryBugsOrderBy;
+  orderDir: OrderDir;
+}
+
+const STORY_BUGS_SEVERITY_RANK: Record<string, number> = Object.fromEntries(
+  BUG_SEVERITIES.map((s) => [s.value, s.rank]),
+);
+
+function sortBugs(list: BugRow[], orderBy: StoryBugsOrderBy, dir: OrderDir): BugRow[] {
+  const mul = dir === "asc" ? 1 : -1;
+  return [...list].sort((a, b) => {
+    let d = 0;
+    if (orderBy === "lastOccur") d = a.lastOccurAt.localeCompare(b.lastOccurAt);
+    else if (orderBy === "created") d = a.updatedAt.localeCompare(b.updatedAt);
+    else if (orderBy === "severity")
+      d = (STORY_BUGS_SEVERITY_RANK[a.severity] ?? 99) - (STORY_BUGS_SEVERITY_RANK[b.severity] ?? 99);
+    else d = (BUG_STATE_RANK[a.state as BugState] ?? 99) - (BUG_STATE_RANK[b.state as BugState] ?? 99);
+    return d * mul;
+  });
+}
+
+function subKeyOf(subGroupBy: StoryBugsSubGroupBy, b: BugRow): string {
+  switch (subGroupBy) {
+    case "state":
+      return b.state;
+    case "severity":
+      return b.severity;
+    case "assignee":
+      return b.assignee?.id ?? "unassigned";
+    default:
+      return "";
+  }
+}
+
+function subLabelOf(
+  subGroupBy: StoryBugsSubGroupBy,
+  key: string,
+  users: UserBrief[],
+): string {
+  switch (subGroupBy) {
+    case "state":
+      return BUG_STATES.find((s) => s.value === key)?.label() ?? key;
+    case "severity":
+      return BUG_SEVERITIES.find((s) => s.value === key)?.label() ?? key;
+    case "assignee":
+      if (key === "unassigned") return m.bug_storyPanel_unassigned();
+      return users.find((u) => u.id === key)?.username ?? key;
+    default:
+      return "";
+  }
+}
+
+interface StoryBugGroup {
+  key: string;
+  label: string;
+  items: BugRow[];
+  subGroups?: { key: string; label: string; items: BugRow[] }[];
+}
+
+function groupKeyOf(groupBy: StoryBugsGroupBy, b: BugRow): string {
+  switch (groupBy) {
+    case "state":
+      return b.state;
+    case "severity":
+      return b.severity;
+    case "assignee":
+      return b.assignee?.id ?? "unassigned";
+    default:
+      return "";
+  }
+}
+
+function groupLabelOf(groupBy: StoryBugsGroupBy, key: string): string {
+  switch (groupBy) {
+    case "state":
+      return BUG_STATES.find((s) => s.value === key)?.label() ?? key;
+    case "severity":
+      return BUG_SEVERITIES.find((s) => s.value === key)?.label() ?? key;
+    case "assignee":
+      return key === "unassigned" ? m.bug_storyPanel_unassigned() : key;
+    default:
+      return "";
+  }
+}
+
+export function StoryBugsPanel({
+  storyId,
+  projectId,
+  projectIcon,
+  users,
+  refreshKey = 0,
+  onOpenEntity,
+}: {
+  storyId: string;
+  projectId: string | null;
+  projectIcon?: string | null;
+  users?: UserBrief[];
+  /** 父级 bump（关联弹窗提交成功）触发重拉 */
+  refreshKey?: number;
+  /** peek 内叠加打开（传入时点击行在 peek 内打开，缺省整页跳转） */
+  onOpenEntity?: (entity: StoryEntityOverlay) => void;
+}) {
+  const [panelOpen, setPanelOpen] = useStoryPanelOpen(storyId, "bugs");
+  const navigate = useNavigate();
+  const [bugs, setBugs] = React.useState<BugRow[] | null>(null);
+  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set());
+  const [busy, setBusy] = React.useState(false);
+  const [filters, setFilters] = useStoryPanelFilters<StoryBugsFilters>(storyId, "bugs", {
+    groupBy: "none",
+    subGroupBy: "none",
+    orderBy: "lastOccur",
+    orderDir: "desc",
+  });
+  const [collapsed, setCollapsed] = useStoryPanelGroupCollapsed(storyId, "bugs");
+  const [linkDialogOpen, setLinkDialogOpen] = React.useState(false);
+  const [localRefresh, setLocalRefresh] = React.useState(0);
+
+  const refresh = React.useCallback(() => {
+    if (!projectId) return;
+    let cancelled = false;
+    // 打开 peek 会突发大量 RPC（各面板/行内编辑器并发拉取），dev SSR 可能丢请求
+    // （Failed to fetch）——失败自动重试（指数退避），全部失败才放弃
+    (async () => {
+      for (let attempt = 0; attempt < 3; attempt++) {
+        try {
+          const res: { items: BugRow[] } = await listBugsByStoryFn({
+            data: { storyId, take: 500 },
+          });
+          if (cancelled) return;
+          setBugs(res.items);
+          // 已不在列表中的选中 id 清掉（移出/删除后残留）
+          setSelectedIds((prev) => {
+            const ids = new Set(res.items.map((b) => b.id));
+            const next = new Set([...prev].filter((id) => ids.has(id)));
+            return next.size === prev.size ? prev : next;
+          });
+          return;
+        } catch {
+          if (attempt < 2) {
+            await new Promise((r) => setTimeout(r, 800 * (attempt + 1)));
+          }
+        }
+      }
+      if (!cancelled) setBugs([]);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, storyId]);
+
+  React.useEffect(() => {
+    const cleanup = refresh();
+    return cleanup;
+  }, [refresh, refreshKey, localRefresh]);
+
+  const groups = React.useMemo<StoryBugGroup[]>(() => {
+    const list = sortBugs(bugs ?? [], filters.orderBy, filters.orderDir);
+    if (list.length === 0) return [];
+    const bucketize = (items: BugRow[], dim: StoryBugsGroupBy | StoryBugsSubGroupBy) => {
+      const map = new Map<string, BugRow[]>();
+      for (const b of items) {
+        const key = dim === "none" ? "" : groupKeyOf(dim as StoryBugsGroupBy, b);
+        const arr = map.get(key) ?? [];
+        arr.push(b);
+        map.set(key, arr);
+      }
+      return map;
+    };
+    const orderKeys = (map: Map<string, BugRow[]>, dim: string) => {
+      const orderOf =
+        dim === "state"
+          ? BUG_STATES.map((s) => s.value)
+          : dim === "severity"
+            ? BUG_SEVERITIES.map((s) => s.value)
+            : null;
+      return [...map.entries()]
+        .sort((a, b) => {
+          if (orderOf) {
+            const ai = orderOf.indexOf(a[0] as never);
+            const bi = orderOf.indexOf(b[0] as never);
+            return (ai < 0 ? 99 : ai) - (bi < 0 ? 99 : bi);
+          }
+          return a[0].localeCompare(b[0], "zh");
+        })
+        .map(([key, items]) => ({ key, items }));
+    };
+    if (filters.groupBy === "none") {
+      // 不分组 → 单一「全部」组（表头照子需求 All：全选 + 折叠 + 计数）
+      const withSub = filters.subGroupBy !== "none";
+      const subGroups = withSub
+        ? orderKeys(bucketize(list, filters.subGroupBy), filters.subGroupBy).map((e) => ({
+            key: e.key,
+            label: subLabelOf(filters.subGroupBy, e.key, users ?? []),
+            items: e.items,
+          }))
+        : undefined;
+      return [{ key: "all", label: m.story_group_all(), items: withSub ? [] : list, subGroups }];
+    }
+    const topMap = bucketize(list, filters.groupBy);
+    return orderKeys(topMap, filters.groupBy).map((e) => {
+      const useSub = filters.subGroupBy !== "none" && filters.subGroupBy !== filters.groupBy;
+      const subGroups = useSub
+        ? orderKeys(bucketize(e.items, filters.subGroupBy), filters.subGroupBy).map((se) => ({
+            key: se.key,
+            label: subLabelOf(filters.subGroupBy, se.key, users ?? []),
+            items: se.items,
+          }))
+        : undefined;
+      return {
+        key: e.key,
+        label: groupLabelOf(filters.groupBy, e.key),
+        items: useSub ? [] : e.items,
+        subGroups,
+      };
+    });
+  }, [bugs, filters, users]);
+
+  const toggleBug = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const toggleGroup = (ids: string[]) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      const allChosen = ids.length > 0 && ids.every((id) => next.has(id));
+      if (allChosen) {
+        for (const id of ids) next.delete(id);
+      } else {
+        for (const id of ids) next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const toggleAll = () => {
+    setSelectedIds((prev) => {
+      const list = bugs ?? [];
+      const allChosen = list.length > 0 && list.every((b) => prev.has(b.id));
+      return allChosen ? new Set() : new Set(list.map((b) => b.id));
+    });
+  };
+
+  const computeGroupCheckState = (ids: string[]): boolean | "indeterminate" => {
+    if (ids.length === 0) return false;
+    let count = 0;
+    for (const id of ids) if (selectedIds.has(id)) count++;
+    if (count === ids.length) return true;
+    return count > 0 ? "indeterminate" : false;
+  };
+
+  const clearSelection = () => setSelectedIds(new Set());
+
+  const toggleCollapse = (key: string) => {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const handleBulkUnlink = async () => {
+    const ids = [...selectedIds];
+    if (ids.length === 0) return;
+    setBusy(true);
+    try {
+      await bulkUnlinkBugsFromStoryFn({ data: { bugIds: ids } });
+      toast.success(m.bug_storyPanel_unlinked({ count: ids.length }));
+      setLocalRefresh((k) => k + 1);
+      clearSelection();
+    } catch (e) {
+      toastError(e, m.bug_storyPanel_unlinkFailed());
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkState = async (state: BugState) => {
+    const ids = [...selectedIds];
+    if (ids.length === 0) return;
+    setBusy(true);
+    try {
+      await bulkUpdateBugsFn({ data: { bugIds: ids, patch: { state } } });
+      toast.success(m.bug_storyPanel_stateUpdated({ count: ids.length }));
+      setLocalRefresh((k) => k + 1);
+    } catch (e) {
+      toastError(e, m.bug_storyPanel_updateFailed());
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkSeverity = async (severity: BugSeverity) => {
+    const ids = [...selectedIds];
+    if (ids.length === 0) return;
+    setBusy(true);
+    try {
+      await bulkUpdateBugsFn({ data: { bugIds: ids, patch: { severity } } });
+      toast.success(m.bug_storyPanel_stateUpdated({ count: ids.length }));
+      setLocalRefresh((k) => k + 1);
+    } catch (e) {
+      toastError(e, m.bug_storyPanel_updateFailed());
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkArchive = async () => {
+    const ids = [...selectedIds];
+    if (ids.length === 0) return;
+    setBusy(true);
+    try {
+      const res: { archived: number } = await bulkArchiveBugsFn({ data: { bugIds: ids } });
+      toast.success(m.bug_storyPanel_archived({ count: res.archived }));
+      setLocalRefresh((k) => k + 1);
+      clearSelection();
+    } catch (e) {
+      toastError(e, m.bug_storyPanel_updateFailed());
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkDelete = async () => {
+    const ids = [...selectedIds];
+    if (ids.length === 0) return;
+    setBusy(true);
+    try {
+      const res: { deleted: number } = await bulkDeleteBugsFn({ data: { bugIds: ids } });
+      toast.success(m.bug_storyPanel_deleted({ count: res.deleted }));
+      setLocalRefresh((k) => k + 1);
+      clearSelection();
+    } catch (e) {
+      toastError(e, m.bug_storyPanel_updateFailed());
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleUnlinkOne = async (bugId: string) => {
+    try {
+      await bulkUnlinkBugsFromStoryFn({ data: { bugIds: [bugId] } });
+      toast.success(m.bug_storyPanel_unlinked({ count: 1 }));
+      setLocalRefresh((k) => k + 1);
+    } catch (e) {
+      toastError(e, m.bug_storyPanel_unlinkFailed());
+    }
+  };
+
+  // 冻结组头（同构子需求列表 children.tsx）：滚动容器 + 滚动容器外冻结层
+  const { scrollRef, scrollbarW, frozenGroupKey, frozenSubGroupKey, registerHeader, onScroll } =
+    usePanelFrozenGroups();
+
+  if (!projectId || !bugs || bugs.length === 0) return null;
+
+  const showSelect = selectedIds.size > 0;
+
+  const frozenGroup =
+    frozenGroupKey != null ? groups.find((g) => g.key === frozenGroupKey) : undefined;
+  const frozenSubGroup =
+    frozenGroup == null || frozenSubGroupKey == null
+      ? undefined
+      : frozenGroup.subGroups?.find((sg) => `${frozenGroup.key}/${sg.key}` === frozenSubGroupKey);
+
+  // 组头渲染（原位与冻结层共用同一函数，保证实现一致）
+  const renderGroupHeaderEl = (
+    g: (typeof groups)[number],
+    isCollapsed: boolean,
+    checkState: boolean | "indeterminate",
+    onToggleSelect: () => void,
+  ) => {
+    const stateMeta =
+      filters.groupBy === "state" ? BUG_STATES.find((s) => s.value === g.key) : null;
+    const severityMeta =
+      filters.groupBy === "severity" ? BUG_SEVERITIES.find((s) => s.value === g.key) : null;
+    const assignee =
+      filters.groupBy === "assignee" && g.key !== "unassigned"
+        ? (users ?? []).find((u) => u.id === g.key)
+        : null;
+    return (
+      <div className="flex h-full w-fit select-none items-center text-sm font-medium">
+        {showSelect && (
+          <Checkbox
+            checked={checkState === true}
+            indeterminate={checkState === "indeterminate"}
+            onCheckedChange={onToggleSelect}
+            className="ml-2 shrink-0"
+            aria-label={g.label}
+            onClick={(e) => e.stopPropagation()}
+          />
+        )}
+        <button
+          type="button"
+          className="flex h-full min-w-0 flex-1 select-none items-center gap-2 px-2 text-left hover:brightness-95"
+          onClick={() => toggleCollapse(g.key)}
+          aria-expanded={!isCollapsed}
+        >
+          <span className="flex items-center gap-1.5">
+            <ChevronDown
+              className={`size-3 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : ""}`}
+            />
+          </span>
+          {stateMeta ? (
+            <span className={cn("inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium", stateMeta.colorToken)}>
+              {stateMeta.label()}
+            </span>
+          ) : severityMeta ? (
+            <span className={cn("inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium", severityMeta.colorToken)}>
+              {severityMeta.label()}
+            </span>
+          ) : assignee ? (
+            <UserAvatar
+              name={assignee.username}
+              avatarConfig={(assignee.avatarConfig as AvatarConfig | null) ?? null}
+              bgShape="circle"
+              bgColor={assignee.bgColor}
+              size="xs"
+              className="shrink-0"
+            />
+          ) : filters.groupBy === "assignee" ? (
+            <UserRound className="size-4 shrink-0 text-muted-foreground" />
+          ) : null}
+          <span className="truncate">{g.label}</span>
+          <span className="text-xs font-normal text-muted-foreground">
+            {g.subGroups ? g.subGroups.length : g.items.length}
+          </span>
+        </button>
+      </div>
+    );
+  };
+  const renderSubHeaderEl = (
+    group: (typeof groups)[number],
+    sg: { key: string; label: string; items: BugRow[] },
+    isCollapsed: boolean,
+    checkState: boolean | "indeterminate",
+    onToggleSelect: () => void,
+  ) => {
+    const sgStateMeta = filters.subGroupBy === "state" ? BUG_STATES.find((x) => x.value === sg.key) : null;
+    const sgSeverityMeta = filters.subGroupBy === "severity" ? BUG_SEVERITIES.find((x) => x.value === sg.key) : null;
+    const sgAssignee = filters.subGroupBy === "assignee" && sg.key !== "unassigned" ? (users ?? []).find((u) => u.id === sg.key) : null;
+    return (
+      <div className="flex h-full w-fit select-none items-center pl-6 text-xs font-medium text-muted-foreground">
+        {showSelect && (
+          <Checkbox
+            checked={checkState === true}
+            indeterminate={checkState === "indeterminate"}
+            onCheckedChange={onToggleSelect}
+            className="ml-1 shrink-0"
+            aria-label={sg.label}
+            onClick={(e) => e.stopPropagation()}
+          />
+        )}
+        <button
+          type="button"
+          className="flex h-full min-w-0 flex-1 items-center gap-2 px-2 text-left hover:brightness-95"
+          onClick={() => toggleCollapse(`${group.key}/${sg.key}`)}
+          aria-expanded={!isCollapsed}
+        >
+          {sgStateMeta ? (
+            <span className={cn("inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium", sgStateMeta.colorToken)}>
+              {sgStateMeta.label()}
+            </span>
+          ) : sgSeverityMeta ? (
+            <span className={cn("inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium", sgSeverityMeta.colorToken)}>
+              {sgSeverityMeta.label()}
+            </span>
+          ) : sgAssignee ? (
+            <UserAvatar
+              name={sgAssignee.username}
+              avatarConfig={(sgAssignee.avatarConfig as AvatarConfig | null) ?? null}
+              bgShape="circle"
+              bgColor={sgAssignee.bgColor}
+              size="xs"
+              className="shrink-0"
+            />
+          ) : null}
+          <span className="truncate">{sg.label}</span>
+          <span className="text-xs font-normal text-muted-foreground">{sg.items.length}</span>
+        </button>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <Collapsible open={panelOpen} onOpenChange={setPanelOpen} data-testid="story-bugs-panel">
+        <CollapsibleTrigger
+          nativeButton={false}
+          render={
+            <div
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  (e.currentTarget as HTMLDivElement).click();
+                }
+              }}
+            />
+          }
+          className="group sticky top-0 z-20 flex w-full cursor-pointer select-none items-center gap-2 bg-[var(--detail-surface,var(--background))] pb-3 pt-4 text-xs font-semibold transition-colors hover:text-foreground"
+        >
+          <div className="flex items-center gap-1.5">
+            <span>{m.bug_storyPanel_title()}</span>
+            <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+              {bugs.length}
+            </span>
+            {/* Base UI Trigger 暴露 data-panel-open（非 Radix 的 data-state），折叠时 -rotate-90 转向右 */}
+            <ChevronDown className="size-3 text-muted-foreground transition-transform -rotate-90 group-data-[panel-open]:rotate-0" />
+          </div>
+          <div className="ml-auto flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+            {/* 筛选 POP（照子需求 DisplayOptionsBody：分组/子分组/排序三区）。
+                open 状态内聚在子组件，避免开合重渲染整列表（长列表卡顿根因） */}
+            <StoryBugsDisplayPopover
+              filters={filters}
+              onChange={(patch) => setFilters((prev) => ({ ...prev, ...patch }))}
+            />
+            {/* 关联 BUG（与选择子需求弹窗同交互） */}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="size-7 p-0"
+              data-testid="story-bugs-link-btn"
+              aria-label={m.bug_storyDialog_title()}
+              onClick={() => setLinkDialogOpen(true)}
+            >
+              <Plus className="size-3.5" />
+            </Button>
+          </div>
+        </CollapsibleTrigger>
+        {/* keepMounted：closed 不卸载行（长列表重挂载是展开卡顿根因） */}
+        <CollapsibleContent className="pb-2" keepMounted>
+          {/* 同构子需求列表：容器框架（max-h 内滚）+ 滚动层外冻结组头层 + 批量条常驻容器底 */}
+          <div className="relative flex max-h-[60vh] flex-col overflow-clip rounded-lg border">
+            <div ref={scrollRef} className="relative min-h-0 flex-1 overflow-auto" onScroll={onScroll}>
+              <div className="min-w-[44rem]">
+            {groups.map((group) => {
+              const isCollapsed = collapsed[group.key] ?? false;
+              const groupIds = (group.subGroups ? group.subGroups.flatMap((sg) => sg.items) : group.items).map((b) => b.id);
+              const checkState = computeGroupCheckState(groupIds);
+              return (
+                <React.Fragment key={group.key || "all"}>
+                  {group.key !== "" && (
+                    <div
+                      className="border-b border-border/40 bg-[color-mix(in_oklch,var(--muted)_50%,var(--card)_50%)]"
+                      style={{ height: 36 }}
+                      ref={registerHeader(group.key, 0)}
+                    >
+                      {/* 内容层 sticky left-0：横滚钉可视左缘；wrapper 同款实色垫底随横滚（纯色视觉不变） */}
+                      <div className="sticky left-0 h-full w-fit">
+                        {renderGroupHeaderEl(group, isCollapsed, checkState, () => toggleGroup(groupIds))}
+                      </div>
+                    </div>
+                  )}
+                  {!isCollapsed &&
+                    (group.subGroups
+                      ? group.subGroups.map((sg) => {
+                          const sgCollapsed = collapsed[`${group.key}/${sg.key}`] ?? false;
+                          const sgIds = sg.items.map((b) => b.id);
+                          const sgCheck = computeGroupCheckState(sgIds);
+                          return (
+                            <React.Fragment key={`${group.key}/${sg.key}`}>
+                              <div
+                                className="border-b border-border/40 bg-[color-mix(in_oklch,var(--muted)_30%,var(--card)_70%)]"
+                                style={{ height: 32 }}
+                                ref={registerHeader(`${group.key}/${sg.key}`, 1)}
+                              >
+                                <div className="sticky left-0 h-full w-fit">
+                                  {renderSubHeaderEl(group, sg, sgCollapsed, sgCheck, () => toggleGroup(sgIds))}
+                                </div>
+                              </div>
+                              {!sgCollapsed && sg.items.map((bug) => {
+                                const stateMeta = BUG_STATES.find((s) => s.value === bug.state);
+                                const severityMeta = BUG_SEVERITIES.find((s) => s.value === bug.severity);
+                                const isSelected = selectedIds.has(bug.id);
+                                return (
+                      <div
+                        key={bug.id}
+                        data-testid="bug-ref-row"
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => {
+                            if (onOpenEntity) {
+                              onOpenEntity({ kind: "bug", id: bug.id });
+                              return;
+                            }
+                            navigate({ to: "/bugs/$bugId", params: { bugId: bug.id } });
+                          }}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            navigate({ to: "/bugs/$bugId", params: { bugId: bug.id } });
+                          }
+                        }}
+                        className={cn(
+                          "group/row flex w-full cursor-pointer items-center gap-2.5 border-b border-border/40 px-2 py-2 text-left text-sm transition-colors",
+                          isSelected ? "bg-muted/20" : "bg-card hover:bg-accent/40",
+                        )}
+                      >
+                                  <Checkbox
+                                    checked={isSelected}
+                                    onCheckedChange={() => toggleBug(bug.id)}
+                                    onClick={(e) => e.stopPropagation()}
+                                    aria-label={bug.identifier}
+                                    className="shrink-0"
+                                  />
+                                  <span
+                                    className={cn(
+                                      "inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium",
+                                      stateMeta?.colorToken ?? "bg-muted text-muted-foreground",
+                                    )}
+                                  >
+                                    {stateMeta?.label() ?? bug.state}
+                                  </span>
+                                  <span
+                                    className={cn(
+                                      "inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium",
+                                      severityMeta?.colorToken ?? "bg-muted text-muted-foreground",
+                                    )}
+                                  >
+                                    {severityMeta?.label() ?? bug.severity}
+                                  </span>
+                                  <span className="shrink-0 font-mono text-xs text-muted-foreground">{bug.identifier}</span>
+                                  <span className="min-w-0 flex-1 truncate">{bug.title}</span>
+                                  {bug.assignee && (
+                                    <UserAvatar
+                                      name={bug.assignee.username}
+                                      avatarConfig={(bug.assignee.avatarConfig as AvatarConfig | null) ?? null}
+                                      bgShape="circle"
+                                      bgColor={bug.assignee.bgColor}
+                                      size="xs"
+                                      className="shrink-0"
+                                    />
+                                  )}
+                                </div>
+                              );
+                            })}
+                            </React.Fragment>
+                          );
+                        })
+                      : group.items.map((bug) => {
+                      const stateMeta = BUG_STATES.find((s) => s.value === bug.state);
+                      const severityMeta = BUG_SEVERITIES.find((s) => s.value === bug.severity);
+                      const isSelected = selectedIds.has(bug.id);
+                      return (
+                        <div
+                          key={bug.id}
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => {
+                            if (onOpenEntity) {
+                              onOpenEntity({ kind: "bug", id: bug.id });
+                              return;
+                            }
+                            navigate({ to: "/bugs/$bugId", params: { bugId: bug.id } });
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault();
+                              if (onOpenEntity) {
+                                onOpenEntity({ kind: "bug", id: bug.id });
+                                return;
+                              }
+                              navigate({ to: "/bugs/$bugId", params: { bugId: bug.id } });
+                            }
+                          }}
+                          className={cn(
+                            "group/row flex w-full cursor-pointer items-center gap-2.5 border-b border-border/40 px-2 py-2 text-left text-sm transition-colors last:border-b-0",
+                            isSelected ? "bg-muted/20" : "bg-card hover:bg-accent/40",
+                          )}
+                          data-testid="bug-ref-row"
+                        >
+                          {/* 行复选常驻（对齐测试用例面板 CaseRow：点行进详情，复选进多选） */}
+                          <Checkbox
+                            checked={isSelected}
+                            onCheckedChange={() => toggleBug(bug.id)}
+                            onClick={(e) => e.stopPropagation()}
+                            aria-label={bug.identifier}
+                            className="shrink-0"
+                          />
+                          <span
+                            className={cn(
+                              "inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium",
+                              stateMeta?.colorToken ?? "bg-muted text-muted-foreground",
+                            )}
+                          >
+                            {stateMeta?.label() ?? bug.state}
+                          </span>
+                          <span
+                            className={cn(
+                              "inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium",
+                              severityMeta?.colorToken ?? "bg-muted text-muted-foreground",
+                            )}
+                          >
+                            {severityMeta?.label() ?? bug.severity}
+                          </span>
+                          <span className="shrink-0 font-mono text-xs text-muted-foreground">{bug.identifier}</span>
+                          <span className="min-w-0 flex-1 truncate">{bug.title}</span>
+                          {bug.assignee && (
+                            <UserAvatar
+                              name={bug.assignee.username}
+                              avatarConfig={(bug.assignee.avatarConfig as AvatarConfig | null) ?? null}
+                              bgShape="circle"
+                              bgColor={bug.assignee.bgColor}
+                              size="xs"
+                              className="shrink-0"
+                            />
+                          )}
+                          <DropdownMenu>
+                            <DropdownMenuTrigger
+                              render={
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="size-7 shrink-0 p-0 opacity-0 group-hover/row:opacity-100"
+                                  aria-label={m.bug_storyPanel_more()}
+                                  onClick={(e) => e.stopPropagation()}
+                                />
+                              }
+                            >
+                              <MoreHorizontal className="size-3.5" />
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-36">
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  void handleUnlinkOne(bug.id);
+                                }}
+                              >
+                                <X className="mr-2 size-4" />
+                                {m.bug_storyPanel_unlinkOne()}
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                      );
+                    }))}
+                </React.Fragment>
+              );
+            })}
+              </div>
+            </div>
+            {/* 批量条常驻容器底（滚动层外）：横滚不移动、不穿透 PeekPanel（z-10） */}
+            {showSelect && (
+              <div
+                className="sticky bottom-0 z-10 flex shrink-0 items-center gap-2 border-t bg-[var(--detail-surface,var(--background))] px-3 py-2 text-sm"
+                data-testid="story-bugs-batchbar"
+              >
+                <div className="flex shrink-0 items-center gap-2">
+                  <Checkbox
+                    checked={bugs.length > 0 && selectedIds.size === bugs.length}
+                    indeterminate={selectedIds.size > 0 && selectedIds.size < bugs.length}
+                    onCheckedChange={toggleAll}
+                    aria-label={m.bug_storyDialog_selectAll()}
+                    className="-ml-1"
+                  />
+                  <span className="shrink-0 text-sm text-muted-foreground">
+                    {m.story_batchToolbar_selected({ count: selectedIds.size })}
+                  </span>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-7 text-muted-foreground hover:text-foreground"
+                    aria-label={m.story_batchToolbar_clear()}
+                    disabled={busy}
+                    onClick={clearSelection}
+                  >
+                    <BrushCleaning className="size-4" />
+                  </Button>
+                </div>
+                <div className="mx-1 h-4 w-px shrink-0 bg-border" />
+                <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto scrollbar-hide [&>*]:shrink-0">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger render={<Button variant="outline" size="sm" className="h-7 gap-1 text-xs" />}>
+                      <BugIcon className="size-3" />
+                      {m.bug_storyPanel_setState()}
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="w-36">
+                      {BUG_STATES.map((s) => (
+                        <DropdownMenuItem key={s.value} onClick={() => void handleBulkState(s.value)}>
+                          {s.label()}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger render={<Button variant="outline" size="sm" className="h-7 gap-1 text-xs" />}>
+                      <BugIcon className="size-3" />
+                      {m.bug_storyPanel_setSeverity()}
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="w-36">
+                      {BUG_SEVERITIES.map((s) => (
+                        <DropdownMenuItem key={s.value} onClick={() => void handleBulkSeverity(s.value)}>
+                          {s.label()}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => void handleBulkArchive()} disabled={busy}>
+                    {m.bug_storyPanel_archive()}
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => void handleBulkUnlink()} disabled={busy}>
+                    {m.bug_storyPanel_unlink()}
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 text-xs text-destructive" onClick={() => void handleBulkDelete()} disabled={busy}>
+                    {m.bug_storyPanel_delete()}
+                  </Button>
+                </div>
+              </div>
+            )}
+            {frozenGroup != null && (
+              <div className="absolute z-10 overflow-hidden border-b border-border/40 bg-[color-mix(in_oklch,var(--muted)_50%,var(--card)_50%)]" style={{ top: 0, left: 0, right: scrollbarW, height: 36 }}>
+                {renderGroupHeaderEl(
+                  frozenGroup,
+                  collapsed[frozenGroup.key] ?? false,
+                  computeGroupCheckState(
+                    (frozenGroup.subGroups ? frozenGroup.subGroups.flatMap((sg) => sg.items) : frozenGroup.items).map((b) => b.id),
+                  ),
+                  () => toggleGroup(
+                    (frozenGroup.subGroups ? frozenGroup.subGroups.flatMap((sg) => sg.items) : frozenGroup.items).map((b) => b.id),
+                  ),
+                )}
+              </div>
+            )}
+            {frozenGroup != null && frozenSubGroup != null && (
+              <div className="absolute z-10 overflow-hidden border-b border-border/40 bg-[color-mix(in_oklch,var(--muted)_30%,var(--card)_70%)]" style={{ top: 36, left: 0, right: scrollbarW, height: 32 }}>
+                {renderSubHeaderEl(
+                  frozenGroup,
+                  frozenSubGroup,
+                  collapsed[frozenSubGroupKey ?? ""] ?? false,
+                  computeGroupCheckState(frozenSubGroup.items.map((b) => b.id)),
+                  () => toggleGroup(frozenSubGroup.items.map((b) => b.id)),
+                )}
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      <BugSelectDialog
+        open={linkDialogOpen}
+        onOpenChange={setLinkDialogOpen}
+        storyId={storyId}
+        projectId={projectId}
+        projectIcon={projectIcon}
+        onLinked={() => setLocalRefresh((k) => k + 1)}
+      />
+    </>
+  );
+}
+
+
+/** 筛选 POP（照子需求 DisplayOptionsBody：分组/子分组/排序三区，radio 圆点行）。
+ * open 状态内聚于此：开合只重渲染本组件，不重渲染面板长列表（卡顿根因）。 */
+function StoryBugsDisplayPopover({
+  filters,
+  onChange,
+}: {
+  filters: StoryBugsFilters;
+  onChange: (patch: Partial<StoryBugsFilters>) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const groupOptions: { value: StoryBugsGroupBy; label: string }[] = [
+    { value: "none", label: m.bug_storyPanel_group_none() },
+    { value: "state", label: m.bug_storyPanel_group_state() },
+    { value: "severity", label: m.bug_storyPanel_group_severity() },
+    { value: "assignee", label: m.bug_storyPanel_group_assignee() },
+  ];
+  const subGroupOptions = groupOptions
+    .filter((o) => o.value !== filters.groupBy)
+    .map((o) => ({ value: o.value as StoryBugsSubGroupBy, label: o.label }));
+  const orderOptions: { value: StoryBugsOrderBy; label: string }[] = [
+    { value: "lastOccur", label: m.bug_storyPanel_order_lastOccur() },
+    { value: "created", label: m.bug_storyPanel_order_created() },
+    { value: "severity", label: m.bug_storyPanel_order_severity() },
+    { value: "state", label: m.bug_storyPanel_order_state() },
+  ];
+
+  const RadioRows = ({
+    value,
+    options,
+    disabled = false,
+    onSelect,
+  }: {
+    value: string;
+    options: { value: string; label: string }[];
+    disabled?: boolean;
+    onSelect: (v: string) => void;
+  }) => (
+    <div className="flex flex-col gap-0.5">
+      {options.map((o) => {
+        const selected = o.value === value;
+        return (
+          <button
+            key={o.value}
+            type="button"
+            disabled={disabled}
+            onClick={() => onSelect(o.value)}
+            className={cn(
+              "flex w-full items-center gap-2 rounded-sm px-1.5 py-1 text-left text-xs hover:bg-muted",
+              disabled && "cursor-not-allowed opacity-50",
+            )}
+          >
+            <span
+              className={cn(
+                "grid size-3.5 shrink-0 place-items-center rounded-full border",
+                selected ? "border-primary bg-primary text-primary-foreground" : "border-border",
+              )}
+            >
+              {selected && <Check className="size-2.5" strokeWidth={3} />}
+            </span>
+            <span className="text-foreground">{o.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="sm"
+            className="size-7 p-0"
+            aria-label={m.bug_storyPanel_display()}
+            data-testid="story-bugs-display"
+          />
+        }
+      >
+        <ChartNoAxesGantt className="size-3.5" />
+      </PopoverTrigger>
+      <PopoverContent className="w-75 p-0 duration-0 data-open:animate-none" align="start">
+        <div className="max-h-[60vh] overflow-y-auto">
+          <div data-section="groupBy" className="border-t px-3 py-2">
+            <div className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
+              <ChevronDown className="size-3" />
+              {m.bug_storyPanel_group()}
+            </div>
+            <RadioRows
+              value={filters.groupBy}
+              options={groupOptions}
+              onSelect={(v) => onChange({ groupBy: v as StoryBugsGroupBy })}
+            />
+          </div>
+          <div data-section="subGroupBy" className="border-t px-3 py-2">
+            <div className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
+              <ChevronDown className="size-3" />
+              {m.bug_storyPanel_subGroup()}
+            </div>
+            <RadioRows
+              value={filters.subGroupBy}
+              options={subGroupOptions}
+              disabled={filters.groupBy === "none"}
+              onSelect={(v) => onChange({ subGroupBy: v as StoryBugsSubGroupBy })}
+            />
+          </div>
+          <div data-section="orderBy" className="border-t px-3 py-2">
+            <div className="mb-1 flex items-center justify-between gap-1">
+              <div className="flex items-center gap-1 text-xs font-medium text-muted-foreground">
+                <ChevronDown className="size-3" />
+                {m.bug_storyPanel_order()}
+              </div>
+              <div className="flex items-center gap-0.5">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  aria-label={m.list_kit_display_asc()}
+                  className={cn(
+                    "size-6 rounded p-0 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
+                    filters.orderDir === "asc" && "bg-muted text-foreground",
+                  )}
+                  onClick={() => onChange({ orderDir: "asc" })}
+                >
+                  <ArrowDownNarrowWide className="size-3" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  aria-label={m.list_kit_display_desc()}
+                  className={cn(
+                    "size-6 rounded p-0 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
+                    filters.orderDir === "desc" && "bg-muted text-foreground",
+                  )}
+                  onClick={() => onChange({ orderDir: "desc" })}
+                >
+                  <ArrowUpWideNarrow className="size-3" />
+                </Button>
+              </div>
+            </div>
+            <RadioRows
+              value={filters.orderBy}
+              options={orderOptions}
+              onSelect={(v) => onChange({ orderBy: v as StoryBugsOrderBy })}
+            />
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}