@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/design/editor/share/share-password-gate.tsx

@@ -38,11 +38,16 @@ export function SharePasswordGate({ designId, shareName, onVerified, designver }
     setLoading(true);
     try {
       const result = await verifySharePasswordFn({ data: { designId, password, designver: designver ?? undefined } });
-      if (!result.valid) throw new Error(m.sharePassword_wrongPassword());
+      if (!result.valid) {
+        toast.error(m.sharePassword_wrongPasswordRetry());
+        return;
+      }
       sessionStorage.setItem(`share_pwd_${designId}_${designver || 'main'}`, password);
       onVerified();
-    } catch {
-      toast.error(m.sharePassword_wrongPasswordRetry());
+    } catch (err) {
+      // 区分校验失败与请求异常：网络/服务端错误不应误导用户反复输入正确密码
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.sharePassword_verifyFailed());
     } finally {
       setLoading(false);
     }
@@ -62,7 +67,8 @@ export function SharePasswordGate({ designId, shareName, onVerified, designver }
             <Input
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              maxLength={4}
+              // 8 位为新生成口径；下限 4 兼容 hash 化前的存量分享密码
+              maxLength={8}
               placeholder={m.sharePassword_passwordPlaceholder()}
               className="h-11 text-lg font-mono tracking-widest text-center"
               type="text"
@@ -71,7 +77,7 @@ export function SharePasswordGate({ designId, shareName, onVerified, designver }
             <Button
               className="w-full h-11"
               onClick={handleVerify}
-              disabled={loading || password.length !== 4}
+              disabled={loading || password.length < 4}
             >
               {loading ? m.sharePassword_verifying() : m.sharePassword_viewShare()}
             </Button>

package/src/components/design/editor/share/share-review-panel.tsx

@@ -15,13 +15,13 @@
 // 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/>.
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { toast } from '@/components/ui/toast';
 import { useSession } from "@/components/shared-kit/auth/auth-client";
 import { Textarea } from "@/components/ui/textarea";
-import { upsertReviewFn } from "@/server/serverFns/design/reviews";
+import { upsertReviewFn, getReviewFn } from "@/server/serverFns/design/reviews";
 import { m } from "@/paraglide/messages.js";
 
 interface ShareReviewPanelProps {
@@ -41,7 +41,25 @@ export function ShareReviewPanel({ designId, versionId }: ShareReviewPanelProps)
   const [status, setStatus] = useState("pending");
   const [notes, setNotes] = useState("");
 
+  // 挂载/切版本时拉取当前评审状态：否则已 approved/rejected 的版本刷新后
+  // 恒显 pending，多人评审互相覆盖误读
+  useEffect(() => {
+    if (!versionId || !session) return;
+    let cancelled = false;
+    getReviewFn({ data: { designId, versionId } })
+      .then((review) => {
+        if (!cancelled && review?.status) {
+          setStatus(String(review.status).toLowerCase());
+        }
+      })
+      .catch(() => {
+        // 拉取失败保持 pending 初值；提交动作仍可用
+      });
+    return () => { cancelled = true; };
+  }, [designId, versionId, session]);
+
   const handleTransition = useCallback(async (newStatus: string) => {
+    if (!versionId) return; // 版本数据未加载完成时不提交脏 versionId
     try {
       await upsertReviewFn({ data: { designId, versionId, status: newStatus.toUpperCase() as "PENDING" | "APPROVED" | "REJECTED", notes } });
       setStatus(newStatus);
@@ -79,10 +97,10 @@ export function ShareReviewPanel({ designId, versionId }: ShareReviewPanelProps)
       />
 
       <div className="flex gap-2">
-        <Button size="sm" variant="default" className="flex-1 h-7 text-xs" onClick={() => handleTransition("approved")}>
+        <Button size="sm" variant="default" className="flex-1 h-7 text-xs" onClick={() => handleTransition("approved")} disabled={!versionId}>
           {m.share_review_approve()}
         </Button>
-        <Button size="sm" variant="destructive" className="flex-1 h-7 text-xs" onClick={() => handleTransition("rejected")}>
+        <Button size="sm" variant="destructive" className="flex-1 h-7 text-xs" onClick={() => handleTransition("rejected")} disabled={!versionId}>
           {m.share_review_reject()}
         </Button>
       </div>

package/src/components/design/editor/share/share-sse-listener.tsx

@@ -19,16 +19,19 @@ import { useEffect } from "react";
 
 interface ShareSSEListenerProps {
   designId: string;
-  shareId: string;
   versionLabel?: string | null;
   onPasswordChange: (hasPassword: boolean) => void;
   onShareDisabled?: () => void;
   onShareEnabled?: () => void;
 }
 
-export function ShareSSEListener({ designId, shareId, versionLabel, onPasswordChange, onShareDisabled, onShareEnabled }: ShareSSEListenerProps) {
+export function ShareSSEListener({ designId, versionLabel, onPasswordChange, onShareDisabled, onShareEnabled }: ShareSSEListenerProps) {
   useEffect(() => {
     const eventSource = new EventSource(`/api/share/design/${designId}/events`);
+    // 断连/不可达：浏览器原生会自动重连，这里留一条日志便于排查静默丢事件
+    eventSource.onerror = () => {
+      console.warn("[share-sse] connection error; browser will retry");
+    };
 
     const isForThisShare = (e: MessageEvent): boolean => {
       let data: any = {};
@@ -69,7 +72,7 @@ export function ShareSSEListener({ designId, shareId, versionLabel, onPasswordCh
     });
 
     return () => eventSource.close();
-  }, [designId, shareId, versionLabel, onPasswordChange, onShareDisabled, onShareEnabled]);
+  }, [designId, versionLabel, onPasswordChange, onShareDisabled, onShareEnabled]);
 
   return null;
 }

package/src/components/design/editor/share/share-theme-toggle.tsx

@@ -18,6 +18,7 @@
 import { useCallback } from "react";
 import { Moon, Sun } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 import { useThemeMode } from "@/providers/theme-mode-provider";
 import { m } from "@/paraglide/messages.js";
 
@@ -40,13 +41,13 @@ export function ShareThemeToggle({ className }: { className?: string }) {
   }, [toggle]);
 
   return (
-    <button
-      type="button"
+    <Button
+      variant="ghost"
       onClick={onToggle}
-      className={cn(className)}
       aria-label={m.common_command_toggleTheme()}
+      className={cn("size-7 p-0", className)}
     >
-      {isDark ? <Sun className={cn("size-5", className)} /> : <Moon className={cn("size-5", className)} />}
-    </button>
+      {isDark ? <Sun className="size-5" /> : <Moon className="size-5" />}
+    </Button>
   );
 }

package/src/components/design/editor/share/share-types.ts

@@ -0,0 +1,38 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+/**
+ * 分享门禁公开 DTO（客户端镜像，与服务端 ShareGateDTO 保持同形——
+ * server/serverFns/design/share.ts 为唯一事实源，字段改动须双向同步）。
+ */
+export interface ShareGateDesignDTO {
+  id: string;
+  name: string;
+  icon: string | null;
+  description: string | null;
+}
+
+export interface ShareGateDTO {
+  id: string;
+  hasPassword: boolean;
+  versionIds: string[];
+  design: ShareGateDesignDTO;
+}
+
+/** getShareVersionsFn 返回的版本条目（客户端仅消费 id/versionLabel） */
+export interface ShareVersionItem {
+  id: string;
+  versionLabel: string;
+}
+
+/** getShareVersionDataFn 返回的页面快照条目 */
+export interface SharePageVersionItem {
+  pageId: string;
+  pageName: string;
+  version: number;
+  canvas: unknown;
+  content: unknown;
+}
+
+export interface ShareVersionDataDTO {
+  version: { pageVersions: SharePageVersionItem[] };
+}

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

@@ -18,6 +18,7 @@
 import { useState } from "react";
 import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 import { SharePrototypeView } from "./share-prototype-view";
 
 interface PageData {
@@ -45,12 +46,13 @@ export function ShareClient({ pages }: ShareClientProps) {
       {pages.length > 1 && (
         <div className="mb-4 flex items-center gap-1">
           {pages.map((p, i) => (
-            <button
+            <Button
               key={p.pageId}
-              type="button"
+              variant={i === activePage ? "default" : "ghost"}
               onClick={() => setActivePage(i)}
+              aria-label={p.pageName}
               className={cn(
-                "rounded-md px-3 py-1 text-xs transition-colors",
+                "rounded-md px-3 py-1 h-auto text-xs",
                 i === activePage
                   ? "bg-primary text-primary-foreground"
                   : "text-muted-foreground hover:bg-muted"
@@ -58,7 +60,7 @@ export function ShareClient({ pages }: ShareClientProps) {
             >
               {p.pageName}
               <span className="ml-1 opacity-60">v{p.version}</span>
-            </button>
+            </Button>
           ))}
         </div>
       )}

package/src/components/design/editor/versions/components/create-version-dialog.tsx

@@ -24,6 +24,7 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
 
 import { m } from '@/paraglide/messages.js'
 interface CreateVersionDialogProps {
@@ -55,15 +56,23 @@ export function CreateVersionDialog({
           </DialogHeader>
           <div className="space-y-4 py-2">
             <div>
-              <label className="text-xs font-medium text-muted-foreground">{m.version_notesLabel()}</label>
-              <textarea
+              <label htmlFor="create-version-notes" className="text-xs font-medium text-muted-foreground">{m.version_notesLabel()}</label>
+              <Textarea
+                id="create-version-notes"
                 value={notes}
                 onChange={(e) => setNotes(e.target.value)}
+                onKeyDown={(e) => {
+                  // 弹窗快捷键：Enter 提交、Shift+Enter 换行（textarea 置于 form 内）
+                  if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                    e.preventDefault();
+                    if (!loading) onCreate();
+                  }
+                }}
                 placeholder={m.version_notesPlaceholder()}
                 rows={3}
                 autoFocus
                 maxLength={500}
-                className="w-full mt-1 text-sm border rounded-md p-2 bg-transparent placeholder:text-muted-foreground/50"
+                className="w-full mt-1 text-sm"
               />
               <p className="text-[10px] text-muted-foreground/50 mt-1 text-right">{notes.length}/500</p>
             </div>

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

@@ -4,6 +4,7 @@ import React from "react";
 import { m } from '@/paraglide/messages.js'
 import { Skeleton } from "@/components/ui/skeleton";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import {
   Select,
@@ -56,6 +57,19 @@ export function PageTreeSelector({
   selectedPageVersionNo: Map<string, number>;
   setSelectedPageVersionNo: (updater: (prev: Map<string, number>) => Map<string, number>) => void;
 }) {
+  // 每节点可见页面 id 集合一次算好，renderNode 不再逐节点递归重扫（O(n²)→O(n)）
+  const pageIdsByNode = React.useMemo(() => {
+    const map = new Map<string, string[]>();
+    const walk = (node: TreeNode): string[] => {
+      const ids: string[] = node.type === "page" ? [node.id] : [];
+      for (const child of node.children) ids.push(...walk(child));
+      map.set(node.id, ids);
+      return ids;
+    };
+    tree.forEach(walk);
+    return map;
+  }, [tree]);
+
   const allLeafPageIds = React.useMemo(() => getAllPageIds(tree), [tree]);
 
   const selectedCount = React.useMemo(() => {
@@ -67,14 +81,13 @@ export function PageTreeSelector({
   }, [allLeafPageIds, selectedPageIds]);
 
   const allPagesCount = allLeafPageIds.length;
-  const selectedRealCount = allLeafPageIds.filter((id) => selectedPageIds.has(id)).length;
-  const indeterminateAll = selectedRealCount > 0 && selectedRealCount < allPagesCount;
+  const indeterminateAll = selectedCount > 0 && selectedCount < allPagesCount;
 
   const renderNode = (node: TreeNode, depth: number = 0): React.ReactNode => {
     const isExpanded = expandedNodes.has(node.id);
     const hasChildren = node.children.length > 0;
     const isFolder = node.type === "folder";
-    const childPageIds = getAllPageIds([node]);
+    const childPageIds = pageIdsByNode.get(node.id) ?? getAllPageIds([node]);
     const isEmptyFolder = isFolder && childPageIds.length === 0;
     const indeterminate = isFolder ? isFolderIndeterminate(node) : false;
     const allSelected = isFolder ? isFolderAllSelected(node) : selectedPageIds.has(node.id);
@@ -105,13 +118,14 @@ export function PageTreeSelector({
           />
 
           {hasChildren ? (
-            <button
-              type="button"
+            <Button
+              variant="ghost"
+              aria-label={isExpanded ? 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"
+              className="shrink-0 hover:bg-muted rounded p-0.5 -m-0.5 h-auto w-auto"
             >
               <ChevronRight
                 className={cn(
@@ -119,7 +133,7 @@ export function PageTreeSelector({
                   isExpanded && "rotate-90"
                 )}
               />
-            </button>
+            </Button>
           ) : (
             <span className="size-3.5 shrink-0" />
           )}
@@ -138,9 +152,11 @@ export function PageTreeSelector({
               <Select
                 value={String(selectedPageVersionNo.get(node.id) ?? node.version)}
                 onValueChange={(value) => {
+                  const parsed = Number.parseInt(value ?? "", 10);
                   setSelectedPageVersionNo((prev) => {
                     const next = new Map(prev);
-                    next.set(node.id, parseInt(value ?? ""));
+                    // 异常回调（null/空串）回落节点当前版本，防 NaN 静默错位
+                    next.set(node.id, Number.isNaN(parsed) ? node.version : parsed);
                     return next;
                   });
                 }}
@@ -154,13 +170,13 @@ export function PageTreeSelector({
                 <SelectContent>
                   {(allPageVersionsByPage.get(node.id) || []).map((pv) => (
                     <SelectItem key={pv.version} value={String(pv.version)} className="text-xs">
-                      PAGE v{pv.version}
+                      {m.shareDirectory_pageVersion({ version: pv.version })}
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             ) : (
-              <span className="text-[10px] text-muted-foreground">PAGE v{node.version}</span>
+              <span className="text-[10px] text-muted-foreground">{m.shareDirectory_pageVersion({ version: node.version })}</span>
             )
           )}
         </label>

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

@@ -2,6 +2,7 @@
 
 import { m } from '@/paraglide/messages.js'
 import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Pencil, RotateCcw, Trash2 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -121,17 +122,18 @@ export function PageVersionTimeline({
                     <span className="text-[10px] text-muted-foreground/70 ml-2">
                       {formatTime(pv.createdAt)}
                     </span>
-                    {systemNote(pv) && (
+                    {(() => { const note = systemNote(pv); return note ? (
                       <span className="text-[10px] text-muted-foreground/50 ml-2">
-                        {systemNote(pv)}
+                        {note}
                       </span>
-                    )}
+                    ) : null; })()}
                   </span>
 
                   <div className="flex items-center gap-0.5 shrink-0" onClick={(e) => e.stopPropagation()}>
                     <Tooltip>
-                      <TooltipTrigger render={<button onClick={() => onRestore(pv.id)}
-                          className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors" />}>
+                      <TooltipTrigger render={<Button variant="ghost" onClick={() => onRestore(pv.id)}
+                          aria-label={m.version_restoreToThis()}
+                          className="size-5 flex items-center justify-center rounded p-0 hover:bg-muted text-muted-foreground/50 hover:text-foreground" />}>
                           <RotateCcw className="size-3" />
                         </TooltipTrigger>
                       <TooltipContent>
@@ -139,8 +141,9 @@ export function PageVersionTimeline({
                       </TooltipContent>
                     </Tooltip>
                     <Tooltip>
-                      <TooltipTrigger render={<button onClick={() => onEdit(pv)}
-                          className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors" />}>
+                      <TooltipTrigger render={<Button variant="ghost" onClick={() => onEdit(pv)}
+                          aria-label={m.version_editNotes()}
+                          className="size-5 flex items-center justify-center rounded p-0 hover:bg-muted text-muted-foreground/50 hover:text-foreground" />}>
                           <Pencil className="size-3" />
                         </TooltipTrigger>
                       <TooltipContent>
@@ -148,8 +151,9 @@ export function PageVersionTimeline({
                       </TooltipContent>
                     </Tooltip>
                     <Tooltip>
-                      <TooltipTrigger render={<button onClick={() => onDelete(pv)}
-                          className="size-5 flex items-center justify-center rounded hover:bg-destructive/10 text-muted-foreground/50 hover:text-destructive transition-colors" />}>
+                      <TooltipTrigger render={<Button variant="ghost" onClick={() => onDelete(pv)}
+                          aria-label={m.version_deleteVersion()}
+                          className="size-5 flex items-center justify-center rounded p-0 hover:bg-destructive/10 text-muted-foreground/50 hover:text-destructive" />}>
                           <Trash2 className="size-3" />
                         </TooltipTrigger>
                       <TooltipContent>

package/src/components/design/editor/versions/constants.tsx

@@ -19,6 +19,7 @@ import { FileText, Package } from "lucide-react";
 import { m } from "@/paraglide/messages.js";
 
 export const SUBTABS = [
-  { key: "page-version", label: m.prd_subtab_pageVersion, icon: <FileText className="size-3.5" /> },
-  { key: "version-publish", label: m.prd_subtab_versionPublish, icon: <Package className="size-3.5" /> },
+  // labelFn：值为 paraglide 消息函数（须调用取串），命名与字符串值区分
+  { key: "page-version", labelFn: m.prd_subtab_pageVersion, icon: <FileText className="size-3.5" /> },
+  { key: "version-publish", labelFn: m.prd_subtab_versionPublish, icon: <Package className="size-3.5" /> },
 ] as const;

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

@@ -1,14 +1,15 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { m } from '@/paraglide/messages.js'
 import { type DesignVersionWithSemver as DesignVersion } from "@allbluecn/kernel";
 import { listDesignVersionsFn } from "@/server/serverFns/design/versions";
+import { compareDesignVersionDesc, nextVersionAfter } from "../lib/semver";
 
-const sortVersionsDesc = (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;
-};
+const sortVersionsDesc = compareDesignVersionDesc;
+
+const toVersionNum = (major: string, minor: string, patch: string): number =>
+  (Number.parseInt(major, 10) || 0) * 10000 + (Number.parseInt(minor, 10) || 0) * 100 + (Number.parseInt(patch, 10) || 0);
 
 /**
  * PRD 设计版本列表（semver 三元组输入、发布历史加载、更新/过低判定）。
@@ -24,36 +25,38 @@ export function useDesignVersions(designId: string) {
   const [isUpdateMode, setIsUpdateMode] = useState(false);
   const [versionTooLow, setVersionTooLow] = useState(false);
 
+  // 过期响应守卫：快速切换设计文档时慢的旧响应不得覆盖新文档的版本数据
+  const loadSeqRef = useRef(0);
+
   useEffect(() => {
+    const seq = ++loadSeqRef.current;
     setVersionsLoading(true);
     setVersionsError("");
     listDesignVersionsFn({ data: { designId } })
       .then((data) => {
+        if (seq !== loadSeqRef.current) return;
         const mapped = data.map((v) => ({ ...v, createdAt: v.createdAt.toISOString(), updatedAt: v.updatedAt?.toISOString() ?? null }));
         setVersions(mapped);
         setVersionsLoading(false);
         if (mapped.length > 0) {
           const sorted = [...mapped].sort(sortVersionsDesc);
-          const latest = sorted[0];
-          let nextPatch = latest.patch + 1;
-          let nextMinor = latest.minor;
-          let nextMajor = latest.major;
-          if (nextPatch > 99) { nextPatch = 0; nextMinor += 1; }
-          if (nextMinor > 99) { nextMinor = 0; nextMajor += 1; }
-          setMajor(String(nextMajor));
-          setMinor(String(nextMinor));
-          setPatch(String(nextPatch));
+          const next = nextVersionAfter(sorted[0]);
+          setMajor(String(next.major));
+          setMinor(String(next.minor));
+          setPatch(String(next.patch));
         }
       })
       .catch((err) => {
-        setVersionsError(err.message);
+        if (seq !== loadSeqRef.current) return;
+        console.error(err instanceof Error ? err.message : "unknown");
+        setVersionsError(m.version_loadFailed());
         setVersionsLoading(false);
       });
   }, [designId]);
 
   useEffect(() => {
-    const vNum = parseInt(major) * 10000 + parseInt(minor) * 100 + parseInt(patch);
-    const isExisting = versions.some((v) => v.major === parseInt(major) && v.minor === parseInt(minor) && v.patch === parseInt(patch));
+    const vNum = toVersionNum(major, minor, patch);
+    const isExisting = versions.some((v) => v.major === (Number.parseInt(major, 10) || 0) && v.minor === (Number.parseInt(minor, 10) || 0) && v.patch === (Number.parseInt(patch, 10) || 0));
     setIsUpdateMode(isExisting);
 
     let highest = 0;

package/src/components/design/editor/versions/hooks/use-page-tree-selection.ts

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { m } from '@/paraglide/messages.js'
 import { buildTree, type DesignPage, type TreeNode } from "@/lib/design-tree-utils";
 import { type DesignVersionWithSemver as DesignVersion } from "@allbluecn/kernel";
 import { listDesignPagesFn } from "@/server/serverFns/design/pages";
@@ -67,7 +68,13 @@ export function usePageTreeSelection({
     });
   }, [nodeIdsWithChildren]);
 
+  // 过期响应守卫（快速切换 design 时旧响应不得覆盖新设计的页面树）+
+  // designId 切换 commit 的持久化跳过标记（防止旧选择被写入新设计的存储键）
+  const loadSeqRef = useRef(0);
+  const skipPersistRef = useRef(false);
+
   const loadPages = useCallback((isSync: boolean = false) => {
+    const seq = ++loadSeqRef.current;
     if (!isSync) {
       setPagesLoading(true);
     }
@@ -75,6 +82,7 @@ export function usePageTreeSelection({
     setSyncing(true);
     listDesignPagesFn({ data: { designId } })
       .then((data) => {
+        if (seq !== loadSeqRef.current) return;
         const pages = data as DesignPage[];
         setPages(pages);
         setTree(buildTree(pages));
@@ -82,16 +90,22 @@ export function usePageTreeSelection({
         setSyncing(false);
       })
       .catch((err) => {
-        setPagesError(err.message);
+        if (seq !== loadSeqRef.current) return;
+        console.error(err instanceof Error ? err.message : "unknown");
+        setPagesError(m.version_loadFailed());
         setPagesLoading(false);
         setSyncing(false);
       });
   }, [designId]);
 
   useEffect(() => {
+    // designId 切换 commit：先标记跳过持久化（本 commit 的 persist effect
+    // 仍持有旧 selectedPageIds，写入会把旧设计的选中污染到新设计的存储键），
+    // 再清空旧选择并恢复新设计的存储
+    skipPersistRef.current = true;
     loadPages();
 
-    // Restore selectedPageIds from localStorage
+    setSelectedPageIds(new Set());
     const stored = localStorage.getItem(`selectedPages_${designId}`);
     if (stored) {
       try {
@@ -105,9 +119,12 @@ export function usePageTreeSelection({
   }, [designId, loadPages]);
 
   useEffect(() => {
-    if (selectedRestored) {
-      localStorage.setItem(`selectedPages_${designId}`, JSON.stringify(Array.from(selectedPageIds)));
+    if (!selectedRestored) return;
+    if (skipPersistRef.current) {
+      skipPersistRef.current = false;
+      return;
     }
+    localStorage.setItem(`selectedPages_${designId}`, JSON.stringify(Array.from(selectedPageIds)));
   }, [designId, selectedPageIds, selectedRestored]);
 
   const toggleNode = useCallback((id: string) => {
@@ -171,7 +188,9 @@ export function usePageTreeSelection({
 
   const selectLatestPages = useCallback(() => {
     if (versions.length === 0) return;
-    const latest = versions[0];
+    // 不假设上游排序：显式按 semver 数值取最新版本
+    const semverNum = (v: DesignVersion) => v.major * 10000 + v.minor * 100 + v.patch;
+    const latest = versions.reduce((acc, v) => (semverNum(v) > semverNum(acc) ? v : acc), versions[0]);
     const pageVersions = (latest as { pageVersions?: unknown }).pageVersions as
       | Array<{ type?: string; isPlaceholder?: boolean; pageId?: string }>
       | undefined;