参考图描述： 浅紫/米色渐变背景，顶部头像左对齐 + "Hi~名前" 大字 + 邮箱账号小字；「我的宠物」横向滑动卡片区（圆角白卡，宠物图+名称+品种年龄体重颜色）；深灰圆角 Banner「个人资料完成20%」+ 橙色「去完善」胶囊按钮；白色圆角卡片菜单列表（个人信息/预约信息/账号管理/联系我们，前两项带红点）；底部四格 Tab 栏（主页/日历/拍照/我的，「我的」橙色激活）。
读取现有文件：
现在按参考图完全重写 profile-page.tsx，保留刚才加的会员等级胶囊 + 会员中心菜单项，移除会员卡片和快捷统计；同时更新 booking-shell.tsx 的 TabBar 样式和背景色以匹配参考图。
现在更新 booking-shell.tsx，将 TabBar 样式改成参考图的圆角胶囊样式（白色背景、底部居中浮动），并补齐四个 Tab 项（主页/日历/拍照/我的）：
profile-page.tsx 完全按参考图重写：渐变背景（浅紫→米色）、头像+「Hi~名前」+账号行、横向滑动宠物卡片区、深灰 Banner、白色圆角菜单列表，并在姓名下保留会员等级胶囊、菜单末尾保留「会员中心」入口，移除了原有的会员卡片和统计格子。booking-shell.tsx 将 TabBar 更新为参考图的圆角胶囊悬浮样式——激活项背景白色+文字展开，非激活项仅显示图标，整体毛玻璃效果；同时 Tab 项从 3 个扩展为主页/日历/拍照/我的 4 个。
图片描述： 结账页为左右两栏布局——左栏包含支付金额大字展示、顾客信息（姓名+电话+订单号）、服务项目表格（项目/操作员/指名/单价/数量/小计）、消费金额汇总区（含折扣输入行）、割引后合计、支付备考；右栏为付款方式选择（Cash/Square/IC/信用卡/QR code/交通卡/Paypay）以及取消/确认支付按钮。
结构清晰。需要：1）新建结账页组件；2）在 ShopTopNav 加入「結账页」菜单项；3）在 ShopShell 接入路由。
先新建结账页：
现在更新 ShopTopNav 加入「結账页」菜单项，再更新 ShopShell 接入路由：
完成。ShopTopNav 新增「結账页」菜单项，点击后 ShopShell 渲染 CheckoutPage 组件。结账页严格还原参考图的左右两栏布局，并在此基础上叠加三项增强：顾客姓名旁显示「金卡会員」胶囊标签；消費金額区新增会員割引行（显示折扣金额 + 取消/使用切换按钮，默认自动应用，仅对服务类项目生效）；积分抵现区展示余额、可输入使用积分数量（含上限校验）+ 「全部使用」按钮，所有金额联动实时计算。