# 数智 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. 响应式

- 聊天区、输入区宽度自适应
- 文件面板展开时聊天区自动缩窄
- 文件预览/编辑区高度自适应