chore: save current changes

2025-11-23 20:04:29 +08:00
parent 994dd4e67c
commit 5d0e4c4cb6
10 changed files with 695 additions and 191 deletions
@@ -4,7 +4,7 @@ import { BlockNoteEditor, Block } from "@blocknote/core";
 import { createReactBlockSpec } from "@blocknote/react";
 import { OnlineTableBlockProps } from "@/types/online-table";
 import { Table } from "lucide-react";
-import React from "react";
+import React, { useCallback } from "react";
 import type { CustomBlockSchema } from "../schema";
 import CompactTablePreview from "@/components/online-table/CompactTablePreview";
 import { useEditorBridgeStore } from "@/store/editor-bridge";
@@ -29,9 +29,13 @@ const OnlineTableBlockComponent = ({
    }
  };

+  const handleDelete = useCallback(() => {
+    editor.removeBlocks([block.id]);
+  }, [block.id, editor]);
+
  return (
    <div className="w-full">
-      <CompactTablePreview tableId={tableId} onFullScreen={handleFullScreen} />
+      <CompactTablePreview tableId={tableId} onFullScreen={handleFullScreen} onDelete={handleDelete} />
    </div>
  );
 };
@@ -14,6 +14,7 @@ import {
 } from "@blocknote/react";
 import { useRouter } from "next/navigation";
 import type { CustomBlockSchema } from "../schema";
+import { deleteOnlineTable } from "@/lib/online-table";

 type InlineNode = { text?: unknown };
 type TableMenuBlock = Parameters<
@@ -72,6 +73,16 @@ const CustomDragHandleMenu = ({ block, currentDocumentId }: CustomDragProps) =>
      void removePageReference();
      return;
    }
+    if (block.type === "onlineTable") {
+      const tableId = block.props.tableId as string | undefined;
+      if (tableId) {
+        void deleteOnlineTable(tableId)
+          .catch((error) => console.error("删除在线表格失败", error));
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(new CustomEvent("online-table-deleted", { detail: { tableId } }));
+        }
+      }
+    }
    editor.removeBlocks([block.id]);
  }, [block, editor, removePageReference]);

@@ -1,67 +1,172 @@
 "use client";

 import React, { useEffect, useState, useMemo, useCallback } from "react";
-import { DocumentTable, TableColumn } from "@/types/online-table";
-import { DEFAULT_TABLE_COLUMNS, DEFAULT_TABLE_ROWS, getDocumentTable } from "@/lib/online-table";
-import { Loader2, Table, Maximize2, Plus, Minus } from "lucide-react";
+import { DocumentTable, TableColumn, TableRowData } from "@/types/online-table";
+import {
+  DEFAULT_TABLE_COLUMNS,
+  DEFAULT_TABLE_ROWS,
+  deleteOnlineTable,
+  getDocumentTable,
+} from "@/lib/online-table";
+import { Loader2, Table, Maximize2, Trash2 } from "lucide-react";

 interface CompactTablePreviewProps {
  tableId: string;
  onFullScreen: () => void;
+  onDelete?: () => void;
 }

-// 模拟获取表格行数据（阶段二只关注元数据和预览结构）
-// 实际应用中，这里会调用 getDocumentTable 并可能获取前N行数据
 const useTableData = (tableId: string) => {
  const [table, setTable] = useState<DocumentTable | null>(null);
  const [isLoading, setIsLoading] = useState(true);
+  const [version, setVersion] = useState(0);
+
+  const refresh = useCallback(() => setVersion((prev) => prev + 1), []);

  useEffect(() => {
+    let aborted = false;
    setIsLoading(true);
    getDocumentTable(tableId)
      .then((data) => {
+        if (aborted) return;
        setTable({ ...data, title: data.title || "未命名表格" });
      })
      .catch((err) => {
        console.error("Failed to load table:", err);
+        if (aborted) return;
        setTable(null);
      })
-      .finally(() => setIsLoading(false));
-  }, [tableId]);
+      .finally(() => {
+        if (!aborted) {
+          setIsLoading(false);
+        }
+      });
+    return () => {
+      aborted = true;
+    };
+  }, [tableId, version]);

-  return { table, isLoading };
+  return { table, isLoading, refresh };
 };

-// 渲染单个单元格内容的辅助函数
-const renderCellContent = (column: TableColumn, value: any) => {
-    if (value === undefined || value === null || value === "") {
-        return "";
-    }
-    if (column.type === 'select') {
-        const option = column.options?.find(opt => opt.value === value);
-        if (option) {
-            return (
-                <span className="px-2 py-0.5 text-xs font-medium rounded-full" style={{ backgroundColor: option.color, color: 'white' }}>
-                    {value}
-                </span>
-            );
-        }
-    }
-    return String(value);
-}
+const pickCellDisplayValue = (cell: any) => {
+  if (!cell) return undefined;
+  if (cell.m !== undefined && cell.m !== null) return cell.m;
+  if (cell.v?.m !== undefined && cell.v?.m !== null) return cell.v.m;
+  if (cell.v?.v !== undefined && cell.v?.v !== null) return cell.v.v;
+  if (cell.v !== undefined && cell.v !== null && typeof cell.v !== "object") return cell.v;
+  if (cell.w !== undefined && cell.w !== null) return cell.w;
+  return undefined;
+};

-const CompactTablePreview: React.FC<CompactTablePreviewProps> = ({ tableId, onFullScreen }) => {
-  const { table, isLoading } = useTableData(tableId);
-  const [hoveredRowIndex, setHoveredRowIndex] = useState<number | null>(null);
-  const [editingCell, setEditingCell] = useState<{ rowIndex: number, colId: string } | null>(null);
+const deriveRowsFromLuckysheet = (luckysheetData: any, columns: TableColumn[]): TableRowData[] => {
+  const sheets = Array.isArray(luckysheetData) ? luckysheetData : [];
+  const sheet = sheets[0];
+  if (!sheet) return [];
+
+  const columnIds = columns.length > 0
+    ? columns.map((col) => col.id)
+    : Array.from({ length: DEFAULT_TABLE_COLUMNS }, (_, index) => `col${index + 1}`);
+
+  const rows: TableRowData[] = [];
+  const dataGrid = Array.isArray(sheet.data) ? sheet.data : [];
+
+  dataGrid.forEach((rowData: any[], rowIndex: number) => {
+    if (!Array.isArray(rowData)) return;
+    const row: TableRowData = {};
+    let hasValue = false;
+    columnIds.forEach((colId, colIndex) => {
+      const value = pickCellDisplayValue(rowData[colIndex]);
+      if (value !== undefined && value !== null && value !== "") {
+        row[colId] = value;
+        hasValue = true;
+      }
+    });
+    if (hasValue) rows.push(row);
+  });
+
+  if (rows.length === 0 && Array.isArray(sheet.celldata)) {
+    const map = new Map<number, TableRowData>();
+    sheet.celldata.forEach((cell: { r: number; c: number; v: unknown }) => {
+      const value = pickCellDisplayValue(cell?.v ?? cell);
+      if (value === undefined || value === null || value === "") return;
+      const existing = map.get(cell.r) ?? {};
+      existing[columnIds[cell.c] ?? `col${cell.c + 1}`] = value;
+      map.set(cell.r, existing);
+    });
+    Array.from(map.entries())
+      .sort(([a], [b]) => a - b)
+      .forEach(([, row]) => rows.push(row));
+  }
+
+  return rows;
+};
+
+const renderCellContent = (column: TableColumn, value: any) => {
+  if (value === undefined || value === null || value === "") {
+    return "";
+  }
+  if (column.type === "select") {
+    const option = column.options?.find((opt) => opt.value === value);
+    if (option) {
+      return (
+        <span className="px-2 py-0.5 text-xs font-medium rounded-full" style={{ backgroundColor: option.color, color: "white" }}>
+          {value}
+        </span>
+      );
+    }
+  }
+  return String(value);
+};
+
+const CompactTablePreview: React.FC<CompactTablePreviewProps> = ({ tableId, onFullScreen, onDelete }) => {
+  const { table, isLoading, refresh } = useTableData(tableId);
  const [visibleRows, setVisibleRows] = useState(5);
  const [visibleCols, setVisibleCols] = useState(5);

-  const snapshotRows = table?.snapshot?.rows ?? [];
-  const schemaColumns = table?.schema.columns ?? [];
-  const hasData = snapshotRows.length > 0 && schemaColumns.length > 0;
+  const schemaColumns = useMemo(
+    () => Array.isArray(table?.schema?.columns) ? table!.schema.columns : [],
+    [table],
+  );

-  const totalRowsAvailable = hasData ? snapshotRows.length : DEFAULT_TABLE_ROWS;
+  const rows: TableRowData[] = useMemo(() => {
+    if (!table) return [];
+    if (Array.isArray(table.snapshot?.rows) && table.snapshot.rows.length > 0) {
+      return table.snapshot.rows as TableRowData[];
+    }
+    if ((table.snapshot as { luckysheet?: unknown })?.luckysheet) {
+      return deriveRowsFromLuckysheet(
+        (table.snapshot as { luckysheet?: unknown }).luckysheet,
+        schemaColumns,
+      );
+    }
+    return [];
+  }, [schemaColumns, table]);
+
+  useEffect(() => {
+    const handleSaved = (event: Event) => {
+      const detail = (event as CustomEvent<{ tableId?: string }>).detail;
+      if (detail?.tableId === tableId) {
+        refresh();
+      }
+    };
+    const handleDeleted = (event: Event) => {
+      const detail = (event as CustomEvent<{ tableId?: string }>).detail;
+      if (detail?.tableId === tableId) {
+        refresh();
+      }
+    };
+    window.addEventListener("online-table-saved", handleSaved as EventListener);
+    window.addEventListener("online-table-deleted", handleDeleted as EventListener);
+    return () => {
+      window.removeEventListener("online-table-saved", handleSaved as EventListener);
+      window.removeEventListener("online-table-deleted", handleDeleted as EventListener);
+    };
+  }, [refresh, tableId]);
+
+  const hasData = rows.length > 0 && schemaColumns.length > 0;
+
+  const totalRowsAvailable = hasData ? rows.length : DEFAULT_TABLE_ROWS;
  const totalColsAvailable = hasData ? schemaColumns.length : DEFAULT_TABLE_COLUMNS;

  useEffect(() => {
@@ -80,7 +185,7 @@ const CompactTablePreview: React.FC<CompactTablePreviewProps> = ({ tableId, onFu
  }, [totalRowsAvailable, totalColsAvailable, visibleRows, visibleCols]);

  const columns = useMemo(() => {
-    if (hasData) {
+    if (schemaColumns.length > 0) {
      return schemaColumns.slice(0, visibleCols);
    }
    const placeholderCount = Math.max(visibleCols, 5);
@@ -90,15 +195,15 @@ const CompactTablePreview: React.FC<CompactTablePreviewProps> = ({ tableId, onFu
      type: "text" as const,
      width: 100,
    }));
-  }, [hasData, schemaColumns, visibleCols]);
+  }, [schemaColumns, visibleCols]);

  const rowsToDisplay = useMemo(() => {
-    if (hasData) {
-      return snapshotRows.slice(0, visibleRows);
+    if (rows.length > 0) {
+      return rows.slice(0, visibleRows);
    }
    const placeholderCount = Math.max(visibleRows, 5);
    return Array.from({ length: placeholderCount }, (_, index) => ({ id: `placeholder_row_${index}` }));
-  }, [hasData, snapshotRows, visibleRows]);
+  }, [rows, visibleRows]);

  const headerCells = useMemo(() => {
    const cells = [
@@ -122,6 +227,19 @@ const CompactTablePreview: React.FC<CompactTablePreviewProps> = ({ tableId, onFu
    event.stopPropagation();
  }, []);

+  const handleDeleteTable = useCallback(async () => {
+    const confirmed = window.confirm("删除表格将同步移除 Supabase 记录，确认继续？");
+    if (!confirmed) return;
+    try {
+      await deleteOnlineTable(tableId);
+      window.dispatchEvent(new CustomEvent("online-table-deleted", { detail: { tableId } }));
+      onDelete?.();
+    } catch (error) {
+      console.error("删除表格失败", error);
+      window.alert("删除失败，请稍后重试");
+    }
+  }, [onDelete, tableId]);
+
  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-20 bg-gray-50 border border-dashed rounded-md">
@@ -139,12 +257,6 @@ const CompactTablePreview: React.FC<CompactTablePreviewProps> = ({ tableId, onFu
    );
  }

-  // 模拟行操作：插入/删除
-  // 实际应用中，这里需要调用后端或协同服务
-  const handleRowOperation = (rowIndex: number, type: 'insert' | 'delete') => {
-      console.log(`${type} row at index ${rowIndex} in table ${tableId}`);
-  }
-
  return (
    <div
      className="relative w-full p-1 border border-gray-200 rounded-md transition-shadow hover:shadow-md"
@@ -154,117 +266,59 @@ const CompactTablePreview: React.FC<CompactTablePreviewProps> = ({ tableId, onFu
      onMouseUp={suppressEditorEvents}
      onMouseMove={suppressEditorEvents}
    >
-      {/* 表格标题 */}
      <div className="flex justify-between items-center px-2 py-1">
        <h3 className="text-sm font-semibold text-gray-700">{table.title}</h3>
-        {/* 全屏按钮 (hover toolbar的一部分) */}
-        <button
-          onClick={onFullScreen}
-          className="p-1 text-gray-400 hover:text-blue-500 transition-colors"
-          title="进入全屏编辑"
-        >
-          <Maximize2 className="h-4 w-4" />
-        </button>
+        <div className="flex items-center space-x-1">
+          <span className="text-[11px] text-gray-400">只读预览，双击进入全屏编辑</span>
+          <button
+            onClick={handleDeleteTable}
+            className="p-1 text-gray-400 hover:text-red-500 transition-colors"
+            title="删除表格"
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+          <button
+            onClick={onFullScreen}
+            className="p-1 text-gray-400 hover:text-blue-500 transition-colors"
+            title="进入全屏编辑"
+          >
+            <Maximize2 className="h-4 w-4" />
+          </button>
+        </div>
      </div>

-      {/* 紧凑表格视图 */}
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200">
-          {/* 表头 */}
          <thead className="bg-gray-100">
            <tr>{headerCells}</tr>
          </thead>
-          {/* 表体 */}
          <tbody className="bg-white divide-y divide-gray-200">
-            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-            {rowsToDisplay.map((row: any, index: number) => {
-              const rowId = row.id || index;
+            {rowsToDisplay.map((row, index) => {
+              const rowId = (row as { id?: string }).id || index;
              return (
-                <tr 
-                  key={rowId} 
-                  className="hover:bg-gray-50 relative group"
-                  onMouseEnter={() => setHoveredRowIndex(index)}
-                  onMouseLeave={() => setHoveredRowIndex(null)}
+                <tr
+                  key={rowId}
+                  className="hover:bg-gray-50 relative group cursor-pointer"
+                  onClick={onFullScreen}
                >
-                  {/* 行操作按钮 */}
-                  <td className="w-8 p-0 text-center">
-                      {hoveredRowIndex === index && (
-                          <div className="flex items-center justify-center space-x-0.5 opacity-100 transition-opacity">
-                              <button 
-                                  onClick={() => handleRowOperation(index, 'insert')}
-                                  className="p-0.5 text-gray-400 hover:text-green-500"
-                                  title="在上方插入一行"
-                              >
-                                  <Plus className="h-3 w-3" />
-                              </button>
-                              <button 
-                                  onClick={() => handleRowOperation(index, 'delete')}
-                                  className="p-0.5 text-gray-400 hover:text-red-500"
-                                  title="删除此行"
-                              >
-                                  <Minus className="h-3 w-3" />
-                              </button>
-                          </div>
-                      )}
-                  </td>
-                  {columns.map((col) => {
-                    const isEditing = editingCell?.rowIndex === index && editingCell?.colId === col.id;
-                    const cellValue = row[col.id];
-
-                    const handleCellClick = () => {
-                        // 仅允许轻编辑文本和数字类型
-                        if (col.type === 'text' || col.type === 'number') {
-                            setEditingCell({ rowIndex: index, colId: col.id });
-                        } else {
-                            // TODO: 复杂类型（Select, Date等）引导进入全屏
-                            onFullScreen();
-                        }
-                    }
-
-                    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-                        // TODO: 实际更新 Supabase 数据
-                        console.log(`Cell ${col.id} at row ${index} updated to: ${e.target.value}`);
-                        setEditingCell(null);
-                    }
-                    
-                    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-                        if (e.key === 'Enter' || e.key === 'Escape') {
-                            // 提交或取消编辑
-                            e.currentTarget.blur();
-                        }
-                    }
-
-                    return (
-                      <td
-                        key={col.id}
-                        className="px-3 py-2 whitespace-nowrap text-sm text-gray-900 border-l border-gray-100 cursor-text text-center align-middle min-w-[80px]"
-                        onClick={handleCellClick}
-                      >
-                        {isEditing ? (
-                            <input 
-                                type={col.type === 'number' ? 'number' : 'text'}
-                                defaultValue={cellValue}
-                                onBlur={handleBlur}
-                                onKeyDown={handleKeyDown}
-                                autoFocus
-                                className="w-full p-0 border-none focus:ring-0 focus:outline-none bg-transparent"
-                            />
-                        ) : (
-                            renderCellContent(col, cellValue)
-                        )}
-                      </td>
-                    );
-                  })}
+                  <td className="w-8 p-0 text-center" />
+                  {columns.map((col) => (
+                    <td
+                      key={col.id}
+                      className="px-3 py-2 whitespace-nowrap text-sm text-gray-900 border-l border-gray-100 text-center align-middle min-w-[80px]"
+                    >
+                      {renderCellContent(col, (row as Record<string, unknown>)[col.id])}
+                    </td>
+                  ))}
                </tr>
              );
            })}
-            {/* 提示更多行 */}
-            {table.snapshot?.rows && rowsToDisplay.length < table.snapshot.rows.length && (
-                <tr>
-                    <td colSpan={columns.length + 1} className="px-4 py-2 text-center text-xs text-gray-500 italic">
-                        ... 更多 { table.snapshot.rows.length - rowsToDisplay.length } 行数据，双击进入全屏查看
-                    </td>
-                </tr>
+            {rows.length > rowsToDisplay.length && (
+              <tr>
+                <td colSpan={columns.length + 1} className="px-4 py-2 text-center text-xs text-gray-500 italic">
+                  ... 更多 {rows.length - rowsToDisplay.length} 行数据，双击进入全屏查看
+                </td>
+              </tr>
            )}
          </tbody>
        </table>
@@ -1,9 +1,16 @@
 "use client";

-import React, { useEffect, useRef, useState } from "react";
-import { Table, X, Zap } from "lucide-react";
-import type { DocumentTable } from "@/types/online-table";
-import { DEFAULT_TABLE_COLUMNS, DEFAULT_TABLE_ROWS, DEFAULT_TABLE_SCHEMA, createDefaultTableSnapshot } from "@/lib/online-table";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Loader2, Table, X, Zap } from "lucide-react";
+import type { DocumentTable, TableRowData } from "@/types/online-table";
+import {
+  DEFAULT_TABLE_COLUMNS,
+  DEFAULT_TABLE_ROWS,
+  DEFAULT_TABLE_SCHEMA,
+  createDefaultTableSnapshot,
+  saveOnlineTable,
+} from "@/lib/online-table";
+import { useDebouncedCallback } from "@/hooks/use-debounced-callback";

 interface FullScreenTableEditorProps {
  tableId: string;
@@ -27,14 +34,72 @@ const LUCKY_SHEET_RESOURCES = {
  ],
 };

+const extractRowsForPreview = (luckysheetData: any, columns: Array<{ id: string }>): TableRowData[] => {
+  const sheet = Array.isArray(luckysheetData) ? luckysheetData[0] : null;
+  if (!sheet) return [];
+  const columnIds = columns.length > 0 ? columns.map((item) => item.id) : Array.from({ length: DEFAULT_TABLE_COLUMNS }, (_, idx) => `col${idx + 1}`);
+  const rows: TableRowData[] = [];
+  const grid = Array.isArray(sheet.data) ? sheet.data : [];
+
+  const pickValue = (cell: any) => {
+    if (!cell) return undefined;
+    if (cell.m !== undefined && cell.m !== null) return cell.m;
+    if (cell.v?.m !== undefined && cell.v?.m !== null) return cell.v.m;
+    if (cell.v?.v !== undefined && cell.v?.v !== null) return cell.v.v;
+    if (cell.v !== undefined && cell.v !== null && typeof cell.v !== "object") return cell.v;
+    if (cell.w !== undefined && cell.w !== null) return cell.w;
+    return undefined;
+  };
+
+  grid.forEach((row: any[], rowIndex: number) => {
+    if (!Array.isArray(row)) return;
+    const rowObj: TableRowData = {};
+    let hasValue = false;
+    columnIds.forEach((colId, colIndex) => {
+      const value = pickValue(row[colIndex]);
+      if (value !== undefined && value !== null && value !== "") {
+        rowObj[colId] = value;
+        hasValue = true;
+      }
+    });
+    if (hasValue) {
+      rows.push(rowObj);
+    }
+  });
+
+  if (rows.length === 0 && Array.isArray(sheet.celldata)) {
+    const map = new Map<number, TableRowData>();
+    sheet.celldata.forEach((cell: { r: number; c: number; v: unknown }) => {
+      const value = pickValue(cell?.v ?? cell);
+      if (value === undefined || value === null || value === "") return;
+      const existing = map.get(cell.r) ?? {};
+      existing[columnIds[cell.c] ?? `col${cell.c + 1}`] = value;
+      map.set(cell.r, existing);
+    });
+    Array.from(map.entries())
+      .sort(([a], [b]) => a - b)
+      .forEach(([, row]) => rows.push(row));
+  }
+
+  return rows;
+};
+
 const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId, onClose }) => {
  const containerRef = useRef<HTMLDivElement>(null);
+  const isApplyingSnapshotRef = useRef(false);
+  const hasInitializedRef = useRef(false);
+  const lastTableIdRef = useRef<string | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [tableData, setTableData] = useState<DocumentTable | null>(null);
  const [isTableLoading, setIsTableLoading] = useState(true);
  const [tableError, setTableError] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasPendingChanges, setHasPendingChanges] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [lastSyncedAt, setLastSyncedAt] = useState<number | null>(null);
+  const persistSnapshotRef = useRef<((reason: "auto" | "close") => Promise<void>) | null>(null);

-  const fetchTable = (id: string) => {
+  const fetchTable = useCallback((id: string) => {
    setIsTableLoading(true);
    setTableError(null);
    setTableData(null);
@@ -54,11 +119,13 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
        setTableData(null);
      })
      .finally(() => setIsTableLoading(false));
-  };
+  }, []);

  useEffect(() => {
    fetchTable(tableId);
-  }, [tableId]);
+    hasInitializedRef.current = false;
+    lastTableIdRef.current = tableId;
+  }, [fetchTable, tableId]);

  // 动态加载 Luckysheet 资源
  useEffect(() => {
@@ -71,7 +138,7 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
      if (document.querySelector(`${tag}[href="${url}"]`) || document.querySelector(`${tag}[src="${url}"]`)) {
        return true;
      }
-      
+
      if (tag === "link") {
        const link = document.createElement("link");
        link.rel = "stylesheet";
@@ -89,10 +156,8 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
      return false;
    };

-    // 加载所有 CSS
-    LUCKY_SHEET_RESOURCES.css.forEach(url => loadResource("link", url));
+    LUCKY_SHEET_RESOURCES.css.forEach((url) => loadResource("link", url));

-    // 串行加载 JS，确保顺序
    const loadJsSequentially = async () => {
      for (const url of LUCKY_SHEET_RESOURCES.js) {
        await loadResource("script", url);
@@ -101,16 +166,64 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
    };

    loadJsSequentially();
-
  }, []);

-  const getLuckysheetSheets = () => {
+  const luckysheetSheets = useMemo(() => {
    if (tableData?.snapshot?.luckysheet && Array.isArray(tableData.snapshot.luckysheet) && tableData.snapshot.luckysheet.length > 0) {
      return tableData.snapshot.luckysheet;
    }
    const snapshot = createDefaultTableSnapshot(tableData?.schema ?? DEFAULT_TABLE_SCHEMA);
    return snapshot.luckysheet ?? [];
-  };
+  }, [tableData]);
+
+  const persistSnapshot = useCallback(async (reason: "auto" | "close") => {
+    if (!tableData || !window.luckysheet || typeof window.luckysheet.getluckysheetfile !== "function") {
+      return;
+    }
+    setIsSaving(true);
+    setSaveError(null);
+    try {
+      const luckysheetData = window.luckysheet.getluckysheetfile?.() ?? luckysheetSheets;
+      const rows = extractRowsForPreview(
+        luckysheetData,
+        (tableData.schema?.columns ?? []).map((item) => ({ id: item.id })),
+      ).filter((row) => row && typeof row === "object" && Object.keys(row).length > 0);
+      const snapshot = {
+        ...(tableData.snapshot ?? {}),
+        rows,
+        luckysheet: Array.isArray(luckysheetData) ? luckysheetData : luckysheetSheets,
+      };
+      const updated = await saveOnlineTable(tableId, {
+        snapshot,
+        rows,
+        schema: tableData.schema,
+      });
+      setTableData(updated);
+      setHasPendingChanges(false);
+      setLastSyncedAt(Date.now());
+      window.dispatchEvent(new CustomEvent("online-table-saved", { detail: { tableId } }));
+    } catch (error) {
+      console.error("保存 Luckysheet 数据失败", error);
+      setSaveError(reason === "close" ? "关闭前保存失败，请重试" : "自动保存失败");
+    } finally {
+      setIsSaving(false);
+    }
+  }, [tableData, tableId]);
+
+  const debouncedPersist = useDebouncedCallback(() => {
+    void persistSnapshot("auto");
+  }, 1200);
+
+  useEffect(() => {
+    persistSnapshotRef.current = persistSnapshot;
+  }, [persistSnapshot]);
+
+  useEffect(() => {
+    return () => {
+      debouncedPersist.cancel();
+      void persistSnapshotRef.current?.("close");
+    };
+  }, [debouncedPersist]);

  // Luckysheet 初始化和清理
  useEffect(() => {
@@ -118,6 +231,13 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
      return;
    }

+    if (hasInitializedRef.current && lastTableIdRef.current === tableId) {
+      return;
+    }
+
+    hasInitializedRef.current = true;
+    isApplyingSnapshotRef.current = true;
+
    if (containerRef.current.children.length > 0) {
      window.luckysheet.destroy(LUCKY_SHEET_CONTAINER_ID);
      containerRef.current.innerHTML = "";
@@ -134,22 +254,48 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
      allowEdit: true,
      row: DEFAULT_TABLE_ROWS,
      column: DEFAULT_TABLE_COLUMNS,
-      data: getLuckysheetSheets(),
+      data: luckysheetSheets,
+      hook: {
+        updated: () => {
+          if (isApplyingSnapshotRef.current) return;
+          setHasPendingChanges(true);
+          debouncedPersist();
+        },
+      },
    };

    window.luckysheet.create(options);

+    // 等待首帧渲染完成再开放 updated 事件
+    setTimeout(() => {
+      isApplyingSnapshotRef.current = false;
+    }, 0);
+
    return () => {
      if (window.luckysheet) {
        window.luckysheet.destroy(LUCKY_SHEET_CONTAINER_ID);
      }
    };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tableId, isLoaded, tableData]);
+  }, [debouncedPersist, luckysheetSheets, isLoaded, tableData, tableId]);
+
+  const handleClose = async () => {
+    await persistSnapshot("close");
+    onClose();
+  };

  const showLoadingOverlay = !isLoaded || isTableLoading;
  const loadingMessage = !isLoaded ? "正在加载 Luckysheet 资源..." : "正在加载表格数据...";

+  const statusText = saveError
+    ? saveError
+    : isSaving
+      ? "同步中..."
+      : hasPendingChanges
+        ? "有未保存变更"
+        : lastSyncedAt
+          ? `已同步 ${new Date(lastSyncedAt).toLocaleTimeString()}`
+          : "准备就绪";
+
  return (
    <div className="fixed inset-0 z-50 bg-white dark:bg-gray-900 flex flex-col">
      {/* 顶部工具栏 */}
@@ -157,34 +303,34 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
        <div className="flex items-center space-x-3">
          <Table className="h-5 w-5 text-blue-500" />
          <h1 className="text-lg font-bold">
-            在线表格编辑 - {(tableData?.title ?? tableId).slice(0, 16)}
+            在线表格编辑 - {(tableData?.title ?? tableId).slice(0, 24)}
          </h1>
          <Zap className="h-4 w-4 text-yellow-500" />
          <span className="text-xs text-yellow-600 font-medium" title="协同模式">协同模式 (单用户模式)</span>
        </div>
-        <button
-          onClick={onClose}
-          className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-          title="退出全屏"
-        >
-          <X className="h-5 w-5" />
-        </button>
+        <div className="flex items-center space-x-3">
+          <span className="text-xs text-gray-500">{statusText}</span>
+          <button
+            onClick={handleClose}
+            className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            title="退出并保存"
+          >
+            {isSaving ? <Loader2 className="h-5 w-5 animate-spin" /> : <X className="h-5 w-5" />}
+          </button>
+        </div>
      </header>
      
      {/* Luckysheet 容器 */}
-      {/* 确保容器在加载完成后可见，并使用 ref 绑定 */}
      <div 
        id={LUCKY_SHEET_CONTAINER_ID} 
        ref={containerRef} 
        className="flex-grow w-full h-full"
-        style={{ display: isLoaded && !isTableLoading && !tableError ? 'block' : 'none' }}
-      >
-        {/* Luckysheet 将在这个容器中初始化 */}
-      </div>
+        style={{ display: isLoaded && !isTableLoading && !tableError ? "block" : "none" }}
+      />

      {showLoadingOverlay && (
        <div className="flex justify-center items-center h-full text-gray-500 border border-dashed">
-            <p>{loadingMessage}</p>
+          <p>{loadingMessage}</p>
        </div>
      )}