= ({ tableId, onFu
onMouseUp={suppressEditorEvents}
onMouseMove={suppressEditorEvents}
>
- {/* 表格标题 */}
- {/* 表头 */}
{headerCells}
- {/* 表体 */}
- {/* 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 (
- setHoveredRowIndex(index)}
- onMouseLeave={() => setHoveredRowIndex(null)}
+
- {/* 行操作按钮 */}
-
- {hoveredRowIndex === index && (
-
-
-
- |
- {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) => {
- // TODO: 实际更新 Supabase 数据
- console.log(`Cell ${col.id} at row ${index} updated to: ${e.target.value}`);
- setEditingCell(null);
- }
-
- const handleKeyDown = (e: React.KeyboardEvent) => {
- if (e.key === 'Enter' || e.key === 'Escape') {
- // 提交或取消编辑
- e.currentTarget.blur();
- }
- }
-
- return (
-
- {isEditing ? (
-
- ) : (
- renderCellContent(col, cellValue)
- )}
- |
- );
- })}
+ |
+ {columns.map((col) => (
+
+ {renderCellContent(col, (row as Record)[col.id])}
+ |
+ ))}
);
})}
- {/* 提示更多行 */}
- {table.snapshot?.rows && rowsToDisplay.length < table.snapshot.rows.length && (
-
- |
- ... 更多 { table.snapshot.rows.length - rowsToDisplay.length } 行数据，双击进入全屏查看
- |
-
+ {rows.length > rowsToDisplay.length && (
+
+ |
+ ... 更多 {rows.length - rowsToDisplay.length} 行数据，双击进入全屏查看
+ |
+
)}
diff --git a/wolai-frontend/src/components/online-table/FullScreenTableEditor.tsx b/wolai-frontend/src/components/online-table/FullScreenTableEditor.tsx
index 82c1c4e5..9845ba20 100644
--- a/wolai-frontend/src/components/online-table/FullScreenTableEditor.tsx
+++ b/wolai-frontend/src/components/online-table/FullScreenTableEditor.tsx
@@ -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
();
+ 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 = ({ tableId, onClose }) => {
const containerRef = useRef(null);
+ const isApplyingSnapshotRef = useRef(false);
+ const hasInitializedRef = useRef(false);
+ const lastTableIdRef = useRef(null);
const [isLoaded, setIsLoaded] = useState(false);
const [tableData, setTableData] = useState(null);
const [isTableLoading, setIsTableLoading] = useState(true);
const [tableError, setTableError] = useState(null);
+ const [isSaving, setIsSaving] = useState(false);
+ const [hasPendingChanges, setHasPendingChanges] = useState(false);
+ const [saveError, setSaveError] = useState(null);
+ const [lastSyncedAt, setLastSyncedAt] = useState(null);
+ const persistSnapshotRef = useRef<((reason: "auto" | "close") => Promise) | 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 (
{/* 顶部工具栏 */}
@@ -157,34 +303,34 @@ const FullScreenTableEditor: React.FC
= ({ tableId,
- 在线表格编辑 - {(tableData?.title ?? tableId).slice(0, 16)}
+ 在线表格编辑 - {(tableData?.title ?? tableId).slice(0, 24)}
协同模式 (单用户模式)
-
+
+ {statusText}
+
+
{/* Luckysheet 容器 */}
- {/* 确保容器在加载完成后可见，并使用 ref 绑定 */}
- {/* Luckysheet 将在这个容器中初始化 */}
-
+ style={{ display: isLoaded && !isTableLoading && !tableError ? "block" : "none" }}
+ />
{showLoadingOverlay && (
-
{loadingMessage}
+
{loadingMessage}