重构：文件系统模块化架构，优化应用启动流程

docs/filesystem-refactor-analysis.md

@@ -0,0 +1,90 @@
+# FileSystem.vue 组件结构分析
+
+## 组件规模
+- **总行数**：2436 行
+- **模板**：355 行
+- **脚本**：2081 行
+- **样式**：710 行
+
+## 功能模块分析
+
+### 1. 状态管理（~200行）
+- 文件路径、内容、列表
+- ZIP 浏览状态
+- 媒体预览状态
+- 编辑器状态
+- UI 状态（侧边栏、面板宽度等）
+
+### 2. 文件浏览功能（~300行）
+- listDirectory - 列出目录
+- selectFile - 选择文件
+- openPath - 打开路径
+- browseDirectory - 浏览目录
+
+### 3. ZIP 浏览功能（~400行）
+- enterZipMode - 进入 ZIP 模式
+- listZipDirectory - 列出 ZIP 目录
+- readZipFile - 读取 ZIP 文件
+- exitZipMode - 退出 ZIP 模式
+
+### 4. 媒体预览功能（~600行）
+- previewImage - 图片预览
+- previewVideo - 视频预览
+- previewAudio - 音频预览
+- previewPdf - PDF 预览
+- previewHtml - HTML 预览/编辑（~200行）
+- previewMarkdown - Markdown 预览/编辑（~100行）
+- extractHtmlStyles - HTML 样式提取（~150行）
+
+### 5. 文件操作（~200行）
+- readFile - 读取文件
+- writeFile - 写入文件
+- deleteFile - 删除文件
+- clearContent - 清空内容
+
+### 6. 收藏夹管理（~100行）
+- toggleFavorite - 切换收藏
+- removeFavorite - 移除收藏
+- openFavoriteFile - 打开收藏
+
+### 7. 拖拽调整（~100行）
+- startResize - 垂直调整
+- startResizeHorizontal - 水平调整
+
+### 8. 其他功能（~100行）
+- loadCommonPaths - 加载系统路径
+- addToHistory - 添加历史
+- showBinaryFileInfo - 显示二进制文件信息
+
+## 重构策略
+
+### 阶段1：条件日志（低风险）
+创建 `useDebugLog.js` - 替换 40 个 console.log
+
+### 阶段2：提取 Composables（中风险）
+1. `useFileSystem.js` - 文件浏览和操作
+2. `useZipBrowser.js` - ZIP 文件浏览
+3. `useMediaPreview.js` - 媒体预览
+4. `useFavorites.js` - 收藏夹管理
+
+### 阶段3：拆分子组件（高风险，可选）
+1. `PathInput.vue` - 路径输入组件
+2. `FileList.vue` - 文件列表组件
+3. `MediaPreview.vue` - 媒体预览组件
+4. `FileEditor.vue` - 文件编辑器组件
+
+## 风险评估
+
+| 操作 | 风险 | 原因 |
+|------|------|------|
+| 条件日志 | 🟢 低 | 不影响逻辑 |
+| 提取 composables | 🟡 中 | 需要仔细验证 |
+| 拆分子组件 | 🔴 高 | 可能破坏功能 |
+
+## 推荐执行顺序
+
+1. ✅ 创建条件日志工具
+2. ✅ 清理 console.log
+3. ✅ 提取 useZipBrowser composable
+4. ✅ 提取 useMediaPreview composable
+5. ⚠️ 评估是否需要拆分子组件