## 洗衣机语音播报模板可视化运营系统

一套基于 FastAPI + Vue 的端到端运营系统，支持：

- 持久化存储播报模板元数据与 Jinja2 模板正文；
- 在 WebUI 中分组管理模板、配置输入变量、写模板正文、实时预览；
- 通过统一接口渲染模板，后端只需传入参数即可获取播报语；
- 提供调用方式、变量说明，方便运营/研发协同。

### 目录结构

```
backend/
  app/                FastAPI 应用（模板 API、渲染服务）
  data/templates.json 默认模板库
  requirements.txt    Python 依赖
frontend/             Vue 3 + Vite WebUI
main.py               uvicorn 入口（指向 backend.app.main:app）
```

### 后端启动

```bash
cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
uvicorn main:app --reload  # 或 uvicorn backend.app.main:app --reload
```

接口示例：

- `GET /api/templates`：获取模板列表；
- `POST /api/templates`：创建模板；
- `POST /api/templates/render`：根据 template_id + 参数生成播报；
- `POST /api/templates/preview`：任意 Jinja 正文快速预览。

### 前端启动

当前 Vite 版本需要 **Node.js ≥ 20.19**。在 Node 18 环境下 `npm run build` 会失败（`crypto.hash` 报错），请升级 Node 后再执行构建或预览。

```bash
cd frontend
npm install
npm run dev   # 默认 http://localhost:5173，已允许跨域访问 FastAPI
npm run build # 需要 Node >=20.19
```

### 典型前后端协作流程

1. 运营在 WebUI 中创建/编辑模板，配置变量与默认值；
2. 点击“本地预览”即时查看模板渲染效果；
3. 保存模板后，后端/IoT 只需调用 `POST /api/templates/render` 并传入参数列表即可生成播报语；
4. 若需定制调用逻辑，可在“调用方式”字段中为研发团队写下示例。

### 后续可扩展方向

- 接入数据库或对象存储替代 JSON；
- 为模板引入版本管理、审批流；
- 增加语音合成调用，直接输出音频；
- 增加权限体系，为不同运营账号分配模板范围。