laoyang/simple_password
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页页脚加开源/演示/反馈三个链接（新窗口打开） #4

New Issue
Closed
opened 2026-11-03 05:20:43 +00:00 by laoyang · 1 comment
laoyang commented 2026-11-03 05:20:43 +00:00
Owner
Copy Link
Copy Source

需求

首页页脚加三个链接，全部新窗口打开：

名称 地址
开源地址 https://code.yangyq.net/laoyang/simple_password
演示地址 https://password.yangyq.net/
反馈 https://feedlite.yangyq.net/?sw=simple_password

现状

页脚目前只有一行文案（index.html:1087）：

<footer class="foot">
  <b>全程本地运算</b><span class="sep">·</span>使用 Web Crypto 密码学安全随机数<span class="sep">·</span>不联网、不上传、不留痕
</footer>

.foot 样式：text-align:center、font-size:11px、color:var(--text-3)。

三个链接均已实测可访问

feedlite  HTTP 200
gitea     HTTP 200
demo      HTTP 200

实现要点

  1. 三个链接放在现有文案下方，用 .sep 分隔复用现有视觉语言
  2. target="_blank" + rel="noopener noreferrer"（后者防止新窗口拿到 window.opener）
  3. 配色要符合页脚层级（var(--text-3)），hover 才提亮，别抢主体按钮的视觉
  4. 深色主题下也要能看清

判据（不能只看"加上了"）

  • 三个链接的 href 与需求逐字相符（含 ?sw=simple_password 查询串）
  • 三个都 target="_blank"
  • 三个都 rel 含 noopener
  • 深色/浅色两种主题下对比度达标
  • 布局不溢出（窄视口 320px）

⚠️ _sp_file_check.js 的「无外部资源引用」只查 script[src] 和 link[href]，
不查 <a href>，所以加链接不会误触发。但要新增判据验证链接本身，
否则"改了"和"改对了"没区别。

部署

改完走 ~/code/_tooling/_sp_deploy.sh，五步验证全过才算完。

## 需求 首页页脚加三个链接，全部新窗口打开： | 名称 | 地址 | |---|---| | 开源地址 | `https://code.yangyq.net/laoyang/simple_password` | | 演示地址 | `https://password.yangyq.net/` | | 反馈 | `https://feedlite.yangyq.net/?sw=simple_password` | ## 现状 页脚目前只有一行文案（`index.html:1087`）： ```html <footer class="foot"> <b>全程本地运算</b><span class="sep">·</span>使用 Web Crypto 密码学安全随机数<span class="sep">·</span>不联网、不上传、不留痕 </footer> ``` `.foot` 样式：`text-align:center`、`font-size:11px`、`color:var(--text-3)`。 ## 三个链接均已实测可访问 ``` feedlite HTTP 200 gitea HTTP 200 demo HTTP 200 ``` ## 实现要点 1. 三个链接放在**现有文案下方**，用 `.sep` 分隔复用现有视觉语言 2. `target="_blank"` + `rel="noopener noreferrer"`（后者防止新窗口拿到 `window.opener`） 3. 配色要符合页脚层级（`var(--text-3)`），hover 才提亮，别抢主体按钮的视觉 4. 深色主题下也要能看清 ## 判据（不能只看"加上了"） - 三个链接的 `href` 与需求**逐字相符**（含 `?sw=simple_password` 查询串） - 三个都 `target="_blank"` - 三个都 `rel` 含 `noopener` - 深色/浅色两种主题下对比度达标 - 布局不溢出（窄视口 320px） ⚠️ `_sp_file_check.js` 的「无外部资源引用」只查 `script[src]` 和 `link[href]`， 不查 `<a href>`，所以加链接不会误触发。但**要新增判据验证链接本身**， 否则"改了"和"改对了"没区别。 ## 部署 改完走 `~/code/_tooling/_sp_deploy.sh`，五步验证全过才算完。
laoyang commented 2026-11-03 05:27:43 +00:00
Author
Owner
Copy Link
Copy Source

完成情况

三个链接已上线：https://password.yangyq.net/

线上实测（不是"部署成功"就算）

$ curl -sS https://password.yangyq.net/ | grep -o '<a href="..." target=...'
<a href="https://code.yangyq.net/laoyang/simple_password" target="_blank" rel="noopener noreferrer">开源地址</a>
<a href="https://password.yangyq.net/" target="_blank" rel="noopener noreferrer">演示地址</a>
<a href="https://feedlite.yangyq.net/?sw=simple_password" target="_blank" rel="noopener noreferrer">反馈</a>
项 结果
线上 HTTP 200 / 53445 字节
线上 vs 本地 md5 cef97fff3d8b76139ece60d35b39bdfa（一致）
属主 / 权限 www:www 664
提交 9b92c1e，已推送

实现

  • 三个链接放在原页脚文案下方，<nav aria-label="项目相关链接"> 包裹
  • 全部 target="_blank" + rel="noopener noreferrer"
  • 视觉压在 --text-3，hover 才切 --accent，不跟主按钮抢焦点
  • ::after 加 ↗ 表示"会跳出本页"
  • flex + flex-wrap，320px 视口实测不溢出、不换行

回归（全部在 WSL 实跑）

判据 结果
功能 _sp_test.js 78 / 78
几何 _sp_visual.js 114 / 114
剪贴板 _sp_clip.js 19 / 19
file:// _sp_file_check.js 15 / 15
页脚外链 _sp_footer_links.py 23 / 23
页脚渲染 _sp_footer_render.py 7 / 7
功能反证 22 注入 / 22 抓到
几何反证 6 注入 / 6 抓到

判据不是空靶子（都验过能红）

判据 验证方式 结果
_sp_footer_links.py 对 git show HEAD:index.html 原始文件跑 9 项失败、退出码 1
_sp_footer_render.py 伪造现场：浅色图冒充 dark 抓到 2 项

过程中发现的两个问题（都修了，也都记进记忆）

1. 验判据时差点自欺

我先把改过的文件 cp 成 index_orig.html，再拿它当"原始文件"去验判据 ——
结果 23/23 全绿，看着像"判据没牙齿"。
真相是那个副本已经是改过的。原始文件的唯一可靠来源是
git show HEAD:index.html，不是手边的副本。

2. 深浅主题测试方法错了，判据却照样绿

第一版截图脚本只设了 data-theme="light"。但页面第 16–19 行的内联脚本会用
prefers-color-scheme 覆盖 data-theme，而 headless Chromium 默认偏好 light。

后果：所谓 "dark 用例" 拿到的其实是浅色页面，三张 PNG 的 md5 完全一样
（都是 74079 字节），而对比度判据照样"合格"—— 因为量的是同一张图。

判据绿了，测的东西却是错的。

修法：newContext({ colorScheme }) 必须给，并额外加一条
「深色与浅色截图 md5 必须不同」的判据来兜住这类错误。

修复后实测：dark 背景 (9,10,14) 对比度 7.00:1、light (244,245,248) 6.53:1、
narrow 6.16:1，全部达到 WCAG AA。

新增脚本

~/code/_tooling/（不属仓库，两端 md5 一致）：

  • _sp_footer_links.py —— 23 项：href 逐字、target、rel、样式、不溢出
  • _sp_footshot.js —— 生成深浅 + 320px 三张页脚截图
  • _sp_footer_render.py —— 7 项：主题真切换、背景色、对比度 AA、深浅图必须不同

记忆归档

memory/projects/simple-password/README.md 已更新，commit cbca40a 已推送。

## 完成情况 三个链接已上线：https://password.yangyq.net/ ### 线上实测（不是"部署成功"就算） ```bash $ curl -sS https://password.yangyq.net/ | grep -o '<a href="..." target=...' <a href="https://code.yangyq.net/laoyang/simple_password" target="_blank" rel="noopener noreferrer">开源地址</a> <a href="https://password.yangyq.net/" target="_blank" rel="noopener noreferrer">演示地址</a> <a href="https://feedlite.yangyq.net/?sw=simple_password" target="_blank" rel="noopener noreferrer">反馈</a> ``` | 项 | 结果 | |---|---| | 线上 HTTP | 200 / 53445 字节 | | 线上 vs 本地 md5 | `cef97fff3d8b76139ece60d35b39bdfa`（一致） | | 属主 / 权限 | `www:www 664` | | 提交 | `9b92c1e`，已推送 | ### 实现 - 三个链接放在原页脚文案下方，`<nav aria-label="项目相关链接">` 包裹 - 全部 `target="_blank"` + `rel="noopener noreferrer"` - 视觉压在 `--text-3`，hover 才切 `--accent`，不跟主按钮抢焦点 - `::after` 加 `↗` 表示"会跳出本页" - `flex + flex-wrap`，320px 视口实测不溢出、不换行 ### 回归（全部在 WSL 实跑） | 判据 | 结果 | |---|---| | 功能 `_sp_test.js` | 78 / 78 | | 几何 `_sp_visual.js` | 114 / 114 | | 剪贴板 `_sp_clip.js` | 19 / 19 | | file:// `_sp_file_check.js` | 15 / 15 | | 页脚外链 `_sp_footer_links.py` | 23 / 23 | | 页脚渲染 `_sp_footer_render.py` | 7 / 7 | | 功能反证 | 22 注入 / 22 抓到 | | 几何反证 | 6 注入 / 6 抓到 | ### 判据不是空靶子（都验过能红） | 判据 | 验证方式 | 结果 | |---|---|---| | `_sp_footer_links.py` | 对 `git show HEAD:index.html` 原始文件跑 | 9 项失败、退出码 1 | | `_sp_footer_render.py` | 伪造现场：浅色图冒充 dark | 抓到 2 项 | ## 过程中发现的两个问题（都修了，也都记进记忆） ### 1. 验判据时差点自欺 我先把改过的文件 `cp` 成 `index_orig.html`，再拿它当"原始文件"去验判据 —— 结果 23/23 全绿，看着像"判据没牙齿"。 真相是那个副本**已经是改过的**。原始文件的唯一可靠来源是 `git show HEAD:index.html`，不是手边的副本。 ### 2. 深浅主题测试方法错了，判据却照样绿 第一版截图脚本只设了 `data-theme="light"`。但页面第 16–19 行的内联脚本会用 `prefers-color-scheme` **覆盖** `data-theme`，而 headless Chromium 默认偏好 light。 后果：所谓 "dark 用例" 拿到的其实是浅色页面，三张 PNG 的 md5 **完全一样** （都是 74079 字节），而对比度判据照样"合格"—— 因为量的是同一张图。 **判据绿了，测的东西却是错的。** 修法：`newContext({ colorScheme })` 必须给，并额外加一条 「深色与浅色截图 md5 必须不同」的判据来兜住这类错误。 修复后实测：dark 背景 `(9,10,14)` 对比度 7.00:1、light `(244,245,248)` 6.53:1、 narrow 6.16:1，全部达到 WCAG AA。 ## 新增脚本 `~/code/_tooling/`（不属仓库，两端 md5 一致）： - `_sp_footer_links.py` —— 23 项：href 逐字、target、rel、样式、不溢出 - `_sp_footshot.js` —— 生成深浅 + 320px 三张页脚截图 - `_sp_footer_render.py` —— 7 项：主题真切换、背景色、对比度 AA、深浅图必须不同 ## 记忆归档 `memory/projects/simple-password/README.md` 已更新，commit `cbca40a` 已推送。
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
laoyang (老杨)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: laoyang/simple_password#4