tao.chen/model-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: workspace 目录树服务端懒加载

Browse Source 
- api.ts: listWorkspaceDirectories 支持 parent_path 查询; WorkspaceDirectory 增加 has_children; 同步 WorkspaceBoundApi 签名
- AuthContext: 绑定透传 parentPath
- scriptWorkspaceStore: 新增 expandedPaths/loadingChildrenPaths/loadedChildPaths, loadChildren/toggleExpanded, 局部刷新 createFolder/deleteDirectory
- WorkspaceTree: 移除 useState, 改为受控展开/加载状态
- ScriptExplorer: 从 store 读取并透传展开状态与 toggle
This commit is contained in:
tao.chen
2026-08-12 18:06:35 +08:00
parent a09551bd3c
commit c6c2481b96
5 changed files with 160 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/features/platform/WorkspaceTree.tsx
+30 -5
View File
@@ -1,4 +1,4 @@
import { type MouseEvent as ReactMouseEvent, useState } from "react";
import { type MouseEvent as ReactMouseEvent } from "react";
import Icon from "../../components/common/Icon";
import type {
@@ -23,6 +23,9 @@ type WorkspaceTreeProps = {
target: WorkspaceTreeTarget,
) => void;
readOnly?: boolean;
expandedPaths: Set<string>;
onToggle: (path: string) => void;
loadingChildrenPaths: Set<string>;
};
type WorkspaceTreeItemsProps = Omit<WorkspaceTreeProps, "title" | "readOnly"> & {
@@ -62,15 +65,19 @@ export function WorkspaceTreeGroup({
onSelect,
onContextMenu,
readOnly = false,
expandedPaths,
onToggle,
loadingChildrenPaths,
}: WorkspaceTreeProps) {
const [open, setOpen] = useState(true);
const open = expandedPaths.has("");
const childrenLoading = loadingChildrenPaths.has("");
return (
<div className="tree-group">
<button
className={`tree-group__title${open ? " is-open" : ""}`}
type="button"
aria-expanded={open}
onClick={() => setOpen((current) => !current)}
onClick={() => onToggle("")}
onContextMenu={onContextMenu
? (event) => onContextMenu(event, { kind: "root", path: "" })
: undefined}
@@ -79,6 +86,7 @@ export function WorkspaceTreeGroup({
<Icon name="folder" size={17} />
<span>{title}</span>
<em>{scripts.length}</em>
{childrenLoading && <span className="loading-spinner" />}
</button>
{open && (
<div className="tree-group__items">
@@ -90,6 +98,9 @@ export function WorkspaceTreeGroup({
selectedId={selectedId}
onSelect={onSelect}
onContextMenu={onContextMenu}
expandedPaths={expandedPaths}
onToggle={onToggle}
loadingChildrenPaths={loadingChildrenPaths}
/>
{scripts.length === 0 && directories.length === 0 && (
<p className="tree-group__empty">
@@ -110,6 +121,9 @@ function WorkspaceTreeItems({
selectedId,
onSelect,
onContextMenu,
expandedPaths,
onToggle,
loadingChildrenPaths,
}: WorkspaceTreeItemsProps) {
const childDirectories = directories.filter(
(item) => item.parent_path === path,
@@ -129,6 +143,9 @@ function WorkspaceTreeItems({
selectedId={selectedId}
onSelect={onSelect}
onContextMenu={onContextMenu}
expandedPaths={expandedPaths}
onToggle={onToggle}
loadingChildrenPaths={loadingChildrenPaths}
/>
))}
{childScripts.map((item) => (
@@ -177,17 +194,21 @@ function DirectoryBranch({
selectedId,
onSelect,
onContextMenu,
expandedPaths,
onToggle,
loadingChildrenPaths,
}: Omit<WorkspaceTreeItemsProps, "path"> & {
directory: WorkspaceDirectory;
}) {
const [open, setOpen] = useState(true);
const open = expandedPaths.has(directory.path);
const childrenLoading = loadingChildrenPaths.has(directory.path);
return (
<div className="directory-branch">
<button
className="directory-row"
style={{ paddingLeft: 10 + depth * 16 }}
type="button"
onClick={() => setOpen((current) => !current)}
onClick={() => onToggle(directory.path)}
onContextMenu={onContextMenu
? (event) => onContextMenu(event, {
kind: "directory",
@@ -200,6 +221,7 @@ function DirectoryBranch({
</span>
<Icon name="folder" size={17} />
<strong title={directory.path}>{directory.name}</strong>
{childrenLoading && <span className="loading-spinner" />}
</button>
{open && (
<WorkspaceTreeItems
@@ -210,6 +232,9 @@ function DirectoryBranch({
selectedId={selectedId}
onSelect={onSelect}
onContextMenu={onContextMenu}
expandedPaths={expandedPaths}
onToggle={onToggle}
loadingChildrenPaths={loadingChildrenPaths}
/>
)}
</div>
frontend/app/features/platform/state/scriptWorkspaceStore.ts
+109 -3
View File
@@ -79,6 +79,9 @@ type State = {
previewError: string | null;
pythonEditorBuffers: Record<string, PythonEditorBuffer>;
expandedPaths: Set<string>;
loadingChildrenPaths: Set<string>;
loadedChildPaths: Set<string>;
// actions
setApiOnline: (online: boolean) => void;
@@ -103,6 +106,8 @@ type State = {
createFolder: (name: string, parentPath: string) => Promise<void>;
deleteScript: (script: ScriptItem) => Promise<void>;
deleteDirectory: (path: string) => Promise<void>;
toggleExpanded: (path: string) => Promise<void>;
loadChildren: (parentPath: string) => Promise<void>;
toggleScriptLock: (script: ScriptItem) => Promise<void>;
openPublishDialog: (script: ScriptItem) => void;
submitPublish: (releaseNote: string, visibility: Visibility) => Promise<void>;
@@ -166,6 +171,9 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
previewError: null,
pythonEditorBuffers: {},
expandedPaths: new Set<string>(),
loadingChildrenPaths: new Set<string>(),
loadedChildPaths: new Set<string>(),
setApiOnline: (online) => set({ apiOnline: online }),
setKeyword: (keyword) => set({ keyword }),
@@ -197,6 +205,9 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
previewLoading: false,
previewError: null,
pythonEditorBuffers: {},
expandedPaths: new Set<string>(),
loadingChildrenPaths: new Set<string>(),
loadedChildPaths: new Set<string>(),
});
},
@@ -207,12 +218,15 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
try {
const [items, folderItems] = await Promise.all([
api.listScripts(),
api.listWorkspaceDirectories(),
api.listWorkspaceDirectories(""),
]);
const nextLoaded = new Set(get().loadedChildPaths);
nextLoaded.add("");
set({
scripts: items,
directories: folderItems,
apiOnline: true,
loadedChildPaths: nextLoaded,
});
const validIds = new Set(items.map((item) => item.script_id));
const currentSelected = get().selectedId;
@@ -236,6 +250,56 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
}
},
loadChildren: async (parentPath) => {
const api = requireApi();
if (get().loadedChildPaths.has(parentPath)) return;
const next = new Set(get().loadingChildrenPaths);
next.add(parentPath);
set({ loadingChildrenPaths: next });
try {
const children = await api.listWorkspaceDirectories(parentPath);
set((state) => {
const nextLoaded = new Set(state.loadedChildPaths);
nextLoaded.add(parentPath);
const trimmed = state.directories.filter(
(d) => d.parent_path !== parentPath,
);
return {
directories: [...trimmed, ...children],
loadedChildPaths: nextLoaded,
loadingChildrenPaths: new Set(
[...state.loadingChildrenPaths].filter((p) => p !== parentPath),
),
};
});
} catch (error) {
set((state) => ({
loadingChildrenPaths: new Set(
[...state.loadingChildrenPaths].filter((p) => p !== parentPath),
),
}));
pushToast(
"error",
error instanceof Error ? error.message : "目录加载失败",
);
}
},
toggleExpanded: async (path) => {
const state = get();
const isOpen = state.expandedPaths.has(path);
const next = new Set(state.expandedPaths);
if (isOpen) {
next.delete(path);
} else {
next.add(path);
if (!state.loadedChildPaths.has(path)) {
void get().loadChildren(path);
}
}
set({ expandedPaths: next });
},
selectScript: (id) => {
_selectedId = id;
set({ selectedId: id });
@@ -712,7 +776,25 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
ui.setFolderBusy(true);
try {
await api.createWorkspaceDirectory(trimmed, parentPath);
await get().load(true);
if (parentPath === "") {
await get().load(true);
} else {
set((state) => {
const nextLoaded = new Set(state.loadedChildPaths);
for (const p of state.loadedChildPaths) {
if (p.startsWith(`${parentPath}/`)) nextLoaded.delete(p);
}
nextLoaded.delete(parentPath);
return {
loadedChildPaths: nextLoaded,
directories: state.directories.filter(
(d) => !d.parent_path.startsWith(`${parentPath}/`),
),
expandedPaths: new Set(state.expandedPaths),
};
});
await get().loadChildren(parentPath);
}
ui.closeFolderDialog();
pushToast("success", `${trimmed} 文件夹已创建`);
} catch (error) {
@@ -779,6 +861,9 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
await get().endEditing(false, false);
if (_editSession?.script_id === activeScript.script_id) return;
}
const parentPath = path.includes("/")
? path.split("/").slice(0, -1).join("/")
: "";
try {
const result = await api.deleteWorkspaceDirectory(path);
const selectedScript = get().scripts.find(
@@ -790,7 +875,28 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
) {
get().selectScript(null);
}
await get().load(true);
set((state) => {
const nextLoaded = new Set(state.loadedChildPaths);
const nextExpanded = new Set(state.expandedPaths);
for (const p of state.loadedChildPaths) {
if (p === path || p.startsWith(`${path}/`)) nextLoaded.delete(p);
}
for (const p of state.expandedPaths) {
if (p === path || p.startsWith(`${path}/`)) nextExpanded.delete(p);
}
return {
loadedChildPaths: nextLoaded,
expandedPaths: nextExpanded,
directories: state.directories.filter(
(d) => d.parent_path !== path && !d.parent_path.startsWith(`${path}/`),
),
};
});
if (parentPath === "") {
await get().load(true);
} else {
await get().loadChildren(parentPath);
}
pushToast(
"success",
`${path} 已删除（含 ${result.deleted_scripts} 个脚本）`,