工具助手添加

2025-12-25 18:04:10 +08:00
parent f4bc9f6dab
commit 98081456b7
31 changed files with 4306 additions and 0 deletions
@@ -0,0 +1,219 @@
+# 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文档
+