@allbluecn/web-app 0.22.4 → 0.23.1

package/src/components/testcase/__tests__/step-editor.test.tsx

@@ -167,6 +167,112 @@ describe("StepEditor", () => {
     expect(screen.getByTestId("step-up-0")).toBeDisabled();
     expect(screen.getByTestId("step-down-1")).toBeDisabled();
   });
+
+  it("move 越界：首行上移/末行下移点击后数组不变、onChange 零调用", () => {
+    const onChange = vi.fn();
+    render(<StepEditorHarness initial={twoSteps} onChange={onChange} />);
+    fireEvent.click(screen.getByTestId("step-up-0")); // j = -1 越界
+    fireEvent.click(screen.getByTestId("step-down-1")); // j = 2 越界
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByTestId("step-action-0")).toHaveValue("打开登录页");
+    expect(screen.getByTestId("step-action-1")).toHaveValue("输入错误密码");
+  });
+
+  it("swap 连续操作：三行连续下移逐位轮转（官方 swapValues 跨操作联动）", () => {
+    const threeSteps: StepDraft[] = [
+      { action: "步骤一", expected: "" },
+      { action: "步骤二", expected: "" },
+      { action: "步骤三", expected: "" },
+    ];
+    render(<StepEditorHarness initial={threeSteps} />);
+    fireEvent.click(screen.getByTestId("step-down-0")); // [二,一,三]
+    fireEvent.click(screen.getByTestId("step-down-1")); // [二,三,一]
+    expect(screen.getByTestId("step-action-0")).toHaveValue("步骤二");
+    expect(screen.getByTestId("step-action-1")).toHaveValue("步骤三");
+    expect(screen.getByTestId("step-action-2")).toHaveValue("步骤一");
+  });
+
+  it("外部 value 变更回灌：父组件重置 steps 后行渲染跟随，不形成 onChange 环", () => {
+    const onChange = vi.fn();
+    const resetSteps: StepDraft[] = [{ action: "重置步", expected: "" }];
+    function ResetHarness() {
+      const [steps, setSteps] = useState<StepDraft[]>(twoSteps);
+      return (
+        <div>
+          <button
+            data-testid="harness-reset"
+            type="button"
+            onClick={() => setSteps(resetSteps)}
+          />
+          <StepEditor
+            value={steps}
+            onChange={(next) => {
+              setSteps(next);
+              onChange(next);
+            }}
+          />
+        </div>
+      );
+    }
+    render(<ResetHarness />);
+    fireEvent.click(screen.getByTestId("harness-reset"));
+    expect(screen.getByTestId("step-action-0")).toHaveValue("重置步");
+    expect(screen.queryByTestId("step-row-1")).not.toBeInTheDocument();
+    // 回灌若触发 change 监听只会同引用回声（父 setState bail out 终止）：
+    // 一切 onChange 输出必须是重置数组本身，不得出现第二份派生数组（回环特征）
+    for (const call of onChange.mock.calls) {
+      expect(call[0]).toBe(resetSteps);
+    }
+  });
+});
+
+// ── StepEditor granular（协同态分派路径：迁移后逐字保留） ──
+
+function GranularHarness({
+  initial,
+  granular,
+}: {
+  initial: StepDraft[];
+  granular: Parameters<typeof StepEditor>[0]["granular"];
+}) {
+  return <StepEditor value={initial} onChange={() => {}} granular={granular} />;
+}
+
+describe("StepEditor granular", () => {
+  afterEach(cleanup);
+
+  it("分派：增/改/删/移映射到逐操作回调而非整组 onChange", () => {
+    const granular = {
+      onInsertStep: vi.fn(),
+      onRemoveStep: vi.fn(),
+      onMoveStep: vi.fn(),
+      onStepChange: vi.fn(),
+    };
+    render(<GranularHarness initial={twoSteps} granular={granular} />);
+    fireEvent.click(screen.getByTestId("step-add"));
+    expect(granular.onInsertStep).toHaveBeenCalledWith(2, { action: "", expected: "" });
+    fireEvent.change(screen.getByTestId("step-action-0"), { target: { value: "改后" } });
+    expect(granular.onStepChange).toHaveBeenCalledWith(0, { action: "改后" });
+    fireEvent.click(screen.getByTestId("step-delete-0"));
+    expect(granular.onRemoveStep).toHaveBeenCalledWith(0);
+    fireEvent.click(screen.getByTestId("step-down-0"));
+    expect(granular.onMoveStep).toHaveBeenCalledWith(0, 1);
+  });
+
+  it("move 越界：首行上移/末行下移按钮禁用，onMoveStep 零调用", () => {
+    const granular = {
+      onInsertStep: vi.fn(),
+      onRemoveStep: vi.fn(),
+      onMoveStep: vi.fn(),
+      onStepChange: vi.fn(),
+    };
+    render(<GranularHarness initial={twoSteps} granular={granular} />);
+    expect(screen.getByTestId("step-up-0")).toBeDisabled();
+    expect(screen.getByTestId("step-down-1")).toBeDisabled();
+    fireEvent.click(screen.getByTestId("step-up-0"));
+    fireEvent.click(screen.getByTestId("step-down-1"));
+    expect(granular.onMoveStep).not.toHaveBeenCalled();
+  });
 });
 
 // ── CreateTestCaseDialog ──

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

@@ -21,6 +21,21 @@
 // 全量 count，含未加载页），行按组桶装已加载项；乐观 patch 不重排（分组仅视觉桶装，
 // 触发分组字段的编辑成功后由 list-view 刷新组计数）。folder 维度 label 用模块树解析。
 // ↑↓ 键在用例行间移动选中（为任务 10 peek 连续预览服务），选中状态由 list-view 持有。
+// 定位行走 rowVirtualizer.scrollToIndex（任务 21）：旧 querySelector + scrollIntoView
+// 在目标行位于虚拟窗口外时 DOM 节点不存在而静默失效；scrollToIndex 按测量值一次
+// scrollTo 到位。align 'auto'（裁决 T21-2）等价旧 nearest：行可见零滚动、窗口外
+// 最小滚动；scrollPaddingStart（组头高）使向上滚动落点在吸顶组头之下不被遮挡。
+//
+// 吸顶方案评估（任务 22，TanStack 优化计划阶段 6）：本列表**保留原生 CSS sticky，
+// 不迁 computeFrozenHeader 共享换算**。逐条对表：①阈值/吸附位——真实 sticky 由
+// 浏览器按 top:0 计算，与共享函数 pad=0 的「容器坐标 ≤ 0」逐像素等价（本列表
+// 滚动容器无上内边距，无 kanban 的 p-2 锚点差问题）；②活跃判定——rangeExtractor
+// 内「最后一个 startIndex 越过的组头」与共享函数同式；③顶出——真实 sticky 的
+// 覆盖语义（后到的组头滑上覆盖先到的）与共享换算的逐像素顶出存在差异，但本列表
+// 仅单层组头、无子组层，组切换的观感差异不可辨。保留理由：真实 sticky 恒等于
+// 「等价原生 sticky」这一裁决目标本身（AGENTS.md），换算副本反而是降级；且本列表
+// 无横向滚动、无滚动容器内边距、单层分组——共享函数的三个参数化点（pad/
+// subPinTop/双层区段随动）在此全部退化。禁改回常驻冻结层（AGENTS.md 违规形态）。
 import { useCallback, useMemo, useRef, useState, type CSSProperties } from "react";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronDown, ChevronRight } from "lucide-react";
@@ -142,28 +157,6 @@ export function GroupedList({ groupBy, groups, cases, folders, users, hasMore, s
   // 视觉顺序的用例 id（↑↓ 键移动口径）
   const caseIds = useMemo(() => flatRows.filter((r) => r.kind === "case").map((r) => r.c.id), [flatRows]);
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
-      e.preventDefault();
-      if (caseIds.length === 0) return;
-      const idx = selectedId ? caseIds.indexOf(selectedId) : -1;
-      const next = idx === -1
-        ? 0
-        : e.key === "ArrowDown"
-          ? Math.min(idx + 1, caseIds.length - 1)
-          : Math.max(idx - 1, 0);
-      const targetId = caseIds[next]!;
-      onSelect(targetId);
-      requestAnimationFrame(() => {
-        scrollRef.current
-          ?.querySelector(`[data-case-id="${CSS.escape(targetId)}"]`)
-          ?.scrollIntoView({ block: "nearest" });
-      });
-    },
-    [caseIds, selectedId, onSelect],
-  );
-
   const groupHeaderIndexes = useMemo(
     () => flatRows.reduce<number[]>((acc, r, i) => (r.kind === "header" ? [...acc, i] : acc), []),
     [flatRows],
@@ -180,6 +173,10 @@ export function GroupedList({ groupBy, groups, cases, folders, users, hasMore, s
     getScrollElement: () => scrollRef.current,
     estimateSize,
     overscan: OVERSCAN,
+    // scrollToIndex 落点补偿：align 'auto' 向上滚动（行在窗口上方/贴顶被组头遮）
+    // 时目标行落到 scrollPaddingStart 之下，不被吸顶组头遮挡
+    //（只影响 scrollTo 计算，不影响可见 range）
+    scrollPaddingStart: HEADER_ROW_HEIGHT,
     rangeExtractor: useCallback(
       (range) => {
         const activeHeaderIdx = [...groupHeaderIndexes].reverse().find((i) => range.startIndex >= i);
@@ -192,6 +189,37 @@ export function GroupedList({ groupBy, groups, cases, folders, users, hasMore, s
     ),
     enabled: flatRows.length > 0,
   });
+
+  // 用例 id → 扁平行 index（含组头偏移，scrollToIndex 用）
+  const flatIndexById = useMemo(() => {
+    const map = new Map<string, number>();
+    flatRows.forEach((r, i) => {
+      if (r.kind === "case") map.set(r.key, i);
+    });
+    return map;
+  }, [flatRows]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+      e.preventDefault();
+      if (caseIds.length === 0) return;
+      const idx = selectedId ? caseIds.indexOf(selectedId) : -1;
+      const next = idx === -1
+        ? 0
+        : e.key === "ArrowDown"
+          ? Math.min(idx + 1, caseIds.length - 1)
+          : Math.max(idx - 1, 0);
+      const targetId = caseIds[next]!;
+      onSelect(targetId);
+      const flatIdx = flatIndexById.get(targetId);
+      // align 'auto'（裁决 T21-2）：键盘增量导航等价旧 scrollIntoView nearest——
+      // 行可见时零滚动，不可见时最小滚动一次到位；不依赖 DOM 节点，窗口外不失效
+      if (flatIdx != null) rowVirtualizer.scrollToIndex(flatIdx, { align: "auto" });
+    },
+    [caseIds, selectedId, onSelect, flatIndexById, rowVirtualizer],
+  );
+
   const virtualRows = rowVirtualizer.getVirtualItems();
   const totalHeight = rowVirtualizer.getTotalSize();
 

package/src/components/testcase/peek-panel.tsx

@@ -23,7 +23,7 @@
 // （执行数据 P2 才有）。↑↓/Esc 走面板热键，「打开详情」navigate 到 $caseId。
 import { useCallback } from "react";
 import { Link, useNavigate } from "@tanstack/react-router";
-import { useHotkey } from "@tanstack/react-hotkeys";
+import { useAppHotkeys, useHotkey } from "@tanstack/react-hotkeys";
 import {
   ArrowRight,
   ChevronDown,
@@ -121,9 +121,12 @@ export function TestCasePeekPanel({
     PEEK_MODE_OPTIONS.find((o) => o.value === mode) ?? PEEK_MODE_OPTIONS[0]!;
   const CurrentModeIcon = currentModeOption.icon;
 
-  // Esc 仅 side-peek 面板注册（modal/full-screen 由 Dialog 自身 Esc → onOpenChange 关闭）
-  useHotkey("Escape", onClose, { enabled: isSidePeek });
-  // ↑↓ 连续 peek：面板打开期间全局生效（焦点不在列表滚动容器时仍可切换）
+  // Esc 仅 side-peek 面板注册（modal/full-screen 由 Dialog 自身 Esc → onOpenChange 关闭）；
+  // 声明即绑定：close-panel 条目单一来源（lib/hotkeys/registry.ts）
+  const hk = useAppHotkeys();
+  useHotkey(hk["close-panel"], onClose, { enabled: isSidePeek });
+  // ↑↓ 连续 peek：面板打开期间全局生效（焦点不在列表滚动容器时仍可切换）。
+  // 面板局部导航 chord，非应用级注册表条目（注册表 chat-prev/next 属聊天历史），保留字面量
   useHotkey(
     "ArrowUp",
     () => onPrevious?.(),

package/src/components/testcase/step-editor.tsx

@@ -20,7 +20,16 @@
 // 草稿——提交时由行索引推导（TestCaseStepsSchema 强制 order 从 1 起且唯一）。
 // action 必填：用户编辑/失焦过且为空的行显示行内红框 + 提示；expected 可空。
 // 最少保留 1 行（schema min(1)），仅剩一行时删除禁用。
-import { useState } from "react";
+//
+// 数组操作面（TanStack 优化任务 18）：增删改移走 TanStack Form v2 alpha.3 的
+// 官方 ArrayField 8 方法（pushValue/insertValue/removeValue/swapValues/
+// replaceValue/clearValues/moveValue/filterValues——本编辑器消费其中 4 个：
+// pushValue/removeValue/swapValues/replaceValue；insertValue/clearValues/
+// moveValue/filterValues 无对应 UI 操作，见各 handler 注释）。
+// 内部 useForm 仅作操作宿主，不消费校验/提交；受控契约与协同 granular 分派
+// 逐字保留。
+import { useEffect, useState } from "react";
+import { useForm } from "@tanstack/react-form";
 import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -77,163 +86,200 @@ export function StepEditor({ value, onChange, disabled, className, granular }: S
   const markDirty = (i: number) =>
     setDirty((prev) => (prev.has(i) ? prev : new Set(prev).add(i)));
 
-  const setStep = (i: number, patch: Partial<StepDraft>) => {
-    if (granular) {
-      granular.onStepChange(i, patch);
-      return;
-    }
-    onChange(value.map((s, idx) => (idx === i ? { ...s, ...patch } : s)));
-  };
-
-  const addStep = () => {
-    if (granular) {
-      granular.onInsertStep(value.length, { action: "", expected: "" });
-      return;
-    }
-    onChange([...value, { id: newStepDraftId(), action: "", expected: "" }]);
-  };
-
-  const removeStep = (i: number) => {
-    if (value.length <= 1) return;
-    if (granular) {
-      granular.onRemoveStep(i);
-      return;
-    }
-    onChange(value.filter((_, idx) => idx !== i));
-    setDirty((prev) => {
-      const next = new Set<number>();
-      for (const idx of prev) {
-        if (idx === i) continue;
-        next.add(idx > i ? idx - 1 : idx);
-      }
-      return next;
-    });
-  };
+  // 内部 form 宿主（TanStack Form v2 alpha.3）：仅承载 steps 数组的官方操作面
+  // （form.ArrayField），不消费校验/提交状态。受控契约保持——行渲染读 value
+  // prop；本组件发起的增删改移经 field.* 官方数组方法生效，由 change 监听
+  // 回流 onChange；外部发起的 value 变更（协同远端写、草稿重置）经下方 effect
+  // 回灌 form。回灌与回流同引用即停：回灌触发的监听把同一引用再喂给 onChange，
+  // 父组件 setState 同引用被 React bail out，不形成环。
+  const form = useForm({ defaultValues: { steps: value } });
 
-  const moveStep = (i: number, dir: -1 | 1) => {
-    const j = i + dir;
-    if (j < 0 || j >= value.length) return;
-    if (granular) {
-      granular.onMoveStep(i, j);
-      return;
+  useEffect(() => {
+    if (form.getFieldValue("steps") !== value) {
+      form.setFieldValue("steps", value);
     }
-    const next = [...value];
-    [next[i], next[j]] = [next[j]!, next[i]!];
-    onChange(next);
-    setDirty((prev) => {
-      const swapped = new Set<number>();
-      for (const idx of prev) {
-        if (idx === i) swapped.add(j);
-        else if (idx === j) swapped.add(i);
-        else swapped.add(idx);
-      }
-      return swapped;
-    });
-  };
+  }, [form, value]);
 
   return (
     <div className={cn("space-y-2", className)} data-testid="step-editor">
-      <ol className="space-y-2">
-        {value.map((step, i) => {
-          const actionEmpty = step.action.trim().length === 0;
-          const showActionError = dirty.has(i) && actionEmpty;
+      <form.ArrayField
+        name="steps"
+        listeners={[{ triggers: ["change"], run: ({ value: next }) => onChange(next) }]}
+      >
+        {(field) => {
+          // 增：官方 pushValue 追加空行（原 [...value, draft] 手写展开已废；
+          // insertValue 无对应 UI 入口，协同中段插入由 granular 分派承载）。
+          const addStep = () => {
+            if (granular) {
+              granular.onInsertStep(value.length, { action: "", expected: "" });
+              return;
+            }
+            field.pushValue({ id: newStepDraftId(), action: "", expected: "" });
+          };
+
+          // 删：官方 removeValue 按下标删除（原 filter 手写已废；filterValues
+          // 无对应 UI 操作，最少保留 1 行是业务前置而非数组机械——schema
+          // min(1) 语义，官方方法无此约束，守卫保留）。
+          const removeStep = (i: number) => {
+            if (value.length <= 1) return;
+            if (granular) {
+              granular.onRemoveStep(i);
+              return;
+            }
+            field.removeValue(i);
+            setDirty((prev) => {
+              const next = new Set<number>();
+              for (const idx of prev) {
+                if (idx === i) continue;
+                next.add(idx > i ? idx - 1 : idx);
+              }
+              return next;
+            });
+          };
+
+          // 移：官方 swapValues 相邻位交换（原手写双元素互换已废；±1 邻位下
+          // swap 与 move 等价，取与既有 UI 语义逐字一致的 swap，moveValue 的
+          // 跨位 splice 语义本编辑器用不到）。首尾越界由组件前置守卫拦截
+          // （协同 granular 分派同样受益），官方方法自身的越界守卫（warn +
+          // no-op）为第二层兜底。
+          const moveStep = (i: number, dir: -1 | 1) => {
+            const j = i + dir;
+            if (j < 0 || j >= value.length) return;
+            if (granular) {
+              granular.onMoveStep(i, j);
+              return;
+            }
+            field.swapValues(i, j);
+            setDirty((prev) => {
+              const swapped = new Set<number>();
+              for (const idx of prev) {
+                if (idx === i) swapped.add(j);
+                else if (idx === j) swapped.add(i);
+                else swapped.add(idx);
+              }
+              return swapped;
+            });
+          };
+
+          // 改：官方 replaceValue 整行替换承载字段级合并（官方面无 patch 语义，
+          // 原 map 合并映射为 replaceValue）。
+          const setStep = (i: number, patch: Partial<StepDraft>) => {
+            if (granular) {
+              granular.onStepChange(i, patch);
+              return;
+            }
+            const step = value[i];
+            if (!step) return;
+            field.replaceValue(i, { ...step, ...patch });
+          };
+
           return (
-            <li
-              key={step.id ?? `idx-${i}`}
-              className="flex items-start gap-2"
-              data-testid={`step-row-${i}`}
-            >
-              <span
-                className="mt-2 flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground"
-                aria-label={m.testcase_stepEditor_stepLabel({ n: i + 1 })}
+            <>
+              <ol className="space-y-2">
+                {value.map((step, i) => {
+                  const actionEmpty = step.action.trim().length === 0;
+                  const showActionError = dirty.has(i) && actionEmpty;
+                  return (
+                    <li
+                      key={step.id ?? `idx-${i}`}
+                      className="flex items-start gap-2"
+                      data-testid={`step-row-${i}`}
+                    >
+                      <span
+                        className="mt-2 flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground"
+                        aria-label={m.testcase_stepEditor_stepLabel({ n: i + 1 })}
+                      >
+                        {i + 1}
+                      </span>
+                      <div className="min-w-0 flex-1 space-y-1">
+                        <Input
+                          data-testid={`step-action-${i}`}
+                          value={step.action}
+                          onChange={(e) => {
+                            setStep(i, { action: e.target.value });
+                            markDirty(i);
+                          }}
+                          onBlur={() => markDirty(i)}
+                          disabled={disabled}
+                          placeholder={m.testcase_stepEditor_actionPlaceholder()}
+                          maxLength={500}
+                          aria-invalid={showActionError || undefined}
+                          className={cn("h-8 text-sm", showActionError && "border-destructive focus-visible:ring-destructive")}
+                        />
+                        {showActionError && (
+                          <p className="text-xs text-destructive" data-testid={`step-action-error-${i}`}>
+                            {m.testcase_stepEditor_actionRequired()}
+                          </p>
+                        )}
+                        <Input
+                          data-testid={`step-expected-${i}`}
+                          value={step.expected}
+                          onChange={(e) => setStep(i, { expected: e.target.value })}
+                          onBlur={() => markDirty(i)}
+                          disabled={disabled}
+                          placeholder={m.testcase_stepEditor_expectedPlaceholder()}
+                          maxLength={500}
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex shrink-0 items-center gap-0.5 pt-0.5">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="size-6 text-muted-foreground"
+                          disabled={disabled || i === 0}
+                          aria-label={m.testcase_stepEditor_moveUp()}
+                          data-testid={`step-up-${i}`}
+                          onClick={() => moveStep(i, -1)}
+                        >
+                          <ChevronUp className="size-3.5" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="size-6 text-muted-foreground"
+                          disabled={disabled || i === value.length - 1}
+                          aria-label={m.testcase_stepEditor_moveDown()}
+                          data-testid={`step-down-${i}`}
+                          onClick={() => moveStep(i, 1)}
+                        >
+                          <ChevronDown className="size-3.5" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="size-6 text-destructive/70 hover:text-destructive"
+                          disabled={disabled || value.length <= 1}
+                          aria-label={m.testcase_stepEditor_delete()}
+                          data-testid={`step-delete-${i}`}
+                          onClick={() => removeStep(i)}
+                        >
+                          <Trash2 className="size-3.5" />
+                        </Button>
+                      </div>
+                    </li>
+                  );
+                })}
+              </ol>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-8 gap-1.5"
+                disabled={disabled}
+                data-testid="step-add"
+                onClick={addStep}
               >
-                {i + 1}
-              </span>
-              <div className="min-w-0 flex-1 space-y-1">
-                <Input
-                  data-testid={`step-action-${i}`}
-                  value={step.action}
-                  onChange={(e) => {
-                    setStep(i, { action: e.target.value });
-                    markDirty(i);
-                  }}
-                  onBlur={() => markDirty(i)}
-                  disabled={disabled}
-                  placeholder={m.testcase_stepEditor_actionPlaceholder()}
-                  maxLength={500}
-                  aria-invalid={showActionError || undefined}
-                  className={cn("h-8 text-sm", showActionError && "border-destructive focus-visible:ring-destructive")}
-                />
-                {showActionError && (
-                  <p className="text-xs text-destructive" data-testid={`step-action-error-${i}`}>
-                    {m.testcase_stepEditor_actionRequired()}
-                  </p>
-                )}
-                <Input
-                  data-testid={`step-expected-${i}`}
-                  value={step.expected}
-                  onChange={(e) => setStep(i, { expected: e.target.value })}
-                  onBlur={() => markDirty(i)}
-                  disabled={disabled}
-                  placeholder={m.testcase_stepEditor_expectedPlaceholder()}
-                  maxLength={500}
-                  className="h-8 text-sm"
-                />
-              </div>
-              <div className="flex shrink-0 items-center gap-0.5 pt-0.5">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="size-6 text-muted-foreground"
-                  disabled={disabled || i === 0}
-                  aria-label={m.testcase_stepEditor_moveUp()}
-                  data-testid={`step-up-${i}`}
-                  onClick={() => moveStep(i, -1)}
-                >
-                  <ChevronUp className="size-3.5" />
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="size-6 text-muted-foreground"
-                  disabled={disabled || i === value.length - 1}
-                  aria-label={m.testcase_stepEditor_moveDown()}
-                  data-testid={`step-down-${i}`}
-                  onClick={() => moveStep(i, 1)}
-                >
-                  <ChevronDown className="size-3.5" />
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="size-6 text-destructive/70 hover:text-destructive"
-                  disabled={disabled || value.length <= 1}
-                  aria-label={m.testcase_stepEditor_delete()}
-                  data-testid={`step-delete-${i}`}
-                  onClick={() => removeStep(i)}
-                >
-                  <Trash2 className="size-3.5" />
-                </Button>
-              </div>
-            </li>
+                <Plus className="size-3.5" />
+                {m.testcase_stepEditor_add()}
+              </Button>
+            </>
           );
-        })}
-      </ol>
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        className="h-8 gap-1.5"
-        disabled={disabled}
-        data-testid="step-add"
-        onClick={addStep}
-      >
-        <Plus className="size-3.5" />
-        {m.testcase_stepEditor_add()}
-      </Button>
+        }}
+      </form.ArrayField>
     </div>
   );
 }

package/src/components/tiptap/notion-like/editor-extensions.ts

@@ -63,8 +63,6 @@ import { NodeAlignment } from "../extensions/node-alignment-extension.ts"
 import { TocNode } from "../node/toc-node/extensions/toc-node-extension.ts"
 import { MindmapExtension } from "../node/mindmap-node/mindmap-extension.ts"
 import { AnnotationNode } from "@/components/design/editor/annotation/annotation-node"
-import { LocalFile } from "../extensions/local-file/local-file-node.ts"
-import { isDesktop } from "@/lib/desktop-detect"
 import { ImageUploadNode } from "../node/image-upload-node/image-upload-node-extension.ts"
 import { TableKit } from "../node/table-node/extensions/table-node-extension.ts"
 import { TableHandleExtension } from "../node/table-node/extensions/table-handle/index.ts"
@@ -217,7 +215,6 @@ export function createNotionEditorExtensions(
     MindmapExtension,
     AnnotationNode,
     Markdown,
-    ...(isDesktop() ? [LocalFile] : []),
     // 协同态追加（Y 是唯一内容源；扩展顺序无关，插件级绑定）
     ...(collab
       ? [