From e7350c87c6260d94583ecacf5856a026cc8bd5a2 Mon Sep 17 00:00:00 2001
From: liaibo <liaibo@yeah.net>
Date: Thu, 8 Jan 2026 18:17:07 +0800
Subject: [PATCH] =?UTF-8?q?0.1.08=20=E6=96=87=E4=BB=B6=E6=A0=91=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/sidebar/file-tree.tsx      | 11 +++++-----
 .../src/components/sidebar/sidebar.tsx        | 21 +++++++++++++------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/wolai-frontend/src/components/sidebar/file-tree.tsx b/wolai-frontend/src/components/sidebar/file-tree.tsx
index 4f9033b2..e48dec7e 100644
--- a/wolai-frontend/src/components/sidebar/file-tree.tsx
+++ b/wolai-frontend/src/components/sidebar/file-tree.tsx
@@ -44,7 +44,7 @@ export function FileTree({
 
   return (
     <div
-      className="space-y-0.5"
+      className="w-full min-w-0 max-w-full space-y-0.5 overflow-x-hidden"
       onDragOver={(event) => {
         if (!onDropFiles) return;
         event.preventDefault();
@@ -77,7 +77,7 @@ export function FileTree({
         const draggable =
           row.kind === "doc" || (row.kind === "asset" && isRealFileAsset(row.asset));
         const baseClass =
-          "flex select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-[#f5f7fb]";
+          "flex w-full min-w-0 max-w-full select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-[#f5f7fb]";
         const activeClass =
           row.kind === "index"
             ? "text-[#2563eb] font-medium"
@@ -156,6 +156,7 @@ export function FileTree({
 
               if (onDropFiles && event.dataTransfer.files?.length) {
                 event.preventDefault();
+                event.stopPropagation();
                 onDropFiles(row.docId, event.dataTransfer.files);
               }
             }}
@@ -185,7 +186,7 @@ export function FileTree({
                   <span className="h-5 w-5" />
                 )}
                 <Folder className="h-4 w-4 text-[#2563eb]" />
-                <span className="flex-1 truncate text-left">{label}</span>
+                <span className="min-w-0 flex-1 truncate text-left">{label}</span>
                 <button
                   type="button"
                   aria-label="新建子页面"
@@ -202,13 +203,13 @@ export function FileTree({
               <>
                 <span className="h-4 w-4" />
                 <FileText className="h-4 w-4 text-gray-500" />
-                <span className="flex-1 truncate text-left">{label}</span>
+                <span className="min-w-0 flex-1 truncate text-left">{label}</span>
               </>
             ) : (
               <>
                 <span className="h-4 w-4" />
                 <Paperclip className="h-4 w-4 text-gray-500" />
-                <span className="flex-1 truncate text-left">{label}</span>
+                <span className="min-w-0 flex-1 truncate text-left">{label}</span>
               </>
             )}
           </div>
diff --git a/wolai-frontend/src/components/sidebar/sidebar.tsx b/wolai-frontend/src/components/sidebar/sidebar.tsx
index 2c251663..a15c1198 100644
--- a/wolai-frontend/src/components/sidebar/sidebar.tsx
+++ b/wolai-frontend/src/components/sidebar/sidebar.tsx
@@ -42,6 +42,7 @@ import { PrivateTree } from "@/components/sidebar/private-tree";
 import { buildSidebarSectionsFromTree, flattenDocumentTree } from "@/lib/sidebar-tree";
 import { supabaseBrowser } from "@/lib/supabase/client";
 import { useSearchPaletteStore } from "@/store/search-palette";
+import { useEditorBridgeStore } from "@/store/editor-bridge";
 import { FileTree } from "@/components/sidebar/file-tree";
 import { buildVisibleRows } from "@/lib/file-tree/rows";
 import type { FileTreeSelectionState } from "@/lib/file-tree/selection";  
@@ -100,6 +101,7 @@ export function Sidebar({ initialData }: SidebarProps) {
   const segments = useSelectedLayoutSegments();
   const router = useRouter();
   const activeId = segments?.[1] ?? "";
+  const editorBridge = useEditorBridgeStore((state) => state.bridge);
 
   const [tree, setTree] = useState<DocumentNode[]>(() => buildDocumentTree(sidebarData.documents));
   const [filter, setFilter] = useState("");
@@ -979,6 +981,10 @@ export function Sidebar({ initialData }: SidebarProps) {
             const payload = (await resp.json()) as { asset?: MediaAsset };
             if (payload.asset?.id) {
               emitAssetsChanged(inferredTargetDocId, payload.asset);
+              // 拖拽文件进文件树：如果落点就是当前打开的页面，则把文件也插入到主编辑区
+              if (inferredTargetDocId === activeId) {
+                editorBridge?.insertMediaAsset?.(payload.asset);
+              }
             } else {
               errors.push(`${file.name}: 返回数据缺少 asset`);
             }
@@ -1003,6 +1009,7 @@ export function Sidebar({ initialData }: SidebarProps) {
     },
     [
       activeId,
+      editorBridge,
       fileTreeRowById,
       fileTreeSelection.focusedRowId,
       sidebarData.activeWorkspaceId,
@@ -1326,7 +1333,7 @@ export function Sidebar({ initialData }: SidebarProps) {
   }, [workspaceMenuOpen]);
 
   const sidebarBody = (
-    <div className="flex h-full flex-col">
+    <div className="flex h-full min-w-0 flex-col">
       <div className="border-b border-[#f1f1f1] p-3">
         <div className="text-xs text-gray-400">当前工作空间</div>
         <div className="mt-1 flex items-center justify-between">
@@ -1387,8 +1394,8 @@ export function Sidebar({ initialData }: SidebarProps) {
         ))}
       </div>
 
-      <div className="flex-1 overflow-hidden">
-        <div className="flex h-full flex-col overflow-y-auto">
+      <div className="flex-1 min-w-0 overflow-hidden">
+        <div className="flex h-full min-w-0 flex-col overflow-y-auto overflow-x-hidden">
           <div className="border-b border-[#f1f1f1] p-3">
             <div className="flex items-center gap-2 text-sm text-gray-500">
               <Library className="h-4 w-4" />
@@ -1491,7 +1498,7 @@ export function Sidebar({ initialData }: SidebarProps) {
                 <div
                   ref={fileTreeContainerRef}
                   data-testid="file-tree-container"
-                  className="h-full rounded-md border border-[#eff2f6] bg-white"
+                  className="h-full w-full min-w-0 overflow-x-hidden rounded-md border border-[#eff2f6] bg-white"
                 >
                   <FileTree
                     rows={fileTreeRows}
@@ -1536,8 +1543,10 @@ export function Sidebar({ initialData }: SidebarProps) {
 
   return (
     <>
-      <aside className="hidden h-full md:flex" style={{ width }}>
-        <div className="flex h-full flex-1 flex-col border-r border-[#e9edf5] bg-white">{sidebarBody}</div>
+      <aside className="hidden h-full min-w-0 overflow-hidden md:flex" style={{ width }}>
+        <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden border-r border-[#e9edf5] bg-white">
+          {sidebarBody}
+        </div>
         <div className="w-1 cursor-col-resize bg-transparent" onMouseDown={handleResizeStart} />
       </aside>
       <Drawer open={open} onOpenChange={setOpen}>