1

2026-08-07 13:56:29 +08:00
commit 152d5273a5
306 changed files with 38651 additions and 0 deletions
@@ -0,0 +1,157 @@
+# 数智 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` | 添加路由配置 |