332 lines
12 KiB
TypeScript
332 lines
12 KiB
TypeScript
import { type ChangeEvent, type MouseEvent as ReactMouseEvent, type RefObject, useMemo } from "react";
|
|
import { FileText, Plus, RefreshCw, Search, Upload } from "lucide-react";
|
|
import { WorkspaceTreeGroup } from "~/features/platform/WorkspaceTree";
|
|
import { useScriptWorkspaceStore } from "~/features/platform/state/scriptWorkspaceStore";
|
|
import type { ScriptItem, WorkspaceDirectory } from "~/services/api";
|
|
import { type AuthUser } from "~/context/AuthContext";
|
|
import type { ResourceItem } from "~/services/api";
|
|
|
|
type ScriptExplorerProps = {
|
|
scripts: ScriptItem[];
|
|
filteredScripts: ScriptItem[];
|
|
directories: WorkspaceDirectory[];
|
|
dataResources: ResourceItem[];
|
|
user: AuthUser | null;
|
|
selectedId: string | null;
|
|
loading: boolean;
|
|
refreshing: boolean;
|
|
uploading: boolean;
|
|
keyword: string;
|
|
onKeywordChange: (keyword: string) => void;
|
|
onRefresh: () => void;
|
|
onUpload: () => void;
|
|
onOpenCreateDialog: (parentPath?: string, scriptType?: "notebook" | "python") => void;
|
|
onOpenFolderDialog: (parentPath?: string) => void;
|
|
onChooseUpload: (parentPath?: string) => void;
|
|
onContextMenu: (
|
|
event: ReactMouseEvent,
|
|
target: { kind: "root" | "directory" | "file"; path: string; script?: ScriptItem }
|
|
) => void;
|
|
onSelect: (scriptId: string) => void;
|
|
onCopyResourcePath: (jupyterPath: string) => void;
|
|
onPreviewResource: (script: ScriptItem) => void;
|
|
uploadInputRef: RefObject<HTMLInputElement | null>;
|
|
onHandleUpload: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
};
|
|
|
|
export function ScriptExplorer({
|
|
scripts,
|
|
filteredScripts,
|
|
directories,
|
|
dataResources,
|
|
user,
|
|
selectedId,
|
|
loading,
|
|
refreshing,
|
|
uploading,
|
|
keyword,
|
|
onKeywordChange,
|
|
onRefresh,
|
|
onUpload,
|
|
onOpenCreateDialog,
|
|
onOpenFolderDialog,
|
|
onChooseUpload,
|
|
onContextMenu,
|
|
onSelect,
|
|
onCopyResourcePath,
|
|
onPreviewResource,
|
|
uploadInputRef,
|
|
onHandleUpload,
|
|
}: ScriptExplorerProps) {
|
|
const expandedPaths = useScriptWorkspaceStore((s) => s.expandedPaths);
|
|
const loadingChildrenPaths = useScriptWorkspaceStore(
|
|
(s) => s.loadingChildrenPaths,
|
|
);
|
|
const members = useScriptWorkspaceStore((s) => s.members);
|
|
const onToggle = useScriptWorkspaceStore((s) => s.toggleExpanded);
|
|
|
|
const dataByOwner = useMemo(() => {
|
|
const map = new Map<string, ResourceItem[]>();
|
|
for (const r of dataResources) {
|
|
const list = map.get(r.owner_user_id) ?? [];
|
|
list.push(r);
|
|
map.set(r.owner_user_id, list);
|
|
}
|
|
return map;
|
|
}, [dataResources]);
|
|
|
|
const memberScriptGroups = useMemo(() => {
|
|
const visibleScripts =
|
|
user?.is_system_admin === true
|
|
? filteredScripts
|
|
: filteredScripts.filter(
|
|
(item) =>
|
|
item.owner_user_id === user?.user_id ||
|
|
item.visibility === "workspace" ||
|
|
item.visibility === "public",
|
|
);
|
|
|
|
// 用工作区成员列表播种分组 —— 顶层"我 / user1 / user2 / …"折叠分组
|
|
// 的来源。即使某成员尚未加载任何脚本/数据（默认折叠、点击才拉取），
|
|
// 也作为空分组出现，保证目录树结构稳定可见（修"目录树结构消失"）。
|
|
const byOwner = new Map<string, ScriptItem[]>();
|
|
for (const m of members) {
|
|
if (!byOwner.has(m.user_id)) byOwner.set(m.user_id, []);
|
|
}
|
|
// 当前用户兜底（members 未就绪时仍渲染"我"的分组）。
|
|
if (user?.user_id && !byOwner.has(user.user_id)) {
|
|
byOwner.set(user.user_id, []);
|
|
}
|
|
for (const item of visibleScripts) {
|
|
const list = byOwner.get(item.owner_user_id) ?? [];
|
|
list.push(item);
|
|
byOwner.set(item.owner_user_id, list);
|
|
}
|
|
// data-only owner(只有数据资源、没有 scripts 的用户,且不在 members 列表
|
|
// 里,如已移除成员遗留的资源)也要出现在分组里。
|
|
for (const ownerUserId of dataByOwner.keys()) {
|
|
if (!byOwner.has(ownerUserId)) {
|
|
byOwner.set(ownerUserId, []);
|
|
}
|
|
}
|
|
|
|
// 成员 id → display_name 优先取 members 列表（最准）。
|
|
const memberName = new Map(members.map((m) => [m.user_id, m.display_name]));
|
|
|
|
const groups: {
|
|
user: AuthUser | null;
|
|
scripts: ScriptItem[];
|
|
directories: WorkspaceDirectory[];
|
|
dataResources: ResourceItem[];
|
|
}[] = [];
|
|
for (const [ownerUserId, groupScripts] of byOwner.entries()) {
|
|
const groupDataResources = dataByOwner.get(ownerUserId) ?? [];
|
|
const displayName =
|
|
memberName.get(ownerUserId) ??
|
|
groupScripts[0]?.owner_display_name ??
|
|
groupDataResources[0]?.owner_display_name ??
|
|
(ownerUserId === user?.user_id ? user?.display_name : null) ??
|
|
`${ownerUserId.slice(-6)}…`;
|
|
const groupUser =
|
|
ownerUserId === user?.user_id
|
|
? user
|
|
: ({
|
|
user_id: ownerUserId,
|
|
username: ownerUserId,
|
|
display_name: displayName,
|
|
email: null,
|
|
status: "unknown",
|
|
role_code: null,
|
|
is_system_admin: false,
|
|
} as AuthUser);
|
|
const inferred = inferredDirectories(groupScripts, ownerUserId);
|
|
// directories flat 数组现在按 owner_user_id 标记，按 owner 切分后与
|
|
// inferred 合并（inferred 补全 fetched 目录行未覆盖的祖先路径）。
|
|
const ownerDirs = directories.filter(
|
|
(d) => d.owner_user_id === ownerUserId,
|
|
);
|
|
groups.push({
|
|
user: groupUser,
|
|
scripts: groupScripts,
|
|
directories: mergeDirectories(ownerDirs, inferred),
|
|
dataResources: groupDataResources,
|
|
});
|
|
}
|
|
|
|
groups.sort((a, b) => {
|
|
if (a.user?.user_id === user?.user_id) return -1;
|
|
if (b.user?.user_id === user?.user_id) return 1;
|
|
return (a.user?.display_name ?? a.user?.user_id ?? "").localeCompare(
|
|
b.user?.display_name ?? b.user?.user_id ?? "",
|
|
);
|
|
});
|
|
|
|
return groups;
|
|
}, [filteredScripts, directories, user, dataByOwner, members]);
|
|
|
|
return (
|
|
<aside className="flex min-h-0 flex-col overflow-hidden rounded-[7px] border border-[#dce4ec] bg-white shadow-md">
|
|
<div className="flex min-h-16 items-center justify-between border-b border-line px-3.5">
|
|
<div>
|
|
<h2 className="mb-0.5 text-base text-[#1d2d42]">脚本目录</h2>
|
|
</div>
|
|
<div className="flex items-center gap-[9px]">
|
|
<button
|
|
className="inline-flex cursor-pointer items-center gap-0.5 border-0 bg-transparent px-px py-[5px] text-xs font-semibold text-[#1474d4] hover:text-[#0d58a2] disabled:cursor-wait disabled:opacity-55"
|
|
type="button"
|
|
disabled={uploading}
|
|
onClick={onUpload}
|
|
>
|
|
<Upload size={15} />
|
|
{uploading ? "上传中…" : "上传"}
|
|
</button>
|
|
<input
|
|
ref={uploadInputRef}
|
|
className="sr-only"
|
|
type="file"
|
|
accept=".py,.ipynb,.csv,.xlsx,.xls,.tsv,.json,.parquet,.txt"
|
|
multiple
|
|
onChange={onHandleUpload}
|
|
/>
|
|
<button
|
|
className="inline-flex cursor-pointer items-center gap-0.5 border-0 bg-transparent px-px py-[5px] text-xs font-semibold text-[#1474d4] hover:text-[#0d58a2]"
|
|
type="button"
|
|
onClick={() => onOpenCreateDialog()}
|
|
>
|
|
<Plus size={16} />
|
|
新建
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-3 mt-[11px] mb-[7px] flex h-[38px] items-center gap-[7px] rounded-md border border-line bg-[#fbfcfd] px-[9px] text-[#95a2b1] focus-within:border-[#6aa9e9] focus-within:ring-3 focus-within:ring-brand/10">
|
|
<Search size={17} />
|
|
<input
|
|
className="min-w-0 flex-1 border-0 bg-transparent text-xs text-[#26384d] outline-none placeholder:text-[#a7b2bf]"
|
|
aria-label="搜索脚本"
|
|
placeholder="搜索脚本名称"
|
|
value={keyword}
|
|
onChange={(event) => onKeywordChange(event.target.value)}
|
|
/>
|
|
<button
|
|
className="grid size-6 place-items-center border-0 bg-transparent text-[#8d9aaa]"
|
|
type="button"
|
|
aria-label="刷新脚本"
|
|
onClick={onRefresh}
|
|
>
|
|
<span className={refreshing ? "inline-flex animate-spin" : "inline-flex"}>
|
|
<RefreshCw size={16} />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto px-[7px] pb-3.5 pt-[5px]">
|
|
{loading ? (
|
|
<div className="flex flex-col gap-2 px-2 py-[15px]">
|
|
<span className="tree-skeleton-bar h-[43px] rounded-md" />
|
|
<span className="tree-skeleton-bar h-[43px] rounded-md" />
|
|
<span className="tree-skeleton-bar h-[43px] rounded-md" />
|
|
<span className="tree-skeleton-bar h-[43px] rounded-md" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
{memberScriptGroups.map((group) => {
|
|
const ownerKey = group.user?.user_id ?? "anon";
|
|
return (
|
|
<WorkspaceTreeGroup
|
|
key={ownerKey}
|
|
groupKey={`__group__${ownerKey}`}
|
|
ownerUserId={ownerKey}
|
|
title={`${group.user?.display_name}`}
|
|
scripts={group.scripts}
|
|
directories={group.directories}
|
|
dataResources={group.dataResources}
|
|
selectedId={selectedId}
|
|
onSelect={onSelect}
|
|
onContextMenu={
|
|
group.user?.user_id === user?.user_id
|
|
? onContextMenu
|
|
: undefined
|
|
}
|
|
readOnly={group.user?.user_id !== user?.user_id}
|
|
expandedPaths={expandedPaths}
|
|
onToggle={onToggle}
|
|
loadingChildrenPaths={loadingChildrenPaths}
|
|
onCopyResourcePath={onCopyResourcePath}
|
|
onPreviewResource={onPreviewResource}
|
|
/>
|
|
);
|
|
})}
|
|
{filteredScripts.length === 0 && directories.length === 0 && (
|
|
<div className="flex flex-col items-center px-[18px] py-[34px] text-center text-[#97a4b4]">
|
|
<span className="mb-3 grid size-[46px] place-items-center rounded-[13px] bg-[#eff6fd] text-[#6796c5]">
|
|
<FileText size={24} />
|
|
</span>
|
|
<strong className="text-xs text-[#637286]">
|
|
{keyword ? "没有匹配脚本" : "还没有构建脚本"}
|
|
</strong>
|
|
<p className="mb-3.5 mt-1.5 text-[10px] leading-normal">
|
|
{keyword
|
|
? "换个关键词试试"
|
|
: "新建 Notebook 或 Python 脚本开始实验"}
|
|
</p>
|
|
{!keyword && (
|
|
<button
|
|
type="button"
|
|
className="inline-flex cursor-pointer items-center gap-1 rounded-md border border-[#bcd6ee] bg-white px-[11px] py-[7px] text-[11px] text-[#176cc1]"
|
|
onClick={() => onOpenCreateDialog()}
|
|
>
|
|
<Plus size={15} />
|
|
新建脚本
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
function parentOf(path: string) {
|
|
const parts = path.split("/");
|
|
parts.pop();
|
|
return parts.join("/");
|
|
}
|
|
|
|
function ownedScriptPath(item: ScriptItem) {
|
|
return item.relative_path.replaceAll("\\", "/").split("/").slice(2).join("/");
|
|
}
|
|
|
|
function inferredDirectories(
|
|
items: ScriptItem[],
|
|
ownerUserId: string,
|
|
): WorkspaceDirectory[] {
|
|
const result = new Map<string, WorkspaceDirectory>();
|
|
for (const item of items) {
|
|
const parts = parentOf(ownedScriptPath(item)).split("/").filter(Boolean);
|
|
let parentPath = "";
|
|
for (const name of parts) {
|
|
const path = parentPath ? `${parentPath}/${name}` : name;
|
|
result.set(path, {
|
|
path,
|
|
name,
|
|
parent_path: parentPath,
|
|
owner_user_id: ownerUserId,
|
|
});
|
|
parentPath = path;
|
|
}
|
|
}
|
|
return [...result.values()];
|
|
}
|
|
|
|
function mergeDirectories(
|
|
left: WorkspaceDirectory[],
|
|
right: WorkspaceDirectory[],
|
|
): WorkspaceDirectory[] {
|
|
return [...new Map(
|
|
[...left, ...right].map((item) => [item.path, item]),
|
|
).values()];
|
|
}
|