158 lines
5.1 KiB
Markdown
158 lines
5.1 KiB
Markdown
# 数智 AI 聊天页面设计文档
|
||
|
||
## 概述
|
||
|
||
在 `src/views/frontend/index.vue` 创建独立的「数智 AI」聊天页面，采用 Vue3 组合式 API + ElementPlus 组件库，与现有 kds/chat.vue 风格保持一致。
|
||
|
||
## 页面布局
|
||
|
||
### 三栏固定布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ [LOGO栏: 数智AI] [折叠按钮] │ ← #0F172A
|
||
├─────────┬───────────────────────────────────────────────┤
|
||
│ │ 面包屑: general / 智能体 / 欢迎使用数智AI │
|
||
│ 侧边栏 │ [智能体][文件][技能][路由][记忆][常驻] │ ← 功能按钮
|
||
│ #F8F9FA │──────────────────────────────────────────────│
|
||
│ │ │
|
||
│ [项目] │ 消息区域（滚动） │
|
||
│ [通用] │ [AI回复靠左] │
|
||
│ │ [用户气泡靠右] │
|
||
│ 树形列表 │ ───────────────────────────── │
|
||
│ │ │
|
||
├─────────┴───────────────────────────────────────────────┤
|
||
│ [智能体][下拉框][@][权限] [输入框...] [发送] │ ← 固定底部
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 详细设计
|
||
|
||
### 1. 左侧边栏（固定宽度 220px）
|
||
|
||
**LOGO 栏**:
|
||
- 高度: 56px
|
||
- 背景: #0F172A
|
||
- 左侧白色文字「数智 AI」
|
||
- 右侧折叠图标按钮，点击提示"敬请期待"
|
||
|
||
**Tab 切换区**:
|
||
- 两个并排按钮：「项目」「通用」
|
||
- 点击提示"敬请期待"
|
||
|
||
**树形列表区域**:
|
||
- 一级节点：数智AI Demo，带下拉展开箭头，右侧有关闭 × 按钮、新增 + 按钮
|
||
- 二级子节点：欢迎使用 数智AI，下方灰色小字「57 分钟前」
|
||
- 所有交互点击均提示"敬请期待"
|
||
|
||
### 2. 中间主内容区域
|
||
|
||
**顶部面包屑**:
|
||
- 文字: `general / 智能体 / 欢迎使用 数智AI`
|
||
|
||
**功能导航栏**（6个按钮）:
|
||
- 智能体、文件、技能、路由、记忆、常驻
|
||
- 全部点击提示"敬请期待"
|
||
|
||
**消息容器**:
|
||
- 白色背景，占据剩余高度
|
||
- 自动滚动到底部
|
||
|
||
**消息样式**:
|
||
- 用户消息: 靠右，背景 #F1F3F5，气泡左上角灰色小字「已处理 1m」
|
||
- AI 回复: 靠左，无背景白色文本块
|
||
- 消息间 1px 浅灰分割线 #E5E7EB 隔开
|
||
|
||
**文字色**:
|
||
- 正文: #222
|
||
- 辅助小字: #888
|
||
- 加粗标题: #111
|
||
|
||
### 3. 底部固定输入栏
|
||
|
||
- 大圆角文本输入框，占位文字: "告诉 数智AI 你想完成什么..."
|
||
- 左下角功能控件: 「智能体」按钮、下拉选择框、@按钮、权限按钮（全部提示"敬请期待"）
|
||
- 右下角发送按钮，浅灰色底色
|
||
|
||
## API 交互
|
||
|
||
### 请求信息
|
||
- URL: `http://192.168.5.125:18000/v1/chat/completions`
|
||
- Method: POST
|
||
- Headers:
|
||
- Authorization: Bearer 5c49dd2a721e0f408ea49298b6c13ddf17267eb0b64e3da7019ee581f597408e
|
||
- Content-Type: application/json
|
||
|
||
### 请求 Body
|
||
```json
|
||
{
|
||
"model": "qwen3.6-27b-nvfp4",
|
||
"messages": [
|
||
{
|
||
"role": "user",
|
||
"content": "/no_think\n 用户的问题"
|
||
}
|
||
],
|
||
"max_tokens": 200,
|
||
"temperature": 0.7
|
||
}
|
||
```
|
||
|
||
### 流式响应处理
|
||
- 使用 EventSource 或 fetch + ReadableStream 解析 SSE 流式响应
|
||
- 逐字实时渲染到 AI 消息气泡，模拟打字机效果
|
||
- 请求期间发送按钮置灰
|
||
|
||
## 色彩规范
|
||
|
||
| 元素 | 色值 |
|
||
|------|------|
|
||
| 侧边栏背景 | #F8F9FA |
|
||
| LOGO 栏背景 | #0F172A |
|
||
| 用户气泡背景 | #F1F3F5 |
|
||
| 关键词高亮 | #EEEEEE |
|
||
| 分割线 | #E5E7EB |
|
||
| 正文文字 | #222 |
|
||
| 辅助小字 | #888 |
|
||
| 加粗标题 | #111 |
|
||
| 组件圆角 | 8px |
|
||
|
||
## 功能黑白名单
|
||
|
||
### 可正常运行
|
||
- 底部输入框文本输入
|
||
- 发送按钮触发对话 API
|
||
- 用户消息、AI 流式回复渲染
|
||
- 消息区域自动滚动
|
||
- 接口成功/失败弹窗提示
|
||
|
||
### 点击提示"敬请期待"
|
||
- 左侧边栏所有按钮、树节点、Tab 切换
|
||
- 顶部功能导航栏（智能体/文件/技能/路由/记忆/常驻）
|
||
- 底部输入栏左下角全部附属功能按钮
|
||
|
||
## 路由配置
|
||
|
||
需要在 `src/router/index.js` 中添加路由:
|
||
```javascript
|
||
{
|
||
path: '/frontend',
|
||
component: Layout,
|
||
children: [
|
||
{
|
||
path: 'index',
|
||
component: () => import('@/views/frontend/index'),
|
||
name: 'Frontend',
|
||
meta: { title: '数智 AI' }
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 文件清单
|
||
|
||
| 文件 | 说明 |
|
||
|------|------|
|
||
| `src/views/frontend/index.vue` | 主页面组件（单文件实现） |
|
||
| `src/router/index.js` | 添加路由配置 |
|