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

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

@@ -0,0 +1,144 @@
+# 分享功能改造设计（海报组件参数化 + 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 |