chore: save current changes

wolai-frontend/src/components/online-table/CompactTablePreview.tsx

@@ -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>