0.3.4 小图标功能增加

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

@@ -35,6 +35,7 @@ export interface DocumentContentProps {
   initialOptions: PageOptionsState;
   initialStats: DocumentStats | null;
   openTableId?: string | null;
+  readOnly?: boolean;
 }
 
 const defaultOptions: PageOptionsState = {
@@ -57,6 +58,7 @@ export function DocumentContent({
   initialOptions,
   initialStats,
   openTableId,
+  readOnly = false,
 }: DocumentContentProps) {
   const [options, setOptions] = useState<PageOptionsState>(initialOptions ?? defaultOptions);
   const [stats, setStats] = useState<DocumentStats>(initialStats ?? defaultStats);
@@ -179,6 +181,7 @@ export function DocumentContent({
 
   const persistTitle = useCallback(
     async (nextTitle: string) => {
+      if (readOnly) return;
       const payload = nextTitle.trim() || "无标题";
       await fetch("/api/documents/title", {
         method: "POST",
@@ -186,7 +189,7 @@ export function DocumentContent({
         body: JSON.stringify({ documentId, title: payload }),
       });
     },
-    [documentId],
+    [documentId, readOnly],
   );
 
   const debouncedPersistTitle = useDebouncedCallback((value: string) => {
@@ -194,12 +197,14 @@ export function DocumentContent({
   }, 600);
 
   const handleTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (readOnly) return;
     const value = event.target.value;
     setPageTitle(value);
     debouncedPersistTitle(value);
   };
 
   const handleTitleBlur = () => {
+    if (readOnly) return;
     void persistTitle(pageTitle);
   };
 
@@ -212,6 +217,7 @@ export function DocumentContent({
 
   const persistOptions = useCallback(
     async (patch: Partial<PageOptionsState>) => {
+      if (readOnly) return;
       try {
         const response = await fetch("/api/documents/options", {
           method: "POST",
@@ -226,10 +232,11 @@ export function DocumentContent({
         console.error(error);
       }
     },
-    [documentId],
+    [documentId, readOnly],
   );
 
   const toggleOption = (key: keyof PageOptionsState) => {
+    if (readOnly) return;
     setOptions((prev) => {
       const nextValue = !prev[key];
       const next = { ...prev, [key]: nextValue };
@@ -320,12 +327,14 @@ export function DocumentContent({
                 placeholder="无标题"
                 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}
+                disabled={options.protectEditing || readOnly}
               />
             </div>
-            {options.protectEditing && (
+            {readOnly ? (
+              <p className="mt-1 text-sm text-gray-500">该页面为只读共享，无法编辑。</p>
+            ) : options.protectEditing ? (
               <p className="mt-1 text-sm text-[#b91c1c]">当前页面已开启编辑保护，关闭后方可修改内容。</p>
-            )}
+            ) : null}
             <p className="text-sm text-wolai-text-secondary">最近更新：{formattedUpdatedAt}</p>
           </div>
           <div className="flex-1 overflow-y-auto px-12 py-6">
@@ -358,6 +367,7 @@ export function DocumentContent({
                 workspaceId={workspaceId}
                 initialContent={content}
                 pageOptions={options}
+                readOnly={readOnly}
                 onStatsChange={handleStatsChange}
                 onSnapshot={handleSnapshot}
               />