From 794a62011352b9ad6d3f17e5ca108a4d204b9425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <haozi@loli.email>
Date: Mon, 12 Jan 2026 06:50:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=98=B6=E6=AE=B5=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/common/DraggableWindow.vue | 20 ++++++++-----
 .../components/file-editor/FileEditorView.vue | 30 +++----------------
 web/src/components/file-editor/FileTree.vue   | 30 +++++--------------
 web/src/views/file/EditModal.vue              |  2 --
 4 files changed, 25 insertions(+), 57 deletions(-)

diff --git a/web/src/components/common/DraggableWindow.vue b/web/src/components/common/DraggableWindow.vue
index c5ec605f..76f8595a 100644
--- a/web/src/components/common/DraggableWindow.vue
+++ b/web/src/components/common/DraggableWindow.vue
@@ -222,12 +222,18 @@ watch(show, (newShow) => {
 })
 
 // 监听窗口大小变化
+function handleWindowResize() {
+  if (isMaximized.value) {
+    size.value = { width: window.innerWidth, height: window.innerHeight }
+  }
+}
+
 onMounted(() => {
-  window.addEventListener('resize', () => {
-    if (isMaximized.value) {
-      size.value = { width: window.innerWidth, height: window.innerHeight }
-    }
-  })
+  window.addEventListener('resize', handleWindowResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleWindowResize)
 })
 </script>
 
@@ -363,7 +369,7 @@ onMounted(() => {
   gap: 4px;
 }
 
-.draggable-window .control-btn {
+.control-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -394,7 +400,7 @@ onMounted(() => {
 }
 
 // 调整大小的手柄
-.draggable-window .resize-handle {
+.resize-handle {
   position: absolute;
 
   &.n,
diff --git a/web/src/components/file-editor/FileEditorView.vue b/web/src/components/file-editor/FileEditorView.vue
index 9cede6f0..e1fbb8fc 100644
--- a/web/src/components/file-editor/FileEditorView.vue
+++ b/web/src/components/file-editor/FileEditorView.vue
@@ -111,8 +111,8 @@ defineExpose({
     />
 
     <!-- 主体区域 -->
-    <div class="editor-main">
-      <n-layout has-sider class="editor-layout">
+    <div class="flex-1 overflow-hidden">
+      <n-layout has-sider class="h-full">
         <!-- 左侧文件树 -->
         <n-layout-sider
           bordered
@@ -128,8 +128,8 @@ defineExpose({
         </n-layout-sider>
 
         <!-- 右侧编辑器区域（包含编辑器和状态栏） -->
-        <n-layout class="editor-content">
-          <div class="editor-wrapper">
+        <n-layout class="h-full overflow-hidden">
+          <div class="flex flex-col h-full min-w-0 overflow-hidden">
             <EditorPane ref="editorPaneRef" :read-only="readOnly" />
             <EditorStatusBar />
           </div>
@@ -305,15 +305,6 @@ defineExpose({
   background: var(--n-card-color);
 }
 
-.editor-main {
-  flex: 1;
-  overflow: hidden;
-}
-
-.editor-layout {
-  height: 100%;
-}
-
 .file-tree-sider {
   height: 100%;
 
@@ -322,19 +313,6 @@ defineExpose({
   }
 }
 
-.editor-content {
-  height: 100%;
-  overflow: hidden;
-}
-
-.editor-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-  min-width: 0; /* 允许在 flex 布局中收缩 */
-}
-
 .settings-form {
   :deep(.n-input-number) {
     width: 180px;
diff --git a/web/src/components/file-editor/FileTree.vue b/web/src/components/file-editor/FileTree.vue
index 8383f4ad..e9f5cfa4 100644
--- a/web/src/components/file-editor/FileTree.vue
+++ b/web/src/components/file-editor/FileTree.vue
@@ -105,8 +105,7 @@ async function initTree() {
 async function handleLoad(node: TreeOption): Promise<void> {
   if (node.isLeaf) return
   try {
-    const children = await loadDirectory(node.key as string)
-    node.children = children
+    node.children = await loadDirectory(node.key as string)
   } catch {
     node.children = []
   }
@@ -715,7 +714,7 @@ defineExpose({
         size="small"
         :placeholder="$gettext('Search')"
         clearable
-        class="search-input"
+        class="flex-1 min-w-0"
       >
         <template #prefix>
           <i-mdi-magnify />
@@ -767,7 +766,7 @@ defineExpose({
         <n-empty
           v-else-if="!searchLoading"
           :description="$gettext('No results found')"
-          class="search-empty"
+          class="px-5 py-10"
         />
       </n-spin>
       <!-- 普通模式：显示文件树 -->
@@ -789,7 +788,11 @@ defineExpose({
           class="file-tree-content"
           style="height: 100%"
         />
-        <n-empty v-else-if="!loading" :description="$gettext('No data')" class="tree-empty" />
+        <n-empty
+          v-else-if="!loading"
+          :description="$gettext('No data')"
+          class="flex flex-col h-full items-center justify-center"
+        />
       </n-spin>
     </div>
 
@@ -824,11 +827,6 @@ defineExpose({
   flex-shrink: 0;
 }
 
-.search-input {
-  flex: 1;
-  min-width: 0;
-}
-
 .current-path {
   display: flex;
   align-items: center;
@@ -891,16 +889,4 @@ defineExpose({
   height: 100%;
   overflow: auto;
 }
-
-.search-empty {
-  padding: 40px 20px;
-}
-
-.tree-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
 </style>
diff --git a/web/src/views/file/EditModal.vue b/web/src/views/file/EditModal.vue
index 7fd35c5d..99c95bc4 100644
--- a/web/src/views/file/EditModal.vue
+++ b/web/src/views/file/EditModal.vue
@@ -103,5 +103,3 @@ watch(minimized, (isMinimized) => {
     <FileEditorView ref="editorRef" :initial-path="initialPath" />
   </DraggableWindow>
 </template>
-
-<style scoped lang="scss"></style>