@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/views/bug-list/batch-toolbar.tsx

@@ -15,9 +15,15 @@
 // 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 列表批量条（UI 对齐三期 BUG 线 PR-11 任务 36）：换 shared-kit
+// BatchToolbarShell（sticky 吸附 + 三态全选 + 清空 + AI 悬浮球抬升引用计数，
+// testcase 任务 28 换壳先例同构，story 批量条同形态），动作区保留归档/删除
+// （ConfirmDialog 确认）与批量编辑器簇（State/Severity/Assignee/Labels，
+// 编辑器以空值渲染，选择即确认）。busy 由父级 BugList 的批量操作接线：
+// 进行中 Shell busy=true + 归档/删除按钮 disabled（确认弹窗开门禁）。
 import { useState, type ReactElement } from "react";
-import { Archive, Trash2, BrushCleaning } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Archive, Trash2 } from "lucide-react";
+import { BatchToolbarShell } from "@/components/shared-kit/list-kit/batch-toolbar-shell";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { ConfirmDialog } from "@/components/confirm-dialog";
@@ -36,6 +42,7 @@ export interface BugBatchToolbarProps {
   selectedCount: number;
   totalLoaded: number;
   allSelected: boolean;
+  /** 批量操作进行中（父级接线）：Shell busy + 动作按钮 disabled */
   busy: boolean;
   /** 当前已选 bug id（确认弹窗直接回传给 onArchive/onDelete） */
   selectedIds: string[];
@@ -67,45 +74,28 @@ export function BugBatchToolbar({
 
   if (selectedCount === 0) return null;
 
-  const checked =
-    allSelected || selectedCount === totalLoaded
-      ? true
-      : selectedCount > 0
-        ? "indeterminate"
-        : false;
-
   return (
     <>
-      <div className="flex h-10 shrink-0 items-center gap-2 border-t bg-background px-3">
-        <Checkbox
-          checked={checked === true}
-          indeterminate={checked === "indeterminate"}
-          onCheckedChange={onToggleAll}
-          aria-label={m.bug_list_select_all({ label: "" })}
-        />
-        <span className="text-xs shrink-0 text-muted-foreground">{m.bug_list_selected_count({ count: selectedCount })}</span>
-        <Tooltip>
-          <TooltipTrigger render={<Button variant="ghost"
-              size="icon"
-              className="size-7 text-muted-foreground hover:text-foreground"
-              onClick={onClearSelection} />}>
-              <BrushCleaning className="size-4" />
-            </TooltipTrigger>
-          <TooltipContent side="top" className="text-xs">
-            {m.bug_list_clear_selection()}
-          </TooltipContent>
-        </Tooltip>
-        <div className="mx-1 h-4 w-px bg-border" />
-        <ToolbarIconButton label={m.bug_list_bulk_archive()} icon={Archive} disabled={busy} onClick={() => setArchiveOpen(true)} />
-        <ToolbarIconButton label={m.bug_list_bulk_delete()} icon={Trash2} disabled={busy} onClick={() => setDeleteOpen(true)} />
-        <div className="mx-1 h-4 w-px bg-border" />
-        <div className="flex min-w-0 items-center gap-0.5">
+      <BatchToolbarShell
+        selectedCount={selectedCount}
+        total={totalLoaded}
+        allSelected={allSelected}
+        onToggleAll={onToggleAll}
+        onClear={onClearSelection}
+        busy={busy}
+      >
+        <div className="flex shrink-0 items-center gap-2">
+          <ToolbarIconButton label={m.bug_list_bulk_archive()} icon={Archive} disabled={busy} onClick={() => setArchiveOpen(true)} />
+          <ToolbarIconButton label={m.bug_list_bulk_delete()} icon={Trash2} disabled={busy} onClick={() => setDeleteOpen(true)} />
+        </div>
+        <div className="mx-1 h-4 w-px shrink-0 bg-border" />
+        <div className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto scrollbar-hide [&>*]:shrink-0">
           <StateEditor value="open" onChange={(v) => onBulkUpdate({ state: v })} variant="button" />
           <SeverityEditor value="medium" onChange={(v) => onBulkUpdate({ severity: v })} variant="button" />
           <AssigneeEditor assignee={null} users={users} onChange={(v) => onBulkUpdate({ assigneeId: v })} variant="button" />
           <LabelsEditor labelIds={[]} labels={labels} onChange={(v) => onBulkUpdate({ labelIds: v })} variant="button" />
         </div>
-      </div>
+      </BatchToolbarShell>
 
       <ConfirmDialog
         open={archiveOpen}
@@ -137,6 +127,7 @@ export function BugBatchToolbar({
   );
 }
 
+/** icon 动作按钮（story/testcase batch-toolbar 同款：禁用无 Tooltip，可用带提示） */
 function ToolbarIconButton({
   label,
   icon: Icon,

package/src/components/bug/views/bug-list/group.tsx

@@ -32,6 +32,8 @@ const INLINE_CREATE_HEIGHT = 56;
 
 interface BugGroupHeaderProps {
   node: BugGroupNode;
+  /** 层级（0 = 一级组头、1 = 子组头；照 story VirtualGroupHeader 同构） */
+  depth: number;
   collapsed: boolean;
   collapseKey: string;
   onToggle: (key: string) => void;
@@ -42,11 +44,12 @@ interface BugGroupHeaderProps {
   showSelect: boolean;
 }
 
-export const BugGroupHeader = memo(function BugGroupHeader({ node, collapsed, collapseKey, onToggle, onCreate, sticky, selectState, onToggleSelect, showSelect }: BugGroupHeaderProps) {
+export const BugGroupHeader = memo(function BugGroupHeader({ node, depth, collapsed, collapseKey, onToggle, onCreate, sticky, selectState, onToggleSelect, showSelect }: BugGroupHeaderProps) {
   const textColor = node.color?.split(" ").find((c) => c.startsWith("text")) ?? "text-muted-foreground";
 
   return (
-    <div className={cn("flex h-full items-center", sticky ? "bg-[color-mix(in_oklch,var(--muted)_50%,var(--card)_50%)]" : "bg-muted/50")}>
+    // 冻结层用实色混底（50%/35% muted×card），原位行用透明度底——与 story 双层一致
+    <div className={cn("flex h-full items-center", sticky ? (depth === 0 ? "bg-[color-mix(in_oklch,var(--muted)_50%,var(--card)_50%)]" : "bg-[color-mix(in_oklch,var(--muted)_35%,var(--card)_65%)]") : depth === 0 ? "bg-muted/50" : "bg-muted/35", depth > 0 && "pl-4")}>
       {showSelect && (
         <Checkbox
           checked={selectState === true}
@@ -68,7 +71,8 @@ export const BugGroupHeader = memo(function BugGroupHeader({ node, collapsed, co
         <span>{node.label}</span>
         <span className="text-xs text-muted-foreground">{node.totalCount ?? node.total ?? node.items.length}</span>
       </button>
-      {onCreate && (
+      {/* 快捷创建仅一级组头持有（子组头 depth>0 不渲染，照 story 同构） */}
+      {depth === 0 && onCreate && (
         <button
           type="button"
           onClick={(e) => { e.stopPropagation(); onCreate(); }}
@@ -88,6 +92,9 @@ interface BugGroupTailRowProps {
   loading: boolean;
   groupBy: BugGroupKey;
   groupKey: string;
+  /** 二级分组维度与子组 key（任务 40；子组内创建时继承子组 state/severity 值） */
+  subGroupBy?: BugGroupKey;
+  subGroupKey?: string;
   /** 受控：组头 + 按钮与组尾快捷创建行共享开关（index 统一持有） */
   showEditor: boolean;
   onShowEditorChange: (v: boolean) => void;
@@ -100,21 +107,29 @@ interface BugGroupTailRowProps {
   onCreated?: () => void;
 }
 
-/** 组 key → 快捷创建继承值（规格 §6 入口 2：state/severity 分组下继承该组值） */
-function inheritFromGroup(groupBy: BugGroupKey, groupKey: string): { state: BugState; severity: BugSeverity } {
+/** 组 key → 快捷创建继承值（规格 §6 入口 2：state/severity 分组下继承该组值；
+ * 双层分组时子维度优先级高于顶层——子组内创建继承子组值） */
+function inheritFromGroup(
+  groupBy: BugGroupKey,
+  groupKey: string,
+  subGroupBy?: BugGroupKey,
+  subGroupKey?: string,
+): { state: BugState; severity: BugSeverity } {
+  const pick = (dim: BugGroupKey, key: string | undefined): string | null => {
+    if (!key) return null;
+    if (dim === "state" && BUG_STATES.some((s) => s.value === key)) return key;
+    if (dim === "severity" && BUG_SEVERITIES.some((s) => s.value === key)) return key;
+    return null;
+  };
   const state: BugState =
-    groupBy === "state" && BUG_STATES.some((s) => s.value === groupKey)
-      ? (groupKey as BugState)
-      : "open";
+    (pick(subGroupBy ?? "none", subGroupKey) ?? pick(groupBy, groupKey) ?? "open") as BugState;
   const severity: BugSeverity =
-    groupBy === "severity" && BUG_SEVERITIES.some((s) => s.value === groupKey)
-      ? (groupKey as BugSeverity)
-      : "medium";
+    (pick(subGroupBy ?? "none", subGroupKey) ?? pick(groupBy, groupKey) ?? "medium") as BugSeverity;
   return { state, severity };
 }
 
-export const BugGroupTailRow = memo(function BugGroupTailRow({ rowKey, hasMore, loading, groupBy, groupKey, showEditor, onShowEditorChange, setTailHeight, remeasure, projectId, users, labels, onLoadMore, onCreated }: BugGroupTailRowProps) {
-  const inherited = inheritFromGroup(groupBy, groupKey);
+export const BugGroupTailRow = memo(function BugGroupTailRow({ rowKey, hasMore, loading, groupBy, groupKey, subGroupBy, subGroupKey, showEditor, onShowEditorChange, setTailHeight, remeasure, projectId, users, labels, onLoadMore, onCreated }: BugGroupTailRowProps) {
+  const inherited = inheritFromGroup(groupBy, groupKey, subGroupBy, subGroupKey);
 
   useEffect(() => {
     const h = showEditor ? INLINE_CREATE_HEIGHT + 40 : 40;

package/src/components/bug/views/bug-list/index.tsx

@@ -15,7 +15,7 @@
 // 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 { useCallback, useMemo, useRef, useState, type CSSProperties } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import {
   bulkArchiveBugsFn,
@@ -30,7 +30,12 @@ import { BugGroupHeader, BugGroupTailRow } from "./group";
 import { BugListRow } from "./row";
 import { BugBatchToolbar } from "./batch-toolbar";
 import { computeGroupCheckState, toggleGroupSelection } from "./group-select";
+// 任务 40：吸顶判定消费共享 computeFrozenHeader（bug 侧首次与 story 统一冻结
+// 组头机制；对照 story-list/index.tsx 消费方式——吸附语义 threshold=scrollTop+1、
+// 冻结层覆盖式渲染在滚动容器外）。
+import { computeFrozenHeader, type FrozenHeader } from "@/components/shared-kit/list-kit/frozen-header";
 import { WavePhysicsLoader } from "@/components/shared-kit/loading/wave-physics-loader";
+import { useDeferredFlag } from "@/components/shared-kit/loading/use-deferred-flag";
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
 
@@ -39,9 +44,10 @@ const BUG_ROW_HEIGHT = 44;
 const OVERSCAN = 8;
 
 type FlatRow =
-  | { kind: "header"; key: string; node: BugGroupNode; isCollapsed: boolean }
-  | { kind: "bug"; key: string; bug: BugGroupNode["items"][number]; groupKey: string }
-  | { kind: "tail"; key: string; groupKey: string; hasMore: boolean; loading: boolean };
+  | { kind: "header"; key: string; node: BugGroupNode; depth: 0; isCollapsed: boolean }
+  | { kind: "subHeader"; key: string; node: BugGroupNode; groupKey: string; isCollapsed: boolean }
+  | { kind: "bug"; key: string; bug: BugGroupNode["items"][number]; groupKey: string; subKey?: string }
+  | { kind: "tail"; key: string; groupKey: string; subKey?: string; hasMore: boolean; loading: boolean };
 
 interface BugListProps {
   groups: PagedBugGroupNode[];
@@ -55,13 +61,15 @@ interface BugListProps {
   /** 行内编辑乐观原地更新（替代整表 refresh，保持未触发规则的行位置不变） */
   onPatchBug: (bugId: string, patch: BugPatch) => void;
   onOpenBug?: (id: string) => void;
-  onLoadMoreGroup?: (groupKey: string) => void;
+  onLoadMoreGroup?: (groupKey: string, subGroupKey?: string) => void;
 }
 
 export function BugList({ groups, isLoading = false, displayFilters, users, labels, projectId, onRefresh, onPatchBug, onOpenBug, onLoadMoreGroup }: BugListProps) {
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
   // 当前展开快捷创建行的组尾 key（组头 + 与组尾「添加」共享一个开关）
   const [creatorKey, setCreatorKey] = useState<string | null>(null);
+  // 首载动画延迟显示（follow-up A）：真实等待超 400ms 才出现，快请求直接见数据/空态
+  const deferredLoading = useDeferredFlag(isLoading && groups.length === 0);
 
   const toggleCollapse = useCallback((key: string) => {
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
@@ -73,23 +81,57 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
     tailHeights.current[key] = h;
   }, []);
 
-  // 单层分组的扁平行：header / bug / tail（BUG 无子组与子项，照 story use-flat-rows 裁剪）
+  // 双层分组的扁平行：header(depth 0) / subHeader(depth 1) / bug / tail。
+  // 折叠 key 用路径（`${groupKey}/${subKey}`），同名子组分散在不同父组下互不影响。
   const flatRows = useMemo<FlatRow[]>(() => {
     const rows: FlatRow[] = [];
     for (const g of groups) {
       const isCollapsed = collapsed[g.key] ?? false;
-      rows.push({ kind: "header", key: g.key, node: { ...g, totalCount: g.total ?? g.items.length }, isCollapsed });
-      if (isCollapsed) continue;
-      g.items.forEach((bug) => {
-        rows.push({ kind: "bug", key: bug.id, bug, groupKey: g.key });
-      });
       rows.push({
-        kind: "tail",
-        key: `${g.key}:tail`,
-        groupKey: g.key,
-        hasMore: !!g.hasMore,
-        loading: !!g.loading,
+        kind: "header",
+        key: g.key,
+        node: { ...g, totalCount: g.totalCount ?? g.total ?? g.items.length },
+        depth: 0,
+        isCollapsed,
       });
+      if (isCollapsed) continue;
+      const subs = g.subGroups ?? [];
+      if (subs.length > 0) {
+        for (const sg of subs) {
+          const flatKey = `${g.key}/${sg.key}`;
+          const subCollapsed = collapsed[flatKey] ?? false;
+          rows.push({
+            kind: "subHeader",
+            key: flatKey,
+            node: { ...sg, totalCount: sg.totalCount ?? sg.total ?? sg.items.length },
+            groupKey: g.key,
+            isCollapsed: subCollapsed,
+          });
+          if (subCollapsed) continue;
+          sg.items.forEach((bug) => {
+            rows.push({ kind: "bug", key: bug.id, bug, groupKey: g.key, subKey: sg.key });
+          });
+          rows.push({
+            kind: "tail",
+            key: `${flatKey}:tail`,
+            groupKey: g.key,
+            subKey: sg.key,
+            hasMore: !!sg.hasMore,
+            loading: !!sg.loading,
+          });
+        }
+      } else {
+        g.items.forEach((bug) => {
+          rows.push({ kind: "bug", key: bug.id, bug, groupKey: g.key });
+        });
+        rows.push({
+          kind: "tail",
+          key: `${g.key}:tail`,
+          groupKey: g.key,
+          hasMore: !!g.hasMore,
+          loading: !!g.loading,
+        });
+      }
     }
     return rows;
   }, [groups, collapsed]);
@@ -117,15 +159,20 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
     });
   }, [loadedBugIds]);
 
-  // 组 key → 组内全部 bug id，用于分组 checkbox 全选/全不选
+  // 组/子组路径 key → 组内全部 bug id（双层时父组键聚合嵌套子组，供分组
+  // checkbox 全选/全不选联动）。必须用路径 key：同名子组分散在不同父组下时
+  // node.key 会重复，导致选中反馈联动到其他组（story groupStoryIds 同款约束）
   const groupBugIds = useMemo(() => {
     const map = new Map<string, string[]>();
     for (const r of flatRows) {
-      if (r.kind === "bug") {
-        const ids = map.get(r.groupKey) ?? [];
+      if (r.kind !== "bug") continue;
+      const push = (key: string) => {
+        const ids = map.get(key) ?? [];
         ids.push(r.bug.id);
-        map.set(r.groupKey, ids);
-      }
+        map.set(key, ids);
+      };
+      push(r.subKey ? `${r.groupKey}/${r.subKey}` : r.groupKey);
+      if (r.subKey) push(r.groupKey);
     }
     return map;
   }, [flatRows]);
@@ -136,8 +183,18 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
     setSelectedIds((prev) => toggleGroupSelection(ids, prev));
   }, [groupBugIds]);
 
+  const bulkBusyRef = useRef(false);
+  const [bulkBusy, setBulkBusy] = useState(false);
+  // 批量操作忙态接线（任务 36）：进行中 Shell busy=true + 动作按钮 disabled；
+  // busyRef 同步镜像——编辑器簇不支持 disabled prop，入口守卫防并发重入
+  const setBusy = useCallback((v: boolean) => {
+    bulkBusyRef.current = v;
+    setBulkBusy(v);
+  }, []);
+
   const bulkArchive = useCallback(async (bugIds: string[]) => {
-    if (bugIds.length === 0) return;
+    if (bugIds.length === 0 || bulkBusyRef.current) return;
+    setBusy(true);
     try {
       const res = await bulkArchiveBugsFn({ data: { bugIds } });
       toast.success(
@@ -149,11 +206,14 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
       onRefresh();
     } catch (e) {
       toastError(e, m.bug_list_archive_failed());
+    } finally {
+      setBusy(false);
     }
-  }, [onRefresh]);
+  }, [onRefresh, setBusy]);
 
   const bulkDelete = useCallback(async (bugIds: string[]) => {
-    if (bugIds.length === 0) return;
+    if (bugIds.length === 0 || bulkBusyRef.current) return;
+    setBusy(true);
     try {
       const res = await bulkDeleteBugsFn({ data: { bugIds } });
       toast.success(m.bug_list_bulk_deleted({ count: res.deleted }));
@@ -161,12 +221,15 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
       onRefresh();
     } catch (e) {
       toastError(e, m.bug_list_delete_failed());
+    } finally {
+      setBusy(false);
     }
-  }, [onRefresh]);
+  }, [onRefresh, setBusy]);
 
   const bulkUpdate = useCallback(
     async (patch: BugPatch) => {
-      if (selectedIds.size === 0) return;
+      if (selectedIds.size === 0 || bulkBusyRef.current) return;
+      setBusy(true);
       try {
         await bulkUpdateBugsFn({ data: { bugIds: [...selectedIds], patch } });
         setSelectedIds(new Set());
@@ -174,9 +237,11 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
         onRefresh();
       } catch (e) {
         toastError(e, m.bug_list_bulk_update_failed());
+      } finally {
+        setBusy(false);
       }
     },
-    [selectedIds, onRefresh],
+    [selectedIds, onRefresh, setBusy],
   );
 
   const allSelected = loadedBugIds.length > 0 && selectedIds.size === loadedBugIds.length;
@@ -189,16 +254,41 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
       ),
     [flatRows],
   );
-  const activeStickyRef = useRef<{ headerIdx: number }>({ headerIdx: 0 });
+  const subGroupHeaderIndexes = useMemo(
+    () =>
+      flatRows.reduce<number[]>(
+        (acc, r, i) => (r.kind === "subHeader" ? [...acc, i] : acc),
+        [],
+      ),
+    [flatRows],
+  );
+  const parentGroupOfSub = useMemo(() => {
+    const map = new Map<number, number>();
+    let current = -1;
+    flatRows.forEach((r, i) => {
+      if (r.kind === "header") current = i;
+      if (r.kind === "subHeader" && current >= 0) map.set(i, current);
+    });
+    return map;
+  }, [flatRows]);
 
   const estimateSize = useCallback((i: number) => {
     const row = flatRows[i];
     if (!row) return HEADER_ROW_HEIGHT;
-    if (row.kind === "header") return HEADER_ROW_HEIGHT;
+    if (row.kind === "header" || row.kind === "subHeader") return HEADER_ROW_HEIGHT;
     if (row.kind === "bug") return BUG_ROW_HEIGHT;
     return tailHeights.current[row.key] ?? 40;
   }, [flatRows]);
 
+  // 吸顶判定（任务 40 前的内联 ref 自吸顶 + 行内 sticky 定位机制已移除，改
+  // 共享 computeFrozenHeader + 滚动容器外冻结层覆盖渲染，与 story 同构）。
+  // 冻结组头渲染在滚动容器外层，位置固定（组头 top:0、子组头 top:36），滚动时
+  // 唯一变化的是「当前活跃组头索引」——仅在跨越分组边界时改变。因此不存每帧
+  // 变化的 scrollTop，只存派生结果并去重：组内连续滚动零 setState 零整表重渲染。
+  const [frozenHeader, setFrozenHeader] = useState<FrozenHeader | null>(null);
+  const frozenHeaderRef = useRef<FrozenHeader | null>(null);
+  const frozenRafRef = useRef<number | null>(null);
+
   const rowVirtualizer = useVirtualizer({
     count: flatRows.length,
     getScrollElement: () => scrollRef.current,
@@ -206,13 +296,22 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
     overscan: OVERSCAN,
     rangeExtractor: useCallback(
       (range) => {
-        const activeHeaderIdx = [...groupHeaderIndexes].reverse().find((i) => range.startIndex >= i);
-        activeStickyRef.current = { headerIdx: activeHeaderIdx ?? 0 };
+        // 活跃（主/子）组头必须保持在虚拟化渲染窗口内，否则滚动容器外的冻结层
+        // 无内容可覆盖渲染（story 同款；此处只决定渲染集合，不承载吸顶判定）
+        const activeGroupIdx = [...groupHeaderIndexes].reverse().find((i) => range.startIndex >= i);
+        let activeSubIdx: number | null = null;
+        if (activeGroupIdx != null) {
+          const candidate = [...subGroupHeaderIndexes].reverse().find((i) => i <= range.startIndex);
+          if (candidate != null && parentGroupOfSub.get(candidate) === activeGroupIdx) {
+            activeSubIdx = candidate;
+          }
+        }
         const idx = new Set(defaultRangeExtractor(range));
-        if (activeHeaderIdx != null) idx.add(activeHeaderIdx);
+        if (activeGroupIdx != null) idx.add(activeGroupIdx);
+        if (activeSubIdx != null) idx.add(activeSubIdx);
         return [...idx].sort((a, b) => a - b);
       },
-      [groupHeaderIndexes],
+      [groupHeaderIndexes, subGroupHeaderIndexes, parentGroupOfSub],
     ),
     enabled: flatRows.length > 0,
   });
@@ -220,6 +319,43 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
   const totalHeight = rowVirtualizer.getTotalSize();
   const remeasureRows = useCallback(() => rowVirtualizer.measure(), [rowVirtualizer]);
 
+  // 冻结组头派生：读取当前滚动位置算出活跃（主/子）组头，仅在结果变化时提交 state
+  const recomputeFrozenHeader = useCallback(() => {
+    frozenRafRef.current = null;
+    const el = scrollRef.current;
+    if (!el) return;
+    // measurementsCache ?? []：虚拟化桩（测试/极端首帧）可能未提供测量缓存，
+    // computeFrozenHeader 对缺失测量返回 null（无冻结层），不抛错
+    const next = computeFrozenHeader(
+      el.scrollTop,
+      rowVirtualizer.measurementsCache ?? [],
+      groupHeaderIndexes,
+      subGroupHeaderIndexes,
+      parentGroupOfSub,
+    );
+    const prev = frozenHeaderRef.current;
+    if (prev?.groupIdx === next?.groupIdx && prev?.subIdx === next?.subIdx) return;
+    frozenHeaderRef.current = next;
+    setFrozenHeader(next);
+  }, [rowVirtualizer, groupHeaderIndexes, subGroupHeaderIndexes, parentGroupOfSub]);
+
+  // rAF 节流：每帧最多重算一次（滚动事件可能一帧多次触发）
+  const handleScroll = useCallback(() => {
+    if (frozenRafRef.current != null) return;
+    frozenRafRef.current = requestAnimationFrame(recomputeFrozenHeader);
+  }, [recomputeFrozenHeader]);
+
+  // 挂载 / 行测量变化（totalHeight 随测量增长）时同步冻结组头，保留首屏未滚动即显示
+  useEffect(() => {
+    recomputeFrozenHeader();
+  }, [recomputeFrozenHeader, totalHeight]);
+
+  useEffect(() => {
+    return () => {
+      if (frozenRafRef.current != null) cancelAnimationFrame(frozenRafRef.current);
+    };
+  }, []);
+
   const renderVirtualRow = (virtualRow: (typeof virtualRows)[number]) => {
     const row = flatRows[virtualRow.index];
     if (!row) return null;
@@ -230,34 +366,30 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
       width: "100%",
       transform: `translateY(${virtualRow.start}px)`,
     };
-    if (row.kind === "header") {
-      const isSticky = activeStickyRef.current.headerIdx === virtualRow.index;
-      const style: CSSProperties = isSticky
-        ? {
-            position: "sticky",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: HEADER_ROW_HEIGHT,
-            zIndex: 10,
+    if (row.kind === "header" || row.kind === "subHeader") {
+      // 组头行随内容流渲染；当前活跃组头由滚动容器外的冻结层覆盖渲染（见
+      // renderFrozenHeader），本行不再做行内自吸顶
+      const create = row.kind === "header"
+        ? () => {
+            // 折叠状态下先展开组再定位快捷创建行；双层分组下父组不直挂组尾，
+            // 快捷创建落在首个子组尾（继承完整 state×severity 组合值）
+            const firstSub = row.node.subGroups?.[0];
+            if (row.isCollapsed) {
+              setCollapsed((prev) => ({ ...prev, [row.key]: false }));
+            }
+            setCreatorKey(firstSub ? `${row.key}/${firstSub.key}:tail` : `${row.key}:tail`);
+            remeasureRows();
           }
-        : { ...baseStyle, height: HEADER_ROW_HEIGHT };
+        : undefined;
       return (
-        <div key={row.key} style={style} className="relative">
+        <div key={row.key} style={{ ...baseStyle, height: HEADER_ROW_HEIGHT }} className="relative">
           <BugGroupHeader
             node={row.node}
+            depth={row.kind === "header" ? 0 : 1}
             collapsed={row.isCollapsed}
             collapseKey={row.key}
             onToggle={toggleCollapse}
-            onCreate={() => {
-              // 折叠状态下先展开组再定位快捷创建行
-              if (row.isCollapsed) {
-                setCollapsed((prev) => ({ ...prev, [row.key]: false }));
-              }
-              setCreatorKey(`${row.key}:tail`);
-              remeasureRows();
-            }}
-            sticky={isSticky}
+            onCreate={create}
             selectState={computeGroupCheckState(groupBugIds.get(row.key) ?? [], selectedIds)}
             onToggleSelect={() => toggleGroup(row.key)}
             showSelect={selectedIds.size > 0}
@@ -291,6 +423,8 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
             loading={row.loading}
             groupBy={displayFilters.groupBy}
             groupKey={row.groupKey}
+            subGroupBy={displayFilters.subGroupBy}
+            subGroupKey={row.subKey}
             showEditor={creatorKey === row.key}
             onShowEditorChange={(v) => setCreatorKey(v ? row.key : null)}
             setTailHeight={setTailHeight}
@@ -298,7 +432,7 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
             projectId={projectId}
             users={users}
             labels={labels}
-            onLoadMore={() => onLoadMoreGroup?.(row.groupKey)}
+            onLoadMore={() => onLoadMoreGroup?.(row.groupKey, row.subKey)}
             onCreated={onRefresh}
           />
         </div>
@@ -307,13 +441,37 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
     return null;
   };
 
+  const renderFrozenHeader = (idx: number, top: number, depth: number, zIndex: number) => {
+    const row = flatRows[idx];
+    if (!row || (row.kind !== "header" && row.kind !== "subHeader")) return null;
+    return (
+      <div
+        key={row.key}
+        className="absolute inset-x-0 overflow-hidden"
+        style={{ top, zIndex, height: HEADER_ROW_HEIGHT }}
+      >
+        <BugGroupHeader
+          node={row.node}
+          depth={depth}
+          collapsed={row.isCollapsed}
+          collapseKey={row.key}
+          onToggle={toggleCollapse}
+          sticky
+          selectState={computeGroupCheckState(groupBugIds.get(row.key) ?? [], selectedIds)}
+          onToggleSelect={() => toggleGroup(row.key)}
+          showSelect={selectedIds.size > 0}
+        />
+      </div>
+    );
+  };
+
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card">
-      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
+    <div className="relative flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card">
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto" onScroll={handleScroll}>
         <div style={{ height: totalHeight, position: "relative" }}>
           {virtualRows.map((virtualRow) => renderVirtualRow(virtualRow))}
         </div>
-        {isLoading && groups.length === 0 && (
+        {isLoading && groups.length === 0 && deferredLoading && (
           <div className="flex flex-col items-center gap-3 py-12" aria-busy="true">
             <WavePhysicsLoader />
             <p className="text-sm text-muted-foreground">{m.bug_list_loading_data()}</p>
@@ -325,11 +483,17 @@ export function BugList({ groups, isLoading = false, displayFilters, users, labe
           </div>
         )}
       </div>
+      {frozenHeader && (
+        <>
+          {frozenHeader.subIdx != null && renderFrozenHeader(frozenHeader.subIdx, HEADER_ROW_HEIGHT, 1, 9)}
+          {renderFrozenHeader(frozenHeader.groupIdx, 0, 0, 10)}
+        </>
+      )}
       <BugBatchToolbar
         selectedCount={selectedIds.size}
         totalLoaded={loadedBugIds.length}
         allSelected={allSelected}
-        busy={false}
+        busy={bulkBusy}
         selectedIds={loadedBugIds.filter((id) => selectedIds.has(id))}
         users={users}
         labels={labels}

package/src/components/bug/views/bug-list/row.tsx

@@ -29,6 +29,7 @@ import type { BugDisplayProperty } from "../../display/types";
 import type { BugPatch } from "../../display/use-paged-bug-groups";
 import { StateEditor, SeverityEditor, AssigneeEditor, DateEditor, LabelsEditor } from "../../inline-editors";
 import { cn } from "@/lib/utils";
+import { EntityPresenceBadge } from "@/components/collab/entity-presence-badge";
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
 
@@ -107,7 +108,9 @@ export const BugListRow = memo(function BugListRow({ bug, users, labels, propert
         aria-label={m.bug_row_select_bug({ title: bug.title })}
         className={cn("shrink-0 transition-opacity", selected ? "opacity-100" : "opacity-0 group-hover:opacity-100")}
       />
-      <span className="font-mono text-xs text-muted-foreground shrink-0">{bug.identifier}</span>
+      {properties.includes("id") && (
+        <span className="font-mono text-xs text-muted-foreground shrink-0">{bug.identifier}</span>
+      )}
       {editingTitle ? (
         <input
           ref={titleInputRef}
@@ -150,6 +153,9 @@ export const BugListRow = memo(function BugListRow({ bug, users, labels, propert
         </div>
       )}
 
+      {/* 在看成员徽标（§7.1 行级 presence）：行 hover 渐显，无在看者不渲染 */}
+      <EntityPresenceBadge module="bugs" route={`/bugs/${bug.id}`} />
+
       {properties.includes("severity") && (
         <SeverityEditor value={bug.severity} onChange={setSeverity} variant="button" />
       )}