feat: 阶段提交

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,

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;

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>

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>