# 文件管理器增强功能

## 🆕 新增功能

### 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比较功能
- [ ] 支持文件版本历史

## 📞 反馈

遇到问题或有建议？请联系开发团队！