小美管家产品系统

美容美甲、头疗养生等线下美业小店普遍依赖微信私聊和纸质本子管理预约，存在排期混乱、撞单漏单、次卡储值靠人工记账、老客复购缺少提醒等问题。本项目立项旨在为个体店主提供一款轻量化的门店经营工具「小美管家」，让顾客可以像逛小程序一样自助浏览项目、在线选时段预约；同时让店主用手机即可掌握当日预约、营收数据与会员卡耗情况，降低小微美业商家的数字化门槛，提升到店率与复购率。

项目分为 C 端（顾客）与 B 端（店主）两大模块，共 7 个功能页面：1、C 端店铺主页：展示门店品牌信息、评分、服务人次与复购率，陈列美甲、小气泡清洁、头皮 SPA、肩颈理疗等服务项目卡片，含价格、时长、技师与余位提示；
2、C 端在线预约：选择服务项目与可约时段（自动置灰已约满时段），提交后展示预约成功页，支持随时改期；
3、C 端个人中心：查看会员等级、储值卡余额、次卡剩余次数、优惠券与积分，以及个人预约记录；
4、B 端生意日记：以日报形式呈现当日营收、环比变化、到店人数、新客数、明日预约量，并提供项目热度排行和经营小贴士（如次卡即将用完的续卡提醒）；
5、B 端预约日历：按时间轴查看全天预约明细（客人、项目、备注、次卡划扣进度），标注空闲时段方便加单；
6、B 端会员管理：会员列表展示等级、储值余额、次卡进度与最近到店动态，次卡告急自动预警；
7、登录鉴权：手机验证码登录，B 端页面通过路由守卫强制登录访问。

项目基于 Vue 3（Composition API）+ Vite 6 构建，采用移动端 H5 单页应用（SPA）架构：1、路由层：使用 Vue Router 4 的 Hash 模式，通过路由 meta 字段区分 C 端 / B 端页面并动态设置页面标题，配合全局前置守卫（beforeEach）实现 B 端页面的登录鉴权拦截，未登录自动重定向到登录页并携带回跳地址；
2、状态管理：基于 Vue 3 reactive 实现轻量响应式全局 Store，集中管理用户登录态、门店信息、服务项目、预约数据、会员数据与经营日报数据，预约数据在 B 端日历与 C 端「我的」页面间共享复用，当前为 mock 数据，接口层预留了替换为后端 API 的扩展空间；
3、视图层：按业务域组织组件目录（views/c 顾客端、views/b 店主端），页面采用卡片式设计与玻璃拟态（glassmorphism）风格，预约时段选择支持约满置灰、成功态切换等交互；
4、工程化：使用 Vite 提供开发热更新与生产构建，@vitejs/plugin-vue 处理单文件组件（SFC），项目结构清晰、依赖精简（仅 vue + vue-router），便于后续接入真实后端与小程序化改造。