ouczbs/TraceStudio-dev

Fork 0

Boshuang Zhao 021d032b7a TreaceStudio 初版，实现资源预加载功能

2026-01-09 21:37:02 +08:00

4.4 KiB

Raw Blame History

文件管理器增强功能

🆕 新增功能

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文件 → 自动导入工作流

编辑文件

打开文件查看器
点击"编辑"按钮
修改文件内容
点击"保存"保存修改

快捷键

ESC - 关闭文件查看器
点击背景 - 关闭文件查看器

🎨 界面预览

┌─────────────────────────────────────────────────┐
│ 📄 myfile.txt                                 ❌ │
│ cloud/data/myfile.txt                           │
│                                                  │
│ [✏️ 编辑]  [⬇️ 下载]                          │
├─────────────────────────────────────────────────┤
│                                                  │
│  这是文件内容...                                │
│  支持多行显示                                   │
│  保留原始格式                                   │
│                                                  │
└─────────────────────────────────────────────────┘

📝 技术实现

组件结构

FileViewer.tsx - 文件查看器主组件
- 文件内容加载
- 编辑模式切换
- 保存功能
- 下载功能
FileExplorer.tsx - 文件管理器（已增强）
- 添加viewingFile状态
- 单击打开查看器
- 右键菜单扩展

文件类型判断

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';
}

编辑保存流程

1. 用户点击"编辑" → setIsEditing(true)
2. 修改editedContent状态
3. 点击"保存" → 创建File对象
4. 上传到服务器 → uploadFile()
5. 成功后更新content → setContent(editedContent)

🔒 安全说明

只读文件

以下类型的文件只支持查看，不支持编辑：

图片文件（.png, .jpg等）
二进制文件
未知类型文件

编辑权限

✅ 文本文件可编辑
✅ JSON文件可编辑
✅ 代码文件可编辑
❌ 图片文件只读
❌ 二进制文件不支持预览

文件大小限制

建议编辑文件大小 < 1MB
大文件建议下载到本地编辑

🐛 已知问题

大文件加载 - 超大文件可能加载较慢
语法高亮 - 暂不支持语法高亮（可后续添加Monaco Editor）
二进制文件 - 不支持预览，只能下载

🚀 未来改进

集成Monaco Editor实现代码高亮
添加搜索/替换功能
支持更多文件类型预览
添加文件diff比较功能
支持文件版本历史

📞 反馈

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

4.4 KiB Raw Blame History Unescape Escape