git save current version as 0.0.4

2025-11-29 13:37:57 +08:00
parent 58340d4080
commit 140bce9768
13 changed files with 333 additions and 47 deletions
@@ -78,6 +78,9 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
  const lastPointerDownInGridRef = useRef(false);
  const savingHintTimerRef = useRef<number | null>(null);
  const [showSavingHint, setShowSavingHint] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState("");
+  const [isSavingTitle, setIsSavingTitle] = useState(false);

  const startSavingHint = useCallback(() => {
    if (savingHintTimerRef.current !== null) return;
@@ -137,6 +140,12 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
    }
  }, [tableData]);

+  useEffect(() => {
+    if (tableData?.title !== undefined) {
+      setRenameValue(tableData.title ?? "");
+    }
+  }, [tableData?.title]);
+
  const luckysheetSheets = useMemo(() => {
    if (tableData?.snapshot?.luckysheet && Array.isArray(tableData.snapshot.luckysheet) && tableData.snapshot.luckysheet.length > 0) {
      return tableData.snapshot.luckysheet;
@@ -530,6 +539,31 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
  const showLoadingOverlay = !isLuckysheetReady || isTableLoading;
  const loadingMessage = !isLuckysheetReady ? "正在加载 Luckysheet 资源..." : "正在加载表格数据...";

+  const handleRenameSubmit = useCallback(async () => {
+    if (!tableData) {
+      setIsRenaming(false);
+      return;
+    }
+    const nextTitle = (renameValue || "").trim() || "未命名表格";
+    if (nextTitle === tableData.title) {
+      setIsRenaming(false);
+      return;
+    }
+    setIsSavingTitle(true);
+    try {
+      const updated = await saveOnlineTable(tableId, { title: nextTitle });
+      const finalTitle = updated.title ?? nextTitle;
+      setTableData((prev) => (prev ? { ...prev, title: finalTitle } : prev));
+      window.dispatchEvent(new CustomEvent("online-table-saved", { detail: { tableId } }));
+    } catch (error) {
+      console.error("重命名表格失败", error);
+      setRenameValue(tableData.title ?? "");
+    } finally {
+      setIsRenaming(false);
+      setIsSavingTitle(false);
+    }
+  }, [renameValue, tableData, tableId]);
+
  const statusText = saveError
    ? saveError
    : isSaving && showSavingHint
@@ -546,9 +580,38 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
      <header className="flex justify-between items-center p-3 border-b border-gray-200 shadow-sm">
        <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, 24)}
-          </h1>
+          {isRenaming ? (
+            <input
+              autoFocus
+              className="w-64 rounded border border-gray-200 px-2 py-1 text-lg font-semibold text-gray-800 focus:border-emerald-500 focus:outline-none"
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              onBlur={handleRenameSubmit}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  void handleRenameSubmit();
+                }
+                if (e.key === "Escape") {
+                  e.preventDefault();
+                  setRenameValue(tableData?.title ?? "");
+                  setIsRenaming(false);
+                }
+              }}
+            />
+          ) : (
+            <button
+              type="button"
+              className="flex items-center gap-2 text-left text-lg font-bold text-gray-900 hover:text-emerald-600"
+              onClick={() => setIsRenaming(true)}
+              title="点击重命名表格"
+            >
+              <span className="truncate max-w-xs">
+                在线表格编辑 - {(tableData?.title ?? tableId).slice(0, 24)}
+              </span>
+              {isSavingTitle && <Loader2 className="h-4 w-4 animate-spin text-gray-400" />}
+            </button>
+          )}
          <Zap className="h-4 w-4 text-yellow-500" />
          <span className="text-xs text-yellow-600 font-medium" title="协同模式">协同模式 (单用户模式)</span>
        </div>