@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/design/editor/versions/hooks/use-page-version-history.ts

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import { m } from '@/paraglide/messages.js'
+import { toast } from "@/components/ui/toast";
 import { emitEvent, AppEvents } from "@/lib/events";
 import { executeRestoreVersion } from "@/components/design/editor/versions/lib/restore-version";
 import type { PageVersion } from "../types";
@@ -15,8 +17,8 @@ import {
 export type RestoreTarget = {
   pageId: string;
   targetVersionNo: number;
-  targetCanvas: any;
-  targetContent: any;
+  targetCanvas: unknown;
+  targetContent: unknown;
   currentVersionNo: number;
 };
 
@@ -66,7 +68,8 @@ export function usePageVersionHistory(pageId: string) {
         })
         .catch((err) => {
           if (latestPageIdRef.current === pageId) {
-            setPageVersionsError(err.message);
+            console.error(err instanceof Error ? err.message : "unknown");
+            setPageVersionsError(m.version_loadFailed());
             setPageVersionsLoading(false);
           }
         });
@@ -91,6 +94,10 @@ export function usePageVersionHistory(pageId: string) {
       setPageVersions((prev) => [{ ...newVersion, createdAt: newVersion.createdAt.toISOString() }, ...prev]);
       setCreateDialogOpen(false);
       setCreateDialogNotes("");
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.version_createFailed());
+      // 失败保持弹窗打开可重试
     } finally {
       setCreatingPageVersion(false);
     }
@@ -106,8 +113,9 @@ export function usePageVersionHistory(pageId: string) {
       setEditDialogOpen(false);
       setEditDialogVersionId(null);
       setEditDialogNotes("");
-    } catch {
-      // silent
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.version_updateNotesFailed());
     }
   }, [editDialogVersionId, editDialogNotes]);
 
@@ -118,16 +126,26 @@ export function usePageVersionHistory(pageId: string) {
       setPageVersions((prev) => prev.filter((v) => v.id !== deleteVersionId));
       setDeleteConfirmOpen(false);
       setDeleteVersionId(null);
-    } catch {
-      // silent
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.prd_deleteFailed());
+      // 失败保持确认框打开可重试
     }
   }, [deleteVersionId]);
 
   const restorePageVersion = useCallback(
     async (versionId: string) => {
-      const pv = await getDesignPageVersionFn({ data: { pageVersionId: versionId } });
-
-      const currentVersionNo = pageVersions[0]?.version ?? 0;
+      let pv;
+      try {
+        pv = await getDesignPageVersionFn({ data: { pageVersionId: versionId } });
+      } catch (err) {
+        console.error(err instanceof Error ? err.message : "unknown");
+        toast.error(m.version_loadFailed());
+        return;
+      }
+
+      // 不假设服务端排序：显式取最大 version 号为当前最新版本
+      const currentVersionNo = pageVersions.reduce((max, v) => Math.max(max, v.version), 0);
       setRestoreData({
         pageId: pv.pageId,
         targetVersionNo: pv.version,
@@ -153,16 +171,27 @@ export function usePageVersionHistory(pageId: string) {
       setRestoreConfirmOpen(false);
       setRestoreData(null);
       listDesignPageVersionsFn({ data: { pageId: restoreData.pageId } })
-        .then((data) => setPageVersions(data.map((v) => ({ ...v, createdAt: v.createdAt.toISOString() }))));
-    } catch {
-      // silent
+        .then((data) => setPageVersions(data.map((v) => ({ ...v, createdAt: v.createdAt.toISOString() }))))
+        .catch((err) => {
+          console.error(err instanceof Error ? err.message : "unknown");
+          toast.error(m.version_loadFailed());
+        });
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.version_restoreFailed());
+      // 失败保持确认框打开可重试
     } finally {
       setRestoreLoading(false);
     }
   }, [restoreData]);
 
   const previewVersion = useCallback(async (versionId: string) => {
-    const isLatest = pageVersions.length > 0 && pageVersions[0].id === versionId;
+    // 不假设服务端排序：显式取最大 version 号所在条目为「最新」
+    const latest = pageVersions.reduce<PageVersion | null>(
+      (acc, v) => (!acc || v.version > acc.version ? v : acc),
+      null,
+    );
+    const isLatest = !!latest && latest.id === versionId;
 
     if (previewVersionId === versionId || isLatest) {
       setPreviewVersionId(null);
@@ -170,7 +199,14 @@ export function usePageVersionHistory(pageId: string) {
       return;
     }
 
-    const pv = await getDesignPageVersionFn({ data: { pageVersionId: versionId } });
+    let pv;
+    try {
+      pv = await getDesignPageVersionFn({ data: { pageVersionId: versionId } });
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.version_loadFailed());
+      return;
+    }
     setPreviewVersionId(versionId);
     emitEvent(AppEvents.pageVersion.preview, { versionId, canvas: pv.canvas, content: pv.content });
   }, [previewVersionId, pageVersions]);

package/src/components/design/editor/versions/lib/restore-version.ts

@@ -16,26 +16,22 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { updateDesignPageFn } from '@/server/serverFns/design/pages'
-import { listDesignPageVersionsFn, createDesignPageVersionFn } from '@/server/serverFns/design/page-versions'
+import { createDesignPageVersionFn } from '@/server/serverFns/design/page-versions'
 import { emitEvent, AppEvents } from "@/lib/events";
 
 export async function executeRestoreVersion(
   pageId: string,
   targetVersionNo: number,
-  targetCanvas: any,
-  targetContent: any,
+  targetCanvas: unknown,
+  targetContent: unknown,
 ) {
-  const versions = await listDesignPageVersionsFn({ data: { pageId, limit: 1 } })
-
-  if (versions.length > 0) {
-    await updateDesignPageFn({
-      data: {
-        pageId,
-        canvas: targetCanvas,
-        content: targetContent,
-      },
-    })
-  }
+  // 恢复三步（尽力原子）：
+  // ① 先把「恢复前」的当前内容快照成安全版本（缺省 canvas/content 时服务端
+  //    从事务内读页面现值落版本）——后续任何一步失败都可从该版本找回；
+  // ② 落目标版本的版本记录（restoredFromVersion 标记来源）；
+  // ③ 最后才用目标内容覆盖页面。旧实现先覆盖页面再补版本记录，中途失败
+  //    会把用户当前工作成果永久覆盖丢失。
+  await createDesignPageVersionFn({ data: { pageId } })
 
   await createDesignPageVersionFn({
     data: {

package/src/components/design/editor/versions/lib/semver.ts

@@ -0,0 +1,25 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { type DesignVersionWithSemver as DesignVersion } from "@allbluecn/kernel";
+
+/** semver 三元组降序比较器（发布历史排序唯一来源，供 use-design-versions /
+ * page-version-panel 等消费，避免各处重复实现漂移） */
+export function compareDesignVersionDesc(a: DesignVersion, b: DesignVersion): number {
+  if (a.major !== b.major) return b.major - a.major;
+  if (a.minor !== b.minor) return b.minor - a.minor;
+  return b.patch - a.patch;
+}
+
+/** 由最新版本推算下一个版本号（patch 进位规则：99 归零进位） */
+export function nextVersionAfter(latest: Pick<DesignVersion, "major" | "minor" | "patch">): {
+  major: number;
+  minor: number;
+  patch: number;
+} {
+  let patch = latest.patch + 1;
+  let minor = latest.minor;
+  let major = latest.major;
+  if (patch > 99) { patch = 0; minor += 1; }
+  if (minor > 99) { minor = 0; major += 1; }
+  return { major, minor, patch };
+}

package/src/components/design/editor/versions/page-version-panel.tsx

@@ -22,13 +22,15 @@ import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { ConfirmDialog } from "@/components/confirm-dialog";
+import { toast } from "@/components/ui/toast";
 import { PageVersionTree, type VersionSnapshot } from "./page-version-tree";
 import { RestoreVersionDialog } from "./restore-version-dialog";
 import { Plus } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { type DesignVersionWithSemver as DesignVersion, type DesignVersionWithPages } from "@allbluecn/kernel";
 import { SUBTABS } from "./constants";
-import { PageVersionPanelProps, type PageVersion } from "./types";
+import { type PageVersionPanelProps, type PageVersion } from "./types";
+import { compareDesignVersionDesc } from "./lib/semver";
 import { CreateVersionDialog } from "./components/create-version-dialog";
 import { EditVersionDialog } from "./components/edit-version-dialog";
 import { DeleteVersionDialog } from "./components/delete-version-dialog";
@@ -127,36 +129,38 @@ export function PageVersionPanel({ designId, pageId }: PageVersionPanelProps) {
     for (const [pid, versionNo] of selectedPageVersionNo) {
       selectedPageVersionsObj[pid] = versionNo;
     }
-    const version = (await createDesignVersionFn({
-      data: {
-        designId,
-        major: parseInt(major),
-        minor: parseInt(minor),
-        patch: parseInt(patch),
-        notes,
-        pageIds: Array.from(selectedPageIds),
-        selectedPageVersions: selectedPageVersionsObj,
-      },
-    })) as unknown as DesignVersion;
-    upsertVersion(version);
-    setNotes("");
+    try {
+      // serverFn 返回 prisma DesignVersion 行（pageVersions 为 Json），与 kernel
+      // DesignVersionWithSemver 的 pageVersions 类型差异需跨包对齐，此处断言收敛
+      const version = (await createDesignVersionFn({
+        data: {
+          designId,
+          major: Number.parseInt(major, 10) || 0,
+          minor: Number.parseInt(minor, 10) || 0,
+          patch: Number.parseInt(patch, 10) || 0,
+          notes,
+          pageIds: Array.from(selectedPageIds),
+          selectedPageVersions: selectedPageVersionsObj,
+        },
+      })) as unknown as DesignVersion;
+      upsertVersion(version);
+      setNotes("");
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.version_publishFailed());
+    }
   }, [designId, major, minor, patch, notes, selectedPageVersionNo, selectedPageIds, upsertVersion, setNotes]);
 
   const publish = useCallback(() => {
     if (isUpdateMode) {
       setConfirmUpdateOpen(true);
     } else {
-      const currentMajor = parseInt(major);
-      const currentMinor = parseInt(minor);
-      const currentPatch = parseInt(patch);
+      const currentMajor = Number.parseInt(major, 10) || 0;
+      const currentMinor = Number.parseInt(minor, 10) || 0;
+      const currentPatch = Number.parseInt(patch, 10) || 0;
 
       if (versions.length > 0) {
-        const sortedVersions = [...versions].sort((a, b) => {
-          if (a.major !== b.major) return b.major - a.major;
-          if (a.minor !== b.minor) return b.minor - a.minor;
-          return b.patch - a.patch;
-        });
-        const latestVersion = sortedVersions[0];
+        const latestVersion = [...versions].sort(compareDesignVersionDesc)[0];
 
         const expectedPatch = latestVersion.patch + 1;
         const expectedMinor = latestVersion.minor + (latestVersion.patch === 99 ? 1 : 0);
@@ -187,37 +191,47 @@ export function PageVersionPanel({ designId, pageId }: PageVersionPanelProps) {
     const allPageIds = getAllPageIds(tree);
     const leafIds = allPageIds.filter((id) => selectedPageIds.has(id));
     if (leafIds.length === 0) return;
+    let cancelled = false; // 过期响应守卫：快速变更选择时旧批次不得覆盖
     const fetchVersions = async () => {
-      const results = await Promise.all(
-        leafIds.map(async (pid) => {
-          const versions = await listDesignPageVersionsFn({ data: { pageId: pid, limit: 100 } });
-          return { pageId: pid, versions };
-        })
-      );
-      const map = new Map<string, PageVersion[]>();
-      for (const r of results) {
-        if (r) map.set(r.pageId, r.versions.map((v) => ({ ...v, createdAt: v.createdAt.toISOString() })));
-      }
-      setAllPageVersionsByPage(map);
-      setSelectedPageVersionNo((prev) => {
-        const next = new Map(prev);
+      try {
+        const results = await Promise.all(
+          leafIds.map(async (pid) => {
+            const versions = await listDesignPageVersionsFn({ data: { pageId: pid, limit: 100 } });
+            return { pageId: pid, versions };
+          })
+        );
+        if (cancelled) return;
+        const map = new Map<string, PageVersion[]>();
         for (const r of results) {
-          if (r && r.versions.length > 0 && !next.has(r.pageId)) {
-            next.set(r.pageId, r.versions[0].version);
-          }
+          if (r) map.set(r.pageId, r.versions.map((v) => ({ ...v, createdAt: v.createdAt.toISOString() })));
         }
-        return next;
-      });
+        setAllPageVersionsByPage(map);
+        setSelectedPageVersionNo((prev) => {
+          const next = new Map(prev);
+          for (const r of results) {
+            if (r && r.versions.length > 0 && !next.has(r.pageId)) {
+              next.set(r.pageId, r.versions[0].version);
+            }
+          }
+          return next;
+        });
+      } catch (err) {
+        if (cancelled) return;
+        console.error(err instanceof Error ? err.message : "unknown");
+        toast.error(m.version_loadFailed());
+      }
     };
     fetchVersions();
+    return () => { cancelled = true; };
   }, [isPublishTab, selectedPageIds, tree]);
 
   return (
     <div className="flex flex-col h-full">
       <div className="shrink-0 flex items-center h-10 mt-2">
         {SUBTABS.map((tab) => (
-          <button
+          <Button
             key={tab.key}
+            variant="ghost"
             onClick={() => setActiveSubTab(tab.key)}
             className={cn(
               "flex-1 flex items-center justify-center h-full transition-colors",
@@ -230,9 +244,9 @@ export function PageVersionPanel({ designId, pageId }: PageVersionPanelProps) {
               "flex items-center justify-center gap-1.5 self-stretch text-xs font-medium border-b-2 border-transparent transition-colors",
               activeSubTab === tab.key && "border-primary"
             )}>
-              {tab.icon} {tab.label()}
+              {tab.icon} {tab.labelFn()}
             </span>
-          </button>
+          </Button>
         ))}
       </div>
 
@@ -388,12 +402,12 @@ export function PageVersionPanel({ designId, pageId }: PageVersionPanelProps) {
                   onRestore={async (snapshot: VersionSnapshot) => {
                     let targetCanvas = snapshot.canvas;
                     let targetContent = snapshot.content;
-                    if (snapshot.pageVersionId && !targetCanvas) {
-                      const pv = await getDesignPageVersionFn({ data: { pageVersionId: snapshot.pageVersionId } });
-                      targetCanvas = pv.canvas;
-                      targetContent = pv.content;
-                    }
                     try {
+                      if (snapshot.pageVersionId && !targetCanvas) {
+                        const pv = await getDesignPageVersionFn({ data: { pageVersionId: snapshot.pageVersionId } });
+                        targetCanvas = pv.canvas;
+                        targetContent = pv.content;
+                      }
                       const latest = await listDesignPageVersionsFn({ data: { pageId: snapshot.pageId, limit: 1 } });
                       const currentVersionNo = latest[0]?.version ?? 0;
                       setRestoreData({
@@ -404,8 +418,9 @@ export function PageVersionPanel({ designId, pageId }: PageVersionPanelProps) {
                         currentVersionNo,
                       });
                       setRestoreConfirmOpen(true);
-                    } catch {
-                      // silent
+                    } catch (err) {
+                      console.error(err instanceof Error ? err.message : "unknown");
+                      toast.error(m.version_loadFailed());
                     }
                   }}
                 />

package/src/components/design/editor/versions/page-version-tree.tsx

@@ -33,8 +33,10 @@ export interface VersionSnapshot {
   parentId?: string | null;
   version: number;
   pageVersionId?: string | null;
-  canvas?: any;
-  content?: any;
+  // 快照载荷为服务端 JSON 透传，由 restore 链路（executeRestoreVersion /
+  // updateDesignPageFn validator）按 unknown 接收
+  canvas?: unknown;
+  content?: unknown;
   isPlaceholder?: boolean;
 }
 
@@ -86,11 +88,14 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
   const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
   const timezone = useTimezone();
 
-  const toggleNode = (id: string) => {
+  // 展开态以 `${versionId}:${pageId}` 为 key：同一 pageId 在不同 PRD 版本中
+  // id 相同，共享 key 会让版本 A 的折叠连带影响版本 B
+  const toggleNode = (versionId: string, pageId: string) => {
+    const key = `${versionId}:${pageId}`;
     setExpandedNodes((prev) => {
       const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
       return next;
     });
   };
@@ -100,7 +105,7 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
     versionId: string,
     depth: number = 0
   ): React.ReactNode => {
-    const isExpanded = expandedNodes.has(node.id);
+    const isExpanded = expandedNodes.has(`${versionId}:${node.id}`);
     const hasChildren = node.children.length > 0;
     const isFolder = node.type === "folder";
     const hasPageVersion = !!node.pageVersion;
@@ -118,17 +123,18 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
           style={{ paddingLeft: `${depth * 16}px` }}
         >
           {hasChildren ? (
-            <button
-              type="button"
-              onClick={() => toggleNode(node.id)}
-              className="shrink-0 hover:bg-muted rounded p-0.5 -m-0.5"
+            <Button
+              variant="ghost"
+              onClick={() => toggleNode(versionId, node.id)}
+              aria-label={node.name}
+              className="shrink-0 h-auto p-0.5 -m-0.5 rounded hover:bg-muted"
             >
               {isExpanded ? (
                 <ChevronDown className="size-3 shrink-0" />
               ) : (
                 <ChevronRight className="size-3 shrink-0" />
               )}
-            </button>
+            </Button>
           ) : (
             <span className="size-3 shrink-0" />
           )}
@@ -154,11 +160,12 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
           {showRestoreButton && node.pageVersion && (
             <>
               <span className="text-muted-foreground text-[10px]">
-                PAGE v{node.pageVersion.version}
+                {m.shareDirectory_pageVersion({ version: node.pageVersion.version })}
               </span>
               <Tooltip>
                 <TooltipTrigger render={<Button variant="ghost"
                     size="icon"
+                    aria-label={m.version_restoreToCurrent()}
                     className="size-6"
                     onClick={() => node.pageVersion && onRestore(node.pageVersion)} />}>
                     <RotateCcw className="size-3" />
@@ -180,6 +187,12 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
     );
   };
 
+  // 树结构一次 memo 化：渲染与「展开合并」effect 共用，避免每次渲染重建
+  const treesByVersion = useMemo(
+    () => new Map(versions.map((v) => [v.id, buildTree(v.pageVersions || [])])),
+    [versions],
+  );
+
   const hasTreeStructure = useMemo(() => {
     if (!versions.length) return false;
     const v = versions[0];
@@ -203,8 +216,7 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
 
   useEffect(() => {
     const nodeIdsWithChildren = new Set<string>();
-    for (const v of versions) {
-      const roots = buildTree(v.pageVersions || []);
+    for (const [, roots] of treesByVersion) {
       const walk = (nodes: TreeNode[]) => {
         for (const n of nodes) {
           if (n.children.length > 0) nodeIdsWithChildren.add(n.id);
@@ -226,12 +238,12 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
       for (const id of nodeIdsWithChildren) next.add(id);
       return next;
     });
-  }, [versions]);
+  }, [treesByVersion]);
 
   return (
     <div className="space-y-1">
       {versions.map((v) => {
-        const roots = buildTree(v.pageVersions || []);
+        const roots = treesByVersion.get(v.id) ?? [];
         const isExpanded = expandedVersionId === v.id;
 
         return (
@@ -274,10 +286,11 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
                     >
                       <File className="size-3 shrink-0 text-muted-foreground" />
                       <span className="flex-1 truncate">{pv.pageName}</span>
-                      <span className="text-muted-foreground text-[10px]">PAGE v{pv.version}</span>
+                      <span className="text-muted-foreground text-[10px]">{m.shareDirectory_pageVersion({ version: pv.version })}</span>
                       <Tooltip>
                         <TooltipTrigger render={<Button variant="ghost"
                             size="icon"
+                            aria-label={m.version_restoreToCurrent()}
                             className="size-6"
                             onClick={() => onRestore(pv)} />}>
                             <RotateCcw className="size-3" />

package/src/components/error/global-error-boundary.tsx

@@ -22,17 +22,15 @@ import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTi
 import { Button } from '@/components/ui/button'
 import { m } from "@/paraglide/messages.js";
 
-export function GlobalErrorBoundary({ error, info }: { error: unknown; info?: { componentStack: string } }) {
+export function GlobalErrorBoundary({ error, info: _info }: { error: unknown; info?: { componentStack: string } }) {
+  // info.componentStack 暂无展示/上报通道，不透传（避免未使用形参）
   return (
-      <GlobalErrorBoundaryInner error={error} info={info} />
+      <GlobalErrorBoundaryInner error={error} />
   )
 }
 
-function GlobalErrorBoundaryInner({ error, info }: { error: unknown; info?: { componentStack: string } }) {const { pathname, searchStr } = useLocation()
+function GlobalErrorBoundaryInner({ error }: { error: unknown }) {const { pathname, searchStr } = useLocation()
   const unauthorized = isUnauthorizedError(error)
-  const target = unauthorized
-    ? { to: '/login' as const, search: { redirect: pathname + searchStr } }
-    : { to: '/' as const }
   const targetLabel = unauthorized ? m.common_errorPage_goLogin() : m.common_errorPage_goHome()
 
   return (
@@ -52,9 +50,16 @@ function GlobalErrorBoundaryInner({ error, info }: { error: unknown; info?: { co
           </EmptyDescription>
         </EmptyHeader>
         <EmptyContent className="flex-row justify-center">
-          <Button render={<Link to={target.to} search={target.search as never} />}  nativeButton={false}>
+          {/* 两分支 search 形状不同（redirect vs 无），分开渲染避免 as never 抹平契约 */}
+          {unauthorized ? (
+            <Button render={<Link to="/login" search={{ redirect: pathname + searchStr }} />} nativeButton={false}>
               {targetLabel}
             </Button>
+          ) : (
+            <Button render={<Link to="/" />} nativeButton={false}>
+              {targetLabel}
+            </Button>
+          )}
         </EmptyContent>
       </Empty>
     </div>

package/src/components/forms/app-array-field.tsx

@@ -53,7 +53,8 @@ export function AppArrayField<TItem>({
       description={description}
     >
       {(field) => {
-        const values = field.value as TItem[]
+        // 字段初值未定义（defaultValues 缺 key）时兜底空数组，防 .length 抛错
+        const values = (field.value as TItem[] | undefined) ?? []
         return (
           <div className="space-y-2">
             {values.length === 0 ? (
@@ -69,6 +70,7 @@ export function AppArrayField<TItem>({
                     type="button"
                     variant="ghost"
                     size="icon"
+                    aria-label={m.common_form_removeItem()}
                     onClick={() => field.removeValue(index)}
                   >
                     <Trash2 className="h-4 w-4" />