u-desk/docs/03-模块文档/文件系统/filesystem-refactor-analysis.md

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. ⚠️ 评估是否需要拆分子组件