141 lines
3.1 KiB
Markdown
141 lines
3.1 KiB
Markdown
# 🚀 快速启动指南
|
||
|
||
## 一键启动
|
||
|
||
### 方法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客户端！** 🎉
|
||
|