feat: 工作空间文件预览改为侧边栏内嵌面板

- 将文件预览从模态弹窗改为侧边栏内嵌面板,不打断用户操作流程
- 支持双拖动调整:外部调整整体宽度(400-800px),内部调整文件树宽度(180-300px)
- 左右分栏布局:左侧文件树 + 右侧预览面板
- 对话区域保留最小宽度 480px,保证可用性
- 新建 FilePreviewPanel 组件,删除 FilePreviewModal 组件
- 更新相关样式和规格文档
This commit is contained in:
2026-04-17 19:34:29 +08:00
parent 5f333b116a
commit ff4217c72a
8 changed files with 548 additions and 208 deletions

View File

@@ -1,19 +1,19 @@
## ADDED Requirements
### Requirement: 文件预览弹窗显示文件信息
文件预览弹窗应显示文件的基本信息。
文件预览面板应显示文件的基本信息,嵌入在侧边栏右侧,不使用模态弹窗
#### Scenario: 显示文件基本信息
- **WHEN** 文件预览弹窗打开
- **THEN** 弹窗显示文件名、文件类型、文件大小、修改时间
- **WHEN** 文件预览面板打开
- **THEN** 面板显示文件名、文件类型、文件大小、修改时间
#### Scenario: 弹窗标题显示文件名
- **WHEN** 文件预览弹窗打开
- **THEN** 弹窗 header 显示文件名和关闭按钮(×)
- **WHEN** 文件预览面板打开
- **THEN** 面板 header 显示文件图标、文件名和关闭按钮(×)
#### Scenario: 弹窗宽度适中
- **WHEN** 文件预览弹窗打开
- **THEN** 弹窗宽度为 600px最大宽度为 90vw
#### Scenario: 面板嵌入侧边栏
- **WHEN** 文件预览面板打开
- **THEN** 面板嵌入在侧边栏右侧,不覆盖整个页面
### Requirement: 文本文件预览
文本文件预览应显示文件内容。
@@ -75,15 +75,15 @@ Office 文件预览应显示文件信息和提示。
- **THEN** 文件信息显示音频时长(如 "03:45"
### Requirement: 文件预览弹窗操作
文件预览弹窗应提供下载和关闭操作。
文件预览面板应提供下载和关闭操作。
#### Scenario: 点击下载按钮
- **WHEN** 用户点击预览弹窗的"下载"按钮
- **WHEN** 用户点击预览面板的"下载"按钮
- **THEN** 显示 Toast 提示"文件下载中..."
#### Scenario: 点击关闭按钮
- **WHEN** 用户点击预览弹窗的"关闭"按钮
- **THEN** 预览弹窗关闭
- **WHEN** 用户点击预览面板的"关闭"按钮
- **THEN** 预览面板关闭,文件树保持显示
### Requirement: 文件右键菜单
文件项应支持右键菜单操作。
@@ -118,3 +118,33 @@ Office 文件预览应显示文件信息和提示。
#### Scenario: 取消删除
- **WHEN** 用户点击确认弹窗的"取消"按钮
- **THEN** 弹窗关闭,不执行删除操作
### Requirement: 文件预览面板始终可见
文件预览面板应始终可见,不打断用户操作流程。
#### Scenario: 点击文件立即显示预览
- **WHEN** 用户点击文件树中的文件
- **THEN** 预览面板立即在右侧显示文件内容,不弹出模态框
#### Scenario: 切换文件预览面板保持打开
- **WHEN** 用户点击另一个文件
- **THEN** 预览面板内容更新为新文件内容,面板保持打开状态
#### Scenario: 预览面板独立滚动
- **WHEN** 预览文件内容过长
- **THEN** 预览面板内容区域独立滚动,不影响文件树
### Requirement: 预览面板布局
预览面板应采用固定布局结构。
#### Scenario: 预览面板布局结构
- **WHEN** 预览面板显示
- **THEN** 面板从上到下依次为Header文件名+关闭按钮、Info文件信息、Content文件内容、Actions操作按钮
#### Scenario: 预览面板最小宽度
- **WHEN** 预览面板显示
- **THEN** 预览面板最小宽度为 200px保证内容可读
#### Scenario: 预览面板自适应宽度
- **WHEN** 侧边栏宽度或文件树宽度改变
- **THEN** 预览面板宽度自动调整sidebarWidth - fileTreeWidth - dividerWidth