@allbluecn/web-app 0.19.2 → 0.19.4

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

@@ -15,7 +15,7 @@
 // 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 React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -41,13 +41,13 @@ import {
 import { listDesignVersionsFn } from "@/server/serverFns/design/versions";
 import { listDesignSharesFn, createDesignShareFn, createDesignSingleShareFn, listDesignSingleSharesFn, updateDesignSingleShareFn, deleteDesignSingleShareFn } from "@/server/serverFns/design/shares";
 import { setDesignSharePasswordFn, toggleDesignSharePasswordFn, setDesignSingleSharePasswordFn, toggleDesignSingleSharePasswordFn } from "@/server/serverFns/design/shares-password";
-import { DesignSharePanelProps } from "./types";
+import { DesignSharePanelProps, DesignVersionMeta, SingleVersionShareLink } from "./types";
 import { EXPIRY_OPTIONS } from "./constants";
-import { sortByVersionDesc } from "./utils";
+import { formatSingleShares } from "./utils";
 import { SingleVersionShareCard } from "./components/single-version-share-card";
 
 export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
-  const [versions, setVersions] = useState<any[]>([]);
+  const [versions, setVersions] = useState<DesignVersionMeta[]>([]);
   const [enabled, setEnabled] = useState(false);
   const [selectedVersionIds, setSelectedVersionIds] = useState<Set<string>>(new Set());
   const [password, setPassword] = useState("");
@@ -56,15 +56,22 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
   const [copied, setCopied] = useState(false);
   const [saving, setSaving] = useState(false);
   const [shareLink, setShareLink] = useState("");
-  const [singleVersionShareLinks, setSingleVersionShareLinks] = useState<any[]>([]);
+  const [singleVersionShareLinks, setSingleVersionShareLinks] = useState<SingleVersionShareLink[]>([]);
   const [singleVersionSaving, setSingleVersionSaving] = useState(false);
   const [copyPasswordOnShare, setCopyPasswordOnShare] = useState(true);
   const [savedVersionIds, setSavedVersionIds] = useState<Set<string>>(new Set());
+  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     setShareLink(`${window.location.origin}/share/design/${designId}`);
   }, [designId]);
 
+  useEffect(() => {
+    return () => {
+      if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+    };
+  }, []);
+
   useEffect(() => {
     const loadData = async () => {
       try {
@@ -80,7 +87,8 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
             // 更新链接为简洁格式（不包含token）
             setShareLink(`${window.location.origin}/share/design/${designId}`);
             if (shareData.hasPassword) {
-              setPassword(shareData.password || "");
+              // hash-on-write 后读路径不回显明文：输入框空态由 placeholder 提示「加密存储不再回显」
+              setPassword("");
               setEnablePassword(true);
             } else {
               setPassword("");
@@ -98,21 +106,11 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
               else setExpiryDays("7");
             }
           }
-        const formattedShares = singleSharesData
-          .filter((s: any) => s.version)
-          .map((share: any) => ({
-            id: share.id,
-            versionId: share.version.id,
-            versionLabel: share.version.versionLabel,
-            link: `${window.location.origin}/share/design/${designId}?designver=${encodeURIComponent(share.version.versionLabel)}`,
-            hasPassword: share.hasPassword,
-            password: share.password || "",
-            expiresAt: share.expiresAt,
-            enabled: share.status === "ACTIVE",
-          }));
-        setSingleVersionShareLinks(formattedShares.sort(sortByVersionDesc));
-      } catch {
-        // silently fail, show default form
+        setSingleVersionShareLinks(formatSingleShares(singleSharesData, designId));
+      } catch (err) {
+        // 加载失败提示用户：默认表单若被直接保存可能覆盖既有分享配置
+        console.error(err instanceof Error ? err.message : "unknown");
+        toast.error(m.sharePanel_loadFailed());
       }
     };
     loadData();
@@ -122,7 +120,9 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
     try {
       const data = await toggleDesignSharePasswordFn({ data: { designId, enabled: v } });
       setEnablePassword(data.hasPassword);
+      // password 仅在「无存量密码新开启」时一次性返回明文；沿用存量密码时为 null（不可逆）
       if (data.password) setPassword(data.password);
+      else if (!v) setPassword("");
       toast.success(v ? m.sharePanel_passwordEnabled() : m.sharePanel_passwordDisabled());
     } catch {
       toast.error(v ? m.sharePanel_enablePasswordFailed() : m.sharePanel_disablePasswordFailed());
@@ -141,11 +141,11 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
 
   const latestUpdatedVersionId = useMemo(() => {
     if (!versions.length) return null;
+    const tsOf = (v: DesignVersionMeta) =>
+      new Date(v.updatedAt ?? v.createdAt ?? 0).getTime();
     let latest = versions[0];
     for (let i = 1; i < versions.length; i++) {
-      const ts = versions[i].updatedAt || versions[i].createdAt;
-      const latestTs = latest.updatedAt || latest.createdAt;
-      if (new Date(ts).getTime() > new Date(latestTs).getTime()) {
+      if (tsOf(versions[i]) > tsOf(latest)) {
         latest = versions[i];
       }
     }
@@ -183,7 +183,8 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
     try {
       await navigator.clipboard.writeText(text);
       setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
+      if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+      copiedTimerRef.current = setTimeout(() => setCopied(false), 2000);
       if (enablePassword && password) {
         toast.success(m.sharePanel_copiedWithPassword({ password }), { duration: 5000 });
       } else {
@@ -198,13 +199,15 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
     if (!enabled) return;
     setSaving(true);
     try {
-      await createDesignShareFn({
+      const data = await createDesignShareFn({
         data: {
           designId,
           versionIds: Array.from(selectedVersionIds),
           expiryDays,
         },
       });
+      // 保存会按无密码入参轮换生成新密码，明文随响应一次性回传，同步到输入框防面板滞留旧值
+      if (data && 'password' in data && data.password) setPassword(data.password);
       setSavedVersionIds(new Set(selectedVersionIds));
       toast.success(m.sharePanel_versionSelectionSaved());
     } catch {
@@ -214,13 +217,13 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
     }
   }, [designId, enabled, selectedVersionIds, expiryDays]);
 
-  const allSelected = versions.length > 0 && versions.every((v: any) => selectedVersionIds.has(v.id));
+  const allSelected = versions.length > 0 && versions.every((v) => selectedVersionIds.has(v.id));
 
   const handleSelectAll = useCallback(() => {
     if (allSelected) {
       setSelectedVersionIds(new Set());
     } else {
-      setSelectedVersionIds(new Set(versions.map((v: any) => v.id)));
+      setSelectedVersionIds(new Set(versions.map((v) => v.id)));
     }
   }, [allSelected, versions]);
 
@@ -232,7 +235,7 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
     if (selectedVersionIds.size !== 1) return;
 
     const versionId = Array.from(selectedVersionIds)[0];
-    const version = versions.find((v: any) => v.id === versionId);
+    const version = versions.find((v) => v.id === versionId);
     if (!version) return;
 
     setSingleVersionSaving(true);
@@ -246,19 +249,7 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
       } });
 
       const reloadData = await listDesignSingleSharesFn({ data: { designId } });
-        const formattedShares = reloadData
-          .filter((s: any) => s.version)
-          .map((share: any) => ({
-            id: share.id,
-            versionId: share.version.id,
-            versionLabel: share.version.versionLabel,
-            link: `${window.location.origin}/share/design/${designId}?designver=${encodeURIComponent(share.version.versionLabel)}`,
-            hasPassword: share.hasPassword,
-            password: share.password || "",
-            expiresAt: share.expiresAt,
-            enabled: share.status === "ACTIVE",
-          }));
-      setSingleVersionShareLinks(formattedShares.sort(sortByVersionDesc));
+      setSingleVersionShareLinks(formatSingleShares(reloadData, designId));
 
       toast.success(m.sharePanel_singleShareEnabled());
     } catch {
@@ -266,7 +257,7 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
     } finally {
       setSingleVersionSaving(false);
     }
-  }, [designId, selectedVersionIds, versions, enablePassword, password, expiryDays]);
+  }, [designId, selectedVersionIds, versions, expiryDays]);
 
   const handleSingleVersionToggle = useCallback(async (shareId: string, enabled: boolean) => {
     try {
@@ -398,7 +389,7 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
             {versions.length === 0 ? (
               <p className="text-sm text-muted-foreground text-center py-3">{m.sharePanel_noVersions()}</p>
             ) : (
-              versions.map((v: any) => (
+              versions.map((v) => (
                 <label
                   key={v.id}
                   className="flex items-center gap-3 px-2 py-1.5 rounded-md hover:bg-muted/50 cursor-pointer text-sm"
@@ -464,12 +455,20 @@ export function DesignSharePanel({ designId, onClose }: DesignSharePanelProps) {
                 <Input
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  maxLength={4}
+                  maxLength={8}
+                  placeholder={enablePassword && !password ? m.sharePanel_passwordMasked() : undefined}
                   className="h-9 text-base flex-1 font-mono tracking-widest text-center"
                   type="text"
                 />
                 <Tooltip>
-                  <TooltipTrigger render={<Button variant="outline" className="h-9 w-9 p-0" onClick={() => { navigator.clipboard.writeText(password); toast.success(m.sharePanel_passwordCopied()); }} />}>
+                  <TooltipTrigger render={<Button variant="outline" className="h-9 w-9 p-0" aria-label={m.sharePanel_copyPassword()} disabled={!password} onClick={async () => {
+                    try {
+                      await navigator.clipboard.writeText(password);
+                      toast.success(m.sharePanel_passwordCopied());
+                    } catch {
+                      toast.error(m.sharePanel_copyFailed());
+                    }
+                  }} />}>
                       <Copy className="size-4" />
                     </TooltipTrigger>
                   <TooltipContent>

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

@@ -19,3 +19,33 @@ export interface DesignSharePanelProps {
   designId: string;
   onClose?: () => void;
 }
+
+/** 版本选择列表条目（listDesignVersionsFn 返回行的客户端消费子集） */
+export interface DesignVersionMeta {
+  id: string;
+  versionLabel: string;
+  updatedAt?: string | Date | null;
+  createdAt?: string | Date | null;
+}
+
+/** 单版本分享卡片（listDesignSingleSharesFn 行的客户端格式化结果） */
+export interface SingleVersionShareLink {
+  id: string;
+  versionId: string;
+  versionLabel: string;
+  link: string;
+  hasPassword: boolean;
+  password: string;
+  expiresAt: string | Date | null;
+  enabled: boolean;
+}
+
+/** listDesignSingleSharesFn 返回行（格式化前） */
+export interface SingleShareRow {
+  id: string;
+  hasPassword: boolean;
+  password: string | null;
+  status: string;
+  expiresAt: string | Date | null;
+  version: { id: string; versionLabel: string } | null;
+}

package/src/components/design/editor/share/design-share-panel/utils.ts

@@ -28,3 +28,31 @@ export function sortByVersionDesc(a: { versionLabel: string }, b: { versionLabel
   }
   return 0;
 }
+
+/** listDesignSingleSharesFn 行 → 单版本分享卡片 DTO（两处消费统一走此函数） */
+export function formatSingleShares(
+  raw: Array<{
+    id: string;
+    hasPassword: boolean;
+    /** hash-on-write 后读路径不回传明文（undefined），仅生成/重置响应携带 */
+    password?: string | null;
+    status: string;
+    expiresAt: string | Date | null;
+    version: { id: string; versionLabel: string } | null;
+  }>,
+  designId: string,
+) {
+  return raw
+    .filter((s): s is (typeof s) & { version: { id: string; versionLabel: string } } => !!s.version)
+    .map((share) => ({
+      id: share.id,
+      versionId: share.version.id,
+      versionLabel: share.version.versionLabel,
+      link: `${window.location.origin}/share/design/${designId}?designver=${encodeURIComponent(share.version.versionLabel)}`,
+      hasPassword: share.hasPassword,
+      password: share.password || "",
+      expiresAt: share.expiresAt,
+      enabled: share.status === "ACTIVE",
+    }))
+    .sort(sortByVersionDesc);
+}

package/src/components/design/editor/share/share-annotation-overlay.tsx

@@ -46,7 +46,6 @@ export function ShareAnnotationOverlay({ containerRef, selectedIds }: ShareAnnot
     if (!container) return;
 
     let lastKey = "";
-    let raf = 0;
 
     const recompute = () => {
       const cRect = container.getBoundingClientRect();
@@ -80,11 +79,25 @@ export function ShareAnnotationOverlay({ containerRef, selectedIds }: ShareAnnot
         lastKey = key;
         setSegments(segs);
       }
-      raf = requestAnimationFrame(recompute);
     };
 
-    raf = requestAnimationFrame(recompute);
-    return () => cancelAnimationFrame(raf);
+    // 事件驱动 + 低频兜底轮询，替代常驻 rAF 每帧强制布局测量（layout thrash，
+    // 「全部连线」模式下开销随节点数线性放大）：首帧测一次，之后由
+    // scroll（捕获内层滚动）/ resize / 容器尺寸变化驱动，200ms 间隔兜底
+    // 流式内容引起的位移
+    recompute();
+    const interval = window.setInterval(recompute, 200);
+    const ro = new ResizeObserver(recompute);
+    ro.observe(container);
+    const onScroll = () => recompute();
+    document.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    return () => {
+      clearInterval(interval);
+      ro.disconnect();
+      document.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
   }, [selectedIds, containerRef]);
 
   if (selectedIds.length === 0 || segments.length === 0) return null;

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

@@ -55,7 +55,11 @@ export function ShareCommentPanel({ designId }: ShareCommentPanelProps) {
   useEffect(() => {
     listCommentsFn({ data: { designId } })
       .then(setComments)
-      .catch(() => {});
+      .catch((err) => {
+        // 加载失败不应静默显示「暂无评论」误导用户
+        console.error(err instanceof Error ? err.message : "unknown");
+        toast.error(m.shareComment_loadFailed());
+      });
   }, [designId]);
 
   const handleSubmit = async () => {
@@ -219,12 +223,15 @@ export function ShareCommentPanel({ designId }: ShareCommentPanelProps) {
                     <div className="flex items-start gap-1">
                       <p className=" flex-1 break-words">{c.content}</p>
                       {isOwner && (
-                        <button
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          aria-label={m.shareComment_edit()}
                           onClick={() => handleEditStart(c)}
-                          className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+                          className="shrink-0 size-5 text-muted-foreground hover:text-foreground"
                         >
                           <Pencil className="size-3" />
-                        </button>
+                        </Button>
                       )}
                     </div>
                   )}

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

@@ -19,6 +19,7 @@ import { useState } from "react";
 import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
 import { MessageSquare, ClipboardCheck } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { ShareCommentPanel } from "./share-comment-panel";
 import { useSession } from "@/components/shared-kit/auth/auth-client";
 
@@ -39,7 +40,8 @@ export function ShareCommentReviewPanel({ designId }: ShareCommentReviewPanelPro
     <div className="flex flex-col h-full">
       <div className="shrink-0 flex items-center h-10 mt-2 border-b">
         {SUBTABS.map((tab) => (
-          <button
+          <Button
+            variant="ghost"
             key={tab.key}
             onClick={() => setActiveSubTab(tab.key)}
             className={cn(
@@ -55,7 +57,7 @@ export function ShareCommentReviewPanel({ designId }: ShareCommentReviewPanelPro
             )}>
               {tab.icon} {tab.label()}
             </span>
-          </button>
+          </Button>
         ))}
       </div>
 

package/src/components/design/editor/share/share-directory-tree.tsx

@@ -17,11 +17,13 @@
 
 import { ChevronRight } from "lucide-react";
 import { m } from '@/paraglide/messages.js'
+import { Button } from "@/components/ui/button";
 
 interface Version {
   id: string;
   versionLabel: string;
-  createdAt: string;
+  // 仅展示 versionLabel，createdAt 不参与渲染（门禁版本列表无该字段）
+  createdAt?: string;
 }
 
 interface PageInfo {
@@ -57,29 +59,33 @@ export function ShareDirectoryTree({
       ) : (
         versions.map((v) => (
           <div key={v.id}>
-            <button
+            <Button
+              variant="ghost"
               onClick={() => onSelectVersion(v.id)}
-              className="w-full flex items-center gap-1.5 px-2 py-1.5 rounded text-xs hover:bg-muted/50 text-left"
+              aria-label={v.versionLabel}
+              className="w-full flex items-center gap-1.5 px-2 py-1.5 rounded text-xs hover:bg-muted/50 text-left justify-start h-auto font-normal"
             >
               <ChevronRight
                 className={`size-3 shrink-0 transition-transform ${activeVersionId === v.id ? "rotate-90" : ""}`}
               />
               <span className={activeVersionId === v.id ? "font-medium" : ""}>{v.versionLabel}</span>
-            </button>
+            </Button>
 
             {activeVersionId === v.id && pages.length > 0 && (
               <div className="ml-3 pl-2 border-l space-y-0.5 mt-0.5">
                 {pages.map((p) => (
-                  <button
+                  <Button
                     key={p.pageId}
+                    variant="ghost"
                     onClick={() => onSelectPage?.(p.pageId)}
-                    className={`w-full flex items-center gap-1 text-left px-2 py-1 rounded text-xs hover:bg-muted/50 ${
+                    aria-label={p.pageName}
+                    className={`w-full flex items-center gap-1 text-left px-2 py-1 rounded text-xs hover:bg-muted/50 justify-start h-auto font-normal ${
                       selectedPageId === p.pageId ? "bg-muted font-medium" : ""
                     }`}
                   >
                     <span className="flex-1 truncate">{p.pageName}</span>
-                    <span className="text-muted-foreground text-[10px] shrink-0">PAGE V{p.version}</span>
-                  </button>
+                    <span className="text-muted-foreground text-[10px] shrink-0">{m.shareDirectory_pageVersion({ version: p.version })}</span>
+                  </Button>
                 ))}
               </div>
             )}

package/src/components/design/editor/share/share-doc-view.tsx

@@ -20,11 +20,14 @@ import { m } from '@/paraglide/messages.js'
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
-import { AnnotationNode } from '@/components/design/editor/annotation/annotation-node' /* @/components/design/editor/annotation/annotation-node */;
+import { marked } from "marked";
+import { AnnotationNode } from '@/components/design/editor/annotation/annotation-node';
+import { sanitize } from "@/lib/sanitize";
+import { isAllowedLinkUri } from "@/lib/tiptap/link-policy";
 import "../tiptap/node/paragraph-node/paragraph-node.scss";
 
 interface ShareDocViewProps {
-  content: any;
+  content?: { html?: string; markdown?: string } | null;
   selectedComponentId?: string | null;
   onSelectComponent?: (id: string | null) => void;
 }
@@ -32,7 +35,12 @@ interface ShareDocViewProps {
 export function ShareDocView({ content, selectedComponentId, onSelectComponent }: ShareDocViewProps) {
   const editor = useEditor({
     extensions: [
-      StarterKit,
+      // 只读分享视图是「非受控展示端」：分享内容里的 href 也必须走 scheme 白名单
+      StarterKit.configure({
+        link: {
+          isAllowedUri: (url, { defaultValidate }) => isAllowedLinkUri(url, defaultValidate),
+        },
+      }),
       Placeholder.configure({ placeholder: m.shareDoc_noContentPlaceholder() }),
       AnnotationNode,
     ],
@@ -43,8 +51,11 @@ export function ShareDocView({ content, selectedComponentId, onSelectComponent }
 
   useEffect(() => {
     if (!editor) return;
-    const next = content?.html || content?.markdown || "";
-    editor.commands.setContent(next, { emitUpdate: false });   
+    // TipTap setContent 只认 HTML/JSON：html 缺失时把 markdown 转 HTML
+    // （经 sanitize 清理）再注入，否则 markdown 源码会以纯文本原样显示
+    const next = content?.html
+      || (content?.markdown ? sanitize(marked.parse(content.markdown) as string) : "");
+    editor.commands.setContent(next, { emitUpdate: false });
   }, [editor, content]);
 
   useEffect(() => {

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

@@ -26,21 +26,26 @@ import { ShareDocView } from "./share-doc-view";
 import { ShareAnnotationOverlay } from "./share-annotation-overlay";
 import { ElementContext } from "@/components/design/editor/layout/element-context";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Button } from "@/components/ui/button";
 import { BOARD_NODE_ID } from "@/components/design/canvas/document/types";
 import { normalizeSceneDocument } from "@/design-engine/document/serialize";
 import { getShareVersionsFn, getShareVersionDataFn } from "@/server/serverFns/design/share/versions";
+import { sortByVersionDesc } from "./design-share-panel/utils";
+import type { ShareGateDTO, ShareVersionItem, ShareVersionDataDTO } from "./share-types";
 
 interface ShareLayoutProps {
   designId: string;
-  share: any;
+  share: ShareGateDTO;
   versionLabel?: string | null;
 }
 
 export function ShareLayout({ designId, share, versionLabel }: ShareLayoutProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [versions, setVersions] = useState<any[]>([]);
+  const [versions, setVersions] = useState<ShareVersionItem[]>([]);
   const [activeVersionId, setActiveVersionId] = useState<string | null>(null);
-  const [versionData, setVersionData] = useState<any>(null);
+  const [versionData, setVersionData] = useState<ShareVersionDataDTO | null>(null);
+  const [loadError, setLoadError] = useState(false);
+  const [reloadNonce, setReloadNonce] = useState(0);
   const [selectedPageId, setSelectedPageId] = useState<string | null>(null);
   const [selectedComponentId, setSelectedComponentId] = useState<string | null>(null);
   const [showAllConnections, setShowAllConnections] = useState(false);
@@ -48,39 +53,46 @@ export function ShareLayout({ designId, share, versionLabel }: ShareLayoutProps)
   useEffect(() => {
     const ids = share.versionIds;
     if (!ids?.length) return;
+    let cancelled = false;
+    setLoadError(false);
     getShareVersionsFn({ data: { designId, versionIds: ids } })
       .then((data) => {
-        const v = (data.versions || []).sort((a, b) => {
-          const va = (a.versionLabel || "").match(/\d+/g)?.map(Number) || [0];
-          const vb = (b.versionLabel || "").match(/\d+/g)?.map(Number) || [0];
-          for (let i = 0; i < Math.max(va.length, vb.length); i++) {
-            const diff = (vb[i] || 0) - (va[i] || 0);
-            if (diff !== 0) return diff;
-          }
-          return 0;
-        });
+        if (cancelled) return;
+        // 与管理面板共享同一 semver 降序比较器，避免两套解析行为漂移
+        const v = (data.versions || []).sort(sortByVersionDesc);
         setVersions(v);
         if (v.length > 0) setActiveVersionId(v[0].id);
       })
-      .catch(() => {});
-  }, [designId, share.versionIds]);
+      .catch((err) => {
+        if (cancelled) return;
+        console.error(err instanceof Error ? err.message : "unknown");
+        setLoadError(true);
+      });
+    return () => { cancelled = true; };
+  }, [designId, share.versionIds, reloadNonce]);
 
   useEffect(() => {
     if (!activeVersionId) return;
     setSelectedPageId(null);
     setSelectedComponentId(null);
+    let cancelled = false;
     getShareVersionDataFn({ data: { designId, versionId: activeVersionId } })
       .then((data) => {
+        if (cancelled) return;
         if (!data) return;
         setVersionData(data);
-        const version = (data as { version?: { pageVersions: any[] } }).version;
-        const pages = version?.pageVersions || [];
+        const pages = data.version?.pageVersions || [];
         if (pages.length > 0) {
           setSelectedPageId(pages[0].pageId);
         }
       })
-      .catch(() => {});
-  }, [activeVersionId, designId]);
+      .catch((err) => {
+        if (cancelled) return;
+        console.error(err instanceof Error ? err.message : "unknown");
+        setLoadError(true);
+      });
+    return () => { cancelled = true; };
+  }, [activeVersionId, designId, reloadNonce]);
 
   useEffect(() => {
     setSelectedComponentId(null);
@@ -95,7 +107,7 @@ export function ShareLayout({ designId, share, versionLabel }: ShareLayoutProps)
   };
 
   const pages = versionData?.version?.pageVersions || [];
-  const currentPage = pages.find((p: any) => p.pageId === selectedPageId) || pages[0];
+  const currentPage = pages.find((p) => p.pageId === selectedPageId) || pages[0];
   const currentCanvas = currentPage?.canvas ?? null;
   const currentContent = currentPage?.content || null;
 
@@ -117,15 +129,29 @@ export function ShareLayout({ designId, share, versionLabel }: ShareLayoutProps)
     return { overrides: map, onSelectComponent: setSelectedComponentId };
   }, [currentNodes]);
 
+  if (loadError) {
+    // 分享页核心数据（版本列表/版本内容）加载失败：给出错误态与重试入口，
+    // 不再静默留白
+    return (
+      <div className="flex flex-col items-center justify-center h-screen gap-3 text-muted-foreground">
+        <p className="text-sm">{m.common_share_loadFailed()}</p>
+        <Button variant="outline" size="sm" onClick={() => setReloadNonce((n) => n + 1)}>
+          {m.common_share_retry()}
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <ElementContext.Provider value={elementContextValue}>
     <div className="flex flex-col h-screen bg-background">
       <ShareNavBar
         name={share.design.name}
-        icon={share.design.icon}
+        icon={share.design.icon ?? undefined}
         showAllConnections={showAllConnections}
         onToggleAllConnections={() => setShowAllConnections((v) => !v)}
-        shareToken={share.token}
+        // 门禁 DTO 无 token 字段（服务端 select 不取 token），presence 未接通——
+        // 与改型前运行时行为一致（share: any 时代该值恒 undefined）
         designId={designId}
         designver={versionLabel}
       />

package/src/components/design/editor/share/share-nav-bar.tsx

@@ -58,14 +58,13 @@ export function ShareNavBar({ name, icon, showAllConnections = false, onToggleAl
                   showAllConnections && "bg-primary/10 text-primary hover:bg-primary/15"
                 )} />}>
                 <SplinePointer className="size-3.5" />
-                {/* {showAllConnections ? "隐藏连线" : "全部连线"} */}
               </TooltipTrigger>
             <TooltipContent>
               <p>{showAllConnections ? m.shareNav_hideConnections() : m.shareNav_showConnections()}</p>
             </TooltipContent>
           </Tooltip>
         )}
-        <ShareThemeToggle className="size-4" />
+        <ShareThemeToggle className="size-7" />
       </div>
     </div>
   );