feat: 支持新版的首页 UI
This commit is contained in:
62
docs/home-welcome-design.md
Normal file
62
docs/home-welcome-design.md
Normal file
@@ -0,0 +1,62 @@
|
||||
# 首页顶部 · 轻盈陪伴
|
||||
|
||||
按 2026-10-25 确认的双状态设计稿实现,主要代码在 `packages/app/src/pages/home/index.vue` 与 `components/BrandBanner.vue`。继续使用 Vue 3、uni-app 与微信原生 tabBar,不新增运行时依赖。
|
||||
|
||||
## 展示与业务
|
||||
|
||||
- 馆名、Logo、昵称、会员卡、预约和已授权案例来自现有接口;设计稿中的晓晓、8 次、26 日等示例数据不会进入生产页面。
|
||||
- 游客显示「欢迎你」和身体评估入口。已登录但无会员卡的新用户仍显示欢迎文案。会员含已过期会员显示昵称;微信默认昵称和空昵称显示「欢迎回来」。身份尚在加载时使用中性文案,不提前判定新用户。
|
||||
- 日期和早上 / 上午 / 下午 / 晚上问候使用中国时间。在前台按分钟更新,跨日更新日期和提醒,进入后台停止定时器。提醒按自然日稳定轮换,不在刷新时随机跳动。
|
||||
- 可用会员卡展示余次或余天,实时排除过期、待生效和次数用尽的卡。待生效卡可进入会员卡页面,其余续卡继续使用现有续卡与购卡路径。首次加载展示骨架,失败可重试。
|
||||
- 新用户(游客及已登录但无会员卡的用户)不展示案例,也不请求案例接口;问候和提醒后直接承接身体评估入口。老学员首页推荐一则真实案例,全部案例入口保留;原图预览、前后标记、授权说明、分页图片和详情入口保留。没有公开案例时不放置虚构的学员或效果图。
|
||||
- 即将上课最多展示两节,按时间排序,排除已取消和已开始的课程。预约日期使用 UTC 日期列解释,不依赖设备时区。
|
||||
- 下拉刷新合并重复请求;网络失败保留已加载内容。登录变化会重新获取对应数据;退出时清除预约并使在途响应失效,个人资料同样防止旧会话响应回写。
|
||||
|
||||
## 布局与动效
|
||||
|
||||
- 暖白 `#FBF9F6`、鼠尾草绿 `#6B8276`、暖灰文字。头图、圆角、字级与留白按确认稿实现,品牌使用真实馆名和 Logo。
|
||||
- 顶部品牌栏固定,安全区和可用宽度读取微信真实胶囊位置。其余内容自然滚动,不再使用旧版大背景 Banner、浮层把手和磨砂重叠卡片。
|
||||
- 问候区 520ms 淡入并上移 8px 左右;照片延迟 80ms、用 600ms 进入;提醒延迟 160ms;下方内容延迟 220ms。整组动效在约 720ms 内完成,850ms 后移除入场状态。
|
||||
- 每次页面实例只播放一次入场动画,切换 tab、刷新、数据更新不会重复播放。照片固定尺寸,加载完成后淡入;失败有同尺寸的文字后备。按钮按压反馈 180ms。
|
||||
- `prefers-reduced-motion: reduce` 关闭入场、加载呼吸和按压过渡。原生 tabBar 更换为可编辑矢量几何绘制的八张图标,选中项使用鼠尾草绿。
|
||||
|
||||
## 图片
|
||||
|
||||
生产封面:`packages/app/src/static/home/studio-morning.jpg`,1536×1024 JPEG,约 266 KiB。由内置 imagegen 从确认稿中的核心床照片提取重建,再以 JPEG 编码,随包提供。旧后台 `bannerUrl` 不再用于这个新的欢迎区;馆名与 Logo 配置继续生效。
|
||||
|
||||
生成提示词(使用确认稿作为引用图片,内置工具模式):
|
||||
|
||||
> Use case: compositing / precise-object-edit.
|
||||
> Asset type: production homepage hero photograph for a Chinese Pilates studio mini-program.
|
||||
> The provided image is the approved UI design. Extract and reproduce ONLY the wide photographic image inside the top hero rectangle (identical photo on left and right screen). Output the PHOTOGRAPH ALONE, edge to edge, landscape 3:2 aspect ratio at high resolution, not the UI screenshot, no rounded corners (corners will be implemented in CSS).
|
||||
> Preserve the reference photo's exact camera angle, composition, subject placement, color, soft morning light and natural texture as closely as possible: close-up of wood Pilates reformer, cream upholstered carriage on left, oatmeal towel draped over left foreground, black metal handle/strap diagonal across top left, light wooden side rail diagonal across right foreground, soft sunlit oak floor, sheer ivory linen curtain upper right and warm plaster walls. Quiet, warm real editorial interior photography, not illustration, no people, no text, no logos, no icons, no UI, no borders, no watermark. This will be used at approximately 350px wide by 230px tall. Only the approved photo, do not redesign the scene.
|
||||
|
||||
图标可通过 `python3 packages/app/preview/generate-tab-icons.py` 重新生成,需要 Pillow;生产构建不需要 Python。
|
||||
|
||||
## 本地验收
|
||||
|
||||
```sh
|
||||
pnpm --filter @mp-pilates/app dev:home-preview
|
||||
```
|
||||
|
||||
打开 `http://127.0.0.1:5189/__home-preview`。该页面将实际应用嵌入手机尺寸视口,可切换新老用户、过期会员、空数据、错误重试、慢网络、长昵称以及 320 / 375 / 390 / 430px 宽度。
|
||||
|
||||
预览使用专用 Vite 配置、每个 iframe 独立的内存存储和模拟接口,不读取或修改真实登录凭据,不写入线上数据。只将真实业务页面用于布局和交互验证,不将预览模拟数据打入微信生产包。
|
||||
|
||||
```sh
|
||||
pnpm --filter @mp-pilates/app type-check
|
||||
pnpm --filter @mp-pilates/app test:home
|
||||
pnpm build:app
|
||||
```
|
||||
|
||||
`test:home` 覆盖中国时区问候边界、跨日提醒、昵称兜底、会员天数、即将上课的过滤排序、退出后的迟到响应、请求乱序和失败重试。
|
||||
|
||||
本次仅涉及小程序前端及本地预览;无需数据库迁移或新增环境变量。生产构建目录仍为 `packages/app/dist/build/mp-weixin`。未执行上传或发布。
|
||||
|
||||
## 本次验证结果
|
||||
|
||||
- `vue-tsc --noEmit`、10 项首页测试、微信生产构建和 `git diff --check` 均通过。
|
||||
- 微信开发者工具 Stable 2.02.2608060 / 基础库 3.16.2 实际运行,使用现有账号和线上只读接口检查馆名、Logo、昵称与会员余次,控制台 Errors 为 0。工具仍有原有 ProductShop 选择器警告及内核预加载提示。
|
||||
- 浏览器隔离预览检查了 320px 长昵称、375px 新用户、390px 会员与失败重试、430px 过期会员。已点击验证身体评估与课程预约跳转,以及会员信息重试恢复。
|
||||
- 最后调整已同时确认游客、已登录无卡用户均不展示案例;案例区域也不会先出现再隐藏。
|
||||
- 截图:`docs/screenshots/home-welcome-preview.png` 为最终双状态预览;`docs/screenshots/home-wechat-2026-10-25.png` 为微信实际运行截图。
|
||||
42
docs/owner-release-2026-10-25.md
Normal file
42
docs/owner-release-2026-10-25.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# 馆主介绍服务端发布记录
|
||||
|
||||
2026-10-25 完成馆主介绍的生产数据库迁移与服务器发布。
|
||||
|
||||
## 发布内容
|
||||
|
||||
- 对应代码:`4ca32c2`(`feat: 支持馆主个人信息编辑`)。
|
||||
- 发布包 SHA-256:`39e3cc79bf1adfd2ff423f3ee1147420ba9fcbde4be514250e6742c28bc34369`,上传前后校验一致。
|
||||
- 本地重新生成 Prisma Client,shared 和 server 构建通过;实现阶段的 36 个测试套件、584 项测试全部通过。
|
||||
- 沿用 Node 22.16.0、Prisma 5.22.0、现有生产依赖、环境配置和 PM2 `mp-pilates-server`。
|
||||
- 已更新 server/shared 构建产物、公开静态资源、Prisma schema 和迁移文件;运行文件与暂存发布包校验一致。
|
||||
|
||||
## 数据库迁移
|
||||
|
||||
- 15 个历史迁移的校验值全部与生产迁移记录匹配。
|
||||
- 迁移 SQL 已在生产连接的临时表上预演通过。
|
||||
- 成功应用 `20261025090000_owner_introduction`,新增 `studio_config.owner_introduction`(TEXT,可空)和 `owner_certifications`(JSON,可空)。
|
||||
- `prisma migrate status` 确认全部 16 个迁移完成、数据库为最新状态,无未解决的失败迁移。
|
||||
- 1 条原有场馆记录的全部原始字段摘要与发布前一致;新增字段为 NULL,由服务端返回原有介绍与 5 项认证。
|
||||
- 环境配置文件摘要与发布前一致。
|
||||
|
||||
## 线上验证
|
||||
|
||||
- 内网及公网 HTTPS `/api/health`、`/api/studio/info` 均返回 200,介绍与认证初始内容正确。
|
||||
- 匿名更新返回 401,会员更新返回 403。
|
||||
- 管理员的介绍超长、NULL 介绍、认证类型错误、NULL 认证、认证条目超长、条目数量超限共 6 项校验均返回 400。
|
||||
- 真实 MySQL 事务验证中文、多段介绍及认证顺序的存取,随后主动回滚;确认原始数据未变、新字段仍为 NULL,没有留下测试内容。
|
||||
- 发布后进程持续在线、异常重启次数为 0;最终检查时进程已运行约 103 秒,最近 10 分钟 HTTP 5xx 数为 0。
|
||||
|
||||
## 备份与回退
|
||||
|
||||
资料仅保存在服务器私有目录 `/usr/local/web/releases/owner-20261025/`:
|
||||
|
||||
- `database-before.sql.gz`:发布前完整数据库逻辑备份,gzip 完整性检查通过。
|
||||
- `previous-build.tgz`、`prisma-client-before/`:旧 server/shared 构建、公开资源、schema、迁移及原生 Prisma Client。
|
||||
- `release.tgz`、`stage/`:本次发布包与暂存文件。
|
||||
- `baseline.json`、`verification.json`:数据摘要及发布后验证结果,不保存访问令牌。
|
||||
- `migration.log`、`generate.log`、`stop.log`、`restart.log`:迁移与服务切换记录。
|
||||
|
||||
如需应用回退,应停止进程并恢复旧运行文件与 Prisma Client,再重启。数据库新增字段应保留,避免删除上线后编辑的馆主内容;数据库整库备份仅用于灾难恢复,不应覆盖上线后的新数据。
|
||||
|
||||
本次未上传或发布微信小程序。首页“馆主介绍”和后台编辑界面需在新版小程序发布后使用。
|
||||
BIN
docs/screenshots/home-wechat-2026-10-25.png
Normal file
BIN
docs/screenshots/home-wechat-2026-10-25.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 448 KiB |
BIN
docs/screenshots/home-welcome-preview.png
Normal file
BIN
docs/screenshots/home-welcome-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Reference in New Issue
Block a user