0.4.0 convex及界面修改

wolai-frontend/src/components/editor/blocks/MediaBlock.tsx

@@ -19,6 +19,7 @@ import type { MediaKind } from "@/types/media";
 import { emitAssetsChanged } from "@/lib/events";
 import { getMnoteRuntimeConfig } from "@/lib/runtime-config";
 import { useCurrentDocumentStore } from "@/store/current-document";
+import { toBrowserAccessibleUrl } from "@/lib/url/browser-file-url";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -81,6 +82,12 @@ const MediaBlockContent = ({ block, editor }: any) => {
   const { openPicker } = useImagePicker();
   const [busy, setBusy] = useState(false);
   const fileUrl = block.props.fileUrl as string;
+  const browserFileUrl = useMemo(() => toBrowserAccessibleUrl(fileUrl) ?? fileUrl, [fileUrl]);
+  const rawThumbUrl = (block.props.thumbnailUrl as string | undefined) || "";
+  const browserThumbUrl = useMemo(
+    () => (rawThumbUrl ? toBrowserAccessibleUrl(rawThumbUrl) ?? rawThumbUrl : ""),
+    [rawThumbUrl],
+  );
   const rawAssetType = (block.props.assetType as string) || "image";
   const assetType: MediaKind =
     rawAssetType === "video" || rawAssetType === "audio" || rawAssetType === "file"
@@ -279,7 +286,7 @@ const MediaBlockContent = ({ block, editor }: any) => {
   const openWithOnlyOffice = async () => {
     if (!fileUrl) return;
     if (!officeBase) {
-      window.alert("缺少 ONLYOFFICE 地址，请在 .env.local 配置 NEXT_PUBLIC_ONLYOFFICE_BASE_URL");
+      window.alert("缺少 ONLYOFFICE 地址，请在 .env.all 配置 NEXT_PUBLIC_ONLYOFFICE_BASE_URL");
       return;
     }
     const currentDocReadOnly = useCurrentDocumentStore.getState().readOnly;
@@ -400,10 +407,10 @@ const MediaBlockContent = ({ block, editor }: any) => {
         <video
           controls
           className="max-h-[420px] w-full rounded-2xl bg-black"
-          poster={block.props.thumbnailUrl || undefined}
+          poster={browserThumbUrl || undefined}
           style={resolvedWidth ? { width: `${resolvedWidth}px` } : undefined}
         >
-          <source src={fileUrl} type={block.props.mimeType || "video/mp4"} />
+          <source src={browserFileUrl} type={block.props.mimeType || "video/mp4"} />
         </video>
       );
     }
@@ -411,7 +418,7 @@ const MediaBlockContent = ({ block, editor }: any) => {
       return (
         <div className="rounded-2xl border border-gray-200 bg-white/80 p-5">
           <audio controls className="w-full">
-            <source src={fileUrl} type={block.props.mimeType || "audio/mpeg"} />
+            <source src={browserFileUrl} type={block.props.mimeType || "audio/mpeg"} />
           </audio>
           <p className="mt-2 text-sm text-gray-500">{displayFileName}</p>
         </div>
@@ -533,7 +540,13 @@ const MediaBlockContent = ({ block, editor }: any) => {
         );
       }
       const inlineStyle = resolvedWidth ? { width: `${resolvedWidth}px` } : undefined;
-      return <img src={block.props.thumbnailUrl || fileUrl} alt={block.props.caption || typeLabel} style={inlineStyle} />;
+      return (
+        <img
+          src={browserThumbUrl || browserFileUrl}
+          alt={block.props.caption || typeLabel}
+          style={inlineStyle}
+        />
+      );
     };
 
   const figure = (