工具助手添加

web_client/QUICKSTART.md

@@ -0,0 +1,140 @@
+# 🚀 快速启动指南
+
+## 一键启动
+
+### 方法1：使用启动脚本（推荐）
+
+```bash
+cd test-client/web_client
+./start.sh
+```
+
+### 方法2：手动启动
+
+```bash
+cd test-client/web_client
+
+# 安装依赖（首次运行）
+pip3 install -r requirements.txt
+
+# 启动服务
+python3 app.py
+```
+
+### 方法3：指定端口启动
+
+```bash
+# 如果5000端口被占用，可以指定其他端口
+PORT=5001 python3 app.py
+```
+
+## 访问应用
+
+启动成功后，在浏览器中打开：
+
+- **默认地址**: http://localhost:5000
+- **自定义端口**: http://localhost:5001 （如果使用了PORT=5001）
+
+## 🎨 界面预览
+
+启动后你将看到：
+
+### 左侧面板
+- 👤 **用户画像** - 显示用户信息和个性化推荐
+- ✅ **待办事项** - 任务管理功能
+- 🔔 **提醒设置** - 定时提醒展示
+
+### 右侧主区域
+- 🎨 **主题切换** - 4种配色方案（深空黑、极光蓝、霓虹紫、科技绿）
+- 💬 **对话区域** - AI助手聊天界面
+- ⚡ **快捷回复** - 常用问题快速输入
+- 🎤 **语音输入** - 语音波形动画效果
+
+## 💡 使用技巧
+
+### 发送消息
+1. 在底部输入框输入文字
+2. 按 `Enter` 键或点击发送按钮
+3. 等待AI回复（会显示打字动画）
+
+### 快捷回复
+点击顶部的快捷回复按钮，自动填充常用问题：
+- 💡 今日天气如何？
+- 📅 明天的会议安排
+- ✅ 帮我制定工作计划
+
+### 切换主题
+点击顶部导航栏的主题按钮：
+- **深空黑** - 默认深色主题
+- **极光蓝** - 蓝色科技风
+- **霓虹紫** - 紫色梦幻风
+- **科技绿** - 绿色矩阵风
+
+### 管理待办
+在左侧面板的待办事项区域：
+1. 输入新任务
+2. 按 `Enter` 或点击 `+` 按钮添加
+3. 勾选复选框标记完成
+
+## 🔧 常见问题
+
+### Q: 端口被占用怎么办？
+A: 使用环境变量指定其他端口：
+```bash
+PORT=5001 python3 app.py
+```
+
+### Q: 样式显示不正常？
+A: 检查以下几点：
+1. 确保 `static/css/style.css` 文件存在
+2. 清除浏览器缓存后刷新
+3. 检查浏览器控制台是否有错误
+
+### Q: 无法发送消息？
+A: 检查：
+1. 浏览器控制台的Network标签查看请求
+2. 确认后端API服务是否启动
+3. 检查CORS配置
+
+### Q: 如何连接真实的AI助手API？
+A: 编辑 `app.py`，确保以下导入正确：
+```python
+from api_client import AIAssistantClient
+from config import APPLICATIONS, AI_ASSISTANT_CONFIG
+```
+
+## 📊 技术栈
+
+- **后端**: Flask 2.3+
+- **前端**: Tailwind CSS + Vanilla JS
+- **字体**: Pacifico + Inter
+- **图标**: Font Awesome 6.4.0
+
+## 🎯 下一步
+
+1. ✅ 启动应用
+2. ✅ 体验界面效果
+3. ✅ 测试对话功能
+4. 🔄 集成真实API
+5. 🚀 部署到生产环境
+
+## 📝 开发模式
+
+当前运行在开发模式，支持：
+- ✅ 热重载（修改代码自动重启）
+- ✅ 详细错误信息
+- ✅ 调试工具
+
+**注意**: 生产环境请使用 WSGI 服务器（如 Gunicorn）
+
+## 🆘 获取帮助
+
+如遇问题，请检查：
+1. 终端输出的错误信息
+2. 浏览器控制台的错误
+3. Flask日志输出
+
+---
+
+**享受使用AI助手Web客户端！** 🎉
+