# 数智 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` | 添加路由配置 |