0.3.2.1 UI修复3

2026-01-20 07:24:12 +08:00
parent fa7235b1a7
commit f13de35321
16 changed files with 741 additions and 108 deletions
@@ -229,9 +229,50 @@ const MediaBlockContent = ({ block, editor }: any) => {
    editor.updateBlock(block, { props: { linkUrl: next.trim() } });
  };

-  const viewOriginal = () => {
-    if (!fileUrl) return;
-    window.open(fileUrl, "_blank", "noopener,noreferrer");
+  const resolveAssetId = async () => {
+    const direct = (block.props as { assetId?: string })?.assetId;
+    if (direct) return direct;
+
+    // 说明：历史数据/迁移场景下，media block 可能丢失 assetId，导致：
+    // - PDF 打开拿到的不是原文件（旧链接过期/返回 HTML）
+    // - OnlyOffice callback 缺少 assetId，进而“不能保存”
+    // 这里尝试通过 documentId + fileName 在 media_assets 中反查 assetId。
+    const docId = (block.props as { documentId?: string })?.documentId || resolveDocumentId();
+    const name = String(block.props.fileName || block.props.caption || "").trim();
+    if (!docId || !name) return "";
+
+    try {
+      const res = await fetch(
+        `/api/media/by-document?documentId=${encodeURIComponent(docId)}&limit=500`,
+      );
+      if (!res.ok) return "";
+      const payload = (await res.json().catch(() => null)) as { items?: Array<{ id?: string; file_name?: string | null }> } | null;
+      const items = Array.isArray(payload?.items) ? payload!.items! : [];
+      const hit = items.find((it) => String(it.file_name || "") === name);
+      return hit?.id ? String(hit.id) : "";
+    } catch {
+      return "";
+    }
+  };
+
+  const resolveLatestFileUrl = async () => {
+    if (!fileUrl) return "";
+    const assetId = await resolveAssetId();
+    if (!assetId) return fileUrl;
+    try {
+      const res = await fetch(`/api/media/sign?assetId=${encodeURIComponent(assetId)}`);
+      if (!res.ok) return fileUrl;
+      const payload = (await res.json().catch(() => null)) as { signedUrl?: string } | null;
+      return payload?.signedUrl || fileUrl;
+    } catch {
+      return fileUrl;
+    }
+  };
+
+  const viewOriginal = async () => {
+    const url = await resolveLatestFileUrl();
+    if (!url) return;
+    window.open(url, "_blank", "noopener,noreferrer");
  };

  const openWithOnlyOffice = async () => {
@@ -241,7 +282,7 @@ const MediaBlockContent = ({ block, editor }: any) => {
      return;
    }
    try {
-      const assetId = (block.props as { assetId?: string })?.assetId;
+      const assetId = await resolveAssetId();
      const res = assetId
        ? await fetch(`/api/media/sign?assetId=${encodeURIComponent(assetId)}`)
        : await fetch(
@@ -258,16 +299,20 @@ const MediaBlockContent = ({ block, editor }: any) => {
      target.searchParams.set("fileUrl", signedUrl);
      target.searchParams.set("fileName", displayFileName);
      target.searchParams.set("fileType", extension || "docx");
+      if (assetId) {
+        target.searchParams.set("assetId", assetId);
+      }
      window.open(target.toString(), "_blank", "noopener,noreferrer");
    } catch (error) {
      window.alert((error as Error).message);
    }
  };

-  const downloadAsset = () => {
-    if (!fileUrl) return;
+  const downloadAsset = async () => {
+    const url = await resolveLatestFileUrl();
+    if (!url) return;
    const anchor = document.createElement("a");
-    anchor.href = fileUrl;
+    anchor.href = url;
    anchor.download = block.props.fileName || block.props.caption || typeLabel; 
    anchor.click();
  };
@@ -364,44 +409,111 @@ const MediaBlockContent = ({ block, editor }: any) => {
        return "text-[#9B9A97]";
      };

-      return (
-        <div
-          role="button"
-          tabIndex={0}
-          onClick={() => {
-            if (isOfficeDoc) {
-              void openWithOnlyOffice();
-            } else {
-              downloadAsset();
-            }
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
+        return (
+          <div
+            role="button"
+            tabIndex={0}
+            onClick={() => {
              if (isOfficeDoc) {
                void openWithOnlyOffice();
              } else {
-                downloadAsset();
+                void downloadAsset();
              }
-            }
-          }}
-          className="group flex items-center gap-2 px-3 py-2 rounded-[4px] bg-white hover:bg-[#F5F5F5] transition-colors duration-200 cursor-pointer select-none"
-        >
-          <span className={cn("w-5 h-5 shrink-0 flex items-center justify-center", getIconColor())}>
-            <Paperclip className="h-4 w-4" />
-          </span>
-          <div className="flex flex-col justify-center gap-0.5 overflow-hidden">
-            <p className="text-[14px] text-[#37352F] font-normal truncate">{displayFileName}</p>
-            {block.props.fileSize ? (
-              <p className="text-[12px] text-[#999999]">{formatFileSize(block.props.fileSize)}</p>
-            ) : null}
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                if (isOfficeDoc) {
+                  void openWithOnlyOffice();
+                } else {
+                  void downloadAsset();
+                }
+              }
+            }}
+            data-testid="wolai-media-file-row"
+            className="group flex h-[26px] items-center gap-2 rounded-[4px] border border-transparent bg-transparent px-2 outline-none transition-colors duration-200 cursor-pointer select-none hover:border-[#E9E9E8] hover:bg-[#F7F7F5] focus:outline-none focus-visible:outline-none"
+          >
+            <span className={cn("w-5 h-5 flex-none flex items-center justify-center", getIconColor())}>
+              <Paperclip className="h-4 w-4" />
+            </span>
+            <div className="flex min-w-0 flex-1 flex-row items-center gap-2 overflow-hidden">
+              <span className="min-w-0 flex-1 truncate text-[14px] text-[#37352F] font-normal">
+                {displayFileName}
+              </span>
+              {block.props.fileSize ? (
+                <span className="shrink-0 text-[12px] text-[#999999]">{formatFileSize(block.props.fileSize)}</span>
+              ) : null}
+            </div>
+            <div className="ml-auto flex shrink-0 items-center gap-1">
+              <button
+                type="button"
+                data-testid="wolai-media-file-download"
+                className="inline-flex h-6 w-6 items-center justify-center rounded-[4px] text-[#9B9A97] hover:bg-[#EDEDED] hover:text-[#37352F]"
+                aria-label="下载"
+                title="下载"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  void downloadAsset();
+                }}
+              >
+                <Download className="h-4 w-4" />
+              </button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    data-testid="wolai-media-file-more"
+                    className="inline-flex h-6 w-6 items-center justify-center rounded-[4px] text-[#9B9A97] hover:bg-[#EDEDED] hover:text-[#37352F]"
+                    aria-label="更多操作"
+                    title="更多操作"
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                  >
+                    <MoreHorizontal className="h-4 w-4" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56">
+                  <DropdownMenuItem onClick={handleChoose}>替换资源</DropdownMenuItem>
+                  {!shouldShowCaption && <DropdownMenuItem onClick={enableCaptionEdit}>添加说明</DropdownMenuItem>}
+                  <DropdownMenuItem onClick={handleLink}>{block.props.linkUrl ? "编辑链接" : "添加链接"}</DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleCopyLink(fileUrl)}>复制链接</DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => {
+                      void viewOriginal();
+                    }}
+                  >
+                    查看原文件
+                  </DropdownMenuItem>
+                  {isOfficeDoc && <DropdownMenuItem onClick={() => void openWithOnlyOffice()}>使用 ONLYOFFICE 打开</DropdownMenuItem>}
+                  <DropdownMenuItem
+                    onClick={() => {
+                      void downloadAsset();
+                    }}
+                  >
+                    下载到本地
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={handleDeleteAsset}>删除</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
          </div>
-        </div>
-      );
-    }
-    const inlineStyle = resolvedWidth ? { width: `${resolvedWidth}px` } : undefined;
-    return <img src={block.props.thumbnailUrl || fileUrl} alt={block.props.caption || typeLabel} style={inlineStyle} />;
-  };
+        );
+      }
+      const inlineStyle = resolvedWidth ? { width: `${resolvedWidth}px` } : undefined;
+      return <img src={block.props.thumbnailUrl || fileUrl} alt={block.props.caption || typeLabel} style={inlineStyle} />;
+    };

  const figure = (
    <figure
@@ -462,7 +574,9 @@ const MediaBlockContent = ({ block, editor }: any) => {
      key: "download",
      label: `下载${typeLabel}`,
      icon: <Download className="h-4 w-4" />,
-      onClick: downloadAsset,
+      onClick: () => {
+        void downloadAsset();
+      },
    },
    {
      key: "delete",
@@ -475,17 +589,17 @@ const MediaBlockContent = ({ block, editor }: any) => {
  const dropdownLinkLabel = block.props.linkUrl ? "编辑链接" : "添加链接";

  return (
-    <div className="wolai-media" ref={mediaRef}>
+    <div className={cn("wolai-media", assetType === "file" && "wolai-media--file")} ref={mediaRef}>
      <div
        className="wolai-media__canvas"
        style={resolvedWidth ? { width: `${resolvedWidth}px` } : undefined}
-        onDoubleClick={() => {
-          if (assetType === "file" && isOfficeDoc) {
-            void openWithOnlyOffice();
-          } else if (assetType === "file") {
-            viewOriginal();
-          }
-        }}
+          onDoubleClick={() => {
+            if (assetType === "file" && isOfficeDoc) {
+              void openWithOnlyOffice();
+            } else if (assetType === "file") {
+              void viewOriginal();
+            }
+          }}
      >
        {block.props.linkUrl ? (
          <a href={block.props.linkUrl} target="_blank" rel="noopener noreferrer">
@@ -494,6 +608,7 @@ const MediaBlockContent = ({ block, editor }: any) => {
        ) : (
          figure
        )}
+        {assetType !== "file" && (
        <div className="wolai-media__quickbar">
          {quickActions.map((action) => (
            <button
@@ -532,13 +647,25 @@ const MediaBlockContent = ({ block, editor }: any) => {
                  <DropdownMenuSeparator />
                </>
              )}
-              <DropdownMenuItem onClick={handleLink}>{dropdownLinkLabel}</DropdownMenuItem>
-              <DropdownMenuItem onClick={() => handleCopyLink(fileUrl)}>复制链接</DropdownMenuItem>
-              <DropdownMenuItem onClick={viewOriginal}>查看原文件</DropdownMenuItem>
-              {assetType === "file" && isOfficeDoc && (
-                <DropdownMenuItem onClick={() => void openWithOnlyOffice()}>使用 ONLYOFFICE 打开</DropdownMenuItem>
-              )}
-              <DropdownMenuItem onClick={downloadAsset}>下载到本地</DropdownMenuItem>
+               <DropdownMenuItem onClick={handleLink}>{dropdownLinkLabel}</DropdownMenuItem>
+               <DropdownMenuItem onClick={() => handleCopyLink(fileUrl)}>复制链接</DropdownMenuItem>
+               <DropdownMenuItem
+                 onClick={() => {
+                   void viewOriginal();
+                 }}
+               >
+                 查看原文件
+               </DropdownMenuItem>
+               {assetType === "file" && isOfficeDoc && (
+                 <DropdownMenuItem onClick={() => void openWithOnlyOffice()}>使用 ONLYOFFICE 打开</DropdownMenuItem>
+               )}
+               <DropdownMenuItem
+                 onClick={() => {
+                   void downloadAsset();
+                 }}
+               >
+                 下载到本地
+               </DropdownMenuItem>
              {canTriggerOcr && (
                <>
                  <DropdownMenuSeparator />
@@ -550,6 +677,7 @@ const MediaBlockContent = ({ block, editor }: any) => {
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
+        )}
        {canResize && (
          <>
            <ResizeHandle side="left" dragging={Boolean(dragging)} onMouseDown={(event) => handleResizeStart(event, "left")} />