Initial commit
This commit is contained in:
MaDaLei
commit
1b14e251f7
300
产品设计文档.md
Normal file
300
产品设计文档.md
Normal file
@ -0,0 +1,300 @@
|
|||||||
|
# 宠伴生活馆 - 产品设计文档
|
||||||
|
|
||||||
|
> 版本：v1.5
|
||||||
|
> 日期：2026-04-01
|
||||||
|
> 状态：产品设计确认中
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 一、产品定位
|
||||||
|
|
||||||
|
**平台定位：** 宠物店服务管理 SaaS 平台，支持多家宠物店入驻
|
||||||
|
|
||||||
|
**目标用户（v1）：**
|
||||||
|
- 宠物店老板 / 员工（管理预约 + 填写报告）
|
||||||
|
- 宠主通过微信查看服务报告（v2）
|
||||||
|
|
||||||
|
**登录方式：**
|
||||||
|
- 微信授权登录（老板/员工主要登录方式）
|
||||||
|
- 手机号+短信验证码（备用）
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 二、核心功能闭环（v1）
|
||||||
|
|
||||||
|
```
|
||||||
|
预约创建（老板/员工）→ 待确认 → 开始服务（谁点谁就是技师）→ 进行中 → 填写报告 → 发送报告 → 已完成
|
||||||
|
↘ 已取消 → 归到已完成Tab
|
||||||
|
```
|
||||||
|
|
||||||
|
**报告分享流程（v1 重点）：**
|
||||||
|
```
|
||||||
|
填写报告（照片+备注）→ 点击「发送报告」→ 选择发送方式
|
||||||
|
├── 复制链接（发给宠主微信）
|
||||||
|
└── 下载二维码（现场扫码）
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 三、数据模型
|
||||||
|
|
||||||
|
### t_store（店铺表）
|
||||||
|
| 字段 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| id | BIGINT | 主键 |
|
||||||
|
| name | VARCHAR | 店铺名称 |
|
||||||
|
| logo | VARCHAR | 店铺Logo |
|
||||||
|
| phone | VARCHAR | 联系电话 |
|
||||||
|
| address | VARCHAR | 地址 |
|
||||||
|
| intro | TEXT | 简介 |
|
||||||
|
| owner_id | BIGINT | 老板用户ID |
|
||||||
|
| invite_code | VARCHAR | 员工邀请码（8位） |
|
||||||
|
| create_time | DATETIME | 创建时间 |
|
||||||
|
| update_time | DATETIME | 更新时间 |
|
||||||
|
|
||||||
|
### t_user（用户表）
|
||||||
|
| 字段 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| id | BIGINT | 主键 |
|
||||||
|
| username | VARCHAR | 用户名 |
|
||||||
|
| password | VARCHAR | 密码 |
|
||||||
|
| name | VARCHAR | 姓名/技师名 |
|
||||||
|
| phone | VARCHAR | 手机号 |
|
||||||
|
| avatar | VARCHAR | 头像 |
|
||||||
|
| store_id | BIGINT | 所属店铺 |
|
||||||
|
| role | VARCHAR | boss / staff |
|
||||||
|
| create_time | DATETIME | 创建时间 |
|
||||||
|
| update_time | DATETIME | 更新时间 |
|
||||||
|
|
||||||
|
### t_appointment（预约表）
|
||||||
|
| 字段 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| id | BIGINT | 主键 |
|
||||||
|
| pet_name | VARCHAR | 宠物名称 |
|
||||||
|
| pet_type | VARCHAR | 宠物类型（猫/狗/其他） |
|
||||||
|
| service_type | VARCHAR | 服务类型 |
|
||||||
|
| appointment_time | DATETIME | 预约时间（无限制，随便选） |
|
||||||
|
| status | VARCHAR | new / doing / done / cancel |
|
||||||
|
| store_id | BIGINT | 店铺ID |
|
||||||
|
| user_id | BIGINT | 创建人ID（谁建的） |
|
||||||
|
| assigned_user_id | BIGINT | 技师ID（开始服务时赋值） |
|
||||||
|
| remark | TEXT | 备注 |
|
||||||
|
| create_time | DATETIME | 创建时间 |
|
||||||
|
| update_time | DATETIME | 更新时间 |
|
||||||
|
|
||||||
|
### t_report（报告表）
|
||||||
|
| 字段 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| id | BIGINT | 主键 |
|
||||||
|
| appointment_id | BIGINT | 预约ID |
|
||||||
|
| before_photo | VARCHAR | 服务前照片URL |
|
||||||
|
| after_photo | VARCHAR | 服务后照片URL |
|
||||||
|
| remark | TEXT | 备注 |
|
||||||
|
| user_id | BIGINT | 技师ID |
|
||||||
|
| store_id | BIGINT | 店铺ID |
|
||||||
|
| report_token | VARCHAR | 报告访问令牌（UUID，永久有效） |
|
||||||
|
| pet_name | VARCHAR | 宠物名（冗余） |
|
||||||
|
| service_type | VARCHAR | 服务类型（冗余） |
|
||||||
|
| appointment_time | DATETIME | 服务时间（冗余） |
|
||||||
|
| staff_name | VARCHAR | 技师名（冗余） |
|
||||||
|
| create_time | DATETIME | 创建时间 |
|
||||||
|
| update_time | DATETIME | 更新时间 |
|
||||||
|
|
||||||
|
### t_service_type（服务类型表）
|
||||||
|
| 字段 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| id | BIGINT | 主键 |
|
||||||
|
| store_id | BIGINT | 店铺ID（NULL表示系统默认） |
|
||||||
|
| name | VARCHAR | 服务名称 |
|
||||||
|
| create_time | DATETIME | 创建时间 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 四、角色权限
|
||||||
|
|
||||||
|
| 功能 | 老板（boss） | 员工（staff） |
|
||||||
|
|------|-------------|---------------|
|
||||||
|
| 预约列表 | ✅ | ✅ |
|
||||||
|
| 新建预约 | ✅ | ✅ |
|
||||||
|
| 开始服务/填写报告 | ✅ | ✅ |
|
||||||
|
| 发送报告 | ✅ | ✅ |
|
||||||
|
| 员工管理 | ✅ | ❌ |
|
||||||
|
| 邀请码 | ✅ | ❌ |
|
||||||
|
| 店铺设置 | ✅ | ❌ |
|
||||||
|
| 服务类型管理 | ✅ | ❌ |
|
||||||
|
|
||||||
|
### 页面入口
|
||||||
|
- **index.html（统一入口）**：老板/员工同一套页面，通过「我的」页面区分功能
|
||||||
|
- 老板「我的」：员工管理 / 服务类型 / 店铺设置 / 我的订单
|
||||||
|
- 员工「我的」：我的订单
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 五、核心功能详解
|
||||||
|
|
||||||
|
### 5.1 登录体系
|
||||||
|
|
||||||
|
**微信授权登录**（主）
|
||||||
|
- 老板/员工均可使用微信授权登录
|
||||||
|
|
||||||
|
**手机号+短信验证码登录**（备用）
|
||||||
|
|
||||||
|
**员工入职流程：**
|
||||||
|
- 老板后台生成邀请码 → 员工点链接注册 → 自动关联店铺
|
||||||
|
- 老板后台直接新增员工 → 系统生成随机6位密码 → 员工用手机号+密码登录
|
||||||
|
|
||||||
|
### 5.2 预约管理
|
||||||
|
|
||||||
|
**创建预约：**
|
||||||
|
- 老板/员工均可手动创建
|
||||||
|
- 字段：宠物名字、宠物类型（猫/狗/其他）、服务类型、预约时间、备注
|
||||||
|
- 建档人 = 当前登录用户
|
||||||
|
- 预约时间无限制，随便选
|
||||||
|
|
||||||
|
**服务类型：**
|
||||||
|
- 系统默认：洗澡、美容、洗澡+美容、剪指甲、驱虫
|
||||||
|
- 老板可在默认基础上新增/编辑/删除自定义服务类型
|
||||||
|
- 员工只能使用，不能管理
|
||||||
|
|
||||||
|
**预约状态流转：**
|
||||||
|
- new（待确认）→ doing（进行中）→ done（已完成）
|
||||||
|
- new（待确认）→ cancel（已取消）→ 归到「已完成」Tab显示
|
||||||
|
- doing（进行中）→ done（已完成）
|
||||||
|
|
||||||
|
**开始服务：**
|
||||||
|
- 点击「开始服务」→ 状态变为「进行中」
|
||||||
|
- assigned_user_id = 当前登录用户（谁点谁服务）
|
||||||
|
|
||||||
|
### 5.3 服务报告
|
||||||
|
|
||||||
|
**填写报告（进行中状态可操作）：**
|
||||||
|
- 服务前照片（必填）
|
||||||
|
- 服务后照片（必填）
|
||||||
|
- 备注（选填）
|
||||||
|
- 技师 = 开始服务时分配的用户
|
||||||
|
- 提交后锁死，不可再修改
|
||||||
|
- 一约一份报告
|
||||||
|
|
||||||
|
### 5.4 发送报告（v1 核心功能）
|
||||||
|
|
||||||
|
**操作入口：** 报告填写完成后，点击「发送报告」按钮
|
||||||
|
|
||||||
|
**发送方式：**
|
||||||
|
1. **复制链接** — 生成报告链接，一键复制到剪贴板，可发给宠主微信
|
||||||
|
2. **下载二维码** — 生成报告二维码图片，保存到相册，可打印或现场扫码
|
||||||
|
|
||||||
|
**报告链接：**
|
||||||
|
- URL：`https://域名/report.html?token=xxx`
|
||||||
|
- Token = UUID，永久有效
|
||||||
|
- 宠主打开无需登录（v1 免登录）
|
||||||
|
|
||||||
|
**报告二维码：**
|
||||||
|
- 扫码直接打开报告页
|
||||||
|
- 打印出来可贴在墙上/前台，方便宠主扫码
|
||||||
|
|
||||||
|
### 5.5 H5 报告页
|
||||||
|
|
||||||
|
**访问方式：** 链接或二维码扫码，免登录
|
||||||
|
|
||||||
|
**报告页内容：**
|
||||||
|
- 品牌头部：店铺 Logo + 店铺名称 + 联系电话 + 地址
|
||||||
|
- 服务信息卡片：宠物名、服务项目、服务时间、技师名
|
||||||
|
- 前后对比照片（并排展示）
|
||||||
|
- 技师备注
|
||||||
|
- 底部品牌信息（即使链接被转发，店铺信息持续透出）
|
||||||
|
|
||||||
|
**分享能力：**
|
||||||
|
- 长按图片可保存
|
||||||
|
- 链接可复制转发微信
|
||||||
|
|
||||||
|
### 5.6 老板后台（合并到「我的」页面）
|
||||||
|
|
||||||
|
**员工管理：**
|
||||||
|
- 员工邀请码（复制分享）
|
||||||
|
- 新增员工（姓名+手机号，系统生成密码）
|
||||||
|
- 删除员工
|
||||||
|
|
||||||
|
**服务类型：**
|
||||||
|
- 新增服务类型
|
||||||
|
- 删除自定义服务类型（系统默认不可删）
|
||||||
|
|
||||||
|
**店铺设置：**
|
||||||
|
- 店铺名称
|
||||||
|
- 店铺Logo
|
||||||
|
- 联系电话
|
||||||
|
- 地址
|
||||||
|
- 简介
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 六、技术方案
|
||||||
|
|
||||||
|
| 端 | 技术 |
|
||||||
|
|----|------|
|
||||||
|
| APP前端 | uniapp + Vue3 |
|
||||||
|
| H5报告页 | Vue3（独立部署） |
|
||||||
|
| 后端 | Spring Boot 3.2 + JPA |
|
||||||
|
| 数据库 | MySQL |
|
||||||
|
| 图片存储 | 本地存储（后续可平滑切换OSS） |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 七、开发进度
|
||||||
|
|
||||||
|
| 优先级 | 功能 | 状态 |
|
||||||
|
|--------|------|------|
|
||||||
|
| P0 | 老板入驻/登录 | ✅ |
|
||||||
|
| P0 | 员工邀请码注册 | ✅ |
|
||||||
|
| P0 | 员工登录（微信+验证码） | ✅ |
|
||||||
|
| P0 | 预约列表 | ✅ |
|
||||||
|
| P0 | 预约创建 | ✅ |
|
||||||
|
| P0 | 开始服务（分配技师） | ✅ |
|
||||||
|
| P0 | 报告填写 | ✅ |
|
||||||
|
| P0 | 发送报告（复制链接+下载二维码） | 🔨 本次 |
|
||||||
|
| P0 | H5报告页（品牌信息强化） | 🔨 本次 |
|
||||||
|
| P0 | H5报告页（链接+二维码） | ✅ |
|
||||||
|
| P0 | 老板后台（员工管理+邀请码） | ✅ 已合并到index.html |
|
||||||
|
| P0 | 老板后台（预约概览） | ✅ 已合并到index.html |
|
||||||
|
| P1 | 服务类型管理（老板后台） | ✅ |
|
||||||
|
| P1 | 店铺设置（老板后台） | ✅ |
|
||||||
|
| P1 | 本地文件上传（替代base64） | ✅ |
|
||||||
|
| P2 | 宠主端（历史报告汇总） | ⏳ v2 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 八、数据库变更
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- 预约表新增技师字段
|
||||||
|
ALTER TABLE t_appointment ADD COLUMN assigned_user_id BIGINT COMMENT '技师ID';
|
||||||
|
|
||||||
|
-- 店铺表新增简介字段
|
||||||
|
ALTER TABLE t_store ADD COLUMN intro TEXT COMMENT '简介';
|
||||||
|
|
||||||
|
-- 服务类型表
|
||||||
|
CREATE TABLE t_service_type (
|
||||||
|
id BIGINT PRIMARY KEY AUTO_INCREMENT,
|
||||||
|
store_id BIGINT COMMENT '店铺ID，NULL表示系统默认',
|
||||||
|
name VARCHAR(50) NOT NULL,
|
||||||
|
create_time DATETIME
|
||||||
|
);
|
||||||
|
|
||||||
|
-- 系统默认服务类型
|
||||||
|
INSERT INTO t_service_type (store_id, name, create_time) VALUES
|
||||||
|
(NULL, '洗澡', NOW()),
|
||||||
|
(NULL, '美容', NOW()),
|
||||||
|
(NULL, '洗澡+美容', NOW()),
|
||||||
|
(NULL, '剪指甲', NOW()),
|
||||||
|
(NULL, '驱虫', NOW());
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 九、待确认/后续事项
|
||||||
|
|
||||||
|
- [ ] 宠伴生活馆 Logo 素材
|
||||||
|
- [ ] 图片存储方案（本地 / OSS）
|
||||||
|
- [ ] 短信验证码服务商接入
|
||||||
|
- [ ] 微信授权登录 AppID/AppSecret
|
||||||
|
- [ ] H5页面域名及部署方案
|
||||||
|
- [ ] 宠主端（v2）：历史报告汇总、宠主登录
|
||||||
107
前端UI规范.md
Normal file
107
前端UI规范.md
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
# 前端 UI 规范（petstore）
|
||||||
|
|
||||||
|
## 目标
|
||||||
|
|
||||||
|
- 统一视觉风格，避免页面“各写各的”。
|
||||||
|
- 保证移动端可读性和可点击性。
|
||||||
|
- 降低后续新增页面的设计与维护成本。
|
||||||
|
|
||||||
|
## 设计基线
|
||||||
|
|
||||||
|
- 主色：`#16a34a`
|
||||||
|
- 页面背景：`var(--pet-bg)`
|
||||||
|
- 主文案：`var(--pet-text)`
|
||||||
|
- 次级文案：`var(--pet-subtext)`
|
||||||
|
- 分割/边框：`var(--pet-border)`
|
||||||
|
- 卡片阴影：`var(--pet-card-shadow)`
|
||||||
|
|
||||||
|
以上变量统一在 `src/assets/global.css` 维护，页面中不要写死同类颜色。
|
||||||
|
|
||||||
|
## 字体与层级
|
||||||
|
|
||||||
|
- 页面标题：18px / 700（用 `.text-title`）
|
||||||
|
- 正文：14px / 400~500（用 `.text-body`）
|
||||||
|
- 说明/辅助：12px / 400（用 `.text-sub`）
|
||||||
|
- 避免 11px 及以下文本，移动端可读性较差。
|
||||||
|
|
||||||
|
## 间距规范
|
||||||
|
|
||||||
|
- 统一间距标尺：8 / 12 / 16 / 24（优先使用全局变量）
|
||||||
|
- 页面左右基础边距：16px（`.page-section`）
|
||||||
|
- 模块间距：12px（`.section-gap`）
|
||||||
|
- 卡片圆角：12~18px
|
||||||
|
- 表单项垂直间距：8~12px
|
||||||
|
- 底部保留区：至少 `120rpx`（避免被底栏遮挡）
|
||||||
|
|
||||||
|
推荐使用：
|
||||||
|
|
||||||
|
- 页面容器：`.page-shell`
|
||||||
|
- 模块容器：`.page-section`
|
||||||
|
- 模块间隔：`.section-gap`
|
||||||
|
- 表单项包装：`.form-field-wrap`
|
||||||
|
- 模块标题：`.module-title`
|
||||||
|
|
||||||
|
## 组件规范
|
||||||
|
|
||||||
|
### 顶部导航
|
||||||
|
|
||||||
|
- 使用绿色渐变背景 + 轻阴影（`.nav-gradient`）。
|
||||||
|
- 标题使用 18/700。
|
||||||
|
- 左侧返回统一使用 `AppIcon(back)`。
|
||||||
|
- 返回按钮触达区保持足够（建议 40px 以上），并使用统一按压反馈（`.nav-back:active`）。
|
||||||
|
|
||||||
|
### 按钮
|
||||||
|
|
||||||
|
- 主按钮：绿色渐变，白字，12px 圆角，高度 44px。
|
||||||
|
- 次按钮：浅底 + 边框，颜色低于主按钮一个层级。
|
||||||
|
- 同区域最多一个高强调按钮，避免视觉噪音。
|
||||||
|
|
||||||
|
### 输入框
|
||||||
|
|
||||||
|
- 使用统一 `.van-field` 样式。
|
||||||
|
- 聚焦态有明显边框和光晕反馈。
|
||||||
|
- 文本域最小高度 84~96px，行高 1.45+。
|
||||||
|
|
||||||
|
### 卡片
|
||||||
|
|
||||||
|
- 白底 + 细边框 + 轻阴影。
|
||||||
|
- 不要叠加过多投影层。
|
||||||
|
- 卡片内信息按“标题 > 关键值 > 说明”组织。
|
||||||
|
- 卡片点击态统一轻微下沉 + 透明度变化，避免“有的会动有的不会动”。
|
||||||
|
|
||||||
|
### 图标
|
||||||
|
|
||||||
|
- 全站优先使用统一 `AppIcon`，避免 emoji 与图标混用。
|
||||||
|
- 新增图标时先补充到 `src/components/AppIcon.vue`，再在页面内复用。
|
||||||
|
- 空态/占位图（如图片占位、头像角标）也使用同一套图标风格（如 `camera`）。
|
||||||
|
|
||||||
|
### 空状态
|
||||||
|
|
||||||
|
- 用统一 `.empty`，文案简短明确。
|
||||||
|
- 避免裸文本直接贴在背景上。
|
||||||
|
|
||||||
|
## 交互与可用性
|
||||||
|
|
||||||
|
- 可点击区域建议不小于 40x40。
|
||||||
|
- 反馈闭环完整：点击后要有 loading / toast / 状态变化。
|
||||||
|
- 关键操作（删除、取消）保持二次确认。
|
||||||
|
- 统一微交互：按钮、卡片、列表项按压反馈节奏一致（约 160ms）。
|
||||||
|
|
||||||
|
## 禁止项
|
||||||
|
|
||||||
|
- 禁止在模板里堆叠大量内联 `style`。
|
||||||
|
- 禁止同一功能页使用多个不同风格按钮。
|
||||||
|
- 禁止页面之间同类元素样式明显不一致（例如顶部导航、卡片、输入框）。
|
||||||
|
- 禁止在业务页面重复定义全局已有的间距/标题样式（如 `.module-title`、`.form-field-wrap`）。
|
||||||
|
- 禁止新增 emoji 图标作为主视觉元素。
|
||||||
|
|
||||||
|
## 新页面接入清单
|
||||||
|
|
||||||
|
- 引入并复用全局样式，不重复造轮子。
|
||||||
|
- 先搭框架：`page-shell -> nav -> sections -> bottom safe area`。
|
||||||
|
- 自检 4 项：
|
||||||
|
- 视觉是否与已有页一致
|
||||||
|
- 小屏是否可读
|
||||||
|
- 点击区域是否足够
|
||||||
|
- 是否存在硬编码颜色/间距
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user