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