美业小程序 (趣美丽) 技术文档
概览
趣美丽（MP-Beauty）是一刻工坊专为美业店长打造的内容生产小程序。通过手机端即可完成从拍摄到成片的全流程内容创作。
核心特性
- 📱 移动优先: 专为微信小程序设计，随时随地创作
- 🎬 场景化拍摄: 5场景探店流水线，结构化内容生产
- 🎤 智能提词器: 实时口播提示，拍摄更专业
- 🤖 AI 成片: 自动剪辑、配音、字幕，一键生成成品
- 📊 数据同步: 跨端协同，Web端编排、移动端执行
文档导航
| 文档 | 说明 | 更新时间 |
|---|---|---|
| 架构设计 | 小程序技术架构与数据流 | 2026-01-03 |
| 场景拍摄 | 场景拍摄功能详解 | 2026-01-03 |
| 代码优化 | 代码瘦身与性能优化 | 2026-01-03 |
| 更新日志 | 版本更新记录 | 2026-01-03 |
快速开始
环境准备
bash
# 进入小程序目录
cd apps/mp-beauty
# 安装依赖
npm install
# 启动开发服务器
npm run dev:mp-weixin项目结构
apps/mp-beauty/
├── src/
│ ├── pages/ # 页面
│ │ ├── task-detail/ # 场景拍摄列表页
│ │ ├── beauty-camera/ # 拍摄页面
│ │ └── ...
│ ├── components/ # 组件
│ │ ├── scene-review-popup.vue # 场景回顾弹窗
│ │ ├── script-edit-modal.vue # 口播文案编辑
│ │ └── ...
│ ├── beauty-components/ # 美业专用组件
│ ├── utils/ # 工具函数
│ └── config/ # 配置文件
├── docs/ # 文档
└── dist/ # 编译输出核心模块
1. 场景拍摄流程
mermaid
graph LR
A[选择流水线] --> B[场景拍摄列表]
B --> C[拍摄/选择素材]
C --> D[场景回顾]
D --> E{满意?}
E -->|是| F[继续下一场景]
E -->|否| C
F --> G[提交生成]2. 数据同步架构
小程序与后端通过 RESTful API 和 WebSocket 实现双向同步：
- 上传素材: HTTP POST → 后端存储 → 返回 URL
- 生成任务: HTTP POST → 任务队列 → WebSocket 推送进度
- 结果获取: HTTP GET → 缓存机制 → 展示成片
技术栈
| 层级 | 技术 |
|---|---|
| 框架 | uni-app (Vue 3) |
| 状态管理 | Composition API + ref/reactive |
| 样式 | SCSS |
| 构建 | Vite |
| 部署 | 微信开发者工具 |
最近更新
2026-01-03 场景回顾优化 + 代码瘦身
- ✅ 合并"预览"和"继续拍"为统一入口"回顾本场景"
- ✅ 新增场景回顾全屏弹窗，支持预览、编辑文案、重拍
- ✅ 删除 890 行未使用代码（19% 代码减少）
- ✅ 清理 40+ 个未使用样式类
- ✅ 优化性能，提升维护性
详见：代码优化记录
相关文档
团队协作
贡献指南
- 遵循 命名规范
- 提交前运行
npm run lint - 新功能需添加对应文档
- 代码评审通过后合并
问题反馈
- Bug 报告: 在对应功能模块的
.md文件中记录 - 功能需求: 提交到产品看板
- 技术讨论: 在架构文档中记录决策
📱 美业小程序 - 让内容生产像发朋友圈一样简单