0.3.1 UI修复

2026-01-18 19:01:31 +08:00
parent 90a38b48cf
commit 8a5b915002
86 changed files with 1160 additions and 2867 deletions
@@ -31,16 +31,19 @@ export function Breadcrumb({ documents }: BreadcrumbProps) {

  return (
    <div className="flex flex-1 items-center justify-between">
-      <nav className="flex items-center text-sm text-gray-500">
+      <nav className="flex items-center text-sm text-wolai-text-secondary">
        {displayPath.map((node, index) => {
          const isLast = index === displayPath.length - 1;
          return (
            <span key={node.id} className="flex items-center">
              {index > 0 && <ChevronRight className="mx-1 h-4 w-4 text-gray-400" />}
              {isLast ? (
-                <span className="font-medium text-gray-900">{node.title || "无标题"}</span>
+                <span className="font-medium text-wolai-text-primary">{node.title || "无标题"}</span>
              ) : (
-                <Link href={`/documents/${node.id}`} className="wolai-blue">
+                <Link
+                  href={`/documents/${node.id}`}
+                  className="hover:bg-wolai-bg-hover hover:text-wolai-text-primary px-1.5 py-0.5 rounded cursor-pointer transition-colors"
+                >
                  {node.title || "无标题"}
                </Link>
              )}
@@ -48,14 +51,17 @@ export function Breadcrumb({ documents }: BreadcrumbProps) {
          );
        })}
      </nav>
-      <div className="flex items-center gap-2 text-gray-500">
-        <button type="button" className="wolai-hover rounded-full px-3 py-1 text-sm">
+      <div className="flex items-center gap-2 text-wolai-text-secondary">
+        <button
+          type="button"
+          className="hover:bg-wolai-bg-hover hover:text-wolai-text-primary rounded-full px-3 py-1 text-sm transition-colors"
+        >
          <Star className="mr-1 inline h-4 w-4" />
          收藏
        </button>
        <button
          type="button"
-          className="wolai-hover rounded-full p-2 text-gray-500"
+          className="hover:bg-wolai-bg-hover hover:text-wolai-text-primary rounded-full p-2 transition-colors"
          onClick={toggleInspector}
          aria-label={showInspector ? "隐藏页面选项" : "显示页面选项"}
          title={showInspector ? "隐藏页面选项" : "显示页面选项"}
@@ -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>
@@ -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} />,
  }),
 )();
@@ -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 ? (
@@ -14,8 +14,6 @@ import {
 import { useLuckysheetLoader } from "@/components/online-table/useLuckysheetLoader";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { extractRowsForPreview } from "@/components/online-table/utils";
-import { getSupabaseBrowserClient } from "@/lib/supabase/client";
-import { getMnoteRuntimeConfig } from "@/lib/runtime-config";

 type LuckysheetSelection =
  | {
@@ -53,15 +51,6 @@ const VIEWER_CONTAINER_PREFIX = "headless-table-viewer-";

 const HeadlessTableViewer: React.FC<HeadlessTableViewerProps> = ({ tableId, embed = false, editable }) => {
  const containerId = useMemo(() => `${VIEWER_CONTAINER_PREFIX}${tableId}`, [tableId]);
-  const useConvex = useMemo(() => Boolean(getMnoteRuntimeConfig().useConvex), []);
-  const supabaseBrowser = useMemo(() => {
-    if (useConvex) return null;
-    try {
-      return getSupabaseBrowserClient();
-    } catch {
-      return null;
-    }
-  }, [useConvex]);
  const containerRef = useRef<HTMLDivElement>(null);
  const isLuckysheetReady = useLuckysheetLoader();
  const [table, setTable] = useState<DocumentTable | null>(null);
@@ -243,7 +232,8 @@ const HeadlessTableViewer: React.FC<HeadlessTableViewerProps> = ({ tableId, embe

  useEffect(() => {
    if (!tableId) return;
-    if (!supabaseBrowser) return;
+    // Supabase 已移除：此处不再做实时订阅
+    /* Supabase subscription removed
    const channel = supabaseBrowser
      .channel(`table-${tableId}-live`)
      .on(
@@ -271,7 +261,8 @@ const HeadlessTableViewer: React.FC<HeadlessTableViewerProps> = ({ tableId, embe
    return () => {
      supabaseBrowser.removeChannel(channel);
    };
-  }, [tableId, supabaseBrowser]);
+    */
+  }, [tableId]);

  useEffect(() => {
    if (!isLuckysheetReady || !table || !containerRef.current || !window.luckysheet) {
@@ -1,51 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import type { Session } from "@supabase/supabase-js";
-import { SessionContextProvider } from "@supabase/auth-helpers-react";
-import { getSupabaseBrowserClient } from "@/lib/supabase/client";
-
-interface SupabaseProviderProps {
-  session: Session | null;
-  children: React.ReactNode;
-}
-
-export function SupabaseProvider({ session, children }: SupabaseProviderProps) {
-  useEffect(() => {
-    const supabaseBrowser = getSupabaseBrowserClient();
-    const {
-      data: { subscription },
-    } = supabaseBrowser.auth.onAuthStateChange((_event, newSession) => {
-      fetch("/api/auth/callback", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({ event: _event, session: newSession }),
-      });
-    });
-
-    supabaseBrowser.auth.getSession().then(({ data }) => {
-      if (data.session) {
-        fetch("/api/auth/callback", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          credentials: "include",
-          body: JSON.stringify({ event: "INITIAL_SESSION", session: data.session }),
-        });
-      }
-    });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, []);
-
-  return (
-    <SessionContextProvider
-      supabaseClient={getSupabaseBrowserClient()}
-      initialSession={session}
-    >
-      {children}
-    </SessionContextProvider>
-  );
-}
@@ -119,10 +119,10 @@ export function FileTree({
          index >= dragOverRange.startIndex &&
          index < dragOverRange.endIndex;
        const baseClass =
-          "flex w-full min-w-0 max-w-full select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-[#f5f7fb]";
+          "group flex items-center gap-2 px-3 py-[2px] min-h-[27px] w-full select-none cursor-pointer rounded-[3px] text-wolai-text-primary text-[14px] font-medium hover:bg-wolai-bg-hover transition-colors duration-150 data-[active=true]:bg-wolai-bg-active";
        const activeClass =
          row.kind === "index"
-            ? "text-[#2563eb] font-medium"
+            ? "text-[#2563eb]"
            : row.kind === "doc"
              ? "text-[#2563eb]"
              : "";
@@ -135,9 +135,10 @@ export function FileTree({
            className={cn(
              baseClass,
              active && activeClass,
-              selected && "bg-[#e8f2ff] text-[#2563eb]",
+              selected && "bg-wolai-bg-active text-[#2563eb]",
              inDropFeedback && "bg-gray-200/70",
            )}
+            data-active={active}
            style={{ paddingLeft }}
            onClick={(event) => onRowClick(row, event)}
            onDoubleClick={(event) => onRowDoubleClick(row, event)}
@@ -228,19 +229,19 @@ export function FileTree({
                      event.stopPropagation();
                      onToggleExpand(row.docId);
                    }}
-                    className="flex h-5 w-5 items-center justify-center rounded-md hover:bg-gray-100"
+                    className="flex h-5 w-5 items-center justify-center rounded-md hover:bg-gray-100 shrink-0"
                  >
                    <ChevronRight
                      className={cn(
-                        "h-3.5 w-3.5 transition-transform",
+                        "w-4 h-4 text-wolai-text-secondary transition-transform group-hover:text-wolai-text-primary",
                        row.isExpanded && "rotate-90",
                      )}
                    />
                  </button>
                ) : (
-                  <span className="h-5 w-5" />
+                  <span className="w-5 h-5 shrink-0" />
                )}
-                <Folder className="h-4 w-4 text-[#2563eb]" />
+                <Folder className="w-4 h-4 text-[#2563eb] shrink-0" />
                <span className="min-w-0 flex-1 truncate text-left">{label}</span>
                <button
                  type="button"
@@ -249,15 +250,15 @@ export function FileTree({
                    event.stopPropagation();
                    onCreateChild(row.docId);
                  }}
-                  className="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
+                  className="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 shrink-0"
                >
-                  <Plus className="h-3.5 w-3.5" />
+                  <Plus className="w-4 h-4" />
                </button>
              </>
            ) : row.kind === "index" ? (
              <>
-                <span className="h-4 w-4" />
-                <FileText className="h-4 w-4 text-gray-500" />
+                <span className="w-4 h-4 shrink-0" />
+                <FileText className="w-4 h-4 text-wolai-text-secondary shrink-0" />
                <span className="min-w-0 flex-1 truncate text-left">{label}</span>
              </>
            ) : row.kind === "asset-folder" ? (
@@ -270,25 +271,25 @@ export function FileTree({
                      event.stopPropagation();
                      onToggleAssetFolderExpand?.(row.asset.id);
                    }}
-                    className="flex h-5 w-5 items-center justify-center rounded-md hover:bg-gray-100"
+                    className="flex h-5 w-5 items-center justify-center rounded-md hover:bg-gray-100 shrink-0"
                  >
                    <ChevronRight
                      className={cn(
-                        "h-3.5 w-3.5 transition-transform",
+                        "w-4 h-4 text-wolai-text-secondary transition-transform group-hover:text-wolai-text-primary",
                        row.isExpanded && "rotate-90",
                      )}
                    />
                  </button>
                ) : (
-                  <span className="h-5 w-5" />
+                  <span className="w-5 h-5 shrink-0" />
                )}
-                <Folder className="h-4 w-4 text-[#2563eb]" />
+                <Folder className="w-4 h-4 text-[#2563eb] shrink-0" />
                <span className="min-w-0 flex-1 truncate text-left">{label}</span>
              </>
            ) : (
              <>
-                <span className="h-4 w-4" />
-                <Paperclip className="h-4 w-4 text-gray-500" />
+                <span className="w-4 h-4 shrink-0" />
+                <Paperclip className="w-4 h-4 text-wolai-text-secondary shrink-0" />
                <span className="min-w-0 flex-1 truncate text-left">{label}</span>
              </>
            )}
@@ -198,36 +198,37 @@ function SortableTreeRow({
      ref={setNodeRef}
      style={style}
      className={cn(
-        "flex h-full items-center gap-1 border-b border-transparent px-2 text-sm text-gray-700 hover:bg-[#f5f7fb]",
-        activeId === node.id && "bg-[#e8f2ff] text-[#2563eb]",
+        "group flex items-center gap-2 px-3 py-[2px] min-h-[27px] w-full cursor-pointer rounded-[3px] text-wolai-text-primary text-[14px] font-medium hover:bg-wolai-bg-hover transition-colors duration-150",
+        activeId === node.id && "bg-wolai-bg-active text-[#2563eb]",
        isDragging && "opacity-60",
      )}
+      data-active={activeId === node.id}
      onContextMenu={onContextMenu}
    >
      <button
        type="button"
        aria-label="拖拽排序"
-        className="flex h-6 w-6 items-center justify-center rounded-md text-gray-400 hover:text-gray-600"
+        className="flex h-6 w-6 items-center justify-center rounded-md text-wolai-text-secondary hover:text-wolai-text-primary shrink-0"
        {...listeners}
        {...attributes}
      >
-        <GripVertical className="h-4 w-4" />
+        <GripVertical className="w-4 h-4" />
      </button>
      <div
-        className="flex flex-1 items-center gap-2 rounded-md px-1 py-1"
-        style={{ paddingLeft: depth * 14 }}
+        className="flex flex-1 items-center gap-2"
+        style={{ paddingLeft: depth * 12 }}
      >
        {hasChildren ? (
          <button
            type="button"
            aria-label="展开或折叠"
            onClick={onToggleExpand}
-            className="flex h-5 w-5 items-center justify-center rounded-md hover:bg-gray-100"
+            className="flex h-5 w-5 items-center justify-center rounded-md hover:bg-gray-100 shrink-0"
          >
-            <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", expanded && "rotate-90")} />
+            <ChevronRight className={cn("w-4 h-4 text-wolai-text-secondary transition-transform group-hover:text-wolai-text-primary", expanded && "rotate-90")} />
          </button>
        ) : (
-          <span className="h-5 w-5" />
+          <span className="w-5 h-5 shrink-0" />
        )}
        <Link href={`/documents/${node.id}`} className="flex-1 truncate text-left">
          {node.title || "无标题"}
@@ -237,9 +238,9 @@ function SortableTreeRow({
        type="button"
        aria-label="新建子页面"
        onClick={onCreateChild}
-        className="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
+        className="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 shrink-0"
      >
-        <Plus className="h-3.5 w-3.5" />
+        <Plus className="w-4 h-4" />
      </button>
      <button
        type="button"
@@ -248,9 +249,9 @@ function SortableTreeRow({
          event.preventDefault();
          onContextMenu(event);
        }}
-        className="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
+        className="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 shrink-0"
      >
-        <MoreHorizontal className="h-4 w-4" />
+        <MoreHorizontal className="w-4 h-4" />
      </button>
    </div>
  );
@@ -35,9 +35,9 @@ import { buildDocumentTree } from "@/lib/documents";
 import { useSidebarStore } from "@/store/sidebar";
 import type { SidebarInitialData, SidebarSectionId } from "@/components/sidebar/types";
 import { useSidebarData } from "@/hooks/use-sidebar-data";
+import { useConvexSidebarData } from "@/hooks/use-convex-sidebar-data";
 import { PrivateTree } from "@/components/sidebar/private-tree";
 import { buildSidebarSectionsFromTree, flattenDocumentTree } from "@/lib/sidebar-tree";
-import { getSupabaseBrowserClient } from "@/lib/supabase/client";
 import { useSearchPaletteStore } from "@/store/search-palette";
 import { useEditorBridgeStore } from "@/store/editor-bridge";
 import { FileTree } from "@/components/sidebar/file-tree";
@@ -126,26 +126,56 @@ interface ContextMenuState {
  y: number;
 }

+// 主 Sidebar 组件：根据模式路由到不同的子组件
 export function Sidebar({ initialData }: SidebarProps) {
+  const useConvex = useMemo(() => Boolean(getMnoteRuntimeConfig().useConvex), []);
+
+  // 根据模式渲染不同的子组件，确保 Supabase 模式完全不调用 Convex hooks
+  if (useConvex) {
+    return <SidebarConvex initialData={initialData} />;
+  }
+  return <SidebarSupabase initialData={initialData} />;
+}
+
+// Convex 模式专用组件 - 只调用 Convex hooks
+function SidebarConvex({ initialData }: SidebarProps) {
+  const convexData = useConvexSidebarData(initialData.activeWorkspaceId);
+  return <SidebarContent initialData={initialData} sidebarQuery={convexData} />;
+}
+
+// Supabase 模式专用组件 - 只调用 Supabase hooks
+function SidebarSupabase({ initialData }: SidebarProps) {
+  const supabaseData = useSidebarData(initialData);
+  return <SidebarContent initialData={initialData} sidebarQuery={supabaseData} />;
+}
+
+// 共享的 UI 内容组件 - 包含所有现有的 Sidebar 逻辑
+interface SidebarContentProps {
+  initialData: SidebarInitialData;
+  sidebarQuery: {
+    data: SidebarInitialData | null | undefined;
+    isLoading: boolean;
+    refetch: () => Promise<unknown>;
+  };
+}
+
+function SidebarContent({ initialData, sidebarQuery }: SidebarContentProps) {
  const { open, setOpen, width, setWidth, collapsedSections, toggleSection, setSectionCollapsed, trashConfirm, setTrashConfirm } =
    useSidebarStore();
-  const useConvex = useMemo(() => Boolean(getMnoteRuntimeConfig().useConvex), []);
-  const supabaseBrowser = useMemo(() => {
-    if (useConvex) return null;
-    try {
-      return getSupabaseBrowserClient();
-    } catch {
-      return null;
-    }
-  }, [useConvex]);
  const sectionsTrayOpen = useSidebarStore((state) => state.sectionsTrayOpen);
  const toggleSectionsTray = useSidebarStore((state) => state.toggleSectionsTray);
  const setSectionsTrayOpen = useSidebarStore((state) => state.setSectionsTrayOpen);
  const viewMode = useSidebarStore((state) => state.viewMode);
  const setViewMode = useSidebarStore((state) => state.setViewMode);
-  const openSearchPalette = useSearchPaletteStore((state) => state.openSearch); 
-  const sidebarQuery = useSidebarData(initialData);
-  const sidebarData = sidebarQuery.data ?? initialData;
+  const openSearchPalette = useSearchPaletteStore((state) => state.openSearch);
+
+  // 处理数据
+  const sidebarData = useMemo(() => {
+    return sidebarQuery.data ?? initialData;
+  }, [sidebarQuery, initialData]);
+
+  // isLoading 判断
+  const isLoading = sidebarQuery.isLoading;
  const segments = useSelectedLayoutSegments();
  const router = useRouter();
  const activeId = segments?.[1] ?? "";
@@ -253,45 +283,6 @@ export function Sidebar({ initialData }: SidebarProps) {
    await sidebarQuery.refetch();
  }, [sidebarQuery]);

-  useEffect(() => {
-    if (!supabaseBrowser) return;
-    const channel = supabaseBrowser
-      .channel("documents-feed")
-      .on(
-        "postgres_changes",
-        { event: "*", schema: "public", table: "documents" },
-        () => {
-          void refreshTree();
-        },
-      )
-      .subscribe();
-    return () => {
-      supabaseBrowser.removeChannel(channel);
-    };
-  }, [refreshTree, supabaseBrowser]);
-
-  useEffect(() => {
-    if (!supabaseBrowser) return;
-    const channel = supabaseBrowser
-      .channel("media-assets-feed")
-      .on(
-        "postgres_changes",
-        {
-          event: "*",
-          schema: "public",
-          table: "media_assets",
-          filter: `workspace_id=eq.${sidebarData.activeWorkspaceId}`,
-        },
-        () => {
-          void sidebarQuery.refetch();
-        },
-      )
-      .subscribe();
-    return () => {
-      supabaseBrowser.removeChannel(channel);
-    };
-  }, [sidebarData.activeWorkspaceId, sidebarQuery, supabaseBrowser]);
-
  const sections = useMemo(() => buildSidebarSectionsFromTree(tree), [tree]);
  const starredNodes = useMemo(() => sections.find((section) => section.id === "starred")?.nodes ?? [], [sections]);
  const publicNodes = useMemo(() => sections.find((section) => section.id === "public")?.nodes ?? [], [sections]);
@@ -498,29 +489,7 @@ export function Sidebar({ initialData }: SidebarProps) {

  const handleEmbedPrompt = useCallback(async (node: DocumentNode) => {
    openMoveEmbedPicker(node, "embed");
-    return;
-    if (sidebarData.activeWorkspaceId) {
-      openMoveEmbedPicker(node, "embed");
-      return;
-    }
-    if (typeof window === "undefined") {
-      return;
-    }
-    const target = window.prompt("输入希望嵌入到的页面 ID");
-    if (!target) {
-      return;
-    }
-    const response = await fetch("/api/documents/embed", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ sourceId: node.id, targetId: target.trim() }),
-    });
-    if (!response.ok) {
-      window.alert("嵌入失败，请检查目标页面 ID");
-      return;
-    }
-    window.alert("已在目标页面末尾插入引用块");
-  }, []);
+  }, [openMoveEmbedPicker]);

  const toggleExpand = useCallback((id: string) => {
    setExpanded((prev) => {
@@ -1492,22 +1461,8 @@ export function Sidebar({ initialData }: SidebarProps) {
  const handleMovePrompt = useCallback(
    async (node: DocumentNode) => {
      openMoveEmbedPicker(node, "move");
-      return;
-      if (sidebarData.activeWorkspaceId) {
-        openMoveEmbedPicker(node, "move");
-        return;
-      }
-      if (typeof window === "undefined") {
-        return;
-      }
-      const target = window.prompt("输入目标父页面 ID（留空表示移动到根目录）", node.parent_id ?? "");
-      if (target === null) {
-        return;
-      }
-      const trimmed = target.trim();
-      await handleMove(node.id, trimmed.length > 0 ? trimmed : null, 0);
    },
-    [handleMove],
+    [openMoveEmbedPicker],
  );

  const handleDelete = useCallback(
@@ -2035,8 +1990,8 @@ export function Sidebar({ initialData }: SidebarProps) {

  return (
    <>
-      <aside className="hidden h-full min-w-0 overflow-hidden md:flex" style={{ width }}>
-        <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden border-r border-[#e9edf5] bg-white">
+      <aside className="hidden h-full min-w-0 overflow-hidden md:flex shrink-0" style={{ width }}>
+        <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden border-r border-wolai-border bg-wolai-bg-sidebar">
          {sidebarBody}
        </div>
        <div className="w-1 cursor-col-resize bg-transparent" onMouseDown={handleResizeStart} />