feat: 添加工作空间侧边栏和文件树功能

- 新增工作空间侧边栏组件,支持展开/关闭和拖动调整宽度
- 实现文件树组件,支持文件夹展开/折叠,显示文件大小和修改时间
- 添加文件预览弹窗,支持文本、Office、图片、视频、音频等多种文件类型
- 实现文件右键菜单,提供下载、重命名、删除操作入口
- 使用 react-icons 图标库替代 emoji,提升视觉一致性
- 优化拖动性能,使用 requestAnimationFrame 确保流畅跟手
- 新增工作空间相关规范文档(workspace-sidebar、file-tree、file-preview)
This commit is contained in:
2026-04-17 15:15:57 +08:00
parent def2b6bf61
commit e382a60e0a
15 changed files with 1632 additions and 28 deletions

View File

@@ -97,6 +97,7 @@ src/
├── components/ # 组件库
│ ├── common/ # 通用组件 (Modal, Toast, EmptyState等)
│ ├── layout/ # 布局组件 (AppHeader, AppLayout, UserDropdown, ConsoleLayout, AdminLayout, DeveloperLayout等)
│ ├── workspace/ # 工作空间组件 (WorkspaceSidebar, FileTree, FileTreeItem, FileContextMenu, FilePreviewModal)
│ ├── Layout.jsx # 主布局组件sidebar + content
│ └── ListSelector.jsx # 列表选择器
@@ -105,7 +106,8 @@ src/
├── data/ # 模拟数据
│ ├── adminData.js # 管理台数据(含平台级模型配置)
│ ├── projectModelConfigs.js # 项目级模型配置数据
── userModelConfigs.js # 个人模型配置数据
── userModelConfigs.js # 个人模型配置数据
│ └── workspace.js # 工作空间文件数据
├── pages/ # 页面组件
│ ├── console/ # 工作台子页面
@@ -278,6 +280,11 @@ export default Example;
| StatusBadge | `components/common/StatusBadge.jsx` | 状态标签 |
| SidebarNavItem | `components/layout/SidebarNavItem.jsx` | 侧边栏导航项 |
| SidebarNavGroup | `components/layout/SidebarNavGroup.jsx` | 可展开侧边栏导航组 |
| WorkspaceSidebar | `components/workspace/WorkspaceSidebar.jsx` | 工作空间侧边栏 |
| FileTree | `components/workspace/FileTree.jsx` | 文件树组件 |
| FileTreeItem | `components/workspace/FileTreeItem.jsx` | 文件树项组件 |
| FileContextMenu | `components/workspace/FileContextMenu.jsx` | 文件右键菜单 |
| FilePreviewModal | `components/workspace/FilePreviewModal.jsx` | 文件预览弹窗 |
---
@@ -414,6 +421,12 @@ api.admin.modelConfigs.create(data);
// 日志筛选
api.logs.filter({ user, type, status });
// 工作空间
api.workspace.getFiles(); // 获取工作空间文件树
api.workspace.getFileById(id); // 根据 ID 获取文件
api.workspace.getFileIcon(fileType); // 获取文件图标
api.workspace.getFileType(filename); // 根据文件名获取文件类型
```
---