rongshu/工作空间/产研/权益/汇丰全行/需求文档/组装页.md

组装页前后台需求文档

版本日期：2026-05-31

一、业务流程图

1.1 后台配置与发布流程

flowchart TD
    A["运营进入页面管理 / 组装页"] --> B["查询或新建组装页"]
    B --> C{"是否已有页面 ID"}
    C -- "否，新建" --> D["填写组装页名称和基础配置"]
    C -- "是，编辑" --> E["加载已有草稿或线上配置"]
    D --> F["添加并配置页面模块"]
    E --> F
    F --> G{"点击保存草稿或发布上线"}
    G -- "保存草稿" --> H{"基础字段与强校验是否通过"}
    G -- "发布上线" --> I{"发布校验是否通过"}
    H -- "否" --> J["提示错误并停留当前页面"]
    I -- "否" --> J
    H -- "是" --> K["保存草稿版本"]
    I -- "是" --> L["生成或更新线上发布版本"]
    K --> M["可生成草稿预览链接"]
    L --> N["可生成正式 H5 / 小程序链接"]

1.2 移动端访问与渲染流程

flowchart TD
    A["客户打开组装页链接"] --> B{"链接是否包含 draft=1"}
    B -- "是" --> C["读取草稿预览配置"]
    B -- "否" --> D["读取已发布配置"]
    C --> E{"页面配置是否存在"}
    D --> E
    E -- "否" --> F["展示页面不存在或已下线提示"]
    E -- "是" --> G["读取组装页名称作为导航标题"]
    G --> H["按模块 sort 顺序渲染"]
    H --> I{"存在权益商品模块"}
    I -- "否" --> J["渲染静态模块和按钮"]
    I -- "是" --> K["获取客户标签 / MSC group/ 权益资格"]
    K --> L["过滤并展示可见权益商品"]
    L --> J

1.3 按钮点击与外部跳转流程

flowchart TD
    A["用户点击按钮"] --> B{"点击动作"}
    B -- "跳转链接" --> C["读取按钮跳转链接"]
    B -- "弹窗提示" --> D["展示底部提示弹窗"]
    D --> E{"用户点击确认"}
    E -- "否，取消或关闭" --> F["关闭弹窗，留在当前页"]
    E -- "是" --> G{"确认按钮是否配置跳转链接"}
    G -- "否" --> F
    G -- "是" --> C
    C --> H{"是否第三方外部域名"}
    H -- "否" --> I["直接跳转"]
    H -- "是" --> J["展示离开汇丰中国确认弹窗"]
    J --> K{"用户点击继续前往"}
    K -- "否" --> F
    K -- "是" --> I

二、后台配置需求

2.1 后台入口与页面列表

后台入口：定制功能 / 汇丰银行 / 页面管理 / 组装页

功能	需求说明	边界规则
查询	支持按页面 ID、页面名称查询	页面名称支持模糊查询；页面 ID 支持精确或包含查询，以后端实现为准
重置	清空查询条件并刷新列表	重置后展示全部组装页
新建组装页	进入新建编辑态	新建时页面 ID 显示“保存后生成”
编辑	进入组装页编辑态	编辑已发布页面时，未发布修改不影响当前线上版本
链接	打开“获取页面链接”弹窗	未保存页面无页面 ID，禁止获取链接并提示“请先保存组装页再获取链接”
状态展示	展示草稿、已上架	已上架代表存在正式发布版本；草稿代表仅后台可编辑或预览
时间展示	展示创建时间、更新时间	新建保存后写入创建时间和更新时间；编辑保存后只更新更新时间

列表字段：

字段	说明
操作	编辑、链接
页面 ID	系统生成的唯一页面标识
组装页名称	后台配置名称，也作为移动端导航标题
发布状态	草稿、已上架
创建时间	页面首次保存时间
更新时间	最近一次保存草稿或发布上线时间

2.2 编辑页整体结构与操作

编辑页由四部分组成：

1. 顶部操作栏：返回、页面状态、获取链接、保存草稿、发布上线。
2. 页面整体基础信息：页面 ID、组装页名称。
3. 微信分享卡片配置。
4. 动态模块配置区：图片模块、权益商品模块、图文模块、按钮模块。

页面状态规则：

状态	触发条件	后台展示	移动端影响
新建未保存	点击“新建组装页”后未保存	页面 ID 为“保存后生成”	不可生成链接，移动端不可访问
草稿	保存草稿且未发布	草稿	仅草稿预览链接可访问
已上架	发布上线成功且无未发布修改	正式线上环境	正式链接读取该版本
有未发布的修改	已发布页面编辑后未发布	有未发布的修改	正式链接仍读取上一次发布版本；草稿预览读取最新草稿

操作规则：

操作	需求说明	校验与边界
返回	返回组装页列表	如存在未保存修改，应弹出确认：“当前修改未保存，确认返回？”
保存草稿	保存当前配置为草稿版本	必须校验基础字段和已添加模块的必填项；保存成功后生成页面 ID
发布上线	将当前配置发布为正式版本	在草稿校验基础上，要求至少存在 1 个可展示模块
获取链接	生成正式链接和草稿预览链接	未保存页面禁止生成；未发布页面只展示草稿预览链接

组装页名称规则：

字段	规则
是否必填	保存草稿、发布上线均必填
长度	1 至 40 个中文字符，英文、数字、空格按 1 个字符计
用途	后台列表展示、移动端导航标题、小程序页面标题
空值处理	为空时阻断保存并在字段下方提示“请输入组装页名称”

当前 Demo 中空名称会自动兜底为“未命名组装页”。正式需求不保留该行为，以必填校验为准。

2.3 获取页面链接

点击“获取链接”后展示链接弹窗，支持选择 Campaign ID、Channel ID，生成带投放参数的链接。

链接类型	展示条件	链接格式	用途
正式 H5 链接	页面状态为已上架	https://hsbc.com/assembly?id={pageId}	正式投放
正式小程序链接	页面状态为已上架	hsbc-app://assembly?id={pageId}	小程序或 App 内打开
草稿预览链接	页面已保存	https://test.hsbc.com/assembly?id={pageId}&draft=1	内部测试预览

参数拼接规则：

参数	来源	规则
id	页面 ID	必填
draft	是否草稿预览	草稿预览链接固定为 draft=1
CampaignId	Campaign 下拉选择	选填；选择后拼接到链接
Channelid	Channel 下拉选择	选填；选择后拼接到链接

边界规则：

1. 未发布页面不展示正式 H5 链接和正式小程序链接。
2. Campaign ID、Channel ID 清空时，不拼接对应参数。
3. 复制链接成功后提示“链接已复制到剪贴板”。
4. 移动端需透传 Campaign ID、Channel ID 到埋点和后续跳转链路，便于归因。

2.4 微信分享卡片配置

微信分享卡片配置位于页面基础信息下方，用于控制小程序环境内的分享能力。

字段	类型	必填规则	移动端消费规则
自定义微信分享	复选框 / 开关	非必填	开启后允许小程序分享；关闭后禁用小程序原生分享入口
分享缩略图	图片上传	开启自定义分享后必填	作为微信聊天卡片缩略图
分享标题	单行文本	开启自定义分享后必填	作为微信聊天卡片标题

图片规则：

项目	规则
文件格式	JPG、JPEG、PNG
建议尺寸	100px x 100px
上传数量	仅 1 张
替换	再次上传覆盖原图
发布校验	开启自定义分享且未上传缩略图时，阻断保存或发布

移动端规则：

1. 非小程序环境打开组装页时，不展示微信原生分享控制逻辑。
2. 小程序环境且自定义分享关闭时，前端调用小程序能力禁用分享菜单。
3. 小程序环境且自定义分享开启时，前端向小程序分享 SDK 注入分享标题、分享缩略图和当前页面链接。
4. 分享出去的链接必须携带当前页面 ID；如原链接含 Campaign ID、Channel ID，分享链接需保留参数。

2.5 动态模块通用规则

组装页支持以下模块：

模块	类型	是否可重复	是否可复制	是否可删除	是否可排序
图片模块	image	是	是	是	是
权益商品模块	privilege	否，每页最多 1 个	否	是	是
图文模块	richtext	是	是	是	是
按钮模块	buttonGroup	是	是	是	是

添加规则：

1. 新建组装页时默认不含任何业务模块。
2. 页面底部固定展示添加模块按钮：图片模块、权益商品模块、图文模块、按钮模块。
3. 页面已存在权益商品模块时，添加区隐藏“权益商品模块”按钮。
4. 点击添加模块后，新模块追加到当前模块列表末尾。

排序规则：

场景	规则
模块排序	点击模块右上角“排序”，输入目标序号，确认后移动到目标位置
序号范围	最小为 1，最大为当前模块数量
无效输入	输入为空、非数字、超出范围时不执行移动，并提示“请输入有效的顺序位置”
同位置移动	目标位置等于当前位置时关闭气泡，不改变顺序

复制规则：

1. 图片、图文、按钮模块点击复制后，复制当前模块的全部配置内容。
2. 复制出的模块生成新的模块 ID，默认插入到原模块下方。
3. 权益商品模块不可复制，点击复制时提示“权益商品模块每页仅限配置一个，无法复制”。

删除规则：

1. 点击模块右上角“删除”后弹出二次确认：“确定删除该模块吗？”
2. 确认后删除整个模块及其内部配置。
3. 删除后不立即保存到后端，需点击保存草稿或发布上线后生效。

发布校验规则：

校验项	保存草稿	发布上线
组装页名称	必填	必填
至少 1 个展示模块	不强制	必填
已添加图片模块上传图片	必填	必填
已添加图文模块内容	必填	必填
已添加按钮模块按钮文案	必填	必填
按钮动作为跳转链接时填写链接	必填	必填
按钮动作为弹窗提示时填写弹窗标题、描述、确认按钮文案	必填	必填
微信分享开启时填写缩略图和标题	必填	必填

2.6 图片模块

后台配置：

字段	类型	规则
图片	图片上传	必填；仅支持 JPG、JPEG、PNG；建议宽度 750px；高度不限

移动端展示：

1. 图片按模块顺序展示。
2. 图片宽度为页面通栏 100%，左右无边距。
3. 高度不固定，按图片原始宽高比等比缩放。
4. 图片不支持点击跳转。
5. 图片加载失败时，该图片模块不展示，并记录前端错误日志。

边界：

1. 添加图片模块但未上传图片时，保存草稿和发布上线均阻断。
2. 上传新图片后覆盖旧图片。
3. 图片超过后端限制大小时，上传失败并提示“图片大小超出限制，请重新上传”。

2.7 图文模块

后台配置：

字段	类型	规则
图文内容	富文本编辑器	必填；支持文字、图片、链接、基础标题、列表、PDF 附件、表格

富文本能力：

能力	后台配置	移动端展示
文字样式	支持加粗、斜体、下划线、标题、列表	按富文本样式渲染
图片	支持正文内插入图片	宽度自适应，不撑破屏幕
超链接	支持给文字配置 URL	点击后走链接跳转规则
PDF 附件	支持上传 PDF 并插入附件标识	点击后拉起浏览器或系统 PDF 预览
表格	支持基础表格	表格宽度超过屏幕时，外层横向滚动

安全与边界：

1. 移动端渲染前需对富文本进行安全过滤，禁止执行脚本。
2. 富文本为空、仅空格、仅空标签时视为空内容。
3. 富文本内链接也需执行外部域名识别；第三方外链必须展示“离开汇丰中国”确认弹窗。
4. 富文本内图片加载失败时展示破图兜底或隐藏失败图片，不影响其他内容展示。

2.8 权益商品模块

权益商品模块用于展示与当前组装页关联的权益商品。

后台配置：

字段	类型	规则
可配置大标题	单行文本	选填；为空时移动端隐藏模块标题
权益商品列表	自动回显列表	来源于权益商品管理中选择“组装页=显示”且包含当前组装页的商品
商品排序	行级排序	支持调整当前组装页内权益商品展示顺序

商品排序仅作用于当前组装页，不影响权益首页/列表页排序，也不影响同一权益商品在其他组装页中的展示顺序。

唯一性规则：

1. 单个组装页最多添加 1 个权益商品模块。
2. 已添加权益商品模块后，添加模块按钮区不再展示“权益商品模块”。
3. 权益商品模块不支持复制。

与权益商品管理的关系：

在“借记卡权益 / 添加权益 / 编辑权益 / 更多设置 / 显示页面”中，支持配置：

字段	规则
权益首页/列表页	选择显示或不显示
组装页	选择显示或不显示
组装页列表	当“组装页=显示”时，必须选择一个或多个组装页

权益商品进入组装页展示列表需同时满足：

1. 权益商品状态为已上架。
2. 权益商品审核状态为审核通过。
3. 权益商品配置了“组装页=显示”。
4. 权益商品选择的组装页包含当前页面 ID。
5. 如配置了展示时间限制，当前时间在展示时间范围内。
6. 如配置了展示客群限制，当前客户命中配置客群。
7. 如配置了领取客群或发放计划限制，移动端按领取资格决定点击后的领取结果；不满足领取资格的商品是否展示，按权益商品的展示规则决定。

客户数据来源：

数据	字段建议	说明
客户 MSC Group List	mscCodeList	用于判断客户所属 MSC 类型
客户标签列表	tagIds	用于判断展示客群限制
权益资格	eligibleProductIds 或权益资格接口返回	用于判断客户是否可领取或可跳转

移动端展示：

1. 模块大标题为空时，只展示权益商品列表。
2. 无可展示商品时，整个权益商品模块隐藏，包括大标题。
3. 商品项展示圆形图标、权益名称、权益简介和右箭头。
4. 商品图标为空时展示默认权益图标。
5. 商品名称超长时最多展示 1 行，超出省略。
6. 商品简介超长时最多展示 2 行，超出省略。

点击交互：

1. 点击商品项后，移动端先校验登录态。
2. 未登录时进入 SSO 登录，登录完成后回到当前商品跳转链路。
3. 银行自有或荣数商品走权益平台详情或领取页。
4. 第三方权益如果配置“没有详情页”，从列表直接跳转外部权益链接。
5. 第三方权益如果配置“有详情页”，先进入权益详情页，再由详情页承接领取或外部跳转。
6. 跳转第三方 H5 前必须展示“离开汇丰中国”确认弹窗。

当前 Demo 的权益商品模块内置了模拟 items。正式需求以“权益商品管理”联动回显为准，模块内不手工新增商品内容，只维护标题和当前页商品排序。

2.9 按钮模块

按钮模块用于配置页面操作入口。一个按钮模块内可添加多个按钮，移动端按后台按钮顺序纵向展示。

按钮字段：

字段	类型	必填	规则
按钮文案	单行文本	是	1 至 10 个中文字符
点击动作	下拉选择	是	跳转链接、弹窗提示
按钮样式	下拉选择	是	突出显示（红色）、次要操作（白色）
跳转链接类型	单选	条件必填	点击动作=跳转链接时展示并必填，支持 H5 链接跳转、固定链接跳转、小程序跳转
目标链接	下拉选择	条件必填	跳转链接类型=固定链接跳转时展示并必填，选项由后台维护，当前 demo 包含“太古地产”“龙腾”
配置链接	URL 输入框	条件必填	跳转链接类型=H5 链接跳转时展示并必填
小程序 AppID	单行文本	条件必填	跳转链接类型=小程序跳转时展示并必填
小程序页面路径	单行文本	条件必填	跳转链接类型=小程序跳转时展示并必填
弹窗标题	单行文本	条件必填	点击动作=弹窗提示时必填，最多 20 个中文字符
弹窗描述	富文本编辑器	条件必填	点击动作=弹窗提示时必填
左侧取消按钮文案	单行文本	条件必填	点击动作=弹窗提示时展示，默认“取消”
右侧确认按钮展示	勾选框	条件必填	点击动作=弹窗提示时展示，默认展示
右侧确认按钮文案	单行文本	条件必填	右侧确认按钮展示=是时必填，最多 6 个中文字符，默认“确认”
确认按钮跳转链接类型	单选	条件必填	右侧确认按钮展示=是时展示并必填，支持 H5 链接跳转、固定链接跳转、小程序跳转
确认按钮目标链接	下拉选择	条件必填	确认按钮跳转链接类型=固定链接跳转时展示并必填，选项由后台维护
确认按钮配置链接	URL 输入框	条件必填	确认按钮跳转链接类型=H5 链接跳转时展示并必填
确认按钮小程序 AppID	单行文本	条件必填	确认按钮跳转链接类型=小程序跳转时展示并必填
确认按钮小程序页面路径	单行文本	条件必填	确认按钮跳转链接类型=小程序跳转时展示并必填

按钮组内部操作：

操作	规则
添加按钮	点击“添加按钮”后在按钮列表末尾新增按钮，默认文案为“新按钮”，默认样式为次要操作，默认动作为跳转链接
内部排序	输入目标序号后移动按钮
内部删除	点击删除图标后删除当前按钮；删除后如按钮列表为空，移动端不展示该按钮模块

移动端展示：

1. 按钮在页面内容流中展示，不固定在屏幕底部。
2. 按钮宽度为内容区域 100%，按钮之间保持固定间距。
3. 突出显示按钮为汇丰红底白字。
4. 次要操作按钮为白底深色字，带浅灰描边。
5. 同一按钮模块配置多个按钮时，按后台顺序纵向排列，后台不限制按钮数量。

跳转链接规则：

1. 点击动作=跳转链接时，必须完整填写当前跳转链接类型对应字段，否则阻断保存并提示“保存失败：按钮模块中存在未填写完整的跳转链接配置！”。
2. H5 链接跳转保存 linkType=h5、linkH5，并同步兼容字段 link=linkH5。
3. 固定链接跳转保存 linkType=fixed、fixedLink，并同步兼容字段 link=fixedLink；切换到固定链接时如未选择目标链接，默认回填“太古地产”。
4. 小程序跳转保存 linkType=miniProgram、miniAppId、miniAppPath，兼容字段 link 置空。
5. 切换跳转链接类型时，清空未选中类型对应字段，避免保存无效冗余配置。
6. 内部汇丰域名、App 内部路径或固定内部目标直接跳转。
7. 第三方外部域名跳转前展示“离开汇丰中国”确认弹窗。
8. URL 格式非法时阻断保存并提示“请输入正确的跳转链接”。

弹窗提示规则：

1. 点击按钮后展示底部弹窗。
2. 弹窗标题、描述、左侧取消按钮文案、右侧确认按钮展示状态和右侧确认按钮文案读取后台配置。
3. 弹窗右上角固定展示关闭按钮。
4. 弹窗底部固定展示左侧取消按钮；右侧确认按钮根据“展示”开关决定是否展示。
5. 右侧确认按钮展示=是时，必须完整填写确认按钮跳转链接类型对应字段，否则阻断保存并提示“保存失败：按钮模块中存在未填写完整的跳转链接配置！”。
6. 确认按钮跳转链接配置同样支持 H5 链接跳转、固定链接跳转、小程序跳转；字段保存规则与按钮跳转一致，对应字段为 confirmLinkType、confirmFixedLink、confirmLinkH5、confirmMiniAppId、confirmMiniAppPath，并同步兼容字段 confirmLink。
7. 右侧确认按钮展示=否时，移动端不展示确认按钮，也不校验确认按钮跳转配置。
8. 点击取消、关闭、遮罩层时关闭弹窗，不执行跳转。
9. 点击确认后，如确认为第三方外部 H5 域名，先关闭底部弹窗，再展示“离开汇丰中国”确认弹窗。

外部跳转确认弹窗固定文案：

字段	文案
标题	您正在离开汇丰中国
描述	请注意，外部网站的政策与我们网站的条款和条件以及隐私政策不同。将在新浏览器窗口或选项卡中打开下一个网站。
取消按钮	取消
确认按钮	继续前往

三、移动端展示需求

3.1 页面访问

移动端通过页面 ID 访问组装页。

场景	处理规则
页面 ID 为空	展示错误页：“页面参数错误”
页面不存在	展示错误页：“页面不存在或已下线”
页面未发布且非草稿预览	展示错误页：“页面不存在或已下线”
草稿预览链接	仅内部测试环境可访问，读取草稿配置
正式链接	读取最近一次发布配置

3.2 页面骨架

区域	规则
状态栏	使用小程序或 App 容器原生状态栏
导航栏	标题读取组装页名称
返回按钮	点击返回上一页；无上一页时返回权益首页或关闭当前 WebView
内容区	白底，自上而下按模块顺序渲染
安全区	iOS 底部安全区需留白，避免按钮或内容被遮挡

3.3 模块渲染顺序

1. 移动端严格按后台保存的模块顺序渲染。
2. 后台未配置任何模块时，正式页面不可发布；草稿预览展示空白内容区。
3. 某个模块因数据为空或客户不命中而隐藏时，不占位，不影响后续模块展示。
4. 同类型模块可以出现多次，权益商品模块除外。

3.4 微信小程序分享

条件	结果
非小程序环境	不处理微信小程序原生分享
小程序环境且自定义分享关闭	禁用右上角分享能力
小程序环境且自定义分享开启	分享标题、缩略图、链接使用后台配置

分享链接规则：

1. 分享链接使用正式页面链接，不使用草稿预览链接。
2. 原访问链接带 Campaign ID、Channel ID 时，分享链接保留参数。
3. 分享缩略图为空或分享标题为空时，后台不允许发布，因此移动端不做二次兜底。

3.5 外部链接识别

后端根据汇丰内部域名白名单识别链接是否为外部链接。白名单内链接直接跳转，白名单外链接展示离开汇丰中国确认弹窗。

白名单由后端维护，范围包含：

类型	示例
汇丰 H5 域名	hsbc.com、hsbc.com.cn 及项目实际域名
小程序内部路径	/pages/、hsbc-app://
测试域名	test.hsbc.com，仅测试环境生效

四、验收标准

4.1 后台验收

编号	验收项	通过标准
A1	新建组装页	输入组装页名称并保存草稿后生成页面 ID，列表出现新记录
A2	组装页名称必填	名称为空时保存草稿和发布上线均失败
A3	添加模块	图片、图文、按钮模块可多次添加；权益商品模块最多添加 1 次
A4	模块排序	输入合法序号后模块移动到目标位置
A5	模块复制	图片、图文、按钮模块可复制，权益商品模块不可复制
A6	模块删除	删除前二次确认，确认后模块从编辑区移除
A7	分享配置校验	开启自定义分享但缺少缩略图或标题时保存失败
A8	按钮链接校验	按钮动作为跳转链接，或弹窗右侧确认按钮开启但对应跳转配置未填写完整时保存失败
A9	草稿和正式链接	草稿页面只展示预览链接，已上架页面展示正式链接和预览链接
A10	权益商品联动	商品配置组装页显示后，在对应组装页权益商品模块中回显

4.2 移动端验收

编号	验收项	通过标准
M1	标题回显	导航标题等于后台组装页名称
M2	模块顺序	移动端模块顺序与后台配置一致
M3	图片展示	图片通栏展示，按原始比例等比缩放
M4	富文本展示	图片、链接、PDF、表格均可正常展示或预览
M5	权益商品过滤	未上架、未审核通过、不属于当前页面、不命中客户条件的商品不展示
M6	权益商品空列表	无可见商品时隐藏整个权益商品模块
M7	按钮跳转	H5、固定链接、小程序跳转按后台配置执行；内部链接直接跳转，外部链接先展示离开汇丰确认弹窗
M8	弹窗按钮	弹窗取消关闭不跳转；确认按钮按后台展示开关控制，展示时按配置的跳转规则执行
M9	微信分享	开关关闭时小程序禁用分享；开启时分享卡片使用后台标题和缩略图
M10	异常页面	页面不存在、未发布、ID 为空时展示错误提示