导出品牌 logo 的多种尺寸 PNG（透明度保留，紧贴内容不留白边） #2

New Issue

2026-10-28T15:39:36Z

laoyang commented

2026-10-28 15:39:36 +00:00

需求

从站点左上角的 .logo（渐变圆角方块 + 锁形图标）导出可直接用于
favicon / 应用图标 / 分享卡的 PNG 素材。

具体要求

尺寸：1024 / 512 / 256 / 128 / 64 各一份
两种版本：
- 带阴影版（与页面观感一致，适合浅色背景）
- -flat 纯色无阴影版（适合贴彩色/深色背景）
背景必须透明（RGBA，alpha 通道有效），不能有不透明底
紧贴内容：不要四周留大片白边
正方形、主体居中
logo 内容不能变形、不能被裁切

验收标准

10 个文件，尺寸精确为 NxN，模式 RGBA
四角 alpha = 0（背景真透明）
主体占画布比例：无阴影版 ≥90%，带阴影版 ≥82%
主体中心与画布中心偏差 ≤2% 画布边长
带阴影版阴影可见、朝下、四边不被画布切断
紫渐变中心色接近 rgba(154,88,245)，圆角处透明、四边中点不透明

## 需求从站点左上角的 `.logo`（渐变圆角方块 + 锁形图标）导出可直接用于 favicon / 应用图标 / 分享卡的 PNG 素材。 ## 具体要求 - **尺寸**：1024 / 512 / 256 / 128 / 64 各一份 - **两种版本**： - 带阴影版（与页面观感一致，适合浅色背景） - `-flat` 纯色无阴影版（适合贴彩色/深色背景） - **背景必须透明**（RGBA，alpha 通道有效），不能有不透明底 - **紧贴内容**：不要四周留大片白边 - **正方形**、主体居中 - logo 内容不能变形、不能被裁切 ## 验收标准 1. 10 个文件，尺寸精确为 `NxN`，模式 `RGBA` 2. 四角 alpha = 0（背景真透明） 3. 主体占画布比例：无阴影版 ≥90%，带阴影版 ≥82% 4. 主体中心与画布中心偏差 ≤2% 画布边长 5. 带阴影版阴影可见、朝下、四边不被画布切断 6. 紫渐变中心色接近 `rgba(154,88,245)`，圆角处透明、四边中点不透明

laoyang referenced this issue from a commit

2026-10-28 15:39:52 +00:00

feat(assets): 新增品牌 logo 多尺寸 PNG（5 档 × 带阴影/无阴影）(#2)

laoyang commented

2026-10-28 15:40:11 +00:00

完成情况

已导出并提交 docs/logo/ 下 10 个 PNG，commit 3316640。

产物

文件	尺寸	主体占比
`logo-1024.png` / `logo-512.png` / `logo-256.png` / `logo-128.png` / `logo-64.png`	精确 NxN	85%（带阴影）
`logo-1024-flat.png` 等同名 `-flat` 后缀	精确 NxN	94%（无阴影）

全部 RGBA，四角 alpha = 0。

与需求的一处偏差（需要说明）

原站 .logo 的 box-shadow: 0 8px 20px -8px 按 40px 盒子调校，
等比放大到导出尺寸后向下外扩达主体边长的 37%。
而「主体居中 + 正方形画布」要求 向下外扩 ≤ (1-F)/(2F)，
F=0.88 时上限只有 6.8% —— 差一个数量级。
大柔光阴影装不进高填充率的正方形画布。

处理：把阴影收紧为 offsetY 2% / blur 7% / spread -1%（均可辨认但占位小）。
如果更希望保留原来那种大柔光，只能二选一：
① 降低填充率（回到白边问题）；② 输出非正方形画布。

验收

95 项像素判据全绿（尺寸/模式/四角透明/主体占比/主体居中/阴影可见/阴影朝下/阴影未切断/非全透明）
6 条反证全部抓到违规（小主体 55% / 主体偏 12% / 背景未清 / 主体贴边 / 阴影被裁掉 / 真实产物反向对照）
内容完整性：中心 rgba(154,88,245)，四角透明，四边中点不透明，圆角正常
远程逐文件 md5 与本地一致（10/10）

一处未做的验证

未做目视复核 —— 本次视觉模型不可用，只做了数值验收。
若观感上阴影偏淡/偏重，调 blur 与透明度即可。

过程中的一个真实缺陷（已归档 pitfalls #503）

第一版改完判据报 95 项全绿、主体占 87%，但阴影整个没了。
根因：裁切写成 im.crop(主体盒)，主体以外的像素被整条裁掉。
虽然判据的判定对象是主体，而缺陷恰好只影响主体以外——
判据越绿，缺陷越严重（阴影被裁掉后主体占比反而从 84% 升到 87%）。
已补「该留的还在」类判据并补反证。

## 完成情况已导出并提交 `docs/logo/` 下 10 个 PNG，commit `3316640`。 ## 产物 | 文件 | 尺寸 | 主体占比 | |---|---|---| | `logo-1024.png` / `logo-512.png` / `logo-256.png` / `logo-128.png` / `logo-64.png` | 精确 NxN | 85%（带阴影） | | `logo-1024-flat.png` 等同名 `-flat` 后缀 | 精确 NxN | 94%（无阴影） | 全部 `RGBA`，四角 alpha = 0。 ## 与需求的一处偏差（需要说明）原站 `.logo` 的 `box-shadow: 0 8px 20px -8px` 按 40px 盒子调校，等比放大到导出尺寸后**向下外扩达主体边长的 37%**。而「主体居中 + 正方形画布」要求 `向下外扩 ≤ (1-F)/(2F)`， F=0.88 时上限只有 6.8% —— 差一个数量级。 **大柔光阴影装不进高填充率的正方形画布。** 处理：把阴影收紧为 `offsetY 2% / blur 7% / spread -1%`（均可辨认但占位小）。如果更希望保留原来那种大柔光，只能二选一： ① 降低填充率（回到白边问题）；② 输出非正方形画布。 ## 验收 - 95 项像素判据全绿（尺寸/模式/四角透明/主体占比/主体居中/阴影可见/阴影朝下/阴影未切断/非全透明） - 6 条反证全部抓到违规（小主体 55% / 主体偏 12% / 背景未清 / 主体贴边 / **阴影被裁掉** / 真实产物反向对照） - 内容完整性：中心 `rgba(154,88,245)`，四角透明，四边中点不透明，圆角正常 - 远程逐文件 md5 与本地一致（10/10） ## 一处未做的验证 **未做目视复核** —— 本次视觉模型不可用，只做了数值验收。若观感上阴影偏淡/偏重，调 `blur` 与透明度即可。 ## 过程中的一个真实缺陷（已归档 pitfalls #503）第一版改完判据报 95 项全绿、主体占 87%，**但阴影整个没了**。根因：裁切写成 `im.crop(主体盒)`，主体以外的像素被整条裁掉。虽然判据的判定对象是主体，而缺陷恰好只影响主体以外—— **判据越绿，缺陷越严重**（阴影被裁掉后主体占比反而从 84% 升到 87%）。已补「该留的还在」类判据并补反证。

laoyang closed this issue

2026-10-28 15:40:11 +00:00

laoyang referenced this issue from a commit

2026-10-29 05:24:53 +00:00

docs(readme): 补 docs/logo 说明与 logo 重新导出步骤 (#2)

laoyang commented

2026-10-29 05:25:36 +00:00

补充：README 补齐 + 线上 404 的定性

1. 线上 `docs/logo/*.png` 返回 404 —— 是预期行为，不是故障

从 WSL 侧实测：

https://password.yangyq.net/                      HTTP 200  52081 bytes
https://password.yangyq.net/docs/logo/logo-1024.png  HTTP 404  306 bytes

原因：_sp_deploy.sh 的部署范围只有 index.html（SRC="$SRC_DIR/index.html"，
cp 到 $REMOTE_DIR/index.html）。docs/ 自始至终只是 README 的配图目录，从未上线。

index.html 里也不引用 docs/ 下任何文件（logo 是页面内联 SVG，不是 PNG），
所以线上不影响任何功能。

2. README 改动（commit `e09943f`）

目录树补 docs/logo/ 一行，并明写「只进仓库、不部署到站点」+ 那条 404 的结论，
避免后面有人把它当成资源缺失去修。
新增 logo 重新导出的三条命令。解释器写 python3 而不是 python
—— WSL 里 which python 为空，只有 /usr/bin/python3（Pillow 12.1.1），
照抄 python 会 command not found。
尺寸档位按实际产物校正为 64/128/256/512/1024 五档
（初稿误写成 32/64/128/256/1024，与 docs/logo/ 里实际 10 个文件名对不上）。

3. 校验

10 个文件逐个读尺寸与模式，全部精确 NxN + RGBA：

logo-1024.png  1024x1024 RGBA        logo-1024-flat.png  1024x1024 RGBA
logo-512.png    512x512  RGBA        logo-512-flat.png    512x512  RGBA
logo-256.png    256x256  RGBA        logo-256-flat.png    256x256  RGBA
logo-128.png    128x128  RGBA        logo-128-flat.png    128x128  RGBA
logo-64.png      64x64   RGBA        logo-64-flat.png      64x64   RGBA

4. 双端一致性

位置	HEAD	工作区
Gitea `origin/main`	`e09943f`	—
WSL `/home/yongquan/code/simple_password`	`e09943f`	干净
Windows `D:/Yongquan/code/simple_password`	`e09943f`	干净

README 双端 md5 均为 323eda62549fcb8892edfd6d6f32cc72。

## 补充：README 补齐 + 线上 404 的定性 ### 1. 线上 `docs/logo/*.png` 返回 404 —— 是预期行为，不是故障从 WSL 侧实测： ``` https://password.yangyq.net/ HTTP 200 52081 bytes https://password.yangyq.net/docs/logo/logo-1024.png HTTP 404 306 bytes ``` 原因：`_sp_deploy.sh` 的部署范围**只有 `index.html`**（`SRC="$SRC_DIR/index.html"`， `cp` 到 `$REMOTE_DIR/index.html`）。`docs/` 自始至终只是 README 的配图目录，从未上线。 `index.html` 里也不引用 `docs/` 下任何文件（logo 是页面内联 SVG，不是 PNG），所以线上不影响任何功能。 ### 2. README 改动（commit `e09943f`） - 目录树补 `docs/logo/` 一行，并明写「只进仓库、不部署到站点」+ 那条 404 的结论，避免后面有人把它当成资源缺失去修。 - 新增 logo 重新导出的三条命令。解释器写 `python3` 而不是 `python` —— WSL 里 `which python` 为空，只有 `/usr/bin/python3`（Pillow 12.1.1），照抄 `python` 会 command not found。 - 尺寸档位按**实际产物**校正为 64/128/256/512/1024 五档（初稿误写成 32/64/128/256/1024，与 `docs/logo/` 里实际 10 个文件名对不上）。 ### 3. 校验 10 个文件逐个读尺寸与模式，全部精确 `NxN` + `RGBA`： ``` logo-1024.png 1024x1024 RGBA logo-1024-flat.png 1024x1024 RGBA logo-512.png 512x512 RGBA logo-512-flat.png 512x512 RGBA logo-256.png 256x256 RGBA logo-256-flat.png 256x256 RGBA logo-128.png 128x128 RGBA logo-128-flat.png 128x128 RGBA logo-64.png 64x64 RGBA logo-64-flat.png 64x64 RGBA ``` ### 4. 双端一致性 | 位置 | HEAD | 工作区 | |---|---|---| | Gitea `origin/main` | `e09943f` | — | | WSL `/home/yongquan/code/simple_password` | `e09943f` | 干净 | | Windows `D:/Yongquan/code/simple_password` | `e09943f` | 干净 | README 双端 md5 均为 `323eda62549fcb8892edfd6d6f32cc72`。

laoyang referenced this issue from a commit

2026-10-29 06:59:58 +00:00

docs(readme): 修正校验脚本调用方式，标注跨机器产物不可复现 (#2)

laoyang commented

2026-10-29 07:09:04 +00:00

续：README 里写的命令实际跑不起来（commit `9ca33a0`）

上一条收尾只做到"文档写了"，没验证"文档能用"。实测三个问题：

1. 三个代码块缺 `cd ../_tooling`

脚本住在仓库外的 _tooling/，按原来的写法在仓库根目录执行：

$ node _sp_logo_export.js
node:internal/modules/cjs/loader:1433  throw err;

MODULE_NOT_FOUND。已在三段命令前补 cd ../_tooling。

2. `_sp_logo_export.js` 硬编码了单侧路径

迁移到 WSL 时把 URL/OUT 从 D:/Yongquan/... 改成了 /home/yongquan/... ——
Windows 侧就此废掉（会去读不存在的 /home/...）。上次"跨平台改造"只验证了 WSL 一端。

修法：

const REPO = process.env.SP_REPO || path.resolve(__dirname, '..', 'simple_password');
const URL = pathToFileURL(path.join(REPO, 'index.html')).href;
const OUT = process.env.SP_LOGO_DIR || path.join(REPO, 'docs', 'logo');

URL 用 pathToFileURL()，不手写 'file:///' + p（Windows 盘符会变 file://D:/，少一层斜杠）。
两端 node --check + 各实跑一次通过，脚本 md5 两端同为 d0e24e48。

3. 跨机器产物不可复现 —— 已实测，写进文档

同一份 index.html、同一版脚本，两端各重跑一次 docs/logo/：

侧	与已提交 10 个 PNG 对比	判据
Windows	10/10 逐字节相同	95/95 通过
WSL	10/10 全不同，阴影版最大通道差 255，差异像素 47–61%	95/95 通过

结论：字体度量 + 阴影模糊实现的跨平台差异，不是脚本缺陷。

处置：WSL 重跑的产物已 git checkout 恢复，仓库仍是 Windows 版；
README 与脚本头部都加了警告，说明重跑会得到一堆无法 review 的二进制 diff。

🔴 记一条判据教训："95 项判据全绿"不等于产物没变。内容一致性只能用 diff -r 判，
判据绿只说明几何关系对。

4. 终态

位置	HEAD	工作区
`origin/main`	`9ca33a0`	—
WSL	`9ca33a0`	干净
Windows	`9ca33a0`	干净

README 双端 md5 2dd2686a89a1f87c7a3f63bc54d55261。
线上 password.yangyq.net HTTP 200 / 52081 字节 / md5 f0da5275 —— 本次没动 index.html，不受影响。

## 续：README 里写的命令实际跑不起来（commit `9ca33a0`）上一条收尾只做到"文档写了"，没验证"文档能用"。实测三个问题： ### 1. 三个代码块缺 `cd ../_tooling` 脚本住在仓库外的 `_tooling/`，按原来的写法在仓库根目录执行： ``` $ node _sp_logo_export.js node:internal/modules/cjs/loader:1433 throw err; ``` `MODULE_NOT_FOUND`。已在三段命令前补 `cd ../_tooling`。 ### 2. `_sp_logo_export.js` 硬编码了单侧路径迁移到 WSL 时把 `URL`/`OUT` 从 `D:/Yongquan/...` 改成了 `/home/yongquan/...` —— **Windows 侧就此废掉**（会去读不存在的 `/home/...`）。上次"跨平台改造"只验证了 WSL 一端。修法： ```js const REPO = process.env.SP_REPO || path.resolve(__dirname, '..', 'simple_password'); const URL = pathToFileURL(path.join(REPO, 'index.html')).href; const OUT = process.env.SP_LOGO_DIR || path.join(REPO, 'docs', 'logo'); ``` URL 用 `pathToFileURL()`，不手写 `'file:///' + p`（Windows 盘符会变 `file://D:/`，少一层斜杠）。两端 `node --check` + 各实跑一次通过，脚本 md5 两端同为 `d0e24e48`。 ### 3. 跨机器产物不可复现 —— 已实测，写进文档同一份 `index.html`、同一版脚本，两端各重跑一次 `docs/logo/`： | 侧 | 与已提交 10 个 PNG 对比 | 判据 | |---|---|---| | Windows | **10/10 逐字节相同** | 95/95 通过 | | WSL | **10/10 全不同**，阴影版最大通道差 255，差异像素 47–61% | 95/95 通过 | 结论：字体度量 + 阴影模糊实现的跨平台差异，**不是脚本缺陷**。处置：WSL 重跑的产物已 `git checkout` 恢复，仓库仍是 Windows 版； README 与脚本头部都加了警告，说明重跑会得到一堆无法 review 的二进制 diff。 🔴 记一条判据教训：**"95 项判据全绿"不等于产物没变**。内容一致性只能用 `diff -r` 判，判据绿只说明几何关系对。 ### 4. 终态 | 位置 | HEAD | 工作区 | |---|---|---| | `origin/main` | `9ca33a0` | — | | WSL | `9ca33a0` | 干净 | | Windows | `9ca33a0` | 干净 | README 双端 md5 `2dd2686a89a1f87c7a3f63bc54d55261`。线上 `password.yangyq.net` HTTP 200 / 52081 字节 / md5 `f0da5275` —— 本次没动 `index.html`，不受影响。

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: laoyang/simple_password#2

导出品牌 logo 的多种尺寸 PNG（透明度保留，紧贴内容不留白边） #2

需求

具体要求

验收标准

完成情况

产物

与需求的一处偏差（需要说明）

验收

一处未做的验证

过程中的一个真实缺陷（已归档 pitfalls #503）

补充：README 补齐 + 线上 404 的定性

1. 线上 docs/logo/*.png 返回 404 —— 是预期行为，不是故障

2. README 改动（commit e09943f）

3. 校验

4. 双端一致性

续：README 里写的命令实际跑不起来（commit 9ca33a0）

1. 三个代码块缺 cd ../_tooling

2. _sp_logo_export.js 硬编码了单侧路径

3. 跨机器产物不可复现 —— 已实测，写进文档

4. 终态

1. 线上 `docs/logo/*.png` 返回 404 —— 是预期行为，不是故障

2. README 改动（commit `e09943f`）

续：README 里写的命令实际跑不起来（commit `9ca33a0`）

1. 三个代码块缺 `cd ../_tooling`

2. `_sp_logo_export.js` 硬编码了单侧路径