360 lines
15 KiB
TypeScript
360 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { AudioLines, BookOpen, ChevronRight, FileImage, FileText, FileVideo, Folder, Paperclip, Plus } from "lucide-react";
|
|
import { useMemo, useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import type { FileTreeRow } from "@/lib/file-tree/types";
|
|
import { getFileTreeRowLabel } from "@/lib/file-tree/types";
|
|
import { isRealFileAsset } from "@/lib/file-tree/asset";
|
|
import { isTextInputTarget } from "@/lib/file-tree/clipboard";
|
|
|
|
interface FileTreeProps {
|
|
rows: FileTreeRow[];
|
|
activeId: string;
|
|
selectedRowIds: Set<string>;
|
|
onRowClick: (row: FileTreeRow, event: React.MouseEvent) => void;
|
|
onRowDoubleClick: (row: FileTreeRow, event: React.MouseEvent) => void;
|
|
onRowContextMenu: (row: FileTreeRow, event: React.MouseEvent) => void;
|
|
onRowDragStart?: (row: FileTreeRow, event: React.DragEvent) => void;
|
|
onToggleExpand: (docId: string) => void;
|
|
onToggleAssetFolderExpand?: (assetId: string) => void;
|
|
onCreateChild: (parentId: string | null) => void;
|
|
onBlankMouseDown?: (event: React.MouseEvent) => void;
|
|
onDropFiles?: (docId: string, files: FileList, targetRow?: FileTreeRow) => void;
|
|
onInternalDrop?: (args: { targetRow: FileTreeRow; rowIds: string[]; copy: boolean }) => void;
|
|
}
|
|
|
|
const INDENT = 16;
|
|
|
|
function resolveAssetIconKind(row: Extract<FileTreeRow, { kind: "asset" | "asset-folder" }>) {
|
|
const assetType = String(row.asset.asset_type ?? "").trim().toLowerCase();
|
|
if (assetType === "mindmap") return "mindmap";
|
|
if (assetType === "luckysheet") return "table";
|
|
|
|
const mimeType = String(row.asset.mime_type ?? "").trim().toLowerCase();
|
|
const fileName = String(row.asset.file_name ?? "").trim().toLowerCase();
|
|
const ext = fileName.includes(".") ? fileName.split(".").pop() ?? "" : "";
|
|
|
|
if (ext === "pdf" || mimeType.includes("pdf")) return "pdf";
|
|
if (ext === "epub" || mimeType.includes("epub")) return "book";
|
|
if (mimeType.startsWith("image/")) return "image";
|
|
if (mimeType.startsWith("video/")) return "video";
|
|
if (mimeType.startsWith("audio/")) return "audio";
|
|
return "file";
|
|
}
|
|
|
|
function renderAssetIcon(row: Extract<FileTreeRow, { kind: "asset" | "asset-folder" }>) {
|
|
const iconKind = resolveAssetIconKind(row);
|
|
const baseClass = "w-4 h-4 shrink-0";
|
|
|
|
switch (iconKind) {
|
|
case "mindmap":
|
|
return <Folder className={`${baseClass} text-[#7c3aed]`} />;
|
|
case "table":
|
|
return <FileText className={`${baseClass} text-[#b45309]`} />;
|
|
case "pdf":
|
|
return <FileText className={`${baseClass} text-[#dc2626]`} />;
|
|
case "book":
|
|
return <BookOpen className={`${baseClass} text-[#0f766e]`} />;
|
|
case "image":
|
|
return <FileImage className={`${baseClass} text-[#0891b2]`} />;
|
|
case "video":
|
|
return <FileVideo className={`${baseClass} text-[#ea580c]`} />;
|
|
case "audio":
|
|
return <AudioLines className={`${baseClass} text-[#16a34a]`} />;
|
|
default:
|
|
return <Paperclip className={`${baseClass} text-wolai-text-secondary`} />;
|
|
}
|
|
}
|
|
|
|
export function FileTree({
|
|
rows,
|
|
activeId,
|
|
selectedRowIds,
|
|
onRowClick,
|
|
onRowDoubleClick,
|
|
onRowContextMenu,
|
|
onRowDragStart,
|
|
onToggleExpand,
|
|
onToggleAssetFolderExpand,
|
|
onCreateChild,
|
|
onBlankMouseDown,
|
|
onDropFiles,
|
|
onInternalDrop,
|
|
}: FileTreeProps) {
|
|
const [dragOverRowId, setDragOverRowId] = useState<string | null>(null);
|
|
|
|
const dragOverRange = useMemo(() => {
|
|
if (!dragOverRowId) return null;
|
|
const startIndex = rows.findIndex((row) => row.rowId === dragOverRowId);
|
|
if (startIndex < 0) return null;
|
|
|
|
const target = rows[startIndex];
|
|
const targetDepth = target.depth;
|
|
|
|
// VS Code 的树在拖拽悬停到“展开的文件夹”时，会把该节点的可渲染范围都
|
|
// 标记为 drop feedback（包含它的所有可见子节点）。我们用“扁平化 rows +
|
|
// depth”来近似计算该范围。
|
|
let endIndex = startIndex + 1;
|
|
if ((target.kind === "doc" || target.kind === "asset-folder") && target.isExpanded && target.hasChildren) {
|
|
while (endIndex < rows.length && rows[endIndex].depth > targetDepth) {
|
|
endIndex += 1;
|
|
}
|
|
}
|
|
|
|
return { startIndex, endIndex };
|
|
}, [dragOverRowId, rows]);
|
|
|
|
if (rows.length === 0) {
|
|
return <div className="px-4 py-6 text-sm text-gray-400">暂无页面，点击下方按钮创建</div>;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="w-full min-w-0 max-w-full space-y-0.5 overflow-x-hidden"
|
|
onDragOver={(event) => {
|
|
if (!onDropFiles) return;
|
|
if (event.target === event.currentTarget) {
|
|
setDragOverRowId(null);
|
|
}
|
|
const types = Array.from(event.dataTransfer.types ?? []);
|
|
const hasFiles = types.includes("Files") || Boolean(event.dataTransfer.files?.length);
|
|
if (!hasFiles) return;
|
|
event.preventDefault();
|
|
if (event.dataTransfer.files?.length) {
|
|
event.dataTransfer.dropEffect = "copy";
|
|
}
|
|
}}
|
|
onDrop={(event) => {
|
|
if (onDropFiles && event.dataTransfer.files?.length) {
|
|
event.preventDefault();
|
|
setDragOverRowId(null);
|
|
const files = event.dataTransfer.files;
|
|
const activeDocRow = rows.find(
|
|
(row) => row.kind === "doc" && row.docId === activeId,
|
|
);
|
|
const firstDocRow = rows.find((row) => row.kind === "doc");
|
|
const targetDocId = activeDocRow?.docId ?? firstDocRow?.docId ?? "";
|
|
onDropFiles(targetDocId, files);
|
|
}
|
|
}}
|
|
onDragLeave={(event) => {
|
|
const relatedTarget = (event as unknown as { relatedTarget?: EventTarget | null }).relatedTarget;
|
|
if (relatedTarget && event.currentTarget.contains(relatedTarget as Node)) return;
|
|
setDragOverRowId(null);
|
|
}}
|
|
onMouseDown={(event) => {
|
|
if (event.target === event.currentTarget) {
|
|
onBlankMouseDown?.(event);
|
|
}
|
|
}}
|
|
>
|
|
{rows.map((row, index) => {
|
|
const label = getFileTreeRowLabel(row);
|
|
const selected = selectedRowIds.has(row.rowId);
|
|
// 说明：只有“页面本身（doc/index.md）”才需要 active 高亮。
|
|
// 否则当你打开某个页面时，它下面的思维导图文件夹/附件会出现“灰色假选中”的视觉误导。
|
|
const active = (row.kind === "doc" || row.kind === "index") && row.docId === activeId;
|
|
const draggable =
|
|
row.kind === "doc" || (row.kind === "asset" && isRealFileAsset(row.asset));
|
|
const inDropFeedback =
|
|
dragOverRange &&
|
|
index >= dragOverRange.startIndex &&
|
|
index < dragOverRange.endIndex;
|
|
const baseClass =
|
|
"group flex items-center gap-2 px-3 py-[2px] min-h-[27px] w-full select-none cursor-pointer rounded-[3px] text-wolai-text-primary text-[14px] font-medium hover:bg-wolai-bg-hover transition-colors duration-150 data-[active=true]:bg-wolai-bg-active";
|
|
const activeClass =
|
|
row.kind === "index"
|
|
? "text-[#2563eb]"
|
|
: row.kind === "doc"
|
|
? "text-[#2563eb]"
|
|
: "";
|
|
const paddingLeft =
|
|
row.kind === "doc" ? row.depth * INDENT + 8 : row.depth * INDENT + 32;
|
|
|
|
return (
|
|
<div
|
|
key={row.rowId}
|
|
data-testid={
|
|
row.kind === "doc"
|
|
? "filetree-doc-row"
|
|
: row.kind === "index"
|
|
? "filetree-index-row"
|
|
: row.kind === "asset-folder"
|
|
? "filetree-asset-folder-row"
|
|
: "filetree-asset-row"
|
|
}
|
|
data-row-id={row.rowId}
|
|
data-row-kind={row.kind}
|
|
data-doc-id={row.docId}
|
|
className={cn(
|
|
baseClass,
|
|
active && activeClass,
|
|
selected && "bg-wolai-bg-active text-[#2563eb]",
|
|
inDropFeedback && "bg-gray-200/70",
|
|
)}
|
|
data-active={active}
|
|
style={{ paddingLeft }}
|
|
onClick={(event) => onRowClick(row, event)}
|
|
onDoubleClick={(event) => onRowDoubleClick(row, event)}
|
|
onContextMenu={(event) => onRowContextMenu(row, event)}
|
|
onMouseDown={(event) => {
|
|
// 避免 Shift 多选时触发浏览器默认的文本范围选择（VS Code 资源管理器不会出现该行为）
|
|
if (event.button !== 0) return;
|
|
if (!event.shiftKey) return;
|
|
if (isTextInputTarget(event.target)) return;
|
|
event.preventDefault();
|
|
}}
|
|
draggable={draggable}
|
|
onDragStart={(event) => {
|
|
if (!draggable) return;
|
|
if (!selectedRowIds.has(row.rowId)) {
|
|
onRowDragStart?.(row, event);
|
|
}
|
|
const rowIds = selectedRowIds.has(row.rowId) ? Array.from(selectedRowIds) : [row.rowId];
|
|
const payload = JSON.stringify({ type: "mnote-file-tree-dnd", version: 1, rowIds });
|
|
try {
|
|
event.dataTransfer.setData("application/x-mnote-file-tree", payload);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
event.dataTransfer.setData("text/plain", payload);
|
|
event.dataTransfer.effectAllowed = event.altKey ? "copyMove" : "move";
|
|
}}
|
|
onDragEnd={() => {
|
|
setDragOverRowId(null);
|
|
}}
|
|
onDragOver={(event) => {
|
|
const types = Array.from(event.dataTransfer.types ?? []);
|
|
const hasInternal = types.includes("application/x-mnote-file-tree");
|
|
if (hasInternal && onInternalDrop) {
|
|
event.preventDefault();
|
|
event.dataTransfer.dropEffect = event.altKey ? "copy" : "move";
|
|
setDragOverRowId((prev) => (prev === row.rowId ? prev : row.rowId));
|
|
return;
|
|
}
|
|
if (!onDropFiles) return;
|
|
const hasFiles = types.includes("Files") || Boolean(event.dataTransfer.files?.length);
|
|
if (!hasFiles) return;
|
|
event.preventDefault();
|
|
if (event.dataTransfer.files?.length) {
|
|
event.dataTransfer.dropEffect = "copy";
|
|
}
|
|
setDragOverRowId((prev) => (prev === row.rowId ? prev : row.rowId));
|
|
}}
|
|
onDrop={(event) => {
|
|
setDragOverRowId(null);
|
|
const types = Array.from(event.dataTransfer.types ?? []);
|
|
const isInternal = types.includes("application/x-mnote-file-tree");
|
|
if (isInternal && onInternalDrop) {
|
|
const raw =
|
|
event.dataTransfer.getData("application/x-mnote-file-tree") || "";
|
|
try {
|
|
const parsed = JSON.parse(raw) as { type?: string; version?: number; rowIds?: unknown };
|
|
if (parsed?.type === "mnote-file-tree-dnd" && parsed.version === 1 && Array.isArray(parsed.rowIds)) {
|
|
event.preventDefault();
|
|
onInternalDrop({
|
|
targetRow: row,
|
|
rowIds: parsed.rowIds.filter((id) => typeof id === "string") as string[],
|
|
copy: event.altKey,
|
|
});
|
|
return;
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
if (onDropFiles && event.dataTransfer.files?.length) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
onDropFiles(row.docId, event.dataTransfer.files, row);
|
|
}
|
|
}}
|
|
role="button"
|
|
tabIndex={0}
|
|
>
|
|
{row.kind === "doc" ? (
|
|
<>
|
|
{row.hasChildren ? (
|
|
<button
|
|
type="button"
|
|
aria-label="展开或折叠"
|
|
data-testid="filetree-toggle"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onToggleExpand(row.docId);
|
|
}}
|
|
className="flex h-5 w-5 items-center justify-center rounded-md hover:bg-gray-100 shrink-0"
|
|
>
|
|
<ChevronRight
|
|
className={cn(
|
|
"w-4 h-4 text-wolai-text-secondary transition-transform group-hover:text-wolai-text-primary",
|
|
row.isExpanded && "rotate-90",
|
|
)}
|
|
/>
|
|
</button>
|
|
) : (
|
|
<span className="w-5 h-5 shrink-0" />
|
|
)}
|
|
<Folder className="w-4 h-4 text-[#2563eb] shrink-0" />
|
|
<span className="min-w-0 flex-1 truncate text-left">{label}</span>
|
|
<button
|
|
type="button"
|
|
aria-label="新建子页面"
|
|
data-testid="filetree-create"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onCreateChild(row.docId);
|
|
}}
|
|
className="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 shrink-0"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
</button>
|
|
</>
|
|
) : row.kind === "index" ? (
|
|
<>
|
|
<span className="w-4 h-4 shrink-0" />
|
|
<FileText className="w-4 h-4 text-wolai-text-secondary shrink-0" />
|
|
<span className="min-w-0 flex-1 truncate text-left">{label}</span>
|
|
</>
|
|
) : row.kind === "asset-folder" ? (
|
|
<>
|
|
{row.hasChildren ? (
|
|
<button
|
|
type="button"
|
|
aria-label="展开或折叠"
|
|
data-testid="filetree-toggle"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onToggleAssetFolderExpand?.(row.asset.id);
|
|
}}
|
|
className="flex h-5 w-5 items-center justify-center rounded-md hover:bg-gray-100 shrink-0"
|
|
>
|
|
<ChevronRight
|
|
className={cn(
|
|
"w-4 h-4 text-wolai-text-secondary transition-transform group-hover:text-wolai-text-primary",
|
|
row.isExpanded && "rotate-90",
|
|
)}
|
|
/>
|
|
</button>
|
|
) : (
|
|
<span className="w-5 h-5 shrink-0" />
|
|
)}
|
|
{renderAssetIcon(row)}
|
|
<span className="min-w-0 flex-1 truncate text-left">{label}</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="w-4 h-4 shrink-0" />
|
|
{renderAssetIcon(row)}
|
|
<span className="min-w-0 flex-1 truncate text-left">{label}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|