# 🚀 快速启动指南

## 一键启动

### 方法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客户端！** 🎉