# 界面预览截图

首页「界面预览」区块从这里取图。补图时**只改 `data/content.ts` 的 `previewShots`**，不用动组件。

## 当前实际使用的文件

| 文件 | 内容 | 分组 |
| --- | --- | --- |
| `web-dashboard.jpg` | 管理端工作台：卡量与用量概览 | PC 管理端 |
| `web-business.jpg` | 业务受理：开通、续费与变更套餐 | PC 管理端 |
| `web-cards.jpg` | 卡信息列表：三码检索与批量操作 | PC 管理端 |
| `web-cutoff.png` | 达量断网：状态查询与批量导出 | PC 管理端 |
| `web-diagnosis.jpg` | 智能诊断：输入号码一键诊断 | PC 管理端 |
| `web-jobs.png` | 执行日志：批次任务与结果追踪 | PC 管理端 |
| `app-profile.jpg` | 我的：代理身份、业务工作台与账号设置 | 小程序端 |

> ⚠️ 小程序端后 4 条（用户端首页 / 卡片详情 / 业务办理 / 智能诊断）目前**复用了 `app-profile.jpg`**，
> 属于占位状态。补齐后把各自的 `file` 换成对应文件名即可。

## 规格

| 项 | 建议 |
| --- | --- |
| PC 管理端 | 1600 × 1000 左右（16:10），现有图为 1859 × 890 |
| 小程序端 | 750 × 1334（9:16 竖图） |
| 单张体积 | 400 KB 以内 |
| 格式 | PNG 或 JPG。**后缀必须与真实格式一致**，否则服务器返回错误的 Content-Type |
| 内容 | 用演示数据，不要出现真实客户名、真实 ICCID、真实手机号 |
| 敏感信息 | 账号、口令、密钥片段一律打码 |

## 补图步骤

1. 把图片放进本目录
2. 打开 `data/content.ts`，找到 `previewShots`，改对应条目的 `file` 字段
3. 保存，页面自动更新（dev 模式热更新）

`file` 留空时页面显示带图注的占位框，不会报错，也不影响构建。

## 检查格式是否与后缀一致

在 screenshots 目录执行：

```bash
python -c "
import os
for f in sorted(os.listdir('.')):
    if f.lower().endswith(('.jpg','.jpeg','.png','.webp')):
        d = open(f,'rb').read(12)
        real = 'PNG' if d[:8]==b'\x89PNG\r\n\x1a\n' else ('JPEG' if d[:2]==b'\xff\xd8' else '?')
        ext = f.rsplit('.',1)[1].upper()
        flag = 'OK' if (real=='PNG' and ext=='PNG') or (real=='JPEG' and ext in ('JPG','JPEG')) else '不符'
        print(f'{f:24} 实际={real:4} 扩展={ext:4} {flag}')
"
```