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

- 新增工作空间侧边栏组件，支持展开/关闭和拖动调整宽度
- 实现文件树组件，支持文件夹展开/折叠，显示文件大小和修改时间
- 添加文件预览弹窗，支持文本、Office、图片、视频、音频等多种文件类型
- 实现文件右键菜单，提供下载、重命名、删除操作入口
- 使用 react-icons 图标库替代 emoji，提升视觉一致性
- 优化拖动性能，使用 requestAnimationFrame 确保流畅跟手
- 新增工作空间相关规范文档（workspace-sidebar、file-tree、file-preview）

openspec/specs/file-preview/spec.md

@@ -0,0 +1,116 @@
+## ADDED Requirements
+
+### Requirement: 文件预览弹窗显示文件信息
+文件预览弹窗应显示文件的基本信息。
+
+#### Scenario: 显示文件基本信息
+- **WHEN** 文件预览弹窗打开
+- **THEN** 弹窗显示文件名、文件类型、文件大小、修改时间
+
+#### Scenario: 弹窗标题显示文件名
+- **WHEN** 文件预览弹窗打开
+- **THEN** 弹窗 header 显示文件名和关闭按钮（×）
+
+### Requirement: 文本文件预览
+文本文件预览应显示文件内容。
+
+#### Scenario: 文本文件显示内容
+- **WHEN** 用户预览文本文件（.txt、.md、.json、.js、.css 等）
+- **THEN** 预览区域显示文件内容（使用模拟数据）
+
+#### Scenario: 代码文件语法高亮
+- **WHEN** 用户预览代码文件（.js、.jsx、.py 等）
+- **THEN** 预览区域显示代码内容，可考虑简单的语法高亮（非必须）
+
+### Requirement: Office 文件预览
+Office 文件预览应显示文件信息和提示。
+
+#### Scenario: Word 文件预览
+- **WHEN** 用户预览 Word 文档（.doc、.docx）
+- **THEN** 预览区域显示文件类型图标和提示"点击下载查看完整内容"
+
+#### Scenario: Excel 文件预览
+- **WHEN** 用户预览 Excel 文档（.xls、.xlsx）
+- **THEN** 预览区域显示文件类型图标和提示"点击下载查看完整内容"
+
+#### Scenario: PowerPoint 文件预览
+- **WHEN** 用户预览 PowerPoint 文档（.ppt、.pptx）
+- **THEN** 预览区域显示文件类型图标和提示"点击下载查看完整内容"
+
+### Requirement: 图片文件预览
+图片文件预览应显示图片预览区域。
+
+#### Scenario: 图片文件预览区域
+- **WHEN** 用户预览图片文件（.jpg、.png、.gif 等）
+- **THEN** 预览区域显示图片预览区域（占位符或实际图片）
+
+#### Scenario: 图片文件显示尺寸信息
+- **WHEN** 用户预览图片文件
+- **THEN** 文件信息显示图片尺寸（如 "1920 × 1080"）
+
+### Requirement: 视频文件预览
+视频文件预览应显示文件信息和提示。
+
+#### Scenario: 视频文件预览
+- **WHEN** 用户预览视频文件（.mp4、.avi、.mov 等）
+- **THEN** 预览区域显示视频图标和提示"点击下载播放视频"
+
+#### Scenario: 视频文件显示时长
+- **WHEN** 用户预览视频文件
+- **THEN** 文件信息显示视频时长（如 "02:35"）
+
+### Requirement: 音频文件预览
+音频文件预览应显示文件信息和提示。
+
+#### Scenario: 音频文件预览
+- **WHEN** 用户预览音频文件（.mp3、.wav、.ogg 等）
+- **THEN** 预览区域显示音频图标和提示"点击下载播放音频"
+
+#### Scenario: 音频文件显示时长
+- **WHEN** 用户预览音频文件
+- **THEN** 文件信息显示音频时长（如 "03:45"）
+
+### Requirement: 文件预览弹窗操作
+文件预览弹窗应提供下载和关闭操作。
+
+#### Scenario: 点击下载按钮
+- **WHEN** 用户点击预览弹窗的"下载"按钮
+- **THEN** 显示 Toast 提示"文件下载中..."
+
+#### Scenario: 点击关闭按钮
+- **WHEN** 用户点击预览弹窗的"关闭"按钮
+- **THEN** 预览弹窗关闭
+
+### Requirement: 文件右键菜单
+文件项应支持右键菜单操作。
+
+#### Scenario: 点击操作按钮显示菜单
+- **WHEN** 用户点击文件项的操作按钮（⋮）
+- **THEN** 显示右键菜单，包含"下载"、"重命名"、"删除"选项
+
+#### Scenario: 点击下载菜单项
+- **WHEN** 用户点击右键菜单的"下载"项
+- **THEN** 显示 Toast 提示"文件下载中..."，菜单关闭
+
+#### Scenario: 点击重命名菜单项
+- **WHEN** 用户点击右键菜单的"重命名"项
+- **THEN** 显示 Toast 提示"文件已重命名"，菜单关闭
+
+#### Scenario: 点击删除菜单项
+- **WHEN** 用户点击右键菜单的"删除"项
+- **THEN** 显示删除确认弹窗
+
+### Requirement: 删除确认弹窗
+删除操作应显示二次确认弹窗。
+
+#### Scenario: 删除确认弹窗显示
+- **WHEN** 用户点击右键菜单的"删除"项
+- **THEN** 显示确认弹窗，提示"确定要删除文件 [文件名] 吗？"
+
+#### Scenario: 确认删除
+- **WHEN** 用户点击确认弹窗的"确认"按钮
+- **THEN** 显示 Toast 提示"文件已删除"，弹窗关闭
+
+#### Scenario: 取消删除
+- **WHEN** 用户点击确认弹窗的"取消"按钮
+- **THEN** 弹窗关闭，不执行删除操作

openspec/specs/file-tree/spec.md

@@ -0,0 +1,123 @@
+## ADDED Requirements
+
+### Requirement: 文件树显示文件和文件夹
+文件树应展示工作空间中的文件和文件夹结构。
+
+#### Scenario: 文件树显示文件项
+- **WHEN** 工作空间包含文件
+- **THEN** 文件树显示文件项，包含文件图标、文件名、文件大小、修改时间
+
+#### Scenario: 文件树显示文件夹项
+- **WHEN** 工作空间包含文件夹
+- **THEN** 文件树显示文件夹项，包含文件夹图标、文件夹名称、展开/折叠箭头
+
+### Requirement: 文件夹默认折叠
+文件夹应默认处于折叠状态。
+
+#### Scenario: 文件夹初始状态为折叠
+- **WHEN** 文件树加载完成
+- **THEN** 所有文件夹处于折叠状态，不显示子文件
+
+#### Scenario: 打开侧边栏文件夹重置为折叠
+- **WHEN** 用户关闭侧边栏后再次打开
+- **THEN** 所有文件夹恢复为折叠状态
+
+### Requirement: 文件夹可展开
+系统应允许用户点击文件夹展开查看子文件。
+
+#### Scenario: 点击文件夹展开
+- **WHEN** 用户点击折叠状态的文件夹
+- **THEN** 文件夹展开，显示所有子文件和子文件夹
+
+#### Scenario: 展开文件夹箭头旋转
+- **WHEN** 文件夹从折叠变为展开
+- **THEN** 箭头图标从向右（▶）旋转为向下（▼）
+
+### Requirement: 文件夹可折叠
+系统应允许用户点击已展开的文件夹将其折叠。
+
+#### Scenario: 点击已展开文件夹折叠
+- **WHEN** 用户点击已展开的文件夹
+- **THEN** 文件夹折叠，隐藏所有子文件和子文件夹
+
+#### Scenario: 折叠文件夹箭头旋转
+- **WHEN** 文件夹从展开变为折叠
+- **THEN** 箭头图标从向下（▼）旋转为向右（▶）
+
+### Requirement: 文件树显示文件大小
+文件项应显示文件大小。
+
+#### Scenario: 文件大小显示格式
+- **WHEN** 文件树显示文件项
+- **THEN** 文件大小以 KB 或 MB 为单位显示（如 "156 KB"、"2.5 MB"）
+
+#### Scenario: 文件夹不显示大小
+- **WHEN** 文件树显示文件夹项
+- **THEN** 文件夹不显示大小信息
+
+### Requirement: 文件树显示修改时间
+文件项应显示修改时间。
+
+#### Scenario: 修改时间显示格式
+- **WHEN** 文件树显示文件项
+- **THEN** 修改时间以 "MM-DD" 格式显示（如 "04-09"）
+
+#### Scenario: 文件夹不显示修改时间
+- **WHEN** 文件树显示文件夹项
+- **THEN** 文件夹不显示修改时间
+
+### Requirement: 文件树支持交互
+文件项和文件夹项应支持点击预览和右键菜单操作。
+
+#### Scenario: 点击文件打开预览
+- **WHEN** 用户点击文件项
+- **THEN** 打开文件预览弹窗，显示文件详情
+
+#### Scenario: 操作按钮始终显示
+- **WHEN** 文件树渲染文件项或文件夹项
+- **THEN** 操作按钮（⋯）始终显示在右侧，不依赖鼠标悬停
+
+#### Scenario: 文件夹也有操作按钮
+- **WHEN** 文件树显示文件夹项
+- **THEN** 文件夹项右侧也显示操作按钮（⋯）
+
+### Requirement: 文件树使用图标库图标
+文件树应使用 react-icons 图标库显示文件类型图标。
+
+#### Scenario: 文件夹显示文件夹图标
+- **WHEN** 文件树显示文件夹项
+- **THEN** 使用 FiFolder 图标
+
+#### Scenario: 代码文件显示代码图标
+- **WHEN** 文件树显示代码文件（.js、.py 等）
+- **THEN** 使用 FiCode 图标
+
+#### Scenario: Office 文件显示对应图标
+- **WHEN** 文件树显示 Office 文件
+- **THEN** Word 使用 FaFileWord、Excel 使用 FaFileExcel、PowerPoint 使用 FaFilePowerpoint
+
+#### Scenario: 媒体文件显示对应图标
+- **WHEN** 文件树显示媒体文件
+- **THEN** 图片使用 FiImage、视频使用 FiVideo、音频使用 FiMusic
+
+### Requirement: 文件树样式遵循 BEM 规范
+文件树样式应使用 BEM 命名规范。
+
+#### Scenario: 文件树类名使用 BEM
+- **WHEN** 文件树渲染
+- **THEN** 使用 .file-tree 作为 block，.file-tree__item、.file-tree__icon 等作为 element
+
+#### Scenario: 文件树使用设计令牌
+- **WHEN** 文件树样式定义
+- **THEN** 使用现有设计令牌（颜色、间距、字号等），不硬编码样式值
+
+### Requirement: 文件树布局紧凑统一
+文件树应采用紧凑统一的布局。
+
+#### Scenario: 文件和文件夹高度一致
+- **WHEN** 文件树显示文件项和文件夹项
+- **THEN** 文件项和文件夹项的高度相同（padding: 4px 8px）
+
+#### Scenario: 文件信息紧凑显示
+- **WHEN** 文件树显示文件项
+- **THEN** 文件大小宽度为 50px，修改时间宽度为 40px，字号为 11px

openspec/specs/workspace-sidebar/spec.md

@@ -0,0 +1,86 @@
+## ADDED Requirements
+
+### Requirement: 工作空间侧边栏默认关闭
+系统应在对话界面加载时将工作空间侧边栏默认设置为关闭状态。
+
+#### Scenario: 进入对话页面侧边栏关闭
+- **WHEN** 用户进入对话页面
+- **THEN** 工作空间侧边栏处于关闭状态，不遮挡对话内容
+
+#### Scenario: 切换对话侧边栏保持关闭
+- **WHEN** 用户从一个对话切换到另一个对话
+- **THEN** 工作空间侧边栏保持关闭状态
+
+### Requirement: 工作空间侧边栏可展开
+系统应允许用户通过点击展开按钮打开工作空间侧边栏。
+
+#### Scenario: 点击展开按钮打开侧边栏
+- **WHEN** 用户点击对话界面右上角的展开按钮
+- **THEN** 工作空间侧边栏从右侧展开，宽度为 240px
+
+#### Scenario: 侧边栏展开显示文件树
+- **WHEN** 工作空间侧边栏展开
+- **THEN** 侧边栏内显示文件树组件，展示工作空间的文件和文件夹结构
+
+### Requirement: 工作空间侧边栏可关闭
+系统应允许用户通过点击关闭按钮关闭工作空间侧边栏。
+
+#### Scenario: 点击关闭按钮关闭侧边栏
+- **WHEN** 用户点击侧边栏 header 内的关闭按钮
+- **THEN** 工作空间侧边栏关闭，恢复为隐藏状态
+
+### Requirement: 工作空间侧边栏布局
+工作空间侧边栏应包含 header 区域和 content 区域。
+
+#### Scenario: 侧边栏 header 显示标题和关闭按钮
+- **WHEN** 工作空间侧边栏展开
+- **THEN** header 区域显示"工作空间"标题和关闭按钮（×）
+
+#### Scenario: 侧边栏 content 显示文件树
+- **WHEN** 工作空间侧边栏展开
+- **THEN** content 区域显示文件树组件，可滚动查看文件列表
+
+### Requirement: 侧边栏展开按钮位置
+展开按钮应固定在对话界面的右上角，位于 header 下方。
+
+#### Scenario: 展开按钮在右上角
+- **WHEN** 工作空间侧边栏关闭
+- **THEN** 对话界面右上角显示展开按钮（工作空间图标），位于 header 下方
+
+#### Scenario: 展开按钮始终可见
+- **WHEN** 用户滚动对话内容
+- **THEN** 展开按钮保持在右上角固定位置，不随内容滚动
+
+#### Scenario: 展开按钮不被遮挡
+- **WHEN** 展开按钮显示
+- **THEN** 按钮的 z-index 为 150，高于 header 的 100，不被遮挡
+
+### Requirement: 侧边栏打开时隐藏展开按钮
+展开按钮应在侧边栏打开时隐藏。
+
+#### Scenario: 侧边栏打开按钮隐藏
+- **WHEN** 用户点击展开按钮打开侧边栏
+- **THEN** 展开按钮自动隐藏
+
+#### Scenario: 侧边栏关闭按钮显示
+- **WHEN** 用户关闭侧边栏
+- **THEN** 展开按钮重新显示
+
+### Requirement: 侧边栏支持拖动调整宽度
+用户应能够通过拖动调整侧边栏宽度。
+
+#### Scenario: 默认宽度
+- **WHEN** 侧边栏打开
+- **THEN** 侧边栏默认宽度为 280px
+
+#### Scenario: 拖动调整宽度
+- **WHEN** 用户拖动侧边栏左边缘的手柄
+- **THEN** 侧边栏宽度随鼠标移动而改变，范围限制在 200px 到 500px
+
+#### Scenario: 拖动手柄始终显示
+- **WHEN** 侧边栏打开
+- **THEN** 左边缘的拖动手柄始终显示（opacity: 0.5），hover 时 opacity 为 1
+
+#### Scenario: 拖动性能流畅
+- **WHEN** 用户拖动调整宽度
+- **THEN** 使用 requestAnimationFrame 优化，拖动流畅跟手，无卡顿