4-10 树域 Rust 家族化

wolai-frontend/src/components/sidebar/tree-shell-surface.tsx

@@ -3,13 +3,19 @@
 import type { DragEvent, MouseEvent } from "react";
 import { FileTree } from "@/components/sidebar/file-tree";
 import { PrivateTree } from "@/components/sidebar/private-tree";
+import { TreeShellHost, type TreeRendererFamily } from "@/components/sidebar/tree-shell-host";
 import type { SidebarTreeNode } from "@/lib/kernel-sidebar";
 import type { FileTreeRow } from "@/lib/file-tree/types";
 import type { PageTreeProjectionItem } from "@/lib/tree-projection";
 import { cn } from "@/lib/utils";
 
+export type { TreeRendererFamily } from "@/components/sidebar/tree-shell-host";
+
 type SidebarPageTreeSurfaceProps = {
   mode: "page";
+  rendererFamily?: TreeRendererFamily;
+  workspaceId: string | null;
+  treeShellEnabled?: boolean;
   rows: PageTreeProjectionItem[];
   expanded: Set<string>;
   activeId: string;
@@ -18,10 +24,16 @@ type SidebarPageTreeSurfaceProps = {
   onMove: (nodeId: string, parentId: string | null, index: number) => void;
   onCreateChild: (parentId: string | null) => void;
   onContextMenu: (event: MouseEvent, node: SidebarTreeNode) => void;
+  onNavigate?: (documentId: string) => void;
+  onPageContextMenu?: (payload: { documentId: string; x: number; y: number }) => void;
+  onTreeMutation?: (payload: { type: string; documentId: string | null }) => void;
 };
 
 type SidebarFileTreeSurfaceProps = {
   mode: "filetree";
+  rendererFamily?: TreeRendererFamily;
+  workspaceId: string | null;
+  treeShellEnabled?: boolean;
   rows: FileTreeRow[];
   activeId: string;
   selectedRowIds: Set<string>;
@@ -34,8 +46,24 @@ type SidebarFileTreeSurfaceProps = {
   onToggleAssetFolderExpand?: (assetId: string) => void;
   onCreateChild: (parentId: string | null) => void;
   onBlankMouseDown?: (event: MouseEvent) => void;
-  onDropFiles?: (docId: string, files: FileList, targetRow?: FileTreeRow) => void;
+  onDropFiles?: (docId: string, files: FileList | File[], targetRow?: FileTreeRow) => void;
   onInternalDrop?: (args: { targetRow: FileTreeRow; rowIds: string[]; copy: boolean }) => void;
+  onNavigate?: (documentId: string) => void;
+  onFileTreeContextMenu?: (payload: {
+    documentId: string | null;
+    assetId: string | null;
+    rowId: string | null;
+    rowKind: string | null;
+    x: number;
+    y: number;
+  }) => void;
+  onFileTreeSelectionChange?: (payload: {
+    selectedRowIds: string[];
+    anchorRowId: string | null;
+    focusedRowId: string | null;
+  }) => void;
+  onAssetOpen?: (payload: { assetId: string; documentId: string | null }) => void;
+  onTreeMutation?: (payload: { type: string; documentId: string | null }) => void;
 };
 
 export type SidebarTreeSurfaceProps =
@@ -47,6 +75,13 @@ export type TreePickerSurfaceItem =
   | { kind: "doc"; id: string; title: string; subtitle?: string; depth?: number };
 
 type TreePickerSurfaceProps = {
+  rendererFamily?: TreeRendererFamily;
+  workspaceId: string | null;
+  treeShellEnabled?: boolean;
+  activeDocumentId?: string | null;
+  allowRootPick?: boolean;
+  excludeIds?: string[];
+  treeShellItems?: TreePickerSurfaceItem[];
   items: TreePickerSurfaceItem[];
   highlighted: number;
   className?: string;
@@ -60,48 +95,71 @@ export function SidebarTreeSurface(props: SidebarTreeSurfaceProps) {
     props.mode === "page"
       ? "sidebar-page-tree-shell"
       : "sidebar-file-tree-shell";
+  const rendererFamily = props.rendererFamily ?? "react";
+  const fallbackContent =
+    props.mode === "page" ? (
+      <PrivateTree
+        rows={props.rows}
+        expanded={props.expanded}
+        activeId={props.activeId}
+        onToggleExpand={props.onToggleExpand}
+        onMove={props.onMove}
+        onCreateChild={props.onCreateChild}
+        onContextMenu={props.onContextMenu}
+      />
+    ) : (
+      <FileTree
+        rows={props.rows}
+        activeId={props.activeId}
+        selectedRowIds={props.selectedRowIds}
+        onRowClick={props.onRowClick}
+        onRowDoubleClick={props.onRowDoubleClick}
+        onRowContextMenu={props.onRowContextMenu}
+        onRowDragStart={props.onRowDragStart}
+        onToggleExpand={props.onToggleExpand}
+        onToggleAssetFolderExpand={props.onToggleAssetFolderExpand}
+        onCreateChild={props.onCreateChild}
+        onBlankMouseDown={props.onBlankMouseDown}
+        onDropFiles={props.onDropFiles}
+        onInternalDrop={props.onInternalDrop}
+      />
+    );
 
   return (
-    <div
-      data-testid={surfaceTestId}
-      data-shell-mode={props.mode}
+    <TreeShellHost
+      mode={props.mode}
+      surfaceTestId={surfaceTestId}
+      rendererFamily={rendererFamily}
+      treeShellEnabled={props.treeShellEnabled}
+      workspaceId={props.workspaceId}
+      activeDocumentId={props.activeId}
+      fileTreeRows={props.mode === "filetree" ? props.rows : undefined}
+      onNavigate={props.onNavigate}
+      onPageContextMenu={props.mode === "page" ? props.onPageContextMenu : undefined}
+      onFileTreeContextMenu={props.mode === "filetree" ? props.onFileTreeContextMenu : undefined}
+      onFileTreeSelectionChange={props.mode === "filetree" ? props.onFileTreeSelectionChange : undefined}
+      onInternalDrop={props.mode === "filetree" ? props.onInternalDrop : undefined}
+      onDropFiles={props.mode === "filetree" ? props.onDropFiles : undefined}
+      onAssetOpen={props.mode === "filetree" ? props.onAssetOpen : undefined}
+      onTreeMutation={props.onTreeMutation}
       className={cn(
         "h-full w-full min-w-0 overflow-x-hidden rounded-md border border-[#eff2f6] bg-white",
         props.className,
       )}
     >
-      {props.mode === "page" ? (
-        <PrivateTree
-          rows={props.rows}
-          expanded={props.expanded}
-          activeId={props.activeId}
-          onToggleExpand={props.onToggleExpand}
-          onMove={props.onMove}
-          onCreateChild={props.onCreateChild}
-          onContextMenu={props.onContextMenu}
-        />
-      ) : (
-        <FileTree
-          rows={props.rows}
-          activeId={props.activeId}
-          selectedRowIds={props.selectedRowIds}
-          onRowClick={props.onRowClick}
-          onRowDoubleClick={props.onRowDoubleClick}
-          onRowContextMenu={props.onRowContextMenu}
-          onRowDragStart={props.onRowDragStart}
-          onToggleExpand={props.onToggleExpand}
-          onToggleAssetFolderExpand={props.onToggleAssetFolderExpand}
-          onCreateChild={props.onCreateChild}
-          onBlankMouseDown={props.onBlankMouseDown}
-          onDropFiles={props.onDropFiles}
-          onInternalDrop={props.onInternalDrop}
-        />
-      )}
-    </div>
+      {fallbackContent}
+    </TreeShellHost>
   );
 }
 
 export function TreePickerSurface({
+  rendererFamily = "react",
+  workspaceId,
+  treeShellEnabled = true,
+  activeDocumentId = null,
+  allowRootPick = false,
+  excludeIds = [],
+  treeShellItems,
   items,
   highlighted,
   className,
@@ -109,42 +167,53 @@ export function TreePickerSurface({
   onHighlight,
   onPick,
 }: TreePickerSurfaceProps) {
-  if (items.length === 0) {
-    return <div className="p-4 text-sm text-gray-400">{emptyText}</div>;
-  }
+  const hasItems = items.length > 0;
 
   return (
-    <div
-      data-testid="tree-picker-surface"
-      className={cn("py-2", className)}
+    <TreeShellHost
+      mode="picker"
+      surfaceTestId="tree-picker-surface"
+      rendererFamily={rendererFamily}
+      treeShellEnabled={treeShellEnabled}
+      workspaceId={workspaceId}
+      activeDocumentId={activeDocumentId}
+      allowRootPick={allowRootPick}
+      excludeIds={excludeIds}
+      pickerItems={treeShellItems}
+      onPick={onPick}
+      className={cn(hasItems ? "py-2" : null, className)}
     >
-      {items.map((item, index) => {
-        const isRoot = item.kind === "root";
-        return (
-          <button
-            key={isRoot ? "root" : item.id}
-            data-testid={isRoot ? "tree-picker-root" : "tree-picker-row"}
-            data-node-id={isRoot ? "" : item.id}
-            type="button"
-            className={cn(
-              "w-full px-4 py-3 text-left transition-colors hover:bg-[#eef2ff]",
-              index === highlighted && "bg-[#e3ecff]",
-            )}
-            onMouseEnter={() => onHighlight(index)}
-            onClick={() => onPick(item.id)}
-          >
-            <div
-              className="text-sm font-medium text-gray-900"
-              style={!isRoot ? { paddingLeft: 12 * (item.depth ?? 0) } : undefined}
+      {!hasItems ? (
+        <div className="p-4 text-sm text-gray-400">{emptyText}</div>
+      ) : (
+        items.map((item, index) => {
+          const isRoot = item.kind === "root";
+          return (
+            <button
+              key={isRoot ? "root" : item.id}
+              data-testid={isRoot ? "tree-picker-root" : "tree-picker-row"}
+              data-node-id={isRoot ? "" : item.id}
+              type="button"
+              className={cn(
+                "w-full px-4 py-3 text-left transition-colors hover:bg-[#eef2ff]",
+                index === highlighted && "bg-[#e3ecff]",
+              )}
+              onMouseEnter={() => onHighlight(index)}
+              onClick={() => onPick(item.id)}
             >
-              {item.title}
-            </div>
-            {item.subtitle ? (
-              <div className="mt-1 text-xs text-gray-500">{item.subtitle}</div>
-            ) : null}
-          </button>
-        );
-      })}
-    </div>
+              <div
+                className="text-sm font-medium text-gray-900"
+                style={!isRoot ? { paddingLeft: 12 * (item.depth ?? 0) } : undefined}
+              >
+                {item.title}
+              </div>
+              {item.subtitle ? (
+                <div className="mt-1 text-xs text-gray-500">{item.subtitle}</div>
+              ) : null}
+            </button>
+          );
+        })
+      )}
+    </TreeShellHost>
   );
 }