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