x11_template_vue

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

一套基于 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）

后端启动

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 后再执行构建或预览。

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；
• 为模板引入版本管理、审批流；
• 增加语音合成调用，直接输出音频；
• 增加权限体系，为不同运营账号分配模板范围。