HuangYJ/agent-frontend-web

Fork 0

Files

T

HuangYJ 152d5273a5 1

2026-08-07 13:56:29 +08:00

5.1 KiB

Raw Blame History

数智 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

{
  "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 中添加路由:

{
  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`	添加路由配置

5.1 KiB Raw Blame History Unescape Escape