cfc/docs/superpowers/specs/2026-08-01-share-poster-redesign-design.md

分享功能改造设计（海报组件参数化 + 5 项分享入口）

日期：2026-08-01 状态：已获用户逐节批准

背景

小程序现有两套 Canvas 海报组件：

• components/SharePoster.vue（500x750，家庭邀请卡：头像+昵称+邀请码+二维码，暖橙渐变）
• components/ContentSharePoster.vue（500x800，内容海报：封面+类型标签+标题+二维码，暖橙渐变，全屏遮罩弹窗）

需求涉及 5 项分享功能改造，全部为前端改动，后端与数据库零改动。

需求清单

1. 商品详情增加分享海报（pages/discover-detail/product-detail/product-detail.vue，当前无分享功能）
2. 文章详情去掉「分享」按钮，用微信右上角原生转发（已带邀请码）；保留「海报」按钮
3. 文章海报弹窗重新设计：不覆盖全屏（居中卡片）、点周边关闭、加文章简介、加邀请扫码语、按文章主维度自动配色
4. 家庭邀请卡海报：全组件字号缩小 2px；二维码上方加「{nickname}邀请你来{familyName}」文案
5. 财富中心首页加「分享给好友」按钮，点击生成家庭邀请卡海报

已确认的决策

决策点	结论
文章详情「分享」按钮	去掉，保留「海报」按钮；微信右上角转发不变（shareMixin 已带邀请码）
海报弹窗交互	居中卡片，周边半透明可点击关闭；仅保留「保存到相册」按钮（用户自己发图），去掉「取消」按钮
海报配色	按主维度自动取色（五维色系）；无维度数据时默认暖橙 #F97316
家庭卡「缩小」	仅文字缩小 2px，画布尺寸不变
家庭卡文案	「{nickname}邀请你来{familyName}」放二维码上方；家庭名空时退化为「{nickname}邀请你加入浠艾福」
商品海报内容	封面图+名称+价格(+会员价)+邀请码+二维码（扫码进商品详情页）
商品二维码 scene	id=<商品id>&ref=<邀请码>，扫码后商品页解析并自动绑定邀请码
财富中心入口	邀请卡片区域加「分享给好友」按钮 → 家庭邀请卡海报
方案选型	A：参数化现有组件，不新建海报引擎

组件层改造

1. ContentSharePoster.vue（文章+商品共用）

新增 props：

Prop	类型	用途
dimensionCode	String	主维度码，驱动配色（body/mind/wisdom/action/wealth）
summary	String	简介文案，标题下方 1-2 行灰字
priceText	String	价格文案（商品用；文章不传）
ctaText	String	底部 CTA（默认"长按识别二维码 · 查看详情"，商品传"查看商品"）
inviteText	String	邀请扫码语，二维码上方（如"「昵称」邀请你一起阅读这篇文章"）

配色映射（五维色系）：

维度	主色	渐变深一档	卡片淡色
body 身	#FF8C42	#EA580C	#FFF7ED
mind 心	#FF6B9D	#DB2777	#FDF2F8
wisdom 智	#6366F1	#4F46E5	#EEF2FF
action 行	#10B981	#059669	#ECFDF5
wealth 富	#F59E0B	#D97706	#FFFBEB
默认	#F97316	#EA580C	#FFF7ED

弹窗改造：

• 全屏遮罩 → 居中卡片（海报居中，周边半透明，@click.self 关闭）
• 保留「保存到相册」按钮，去掉「取消」按钮
• 保存成功 toast 反馈、无权限引导设置（现有逻辑保留）

布局顺序： 封面图 → 类型标签 → 标题（2行截断）→ 简介（1-2行灰字）→ 邀请语 → 二维码 → 底部 CTA

2. SharePoster.vue（家庭邀请卡）

• 新增 familyName prop
• 二维码上方新增一行「{nickname}邀请你来{familyName}」（familyName 空时用「浠艾福」兜底文案）
• 全组件字号缩小 2px（24→22、46→44 等，逐项调整）
• 画布尺寸、布局结构不变

页面接入

1. 文章详情 pages/article-center/article-detail.vue

• 去掉「分享」按钮（open-type="share" 那个），保留「海报」按钮
• generatePoster() 传新参数：dimensionCode（从 article.dimensionWeights 取权重最高维度）、summary（article.summary）、inviteText（「{昵称}邀请你一起阅读这篇文章」）
• 微信右上角转发不变（shareMixin 已带邀请码）

2. 商品详情 pages/discover-detail/product-detail/product-detail.vue

• 底部操作栏加「分享」按钮
• 点击 → getShareQrCode('pages/discover-detail/product-detail/product-detail', 'id=' + id + '&ref=' + referralCode) → 打开 ContentSharePoster
• 传参：dimensionCode（product.dimensionWeights 权重最高维度，空则用 product.domain 映射，再空默认）、coverImage、title、priceText（¥xx 会员¥xx）、ctaText="长按识别二维码 · 查看商品"、inviteText（「{昵称}邀请你一起看看这个好物」，昵称取 uni.getStorageSync('nickname')）
• 引入 shareMixin（拿邀请码）
• onLoad 解析 scene：options.query.scene 若含 ref= 则提取邀请码 → autoBindInviteCode(code)

3. 财富中心首页 pages/promotion/index.vue

• 邀请卡片区域加「分享给好友」按钮
• 点击 → getInviteQrCode() → 打开 SharePoster（家庭邀请卡，与邀请页一致，传 familyName）
• 家庭名来源：getFamilyMembers() 返回的 data.familyName（页面若无家庭数据则新增调用）

4. 家庭成员 pages/profile-extra/family-members.vue

• 将已有 this.familyName 传给 <SharePoster :family-name="familyName">（当前遗漏）

数据流

点击分享 → getShareQrCode(page, scene) → 后端生成小程序码 base64
        → 打开 ContentSharePoster → 下载封面图 → canvas 绘制 → 显示
        → 保存 → canvasToTempFilePath → saveImageToPhotosAlbum

边界情况

场景	处理
无维度数据	默认暖橙 #F97316
summary 空	跳过简介行，布局上移
商品无价格/会员价	只显示有的部分
封面图下载失败	现有占位图逻辑保留
二维码生成失败	toast 提示，不打开海报
scene 超长	后端已有 32 字符截断
无相册权限	现有引导去设置 modal 保留
家庭名空	「{nickname}邀请你加入浠艾福」
财富中心无邀请码	沿用 loadReferralCode 逻辑

测试

• 后端：零改动，mvn compile 验证不受影响
• 前端：npm run build:mp-weixin 编译通过 + 真机/开发者工具手测 5 个场景
• Canvas 海报：各维度配色渲染正确、文案无溢出、缩小字号生效

交付范围（本次不动）

• 后端代码、数据库：零改动
• App.vue：不改（商品页自解析 scene）
• 不新增依赖

涉及文件

文件	改动
cfc-frontend/components/ContentSharePoster.vue	参数化 + 配色 + 弹窗改造
cfc-frontend/components/SharePoster.vue	familyName prop + 文案 + 字号-2px
cfc-frontend/pages/article-center/article-detail.vue	去分享按钮、传新参数
cfc-frontend/pages/discover-detail/product-detail/product-detail.vue	加分享按钮、海报、scene解析、shareMixin
cfc-frontend/pages/promotion/index.vue	加分享给好友按钮、海报
cfc-frontend/pages/profile-extra/family-members.vue	传 familyName