0.3.1 UI修复

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

@@ -354,15 +354,46 @@ const MediaBlockContent = ({ block, editor }: any) => {
       );
     }
     if (assetType === "file") {
+      // 根据文件扩展名确定图标颜色
+      const getIconColor = () => {
+        const ext = (extension ?? "").toLowerCase().replace(/^\./, "");
+        if (ext === "pdf") return "text-red-500";
+        if (["doc", "docx"].includes(ext)) return "text-blue-600";
+        if (["xls", "xlsx"].includes(ext)) return "text-green-600";
+        if (["ppt", "pptx"].includes(ext)) return "text-orange-500";
+        return "text-[#9B9A97]";
+      };
+
       return (
-        <div className="flex items-center gap-3 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm">
-          <span className="rounded-full bg-[#2563eb]/10 p-3 text-[#2563eb]">    
-            <Paperclip className="h-5 w-5" />
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            if (isOfficeDoc) {
+              void openWithOnlyOffice();
+            } else {
+              downloadAsset();
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              if (isOfficeDoc) {
+                void openWithOnlyOffice();
+              } else {
+                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-1">
-            <p className="text-sm font-medium text-gray-800">{displayFileName}</p>
+          <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-xs text-gray-500">{formatFileSize(block.props.fileSize)}</p>
+              <p className="text-[12px] text-[#999999]">{formatFileSize(block.props.fileSize)}</p>
             ) : null}
           </div>
         </div>

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

@@ -1,11 +1,8 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
 import { createReactBlockSpec } from "@blocknote/react";
 import { RiFileTextFill } from "react-icons/ri";
 import { useRouter } from "next/navigation";
-import { getSupabaseBrowserClient } from "@/lib/supabase/client";
-import { getMnoteRuntimeConfig } from "@/lib/runtime-config";
 
 const normalizeTitle = (value?: string | null) => {
   if (!value || !value.trim()) {
@@ -16,65 +13,9 @@ const normalizeTitle = (value?: string | null) => {
 
 const PageReferenceContent = ({ pageId, title }: { pageId: string; title: string }) => {
   const router = useRouter();
-  const useConvex = useMemo(() => Boolean(getMnoteRuntimeConfig().useConvex), []);
-  const fallbackTitle = normalizeTitle(title);
-  const [resolvedTitle, setResolvedTitle] = useState(fallbackTitle);
-
-  useEffect(() => {
-    setResolvedTitle(fallbackTitle);
-  }, [fallbackTitle]);
-
-  useEffect(() => {
-    if (!pageId) {
-      return;
-    }
-    if (useConvex) {
-      // 说明：Convex 迁移阶段先不做 title 的实时订阅/拉取，直接使用 block props 里的 title。
-      return;
-    }
-    let cancelled = false;
-    const applyTitle = (nextTitle?: string | null) => {
-      if (!cancelled) {
-        setResolvedTitle(normalizeTitle(nextTitle));
-      }
-    };
-
-    const fetchTitle = async () => {
-      try {
-        const supabaseBrowser = getSupabaseBrowserClient();
-        const { data } = await supabaseBrowser
-          .from("documents")
-          .select("title")
-          .eq("id", pageId)
-          .single<{ title: string | null }>();
-        if (data) {
-          applyTitle(data.title);
-        }
-      } catch {
-        // ignore fetch errors，等待后续订阅同步
-      }
-    };
-
-    void fetchTitle();
-
-    const supabaseBrowser = getSupabaseBrowserClient();
-    const channel = supabaseBrowser
-      .channel(`page-ref-${pageId}`)
-      .on(
-        "postgres_changes",
-        { event: "UPDATE", schema: "public", table: "documents", filter: `id=eq.${pageId}` },
-        (payload) => {
-          const nextTitle = (payload.new as { title?: string } | null)?.title ?? null;
-          applyTitle(nextTitle);
-        },
-      )
-      .subscribe();
-
-    return () => {
-      cancelled = true;
-      supabaseBrowser.removeChannel(channel);
-    };
-  }, [pageId, useConvex]);
+  // 说明：Convex 迁移阶段，直接使用 block props 里的 title，不做实时订阅/拉取。
+  // 页面引用的标题会由编辑器同步更新 block.props.title。
+  const resolvedTitle = normalizeTitle(title);
 
   const navigate = () => {
     if (pageId) {
@@ -93,13 +34,13 @@ const PageReferenceContent = ({ pageId, title }: { pageId: string; title: string
           navigate();
         }
       }}
-      className="group mt-2 flex items-center gap-3 rounded-[4px] px-4 py-3 text-[#2563eb] hover:bg-[#f5f5f5]"
+      className="group mt-2 inline-flex items-center gap-1.5 rounded-[3px] px-1.5 py-0.5 text-[#37352F] hover:bg-[rgba(55,53,47,0.08)] transition-colors duration-150"
       style={{ fontFamily: "Inter, system-ui, sans-serif" }}
     >
-      <RiFileTextFill className="text-xl" aria-hidden />
-      <span className="text-base font-medium leading-none">{resolvedTitle}</span>
-      <span className="ml-auto text-sm opacity-0 transition-opacity duration-150 group-hover:opacity-100">
-        点击进入 →
+      <RiFileTextFill className="w-4 h-4 text-[#9B9A97] group-hover:text-[#37352F] transition-colors" aria-hidden />
+      <span className="text-[15px] font-medium leading-normal">{resolvedTitle}</span>
+      <span className="text-[13px] text-[#9B9A97] opacity-0 group-hover:opacity-100 ml-2">
+        →
       </span>
     </div>
   );
@@ -115,8 +56,6 @@ export const pageReferenceBlock = createReactBlockSpec(
     content: "none",
   },
   () => ({
-    render: ({ block }) => (
-      <PageReferenceContent pageId={block.props.pageId} title={block.props.title} />
-    ),
+    render: ({ block }) => <PageReferenceContent pageId={block.props.pageId} title={block.props.title} />,
   }),
 )();

wolai-frontend/src/components/editor/document-content.tsx

@@ -306,10 +306,10 @@ export function DocumentContent({
   );
 
   return (
-    <ImagePickerProvider documentId={documentId} workspaceId={workspaceId}>     
-      <div className="flex h-full overflow-hidden bg-white">
+    <ImagePickerProvider documentId={documentId} workspaceId={workspaceId}>
+      <div className="flex h-full overflow-hidden bg-wolai-bg">
         <div className="flex h-full flex-1 flex-col overflow-hidden">
-          <div className="border-b border-[#f5f5f5] px-12 pb-6 pt-8">
+          <div className="border-b border-wolai-border px-12 pb-6 pt-8">
             <div className="relative">
               <input
                 value={pageTitle}
@@ -317,7 +317,7 @@ export function DocumentContent({
                 onBlur={handleTitleBlur}
                 onKeyDown={handleTitleKeyDown}
                 placeholder="无标题"
-                className="w-full border-none bg-transparent text-3xl font-semibold text-[#333333] outline-none focus:ring-0"
+                className="w-full border-none bg-transparent text-3xl font-semibold text-wolai-text-primary outline-none focus:ring-0"
                 aria-label="页面标题"
                 disabled={options.protectEditing}
               />
@@ -325,7 +325,7 @@ export function DocumentContent({
             {options.protectEditing && (
               <p className="mt-1 text-sm text-[#b91c1c]">当前页面已开启编辑保护，关闭后方可修改内容。</p>
             )}
-            <p className="text-sm text-gray-400">最近更新：{formattedUpdatedAt}</p>
+            <p className="text-sm text-wolai-text-secondary">最近更新：{formattedUpdatedAt}</p>
           </div>
           <div className="flex-1 overflow-y-auto px-12 py-6">
             {contentLoading ? (