@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/testcase/views/board-view.tsx

@@ -0,0 +1,546 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 用例看板视图（UI 对齐二期 PR-7b 任务 26）：消费共享 KanbanBoardView
+// （shared-kit/list-kit/kanban），story/views/kanban-view.tsx 蓝本的 testcase 裁剪版。
+// - 列 meta：state/priority 引 constants.ts META 表（图标 + 同色系浅底 tint，
+//   与 story group-resolver 的 STATE/PRIORITY_COLUMN_TINT 同构）；folder 用模块树
+//   解析列名（unassigned 哨兵 = 未分组）；type/assignee 维度列 meta 供扩展
+//   （客户端分组下拉当前不提供，见 list-view 的 boardGroupBy 收敛）。
+// - 卡片：identifier（font-mono）+ 标题（line-clamp-2）+ 行内编辑器
+//   （type/priority/state，displayOptions.properties 门控）+ UserAvatar；
+//   分组维度字段自动隐藏（groupBy=state 不渲染 StateEditor，列头已表达该维度）。
+// - 落点淡化卡（renderGhostCard）：排版一致的静态镜像，不挂 Popover/UserAvatar
+//   （蓝本 TaskCardGhost 的挂载成本口径：拖拽期每次落点变化都要挂载/卸载）。
+// - 跨列拖拽 = 改分组字段：toGroupFieldPatch 列 key → updateTestCaseFn patch
+//   （state→state / priority→priority / folder→folderId / assignee→assigneeId
+//   （__none__ 哨兵）/ type→type）；列内 reorder 由 manualOrder.onReorder 落
+//   reorderTestCasesFn（list-view 接线）。
+// - config 引用稳定性（共享组件 memo 契约）：buildBoardConfig 的全部函数字段
+//   随 config 一起经组件内 useMemo 固定，消费方（list-view）传入的回调须
+//   useCallback/useMemo 保持引用稳定。
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { Folder } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { UserAvatar } from "@/components/shared-kit";
+import { updateTestCaseFn } from "@/server/serverFns/testcase/testcase-crud";
+import type {
+  TestCaseState,
+  TestCasePriority,
+  TestCaseType,
+} from "@/server/serverFns/testcase/constants";
+import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
+import type { UserBrief } from "@/components/story/types";
+import type { FolderNodeDto } from "../folder-tree";
+import type { TestCaseUpdatePatch } from "../list/case-row";
+import { PriorityEditor } from "../inline-editors/priority-editor";
+import { StateEditor } from "../inline-editors/state-editor";
+import { TypeEditor } from "../inline-editors/type-editor";
+import {
+  TEST_CASE_PRIORITY_META,
+  TEST_CASE_STATE_META,
+  TEST_CASE_TYPE_META,
+} from "../constants";
+import { priorityLabel, stateLabel, typeLabel } from "../filters";
+import type { TestCaseDisplayProperty } from "../display/field-configs";
+import {
+  KanbanBoardView,
+  type ColumnTint,
+  type KanbanColumnMeta,
+  type KanbanModuleConfig,
+} from "@/components/shared-kit/list-kit/kanban/kanban-board-view";
+import type { ReorderEntry } from "@/components/shared-kit/list-kit/kanban/drop-commit";
+import { extractTextColors } from "@/components/shared-kit/list-kit/level-badge";
+import { cn } from "@/lib/utils";
+import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
+
+/** 看板分组维度：客户端分组下拉当前提供 state/priority/folder（none 不进看板）；
+ * assignee/type 仅供 patch 映射与扩展（简报五维口径），列数据层尚无枚举来源 */
+export type BoardGroupDimension = "state" | "priority" | "folder" | "assignee" | "type";
+
+/* ------------------------------------------------------------------ */
+/* 列 meta（label / icon / tint，META 表单一来源派生）                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * tint 的合成基色/浓度与 story group-resolver 同源（globals.css 的
+ * --kanban-column-tint[-base]），列底色为「色相淡化成实色」，吸附层与列 Card 同色。
+ */
+const TINT_ALPHA = "var(--kanban-column-tint)";
+const TINT_BASE = "var(--kanban-column-tint-base)";
+const NEUTRAL_TINT = "bg-muted";
+
+function mixTint(color: string): ColumnTint {
+  return { backgroundColor: `color-mix(in srgb, ${color} ${TINT_ALPHA}, ${TINT_BASE})` };
+}
+
+/** 状态列浅底色相（与 TEST_CASE_STATE_META 色相同族；draft/deprecated 中性无色相） */
+export const STATE_COLUMN_TINT: Record<TestCaseState, ColumnTint> = {
+  draft: { className: NEUTRAL_TINT },
+  in_review: mixTint("var(--color-amber-500)"),
+  approved: mixTint("var(--color-green-500)"),
+  deprecated: { className: NEUTRAL_TINT },
+};
+
+/** 优先级列浅底色相（PRIORITY_META 只给文字色，列底取同色号 -600 与文字同族） */
+export const PRIORITY_COLUMN_TINT: Record<TestCasePriority, ColumnTint> = {
+  p0: mixTint("var(--color-red-600)"),
+  p1: mixTint("var(--color-orange-600)"),
+  p2: mixTint("var(--color-blue-600)"),
+  p3: { className: NEUTRAL_TINT },
+};
+
+/** 语义色串（形如 "bg-x/15 text-x-600 dark:text-x-400"）取 text-* 字色类作图标色
+ *  （任务 29 起复用 LevelBadge 的 extractTextColors：保留 dark: 变体，暗色主题
+ *  列头图标不再固定亮色号） */
+function textColorOf(color: string | undefined): string | undefined {
+  return color ? extractTextColors(color) : undefined;
+}
+
+/** 列头 meta：枚举维度走 META 表 + i18n label；folder 用模块树解析；未知 key 兜底原文 */
+export function boardColumnMeta(
+  groupBy: BoardGroupDimension,
+  key: string,
+  folders: FolderNodeDto[],
+  users: UserBrief[],
+): KanbanColumnMeta {
+  switch (groupBy) {
+    case "state": {
+      const meta = TEST_CASE_STATE_META[key as TestCaseState];
+      if (!meta) return { label: key };
+      return {
+        label: stateLabel(key as TestCaseState),
+        icon: meta.icon,
+        iconClassName: textColorOf(meta.color),
+        tint: STATE_COLUMN_TINT[key as TestCaseState] ?? {},
+      };
+    }
+    case "priority": {
+      const meta = TEST_CASE_PRIORITY_META[key as TestCasePriority];
+      if (!meta) return { label: key };
+      return {
+        label: priorityLabel(key as TestCasePriority),
+        icon: meta.icon,
+        iconClassName: textColorOf(meta.color),
+        tint: PRIORITY_COLUMN_TINT[key as TestCasePriority] ?? {},
+      };
+    }
+    case "folder":
+      return {
+        label:
+          key === "unassigned"
+            ? m.testcase_folderTree_ungrouped()
+            : (folders.find((f) => f.id === key)?.name ?? key),
+        icon: Folder,
+      };
+    case "assignee": {
+      const user = users.find((u) => u.id === key);
+      return { label: user?.username ?? key };
+    }
+    case "type": {
+      const meta = TEST_CASE_TYPE_META[key as TestCaseType];
+      if (!meta) return { label: key };
+      return { label: typeLabel(key as TestCaseType), icon: meta.icon };
+    }
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* 跨列拖拽 patch 映射（列 key → updateTestCaseFn 字段）                    */
+/* ------------------------------------------------------------------ */
+
+/** 未分组/未分配哨兵（folder 沿用 groups 的 unassigned；assignee 用 __none__） */
+export function toGroupFieldPatch(
+  groupBy: BoardGroupDimension,
+  columnKey: string,
+): TestCaseUpdatePatch {
+  switch (groupBy) {
+    case "state":
+      return { state: columnKey as TestCaseState };
+    case "priority":
+      return { priority: columnKey as TestCasePriority };
+    case "folder":
+      return { folderId: columnKey === "unassigned" ? null : columnKey };
+    case "assignee":
+      return { assigneeId: columnKey === "__none__" ? null : columnKey };
+    case "type":
+      return { type: columnKey as TestCaseType };
+  }
+}
+
+/** 内容面字段（实际变更才 version+1，与 updateTestCaseFn / CaseRow 口径一致） */
+const CONTENT_FIELDS: readonly (keyof TestCaseUpdatePatch)[] = [
+  "title",
+  "precondition",
+  "steps",
+  "type",
+  "priority",
+];
+/** 分组维度字段：保存成功后看板需重拉（卡片归属列已变） */
+const GROUP_TRIGGER_FIELDS: readonly (keyof TestCaseUpdatePatch)[] = [
+  "folderId",
+  "state",
+  "priority",
+];
+
+const isContentPatch = (patch: TestCaseUpdatePatch) =>
+  CONTENT_FIELDS.some((k) => patch[k] !== undefined);
+const touchesGroupField = (patch: TestCaseUpdatePatch) =>
+  GROUP_TRIGGER_FIELDS.some((k) => patch[k] !== undefined);
+
+/* ------------------------------------------------------------------ */
+/* 卡片（行内编辑乐观 patch 三档，CaseRow 同款竞态口径裁剪版）                */
+/* ------------------------------------------------------------------ */
+
+interface BoardCaseCardProps {
+  caseItem: TestCaseSummary;
+  properties: TestCaseDisplayProperty[];
+  groupBy: BoardGroupDimension;
+  onOpenCase: (id: string) => void;
+  onPatchCase: (id: string, patch: Partial<TestCaseSummary>) => void;
+  /** 分组触发字段保存成功后刷新整板（卡片归属列已变，乐观态不会自行换列） */
+  onCaseGroupChanged?: () => void;
+}
+
+export const BoardCaseCard = memo(function BoardCaseCard({
+  caseItem,
+  properties,
+  groupBy,
+  onOpenCase,
+  onPatchCase,
+  onCaseGroupChanged,
+}: BoardCaseCardProps) {
+  // version 本地镜像 + 回滚基线 = 最后一份服务端收敛 DTO（CaseRow 审查 Important #2 同口径）
+  const versionRef = useRef(caseItem.version);
+  const serverCaseRef = useRef(caseItem);
+  const editSeqRef = useRef(0);
+  const pendingRef = useRef(0);
+
+  useEffect(() => {
+    if (pendingRef.current > 0) return;
+    if (caseItem.version !== versionRef.current) versionRef.current = caseItem.version;
+    if (caseItem !== serverCaseRef.current) serverCaseRef.current = caseItem;
+  }, [caseItem]);
+
+  const updateField = useCallback(
+    async (patch: TestCaseUpdatePatch) => {
+      const seq = ++editSeqRef.current;
+      const expectedVersion = versionRef.current;
+      const bumped = isContentPatch(patch);
+      const nextVersion = expectedVersion + (bumped ? 1 : 0);
+      versionRef.current = nextVersion;
+      pendingRef.current += 1;
+      // ① 乐观：本地立即变更（patch 字段均为标量，直并 DTO；乐观 bump version）
+      onPatchCase(caseItem.id, { ...patch, ...(bumped ? { version: nextVersion } : {}) });
+      try {
+        // ② serverFn：expectedVersion 乐观锁
+        const updated = await updateTestCaseFn({
+          data: { id: caseItem.id, expectedVersion, ...patch },
+        });
+        serverCaseRef.current = updated;
+        if (seq === editSeqRef.current) {
+          versionRef.current = updated.version;
+          onPatchCase(caseItem.id, updated);
+        } else {
+          versionRef.current = Math.max(versionRef.current, updated.version);
+        }
+        if (touchesGroupField(patch)) onCaseGroupChanged?.();
+      } catch (e) {
+        if (seq === editSeqRef.current) {
+          // ③ 失败回滚：恢复最后一份服务端收敛 DTO
+          versionRef.current = serverCaseRef.current.version;
+          onPatchCase(caseItem.id, serverCaseRef.current);
+        }
+        toastError(e, m.testcase_row_updateFailed());
+      } finally {
+        pendingRef.current -= 1;
+      }
+    },
+    [caseItem.id, onPatchCase, onCaseGroupChanged],
+  );
+
+  const setType = useCallback(
+    (v: TestCaseType) => void updateField({ type: v }),
+    [updateField],
+  );
+  const setPriority = useCallback(
+    (v: TestCasePriority) => void updateField({ priority: v }),
+    [updateField],
+  );
+  const setState = useCallback(
+    (v: TestCaseState) => void updateField({ state: v }),
+    [updateField],
+  );
+
+  // 分组维度字段自动隐藏：列头已表达该维度，卡内重复编辑器徒增噪点
+  const showType = properties.includes("type") && groupBy !== "type";
+  const showPriority = properties.includes("priority") && groupBy !== "priority";
+  const showState = properties.includes("state") && groupBy !== "state";
+  const showAssignee = properties.includes("assignee") && groupBy !== "assignee";
+
+  return (
+    <Card data-testid="testcase-board-card" className="w-full gap-0 py-3">
+      <CardContent className="space-y-2.5 px-3">
+        <div className="flex items-center justify-between gap-1.5">
+          <span className="font-mono text-xs font-medium text-muted-foreground">
+            {caseItem.identifier}
+          </span>
+          {/* 编辑器区拦截冒泡：打开弹层不触发卡片点击（peek） */}
+          <div className="flex shrink-0 items-center gap-1" onClick={(e) => e.stopPropagation()}>
+            {showType && <TypeEditor value={caseItem.type} onChange={setType} />}
+            {showPriority && (
+              <PriorityEditor value={caseItem.priority} onChange={setPriority} />
+            )}
+            {showState && <StateEditor value={caseItem.state} onChange={setState} />}
+          </div>
+        </div>
+        <div className="line-clamp-2 text-sm leading-snug font-medium">{caseItem.title}</div>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {showAssignee && caseItem.assignee && (
+            <UserAvatar
+              name={caseItem.assignee.username}
+              avatarConfig={caseItem.assignee.avatarConfig}
+              bgShape="circle"
+              bgColor={caseItem.assignee.bgColor}
+              size="sm"
+            />
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+});
+
+/**
+ * 落点预览用的静态镜像：排版与 BoardCaseCard 一致，但不挂 Popover/UserAvatar
+ * （蓝本 TaskCardGhost 口径：落点每次变化都要挂载/卸载，hooks 挂载成本不可忽略；
+ * UserAvatar 的 NotionAvatar 嵌套 SVG 单次挂载实测 ~80ms）。首字母圆几乎零成本。
+ */
+const BoardCaseCardGhost = memo(function BoardCaseCardGhost({
+  caseItem,
+  properties,
+  groupBy,
+}: {
+  caseItem: TestCaseSummary;
+  properties: TestCaseDisplayProperty[];
+  groupBy: BoardGroupDimension;
+}) {
+  const showType = properties.includes("type") && groupBy !== "type";
+  const showPriority = properties.includes("priority") && groupBy !== "priority";
+  const showState = properties.includes("state") && groupBy !== "state";
+  const showAssignee = properties.includes("assignee") && groupBy !== "assignee";
+  const TypeIcon = TEST_CASE_TYPE_META[caseItem.type]?.icon;
+  const PriorityIcon = TEST_CASE_PRIORITY_META[caseItem.priority]?.icon;
+  const StateIcon = TEST_CASE_STATE_META[caseItem.state]?.icon;
+  return (
+    <Card className="w-full gap-0 py-3">
+      <CardContent className="space-y-2.5 px-3">
+        <div className="flex items-center justify-between gap-1.5">
+          <span className="font-mono text-xs font-medium text-muted-foreground">
+            {caseItem.identifier}
+          </span>
+          <div className="flex shrink-0 items-center gap-1">
+            {showType && TypeIcon && <TypeIcon className="size-3.5 text-muted-foreground" />}
+            {showPriority && PriorityIcon && (
+              <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5 text-xs">
+                <PriorityIcon
+                  className={cn(
+                    "size-3.5",
+                    textColorOf(TEST_CASE_PRIORITY_META[caseItem.priority]?.color),
+                  )}
+                />
+                {priorityLabel(caseItem.priority)}
+              </span>
+            )}
+            {showState && StateIcon && (
+              <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5 text-xs">
+                <StateIcon
+                  className={cn(
+                    "size-3.5",
+                    textColorOf(TEST_CASE_STATE_META[caseItem.state]?.color),
+                  )}
+                />
+                {stateLabel(caseItem.state)}
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="line-clamp-2 text-sm leading-snug font-medium">{caseItem.title}</div>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {showAssignee && caseItem.assignee && (
+            <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium uppercase text-muted-foreground">
+              {caseItem.assignee.username.slice(0, 1)}
+            </span>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+});
+
+/* ------------------------------------------------------------------ */
+/* config 装配（组件内部经 useMemo 固定引用；导出供测试对同一接线断言）        */
+/* ------------------------------------------------------------------ */
+
+export interface BoardConfigDeps {
+  /** 服务端权威列集合（全列集含空列，键序 = 列序——list-view 构造） */
+  columns: Record<string, TestCaseSummary[]>;
+  groupBy: BoardGroupDimension;
+  properties: TestCaseDisplayProperty[];
+  folders: FolderNodeDto[];
+  users: UserBrief[];
+  onOpenCase: (id: string) => void;
+  onLoadMoreColumn?: (columnKey: string) => void;
+  onPatchCase: (id: string, patch: Partial<TestCaseSummary>) => void;
+  onCaseGroupChanged?: () => void;
+  onReorder: (orders: ReorderEntry[]) => Promise<void>;
+  onAutoSwitchManual?: () => Promise<void>;
+  /** 提交成功（共享层 900ms 延迟静默）/失败（立即）后的权威刷新 */
+  onRefresh?: () => void;
+  /** updateTestCaseFn 的调用通道（组件注入 RPC；测试注入 mock） */
+  updateCase: (
+    input: { id: string; expectedVersion?: number } & TestCaseUpdatePatch,
+  ) => Promise<TestCaseSummary>;
+}
+
+/** 供测试对组件内同一接线断言（组件内部 useMemo(buildBoardConfig) 消费） */
+export function buildBoardConfig(deps: BoardConfigDeps): KanbanModuleConfig<TestCaseSummary> {
+  const { groupBy, properties, folders, users, updateCase } = deps;
+  return {
+    columns: deps.columns,
+    columnMeta: (key) => boardColumnMeta(groupBy, key, folders, users),
+    cardKey: (item) => item.id,
+    renderCard: (item) => (
+      <BoardCaseCard
+        caseItem={item}
+        properties={properties}
+        groupBy={groupBy}
+        onOpenCase={deps.onOpenCase}
+        onPatchCase={deps.onPatchCase}
+        onCaseGroupChanged={deps.onCaseGroupChanged}
+      />
+    ),
+    renderGhostCard: (item) => (
+      <BoardCaseCardGhost caseItem={item} properties={properties} groupBy={groupBy} />
+    ),
+    onOpenItem: (item) => deps.onOpenCase(item.id),
+    onDropToColumn: async (itemKey, columnKey) => {
+      const patch = toGroupFieldPatch(groupBy, columnKey);
+      if (Object.keys(patch).length === 0) return;
+      // 乐观锁基线：被拖卡当前已知 version（列数据由 list-view 持有）
+      const item = Object.values(deps.columns)
+        .flat()
+        .find((c) => c.id === itemKey);
+      const updated = await updateCase({
+        id: itemKey,
+        ...(item ? { expectedVersion: item.version } : {}),
+        ...patch,
+      });
+      deps.onPatchCase(itemKey, updated);
+    },
+    onLoadMoreColumn: deps.onLoadMoreColumn,
+    capabilities: {
+      manualOrder: {
+        onReorder: deps.onReorder,
+        onAutoSwitchManual: deps.onAutoSwitchManual,
+      },
+    },
+    onRefresh: deps.onRefresh,
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/* 组件                                                                   */
+/* ------------------------------------------------------------------ */
+
+export interface TestCaseBoardViewProps {
+  columns: Record<string, TestCaseSummary[]>;
+  groupBy: BoardGroupDimension;
+  properties: TestCaseDisplayProperty[];
+  folders: FolderNodeDto[];
+  users: UserBrief[];
+  onOpenCase: (id: string) => void;
+  onLoadMoreColumn?: (columnKey: string) => void;
+  onPatchCase: (id: string, patch: Partial<TestCaseSummary>) => void;
+  /** 行内编辑触碰分组字段后重拉整板（list-view 接 fetchBoard） */
+  onCaseGroupChanged?: () => void;
+  onReorder: (orders: ReorderEntry[]) => Promise<void>;
+  onAutoSwitchManual?: () => Promise<void>;
+  onRefresh?: () => void;
+}
+
+export function TestCaseBoardView(props: TestCaseBoardViewProps) {
+  const {
+    columns,
+    groupBy,
+    properties,
+    folders,
+    users,
+    onOpenCase,
+    onLoadMoreColumn,
+    onPatchCase,
+    onCaseGroupChanged,
+    onReorder,
+    onAutoSwitchManual,
+    onRefresh,
+  } = props;
+
+  const updateCase = useCallback(
+    (input: { id: string; expectedVersion?: number } & TestCaseUpdatePatch) =>
+      updateTestCaseFn({ data: input }) as Promise<TestCaseSummary>,
+    [],
+  );
+
+  // 共享组件 memo 契约：config 函数字段引用稳定 → config 整体 useMemo，
+  // 依赖内的回调由消费方（list-view）useCallback 保证
+  const config = useMemo(
+    () =>
+      buildBoardConfig({
+        columns,
+        groupBy,
+        properties,
+        folders,
+        users,
+        onOpenCase,
+        onLoadMoreColumn,
+        onPatchCase,
+        onCaseGroupChanged,
+        onReorder,
+        onAutoSwitchManual,
+        onRefresh,
+        updateCase,
+      }),
+    [
+      columns,
+      groupBy,
+      properties,
+      folders,
+      users,
+      onOpenCase,
+      onLoadMoreColumn,
+      onPatchCase,
+      onCaseGroupChanged,
+      onReorder,
+      onAutoSwitchManual,
+      onRefresh,
+      updateCase,
+    ],
+  );
+
+  return <KanbanBoardView config={config} />;
+}

package/src/components/testcase/views/create-view-dialog.tsx

@@ -15,10 +15,12 @@
 // 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/>.
 
-// 创建（保存）筛选视图对话框（仿 story/views/create-view-dialog 同名件裁剪）。
+// 创建（保存）/编辑筛选视图对话框（仿 story/views/create-view-dialog 同名件裁剪）。
 // 用例 P1 筛选为键值状态（非 FilterCondition 体系），本对话框只采集 name/description/
 // icon；filters 键集收敛与 serverFn 调用由父组件（list-view）完成——本组件零 serverFn
-// 依赖，纯展示提交。filterSummary 为父组件预算好的当前筛选摘要（只读回显）。
+// 依赖，纯展示提交。filterSummary 为父组件预算好的当前筛选摘要（只读回显；编辑态
+// 不渲染——展示的实时筛选与被编辑视图无关，且不暗示可改筛选）。表单控件一律
+// ui 组件（Input/Textarea，AGENTS.md 禁原生表单控件）。
 import { useEffect, useState } from "react";
 import {
   Dialog,
@@ -28,16 +30,22 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { LucideIconPicker } from "@/components/shared-kit/icons/lucide-icon-picker";
 import { m } from "@/paraglide/messages.js";
 
 export interface CreateViewDialogPayload {
+  /** 编辑态必带（update 路由依据）；创建态 undefined */
+  id?: string;
   name: string;
   description?: string;
   icon: string;
 }
 
 export interface CreateViewDialogInitialValues {
+  /** 编辑态：被编辑视图 id（随 payload 原样带回） */
+  id?: string;
   name: string;
   description: string;
   icon: string;
@@ -46,13 +54,14 @@ export interface CreateViewDialogInitialValues {
 interface CreateViewDialogProps {
   open: boolean;
   onOpenChange: (v: boolean) => void;
+  mode: "create" | "edit";
   initialValues: CreateViewDialogInitialValues;
-  /** 当前筛选摘要（父组件由 filters/groupBy 状态渲染；空筛选给提示文案） */
+  /** 当前筛选摘要（父组件由 filters/groupBy 状态渲染；空筛选给提示文案；仅创建态渲染） */
   filterSummary: string;
   onSubmit: (payload: CreateViewDialogPayload) => Promise<void>;
 }
 
-export function CreateViewDialog({ open, onOpenChange, initialValues, filterSummary, onSubmit }: CreateViewDialogProps) {
+export function CreateViewDialog({ open, onOpenChange, mode, initialValues, filterSummary, onSubmit }: CreateViewDialogProps) {
   const [name, setName] = useState(initialValues.name);
   const [description, setDescription] = useState(initialValues.description);
   const [icon, setIcon] = useState(initialValues.icon);
@@ -75,6 +84,7 @@ export function CreateViewDialog({ open, onOpenChange, initialValues, filterSumm
     setError("");
     try {
       await onSubmit({
+        id: mode === "edit" ? initialValues.id : undefined,
         name: name.trim(),
         description: description.trim() || undefined,
         icon,
@@ -91,7 +101,9 @@ export function CreateViewDialog({ open, onOpenChange, initialValues, filterSumm
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-120">
         <DialogHeader>
-          <DialogTitle className="text-lg">{m.testcase_view_createView()}</DialogTitle>
+          <DialogTitle className="text-lg">
+            {mode === "edit" ? m.testcase_view_editView() : m.testcase_view_createView()}
+          </DialogTitle>
         </DialogHeader>
 
         <div className="space-y-3">
@@ -101,8 +113,7 @@ export function CreateViewDialog({ open, onOpenChange, initialValues, filterSumm
               onChange={(v: string) => setIcon(v)}
               modal
             />
-            <input
-              type="text"
+            <Input
               value={name}
               onChange={(e) => setName(e.target.value)}
               onKeyDown={(e) => {
@@ -110,22 +121,23 @@ export function CreateViewDialog({ open, onOpenChange, initialValues, filterSumm
               }}
               placeholder={m.testcase_view_namePlaceholder()}
               maxLength={50}
-              className="h-9 w-full rounded-md border border-border bg-background px-3 text-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             />
           </div>
 
-          <textarea
+          <Textarea
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             placeholder={m.testcase_view_descPlaceholder()}
             maxLength={200}
-            className="h-20 w-full resize-none rounded-md border border-border bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="h-20 resize-none"
           />
 
-          <div className="space-y-1">
-            <span className="text-xs font-medium text-muted-foreground">{m.testcase_view_filterConditions()}</span>
-            <p className="line-clamp-2 text-xs text-muted-foreground">{filterSummary}</p>
-          </div>
+          {mode === "create" && (
+            <div className="space-y-1">
+              <span className="text-xs font-medium text-muted-foreground">{m.testcase_view_filterConditions()}</span>
+              <p className="line-clamp-2 text-xs text-muted-foreground">{filterSummary}</p>
+            </div>
+          )}
         </div>
 
         {error && <p className="break-words text-sm text-destructive">{error}</p>}