@allbluecn/web-app 0.18.2 → 0.19.0

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

@@ -20,37 +20,52 @@
 // signature 防过期（过期响应丢弃），禁止 react-query。
 // 任务 8：分组虚拟列表（GroupedList）+ 行内编辑乐观 patch（三档）+ 无限滚动 +
 // ↑↓ 键选中（selectedId 由本组件持有，任务 10 peek 消费）。
-// 任务 9：视图切换（list↔table 保持筛选，表格走 TableView）+ 保存筛选视图
-// （内置 __default__ 默认视图不落库；applyView 应用 filters+displayOptions；
-// 手动改动筛选/搜索/模块树/分组即回落默认视图；保存时 filters 键集收敛在前端）。
+// 任务 9：视图切换 + 保存筛选视图（内置 __default__ 默认视图不落库；applyView
+// 应用 filters+displayOptions；手动改动筛选/搜索/模块树/分组即回落默认视图；
+// 保存时 filters 键集收敛在前端）。PR-7b 任务 27：视图定版 list|board，表格视图
+// 移除（存量 view:"table" 反序列化回落 list）。
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { PanelLeftClose, PanelLeftOpen, RotateCcw } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { WavePhysicsLoader } from "@/components/shared-kit/loading/wave-physics-loader";
+import { useDeferredFlag } from "@/components/shared-kit/loading/use-deferred-flag";
 import { FolderTree, type FolderNodeDto, type FolderSelection } from "./folder-tree";
 import { TestCaseToolbar } from "./testcase-toolbar";
 import {
-  hasActiveFilters,
-  priorityLabel,
-  serializeTestCaseFilters,
-  stateLabel,
-  typeLabel,
-  type TestCaseFilterState,
+  filterConditionSummary,
+  serializeFilters,
+  type TestcaseFilterCondition,
 } from "./filters";
 import { listTestCasesFn } from "@/server/serverFns/testcase/testcase-crud";
 import { listGroupsFn } from "@/server/serverFns/testcase/testcase-groups";
 import { listFoldersFn } from "@/server/serverFns/testcase/testcase-folders";
+import { listTestCaseBoardColumnsFn } from "@/server/serverFns/testcase/testcase-board";
+import { reorderTestCasesFn } from "@/server/serverFns/testcase/testcase-reorder";
+import {
+  TEST_CASE_PRIORITY_VALUES,
+  TEST_CASE_STATE_VALUES,
+} from "@/server/serverFns/testcase/constants";
+import { listProjectsBriefFn } from "@/server/serverFns/project";
 import {
   createFilterViewFn,
+  deleteFilterViewFn,
   listFilterViewsFn,
+  updateFilterViewFn,
 } from "@/server/serverFns/testcase/testcase-filter-views";
 import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
 import type { UserBrief } from "@/components/story/types";
-import { GroupedList, type TestCaseGroupBy, type TestCaseGroupInfo } from "./list/grouped-list";
-import { TableView } from "./table/table-view";
+import { GroupedList, groupKeyOf, type TestCaseGroupInfo } from "./list/grouped-list";
+import { computeMove, canMove } from "./views/move";
+import { TestCaseBoardView } from "./views/board-view";
+import type { ReorderEntry } from "@/components/shared-kit/list-kit/kanban/drop-commit";
+import { manualOrderSwitchPatch } from "@/components/shared-kit/list-kit/kanban/manual-order";
+import { toast } from "@/components/ui/toast";
 import { TestCasePeekPanel, type PeekMode } from "./peek-panel";
+import { useTestcaseDisplayOptions } from "./display/use-testcase-display-options";
+import type { TestCaseGroupKey } from "./display/field-configs";
 import { CreateViewDialog, type CreateViewDialogPayload } from "./views/create-view-dialog";
 import { CreateTestCaseDialog } from "./create-testcase-dialog";
-import { AddToPlanBar } from "./plans/add-to-plan-bar";
+import { TestCaseBatchToolbar } from "./views/batch-toolbar";
 import { AddToPlanDialog } from "./plans/add-to-plan-dialog";
 import {
   buildDefaultView,
@@ -62,6 +77,8 @@ import {
   type TestCaseViewType,
 } from "./views/view-types";
 import { BUILTIN_INDEPENDENT_DISPLAY_ID } from "@/lib/builtin-project";
+import { usePresenceListRefresh } from "@/lib/collab/use-presence-list-refresh";
+import { toastError } from "@/lib/toast-error";
 import { m } from "@/paraglide/messages.js";
 
 interface TestCaseListViewProps {
@@ -75,30 +92,47 @@ interface CaseListResult {
   nextCursor: string | null;
 }
 
-export function TestCaseListView({ projects, initialFolders, initialUsers }: TestCaseListViewProps) {
-  // P1 作用域：用户「独立需求」内置项目（displayId=STORY，与 stories/bugs 的
-  // serverFn 静默回退同一项目）。项目选择器不在任务 7 范围。
-  // 回退口径对齐说明（任务 7 审查遗留）：服务端 resolveStoryScopeProjectId 对
-  // 未传/无效/非成员 projectId 静默回退内置项目；客户端 projects 为空时 projectId
-  // 为 undefined 直接跳过拉取（fetchCases 的 !projectId 守卫），不会发出无效请求，
-  // 因此保持「取内置项目 → 首个项目」的确定性回退即可，与前者互补不冲突。
-  const projectId = useMemo(
+export function TestCaseListView({ projects: initialProjects, initialFolders, initialUsers }: TestCaseListViewProps) {
+  // P1 作用域（任务 17 改造）：项目选择器落在工具栏 Popover（story-toolbar 同款），
+  // scopeProjectId=undefined 表示「全部项目」聚合 scope（后端任务 16 已支持缺省
+  // 聚合读路径）。默认仍落内置「独立需求」项目（首屏行为不变）；回退口径对齐
+  // 说明（任务 7 审查遗留）：服务端对未传/无效/非成员 projectId 静默回退内置
+  // 项目，客户端仅决定「聚合 or 单项目」，双端互补不冲突。
+  // projects 改本地状态（story-list-view 同款）：Popover 内新建项目后即时刷新花名册。
+  const [projects, setProjects] = useState(initialProjects);
+  const defaultProjectId = useMemo(
     () => projects.find((p) => p.displayId === BUILTIN_INDEPENDENT_DISPLAY_ID)?.id ?? projects[0]?.id,
     [projects],
   );
+  const [projectId, setProjectId] = useState<string | undefined>(defaultProjectId);
 
   const [folders, setFolders] = useState(initialFolders);
   const [users] = useState(initialUsers);
   const [cases, setCases] = useState<CaseListResult>({ items: [], nextCursor: null });
   const [selection, setSelection] = useState<FolderSelection>({ kind: "all" });
   const [searchText, setSearchText] = useState<string | undefined>(undefined);
-  const [filters, setFilters] = useState<TestCaseFilterState>({});
+  // 筛选条件（任务 21）：FilterCondition 三段式取代旧三 Select 快速筛选，
+  // serializeFilters 序列化后经 requestParams.filters 传 serverFn
+  const [filterConditions, setFilterConditions] = useState<TestcaseFilterCondition[]>([]);
   const [view, setView] = useState<TestCaseViewType>("list");
-  const [groupBy, setGroupBy] = useState<TestCaseGroupBy>("none");
+  // 显示选项（任务 20）：groupBy 自 hook 来（per-user 持久化偏好，首屏异步
+  // 拉取覆盖默认 none），变更经 updateFilters 落库；orderBy/orderDir/properties/
+  // pageSize 已入域，消费接线随任务 21/25 列表排序入参跟进
+  const {
+    filters: displayOptions,
+    updateFilters: updateDisplayOptions,
+  } = useTestcaseDisplayOptions();
+  const groupBy = displayOptions.groupBy;
   // ── 保存筛选视图（任务 9）：内置默认视图在首位；手动改筛选回落默认视图 ──
+  // 任务 22：对话框状态带 mode + 被编辑视图（编辑/删除入口接线，story-list-view
+  // 的 dialogState 同构）
   const [views, setViews] = useState<TestCaseSavedView[]>([]);
   const [activeViewId, setActiveViewId] = useState<string>(DEFAULT_VIEW_ID);
-  const [createViewOpen, setCreateViewOpen] = useState(false);
+  const [viewDialog, setViewDialog] = useState<{
+    mode: "create" | "edit";
+    view: TestCaseSavedView | null;
+  }>({ mode: "create", view: null });
+  const [viewDialogOpen, setViewDialogOpen] = useState(false);
   const [groups, setGroups] = useState<TestCaseGroupInfo[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   // ── Peek 侧滑预览（任务 10）：peekId 与选中分离持有；↑↓ 移动选中时若面板
@@ -123,19 +157,23 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
 
   const allViews = useMemo(() => [buildDefaultView(), ...views], [views]);
 
-  // applyView：仅置状态——查询参数变化由 signature 机制自动触发重拉（A7 口径）
+  // applyView：仅置状态——查询参数变化由 signature 机制自动触发重拉（A7 口径）。
+  // scope=all（projectId 缺省）下 folder 条件不合法，应用时剔除（与分组 clamp 同口径）
   const applyView = useCallback((target: TestCaseSavedView) => {
     setActiveViewId(target.id);
-    const { selection: nextSelection, searchText: nextSearch, filters: nextFilters } =
+    const { selection: nextSelection, searchText: nextSearch, conditions: nextConditions } =
       viewFiltersToState(target.filters);
     setSelection(nextSelection);
     setSearchText(nextSearch);
-    setFilters(nextFilters);
-    setGroupBy(target.displayOptions.groupBy ?? "none");
+    setFilterConditions(
+      projectId ? nextConditions : nextConditions.filter((c) => c.property !== "folder"),
+    );
+    updateDisplayOptions({ groupBy: target.displayOptions.groupBy ?? "none" });
     setView(target.displayOptions.view ?? "list");
-  }, []);
+  }, [updateDisplayOptions, projectId]);
 
   // ── signature 防过期（A7）：任一查询参数变化生成新签名，过期响应丢弃 ──
+  // 任务 29：排序入参入签名（manual 批量移动依赖列表按 boardOrder 重拉）
   const signature = useMemo(
     () =>
       JSON.stringify([
@@ -143,11 +181,11 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
         selection.kind,
         selection.kind === "folder" ? selection.id : "",
         searchText ?? "",
-        filters.state ?? "",
-        filters.type ?? "",
-        filters.priority ?? "",
+        serializeFilters(filterConditions) ?? "",
+        displayOptions.orderBy,
+        displayOptions.orderDir,
       ]),
-    [projectId, selection, searchText, filters],
+    [projectId, selection, searchText, filterConditions, displayOptions.orderBy, displayOptions.orderDir],
   );
   const signatureRef = useRef(signature);
   signatureRef.current = signature;
@@ -161,7 +199,7 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
 
   const requestParams = useCallback(
     (cursor?: string) => ({
-      projectId: projectId as string,
+      projectId,
       folderId:
         selection.kind === "folder"
           ? selection.id
@@ -169,15 +207,27 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
             ? null
             : undefined,
       searchText,
-      ...serializeTestCaseFilters(filters),
+      // FilterCondition 三段式（任务 21）：序列化串由 serverFn buildListWhere
+      // 翻译为 where（story/bug 同构 filters 传参形态）
+      filters: serializeFilters(filterConditions),
+      // 排序入参（任务 29 补接线：listSchema 任务 25 已收 orderBy/orderDir，
+      // 列表此前漏传导致显示选项排序只对面板生效；manual = boardOrder，
+      // 批量移动后重拉即按新序渲染）
+      orderBy: displayOptions.orderBy,
+      orderDir: displayOptions.orderDir,
+      // 每页数量接线（PR-8 审查 B）：DisplayDropdown pageSize 此前仅看板
+      // 生效（列级 take），列表恒吃服务端 default 50——补 take，封顶 200
+      // = listSchema max 不放宽
+      take: Math.min(displayOptions.pageSize, 200),
       ...(cursor ? { cursor } : {}),
     }),
-    [projectId, selection, searchText, filters],
+    [projectId, selection, searchText, filterConditions, displayOptions.orderBy, displayOptions.orderDir, displayOptions.pageSize],
   );
 
   const fetchCases = useCallback(
     async (cursor?: string) => {
-      if (!projectId) return;
+      // projectId=undefined（全部项目聚合 scope）照常拉取（任务 16 读路径已支持
+      // 缺省聚合；服务端对无效值仍有静默回退兜底）
       if (cursor && loadingRef.current) return;
       const requestSignature = signatureRef.current;
       if (cursor) loadingRef.current = true;
@@ -225,17 +275,16 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
         selection.kind,
         selection.kind === "folder" ? selection.id : "",
         searchText ?? "",
-        filters.state ?? "",
-        filters.type ?? "",
-        filters.priority ?? "",
+        serializeFilters(filterConditions) ?? "",
       ]),
-    [projectId, groupBy, selection, searchText, filters],
+    [projectId, groupBy, selection, searchText, filterConditions],
   );
   const groupsSignatureRef = useRef(groupsSignature);
   groupsSignatureRef.current = groupsSignature;
 
   const fetchGroups = useCallback(async () => {
-    if (!projectId || groupBy === "none") return;
+    // 全部项目 scope（projectId 缺省）同样支持聚合分组计数（任务 16）
+    if (groupBy === "none") return;
     const requestSignature = groupsSignatureRef.current;
     try {
       const { groups: rows } = await listGroupsFn({ data: { ...requestParams(), groupBy } });
@@ -250,6 +299,188 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
     void fetchGroups();
   }, [fetchGroups]);
 
+  // ── 看板（view=board，PR-7b 任务 26）：列级 cursor 分页 ──
+  // 看板维度收敛：看板无单列形态，groupBy=none 一律按 state 渲染；folder 仅
+  // 单项目 scope 有效（scope=all 同步收敛为 state，不依赖任务 20 的异步 clamp）。
+  // 收敛只落 folder 最小面：scope=all 下 state/priority 列表本就支持聚合分组
+  // （resolveStoryScopeProjectIds），看板保持同维度不静默换轴。
+  const boardGroupBy: Exclude<TestCaseGroupKey, "none"> =
+    groupBy === "none" || (projectId == null && groupBy === "folder")
+      ? "state"
+      : groupBy;
+  // 列全集显式传全（含空列，键序 = 列序）：任务 25 约束 columns 必传
+  const boardColumnKeys = useMemo(() => {
+    switch (boardGroupBy) {
+      case "state":
+        return [...TEST_CASE_STATE_VALUES];
+      case "priority":
+        return [...TEST_CASE_PRIORITY_VALUES];
+      case "folder":
+        return [...folders.map((f) => f.id), "unassigned"];
+    }
+  }, [boardGroupBy, folders]);
+
+  const [boardData, setBoardData] = useState<Record<string, TestCaseSummary[]>>({});
+  const [boardCursors, setBoardCursors] = useState<Record<string, string | null>>({});
+  const [boardFailed, setBoardFailed] = useState(false);
+  const [boardLoaded, setBoardLoaded] = useState(false);
+  const boardSignature = useMemo(
+    () =>
+      JSON.stringify([
+        projectId ?? "",
+        boardGroupBy,
+        displayOptions.orderBy,
+        displayOptions.orderDir,
+        displayOptions.pageSize,
+        selection.kind,
+        selection.kind === "folder" ? selection.id : "",
+        searchText ?? "",
+        serializeFilters(filterConditions) ?? "",
+      ]),
+    [
+      projectId,
+      boardGroupBy,
+      displayOptions.orderBy,
+      displayOptions.orderDir,
+      displayOptions.pageSize,
+      selection,
+      searchText,
+      filterConditions,
+    ],
+  );
+  const boardSignatureRef = useRef(boardSignature);
+  boardSignatureRef.current = boardSignature;
+  // 在途守卫（仅列级）：columnKey = 该列加载更多（防重复点击重放 cursor）；
+  // 整板拉取不设 in-flight 早退（见 fetchBoard 注释）
+  const boardInflightRef = useRef<Set<string>>(new Set());
+  const boardCursorsRef = useRef(boardCursors);
+  boardCursorsRef.current = boardCursors;
+
+  const boardRequestBase = useCallback(
+    () => ({
+      projectId,
+      groupBy: boardGroupBy,
+      orderBy: displayOptions.orderBy,
+      orderDir: displayOptions.orderDir,
+      filters: serializeFilters(filterConditions) ?? undefined,
+      // 任务 27 补：看板搜索（任务 25 boardSchema 漏收 searchText，搜索不生效）
+      searchText,
+    }),
+    [projectId, boardGroupBy, displayOptions.orderBy, displayOptions.orderDir, filterConditions, searchText],
+  );
+
+  const fetchBoard = useCallback(async () => {
+    // 整板拉取不设 in-flight 早退（二期 finding C 归宿，fetchCases 同口径）：
+    // 此前的 inflight.has("") 早退会在「整板在途 + 签名变化」窗口丢掉重拉请求
+    // ——看板滞留旧筛选数据直到下次外部触发。签名守卫已防错序（过期响应丢弃，
+    // 后发请求晚到覆盖），并发重入只多一次同参请求，落地值幂等。
+    const requestSignature = boardSignatureRef.current;
+    try {
+      const { columns } = await listTestCaseBoardColumnsFn({
+        data: {
+          ...boardRequestBase(),
+          columns: boardColumnKeys.map((key) => ({ key })),
+          take: Math.min(displayOptions.pageSize, 500),
+        },
+      });
+      if (boardSignatureRef.current !== requestSignature) return;
+      setBoardData(Object.fromEntries(columns.map((c) => [c.key, c.items])));
+      setBoardCursors(Object.fromEntries(columns.map((c) => [c.key, c.nextCursor])));
+      setBoardFailed(false);
+      setBoardLoaded(true);
+    } catch {
+      if (boardSignatureRef.current === requestSignature) setBoardFailed(true);
+    }
+  }, [boardRequestBase, boardColumnKeys, displayOptions.pageSize]);
+
+  const loadMoreColumn = useCallback(
+    async (columnKey: string) => {
+      const cursor = boardCursorsRef.current[columnKey];
+      const inflight = boardInflightRef.current;
+      if (!cursor || inflight.has(columnKey)) return;
+      inflight.add(columnKey);
+      // 签名过期守卫（fetchCases 追加加载同款，审查修复）：列加载在途期间改
+      // 搜索/筛选/项目 → 整板已按新签名重置，旧筛选行不得追加进新板、
+      // 旧 nextCursor 不得覆写新 cursor
+      const requestSignature = boardSignatureRef.current;
+      try {
+        const { columns } = await listTestCaseBoardColumnsFn({
+          data: {
+            ...boardRequestBase(),
+            columns: [{ key: columnKey, cursor }],
+            take: Math.min(displayOptions.pageSize, 500),
+          },
+        });
+        if (boardSignatureRef.current !== requestSignature) return;
+        const col = columns[0];
+        if (!col) return;
+        setBoardData((prev) => {
+          const known = new Set((prev[columnKey] ?? []).map((c) => c.id));
+          return {
+            ...prev,
+            [columnKey]: [
+              ...(prev[columnKey] ?? []),
+              ...col.items.filter((c) => !known.has(c.id)),
+            ],
+          };
+        });
+        setBoardCursors((prev) => ({ ...prev, [columnKey]: col.nextCursor }));
+      } catch {
+        // 加载更多失败静默保留原列（cursor 未动，可再次点击重试）
+      } finally {
+        inflight.delete(columnKey);
+      }
+    },
+    [boardRequestBase, displayOptions.pageSize],
+  );
+
+  useEffect(() => {
+    if (view !== "board") return;
+    void fetchBoard();
+  }, [view, fetchBoard]);
+
+  // 手动排序（拖拽列内/跨列均写目标列 boardOrder）：reorderTestCasesFn 批量落库
+  const handleBoardReorder = useCallback(async (orders: ReorderEntry[]) => {
+    if (orders.length === 0) return;
+    await reorderTestCasesFn({ data: { items: orders } });
+  }, []);
+
+  // 排序键不是 manual 时 boardOrder 不被读取（拖拽会被排回原位），落库后自动切换
+  const handleBoardAutoSwitchManual = useCallback(async () => {
+    const patch = manualOrderSwitchPatch(displayOptions.orderBy, true);
+    if (!patch) return;
+    updateDisplayOptions(patch);
+    toast.info(m.testcase_board_manualOrderEnabled());
+  }, [displayOptions.orderBy, updateDisplayOptions]);
+
+  // 看板行内编辑/拖拽落库的本地收敛：与列表缓存（cases.items）双写，
+  // peek 面板与切回列表视图时数据不回跳
+  const patchBoardCase = useCallback((id: string, patch: Partial<TestCaseSummary>) => {
+    setBoardData((prev) => {
+      let changed = false;
+      const next: Record<string, TestCaseSummary[]> = {};
+      for (const [key, items] of Object.entries(prev)) {
+        if (!items.some((c) => c.id === id)) {
+          next[key] = items;
+          continue;
+        }
+        changed = true;
+        next[key] = items.map((c) => (c.id === id ? { ...c, ...patch } : c));
+      }
+      return changed ? next : prev;
+    });
+  }, []);
+
+  const refreshBoard = useCallback(() => {
+    void fetchBoard();
+  }, [fetchBoard]);
+  const handleLoadMoreColumn = useCallback(
+    (columnKey: string) => {
+      void loadMoreColumn(columnKey);
+    },
+    [loadMoreColumn],
+  );
+
   // 乐观 patch 三档的本地档（A7）：CaseRow 负责 ①乐观回调（本函数）②serverFn
   // ③收敛/回滚（同样回调本函数合并）；原地合并不重排，扁平分页序稳定。
   const patchCase = useCallback((id: string, patch: Partial<TestCaseSummary>) => {
@@ -259,6 +490,25 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
     }));
   }, []);
 
+  // 看板行内编辑/拖拽落库双写入口（PR-7b 任务 26）：列表缓存与看板列数据同步收敛
+  const patchCaseEverywhere = useCallback(
+    (id: string, patch: Partial<TestCaseSummary>) => {
+      patchCase(id, patch);
+      patchBoardCase(id, patch);
+    },
+    [patchCase, patchBoardCase],
+  );
+
+  // 列表实时刷新（§7.1）：presence 信号（成员进出本模块实体页）+ 回前台 +
+  // 轮询兜底 → 走既有重拉入口（协同落库不 bump updatedAt，列表无推送通道）；
+  // 看板视图在场时一并重拉列数据（任务 26）
+  const refreshCaseList = useCallback(() => {
+    void fetchCases();
+    void fetchGroups();
+    if (view === "board") void fetchBoard();
+  }, [fetchCases, fetchGroups, view, fetchBoard]);
+  usePresenceListRefresh({ module: "test-cases", refresh: refreshCaseList });
+
   const refreshFolders = useCallback(async () => {
     try {
       const { folders: rows } = await listFoldersFn({ data: { projectId } });
@@ -268,11 +518,55 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
     }
   }, [projectId]);
 
-  const handleFiltersChange = useCallback((next: TestCaseFilterState) => {
-    setFilters(next);
+  // ── 项目选择器接线（任务 17）──
+  // Popover「新建项目」后刷新花名册（story-list-view 同款）
+  const refreshProjects = useCallback(() => {
+    listProjectsBriefFn()
+      .then((rows) => setProjects(rows))
+      .catch(() => {});
+  }, []);
+
+  // 切作用域：树选中必须重置（folder/ungrouped 语义仅单项目成立）；手动切项目
+  // 视为偏离当前保存视图 → 回落默认视图
+  const handleProjectChange = useCallback((next: string | undefined) => {
+    setProjectId(next);
+    setSelection({ kind: "all" });
+    setActiveViewId(DEFAULT_VIEW_ID);
+  }, []);
+
+  // 全部项目 scope 无模块树：groupBy=folder 自动回落 none（覆盖切 scope、应用
+  // 含 folder 分组的保存视图等一切进入路径；单项目 scope 切回后保持 none 不恢复；
+  // 下拉侧的「模块」项隐藏是第一道过滤，本 clamp 是第二道保险——任务 20）
+  useEffect(() => {
+    if (projectId || groupBy !== "folder") return;
+    updateDisplayOptions({ groupBy: "none" });
+    setActiveViewId(DEFAULT_VIEW_ID);
+  }, [projectId, groupBy, updateDisplayOptions]);
+
+  // 全部项目 scope 下 folder 筛选条件不合法（模块树属单项目）：切入聚合 scope
+  // 时剔除 folder 条件（resolveFilterKeys 下拉隐藏是第一道过滤，本 clamp 同为
+  // 第二道保险——任务 21，与上方 groupBy clamp 同构）
+  useEffect(() => {
+    if (projectId) return;
+    setFilterConditions((prev) =>
+      prev.some((c) => c.property === "folder") ? prev.filter((c) => c.property !== "folder") : prev,
+    );
+  }, [projectId]);
+
+  // 模块树属单项目：切项目（含切入/切出全部项目 scope）后按新项目刷新树；
+  // 首屏不刷（路由 beforeLoad 已预载 initialFolders）
+  const prevProjectRef = useRef(projectId);
+  useEffect(() => {
+    if (prevProjectRef.current === projectId) return;
+    prevProjectRef.current = projectId;
+    void refreshFolders();
+  }, [projectId, refreshFolders]);
+
+  const handleConditionsChange = useCallback((next: TestcaseFilterCondition[]) => {
+    setFilterConditions(next);
     // 手动筛选偏离当前保存视图 → 回落内置默认视图（视图选择器取消高亮）
     setActiveViewId(DEFAULT_VIEW_ID);
-    if (!hasActiveFilters(next)) setFilterBarVisible(false);
+    if (next.length === 0) setFilterBarVisible(false);
   }, []);
 
   const handleSearchChange = useCallback((next: string | undefined) => {
@@ -285,11 +579,6 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
     setActiveViewId(DEFAULT_VIEW_ID);
   }, []);
 
-  const handleGroupByChange = useCallback((next: TestCaseGroupBy) => {
-    setGroupBy(next);
-    setActiveViewId(DEFAULT_VIEW_ID);
-  }, []);
-
   // ── 圈选多选接线（任务 13）：勾选翻转；加入成功后清空（用例已在计划内）──
   const toggleSelect = useCallback((id: string) => {
     setSelectedIds((prev) => {
@@ -313,26 +602,138 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
     setPeekId(id);
   }, []);
   const handleClosePeek = useCallback(() => setPeekId(null), []);
-  // 面板 ↑↓/上下一条按钮：在已加载扁平序内移动（边界由 disabled + 越界守卫双兜底）
+  // 面板 ↑↓/上下一条按钮：在当前视图的可见序内移动（看板 = 列序 + 列内序；
+  // 边界由 disabled + 越界守卫双兜底）
+  const boardItems = useMemo(() => Object.values(boardData).flat(), [boardData]);
+
+  // ── 批量条接线（任务 28）：三态全选分母取当前视图已加载行（story totalLoaded
+  // 同口径）；批量更新成功后清空多选并重拉——folder 移动涉及重新分组，走
+  // refreshCaseList 全量兜底（列表 + 分组计数 + 看板在场时一并）──
+  const totalLoaded = view === "board" ? boardItems.length : cases.items.length;
+  const allSelected = totalLoaded > 0 && selectedIds.size >= totalLoaded;
+  const toggleAll = useCallback(() => {
+    if (allSelected) {
+      clearSelection();
+      return;
+    }
+    const pool = view === "board" ? boardItems : cases.items;
+    setSelectedIds(new Set(pool.map((c) => c.id)));
+  }, [allSelected, clearSelection, view, boardItems, cases.items]);
+  const handleBatchUpdated = useCallback(() => {
+    clearSelection();
+    refreshCaseList();
+  }, [clearSelection, refreshCaseList]);
+
+  // ── manual 档批量上移/下移（任务 29，story-list moveStories 同构）──
+  // 按分组桶装视觉顺序（grouped-list groupKeyOf 同一 key 口径；groupBy=none
+  // 整列表单组）；折叠组行不渲染、无从勾选，桶内含其 id 也无选中可动。
+  const moveGroups = useMemo(() => {
+    const map = new Map<string, string[]>();
+    if (view !== "list") return map;
+    if (groupBy === "none") {
+      map.set("", cases.items.map((c) => c.id));
+      return map;
+    }
+    for (const g of groups) map.set(g.key, []);
+    for (const c of cases.items) {
+      const k = groupKeyOf(groupBy, c);
+      const arr = map.get(k);
+      if (arr) arr.push(c.id);
+      else map.set(k, [c.id]);
+    }
+    return map;
+  }, [view, groupBy, groups, cases.items]);
+
+  // 与 reorderTestCases 的组内语义一致：任一组的选中项可移动即可移动
+  const canMoveGrouped = useCallback(
+    (dir: "up" | "down") => {
+      if (selectedIds.size === 0) return false;
+      for (const ids of moveGroups.values()) {
+        const groupSelected = new Set(ids.filter((id) => selectedIds.has(id)));
+        if (canMove(ids, groupSelected, dir)) return true;
+      }
+      return false;
+    },
+    [moveGroups, selectedIds],
+  );
+
+  const moveCases = useCallback(
+    async (dir: "up" | "down") => {
+      const targets: ReorderEntry[] = [];
+      for (const ids of moveGroups.values()) {
+        const groupSelected = new Set(ids.filter((id) => selectedIds.has(id)));
+        const next = computeMove(ids, groupSelected, dir);
+        if (next.some((id, i) => id !== ids[i])) {
+          next.forEach((id, i) => targets.push({ id, boardOrder: i }));
+        }
+      }
+      if (targets.length === 0) return;
+      try {
+        await reorderTestCasesFn({ data: { items: targets } });
+        toast.success(dir === "up" ? m.testcase_batch_movedUp() : m.testcase_batch_movedDown());
+        refreshCaseList();
+      } catch (e) {
+        toastError(e, m.testcase_batch_moveFailed());
+      }
+    },
+    [moveGroups, selectedIds, refreshCaseList],
+  );
+
+  // 圈选加入计划的目标项目（任务 28 落任务 17 note）：listPlansFn 按单项目解析
+  //（缺省静默回退内置独立项目），scope=all 聚合圈选时改传首条选中用例的
+  // projectId 取计划列表；混合项目圈选以首条为准（跨项目用例由 addCasesToPlanFn
+  // 服务端 skipped 明细兜底）
+  const selectionProjectId = useMemo(() => {
+    if (projectId) return projectId;
+    const pool = view === "board" ? boardItems : cases.items;
+    return pool.find((c) => selectedIds.has(c.id))?.projectId;
+  }, [projectId, view, boardItems, cases.items, selectedIds]);
+
+  const peekPool = view === "board" ? boardItems : cases.items;
   const handlePeekStep = useCallback(
     (dir: 1 | -1) => {
       if (!peekId) return;
-      const idx = cases.items.findIndex((c) => c.id === peekId);
+      const idx = peekPool.findIndex((c) => c.id === peekId);
       const nextIdx = idx + dir;
-      if (idx === -1 || nextIdx < 0 || nextIdx >= cases.items.length) return;
-      const nextId = cases.items[nextIdx]!.id;
+      if (idx === -1 || nextIdx < 0 || nextIdx >= peekPool.length) return;
+      const nextId = peekPool[nextIdx]!.id;
       setSelectedId(nextId);
       setPeekId(nextId);
     },
-    [peekId, cases.items],
+    [peekId, peekPool],
   );
-  const peekedCase = peekId ? (cases.items.find((c) => c.id === peekId) ?? null) : null;
-  const peekedIdx = peekId ? cases.items.findIndex((c) => c.id === peekId) : -1;
+  const peekedCase = peekId ? (peekPool.find((c) => c.id === peekId) ?? null) : null;
+  const peekedIdx = peekId ? peekPool.findIndex((c) => c.id === peekId) : -1;
+
+  // 创建/编辑（保存）视图提交（任务 22 起双模式）：filters 键集收敛在前端
+  //（任务 6 审查指针②），displayOptions 快照当前 groupBy/view。P1 单项目作用域，
+  // projectId 不落（null）。带 id 走 update（仅 patch 元数据 name/description/icon，
+  // 筛选/显示选项不可在本对话框改）；description 空串传 null 以清除（updateSchema
+  // nullable，undefined 语义是「不更新」会残留旧值）。提交错误由对话框内联展示。
+  const reloadViews = useCallback(async () => {
+    const rows = await listFilterViewsFn();
+    setViews(rows.map(toSavedView));
+    return rows.map(toSavedView);
+  }, []);
 
-  // 创建（保存）视图提交：filters 键集收敛在前端（任务 6 审查指针②），
-  // displayOptions 快照当前 groupBy/view。P1 单项目作用域，projectId 不落（null）。
-  const handleCreateViewSubmit = useCallback(
+  const handleViewDialogSubmit = useCallback(
     async (payload: CreateViewDialogPayload) => {
+      if (payload.id) {
+        await updateFilterViewFn({
+          data: {
+            id: payload.id,
+            name: payload.name,
+            description: payload.description ?? null,
+            icon: payload.icon,
+          },
+        });
+        const nextViews = await reloadViews();
+        if (activeViewId === payload.id) {
+          const updated = nextViews.find((v) => v.id === payload.id);
+          if (updated) applyView(updated);
+        }
+        return;
+      }
       await createFilterViewFn({
         data: {
           name: payload.name,
@@ -341,63 +742,127 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
           projectId: null,
           // 展开为新鲜对象字面量：接口无隐式索引签名，validator 侧入参是
           // Record<string, unknown>（服务端只验「是对象」，键集收敛在本模块）
-          filters: { ...toViewFilters({ selection, searchText, filters }) },
+          filters: { ...toViewFilters({ selection, searchText, conditions: filterConditions }) },
           displayOptions: { groupBy, view },
         },
       });
-      const rows = await listFilterViewsFn();
-      setViews(rows.map(toSavedView));
+      await reloadViews();
     },
-    [selection, searchText, filters, groupBy, view],
+    [selection, searchText, filterConditions, groupBy, view, activeViewId, applyView, reloadViews],
+  );
+
+  // ── 视图管理入口（任务 22，story-list-view handleEditView/handleDeleteView 同构）──
+  const openCreateView = useCallback(() => {
+    setViewDialog({ mode: "create", view: null });
+    setViewDialogOpen(true);
+  }, []);
+
+  const handleEditView = useCallback((target: TestCaseSavedView) => {
+    setViewDialog({ mode: "edit", view: target });
+    setViewDialogOpen(true);
+  }, []);
+
+  const handleDeleteView = useCallback(
+    async (target: TestCaseSavedView) => {
+      try {
+        await deleteFilterViewFn({ data: { id: target.id } });
+        await reloadViews();
+        if (activeViewId === target.id) applyView(buildDefaultView());
+      } catch (e) {
+        toastError(e, m.testcase_view_deleteFailed());
+      }
+    },
+    [activeViewId, applyView, reloadViews],
   );
 
   // 保存对话框里的当前筛选摘要（值列表；空筛选给提示文案）
   const filterSummary = useMemo(() => {
     const parts: string[] = [];
-    if (searchText) parts.push(`「${searchText}」`);
+    if (searchText) parts.push(m.testcase_filter_searchChip({ query: searchText }));
     if (selection.kind === "folder") {
       parts.push(folders.find((f) => f.id === selection.id)?.name ?? m.testcase_folderTree_ungrouped());
     } else if (selection.kind === "ungrouped") {
       parts.push(m.testcase_folderTree_ungrouped());
     }
-    if (filters.state) parts.push(stateLabel(filters.state));
-    if (filters.type) parts.push(typeLabel(filters.type));
-    if (filters.priority) parts.push(priorityLabel(filters.priority));
+    for (const condition of filterConditions) {
+      parts.push(filterConditionSummary(condition, { users, folders }));
+    }
     return parts.length > 0 ? parts.join(" · ") : m.testcase_view_filterEmpty();
-  }, [searchText, selection, filters, folders]);
+  }, [searchText, selection, filterConditions, users, folders]);
 
-  const createViewInitialValues = useMemo(
-    () => ({ name: "", description: "", icon: "list" }),
-    [],
+  // 对话框初值（任务 22）：编辑态回填被编辑视图元数据；引用随 viewDialog 变化
+  //（open 期间保持稳定，对话框 useEffect 以其复位表单）
+  const viewDialogInitialValues = useMemo(
+    () =>
+      viewDialog.view
+        ? {
+            id: viewDialog.view.id,
+            name: viewDialog.view.name,
+            description: viewDialog.view.description ?? "",
+            icon: viewDialog.view.icon,
+          }
+        : { name: "", description: "", icon: "list" },
+    [viewDialog],
   );
 
-  const loadFailedBlock = loadFailed ? (
+  // 失败/空态/首载口径按视图分治（任务 29：空态 h-40 居中 + 首载 WavePhysicsLoader，
+  // 照 story-list 同款）：看板有自己的失败态与已加载标记（任务 26）
+  const bodyFailed = view === "board" ? boardFailed : loadFailed;
+  const bodyEmpty =
+    view === "board"
+      ? boardLoaded && boardItems.length === 0
+      : initialLoaded && cases.items.length === 0;
+  const bodyFirstLoading =
+    view === "board" ? !boardLoaded && !boardFailed : !initialLoaded && !loadFailed;
+  // 首载动画延迟显示（follow-up A）：真实等待超 400ms 才出现，快请求直接见数据/空态
+  const firstLoadingDeferred = useDeferredFlag(bodyFirstLoading);
+  const retryFetch = view === "board" ? fetchBoard : fetchCases;
+
+  const loadFailedBlock = bodyFailed ? (
     <div className="flex flex-1 flex-col items-center justify-center gap-3 text-sm text-muted-foreground">
       <span>{m.testcase_listView_loadFailed()}</span>
-      <Button variant="outline" size="sm" onClick={() => void fetchCases()}>
+      <Button variant="outline" size="sm" onClick={() => void retryFetch()}>
         <RotateCcw className="size-3.5" />
       </Button>
     </div>
   ) : null;
 
-  const emptyBlock = initialLoaded && cases.items.length === 0 ? (
-    <div className="flex flex-1 flex-col items-center justify-center gap-1 text-center">
+  const firstLoadingBlock = (
+    <div className="flex flex-1 flex-col items-center justify-center gap-3 py-12" aria-busy="true">
+      <WavePhysicsLoader />
+      <p className="text-sm text-muted-foreground">{m.testcase_listView_loading()}</p>
+    </div>
+  );
+
+  const emptyBlock = (
+    <div className="flex h-40 flex-1 flex-col items-center justify-center gap-1 text-center">
       <span className="text-sm font-medium">{m.testcase_listView_empty()}</span>
       <span className="text-xs text-muted-foreground">{m.testcase_listView_emptyDesc()}</span>
     </div>
-  ) : null;
+  );
 
-  // 列表区：任务 8 分组虚拟列表（A8，groupBy 仅作用于列表视图）；任务 9 表格视图
-  // （A3，排序+列钉住，分组不适用——与需求页表格同口径）
+  // 列表区：任务 8 分组虚拟列表（A8，groupBy 仅作用于列表视图）；PR-7b 任务 26
+  // 看板视图（全列集含空列，列级 cursor 分页 + 拖拽改分组字段 + 手动排序）；
+  // 任务 27 定版 list|board，表格视图移除（存量 view:"table" 反序列化回落 list）
+  const boardColumns = useMemo(
+    () => Object.fromEntries(boardColumnKeys.map((key) => [key, boardData[key] ?? []])),
+    [boardColumnKeys, boardData],
+  );
   const listBody =
-    view === "table" ? (
-      <TableView
-        cases={cases.items}
-        hasMore={cases.nextCursor !== null}
-        selectedId={selectedId}
-        onSelect={handleSelect}
+    view === "board" ? (
+      <TestCaseBoardView
+        columns={boardColumns}
+        groupBy={boardGroupBy}
+        properties={displayOptions.properties}
+        folders={folders}
+        users={users}
         onOpenCase={handleOpenCase}
-        onLoadMore={loadMore}
+        onLoadMoreColumn={handleLoadMoreColumn}
+        onPatchCase={patchCaseEverywhere}
+        onCaseGroupChanged={refreshBoard}
+        onReorder={handleBoardReorder}
+        onAutoSwitchManual={handleBoardAutoSwitchManual}
+        onRefresh={refreshBoard}
       />
     ) : (
       <GroupedList
@@ -420,68 +885,99 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
 
   return (
     <div className="relative flex h-full min-h-0 gap-3 overflow-hidden p-4">
-      <div
-        className={
-          treeVisible
-            ? "flex w-56 shrink-0 flex-col rounded-lg border border-border bg-background p-2"
-            : "flex w-0 shrink-0 flex-col overflow-hidden p-0"
-        }
-      >
-        {treeVisible && (
-          <FolderTree
-            folders={folders}
-            selected={selection}
-            onSelect={handleSelectionChange}
-            onFoldersChanged={() => void refreshFolders()}
-          />
-        )}
-      </div>
+      {/* 全部项目 scope（projectId=undefined）：模块树整栏不渲染（任务 17），
+          收起/展开按钮一并隐藏（无树可操作） */}
+      {projectId && (
+        <div
+          className={
+            treeVisible
+              ? "flex w-56 shrink-0 flex-col rounded-lg border border-border bg-background p-2"
+              : "flex w-0 shrink-0 flex-col overflow-hidden p-0"
+          }
+        >
+          {treeVisible && (
+            <FolderTree
+              folders={folders}
+              selected={selection}
+              onSelect={handleSelectionChange}
+              onFoldersChanged={() => void refreshFolders()}
+            />
+          )}
+        </div>
+      )}
       <div className="flex min-w-0 flex-1 flex-col gap-3 overflow-hidden">
         <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label={treeVisible ? m.testcase_folderTree_hideTree() : m.testcase_folderTree_showTree()}
-            onClick={() => setTreeVisible((v) => !v)}
-            className="size-8 shrink-0 text-muted-foreground"
-          >
-            {treeVisible ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
-          </Button>
-          <TestCaseToolbar
-            total={cases.items.length}
-            projectId={projectId}
-            search={searchText}
-            filters={filters}
-            filterBarVisible={filterBarVisible}
-            onToggleFilterBar={() => setFilterBarVisible((v) => !v)}
-            onSearchChange={handleSearchChange}
-            onFiltersChange={handleFiltersChange}
-            view={view}
-            onViewChange={setView}
-            groupBy={groupBy}
-            onGroupByChange={handleGroupByChange}
-            views={allViews}
-            activeViewId={activeViewId}
-            onApplyView={applyView}
-            onAddView={() => setCreateViewOpen(true)}
-            onCreateClick={() => setCreateCaseOpen(true)}
-          />
+          {projectId && (
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label={treeVisible ? m.testcase_folderTree_hideTree() : m.testcase_folderTree_showTree()}
+              onClick={() => setTreeVisible((v) => !v)}
+              className="size-8 shrink-0 text-muted-foreground"
+            >
+              {treeVisible ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
+            </Button>
+          )}
+          {/* ToolbarShell 的 @container 行是 inline-size containment：父级若按内容
+              定宽（水平 flex item）行宽会塌缩，必须由本包装提供确定宽度 */}
+          <div className="min-w-0 flex-1">
+            <TestCaseToolbar
+              total={view === "board" && boardLoaded ? boardItems.length : cases.items.length}
+              projectId={projectId}
+              projects={projects}
+              onProjectChange={handleProjectChange}
+              onProjectCreated={refreshProjects}
+              search={searchText}
+              filterConditions={filterConditions}
+              filterBarVisible={filterBarVisible}
+              onToggleFilterBar={() => setFilterBarVisible((v) => !v)}
+              onSearchChange={handleSearchChange}
+              onFilterConditionsChange={handleConditionsChange}
+              users={users}
+              folders={folders}
+              displayFilters={displayOptions}
+              onDisplayOptionsChange={updateDisplayOptions}
+              view={view}
+              onViewChange={setView}
+              views={allViews}
+              activeViewId={activeViewId}
+              onApplyView={applyView}
+              onEditView={handleEditView}
+              onDeleteView={(view) => void handleDeleteView(view)}
+              onAddView={openCreateView}
+              onCreateClick={() => setCreateCaseOpen(true)}
+            />
+          </div>
         </div>
         <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-        {loadFailed ? loadFailedBlock : cases.items.length === 0 ? emptyBlock : listBody}
-        <AddToPlanBar
+        {bodyFailed ? loadFailedBlock : bodyEmpty ? emptyBlock : bodyFirstLoading && firstLoadingDeferred ? firstLoadingBlock : listBody}
+        <TestCaseBatchToolbar
           selectedCount={selectedIds.size}
-          onAddToPlan={() => setAddToPlanOpen(true)}
+          totalLoaded={totalLoaded}
+          allSelected={allSelected}
+          projectId={projectId}
+          users={users}
+          folders={folders}
+          caseIds={[...selectedIds]}
+          canMove={view === "list" && displayOptions.orderBy === "manual"}
+          canMoveUp={canMoveGrouped("up")}
+          canMoveDown={canMoveGrouped("down")}
+          onMoveUp={() => void moveCases("up")}
+          onMoveDown={() => void moveCases("down")}
+          onToggleAll={toggleAll}
           onClearSelection={clearSelection}
+          onAddToPlan={() => setAddToPlanOpen(true)}
+          onUpdated={handleBatchUpdated}
         />
       </div>
       </div>
       <CreateViewDialog
-        open={createViewOpen}
-        onOpenChange={setCreateViewOpen}
-        initialValues={createViewInitialValues}
+        open={viewDialogOpen}
+        onOpenChange={setViewDialogOpen}
+        mode={viewDialog.mode}
+        initialValues={viewDialogInitialValues}
         filterSummary={filterSummary}
-        onSubmit={handleCreateViewSubmit}
+        onSubmit={handleViewDialogSubmit}
       />
       {/* 新建成功：refetch 列表 + 分组计数（story create-dialog 先例为 refetch 非
           prepend——列表 orderBy sequenceId asc，新用例落在已加载区间之外也一致），
@@ -505,7 +1001,7 @@ export function TestCaseListView({ projects, initialFolders, initialUsers }: Tes
         open={addToPlanOpen}
         onOpenChange={setAddToPlanOpen}
         caseIds={[...selectedIds]}
-        projectId={projectId}
+        projectId={selectionProjectId}
         onAdded={clearSelection}
       />
       {peekedCase && (