fengshao1227/yuezi-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 第一阶段基础框架搭建

Browse Source 
后端 (Laravel 10 + Sanctum):
- RBAC 四层权限系统 (users→roles→permissions→menus)
- 门店隔离中间件 (BelongsToStore Trait + StoreIsolation Middleware)
- 操作日志中间件 (自动记录写操作)
- 权限检查中间件 (CheckPermission)
- 16张数据库表迁移 (系统基础+RBAC+字典+配置)
- 11个 Eloquent Model
- Auth API (登录/登出/用户信息)
- 系统设置模块 CRUD (门店/部门/职务/用户/角色/菜单/权限/字典/日志)
- 45条 RESTful API 路由
- InitSeeder 初始数据 (超管/角色/76权限/31菜单)

前端 (Vue 3 + Element Plus + Vite):
- Axios 请求封装 + Token 注入
- Pinia 状态管理 (user + permission store)
- 动态路由 (服务端菜单→前端路由自动生成)
- 后台布局 (侧边栏+顶栏+主内容区)
- 登录页 + 仪表盘首页
- 系统设置 7 个 CRUD 页面

技术方案文档 (7卷):
- 技术总览/数据库设计/API规范/RBAC设计/模块详设/小程序设计/部署方案
This commit is contained in:
li
2026-03-13 19:52:09 +08:00
commit 11c177a432
144 changed files with 25209 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/06-miniapp-design.md
+505
View File
@@ -0,0 +1,505 @@
# 宫中有喜 — 微客宝小程序设计
## 一、概述
| 项 | 值 |
|---|---|
| 产品名称 | 宫中有喜·微客宝 |
| 类型 | 微信小程序 |
| 框架 | uni-app (Vue 3) |
| 目标用户 | 在住/潜在客户（产妇及家属） |
| 核心功能 | 服务商城、月子餐、共伴成长、月嫂预约、学堂社区 |
## 二、页面架构
### 2.1 Tab 导航（底部 5 Tab）
```
┌──────────────────────────────────┐
│ 微客宝小程序 │
├────┬────┬────┬────┬────┤
│ 首页 │ 服务 │ 成长 │ 学堂 │ 我的 │
└────┴────┴────┴────┴────┘
```
### 2.2 完整页面树
```
pages/
├── index/ # Tab1: 首页
│ └── index.vue # 轮播 + 快捷入口 + 推荐 + 活动
│
├── service/ # Tab2: 服务
│ ├── index.vue # 服务分类列表
│ ├── detail.vue # 服务/套餐详情
│ ├── booking.vue # 预约下单
│ ├── nanny/
│ │ ├── list.vue # 月嫂列表
│ │ ├── detail.vue # 月嫂详情
│ │ └── order.vue # 月嫂预约
│ └── meal/
│ ├── today.vue # 今日餐单
│ ├── week.vue # 本周餐单
│ └── custom.vue # 自选点餐
│
├── growth/ # Tab3: 共伴成长
│ ├── index.vue # 成长首页（宝宝+妈妈）
│ ├── baby/
│ │ ├── records.vue # 宝宝护理记录
│ │ ├── chart.vue # 宝宝数据图表
│ │ └── milestone.vue # 成长里程碑
│ └── mom/
│ ├── records.vue # 妈妈护理记录
│ └── chart.vue # 妈妈健康图表
│
├── study/ # Tab4: 学堂
│ ├── index.vue # 文章列表
│ ├── detail.vue # 文章详情
│ └── community/
│ ├── index.vue # 社区帖子列表
│ ├── detail.vue # 帖子详情
│ └── post.vue # 发帖
│
├── mine/ # Tab5: 我的
│ ├── index.vue # 个人中心首页
│ ├── orders/
│ │ ├── list.vue # 我的订单
│ │ └── detail.vue # 订单详情
│ ├── account.vue # 账户余额/储值卡
│ ├── coupons.vue # 优惠券
│ ├── reviews.vue # 我的评价
│ ├── collections.vue # 我的收藏
│ ├── messages.vue # 消息通知
│ └── settings.vue # 设置
│
├── auth/ # 认证
│ ├── login.vue # 微信授权登录
│ └── bindPhone.vue # 绑定手机号
│
├── pay/ # 支付
│ ├── cashier.vue # 收银台
│ └── result.vue # 支付结果
│
└── common/ # 公共页面
├── webview.vue # 内嵌网页
└── preview.vue # 图片预览
```
---
## 三、核心页面设计
### 3.1 首页 (index)
```
┌────────────────────────────┐
│ [轮播图 Banner] │
├────────────────────────────┤
│ 📋公告栏（滚动） │
├────┬────┬────┬────┤
│ 商城 │ 点餐 │ 月嫂 │ 更多 │ ← 快捷入口
├────┴────┴────┴────┤
│ ⭐ 热门服务推荐 │
│ ┌─────┐ ┌─────┐ │
│ │ 项目1│ │ 项目2│ │
│ └─────┘ └─────┘ │
├────────────────────────────┤
│ 🎉 精彩活动 │
│ ┌──────────────────┐ │
│ │ 活动卡片 │ │
│ └──────────────────┘ │
├────────────────────────────┤
│ 📖 孕妈课堂（文章推荐） │
│ ┌──────────────────┐ │
│ │ 文章卡片 │ │
│ └──────────────────┘ │
└────────────────────────────┘
```
数据来源：
- 轮播图：`GET /client/home/banners`
- 公告：`GET /client/home/notices`
- 推荐服务：`GET /client/home/services`
- 活动：`GET /client/home/activities`
- 文章推荐：`GET /client/articles?recommend=1&limit=3`
### 3.2 共伴成长页
```
┌────────────────────────────┐
│ [宝宝头像] 小明 出生第15天 │
│ 体重: 3.5kg 身长: 50cm │
├────────────────────────────┤
│ Tab: [护理记录] [数据图表] [里程碑] │
├────────────────────────────┤
│ 今日护理记录 │
│ 09:00 喂奶 120ml ✓ │
│ 09:30 换尿布 ✓ │
│ 10:00 体温测量 36.8°C ✓ │
│ 11:00 洗澡 ✓ │
│ 12:00 喂奶 100ml ✓ │
│ ... │
├────────────────────────────┤
│ 切换至 [妈妈] 查看 │
└────────────────────────────┘
```
图表使用 uCharts 或 ECharts 小程序版，展示：
- 体重增长曲线
- 喂奶量趋势
- 睡眠时长统计
- 健康指标折线图
### 3.3 月子餐页
```
┌────────────────────────────┐
│ 📅 3月15日 周五 今日餐单 │
├────────────────────────────┤
│ 🌅 早餐 07:30 │
│ ┌────────────────────┐ │
│ │ [图] 红枣小米粥 │ │
│ │ [图] 蒸蛋 │ │
│ │ [图] 核桃酥 │ │
│ └────────────────────┘ │
│ [👍已送达] [💬反馈] │
├────────────────────────────┤
│ 🍵 早点心 10:00 │
│ ┌────────────────────┐ │
│ │ [图] 银耳莲子汤 │ │
│ └────────────────────┘ │
│ [⏳待送达] │
├────────────────────────────┤
│ 🌞 午餐 12:00 │
│ ┌────────────────────┐ │
│ │ [图] 黄花菜炖鸡 │ │
│ │ [图] 时令蔬菜 │ │
│ │ [图] 乌鸡汤 │ │
│ └────────────────────┘ │
│ [🔄申请换餐] │
├────────────────────────────┤
│ 🍵🌙🌙 午点/晚餐/晚点... │
├────────────────────────────┤
│ [查看本周餐单] [自选点餐] │
└────────────────────────────┘
```
---
## 四、组件设计
### 4.1 公共组件
```
components/
├── NavBar.vue # 自定义导航栏
├── TabBar.vue # 底部导航（自定义实现）
├── EmptyState.vue # 空状态占位
├── LoadMore.vue # 加载更多/到底了
├── PriceTag.vue # 价格显示（¥ 格式化）
├── StarRating.vue # 评分星级
├── CountDown.vue # 倒计时
├── ImageUploader.vue # 图片上传
├── DatePicker.vue # 日期选择
├── OrderCard.vue # 订单卡片
├── ServiceCard.vue # 服务项目卡片
├── ArticleCard.vue # 文章卡片
├── NannyCard.vue # 月嫂卡片
├── MealCard.vue # 菜品卡片
└── StatusTag.vue # 状态标签
```
### 4.2 业务组件
```
components/business/
├── PayButton.vue # 支付按钮（封装微信支付）
├── PhoneAuth.vue # 手机号授权组件
├── ShareCard.vue # 分享卡片生成
├── CouponSelector.vue # 优惠券选择
├── ServiceBooking.vue # 服务预约表单
└── ReviewForm.vue # 评价表单（星级+文字+图片）
```
---
## 五、状态管理 (Pinia)
```
stores/
├── user.js # 用户信息、Token、登录状态
├── cart.js # 购物车/预约车
├── order.js # 订单状态
└── app.js # 全局配置（门店信息、系统参数）
```
### 5.1 用户状态
```javascript
// stores/user.js
export const useUserStore = defineStore('user', {
state: () => ({
token: '',
userInfo: null, // 微信用户信息
customerInfo: null, // 客户业务信息
isLoggedIn: false,
storeId: null, // 所属门店
}),
actions: {
async wechatLogin(code) { ... },
async bindPhone(encryptedData, iv) { ... },
async fetchProfile() { ... },
logout() { ... },
}
})
```
---
## 六、API 封装
```
api/
├── request.js # 请求封装（baseURL, 拦截器, Token注入）
├── auth.js # 登录/注册
├── home.js # 首页数据
├── service.js # 服务/套餐
├── meal.js # 月子餐
├── nanny.js # 月嫂
├── growth.js # 共伴成长
├── order.js # 订单
├── pay.js # 支付
├── article.js # 文章/学堂
├── community.js # 社区
└── user.js # 个人中心
```
### 6.1 请求封装
```javascript
// api/request.js
const BASE_URL = 'https://xxx.com/api/v1/client'
const request = (options) => {
const userStore = useUserStore()
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + options.url,
method: options.method || 'GET',
data: options.data,
header: {
'Authorization': `Bearer ${userStore.token}`,
'Content-Type': 'application/json'
},
success: (res) => {
if (res.data.code === 0) {
resolve(res.data.data)
} else if (res.data.code >= 40100 && res.data.code < 40200) {
// Token 过期，跳转登录
userStore.logout()
uni.navigateTo({ url: '/pages/auth/login' })
reject(res.data)
} else {
uni.showToast({ title: res.data.message, icon: 'none' })
reject(res.data)
}
},
fail: reject
})
})
}
export default request
```
---
## 七、微信能力集成
### 7.1 登录流程
```
用户打开小程序
↓
wx.login() 获取 code
↓
POST /client/auth/wechat-login { code }
↓
后端：code → openid/unionid → 查找/创建用户 → 返回 token
↓
若无手机号 → 弹出绑定手机号
↓
getPhoneNumber → 解密 → 绑定
↓
登录完成，进入首页
```
### 7.2 微信支付流程
```
用户点击支付
↓
POST /client/pay/wechat { order_id, ... }
↓
后端调用微信统一下单 → 返回支付参数
↓
前端 wx.requestPayment(payParams)
↓
支付成功/失败 → 跳转结果页
↓
后端接收微信回调 → 更新订单状态
```
### 7.3 分享
```javascript
// 页面分享配置
onShareAppMessage() {
return {
title: '宫中有喜·月子会所',
path: '/pages/index/index?inviter=' + userId,
imageUrl: '/static/share-cover.png'
}
}
onShareTimeline() {
return {
title: '宫中有喜·专业月子护理',
imageUrl: '/static/share-cover.png'
}
}
```
### 7.4 订阅消息
| 模板 | 触发场景 |
|------|----------|
| 订单状态通知 | 下单成功、支付成功、服务完成 |
| 服务预约提醒 | 预约确认、服务前1小时提醒 |
| 餐单推送 | 每日餐单发布 |
| 护理日报 | 每日护理小结 |
| 活动通知 | 新活动上线 |
### 7.5 其他微信能力
| 能力 | 用途 |
|------|------|
| 地图 | 门店定位、导航 |
| 客服 | 在线客服对话 |
| 图片选择/预览 | 评价上传图片 |
| 扫码 | 扫码签到、扫码支付 |
| 生物认证 | 敏感操作验证 |
---
## 八、UI 设计规范
### 8.1 色彩
| 色彩 | 色值 | 用途 |
|------|------|------|
| 主色 | #E8A87C | 温暖橘粉，品牌色 |
| 辅色 | #D4A574 | 暖棕，辅助强调 |
| 成功 | #67C23A | 完成/送达 |
| 警告 | #E6A23C | 提醒/待处理 |
| 危险 | #F56C6C | 异常/取消 |
| 文字主色 | #303133 | 正文 |
| 文字次色 | #909399 | 辅助说明 |
| 背景色 | #F5F5F5 | 页面背景 |
| 卡片色 | #FFFFFF | 内容卡片 |
### 8.2 字体
| 场景 | 大小 | 权重 |
|------|------|------|
| 大标题 | 36rpx | bold |
| 标题 | 32rpx | bold |
| 正文 | 28rpx | normal |
| 辅助文字 | 24rpx | normal |
| 价格 | 36rpx | bold |
### 8.3 间距
| 场景 | 值 |
|------|-----|
| 页面边距 | 32rpx |
| 卡片间距 | 24rpx |
| 卡片内边距 | 24rpx |
| 元素间距 | 16rpx |
| 紧凑间距 | 8rpx |
### 8.4 圆角
| 场景 | 值 |
|------|-----|
| 按钮 | 40rpx（胶囊） |
| 卡片 | 16rpx |
| 图片 | 12rpx |
| 标签 | 8rpx |
---
## 九、性能优化
| 策略 | 说明 |
|------|------|
| 分包加载 | 主包 < 2MB，子包按 Tab 分 |
| 图片懒加载 | 列表页图片按需加载 |
| 数据缓存 | 首页数据缓存 5 分钟 |
| 骨架屏 | 列表页加载时显示骨架 |
| 防抖节流 | 搜索输入防抖、按钮点击节流 |
| 虚拟列表 | 长列表使用 recycle-view |
### 9.1 分包配置
```json
{
"pages": [
"pages/index/index",
"pages/service/index",
"pages/growth/index",
"pages/study/index",
"pages/mine/index"
],
"subPackages": [
{
"root": "pages/service",
"pages": ["detail", "booking", "nanny/list", "nanny/detail", "nanny/order", "meal/today", "meal/week", "meal/custom"]
},
{
"root": "pages/growth",
"pages": ["baby/records", "baby/chart", "baby/milestone", "mom/records", "mom/chart"]
},
{
"root": "pages/study",
"pages": ["detail", "community/index", "community/detail", "community/post"]
},
{
"root": "pages/mine",
"pages": ["orders/list", "orders/detail", "account", "coupons", "reviews", "collections", "messages", "settings"]
},
{
"root": "pages/auth",
"pages": ["login", "bindPhone"]
},
{
"root": "pages/pay",
"pages": ["cashier", "result"]
}
]
}
```
---
## 十、安全设计
| 措施 | 说明 |
|------|------|
| Token 存储 | uni.setStorageSync 加密存储 |
| 接口签名 | 敏感接口请求签名（timestamp + nonce + sign） |
| HTTPS | 所有接口强制 HTTPS |
| 输入校验 | 前端校验 + 后端校验双重保障 |
| 敏感数据 | 手机号脱敏显示（138****8000） |
| 支付安全 | 服务端生成支付参数，前端不接触密钥 |
| 防重复提交 | 支付/下单按钮加 loading + 接口幂等 |