feat: 工作空间文件预览改为侧边栏内嵌面板
- 将文件预览从模态弹窗改为侧边栏内嵌面板,不打断用户操作流程 - 支持双拖动调整:外部调整整体宽度(400-800px),内部调整文件树宽度(180-300px) - 左右分栏布局:左侧文件树 + 右侧预览面板 - 对话区域保留最小宽度 480px,保证可用性 - 新建 FilePreviewPanel 组件,删除 FilePreviewModal 组件 - 更新相关样式和规格文档
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user