Dai0814
502dc35a9b
mirror-to-gitee / mirror (push) Successful in 4s
原先 previewShots 全部是空 file（占位框），截图文件本身也从未提交过， 所以线上界面预览区块一直是占位状态。 本次 - 替换达量断网截图为有数据的版本：原图是空表（显示"暂无数据"）， 与图注「状态查询与批量导出」不符；新图含 5 条记录 1859×890 - 新图实为 PNG，初版按原 .jpg 后缀保存会导致 Content-Type 错标， 已改为 web-cutoff.png 并同步引用 - 一并提交其余 6 张已被 previewShots 引用的实拍图 （工作台 / 业务受理 / 卡信息列表 / 智能诊断 / 执行日志 / 我的）， 否则引用会 404 - 重写 screenshots/README.md：原命名约定与实际文件完全不符， 改为列出当前实际使用清单 + 格式自检脚本 如实标注的缺口 - 小程序端只有「我的」1 张实拍图，其余 4 条（首页 / 卡片详情 / 业务办理 / 智能诊断）保持空占位。原先 5 条全部复用 app-profile.jpg， 会让图注与图片不符，已改回占位等补图 验证 - 浏览器实测：6 个缩略图图注正确，主图 naturalWidth=1859、complete=true - 切换小程序端正常显示「我的」页，其余 4 条显示占位框 - 全部图片格式与后缀一致（PNG/JPG 逐一校验）
55 lines
2.3 KiB
Markdown
55 lines
2.3 KiB
Markdown
# 界面预览截图
|
||
|
||
首页「界面预览」区块从这里取图。补图时**只改 `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}')
|
||
"
|
||
```
|