448 lines
14 KiB
TypeScript
448 lines
14 KiB
TypeScript
import { type MouseEvent as ReactMouseEvent, useEffect, useMemo } from "react";
|
|
|
|
import {
|
|
BookOpen,
|
|
ChevronRight,
|
|
Database,
|
|
FileCode,
|
|
FileJson,
|
|
FileSpreadsheet,
|
|
FileText,
|
|
FileType,
|
|
Folder,
|
|
Lock,
|
|
Table2,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
import type {
|
|
ScriptItem,
|
|
WorkspaceDirectory,
|
|
ResourceItem,
|
|
} from "~/services/api";
|
|
import { canPreviewDataResource } from "./dataResourcePreview";
|
|
|
|
export type WorkspaceTreeTarget = {
|
|
kind: "root" | "directory" | "file";
|
|
path: string;
|
|
script?: ScriptItem;
|
|
};
|
|
|
|
type WorkspaceTreeProps = {
|
|
title: string;
|
|
scripts: ScriptItem[];
|
|
directories: WorkspaceDirectory[];
|
|
selectedId: string | null;
|
|
onSelect: (id: string) => void;
|
|
onContextMenu?: (
|
|
event: ReactMouseEvent,
|
|
target: WorkspaceTreeTarget,
|
|
) => void;
|
|
readOnly?: boolean;
|
|
dataResources?: ResourceItem[];
|
|
onCopyResourcePath?: (jupyterPath: string) => void;
|
|
onPreviewResource?: (script: ScriptItem) => void;
|
|
// 唯一标识此 group（通常 `__group__<owner_user_id>`），让多个 owner 的 group 各自独立展开。
|
|
groupKey: string;
|
|
// 该 group 所属 owner 的 user_id —— 透传给 store.toggleExpanded，使他人
|
|
// 分组展开时走 loadOwnerGroup / 带 owner 的 loadScripts（懒加载）。
|
|
ownerUserId: string;
|
|
expandedPaths: Set<string>;
|
|
onToggle: (path: string, loadPath?: string, ownerUserId?: string) => void;
|
|
loadingChildrenPaths: Set<string>;
|
|
};
|
|
|
|
type WorkspaceTreeItemsProps = Omit<WorkspaceTreeProps, "title" | "readOnly"> & {
|
|
path: string;
|
|
depth: number;
|
|
onCopyResourcePath?: (jupyterPath: string) => void;
|
|
};
|
|
|
|
export type FileVisual = {
|
|
Icon: LucideIcon;
|
|
tone: string;
|
|
};
|
|
|
|
function formatTime(value: string) {
|
|
return new Intl.DateTimeFormat("zh-CN", {
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: false,
|
|
}).format(new Date(value));
|
|
}
|
|
|
|
export function scriptIcon(item: Pick<ScriptItem, "script_type">): LucideIcon {
|
|
return item.script_type === "notebook" ? BookOpen : FileCode;
|
|
}
|
|
|
|
/** 按文件名后缀返回树节点图标与配色（脚本 + 数据资源共用）。 */
|
|
export function fileVisualFromName(
|
|
name: string,
|
|
scriptType?: ScriptItem["script_type"],
|
|
): FileVisual {
|
|
const lower = name.toLowerCase();
|
|
if (scriptType === "notebook" || lower.endsWith(".ipynb")) {
|
|
return { Icon: BookOpen, tone: "text-[#e15e50] bg-[#fff0ed]" };
|
|
}
|
|
if (scriptType === "python" || lower.endsWith(".py")) {
|
|
return { Icon: FileCode, tone: "text-[#2e73c6] bg-[#eaf3ff]" };
|
|
}
|
|
if (lower.endsWith(".csv") || lower.endsWith(".tsv")) {
|
|
return { Icon: Table2, tone: "text-[#2f8f7b] bg-[#eaf8f4]" };
|
|
}
|
|
if (lower.endsWith(".xlsx") || lower.endsWith(".xls")) {
|
|
return { Icon: FileSpreadsheet, tone: "text-[#3d8f5a] bg-[#eef8f1]" };
|
|
}
|
|
if (lower.endsWith(".json")) {
|
|
return { Icon: FileJson, tone: "text-[#b07a1a] bg-[#fff8e8]" };
|
|
}
|
|
if (lower.endsWith(".parquet")) {
|
|
return { Icon: Database, tone: "text-[#4a6fa5] bg-[#eef3fa]" };
|
|
}
|
|
if (lower.endsWith(".txt")) {
|
|
return { Icon: FileText, tone: "text-[#6b7c8f] bg-[#f2f5f8]" };
|
|
}
|
|
return { Icon: FileType, tone: "text-[#5a8f6a] bg-[#eef8f1]" };
|
|
}
|
|
|
|
function ownedScriptPath(item: ScriptItem) {
|
|
// 数据资源的 relative_path 已经是 jupyter 路径（无 ULID 前缀）；脚本相对路径形如
|
|
// `{ulid}/{ws_id}/{user_id}/...`，需要剥前两层。
|
|
if (item.script_id.startsWith("data:")) {
|
|
return item.relative_path.replaceAll("\\", "/");
|
|
}
|
|
return item.relative_path.replaceAll("\\", "/").split("/").slice(2).join("/");
|
|
}
|
|
|
|
function parentOf(path: string) {
|
|
const parts = path.split("/");
|
|
parts.pop();
|
|
return parts.join("/");
|
|
}
|
|
|
|
export function WorkspaceTreeGroup({
|
|
title,
|
|
scripts,
|
|
directories,
|
|
selectedId,
|
|
onSelect,
|
|
onContextMenu,
|
|
readOnly = false,
|
|
dataResources,
|
|
onCopyResourcePath,
|
|
onPreviewResource,
|
|
groupKey,
|
|
ownerUserId,
|
|
expandedPaths,
|
|
onToggle,
|
|
loadingChildrenPaths,
|
|
}: WorkspaceTreeProps) {
|
|
const open = expandedPaths.has(groupKey);
|
|
const dataResourceScripts = useMemo(() => {
|
|
if (!dataResources) return [];
|
|
return dataResources.map((r) => {
|
|
const ext = r.file.file_extension;
|
|
const name = r.resource_name;
|
|
const displayName =
|
|
ext && !name.toLowerCase().endsWith(ext.toLowerCase())
|
|
? `${name}${ext}`
|
|
: name;
|
|
return {
|
|
script_id: `data:${r.resource_id}`,
|
|
workspace_id: r.workspace_id,
|
|
current_object_id: r.storage_object_id,
|
|
owner_user_id: r.owner_user_id,
|
|
owner_display_name: null,
|
|
script_name: displayName,
|
|
script_type: "python" as const,
|
|
visibility: r.visibility,
|
|
status: r.status,
|
|
is_locked: false,
|
|
// relative_path 直接是 jupyter 路径（与 Python/Notebook 同层渲染，不再带虚拟前缀）
|
|
relative_path: r.jupyter_accessible_path,
|
|
jupyter_path: r.jupyter_accessible_path,
|
|
content_hash: r.file.content_hash ?? "",
|
|
size_bytes: r.file.size_bytes,
|
|
created_at: r.created_at,
|
|
updated_at: r.updated_at,
|
|
} as unknown as ScriptItem;
|
|
});
|
|
}, [dataResources]);
|
|
|
|
const dataResourceDirectories = useMemo(() => {
|
|
if (!dataResources) return [];
|
|
const dirSet = new Set<string>();
|
|
for (const r of dataResources) {
|
|
const parts = r.jupyter_accessible_path.split("/");
|
|
parts.pop();
|
|
let acc = "";
|
|
for (const p of parts) {
|
|
acc = acc ? `${acc}/${p}` : p;
|
|
dirSet.add(acc);
|
|
}
|
|
}
|
|
return [...dirSet].map((path) => ({
|
|
path,
|
|
name: path.split("/").pop() ?? path,
|
|
parent_path: path.includes("/")
|
|
? path.split("/").slice(0, -1).join("/")
|
|
: "",
|
|
owner_user_id: ownerUserId,
|
|
}));
|
|
}, [dataResources, ownerUserId]);
|
|
|
|
// 默认只展开"我"的分组（!readOnly）；其他成员分组默认折叠，点击才
|
|
// 按需拉取其可见内容（懒加载设计）。原本对所有 group 无条件 onToggle
|
|
// 会让所有 owner 的内容在根加载时就被全量拉取，违背"默认只拉取自己的一级"。
|
|
useEffect(() => {
|
|
if (!readOnly && !expandedPaths.has(groupKey)) {
|
|
void onToggle(groupKey, undefined, ownerUserId);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [groupKey]);
|
|
return (
|
|
<div className="mb-[7px]">
|
|
<button
|
|
className="flex h-[33px] w-full cursor-pointer items-center gap-1.5 border-0 bg-transparent px-[7px] text-left text-xs font-[650] text-[#43556a] hover:bg-[#f4f8fc]"
|
|
type="button"
|
|
aria-expanded={open}
|
|
onClick={() => onToggle(groupKey, undefined, ownerUserId)}
|
|
onContextMenu={onContextMenu
|
|
? (event) => onContextMenu(event, { kind: "root", path: "" })
|
|
: undefined}
|
|
>
|
|
<span
|
|
className={`inline-flex text-[#98a5b2] transition-transform duration-150 ease-in-out ${
|
|
open ? "rotate-90" : ""
|
|
}`}
|
|
>
|
|
<ChevronRight size={14} />
|
|
</span>
|
|
<span className="inline-flex text-[#eab434] [&_svg]:fill-[#f7c84a] [&_svg]:stroke-[#e0a828]">
|
|
<Folder size={17} />
|
|
</span>
|
|
<span>{title}</span>
|
|
</button>
|
|
{open && (
|
|
<div className="flex flex-col gap-0.5 pl-[13px]">
|
|
<WorkspaceTreeItems
|
|
groupKey={groupKey}
|
|
ownerUserId={ownerUserId}
|
|
path=""
|
|
depth={0}
|
|
scripts={[...scripts, ...dataResourceScripts]}
|
|
// 数据资源目录与真实/推断目录按 path 去重
|
|
directories={[
|
|
...new Map(
|
|
[...directories, ...dataResourceDirectories].map((d) => [d.path, d]),
|
|
).values(),
|
|
]}
|
|
selectedId={selectedId}
|
|
onSelect={onSelect}
|
|
onContextMenu={onContextMenu}
|
|
expandedPaths={expandedPaths}
|
|
onToggle={onToggle}
|
|
loadingChildrenPaths={loadingChildrenPaths}
|
|
onCopyResourcePath={onCopyResourcePath}
|
|
onPreviewResource={onPreviewResource}
|
|
/>
|
|
{scripts.length === 0 && directories.length === 0 && dataResourceScripts.length === 0 && (
|
|
<p className="mb-[7px] ml-[35px] mt-0.5 text-[11px] text-[#a5b0bc]">
|
|
{readOnly ? "暂无文件" : "右键此目录即可新建或上传"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WorkspaceTreeItems({
|
|
groupKey,
|
|
ownerUserId,
|
|
path,
|
|
depth,
|
|
scripts,
|
|
directories,
|
|
selectedId,
|
|
onSelect,
|
|
onContextMenu,
|
|
onCopyResourcePath,
|
|
onPreviewResource,
|
|
expandedPaths,
|
|
onToggle,
|
|
loadingChildrenPaths,
|
|
}: WorkspaceTreeItemsProps) {
|
|
const childDirectories = directories.filter(
|
|
(item) => item.parent_path === path,
|
|
);
|
|
const childScripts = scripts.filter(
|
|
(item) => parentOf(ownedScriptPath(item)) === path,
|
|
);
|
|
return (
|
|
<>
|
|
{childDirectories.map((directory) => (
|
|
<DirectoryBranch
|
|
key={directory.path}
|
|
groupKey={groupKey}
|
|
ownerUserId={ownerUserId}
|
|
directory={directory}
|
|
depth={depth}
|
|
scripts={scripts}
|
|
directories={directories}
|
|
selectedId={selectedId}
|
|
onSelect={onSelect}
|
|
onContextMenu={onContextMenu}
|
|
expandedPaths={expandedPaths}
|
|
onToggle={onToggle}
|
|
loadingChildrenPaths={loadingChildrenPaths}
|
|
onCopyResourcePath={onCopyResourcePath}
|
|
onPreviewResource={onPreviewResource}
|
|
/>
|
|
))}
|
|
{childScripts.map((item) => {
|
|
const isActive = selectedId === item.script_id;
|
|
const isData = item.script_id.startsWith("data:");
|
|
const { Icon: ItemIcon, tone: iconTone } = fileVisualFromName(
|
|
item.script_name,
|
|
isData ? undefined : item.script_type,
|
|
);
|
|
return (
|
|
<button
|
|
className={`flex h-[47px] w-full cursor-pointer items-center gap-2 rounded-md border pr-[9px] text-left ${
|
|
isActive
|
|
? "border-[#c6ddf4] bg-[#eaf4ff]"
|
|
: "border-transparent bg-transparent hover:bg-[#f4f7fa]"
|
|
}`}
|
|
style={{ paddingLeft: 20 + depth * 16 }}
|
|
key={item.script_id}
|
|
type="button"
|
|
onClick={() => {
|
|
if (isData) {
|
|
if (canPreviewDataResource(item.script_name) && onPreviewResource) {
|
|
onPreviewResource(item);
|
|
} else if (onCopyResourcePath) {
|
|
onCopyResourcePath(item.relative_path);
|
|
}
|
|
} else {
|
|
onSelect(item.script_id);
|
|
}
|
|
}}
|
|
onContextMenu={onContextMenu
|
|
? (event) => onContextMenu(event, {
|
|
kind: "file",
|
|
path: ownedScriptPath(item),
|
|
script: item,
|
|
})
|
|
: undefined}
|
|
>
|
|
<span className={`grid size-[25px] shrink-0 place-items-center rounded-[5px] ${iconTone}`}>
|
|
<ItemIcon size={17} />
|
|
</span>
|
|
<span className="flex min-w-0 flex-1 flex-col">
|
|
<strong
|
|
className="truncate text-xs font-semibold text-[#34475d]"
|
|
title={item.script_name}
|
|
>
|
|
{item.script_name}
|
|
</strong>
|
|
<small className="mt-0.5 text-[9px] text-[#9ba8b7]">
|
|
{formatTime(item.updated_at)}
|
|
</small>
|
|
</span>
|
|
{item.is_locked && (
|
|
<span className="mr-1 inline-flex items-center justify-center text-[#c79a3a]" title="已锁定">
|
|
<Lock size={12} />
|
|
</span>
|
|
)}
|
|
{item.visibility !== "private" && (
|
|
<span
|
|
className="size-1.5 shrink-0 rounded-full bg-[#1dbd7c] ring-3 ring-success/10"
|
|
title="Workspace 可见"
|
|
/>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function DirectoryBranch({
|
|
groupKey,
|
|
ownerUserId,
|
|
directory,
|
|
depth,
|
|
scripts,
|
|
directories,
|
|
selectedId,
|
|
onSelect,
|
|
onContextMenu,
|
|
onCopyResourcePath,
|
|
onPreviewResource,
|
|
expandedPaths,
|
|
onToggle,
|
|
loadingChildrenPaths,
|
|
}: Omit<WorkspaceTreeItemsProps, "path"> & {
|
|
directory: WorkspaceDirectory;
|
|
}) {
|
|
const expandKey = `${groupKey}/${directory.path}`;
|
|
const open = expandedPaths.has(expandKey);
|
|
const childrenLoading = loadingChildrenPaths.has(directory.path);
|
|
return (
|
|
<div className="flex flex-col">
|
|
<button
|
|
className="flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-[5px] border-0 bg-transparent pr-[9px] text-left text-[#45586c] hover:bg-[#f4f7fa]"
|
|
style={{ paddingLeft: 10 + depth * 16 }}
|
|
type="button"
|
|
onClick={() => onToggle(expandKey, directory.path, ownerUserId)}
|
|
onContextMenu={onContextMenu
|
|
? (event) => onContextMenu(event, {
|
|
kind: "directory",
|
|
path: directory.path,
|
|
})
|
|
: undefined}
|
|
>
|
|
<span
|
|
className={`grid shrink-0 place-items-center text-[#94a2b1] transition-transform duration-150 ease-in-out ${
|
|
open ? "rotate-90" : ""
|
|
}`}
|
|
>
|
|
<ChevronRight size={13} />
|
|
</span>
|
|
<span className="inline-flex shrink-0 text-[#e2aa27] [&_svg]:fill-[#f7c84a]">
|
|
<Folder size={17} />
|
|
</span>
|
|
<strong
|
|
className="truncate text-[11px] font-[650]"
|
|
title={directory.path}
|
|
>
|
|
{directory.name}
|
|
</strong>
|
|
{childrenLoading && (
|
|
<span className="ml-1 size-3.5 shrink-0 animate-spin rounded-full border-2 border-[#c5d3e0] border-t-[#6a8fb0]" />
|
|
)}
|
|
</button>
|
|
{open && (
|
|
<WorkspaceTreeItems
|
|
groupKey={groupKey}
|
|
ownerUserId={ownerUserId}
|
|
path={directory.path}
|
|
depth={depth + 1}
|
|
scripts={scripts}
|
|
directories={directories}
|
|
selectedId={selectedId}
|
|
onSelect={onSelect}
|
|
onContextMenu={onContextMenu}
|
|
expandedPaths={expandedPaths}
|
|
onToggle={onToggle}
|
|
loadingChildrenPaths={loadingChildrenPaths}
|
|
onCopyResourcePath={onCopyResourcePath}
|
|
onPreviewResource={onPreviewResource}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|