agent-frontend-web/docs/superpowers/specs/2026-07-16-shuzhi-ai-chat-frontend-design.md

数智 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 会话列表

[
  { id: 1, name: '通用会话 1' },
  { id: 2, name: '通用会话 2' },
  { id: 3, name: '通用会话 3' }
]

5.2 文件列表（树形）

[
  {
    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 消息数据

// 模拟聊天消息
{
  role: 'user' | 'assistant',
  content: '消息内容',
  time: 'HH:mm:ss'
}

6. 技术栈

• Vue 3 + Composition API
• Element Plus
• SCSS
• 模拟数据（无后端接口）

7. 响应式

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