@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/design/editor/pages-tree/design-tree-page-tab.tsx

@@ -36,6 +36,8 @@ import {
   ContextMenuSeparator,
 } from "@/components/ui/context-menu";
 import { ConfirmDialog } from "@/components/confirm-dialog";
+import { Button } from "@/components/ui/button";
+import { toast } from "@/components/ui/toast";
 import { buildTree, TreeNode, DesignPage } from "@/lib/design-tree-utils";
 import { listDesignPagesFn, createDesignPageFn, updateDesignPageFn, deleteDesignPageFn } from "@/server/serverFns/design/pages";
 import { m } from "@/paraglide/messages.js";
@@ -60,6 +62,8 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
   const [createState, createDispatch] = useReducer(createReducer, initialCreateState);
   const creatingRef = useRef<HTMLInputElement>(null);
   const editingRef = useRef<HTMLInputElement>(null);
+  const knownExpandableIdsRef = useRef<Set<string>>(new Set());
+  const creatingBusyRef = useRef(false);
 
   useEffect(() => {
     if (editState.editingId) {
@@ -84,6 +88,9 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
   }, []);
 
   useEffect(() => {
+    // 仅对「新出现」的含子节点 id 做一次默认展开：tree 任意变化（编辑/移动/
+    // 新建后的 refreshPages）都不再复活用户手动折叠的节点
+    const knownExpandableIds = knownExpandableIdsRef.current;
     const nodeIdsWithChildren = new Set<string>();
     const walk = (nodes: TreeNode[]) => {
       for (const node of nodes) {
@@ -93,12 +100,14 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
     };
     walk(tree);
     setExpandedNodes(prev => {
-      let hasNew = false;
-      for (const id of nodeIdsWithChildren) { if (!prev.has(id)) { hasNew = true; break; } }
-      if (!hasNew) return prev;
       const next = new Set(prev);
-      for (const id of nodeIdsWithChildren) next.add(id);
-      return next;
+      let changed = false;
+      for (const id of nodeIdsWithChildren) {
+        if (knownExpandableIds.has(id)) continue;
+        knownExpandableIds.add(id);
+        if (!next.has(id)) { next.add(id); changed = true; }
+      }
+      return changed ? next : prev;
     });
   }, [tree]);
 
@@ -121,12 +130,23 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
       .then((data) => {
         const pages = data as DesignPage[];
         if (pages.length === 0 && !homeCreated.current) {
-          homeCreated.current = true;
-          createDesignPageFn({ data: { designId, name: m.prd_treePage_homeName(), type: "page" } }).then(() => refreshPages());
+          createDesignPageFn({ data: { designId, name: m.prd_treePage_homeName(), type: "page" } })
+            .then(() => {
+              homeCreated.current = true; // 成功后才置位，失败允许下次刷新重试
+              refreshPages();
+            })
+            .catch((err) => {
+              console.error(err instanceof Error ? err.message : "unknown");
+              toast.error(m.treePage_createFailed());
+            });
           return;
         }
         setPages(pages);
         setTree(buildTree(data as DesignPage[]));
+      })
+      .catch((err) => {
+        console.error(err instanceof Error ? err.message : "unknown");
+        toast.error(m.treePage_loadFailed());
       });
   }, [designId]);
 
@@ -140,36 +160,57 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
 
   const confirmEdit = useCallback(async (id: string, name: string) => {
     if (!name.trim()) return;
-    await updateDesignPageFn({ data: { pageId: id, name: name.trim() } });
+    try {
+      await updateDesignPageFn({ data: { pageId: id, name: name.trim() } });
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.treePage_renameFailed());
+      return; // 失败保持编辑态可重试
+    }
     editDispatch({ type: "CANCEL_EDIT" });
     refreshPages();
   }, [refreshPages]);
 
   const deleteNode = useCallback(async (id: string) => {
-    await deleteDesignPageFn({ data: { pageId: id } });
+    try {
+      await deleteDesignPageFn({ data: { pageId: id } });
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.treePage_deleteFailed());
+      return; // 失败保持确认框可重试
+    }
     refreshPages();
     setDeleteConfirmId(null);
   }, [refreshPages]);
 
   const duplicateNode = useCallback(async (node: TreeNode) => {
-    await createDesignPageFn({ data: { designId, name: node.name + m.prd_treePage_duplicateSuffix(), type: node.type, parentId: node.parentId } });
+    try {
+      await createDesignPageFn({ data: { designId, name: node.name + m.prd_treePage_duplicateSuffix(), type: node.type, parentId: node.parentId } });
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.treePage_duplicateFailed());
+      return;
+    }
     refreshPages();
   }, [designId, refreshPages]);
 
+  // 拖拽高频路径（dragOver 每次移动触发）共用一份 parentMap，避免每次调用重建
+  const parentMap = useMemo(() => {
+    const map = new Map<string, string | null>();
+    pages.forEach(p => map.set(p.id, p.parentId));
+    return map;
+  }, [pages]);
+
   const isDescendantOf = useCallback((id: string, ancestorId: string): boolean => {
-    const parentMap = new Map<string, string | null>();
-    pages.forEach(p => parentMap.set(p.id, p.parentId));
     let current = parentMap.get(id);
     while (current !== undefined) {
       if (current === ancestorId) return true;
       current = current ? parentMap.get(current) : undefined;
     }
     return false;
-  }, [pages]);
+  }, [parentMap]);
 
   const getDepth = useCallback((nodeId: string): number => {
-    const parentMap = new Map<string, string | null>();
-    pages.forEach(p => parentMap.set(p.id, p.parentId));
     let depth = 0;
     let current = parentMap.get(nodeId);
     while (current !== undefined && current !== null) {
@@ -177,7 +218,7 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
       current = parentMap.get(current);
     }
     return depth;
-  }, [pages]);
+  }, [parentMap]);
 
   const calcInsertOrder = (siblings: DesignPage[], position: "above" | "below", targetIndex: number): number => {
     const spacing = 1000;
@@ -200,13 +241,17 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
   }, []);
 
   const handleCreateConfirm = useCallback(async () => {
-    if (!createState.creatingType) return;
+    if (!createState.creatingType || creatingBusyRef.current) return;
+    creatingBusyRef.current = true; // Enter + blur 双触发守卫，防重复创建
     const name = createState.creatingName.trim() || (createState.creatingType === "folder" ? m.prd_treePage_unnamedFolder() : m.prd_treePage_unnamed());
     try {
       await createDesignPageFn({ data: { designId, name, type: createState.creatingType } });
       refreshPages();
     } catch (err) {
-      console.error("Create failed:", err);
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.treePage_createFailed());
+    } finally {
+      creatingBusyRef.current = false;
     }
     createDispatch({ type: "FINISH_CREATE" });
   }, [createState.creatingType, createState.creatingName, designId, refreshPages]);
@@ -246,7 +291,6 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
       e.dataTransfer.dropEffect = "move";
       dragDispatch({ type: "SET_DRAG_OVER", nodeId: node.id, position: "above" });
      } else if (y < height * 0.75) {
-       const draggedId = dragNodeIdRef.current;
        const targetDepth = getDepth(node.id);
        let canDropInside = targetDepth <= 1;
        if (node.type === "folder" && targetDepth === 1 && draggedId && pages.some(p => p.parentId === draggedId)) {
@@ -299,20 +343,25 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
         }
         refreshPages();
       } catch (err) {
-        console.error("Move failed:", err);
+        // 多节点移动非原子：中途失败时刷新视图回滚到服务端实际状态并提示
+        console.error(err instanceof Error ? err.message : "unknown");
+        toast.error(m.treePage_moveFailed());
+        refreshPages();
       }
-    } else {
+    } else if (dragState.dragPosition === "above" || dragState.dragPosition === "below") {
       const newParentId = targetNode.parentId;
       const siblings = pages.filter(p => p.parentId === targetNode.parentId)
         .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
       const targetIndex = siblings.findIndex(s => s.id === targetNode.id);
-      const newOrder = calcInsertOrder(siblings, dragState.dragPosition!, targetIndex);
+      const newOrder = calcInsertOrder(siblings, dragState.dragPosition, targetIndex);
 
       try {
         await moveNode(draggedId, newParentId, newOrder);
         refreshPages();
       } catch (err) {
-        console.error("Move failed:", err);
+        console.error(err instanceof Error ? err.message : "unknown");
+        toast.error(m.treePage_moveFailed());
+        refreshPages();
       }
     }
     handleDragEnd();
@@ -331,7 +380,9 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
       await moveNode(draggedId, null, newOrder);
       refreshPages();
     } catch (err) {
-      console.error("Move failed:", err);
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.treePage_moveFailed());
+      refreshPages();
     }
     handleDragEnd();
   };
@@ -382,17 +433,18 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
                  <div className="absolute left-2 right-2 bottom-0 h-0.5 rounded-full bg-primary pointer-events-none" />
                )}
                {hasChildren ? (
-                 <button
+                 <Button
+                   variant="ghost"
                    data-chevron
-                   type="button"
+                   aria-label={actualExpanded ? m.treePage_collapse() : m.treePage_expand()}
                    onClick={(e) => {
                      e.stopPropagation();
                      toggleNode(node.id);
                    }}
-                   className="shrink-0 hover:bg-muted rounded p-0.5 -m-0.5 z-10"
+                   className="shrink-0 hover:bg-muted rounded p-0.5 -m-0.5 z-10 h-auto w-auto"
                  >
                    <ChevronRight className={cn("size-3.5 shrink-0 text-muted-foreground/60 transition-transform duration-150", actualExpanded && "rotate-90")} />
-                 </button>
+                 </Button>
                ) : (
                  <span className="size-3.5 shrink-0" />
                )}
@@ -423,26 +475,10 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
           <ContextMenuContent className="min-w-36 space-y-1.5">
             <ContextMenuItem onClick={() => editDispatch({ type: "START_EDIT", id: node.id, name: node.name })}>
               {m.treePage_rename()}
-              {/* <ContextMenuShortcut className="text-xs">Ctrl+Shift+R</ContextMenuShortcut> */}
             </ContextMenuItem>
             <ContextMenuItem onClick={() => duplicateNode(node)}>
               {m.treePage_duplicate()}
             </ContextMenuItem>
-            {/* <ContextMenuItem onClick={() => {
-              const targetName = window.prompt("输入目标页面/文件夹名称");
-              if (targetName) {
-                const targetNode = pages.find(p => p.name === targetName);
-                if (targetNode && getDepth(targetNode.id) <= 1) {
-                  fetch(`/api/prd/pages/${node.id}`, {
-                    method: "PUT",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ parentId: targetNode.id }),
-                  }).then(() => refreshPages());
-                }
-              }
-            }}>
-              移动到...
-            </ContextMenuItem> */}
             <ContextMenuSeparator />
             <ContextMenuItem onClick={() => setDeleteConfirmId(node.id)} className="text-destructive">
               {m.treePage_delete()}
@@ -484,7 +520,7 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
             />
           </div>
           <Tooltip>
-            <TooltipTrigger render={<button onClick={() => handleStartCreate("folder")}
+            <TooltipTrigger render={<Button variant="ghost" aria-label={m.treePage_newFolder()} onClick={() => handleStartCreate("folder")}
                 className="size-6 shrink-0 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground" />}>
                 <FolderPlus className="size-3.5" />
               </TooltipTrigger>
@@ -493,7 +529,7 @@ export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPa
             </TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger render={<button onClick={() => handleStartCreate("page")}
+            <TooltipTrigger render={<Button variant="ghost" aria-label={m.treePage_newPage()} onClick={() => handleStartCreate("page")}
                 className="size-6 shrink-0 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground" />}>
                 <Plus className="size-3.5" />
               </TooltipTrigger>

package/src/components/design/editor/pages-tree/design-tree-reducer.ts

@@ -74,10 +74,9 @@ export function editReducer(state: TreeEditState, action: EditAction): TreeEditS
 export function createReducer(state: TreeCreateState, action: CreateAction): TreeCreateState {
   switch (action.type) {
     case "START_CREATE":
-      return {
-        creatingType: action.creatingType,
-        creatingName: action.creatingType === "folder" ? "Unnamed Folder" : "Unnamed",
-      };
+      // 预填空串：默认名（「未命名/未命名文件夹」）由展示层与创建兜底统一走
+      // i18n（m.prd_treePage_unnamed*），reducer 不内嵌用户可见文案
+      return { creatingType: action.creatingType, creatingName: "" };
     case "SET_CREATING_NAME":
       return { ...state, creatingName: action.value };
     case "FINISH_CREATE":

package/src/components/design/editor/share/design-share-client.tsx

@@ -20,18 +20,44 @@ import { m } from '@/paraglide/messages.js'
 import { SharePasswordGate } from "./share-password-gate";
 import { ShareLayout } from "./share-layout";
 import { ShareSSEListener } from "./share-sse-listener";
+import type { ShareGateDTO } from "./share-types";
 import { AlertCircle } from "lucide-react";
 import { AuthLayout, AuthLayoutLeft, AuthLayoutRight } from "@/components/shared-kit/auth/auth-layout";
 
 interface SharePageClientProps {
   designId: string;
-  share: any;
+  share: ShareGateDTO | null;
   hasPassword: boolean;
   isActive?: boolean;
   versionLabel?: string | null;
   shareNotFound?: boolean;
 }
 
+/** 分享不可用状态屏（shareNotFound / 已停用共用，仅标题不同） */
+function ShareStateScreen({ title, versionLabel }: { title: string; versionLabel?: string | null }) {
+  return (
+    <AuthLayout>
+      <AuthLayoutLeft>
+        <div className="flex flex-col gap-6 w-full max-w-xs">
+          <div className="space-y-2">
+            <AlertCircle className="size-10 text-muted-foreground" />
+            <h1 className="text-2xl font-bold">{title}</h1>
+            <p className="text-muted-foreground text-sm">
+              {versionLabel ? m.shareClient_versionUnavailable({ version: versionLabel }) : m.shareClient_linkUnavailable()}
+            </p>
+          </div>
+        </div>
+      </AuthLayoutLeft>
+      <AuthLayoutRight>
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold tracking-tight">AllBlue</h1>
+          <p className="text-lg text-muted-foreground">{m.share_brandTagline()}</p>
+        </div>
+      </AuthLayoutRight>
+    </AuthLayout>
+  );
+}
+
 export function SharePageClient({ designId, share, hasPassword: initialHasPassword, isActive: initialIsActive = true, versionLabel, shareNotFound }: SharePageClientProps) {
   const sessionKey = useMemo(() => `share_pwd_${designId}_${versionLabel || 'main'}`, [designId, versionLabel]);
   const [hasPassword, setHasPassword] = useState(initialHasPassword);
@@ -60,56 +86,22 @@ export function SharePageClient({ designId, share, hasPassword: initialHasPasswo
 
   return (
     <>
-      <ShareSSEListener designId={designId} shareId={share?.id || ''} versionLabel={versionLabel} onPasswordChange={handlePasswordChange} onShareDisabled={handleShareDisabled} onShareEnabled={handleShareEnabled} />
+      <ShareSSEListener designId={designId} versionLabel={versionLabel} onPasswordChange={handlePasswordChange} onShareDisabled={handleShareDisabled} onShareEnabled={handleShareEnabled} />
       {shareNotFound ? (
-        <AuthLayout>
-          <AuthLayoutLeft>
-            <div className="flex flex-col gap-6 w-full max-w-xs">
-              <div className="space-y-2">
-                <AlertCircle className="size-10 text-muted-foreground" />
-                <h1 className="text-2xl font-bold">{m.shareClient_notFoundTitle()}</h1>
-                <p className="text-muted-foreground text-sm">
-                  {versionLabel ? m.shareClient_versionUnavailable({ version: versionLabel }) : m.shareClient_linkUnavailable()}
-                </p>
-              </div>
-            </div>
-          </AuthLayoutLeft>
-          <AuthLayoutRight>
-            <div className="space-y-4">
-              <h1 className="text-4xl font-bold tracking-tight">AllBlue</h1>
-              <p className="text-lg text-muted-foreground">{m.share_brandTagline()}</p>
-            </div>
-          </AuthLayoutRight>
-        </AuthLayout>
+        <ShareStateScreen title={m.shareClient_notFoundTitle()} versionLabel={versionLabel} />
       ) : !active ? (
-        <AuthLayout>
-          <AuthLayoutLeft>
-            <div className="flex flex-col gap-6 w-full max-w-xs">
-              <div className="space-y-2">
-                <AlertCircle className="size-10 text-muted-foreground" />
-                <h1 className="text-2xl font-bold">{m.shareClient_inactiveTitle()}</h1>
-                <p className="text-muted-foreground text-sm">
-                  {versionLabel ? m.shareClient_versionUnavailable({ version: versionLabel }) : m.shareClient_linkUnavailable()}
-                </p>
-              </div>
-            </div>
-          </AuthLayoutLeft>
-          <AuthLayoutRight>
-            <div className="space-y-4">
-              <h1 className="text-4xl font-bold tracking-tight">AllBlue</h1>
-              <p className="text-lg text-muted-foreground">{m.share_brandTagline()}</p>
-            </div>
-          </AuthLayoutRight>
-        </AuthLayout>
+        <ShareStateScreen title={m.shareClient_inactiveTitle()} versionLabel={versionLabel} />
       ) : !verified ? (
         <SharePasswordGate
           designId={designId}
-          shareName={share.design.name}
+          shareName={share?.design.name ?? ""}
           onVerified={() => setVerified(true)}
           designver={versionLabel}
         />
-      ) : (
+      ) : share ? (
         <ShareLayout designId={designId} share={share} versionLabel={versionLabel} />
+      ) : (
+        <ShareStateScreen title={m.shareClient_linkUnavailable()} versionLabel={versionLabel} />
       )}
     </>
   );

package/src/components/design/editor/share/design-share-panel/components/single-version-share-card.tsx

@@ -35,20 +35,11 @@ import {
 } from "@/components/ui/tooltip";
 import { toast } from '@/components/ui/toast';
 import { EXPIRY_OPTIONS } from "../constants";
-
-interface SingleVersionShare {
-  id: string;
-  versionId: string;
-  versionLabel: string;
-  link: string;
-  hasPassword: boolean;
-  password: string;
-  expiresAt: string | null;
-  enabled: boolean;
-}
+import type { SingleVersionShareLink } from "../types";
 
 interface SingleVersionShareCardProps {
-  share: SingleVersionShare;
+  // DTO 单一来源：../types 的 SingleVersionShareLink（expiresAt 兼容 Date）
+  share: SingleVersionShareLink;
   getExpiryDaysValue: (expiresAt: string | Date | null) => string;
   onCopy: (link: string) => void;
   onDelete: (shareId: string) => void;
@@ -123,6 +114,7 @@ export function SingleVersionShareCard({
             <Input
               value={share.password}
               readOnly
+              placeholder={share.hasPassword && !share.password ? m.sharePanel_passwordMasked() : undefined}
               className="h-8 text-xs flex-1 font-mono"
               disabled={!share.hasPassword}
             />
@@ -130,8 +122,15 @@ export function SingleVersionShareCard({
               <TooltipTrigger render={<Button variant="outline"
                   size="sm"
                   className="h-8 w-8 p-0"
-                  onClick={() => { navigator.clipboard.writeText(share.password); toast.success(m.sharePanel_passwordCopied()); }}
-                  disabled={!share.hasPassword} />}>
+                  onClick={async () => {
+                    try {
+                      await navigator.clipboard.writeText(share.password);
+                      toast.success(m.sharePanel_passwordCopied());
+                    } catch {
+                      toast.error(m.sharePanel_copyFailed());
+                    }
+                  }}
+                  disabled={!share.hasPassword || !share.password} />}>
                   <Copy className="size-3" />
                 </TooltipTrigger>
               <TooltipContent>