feat: 添加工作空间侧边栏和文件树功能
- 新增工作空间侧边栏组件,支持展开/关闭和拖动调整宽度 - 实现文件树组件,支持文件夹展开/折叠,显示文件大小和修改时间 - 添加文件预览弹窗,支持文本、Office、图片、视频、音频等多种文件类型 - 实现文件右键菜单,提供下载、重命名、删除操作入口 - 使用 react-icons 图标库替代 emoji,提升视觉一致性 - 优化拖动性能,使用 requestAnimationFrame 确保流畅跟手 - 新增工作空间相关规范文档(workspace-sidebar、file-tree、file-preview)
This commit is contained in:
15
README.md
15
README.md
@@ -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); // 根据文件名获取文件类型
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user