feat: integrate luckysheet inline and fullscreen

2025-11-23 17:22:35 +08:00
parent c8e479aeab
commit 994dd4e67c
529 changed files with 403413 additions and 201 deletions
@@ -0,0 +1,302 @@
+"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";
+
+interface CompactTablePreviewProps {
+  tableId: string;
+  onFullScreen: () => void;
+}
+
+// 模拟获取表格行数据（阶段二只关注元数据和预览结构）
+// 实际应用中，这里会调用 getDocumentTable 并可能获取前N行数据
+const useTableData = (tableId: string) => {
+  const [table, setTable] = useState<DocumentTable | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setIsLoading(true);
+    getDocumentTable(tableId)
+      .then((data) => {
+        setTable({ ...data, title: data.title || "未命名表格" });
+      })
+      .catch((err) => {
+        console.error("Failed to load table:", err);
+        setTable(null);
+      })
+      .finally(() => setIsLoading(false));
+  }, [tableId]);
+
+  return { table, isLoading };
+};
+
+// 渲染单个单元格内容的辅助函数
+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 }) => {
+  const { table, isLoading } = useTableData(tableId);
+  const [hoveredRowIndex, setHoveredRowIndex] = useState<number | null>(null);
+  const [editingCell, setEditingCell] = useState<{ rowIndex: number, colId: string } | null>(null);
+  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 totalRowsAvailable = hasData ? snapshotRows.length : DEFAULT_TABLE_ROWS;
+  const totalColsAvailable = hasData ? schemaColumns.length : DEFAULT_TABLE_COLUMNS;
+
+  useEffect(() => {
+    const maxRows = Math.max(5, totalRowsAvailable);
+    const maxCols = Math.max(5, totalColsAvailable);
+    if (visibleRows > maxRows) {
+      setVisibleRows(maxRows);
+    } else if (visibleRows < 5) {
+      setVisibleRows(5);
+    }
+    if (visibleCols > maxCols) {
+      setVisibleCols(maxCols);
+    } else if (visibleCols < 5) {
+      setVisibleCols(5);
+    }
+  }, [totalRowsAvailable, totalColsAvailable, visibleRows, visibleCols]);
+
+  const columns = useMemo(() => {
+    if (hasData) {
+      return schemaColumns.slice(0, visibleCols);
+    }
+    const placeholderCount = Math.max(visibleCols, 5);
+    return Array.from({ length: placeholderCount }, (_, index) => ({
+      id: `placeholder_col_${index}`,
+      name: "",
+      type: "text" as const,
+      width: 100,
+    }));
+  }, [hasData, schemaColumns, visibleCols]);
+
+  const rowsToDisplay = useMemo(() => {
+    if (hasData) {
+      return snapshotRows.slice(0, visibleRows);
+    }
+    const placeholderCount = Math.max(visibleRows, 5);
+    return Array.from({ length: placeholderCount }, (_, index) => ({ id: `placeholder_row_${index}` }));
+  }, [hasData, snapshotRows, visibleRows]);
+
+  const headerCells = useMemo(() => {
+    const cells = [
+      <th key="row-actions" className="w-8" aria-label="行操作列" />,
+    ];
+    columns.forEach((col) => {
+      cells.push(
+        <th
+          key={col.id}
+          style={{ width: col.width ?? 100 }}
+          className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap relative group"
+        >
+          {col.name}
+        </th>,
+      );
+    });
+    return cells;
+  }, [columns]);
+
+  const suppressEditorEvents = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center h-20 bg-gray-50 border border-dashed rounded-md">
+        <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
+      </div>
+    );
+  }
+
+  if (!table) {
+    return (
+      <div className="flex items-center justify-center h-20 bg-red-50 border border-red-300 rounded-md text-red-700">
+        <Table className="h-5 w-5 mr-2" />
+        表格加载失败或不存在。
+      </div>
+    );
+  }
+
+  // 模拟行操作：插入/删除
+  // 实际应用中，这里需要调用后端或协同服务
+  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"
+      onDoubleClick={onFullScreen}
+      contentEditable={false}
+      onMouseDown={suppressEditorEvents}
+      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>
+
+      {/* 紧凑表格视图 */}
+      <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;
+              return (
+                <tr 
+                  key={rowId} 
+                  className="hover:bg-gray-50 relative group"
+                  onMouseEnter={() => setHoveredRowIndex(index)}
+                  onMouseLeave={() => setHoveredRowIndex(null)}
+                >
+                  {/* 行操作按钮 */}
+                  <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>
+                    );
+                  })}
+                </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>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <div className="flex items-center justify-end space-x-4 mt-2 text-xs text-gray-500">
+        <label className="flex items-center space-x-2">
+          <span>行数</span>
+          <input
+            type="range"
+            min={5}
+            max={Math.max(5, totalRowsAvailable)}
+            value={visibleRows}
+            onChange={(event) => setVisibleRows(Number(event.target.value))}
+            className="h-1.5 w-28 accent-blue-500"
+          />
+          <span>{visibleRows}</span>
+        </label>
+        <label className="flex items-center space-x-2">
+          <span>列数</span>
+          <input
+            type="range"
+            min={5}
+            max={Math.max(5, totalColsAvailable)}
+            value={visibleCols}
+            onChange={(event) => setVisibleCols(Number(event.target.value))}
+            className="h-1.5 w-28 accent-blue-500"
+          />
+          <span>{visibleCols}</span>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default CompactTablePreview;