peanut/happy-life-star

Fork 0

Files

T

peanut 98081456b7 工具助手添加

2025-12-25 18:04:10 +08:00

4.7 KiB

Raw Blame History

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%);

动画效果

粒子背景 - 50个动态浮动粒子
消息滑入 - 0.3s ease-out 动画
打字指示器 - 3个点的波浪动画
按钮发光 - hover时的阴影和位移效果
脉冲动画 - 2s循环的扩散效果
语音波形 - 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

🎯 使用说明

基础对话

在底部输入框输入消息
点击发送按钮或按Enter键
等待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）
支持文件上传
支持语音输入
支持多会话管理
支持消息历史记录
支持用户认证

📄 许可

内部测试工具，仅供开发和测试使用。

🤝 贡献

如需修改或扩展功能，请遵循以下原则：

保持与原型设计的一致性
添加注释说明修改内容
测试所有浏览器兼容性
更新本README文档

4.7 KiB Raw Blame History Unescape Escape