refactor: 设置左移、主操作按钮等大异色、移除最近生成 (#1)
三处按需求调整: 1. 设置区移到左边 左 = 设置,右 = 输出。不调设置的人视线直接落到右侧密码与「复制密码」。 DOM 顺序也改成设置在前,窄屏单列时天然是设置在上、输出在下。 栅格比例同步反过来(设置 .92fr / 输出 1.08fr)。 2. 「复制密码」与「换一个」等大、不同色 .out-actions 从 flex 改成 grid repeat(2, 1fr),两个按钮严格等宽; 主按钮保留渐变,次按钮改为实心填充(新增 --surface-3,比 --surface-2 更实, 避免深色下与卡片同色而看着像没填充)。 3. 移除「最近生成」模块 删面板、清空按钮,以及 readHistory / pushHistory / renderHistory / ago 与 sp.history.v1 的全部读写。候选面板改为整宽单栏。 顺带清掉了共用工具 listItem 上的历史调用点。 验证(六套,全绿): 功能 jsdom 78 / 0 视觉几何对比度 114 / 0 真实剪贴板端到端 19 / 0 file:// 直开 15 / 0 功能反向注入 22 / 22 命中 视觉反向注入 6 / 6 命中 反向注入拆成两套:_sp_falsify.js 只喂 jsdom(不做布局), 把「按钮等大」「两栏左右」这类几何 bug 注进去影响不到被测判据, 会表现成"注入后仍全绿"、被误判成判据没牙齿(靶子选错)。 几何/视觉类归 _sp_visual_falsify.js。 删历史后专补两条"确实没了"的判据:DOM 节点不存在 + localStorage 不再写入 sp.history.v1 —— 后者能抓到"面板删了但 JS 还在偷写"。
This commit is contained in:
@@ -7,6 +7,7 @@
|
||||
## 特点
|
||||
|
||||
- **纯前端,零依赖** — 一个 `index.html`,没有构建步骤、没有 CDN、没有任何外部请求。断网可用。
|
||||
- **左设置、右操作** — 设置栏在左,不调任何设置时视线直接落到右侧的密码与「复制密码」。窄屏自动变上下排列,设置在上。
|
||||
- **密码学安全随机** — 走 `crypto.getRandomValues` + 拒绝采样消除取模偏差,不用 `Math.random()`。
|
||||
- **生成即复制** — 默认开启自动复制;剪贴板 API 不可用(如 `file://` 下的旧浏览器)时自动降级到 `execCommand`。
|
||||
- **深浅色** — 跟随系统偏好,可手动切换并记住选择。首帧前定主题,不会白屏闪一下。
|
||||
@@ -16,7 +17,6 @@
|
||||
- **自定义排除** — 想避开 `@`、空格或某个符号,直接填进去。
|
||||
- **强度与熵** — 按 `长度 × log₂(字符池)` 算真实熵,分五档给出评价,同时显示字符池规模。
|
||||
- **批量候选** — 一次出 5 个,点任意一条即复制。
|
||||
- **最近生成** — 只存在本机 `localStorage`,最多 6 条,可一键清空。
|
||||
|
||||
## 使用
|
||||
|
||||
@@ -44,7 +44,7 @@ python -m http.server 8000
|
||||
- 所有运算在浏览器里完成,**不联网、不上传、不写日志**。
|
||||
- 用 `crypto.getRandomValues` 取随机数,并按「拒绝采样」丢弃落在偏置区间的值,避免取模带来的分布倾斜。
|
||||
- 勾「每类至少一位」时,先从每类各取一位,剩余位从全池随机,最后整体洗牌 —— 保证覆盖的同时不引入位置可预测性。
|
||||
- 历史记录存在 `localStorage` 里,任何能访问这台机器的人都能看到。**在共用电脑上建议用完点「清空」**,或干脆关掉自动复制、不复制到历史。
|
||||
- **不保留任何生成记录**。密码只存在于剪贴板与页面显示,刷新即失去痕迹;`localStorage` 里只存偏好设置与主题,不存密码。
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
@@ -63,11 +63,18 @@ index.html 全部内容:结构、样式、脚本
|
||||
改完 `index.html` 后建议跑一遍(脚本在仓库外的 `_tooling/`,配合 `jsdom` 与 `playwright`):
|
||||
|
||||
```bash
|
||||
node _sp_test.js # 功能判据(jsdom,80 条,含反向注入 24 条)
|
||||
node _sp_visual.js # 真实浏览器几何 / 对比度 / 多视口(约 101 条)
|
||||
node _sp_clip.js # 真实剪贴板端到端(18 条)
|
||||
node _sp_test.js # 功能判据(jsdom,78 条)
|
||||
node _sp_visual.js # 真实浏览器几何 / 对比度 / 多视口(114 条)
|
||||
node _sp_clip.js # 真实剪贴板端到端(19 条)
|
||||
node _sp_file_check.js # file:// 双击直开(15 条)
|
||||
node _sp_falsify.js # 反向注入,证明功能判据有牙齿(22 条)
|
||||
node _sp_visual_falsify.js # 反向注入,证明几何判据有牙齿(6 条)
|
||||
```
|
||||
|
||||
反向注入必须单独跑视觉那套:`_sp_falsify.js` 只喂 `_sp_test.js`(jsdom 不做布局),
|
||||
把「按钮等大」「两栏左右」这类几何 bug 注进去根本影响不到被测判据,
|
||||
会表现成"注入后仍全绿",看着像判据没牙齿,其实是靶子选错。
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user