From fd6aad27f8eb05f10edff31bf732cade5d7531b9 Mon Sep 17 00:00:00 2001
From: cfq <cfq@qq.com>
Date: Mon, 26 Jan 2026 16:30:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E5=AE=BD=E5=BA=A6=E8=B0=83=E6=95=B4=E3=80=81=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=91=E6=8E=92=E5=BA=8F=E4=B8=8E=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E9=A1=B9=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 允许用户通过拖拽调整侧边栏宽度，并双击重置为默认宽度
- 文件树目录项现在按类型（目录优先）和名称（自然排序）自动排序
- 新增“显示/隐藏隐藏项”按钮，可过滤以“.”开头及“node_modules”的项
- 为编辑器、预览及整体应用统一设置字体大小变量，提升视觉一致性
- 移除未使用的导入以优化代码结构
---
 src/App.vue                    | 112 +++++++++++++++++++++++++++++++--
 src/components/Editor.vue      |   2 +-
 src/components/FileTree.vue    |  83 +++++++++++++++++++++---
 src/components/Preview.vue     |   5 +-
 src/composables/useConfig.js   |  19 +++++-
 src/composables/useFileTree.js |  14 ++++-
 src/composables/useTheme.js    |   1 +
 src/main.css                   |   6 ++
 8 files changed, 222 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b83226a..a084257 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, onUnmounted, ref, watch } from "vue";
 import Toolbar from "./components/Toolbar.vue";
 import FileTree from "./components/FileTree.vue";
 import TabContainer from "./components/TabContainer.vue";
@@ -22,6 +22,7 @@ const showGit = ref(false);
 const showSettings = ref(false);
 const showHistory = ref(false); // 历史记录弹窗
 const historyDirs = ref([]); // 历史目录列表
+const lastOpenedDirCache = ref('');
 
 const themeColors = [
   '#1890ff', // 默认蓝
@@ -36,6 +37,58 @@ const themeColors = [
 
 const antdTheme = ref(getAntdTheme());
 
+const DEFAULT_SIDEBAR_WIDTH = 250;
+const sidebarWidth = ref(DEFAULT_SIDEBAR_WIDTH);
+const isResizingSidebar = ref(false);
+const sidebarResizeState = ref({ startX: 0, startWidth: DEFAULT_SIDEBAR_WIDTH });
+
+const clampSidebarWidth = (width) => {
+  const minWidth = 180;
+  const maxWidth = 720;
+  return Math.min(maxWidth, Math.max(minWidth, Math.round(width)));
+};
+
+const stopSidebarResize = () => {
+  if (!isResizingSidebar.value) return;
+  isResizingSidebar.value = false;
+  window.removeEventListener('pointermove', handleSidebarPointerMove);
+  window.removeEventListener('pointerup', handleSidebarPointerUp);
+  window.removeEventListener('pointercancel', handleSidebarPointerUp);
+  document.body.style.userSelect = '';
+  document.body.style.cursor = '';
+};
+
+const handleSidebarPointerMove = (e) => {
+  if (!isResizingSidebar.value) return;
+  const deltaX = e.clientX - sidebarResizeState.value.startX;
+  sidebarWidth.value = clampSidebarWidth(sidebarResizeState.value.startWidth + deltaX);
+};
+
+const handleSidebarPointerUp = () => {
+  stopSidebarResize();
+  saveGlobalConfig();
+};
+
+const startSidebarResize = (e) => {
+  if (e.button !== 0) return;
+  e.preventDefault();
+  isResizingSidebar.value = true;
+  sidebarResizeState.value = { startX: e.clientX, startWidth: sidebarWidth.value };
+  document.body.style.userSelect = 'none';
+  document.body.style.cursor = 'col-resize';
+  window.addEventListener('pointermove', handleSidebarPointerMove);
+  window.addEventListener('pointerup', handleSidebarPointerUp);
+  window.addEventListener('pointercancel', handleSidebarPointerUp);
+  try {
+    e.currentTarget?.setPointerCapture?.(e.pointerId);
+  } catch {}
+};
+
+const resetSidebarWidth = () => {
+  sidebarWidth.value = DEFAULT_SIDEBAR_WIDTH;
+  saveGlobalConfig();
+};
+
 // 加载全局配置
 const loadGlobalConfig = async () => {
   if (window.services?.loadGlobalData) {
@@ -51,6 +104,14 @@ const loadGlobalConfig = async () => {
         historyDirs.value = data.historyDirs;
       }
 
+      if (data.lastOpenedDir) {
+        lastOpenedDirCache.value = data.lastOpenedDir;
+      }
+
+      if (data.layout?.sidebarWidth) {
+        sidebarWidth.value = clampSidebarWidth(data.layout.sidebarWidth);
+      }
+
       // 自动加载上次打开的目录
       if (data.lastOpenedDir && window.services.pathExists(data.lastOpenedDir)) {
         await openDirectory(data.lastOpenedDir);
@@ -67,8 +128,11 @@ const loadGlobalConfig = async () => {
 const saveGlobalConfig = async () => {
   if (window.services?.saveGlobalData) {
     await window.services.saveGlobalData({
-      lastOpenedDir: state.rootPath, // from useFileTree
+      lastOpenedDir: lastOpenedDirCache.value, 
       historyDirs: historyDirs.value,
+      layout: {
+        sidebarWidth: sidebarWidth.value
+      },
       theme: {
         primaryColor: primaryColor.value,
         isDark: isDark.value
@@ -81,6 +145,7 @@ const saveGlobalConfig = async () => {
 const openDirectory = async (path) => {
   await setRootPath(path);
   await loadConfig(path);
+  lastOpenedDirCache.value = path;
   
   // 更新历史记录
   if (!historyDirs.value.includes(path)) {
@@ -126,6 +191,10 @@ onMounted(() => {
   });
 });
 
+onUnmounted(() => {
+  stopSidebarResize();
+});
+
 const handleSelectDirectory = async () => {
     if (window.services?.selectDirectory) {
         const paths = window.services.selectDirectory();
@@ -157,9 +226,16 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
       />
       
       <div class="main-content">
-        <div class="sidebar">
+        <div class="sidebar" :style="{ width: `${sidebarWidth}px` }">
           <FileTree />
         </div>
+
+        <div
+          class="sidebar-resizer"
+          :class="{ resizing: isResizingSidebar }"
+          @pointerdown="startSidebarResize"
+          @dblclick="resetSidebarWidth"
+        />
         
         <div class="editor-area">
           <TabContainer />
@@ -231,13 +307,39 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
 }
 
 .sidebar {
-  width: 250px;
+  flex: 0 0 auto;
   background-color: var(--card-background, #fff);
-  border-right: 1px solid var(--border-color, #e8e8e8);
   display: flex;
   flex-direction: column;
 }
 
+.sidebar-resizer {
+  width: 6px;
+  cursor: col-resize;
+  position: relative;
+  flex: 0 0 auto;
+  background: transparent;
+}
+
+.sidebar-resizer::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 2px;
+  width: 1px;
+  background: var(--border-color, #e8e8e8);
+  opacity: 0.8;
+}
+
+.sidebar-resizer:hover::before,
+.sidebar-resizer.resizing::before {
+  left: 1px;
+  width: 2px;
+  background: var(--primary-color, #1890ff);
+  opacity: 1;
+}
+
 .editor-area {
   flex: 1;
   display: flex;
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index e5f852f..6270960 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -2,7 +2,7 @@
   <codemirror
     v-model="code"
     placeholder="请输入 Markdown 内容..."
-    :style="{ height: '100%', fontSize: '14px' }"
+    :style="{ height: '100%', fontSize: 'var(--editor-font-size)' }"
     :autofocus="true"
     :indent-with-tab="true"
     :tab-size="2"
diff --git a/src/components/FileTree.vue b/src/components/FileTree.vue
index ce676c2..cd0a644 100644
--- a/src/components/FileTree.vue
+++ b/src/components/FileTree.vue
@@ -2,9 +2,22 @@
   <div class="file-tree-container">
     <div class="tree-header">
       <span class="title">资源管理器</span>
-      <a-button type="text" size="small" @click="handleRefresh" title="刷新">
-        <template #icon><ReloadOutlined /></template>
-      </a-button>
+      <div class="header-actions">
+        <a-button type="text" size="small" @click="handleRefresh" title="刷新">
+          <template #icon><ReloadOutlined /></template>
+        </a-button>
+        <a-button
+          type="text"
+          size="small"
+          @click="toggleShowHiddenItems"
+          :title="showHiddenItems ? '不显示隐藏项' : '显示隐藏项'"
+        >
+          <template #icon>
+            <EyeOutlined v-if="showHiddenItems" />
+            <EyeInvisibleOutlined v-else />
+          </template>
+        </a-button>
+      </div>
     </div>
     
     <div v-if="!state.rootPath" class="empty-tip">
@@ -67,7 +80,7 @@
 
 <script setup>
 import { computed, ref } from 'vue';
-import { ReloadOutlined } from '@ant-design/icons-vue';
+import { EyeInvisibleOutlined, EyeOutlined, ReloadOutlined } from '@ant-design/icons-vue';
 import { useFileTree } from '../composables/useFileTree';
 import { useTabs } from '../composables/useTabs';
 import { useConfig } from '../composables/useConfig';
@@ -75,7 +88,7 @@ import { message, Modal } from 'ant-design-vue';
 
 const { state, loadDirectory, refresh } = useFileTree();
 const { openFile } = useTabs();
-const { config, addPinnedFile, removePinnedFile } = useConfig();
+const { config, addPinnedFile, removePinnedFile, setShowHiddenItems } = useConfig();
 
 const modalVisible = ref(false);
 const modalTitle = ref('');
@@ -89,11 +102,41 @@ const transformNodes = (nodes) => {
   return nodes.map(node => ({
     ...node,
     isLeaf: node.type === 'file',
-    children: node.children ? transformNodes(node.children) : undefined
+    children: node.children === undefined ? undefined : transformNodes(node.children)
   }));
 };
 
-const treeData = computed(() => transformNodes(state.nodes));
+const showHiddenItems = computed(() => !!config.fileTree?.showHiddenItems);
+
+const isHiddenItemName = (name) => {
+  if (!name) return false;
+  if (name.startsWith('.')) return true;
+  if (name === 'node_modules') return true;
+  return false;
+};
+
+const filterNodes = (nodes) => {
+  if (!Array.isArray(nodes) || nodes.length === 0) return [];
+  if (showHiddenItems.value) {
+    return nodes.map(node => ({
+      ...node,
+      children: node.children === undefined ? undefined : filterNodes(node.children)
+    }));
+  }
+  return nodes
+    .filter(node => !isHiddenItemName(node?.name))
+    .map(node => ({
+      ...node,
+      children: node.children === undefined ? undefined : filterNodes(node.children)
+    }));
+};
+
+const treeData = computed(() => transformNodes(filterNodes(state.nodes)));
+
+const toggleShowHiddenItems = async () => {
+  if (!state.rootPath) return;
+  await setShowHiddenItems(state.rootPath, !showHiddenItems.value);
+};
 
 const handleRefresh = async () => {
   await refresh();
@@ -102,7 +145,7 @@ const handleRefresh = async () => {
 const onLoadData = (treeNode) => {
   return new Promise(async (resolve) => {
     // 使用 key (path) 来加载
-    if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
+    if (treeNode.dataRef.children !== undefined) {
       resolve();
       return;
     }
@@ -253,6 +296,12 @@ const handleModalOk = async () => {
   border-bottom: 1px solid var(--border-color, #f0f0f0);
 }
 
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .title {
   font-weight: 600;
 }
@@ -284,7 +333,8 @@ const handleModalOk = async () => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 1; /* allow it to take remaining space but not force width */
+  flex: 1; /* 让文字占满剩余空间 */
+  min-width: 0; /* 关键：允许在 flex 容器中收缩，从而触发省略号 */
   margin-left: 4px; /* spacing between icon and text */
 }
 
@@ -298,6 +348,21 @@ const handleModalOk = async () => {
   transition: all 0.2s;
 }
 
+/* 关键：把 Title 容器也变成可收缩的 flex 子项，否则长文件名会把布局“挤歪” */
+:deep(.ant-tree-title) {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+}
+
+:deep(.ant-dropdown-trigger) {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+}
+
 :deep(.ant-tree-node-content-wrapper:hover) {
   background-color: var(--hover-background, rgba(0, 0, 0, 0.04));
 }
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index 68a7dc0..ffc2d7f 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -90,6 +90,7 @@ const handleClick = (event) => {
   height: 100%;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   line-height: 1.6;
+  font-size: var(--preview-font-size);
   color: var(--text-color);
   background-color: var(--card-background);
 }
@@ -123,7 +124,7 @@ const handleClick = (event) => {
 .markdown-preview code {
   padding: 0.2em 0.4em;
   margin: 0;
-  font-size: 85%;
+  font-size: var(--preview-code-font-size);
   background-color: var(--app-background);
   border-radius: 3px;
   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
@@ -132,7 +133,7 @@ const handleClick = (event) => {
 .markdown-preview pre {
   padding: 16px;
   overflow: auto;
-  font-size: 85%;
+  font-size: var(--preview-code-font-size);
   line-height: 1.45;
   background-color: var(--app-background);
   border: 1px solid var(--border-color);
diff --git a/src/composables/useConfig.js b/src/composables/useConfig.js
index 53c92dd..da8c4e2 100644
--- a/src/composables/useConfig.js
+++ b/src/composables/useConfig.js
@@ -1,8 +1,13 @@
-import { ref, reactive } from 'vue';
+import { reactive } from 'vue';
+
+const defaultFileTreeConfig = {
+  showHiddenItems: false,
+};
 
 const config = reactive({
   pinnedFiles: [], // Array of string (file paths)
   recentFiles: [], // Array of objects { path, lastOpened }
+  fileTree: { ...defaultFileTreeConfig },
 });
 
 export function useConfig() {
@@ -12,9 +17,11 @@ export function useConfig() {
     if (data) {
       config.pinnedFiles = data.pinnedFiles || [];
       config.recentFiles = data.recentFiles || [];
+      config.fileTree = { ...defaultFileTreeConfig, ...(data.fileTree || {}) };
     } else {
       config.pinnedFiles = [];
       config.recentFiles = [];
+      config.fileTree = { ...defaultFileTreeConfig };
     }
   };
 
@@ -23,6 +30,7 @@ export function useConfig() {
     await window.services.saveConfig(rootPath, {
       pinnedFiles: config.pinnedFiles,
       recentFiles: config.recentFiles,
+      fileTree: config.fileTree,
     });
   };
 
@@ -56,12 +64,19 @@ export function useConfig() {
     await saveConfig(rootPath);
   };
 
+  const setShowHiddenItems = async (rootPath, showHiddenItems) => {
+    if (!rootPath) return;
+    config.fileTree.showHiddenItems = !!showHiddenItems;
+    await saveConfig(rootPath);
+  };
+
   return {
     config,
     loadConfig,
     saveConfig,
     addPinnedFile,
     removePinnedFile,
-    addRecentFile
+    addRecentFile,
+    setShowHiddenItems
   };
 }
diff --git a/src/composables/useFileTree.js b/src/composables/useFileTree.js
index 72f8a70..ee76863 100644
--- a/src/composables/useFileTree.js
+++ b/src/composables/useFileTree.js
@@ -1,4 +1,4 @@
-import { reactive, ref } from 'vue';
+import { reactive } from 'vue';
 
 // 全局单例状态
 const state = reactive({
@@ -9,6 +9,15 @@ const state = reactive({
   loading: false
 });
 
+const compareFileTreeItems = (a, b) => {
+  const aIsDir = a?.type === 'directory';
+  const bIsDir = b?.type === 'directory';
+  if (aIsDir !== bIsDir) return aIsDir ? -1 : 1;
+  const aName = a?.name || '';
+  const bName = b?.name || '';
+  return aName.localeCompare(bName, undefined, { numeric: true, sensitivity: 'base' });
+};
+
 export function useFileTree() {
   
   // 设置根目录并加载
@@ -25,6 +34,9 @@ export function useFileTree() {
     state.loading = true;
     try {
       const items = await window.services.readDirectory(path);
+      if (Array.isArray(items)) {
+        items.sort(compareFileTreeItems);
+      }
       
       if (path === state.rootPath) {
         // 如果是根目录，直接替换
diff --git a/src/composables/useTheme.js b/src/composables/useTheme.js
index e8a7637..1f73f01 100644
--- a/src/composables/useTheme.js
+++ b/src/composables/useTheme.js
@@ -62,6 +62,7 @@ export function useTheme() {
         colorTextSecondary: textColorSecondary,
         colorBorder: borderColor,
         colorFillTertiary: hoverBackground,
+        fontSize: 15,
       },
     };
   };
diff --git a/src/main.css b/src/main.css
index 02f0f00..2f181ac 100644
--- a/src/main.css
+++ b/src/main.css
@@ -10,6 +10,10 @@
   --border-color: #f0f0f0;
   --hover-background: rgba(0, 0, 0, 0.04);
   --scrollbar-thumb: rgba(0, 0, 0, 0.28);
+  --app-font-size: 15px;
+  --editor-font-size: 15px;
+  --preview-font-size: 15px;
+  --preview-code-font-size: 15px;
 }
 
 html,
@@ -21,6 +25,8 @@ body {
 body {
   background-color: var(--app-background);
   color: var(--text-color);
+  font-size: var(--app-font-size);
+  line-height: 1.5;
 }
 
 button {