214 lines
6.9 KiB
Markdown
214 lines
6.9 KiB
Markdown
# `pages/profile/index` 未登录态静态页面设计
|
||
|
||
## 文档元信息
|
||
|
||
- 日期：`2026-04-22`
|
||
- 目标页面：`pages/profile/index`
|
||
- 设计范围：`结构复刻 + 纯静态展示 + 未登录态`
|
||
- 关联文档：`AGENTS.md`、`README.md`
|
||
|
||
## 目标
|
||
|
||
在不引入接口、store、页面跳转和新增组件的前提下，将 `pages/profile/index` 从占位页升级为一个可直接展示的个人中心静态页面。页面目标是复刻参考图的区块结构和信息层级，同时沿用仓库现有暖色、卡片化视觉语言，避免做截图级像素还原。
|
||
|
||
## 范围与非目标
|
||
|
||
### 本次范围
|
||
|
||
- 仅修改 `pages/profile/index.js`、`pages/profile/index.wxml`、`pages/profile/index.wxss`
|
||
- 页面首屏固定为未登录态
|
||
- 页面包含 5 个区块：用户卡片、会员引导卡片、学习资产四宫格、最近记录空状态、其它功能列表
|
||
- 页面内容使用静态 `data` 驱动
|
||
- 按微信原生小程序常规写法实现，不新增通用组件
|
||
|
||
### 非目标
|
||
|
||
- 不接入 `stores/modules/session.js`
|
||
- 不调用 `services/api/*` 或 `services/request/index.js`
|
||
- 不新增图标图片资源、不新增字体资源
|
||
- 不接按钮点击、页面跳转、分享能力、登录能力
|
||
- 不处理已登录态、真实记录列表、真实资产计数
|
||
|
||
## 方案选择
|
||
|
||
### 备选方案
|
||
|
||
1. 页面内一次性落地
|
||
2. 先抽资产区和列表行为局部组件
|
||
3. 强行复用现有 `components/base/app-button` 与 `components/biz/entry-card`
|
||
|
||
### 最终选择
|
||
|
||
采用“页面内一次性落地”方案。
|
||
|
||
选择原因：
|
||
|
||
- 当前目标是静态结构复刻，范围小，直接写在页面内更短更稳
|
||
- 现有组件与目标结构不贴合，强复用会增加样式扭曲和模板复杂度
|
||
- 通过结构化 `data` 和分区 class 命名，后续仍可平滑抽组件，不会锁死实现
|
||
|
||
## 页面结构
|
||
|
||
页面按纵向信息流组织，顺序固定如下：
|
||
|
||
1. 用户卡片
|
||
2. 会员引导卡片
|
||
3. 学习资产四宫格
|
||
4. 最近记录
|
||
5. 其它功能
|
||
|
||
各区块关系如下：
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
PAGE["profile-page 页面根容器"] --> USER["用户卡片<br/>头像占位 / 登录文案 / 设置入口占位"]
|
||
PAGE --> VIP["会员引导卡片<br/>图标占位 / 说明文案 / CTA 按钮占位"]
|
||
PAGE --> ASSET["学习资产四宫格<br/>我的笔记 / 我的书架 / 我的收藏 / 浏览历史"]
|
||
PAGE --> RECENT["最近记录卡片<br/>标题 + 空状态文案"]
|
||
PAGE --> MORE["其它功能列表<br/>意见反馈 / 分享 APP / 关于我们 / 设置"]
|
||
```
|
||
|
||
## 数据模型
|
||
|
||
页面 `data` 只承载静态展示信息，建议按 5 组对象/数组组织：
|
||
|
||
```js
|
||
{
|
||
userCard: {
|
||
avatarText: '?',
|
||
title: '点击登录',
|
||
subtitle: '登录后查看你的学习资产',
|
||
settingsText: '设'
|
||
},
|
||
vipCard: {
|
||
icon: '会员',
|
||
title: '开通会员',
|
||
subtitle: '解锁更多学习资料、AI 仪表与阅读辅助能力',
|
||
actionText: '成为会员'
|
||
},
|
||
assetItems: [
|
||
{ key: 'notes', icon: '记', title: '我的笔记', count: 0 },
|
||
{ key: 'bookshelf', icon: '架', title: '我的书架', count: 0 },
|
||
{ key: 'favorites', icon: '藏', title: '我的收藏', count: 0 },
|
||
{ key: 'history', icon: '史', title: '浏览历史', count: 0 }
|
||
],
|
||
recentRecord: {
|
||
title: '最近记录',
|
||
emptyTitle: '还没有回访记录',
|
||
emptyDescription: '去典籍阅读或 AI 页完成一次学习，记录会出现在这里。'
|
||
},
|
||
moreItems: [
|
||
{ key: 'feedback', title: '意见反馈' },
|
||
{ key: 'share', title: '分享 APP' },
|
||
{ key: 'about', title: '关于我们' },
|
||
{ key: 'settings', title: '设置' }
|
||
]
|
||
}
|
||
```
|
||
|
||
约束：
|
||
|
||
- `assetItems` 和 `moreItems` 必须使用 `wx:for`
|
||
- `key` 只用于渲染稳定性和后续扩展，不在本次承担业务逻辑
|
||
- 所有文本先静态写入 `data`，避免模板中散落魔法字符串
|
||
|
||
## WXML 结构边界
|
||
|
||
WXML 只保留三级边界：
|
||
|
||
- 页面根：`profile-page`
|
||
- 区块卡片：`section-card`
|
||
- 区块内部局部结构：`profile-header`、`vip-banner`、`asset-grid`、`recent-panel`、`menu-list`
|
||
|
||
结构要求：
|
||
|
||
- 顶部用户卡片和会员卡片为独立卡片，不合并
|
||
- 资产区一行固定 4 列，每项包含图标容器、标题、数字
|
||
- 最近记录固定为空状态，不渲染列表分支
|
||
- 其它功能为纵向列表，每一行使用“左文案 + 右箭头占位”的标准结构
|
||
|
||
## 样式策略
|
||
|
||
页面视觉遵循“结构复刻，风格贴合仓库”的原则。
|
||
|
||
### 页面级
|
||
|
||
- 延续当前项目已有的米白到浅金渐变背景
|
||
- 保持主内容纵向滚动，顶部和底部有稳定安全边距
|
||
|
||
### 卡片级
|
||
|
||
- 统一使用浅底、圆角、大留白、轻阴影
|
||
- 卡片间距与首页的 `section-card` 节奏接近
|
||
- 避免复杂装饰、绝对定位角标和图片背景
|
||
|
||
### 文本级
|
||
|
||
- 区块标题延续首页的 `Songti` / serif 风格
|
||
- 正文、副文案、数字采用更轻的系统字体层级
|
||
- 用户卡片标题突出，辅助说明弱化
|
||
|
||
### 图标级
|
||
|
||
- 本次不新增图片资源
|
||
- 头像、会员、四宫格图标、右箭头均用字符或简单容器占位
|
||
- 图标容器风格统一，避免每块都出现不同视觉语言
|
||
|
||
## 行为与数据流
|
||
|
||
本页当前没有真实行为流，只保留静态展示结构。
|
||
|
||
```mermaid
|
||
flowchart LR
|
||
DATA["Page data 静态对象"] --> WXML["WXML 区块渲染"]
|
||
WXML --> WXSS["WXSS 卡片与布局样式"]
|
||
WXSS --> UI["未登录态个人中心静态页面"]
|
||
```
|
||
|
||
约束：
|
||
|
||
- 不出现 `onLoad` 拉取数据逻辑
|
||
- 不出现 `wx.navigateTo`、`wx.switchTab`、`wx.login`、`wx.getUserProfile`
|
||
- 不出现依赖外部状态的分支渲染
|
||
|
||
## 错误处理与边界
|
||
|
||
由于本次没有网络请求和真实交互，错误处理重点放在布局稳定性：
|
||
|
||
- `assetItems` 固定为 4 项；若后续数量变化，需要单独评估布局是否仍保持 4 列
|
||
- 文案长度以当前中文文案为基准，样式需避免一行被异常挤压
|
||
- 图标占位必须在没有外部资源时也能稳定渲染
|
||
- 页面在微信常规设备宽度下不能出现卡片溢出、四宫格换行错位、列表箭头挤压
|
||
|
||
## 测试与验收
|
||
|
||
本次设计对应的最小验证范围：
|
||
|
||
1. 页面整体包含 5 个区块，顺序与设计一致
|
||
2. 学习资产区稳定为一行 4 列
|
||
3. 最近记录展示为空状态，不出现列表分支
|
||
4. 其它功能区展示 4 行静态入口
|
||
5. 改动范围仅限 `pages/profile/index.*`，不新增业务组件、不接 API / store
|
||
|
||
若补测试，优先补：
|
||
|
||
- 页面 `data` 结构渲染测试
|
||
- 四宫格与功能列表项数量断言
|
||
- 关键标题文案存在性断言
|
||
|
||
## 实施边界
|
||
|
||
实施顺序固定为：
|
||
|
||
1. 重写 `pages/profile/index.js` 中的静态数据
|
||
2. 重写 `pages/profile/index.wxml` 的区块结构
|
||
3. 重写 `pages/profile/index.wxss` 的整体布局与卡片样式
|
||
4. 回查 `app.json` 中 `pages/profile/index` 路由已存在，无需新增注册
|
||
|
||
禁止事项：
|
||
|
||
- 不提前抽新组件
|
||
- 不顺手接登录态
|
||
- 不顺手接页面跳转
|
||
- 不为“以后可能要用”增加额外抽象
|