0.4.0 convex及界面修改

wolai-frontend/src/components/editor/page-backlinks-panel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { useBacklinks } from "@/hooks/use-backlinks";
 import type { BacklinkRecord } from "@/types/references";
@@ -10,6 +10,7 @@ interface PageBacklinksPanelProps {
   workspaceId: string;
   documentId: string;
   className?: string;
+  defaultCollapsed?: boolean;
 }
 
 const formatRelative = (value: string) => {
@@ -37,13 +38,16 @@ const BacklinkItem = ({ record }: { record: BacklinkRecord }) => (
   </div>
 );
 
-export function PageBacklinksPanel({ workspaceId, documentId, className }: PageBacklinksPanelProps) {
+export function PageBacklinksPanel({ workspaceId, documentId, className, defaultCollapsed }: PageBacklinksPanelProps) {
   const { data, isLoading, error, refetch, isFetching } = useBacklinks({
     workspaceId,
     documentId,
   });
 
   const records = useMemo(() => data ?? [], [data]);
+  // 说明：collapsed 需要可交互；这里用一个轻量的局部状态，但默认值来自 props（用于“自定义页面：折叠引用列表”）。
+  const [isCollapsed, setIsCollapsed] = useState(Boolean(defaultCollapsed));
+  useEffect(() => setIsCollapsed(Boolean(defaultCollapsed)), [defaultCollapsed]);
   // 避免页面切换时“先出现加载态、随后又消失”的闪烁：
   // 当尚未拿到任何记录且正在加载时，直接不渲染面板。
   if (!error && records.length === 0 && (isLoading || isFetching)) {
@@ -65,12 +69,29 @@ export function PageBacklinksPanel({ workspaceId, documentId, className }: PageB
           {isFetching ? "刷新中..." : "刷新"}
         </Button>
       </div>
+      {records.length > 0 && (
+        <div className="mb-4 flex items-center justify-between text-xs text-gray-500">
+          <span>共 {records.length} 条</span>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setIsCollapsed((prev) => !prev)}
+            className="h-7 px-2"
+          >
+            {isCollapsed ? "展开" : "折叠"}
+          </Button>
+        </div>
+      )}
       {isLoading ? (
         <div className="py-6 text-center text-sm text-gray-500">加载引用中...</div>
       ) : error ? (
         <div className="py-6 text-center text-sm text-red-500">{(error as Error).message}</div>
       ) : records.length === 0 ? (
         <EmptyState />
+      ) : isCollapsed ? (
+        <div className="rounded-xl border border-dashed border-[#e2e8f0] bg-white/60 px-4 py-4 text-center text-xs text-gray-500">
+          已折叠。点击“展开”查看。
+        </div>
       ) : (
         <div className="space-y-3">
           {records.map((record) => (