@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/display/use-paged-bug-groups.ts

@@ -15,9 +15,11 @@
 // 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 分组列表数据 hook（照 use-paged-story-groups.ts 单层分组裁剪：BUG 无子组维度）。
-// 组查询 + 组内分页（signature 防过期）+ 行内编辑乐观更新三档（原位替换/组内重插/回退 refresh）。
-import { useMemo } from "react";
+// BUG 分组列表数据 hook（照 use-paged-story-groups.ts 结构；任务 40 起支持双层
+// 分组：subGroupBy ≠ none 时按顶层组枚举子组 keys 并发加载首屏，组内条目分页
+// 走 (groupKey, subGroupKey) 容器定位）。组查询 + 组内分页（signature 防过期）+
+// 行内编辑乐观更新三档（原位替换/组内重插/回退 refresh）。
+import { useCallback, useMemo } from "react";
 import { usePagedGroupsCore } from "@/hooks/use-paged-groups";
 import {
   listBugGroupsFn,
@@ -46,19 +48,21 @@ export interface BugPatch {
   lastOccurAt?: string | null;
 }
 
-/** BUG 组节点（照 GroupNode 裁剪：无子组/无 icon 之外的展示概念） */
+/** BUG 组节点（照 GroupNode：任务 40 起双层分组带 subGroups） */
 export interface BugGroupNode {
   key: string;
   label: string;
   color?: string;
   items: BugListItem[];
+  /** 二级子组（subGroupBy ≠ none 时父组不直接装 item，照 story 同构） */
+  subGroups?: BugGroupNode[];
   /** 服务端分页：该组总数 */
   total?: number;
   /** 服务端分页：是否还有下一页 */
   hasMore?: boolean;
   /** 服务端分页：正在加载 */
   loading?: boolean;
-  /** 汇总计数（单层分组下 = total） */
+  /** 汇总计数（双层分组下 = 各子组 total 之和；单层 = total） */
   totalCount?: number;
 }
 
@@ -135,6 +139,8 @@ type PatchContext = {
   users: UserBrief[];
   labels: { id: string; name: string; color: string }[];
   groupBy: BugGroupKey;
+  /** 二级分组维度（none = 单层；决定行定位先扫子组再扫顶层直挂） */
+  subGroupBy: BugGroupKey;
   orderBy: BugOrderKey;
   orderDir: "asc" | "desc";
 };
@@ -214,8 +220,9 @@ function reinsert(
 /**
  * 行内编辑乐观更新（三档）：
  * - 未触发分组/排序规则 → 原位替换（位置不变）
- * - 仅触发排序规则 → 组内移除重插
- * - 触发分组规则 → 返回 "refresh" 交给全量重拉
+ * - 仅触发排序规则 → 容器内（子组或顶层组）移除重插
+ * - 触发分组规则（任一层）→ 返回 "refresh" 交给全量重拉（bug 既有口径：
+ *   目标组可能未显示，客户端不精确挪组，refresh 校正）
  */
 function applyPatchToGroups(
   groups: PagedBugGroupNode[],
@@ -224,10 +231,43 @@ function applyPatchToGroups(
   ctx: PatchContext,
 ): PatchResult {
   for (let gi = 0; gi < groups.length; gi++) {
-    const idx = groups[gi].items.findIndex((b) => b.id === bugId);
-    if (idx < 0) continue;
-    const nextBug = applyBugPatch(groups[gi].items[idx], patch, ctx);
     const g = groups[gi];
+    // 双层模式：先扫子组（父组不直接装 item）
+    const subGroups = g.subGroups ?? [];
+    for (let si = 0; si < subGroups.length; si++) {
+      const idx = subGroups[si].items.findIndex((b) => b.id === bugId);
+      if (idx < 0) continue;
+      const nextBug = applyBugPatch(subGroups[si].items[idx], patch, ctx);
+      const topTriggered = patchTouches(GROUP_TRIGGER_FIELD[ctx.groupBy], patch);
+      const subTriggered = patchTouches(GROUP_TRIGGER_FIELD[ctx.subGroupBy], patch);
+      if (topTriggered || subTriggered) return "refresh";
+      const orderTrigger = patchTouches(ORDER_TRIGGER_FIELD[ctx.orderBy] ?? null, patch);
+      if (!orderTrigger) {
+        // 原位替换
+        return groups.map((grp, i) =>
+          i !== gi ? grp : {
+            ...grp,
+            subGroups: (grp.subGroups ?? []).map((sg, j) =>
+              j !== si ? sg : { ...sg, items: sg.items.map((b) => (b.id === nextBug.id ? nextBug : b)) },
+            ),
+          },
+        );
+      }
+      // 容器内移除重插（分组不变，total/totalCount 不变）
+      return groups.map((grp, i) =>
+        i !== gi ? grp : {
+          ...grp,
+          subGroups: (grp.subGroups ?? []).map((sg, j) =>
+            j !== si
+              ? sg
+              : { ...sg, items: reinsert(sg.items, nextBug.id, nextBug, ctx.orderBy, ctx.orderDir) },
+          ),
+        },
+      );
+    }
+    const idx = g.items.findIndex((b) => b.id === bugId);
+    if (idx < 0) continue;
+    const nextBug = applyBugPatch(g.items[idx], patch, ctx);
     const trigger = GROUP_TRIGGER_FIELD[ctx.groupBy];
     if (patchTouches(trigger, patch)) {
       // 分组维度被编辑：目标组可能未显示（showEmptyGroups=false 的空组），交给 refresh
@@ -270,7 +310,8 @@ function resolveBugGroupColor(key: string, groupBy: BugGroupKey): string | undef
 
 /**
  * BUG 分组列表 hook：
- * - 单层分组并行拉取（组 keys + 全组首屏 items 1 个 RTT）
+ * - 分组并行拉取（组 keys + 全组首屏 items 1 个 RTT；单层走批量预取，
+ *   双层按顶层组枚举子组并发加载首屏，照 story 二级形态）
  * - signature 防过期：过滤/分组/分页参数变化即整体重置，过期响应按 sig 丢弃
  * - patchBug 三档乐观更新（见 applyPatchToGroups）
  */
@@ -278,13 +319,15 @@ export function usePagedBugGroups(args: PagedBugsArgs): {
   groups: PagedBugGroupNode[];
   isLoading: boolean;
   /** 返回本次取页的 Promise（无更多/加载中/组缺失时同步返回）：供表格哨兵聚合后清 loading */
-  loadMore: (groupKey: string) => void | Promise<unknown>;
+  loadMore: (groupKey: string, subGroupKey?: string) => void | Promise<unknown>;
   refresh: () => void;
-  /** 行内编辑乐观更新：未触发分组/排序规则时保持位置原地替换，仅触发排序时组内重插，触发分组时回退全量 refresh */
+  /** 行内编辑乐观更新：未触发分组/排序规则时保持位置原地替换，仅触发排序时容器内重插，触发分组时回退全量 refresh */
   patchBug: (bugId: string, patch: BugPatch) => void;
 } {
   const { filters, conditions, display, users, labels } = args;
   const groupBy = display.groupBy;
+  // 二级分组维度（任务 40；存量持久化偏好缺该键时回落 none）
+  const subGroupBy = display.subGroupBy ?? "none";
   const pageSize = display.pageSize;
 
   const sig = useMemo(
@@ -293,15 +336,17 @@ export function usePagedBugGroups(args: PagedBugsArgs): {
         filters,
         conditions,
         groupBy,
+        subGroupBy,
         display.orderBy,
         display.orderDir,
         pageSize,
       ]),
-    [filters, conditions, groupBy, display.orderBy, display.orderDir, pageSize],
+    [filters, conditions, groupBy, subGroupBy, display.orderBy, display.orderDir, pageSize],
   );
 
   const core = usePagedGroupsCore<PagedBugGroupNode, BugListItem, {
     groupBy: BugGroupKey;
+    subGroupBy: BugGroupKey;
     pageSize: number;
     orderBy: BugOrderKey;
     orderDir: "asc" | "desc";
@@ -311,6 +356,7 @@ export function usePagedBugGroups(args: PagedBugsArgs): {
     minLoadingMs: args.minLoadingMs,
     request: {
       groupBy,
+      subGroupBy,
       pageSize,
       orderBy: display.orderBy,
       orderDir: display.orderDir,
@@ -318,15 +364,18 @@ export function usePagedBugGroups(args: PagedBugsArgs): {
     },
     loadInitial: async () => {
       const base = buildGroupParams(filters, conditions);
+      // 单层分组（state/severity/assignee/createdBy）：组 keys 与首屏 items 并行拉取，1 个 RTT 完成首屏
+      const isSingleLayer = subGroupBy === "none" && groupBy !== "none";
+      const ctx = { users };
+
       const [groupInfosResult, preloadedItems] = await Promise.all([
         groupBy === "none"
           ? Promise.resolve({ groups: [{ key: UNGROUPED_KEY, total: 0 }] })
           : listBugGroupsFn({
-              data: { ...base, groupBy, showEmptyGroups: false },
+              data: { ...base, groupBy, showEmptyGroups: display.showEmptyGroups ?? false },
             }),
-        groupBy === "none"
-          ? Promise.resolve(null)
-          : listAllGroupsItemsFn({
+        isSingleLayer
+          ? listAllGroupsItemsFn({
               data: {
                 ...base,
                 groupBy,
@@ -336,25 +385,79 @@ export function usePagedBugGroups(args: PagedBugsArgs): {
                 take: pageSize,
                 groupCount: estimateGroupCount(groupBy, users),
               },
-            }),
+            })
+          : Promise.resolve(null),
       ]);
       const groupInfos = groupInfosResult.groups as PagedBugGroupNode[];
-      const ctx = { users };
 
       const scaffolds: PagedBugGroupNode[] = groupInfos.map((g: PagedBugGroupNode) => ({
         key: g.key,
         label: groupBy === "none" ? m.bug_group_all() : resolveBugGroupLabel(g.key, groupBy, ctx),
         color: resolveBugGroupColor(g.key, groupBy),
         items: [],
+        subGroups: [],
         total: g.total,
       }));
 
-      if (groupBy !== "none" && preloadedItems) {
+      if (isSingleLayer && preloadedItems) {
         const itemsByGroup = preloadedItems.grouped as Record<string, BugListItem[]>;
         scaffolds.forEach((s) => {
           s.items = itemsByGroup[s.key] ?? [];
           s.hasMore = s.total != null ? s.items.length < s.total : s.items.length >= pageSize;
         });
+      } else if (subGroupBy !== "none") {
+        // 双层模式：按顶层组枚举子组 keys（带父组过滤），并发加载各子组首屏；
+        // 父组不直接装 item，totalCount = 各子组 total 之和（照 story 同构）
+        await Promise.all(
+          scaffolds.map(async (g) => {
+            const subGroupsInfo = (
+              await listBugGroupsFn({
+                data: {
+                  ...base,
+                  groupBy: subGroupBy,
+                  showEmptyGroups: display.showEmptyGroups ?? false,
+                  parentGroupBy: groupBy,
+                  parentGroupKey: g.key,
+                },
+              })
+            ).groups as PagedBugGroupNode[];
+            const subScaffolds: PagedBugGroupNode[] = subGroupsInfo.map((sg) => ({
+              key: sg.key,
+              label: resolveBugGroupLabel(sg.key, subGroupBy, ctx),
+              color: resolveBugGroupColor(sg.key, subGroupBy),
+              items: [],
+              total: sg.total,
+            }));
+            const subLoaded = await Promise.all(
+              subScaffolds.map((sg) =>
+                listBugsInGroupFn({
+                  data: {
+                    ...base,
+                    groupBy,
+                    groupKey: g.key,
+                    subGroupBy,
+                    subGroupKey: sg.key,
+                    orderBy: display.orderBy,
+                    orderDir: display.orderDir,
+                    skip: 0,
+                    take: pageSize,
+                  },
+                }).catch(() => ({ items: [] as BugListItem[], total: sg.total ?? 0, hasMore: false })),
+              ),
+            );
+            subLoaded.forEach((res, i: number) => {
+              subScaffolds[i]!.items = res.items;
+              subScaffolds[i]!.total = res.total;
+              subScaffolds[i]!.hasMore = res.hasMore;
+            });
+            g.subGroups = subScaffolds;
+            g.totalCount = subScaffolds.reduce((sum, sg) => sum + (sg.total ?? sg.items.length), 0);
+            // 父组 total 必须随子组聚合回写：groupBy="none" 时脚手架固定 total=0（非
+            // undefined），消费面 `g.total ?? g.items.length` 对 0 不回落 → 工具栏计数
+            // 恒 0 + total===0 触发整页「还没有 BUG」假空态（数据实际已正常拉取）
+            g.total = g.totalCount;
+          }),
+        );
       } else {
         // 无分组：单「全部」组拉首屏
         const loaded = await Promise.all(
@@ -373,33 +476,66 @@ export function usePagedBugGroups(args: PagedBugsArgs): {
           ),
         );
         loaded.forEach((res, i: number) => {
-          scaffolds[i].items = res.items;
-          scaffolds[i].total = res.total;
-          scaffolds[i].hasMore = res.hasMore;
+          scaffolds[i]!.items = res.items;
+          scaffolds[i]!.total = res.total;
+          scaffolds[i]!.hasMore = res.hasMore;
         });
       }
 
       return scaffolds;
     },
-    fetchPage: (req, groupKey, _subGroupKey, skip) =>
+    fetchPage: (req, groupKey, subGroupKey, skip) =>
       listBugsInGroupFn({
         data: {
           ...req.base,
           groupBy: req.groupBy,
           groupKey,
+          subGroupBy: subGroupKey ? req.subGroupBy : "none",
+          subGroupKey: subGroupKey ?? "",
           orderBy: req.orderBy,
           orderDir: req.orderDir,
           skip,
           take: req.pageSize,
         },
       }),
-    findContainer: (groups, groupKey) => groups.find((g) => g.key === groupKey) ?? null,
-    containerLoadKey: (groupKey) => groupKey,
-    setLoading: (groups, groupKey, _subGroupKey, loading) =>
-      groups.map((g) => (g.key === groupKey ? { ...g, loading } : g)),
-    mergePage: (groups, groupKey, _subGroupKey, page) =>
+    findContainer: (groups, groupKey, subGroupKey) => {
+      const group = groups.find((g) => g.key === groupKey);
+      if (!group) return null;
+      return subGroupKey ? group.subGroups?.find((sg) => sg.key === subGroupKey) ?? null : group;
+    },
+    containerLoadKey: (groupKey, subGroupKey) => (subGroupKey ? `${groupKey}/${subGroupKey}` : groupKey),
+    setLoading: (groups, groupKey, subGroupKey, loading) =>
+      groups.map((g) => {
+        if (g.key !== groupKey) return g;
+        if (subGroupKey) {
+          return {
+            ...g,
+            subGroups: (g.subGroups ?? []).map((sg) =>
+              sg.key === subGroupKey ? { ...sg, loading } : sg,
+            ),
+          };
+        }
+        return { ...g, loading };
+      }),
+    mergePage: (groups, groupKey, subGroupKey, page) =>
       groups.map((x) => {
         if (x.key !== groupKey) return x;
+        if (subGroupKey) {
+          const updatedSubGroups = (x.subGroups ?? []).map((sg) => {
+            if (sg.key !== subGroupKey) return sg;
+            const known = new Set(sg.items.map((b) => b.id));
+            const fresh = page.items.filter((b: BugListItem) => !known.has(b.id));
+            return {
+              ...sg,
+              items: [...sg.items, ...fresh],
+              total: page.total,
+              hasMore: page.hasMore,
+              loading: false,
+            };
+          });
+          const newTotalCount = updatedSubGroups.reduce((sum, sg) => sum + (sg.total ?? sg.items.length), 0);
+          return { ...x, subGroups: updatedSubGroups, totalCount: newTotalCount };
+        }
         const known = new Set(x.items.map((b) => b.id));
         const fresh = page.items.filter((b: BugListItem) => !known.has(b.id));
         return { ...x, items: [...x.items, ...fresh], total: page.total, hasMore: page.hasMore, loading: false };
@@ -409,16 +545,31 @@ export function usePagedBugGroups(args: PagedBugsArgs): {
         users: args.users,
         labels: args.labels,
         groupBy: req.groupBy,
+        subGroupBy: req.subGroupBy,
         orderBy: req.orderBy,
         orderDir: req.orderDir,
       }),
   });
 
+  // 引用稳定（看板 memo 契约，任务 33 审查修复）：core 的 loadMore/dispatchPatch/
+  // refresh 经 ref 读最新实现、引用恒定（use-paged-groups.ts 回调注释），包装层
+  // 不得用内联箭头——每次渲染换引用会把消费方（bug-list-view 直传 paged.patchBug、
+  // handleLoadMoreColumn 依赖 paged.loadMore）拖垮，BugBoardView 的 config useMemo
+  // 随之失效（搜索每敲一键全板卡片重渲染，BoardBugCard memo 全废）。
+  const loadMore = useCallback(
+    (groupKey: string, subGroupKey?: string) => core.loadMore(groupKey, subGroupKey),
+    [core.loadMore],
+  );
+  const patchBug = useCallback(
+    (bugId: string, patch: BugPatch) => core.dispatchPatch(bugId, patch),
+    [core.dispatchPatch],
+  );
+
   return {
     groups: core.groups,
     isLoading: core.isLoading,
-    loadMore: (groupKey) => core.loadMore(groupKey),
+    loadMore,
     refresh: core.refresh,
-    patchBug: (bugId, patch) => core.dispatchPatch(bugId, patch),
+    patchBug,
   };
 }