220 lines
4.7 KiB
Markdown
220 lines
4.7 KiB
Markdown
# AI助手Web客户端
|
||
|
||
这是一个100%还原 `docs/ai-assistant.html` 原型设计的Web版本AI助手对话客户端。
|
||
|
||
## ✨ 特性
|
||
|
||
### 视觉效果
|
||
- ✅ 完全还原原型的双栏布局（左侧用户信息面板 + 右侧对话区域）
|
||
- ✅ 精确匹配的颜色方案和渐变效果
|
||
- ✅ 动态粒子背景效果
|
||
- ✅ 消息滑入动画
|
||
- ✅ AI打字指示器动画
|
||
- ✅ 按钮悬停发光效果
|
||
- ✅ 语音波形动画
|
||
|
||
### 功能特性
|
||
- ✅ 实时对话交互
|
||
- ✅ 智能回复快捷按钮
|
||
- ✅ 主题切换（深空黑、极光蓝、霓虹紫、科技绿）
|
||
- ✅ 字体选择
|
||
- ✅ 待办事项管理
|
||
- ✅ 提醒设置展示
|
||
- ✅ 连接状态指示
|
||
|
||
### 技术栈
|
||
- **后端**: Flask 2.3+
|
||
- **前端**: HTML5 + Tailwind CSS + Vanilla JavaScript
|
||
- **字体**: Pacifico (标题) + Inter (正文)
|
||
- **图标**: Font Awesome 6.4.0
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
web_client/
|
||
├── app.py # Flask应用主文件
|
||
├── requirements.txt # Python依赖
|
||
├── README.md # 本文档
|
||
├── static/
|
||
│ ├── css/
|
||
│ │ └── style.css # 自定义样式（动画、效果）
|
||
│ ├── js/
|
||
│ │ └── main.js # 前端交互逻辑
|
||
│ └── assets/ # 静态资源（图片等）
|
||
└── templates/
|
||
└── index.html # 主页面模板
|
||
```
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 安装依赖
|
||
|
||
```bash
|
||
cd test-client/web_client
|
||
pip install -r requirements.txt
|
||
```
|
||
|
||
### 2. 启动服务
|
||
|
||
```bash
|
||
python app.py
|
||
```
|
||
|
||
默认端口：`5000`
|
||
|
||
### 3. 访问应用
|
||
|
||
打开浏览器访问：`http://localhost:5000`
|
||
|
||
## 🎨 界面还原度
|
||
|
||
### 布局结构
|
||
- ✅ 左侧固定宽度（320px）用户信息面板
|
||
- ✅ 右侧自适应对话区域
|
||
- ✅ 顶部导航栏（64px高度）
|
||
- ✅ 底部输入区域
|
||
|
||
### 颜色方案
|
||
```css
|
||
/* 背景渐变 */
|
||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
|
||
|
||
/* 主色调 */
|
||
--primary: #6366f1;
|
||
--secondary: #8b5cf6;
|
||
|
||
/* 用户消息气泡 */
|
||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||
|
||
/* AI消息气泡 */
|
||
background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
|
||
```
|
||
|
||
### 动画效果
|
||
1. **粒子背景** - 50个动态浮动粒子
|
||
2. **消息滑入** - 0.3s ease-out 动画
|
||
3. **打字指示器** - 3个点的波浪动画
|
||
4. **按钮发光** - hover时的阴影和位移效果
|
||
5. **脉冲动画** - 2s循环的扩散效果
|
||
6. **语音波形** - 5个条形的波动动画
|
||
|
||
## 🔌 API集成
|
||
|
||
### 已预留的API接口
|
||
|
||
#### 1. 获取应用列表
|
||
```javascript
|
||
GET /api/applications
|
||
```
|
||
|
||
#### 2. 发送聊天消息
|
||
```javascript
|
||
POST /api/chat/send
|
||
Content-Type: application/json
|
||
|
||
{
|
||
"appId": 15,
|
||
"message": "你好",
|
||
"chatId": "optional_chat_id",
|
||
"stream": false
|
||
}
|
||
```
|
||
|
||
#### 3. 健康检查
|
||
```javascript
|
||
GET /api/health
|
||
```
|
||
|
||
### 集成真实API
|
||
|
||
编辑 `app.py`，确保父目录的 `api_client.py` 和 `config.py` 可以正确导入：
|
||
|
||
```python
|
||
from api_client import AIAssistantClient
|
||
from config import APPLICATIONS, AI_ASSISTANT_CONFIG
|
||
```
|
||
|
||
## 🎯 使用说明
|
||
|
||
### 基础对话
|
||
1. 在底部输入框输入消息
|
||
2. 点击发送按钮或按Enter键
|
||
3. 等待AI回复（显示打字指示器）
|
||
|
||
### 快捷回复
|
||
点击顶部的快捷回复按钮，自动填充常用问题
|
||
|
||
### 主题切换
|
||
点击顶部导航栏的主题按钮切换不同配色方案
|
||
|
||
### 待办事项
|
||
在左侧面板添加和管理待办事项
|
||
|
||
## 🔧 配置说明
|
||
|
||
### 环境变量
|
||
|
||
创建 `.env` 文件（可选）：
|
||
|
||
```bash
|
||
# 服务端口
|
||
PORT=5000
|
||
|
||
# 调试模式
|
||
DEBUG=True
|
||
|
||
# API基础URL（如果需要代理）
|
||
API_BASE_URL=http://localhost:8082
|
||
```
|
||
|
||
### 修改默认应用
|
||
|
||
编辑 `static/js/main.js`：
|
||
|
||
```javascript
|
||
let currentAppId = 15; // 修改为你的应用ID
|
||
```
|
||
|
||
## 📱 响应式设计
|
||
|
||
- ✅ 桌面端（1920x1080及以上）- 完整布局
|
||
- ✅ 平板端（768px-1920px）- 自适应布局
|
||
- ✅ 移动端（<768px）- 优化的单栏布局
|
||
|
||
## 🐛 故障排查
|
||
|
||
### 样式未加载
|
||
- 检查 `static/css/style.css` 文件是否存在
|
||
- 确认Flask静态文件路径配置正确
|
||
|
||
### JavaScript未执行
|
||
- 检查浏览器控制台是否有错误
|
||
- 确认 `static/js/main.js` 文件是否存在
|
||
|
||
### API调用失败
|
||
- 检查后端服务是否启动
|
||
- 查看浏览器Network标签的请求详情
|
||
- 确认CORS配置正确
|
||
|
||
## 📝 开发计划
|
||
|
||
- [ ] 支持流式响应（SSE）
|
||
- [ ] 支持文件上传
|
||
- [ ] 支持语音输入
|
||
- [ ] 支持多会话管理
|
||
- [ ] 支持消息历史记录
|
||
- [ ] 支持用户认证
|
||
|
||
## 📄 许可
|
||
|
||
内部测试工具，仅供开发和测试使用。
|
||
|
||
## 🤝 贡献
|
||
|
||
如需修改或扩展功能，请遵循以下原则：
|
||
1. 保持与原型设计的一致性
|
||
2. 添加注释说明修改内容
|
||
3. 测试所有浏览器兼容性
|
||
4. 更新本README文档
|
||
|