From 1b14e251f707c6c98aeccf5c0399fbb5ce9ba7e5 Mon Sep 17 00:00:00 2001 From: MaDaLei Date: Sun, 12 Apr 2026 23:24:40 +0800 Subject: [PATCH] Initial commit --- 产品设计文档.md | 300 ++++++++++++++++++++++++++++++++++++++++++++++++ 前端UI规范.md | 107 +++++++++++++++++ 2 files changed, 407 insertions(+) create mode 100644 产品设计文档.md create mode 100644 前端UI规范.md diff --git a/产品设计文档.md b/产品设计文档.md new file mode 100644 index 0000000..c4f3aff --- /dev/null +++ b/产品设计文档.md @@ -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）：历史报告汇总、宠主登录 diff --git a/前端UI规范.md b/前端UI规范.md new file mode 100644 index 0000000..3fd5995 --- /dev/null +++ b/前端UI规范.md @@ -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 项： + - 视觉是否与已有页一致 + - 小屏是否可读 + - 点击区域是否足够 + - 是否存在硬编码颜色/间距 +