144 lines
4.4 KiB
Markdown
144 lines
4.4 KiB
Markdown
|
# 文件管理器增强功能
|
|||
|
|
|
|||
|
|
## 🆕 新增功能
|
|||
|
|
|
|||
|
|
### 1. 文件查看器
|
|||
|
|
点击文件管理器中的任意文件，可以在新窗口中打开查看：
|
|||
|
|
|
|||
|
|
**支持的文件类型**:
|
|||
|
|
- ✅ **文本文件** (.txt, .md) - 纯文本查看和编辑
|
|||
|
|
- ✅ **代码文件** (.py, .js, .ts, .tsx, .jsx, .css, .html, .yaml, .yml) - 语法高亮显示
|
|||
|
|
- ✅ **JSON文件** (.json, .utrace) - 格式化显示和编辑
|
|||
|
|
- ✅ **图片文件** (.png, .jpg, .jpeg, .gif, .bmp, .svg, .webp) - 图片预览
|
|||
|
|
- ✅ **CSV文件** (.csv) - 文本查看
|
|||
|
|
|
|||
|
|
### 2. 文件编辑器
|
|||
|
|
对于文本类文件，支持在线编辑：
|
|||
|
|
|
|||
|
|
**编辑功能**:
|
|||
|
|
- ✏️ 点击"编辑"按钮进入编辑模式
|
|||
|
|
- 💾 编辑完成后点击"保存"保存修改
|
|||
|
|
- ❌ 点击"取消"放弃修改
|
|||
|
|
- ⬇️ 点击"下载"下载文件到本地
|
|||
|
|
|
|||
|
|
**编辑器特性**:
|
|||
|
|
- 等宽字体显示
|
|||
|
|
- 保留缩进和格式
|
|||
|
|
- JSON自动格式化
|
|||
|
|
- 实时编辑反馈
|
|||
|
|
|
|||
|
|
### 3. 右键菜单增强
|
|||
|
|
右键点击文件，新增菜单选项：
|
|||
|
|
|
|||
|
|
- 👁️ **打开查看** - 在新窗口中打开文件
|
|||
|
|
- ⬇️ **下载** - 下载文件到本地
|
|||
|
|
- 📂 **导入工作流** (.utrace文件专用)
|
|||
|
|
- 🗑️ **删除** - 删除文件
|
|||
|
|
|
|||
|
|
## 📖 使用方法
|
|||
|
|
|
|||
|
|
### 打开文件
|
|||
|
|
**方式1**: 单击文件名 → 自动打开查看器
|
|||
|
|
**方式2**: 右键文件 → 选择"打开查看"
|
|||
|
|
**方式3**: 双击.utrace文件 → 自动导入工作流
|
|||
|
|
|
|||
|
|
### 编辑文件
|
|||
|
|
1. 打开文件查看器
|
|||
|
|
2. 点击"编辑"按钮
|
|||
|
|
3. 修改文件内容
|
|||
|
|
4. 点击"保存"保存修改
|
|||
|
|
|
|||
|
|
### 快捷键
|
|||
|
|
- **ESC** - 关闭文件查看器
|
|||
|
|
- **点击背景** - 关闭文件查看器
|
|||
|
|
|
|||
|
|
## 🎨 界面预览
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌─────────────────────────────────────────────────┐
|
|||
|
|
│ 📄 myfile.txt ❌ │
|
|||
|
|
│ cloud/data/myfile.txt │
|
|||
|
|
│ │
|
|||
|
|
│ [✏️ 编辑] [⬇️ 下载] │
|
|||
|
|
├─────────────────────────────────────────────────┤
|
|||
|
|
│ │
|
|||
|
|
│ 这是文件内容... │
|
|||
|
|
│ 支持多行显示 │
|
|||
|
|
│ 保留原始格式 │
|
|||
|
|
│ │
|
|||
|
|
└─────────────────────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📝 技术实现
|
|||
|
|
|
|||
|
|
### 组件结构
|
|||
|
|
- **FileViewer.tsx** - 文件查看器主组件
|
|||
|
|
- 文件内容加载
|
|||
|
|
- 编辑模式切换
|
|||
|
|
- 保存功能
|
|||
|
|
- 下载功能
|
|||
|
|
|
|||
|
|
- **FileExplorer.tsx** - 文件管理器（已增强）
|
|||
|
|
- 添加viewingFile状态
|
|||
|
|
- 单击打开查看器
|
|||
|
|
- 右键菜单扩展
|
|||
|
|
|
|||
|
|
### 文件类型判断
|
|||
|
|
```typescript
|
|||
|
|
function getFileType(extension: string): string {
|
|||
|
|
const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp'];
|
|||
|
|
const codeExts = ['py', 'js', 'ts', 'tsx', 'jsx', 'css', 'html', 'yaml'];
|
|||
|
|
|
|||
|
|
if (imageExts.includes(extension)) return 'image';
|
|||
|
|
if (extension === 'json') return 'json';
|
|||
|
|
if (codeExts.includes(extension)) return 'code';
|
|||
|
|
return 'text';
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 编辑保存流程
|
|||
|
|
```typescript
|
|||
|
|
1. 用户点击"编辑" → setIsEditing(true)
|
|||
|
|
2. 修改editedContent状态
|
|||
|
|
3. 点击"保存" → 创建File对象
|
|||
|
|
4. 上传到服务器 → uploadFile()
|
|||
|
|
5. 成功后更新content → setContent(editedContent)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🔒 安全说明
|
|||
|
|
|
|||
|
|
### 只读文件
|
|||
|
|
以下类型的文件只支持查看，不支持编辑：
|
|||
|
|
- 图片文件（.png, .jpg等）
|
|||
|
|
- 二进制文件
|
|||
|
|
- 未知类型文件
|
|||
|
|
|
|||
|
|
### 编辑权限
|
|||
|
|
- ✅ 文本文件可编辑
|
|||
|
|
- ✅ JSON文件可编辑
|
|||
|
|
- ✅ 代码文件可编辑
|
|||
|
|
- ❌ 图片文件只读
|
|||
|
|
- ❌ 二进制文件不支持预览
|
|||
|
|
|
|||
|
|
### 文件大小限制
|
|||
|
|
- 建议编辑文件大小 < 1MB
|
|||
|
|
- 大文件建议下载到本地编辑
|
|||
|
|
|
|||
|
|
## 🐛 已知问题
|
|||
|
|
|
|||
|
|
1. **大文件加载** - 超大文件可能加载较慢
|
|||
|
|
2. **语法高亮** - 暂不支持语法高亮（可后续添加Monaco Editor）
|
|||
|
|
3. **二进制文件** - 不支持预览，只能下载
|
|||
|
|
|
|||
|
|
## 🚀 未来改进
|
|||
|
|
|
|||
|
|
- [ ] 集成Monaco Editor实现代码高亮
|
|||
|
|
- [ ] 添加搜索/替换功能
|
|||
|
|
- [ ] 支持更多文件类型预览
|
|||
|
|
- [ ] 添加文件diff比较功能
|
|||
|
|
- [ ] 支持文件版本历史
|
|||
|
|
|
|||
|
|
## 📞 反馈
|
|||
|
|
|
|||
|
|
遇到问题或有建议？请联系开发团队！
|