model-platform/frontend/app/components/platform/ScriptExplorer.tsx

import { type ChangeEvent, type MouseEvent as ReactMouseEvent, type RefObject } from "react";
import Icon from "../common/Icon";
import { WorkspaceTreeGroup } from "~/features/platform/WorkspaceTree";
import type { ScriptItem, WorkspaceDirectory } from "~/services/api";
import type { AuthUser } from "~/context/AuthContext";

type ScriptExplorerProps = {
  scripts: ScriptItem[];
  filteredScripts: ScriptItem[];
  directories: WorkspaceDirectory[];
  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;
  uploadInputRef: RefObject<HTMLInputElement | null>;
  onHandleUpload: (event: ChangeEvent<HTMLInputElement>) => void;
};

export function ScriptExplorer({
  scripts,
  filteredScripts,
  directories,
  user,
  selectedId,
  loading,
  refreshing,
  uploading,
  keyword,
  onKeywordChange,
  onRefresh,
  onUpload,
  onOpenCreateDialog,
  onOpenFolderDialog,
  onChooseUpload,
  onContextMenu,
  onSelect,
  uploadInputRef,
  onHandleUpload,
}: ScriptExplorerProps) {
  const memberScriptGroups = (() => {
    const visibleScripts =
      user?.is_system_admin === true
        ? filteredScripts
        : filteredScripts.filter(
            (item) =>
              item.owner_user_id === user?.user_id ||
              item.visibility === "workspace" ||
              item.visibility === "public",
          );

    const byOwner = new Map<string, ScriptItem[]>();
    for (const item of visibleScripts) {
      const list = byOwner.get(item.owner_user_id) ?? [];
      list.push(item);
      byOwner.set(item.owner_user_id, list);
    }

    const groups: {
      user: AuthUser | null;
      scripts: ScriptItem[];
      directories: WorkspaceDirectory[];
    }[] = [];
    for (const [ownerUserId, groupScripts] of byOwner.entries()) {
      const groupUser =
        ownerUserId === user?.user_id
          ? user
          : ({
              user_id: ownerUserId,
              username: ownerUserId,
              display_name: ownerUserId,
              email: null,
              status: "unknown",
              role_code: null,
              is_system_admin: false,
            } as AuthUser);
      groups.push({
        user: groupUser,
        scripts: groupScripts,
        directories: inferredDirectories(groupScripts),
      });
    }

    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?.user_id ?? "").localeCompare(b.user?.user_id ?? "");
    });

    return groups;
  })();

  return (
    <aside className="explorer">
      <div className="explorer__header">
        <div>
          <h2>脚本目录</h2>
          <span>{scripts.length} 个工作副本</span>
        </div>
        <div className="explorer__actions">
          <button
            className="text-button"
            type="button"
            disabled={uploading}
            onClick={onUpload}
          >
            <Icon name="upload" size={15} />
            {uploading ? "上传中…" : "上传"}
          </button>
          <input
            ref={uploadInputRef}
            className="visually-hidden"
            type="file"
            accept=".py,.ipynb"
            multiple
            onChange={onHandleUpload}
          />
          <button
            className="text-button"
            type="button"
            onClick={() => onOpenCreateDialog()}
          >
            <Icon name="plus" size={16} />
            新建
          </button>
        </div>
      </div>

      <div className="search-box">
        <Icon name="search" size={17} />
        <input
          aria-label="搜索脚本"
          placeholder="搜索脚本名称"
          value={keyword}
          onChange={(event) => onKeywordChange(event.target.value)}
        />
        <button
          className={refreshing ? "is-spinning" : ""}
          type="button"
          aria-label="刷新脚本"
          onClick={onRefresh}
        >
          <Icon name="refresh" size={16} />
        </button>
      </div>

      <div className="tree-scroll">
        {loading ? (
          <div className="tree-skeleton">
            <span /><span /><span /><span />
          </div>
        ) : (
          <>
            {memberScriptGroups.map((group) => (
              <WorkspaceTreeGroup
                key={group.user?.user_id ?? "anon"}
                title={`${group.user?.display_name}的文件`}
                scripts={group.scripts}
                directories={group.directories}
                selectedId={selectedId}
                onSelect={onSelect}
                onContextMenu={
                  group.user?.user_id === user?.user_id
                    ? onContextMenu
                    : undefined
                }
                readOnly={group.user?.user_id !== user?.user_id}
              />
            ))}
            {filteredScripts.length === 0 && (
              <div className="tree-empty">
                <span className="tree-empty__icon">
                  <Icon name="script" size={24} />
                </span>
                <strong>{keyword ? "没有匹配脚本" : "还没有构建脚本"}</strong>
                <p>
                  {keyword
                    ? "换个关键词试试"
                    : "新建 Notebook 或 Python 脚本开始实验"}
                </p>
                {!keyword && (
                  <button type="button" onClick={() => onOpenCreateDialog()}>
                    <Icon name="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[]): 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 });
      parentPath = path;
    }
  }
  return [...result.values()];
}

function mergeDirectories(
  left: WorkspaceDirectory[],
  right: WorkspaceDirectory[],
): WorkspaceDirectory[] {
  return [...new Map(
    [...left, ...right].map((item) => [item.path, item]),
  ).values()];
}