1

2026-08-07 13:56:29 +08:00
commit 152d5273a5
306 changed files with 38651 additions and 0 deletions
@@ -0,0 +1,146 @@
+# 数智 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. 响应式
+
+- 聊天区、输入区宽度自适应
+- 文件面板展开时聊天区自动缩窄
+- 文件预览/编辑区高度自适应