happy-life-star/web_client

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. 安装依赖

cd test-client/web_client
pip install -r requirements.txt

2. 启动服务

python app.py

默认端口：5000

3. 访问应用

打开浏览器访问：http://localhost:5000

🎨 界面还原度

布局结构

• ✅ 左侧固定宽度（320px）用户信息面板
• ✅ 右侧自适应对话区域
• ✅ 顶部导航栏（64px高度）
• ✅ 底部输入区域

颜色方案

/* 背景渐变 */
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. 获取应用列表

GET /api/applications

2. 发送聊天消息

POST /api/chat/send
Content-Type: application/json

{
    "appId": 15,
    "message": "你好",
    "chatId": "optional_chat_id",
    "stream": false
}

3. 健康检查

GET /api/health

集成真实API

编辑 app.py，确保父目录的 api_client.py 和 config.py 可以正确导入：

from api_client import AIAssistantClient
from config import APPLICATIONS, AI_ASSISTANT_CONFIG

🎯 使用说明

基础对话

1. 在底部输入框输入消息
2. 点击发送按钮或按Enter键
3. 等待AI回复（显示打字指示器）

快捷回复

点击顶部的快捷回复按钮，自动填充常用问题

主题切换

点击顶部导航栏的主题按钮切换不同配色方案

待办事项

在左侧面板添加和管理待办事项

🔧 配置说明

环境变量

创建 .env 文件（可选）：

# 服务端口
PORT=5000

# 调试模式
DEBUG=True

# API基础URL（如果需要代理）
API_BASE_URL=http://localhost:8082

修改默认应用

编辑 static/js/main.js：

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文档