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