把 10 屏压成 6 屏，
把 86 处微信绿换成能当文字用的青墨。

现状问题

• 工具总共只有 4 个，却配了搜索框 + 分类 tab + 金刚位 + 列表四套入口，全展开要滚一屏才看得全。
• 扫一扫出现 两次（金刚位 + 列表），两个点击路径，金刚位还比列表高 100rpx。
• 顶部 global-toolbar 70rpx 灰色长条（在线 / 点击登录）+ 页面白 container + 灰页底，三层底色叠在一起，没有任何内容承载。

新布局 一层

• nav（工具箱 + 头像 40rpx）→ meta 行 → 刻度线 → 单列四行工具 → 最近使用 → 页脚。
• 行高 112rpx：icon 48 圆角 12 + 主行 36/500 + 副行 24/ink-3（≤14 字单行）+ 右侧 chevron。
• 金刚位、分类 tab、搜索框、分组标题一起删；扫一扫只留一份。

为什么

• 4 个工具的目录不需要检索，搜索框是空转；删掉后首屏从「露出 2 个工具」变成「4 个全见 + 留白」。
• 单列一行一个工具，副行给「不打开 / 本地算」这种安全承诺，比金刚位图标更能解释「这个工具干什么」。
• 层级压到一层，配色和字号才有地方生效——现在的四种入口各自一套字号。

现状问题

• 整页只有「头像 + 一栏昵称 + 保存」，下半屏 500px 空白；没有页面标题，靠系统 nav 的黑底白字，和页面白底直接断开。
• 头像用了 <button open-type="chooseAvatar">，小程序 button 默认样式带 5px 圆角和 ::after 边框，真机上看是一个能点的方框。
• 暗色只写了 2 条 [data-weui-theme="dark"]（文字色 + 头像提示），页面没有暗底 → 深色模式仍是白屏；且 weui 的 theme 变量和全站暗色两套并存。

新布局 分组

• nav → 头像区 240 → 昵称 88 → 账号组（登录方式只读 / 退出登录 danger 文本）→ 吸底保存 88 + 安全区。
• 未登录态：头像与昵称置灰不可编辑，吸底按钮从「保存」换成「登录」主按钮，账号组不显示退出。
• global-toolbar 只留网络状态 + 头像 40 圆，删掉「在线 / 点击登录」文字；点头像进本页。

为什么

• 退出登录从全局工具条搬进「账号组」，全局条才可能从 70rpx 灰条缩成一个头像——现在它是全站最显眼却最没用的 70rpx。
• 页面标题 + 返回放回页面内，才和其余 5 屏一致；系统 nav 与页面底色的断层由 window.navigationBarTextStyle 那套统一处理。
• 吸底按钮解决「下半屏 500px 空白 + 保存按钮飘在半空」。

现状问题

• 结果卡标题 36rpx 加粗、内容 32rpx 灰字，没有一句「不会打开链接」——用户不敢点也不放心。
• 「复制 / 重新扫描」是两个 size="mini" 按钮右对齐，命中区不到 88rpx；历史列表用 max-height: calc(100vh - 480rpx) 硬算，小屏溢出、大屏留白。
• 空态是白卡里 200rpx 空槽 + 一句「暂无」，没有任何下一步动作。

新布局 结果优先

• nav → 常驻提示「仅显示内容，不会打开链接」→ 读数槽（mono 28 / break-all / 右下角字数）→ 操作行「复制 + 重扫」→ 刻度 → 历史（flex:1）。
• 清空历史要二次确认：showModal，确认键「清空」用 danger 色，只清当前工具。
• 空态：lock/code glyph 96 + 「还没有扫描记录」+ 一句下一步 + 主按钮 88。

为什么

• 扫一扫在 spencer 手里是高频第一入口，结果必须一屏不滚就能读完、复制；历史上限 20 条不变。
• 「不打开」是本项目最大的信任点，做成常驻灰字而不是一次性 toast。
• 把 calc(100vh - 480rpx) 换成 flex，才不会在小屏上把操作行顶出去。

现状问题

• 每个令牌嵌 3 个可点区（编辑 / 删除 / 复制），编辑与删除是 28rpx 字 + 8/16 内距 ≈ 44rpx，不到 88rpx 触控线的一半。
• 倒计时 28rpx #888 于白底 3.5:1，空态 #999 于 #f8f8f8 仅 2.7:1。
• 常驻说明卡 238rpx；4 个令牌 = 约 1440rpx ≈ 720pt，超一屏，「添加令牌」被挤出首屏。另：令牌码当前全显示「错误」（P0，见第 04 节）。

新布局 看一眼就走

• 状态条 72（进度条贴底 + 24rpx 剩余秒）→ 令牌行 178 ×N，整行即复制 → 说明折叠 56 → 吸底「添加口令」96。
• 编辑与删除收进长按菜单，常驻控件从 3 个降到 0 个。
• 码 48rpx 等宽分组显示「123 456」，但复制出去仍是纯 6 位。

为什么

• 令牌是「看一眼就走」的场景，字号与命中区优先，管理是低频动作——低频动作不该占常驻位置。
• 说明卡吃掉首屏 1/5，折叠成一行；添加入口放吸底，滚到哪都能加。
• 整行点击 + 短暂高亮，比原来「只有 toast」的反馈更明确，也顺带减少误触编辑。

现状问题

• 结果字号 24rpx = 12px，低于移动端 14px 底线；长值整段折行、无折叠。
• 📋 复制 7 处（3 编码 + 4 哈希），32rpx + opacity .6 贴在值尾部，与值同一点击区，误触就复制错内容。
• 页高约 1340rpx ≈ 670pt，比 623pt 可用高多 8%，哈希段整体被推到第二屏。

新布局 分段

• nav → segmented 72（编码 / 哈希 / 解码=待拍板）→ 输入卡 200 → 「编码」标题 + 刻度 → 3 行 88 → 页脚。
• 结果行：左标签 24rpx ink-2 / 值 mono 28 单行截断（点开看全文）/ 右 实心 copy 槽 88，不再 opacity .6。
• 哈希段 4 行，格式一行一个，长值 2 行 clamp + 展开。

为什么

• 12px 的结果在小程序里读不了，24→28rpx 并改等宽，视觉上才「像数据」。
• 7 个散点复制改为行尾固定槽，命中区从约 24pt 提到 44pt，且与值解耦。
• 编码与哈希是两种心智，分段后单屏不再一次堆 7 行。

现状问题

• 双层 tab：底部 4 段固占 102rpx + 容器 padding-bottom:140rpx，内层最多再 4 段，同一算法要点两次。
• 单面板塞了 6 个 section-title / 14 个 textarea / 11 个 📋；SM4 加密面板估算 1650rpx ≈ 2.6 屏。
• 参数默认值（填充、密钥格式、大小写、hex 显示）全埋在「更多选项」里 → 「结果不对」其实往往是默认值；SM9 是随机占位实现却仍从首页暴露。

新布局 去第二层 tab

• 顶部 segmented 4 段吸顶（SM2 / SM3 / SM4 / SM9）+ 二级 chip 行；底部仿 tabBar 删除，连同 padding-bottom:140rpx。
• 参数默认值从「更多选项」提到参数行内联；说明折成 56rpx 单行。
• SM9 若要留：加常驻 warn 提示条 + 主按钮 disabled；若下线：第 4 段消失，骨架不动。

为什么

• 页级 segmented 取代底部 tab，层级一次看清；activeTab 语义不变，navigateBack 行为不变。
• 「结果不对其实是默认值」是这类工具的典型排查成本，把默认值露出来最省事。
• 每算法 4–5 条常驻说明折掉，省约 250rpx。