# 切图资源说明

## 本项目零图片依赖

整个 Hadiah 页 **不需要任何切图资源**:

- 所有图标 (奖杯、奖牌、shield、AI 头像、底部 nav、QR 边框、海报边角) 均为 **inline SVG**
- 所有海报、drama 海报、banner 背景均为 **CSS 渐变 + SVG**
- 二维码使用 `qrcode.js` 在运行时生成,内容为 `referralLink`

→ 任意分辨率不糊,改色一处生效,包体最小。

---

## 但如果其它场景需要 (push/banner/工单/对外宣发)

这里独立导出了 4 个核心矢量资源,可直接拿去用,或导出 PNG 放到运营素材库:

| 文件                      | 用途                                       |
| ------------------------- | ------------------------------------------ |
| `logo-shortpro.svg`       | 品牌 logo,可用于 push 推送、邮件 header   |
| `icon-trophy.svg`         | 奖杯,可用于排行榜推送 / 奖励通知          |
| `icon-level-shield.svg`   | Lv2 等级勋章,可用于"等级提升"通知         |
| `icon-medallion.svg`      | 海报奖牌 (Promotor II),可用于成就推送     |

### 转 PNG 命令(任意尺寸)

```bash
# 用 inkscape 或 rsvg-convert
rsvg-convert -w 512 logo-shortpro.svg -o logo-shortpro@2x.png

# 或用 imagemagick
magick -density 600 -background none logo-shortpro.svg -resize 512x logo-shortpro.png
```

### 不要做的事

- ❌ 不要把这些 SVG 切成 PNG 替回前端 (会失真,包体变大)
- ❌ 不要给前端要求剧海报切图,前端已用 CSS 渲染。如果将来要换真实剧照,后端在 `DramaSupport` 接口加 `coverUrl: string` 字段,前端把 `<div class="drama-poster">` 换成 `<img :src="drama.coverUrl">` 即可。