147 lines
5.4 KiB
Markdown
147 lines
5.4 KiB
Markdown
# 数智 AI 聊天前端页面设计
|
||
|
||
## 1. 概述
|
||
|
||
仿照 PilotDeck Web 端样式和布局，在 `src/views/frontend` 目录下实现数智 AI 聊天页面。
|
||
|
||
## 2. 布局结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 顶部导航栏 │
|
||
├────────────┬───────────────────────────────────────┬───────────────┤
|
||
│ │ 顶部栏 │ │
|
||
│ 左侧会话 │ [会话名] [智能体] [文件] │ 文件列表 │
|
||
│ 列表 ├───────────────────────────────────────┤ （文件树） │
|
||
│ (可折叠) │ │ │
|
||
│ │ 聊天消息区域 │ 可折叠展开 │
|
||
│ │ │ 默认折叠 │
|
||
│ ├───────────────────────────────────────┤ │
|
||
│ │ [已引用文件区域] │ │
|
||
│ │ ┌────────────────────────────────┐ │ │
|
||
│ │ │ 输入框 @ │ │ │
|
||
│ │ └────────────────────────────────┘ │ │
|
||
└────────────┴───────────────────────────────────────┴───────────────┘
|
||
```
|
||
|
||
## 3. 功能模块
|
||
|
||
### 3.1 左侧会话列表 (ConversationSidebar)
|
||
|
||
- **折叠/展开**：可折叠，展开时宽度约 240px
|
||
- **会话项**：只显示"通用会话"列表（模拟数据）
|
||
- **交互**：点击会话项 → 右侧聊天窗口切换到该会话
|
||
|
||
### 3.2 顶部栏 (ChatHeader)
|
||
|
||
- **左侧**：当前会话窗口的名称
|
||
- **右侧**：
|
||
- **智能体按钮**（默认选中状态）
|
||
- **文件按钮**：点击展开/收起右侧文件列表面板
|
||
|
||
### 3.3 聊天窗口 (ChatWindow)
|
||
|
||
- **消息展示**：用户消息（右侧蓝色）、AI 回复（左侧灰色）
|
||
- **欢迎页**：无消息时显示欢迎提示
|
||
- **加载状态**：AI 回复时显示"正在思考..."动画
|
||
|
||
### 3.4 消息输入区 (InputArea)
|
||
|
||
- **输入框**：支持 Enter 发送、Shift+Enter 换行
|
||
- **@引用文件**：
|
||
- 输入框内输入 `@` 或点击输入框前的 `@` 图标 → 弹出文件选择弹层
|
||
- 弹层仅显示文件（不含文件夹）
|
||
- 选择文件后显示在"已引用文件区域"
|
||
- **已引用文件区域**：显示已引用的文件列表，支持删除
|
||
- **上传按钮**：点击可上传文件
|
||
- **发送按钮**：发送消息（含引用的文件）
|
||
|
||
### 3.5 文件列表面板 (FilePanel)
|
||
|
||
- **位置**：聊天区右侧，默认折叠
|
||
- **展开方式**：点击顶部栏"文件"按钮
|
||
- **文件树**：树形结构展示本地文件，支持展开/收起文件夹
|
||
- **文件操作**：
|
||
- 点击文件 → 在面板内预览
|
||
- 支持编辑文件内容
|
||
- 支持保存修改
|
||
- **自适应**：聊天区自适应缩窄，文件面板展开时撑开宽度
|
||
|
||
### 3.6 @文件选择弹层 (FileSelectModal)
|
||
|
||
- **触发**：
|
||
- 点击输入框前的 `@` 图标
|
||
- 在输入框内输入 `@` 字符
|
||
- **内容**：仅显示文件（不含文件夹），模拟数据
|
||
- **交互**：点击选择文件 → 弹层关闭 → 文件显示在已引用区域
|
||
|
||
## 4. 组件结构
|
||
|
||
```
|
||
src/views/frontend/
|
||
├── index.vue # 主页面，整合所有模块
|
||
├── components/
|
||
│ ├── ConversationSidebar.vue # 左侧会话列表
|
||
│ ├── ChatWindow.vue # 聊天窗口
|
||
│ ├── ChatHeader.vue # 顶部栏
|
||
│ ├── InputArea.vue # 输入区域（含@引用）
|
||
│ ├── FilePanel.vue # 右侧文件列表面板
|
||
│ ├── FileSelectModal.vue # @文件选择弹层
|
||
│ └── QuotedFiles.vue # 已引用文件区域
|
||
└── styles/
|
||
└── index.scss # 样式文件
|
||
```
|
||
|
||
## 5. 模拟数据
|
||
|
||
### 5.1 会话列表
|
||
|
||
```javascript
|
||
[
|
||
{ id: 1, name: '通用会话 1' },
|
||
{ id: 2, name: '通用会话 2' },
|
||
{ id: 3, name: '通用会话 3' }
|
||
]
|
||
```
|
||
|
||
### 5.2 文件列表（树形）
|
||
|
||
```javascript
|
||
[
|
||
{
|
||
name: 'src',
|
||
type: 'folder',
|
||
children: [
|
||
{ name: 'index.js', type: 'file' },
|
||
{ name: 'App.vue', type: 'file' }
|
||
]
|
||
},
|
||
{ name: 'README.md', type: 'file' },
|
||
{ name: 'package.json', type: 'file' }
|
||
]
|
||
```
|
||
|
||
### 5.3 消息数据
|
||
|
||
```javascript
|
||
// 模拟聊天消息
|
||
{
|
||
role: 'user' | 'assistant',
|
||
content: '消息内容',
|
||
time: 'HH:mm:ss'
|
||
}
|
||
```
|
||
|
||
## 6. 技术栈
|
||
|
||
- Vue 3 + Composition API
|
||
- Element Plus
|
||
- SCSS
|
||
- 模拟数据（无后端接口）
|
||
|
||
## 7. 响应式
|
||
|
||
- 聊天区、输入区宽度自适应
|
||
- 文件面板展开时聊天区自动缩窄
|
||
- 文件预览/编辑区高度自适应
|