feat: integrate luckysheet inline and fullscreen
This commit is contained in:
liaibo
@@ -0,0 +1,207 @@
|
||||
"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";
|
||||
|
||||
interface FullScreenTableEditorProps {
|
||||
tableId: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
// Luckysheet 容器的 ID
|
||||
const LUCKY_SHEET_CONTAINER_ID = "luckysheet-editor-container";
|
||||
|
||||
// Luckysheet 资源路径 (相对于 public 目录)
|
||||
const LUCKY_SHEET_RESOURCES = {
|
||||
css: [
|
||||
"/luckysheet/css/luckysheet.css",
|
||||
"/luckysheet/plugins/plugins.css",
|
||||
"/luckysheet/plugins/css/pluginsCss.css",
|
||||
"/luckysheet/assets/iconfont/iconfont.css",
|
||||
],
|
||||
js: [
|
||||
"/luckysheet/plugins/js/plugin.js",
|
||||
"/luckysheet/luckysheet.umd.js",
|
||||
],
|
||||
};
|
||||
|
||||
const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId, onClose }) => {
|
||||
const containerRef = useRef<HTMLDivElement>(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 fetchTable = (id: string) => {
|
||||
setIsTableLoading(true);
|
||||
setTableError(null);
|
||||
setTableData(null);
|
||||
fetch(`/api/tables/${id}`)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load table ${id}`);
|
||||
}
|
||||
return response.json() as Promise<DocumentTable>;
|
||||
})
|
||||
.then((data) => {
|
||||
setTableData(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
setTableError("无法加载表格数据，请稍后重试。");
|
||||
setTableData(null);
|
||||
})
|
||||
.finally(() => setIsTableLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTable(tableId);
|
||||
}, [tableId]);
|
||||
|
||||
// 动态加载 Luckysheet 资源
|
||||
useEffect(() => {
|
||||
if (window.luckysheet) {
|
||||
setIsLoaded(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadResource = (tag: "link" | "script", url: string) => {
|
||||
if (document.querySelector(`${tag}[href="${url}"]`) || document.querySelector(`${tag}[src="${url}"]`)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (tag === "link") {
|
||||
const link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = url;
|
||||
document.head.appendChild(link);
|
||||
return true;
|
||||
} else if (tag === "script") {
|
||||
return new Promise<void>((resolve) => {
|
||||
const script = document.createElement("script");
|
||||
script.src = url;
|
||||
script.onload = () => resolve();
|
||||
document.body.appendChild(script);
|
||||
});
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// 加载所有 CSS
|
||||
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);
|
||||
}
|
||||
setIsLoaded(true);
|
||||
};
|
||||
|
||||
loadJsSequentially();
|
||||
|
||||
}, []);
|
||||
|
||||
const getLuckysheetSheets = () => {
|
||||
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 ?? [];
|
||||
};
|
||||
|
||||
// Luckysheet 初始化和清理
|
||||
useEffect(() => {
|
||||
if (!isLoaded || !tableData || !containerRef.current || !window.luckysheet) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (containerRef.current.children.length > 0) {
|
||||
window.luckysheet.destroy(LUCKY_SHEET_CONTAINER_ID);
|
||||
containerRef.current.innerHTML = "";
|
||||
}
|
||||
|
||||
const options = {
|
||||
container: LUCKY_SHEET_CONTAINER_ID,
|
||||
title: tableData.title ?? tableId,
|
||||
lang: "zh",
|
||||
showinfobar: false,
|
||||
showtoolbar: true,
|
||||
showsheetbar: true,
|
||||
showstatisticBar: true,
|
||||
allowEdit: true,
|
||||
row: DEFAULT_TABLE_ROWS,
|
||||
column: DEFAULT_TABLE_COLUMNS,
|
||||
data: getLuckysheetSheets(),
|
||||
};
|
||||
|
||||
window.luckysheet.create(options);
|
||||
|
||||
return () => {
|
||||
if (window.luckysheet) {
|
||||
window.luckysheet.destroy(LUCKY_SHEET_CONTAINER_ID);
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [tableId, isLoaded, tableData]);
|
||||
|
||||
const showLoadingOverlay = !isLoaded || isTableLoading;
|
||||
const loadingMessage = !isLoaded ? "正在加载 Luckysheet 资源..." : "正在加载表格数据...";
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-white dark:bg-gray-900 flex flex-col">
|
||||
{/* 顶部工具栏 */}
|
||||
<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, 16)}
|
||||
</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>
|
||||
</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>
|
||||
|
||||
{showLoadingOverlay && (
|
||||
<div className="flex justify-center items-center h-full text-gray-500 border border-dashed">
|
||||
<p>{loadingMessage}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tableError && !showLoadingOverlay && (
|
||||
<div className="flex flex-col justify-center items-center h-full text-red-500 border border-dashed space-y-2">
|
||||
<p>{tableError}</p>
|
||||
<button
|
||||
type="button"
|
||||
className="px-3 py-1 rounded-md border border-red-300 text-sm"
|
||||
onClick={() => fetchTable(tableId)}
|
||||
>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullScreenTableEditor;
|
||||
Reference in New Issue
Block a user