Appearance
passno 界面规范（2026-11-16）
用户要求： 风格参照 reference-style.png，但要更简洁、易用、流畅。
参考图是第三方的设计稿（"Payvora"），只借它的风格：浅色、大量留白、柔和圆角、胶囊形导航、深绿品牌色配嫩绿主按钮、黑色控件。它的品牌、文案和具体布局不照搬。
1. 风格要点（从参考图提炼）
- 背景近白，内容放在白色大圆角卡片里。分隔靠细边框和留白，几乎不用阴影。
- 顶部导航是一排文字，当前项用浅灰胶囊底色标出。
- 页面大标题很大、字距收紧，上面一行小字面包屑。
- 一个页面只有一个嫩绿色主按钮，次要按钮是白底细边框的胶囊。
- 选项用"卡片式单选"（参考图里的 CSV / XLSX / PDF）；复选框和开关是黑色实心。
- 列表行高宽松，左边圆形头像（缩写字母），右边
⋯更多操作。 - 状态用小胶囊标签（浅绿底配绿点）。
2. 设计令牌
色值从参考图取样：弹窗部分没被遮罩压暗，是准确值；背后页面的颜色是按遮罩系数（约 0.71）换算回来的，可能有几个色阶的偏差。
css
:root {
/* 背景与表面 */
--bg: #FAFAF9; /* 窗口背景 */
--surface: #FFFFFF; /* 卡片、弹窗 */
--surface-muted: #F7F7F6; /* 卡片内的分组底色（参考图的 Columns 区域） */
--nav-active: #F1F2F2; /* 顶部导航当前项的胶囊底色 */
--border: #ECEDEC;
--border-strong: #DADCDB;
/* 文字 */
--text: #111214;
--text-2: #6B6F6E; /* 说明文字 */
--text-3: #9A9D9C; /* 占位符、次要元信息 */
/* 品牌与操作 */
--brand: #2F6A5C; /* 深绿：logo、图标底、链接 */
--brand-soft: #E8F1EE;
--accent: #9AD86B; /* 嫩绿：每页唯一的主按钮 */
--accent-hover: #8CCB5C;
--on-accent: #10200A; /* 主按钮上的文字，深色 */
--control: #0B0C0E; /* 复选框、开关、选中的单选 */
/* 状态 */
--ok: #2E7D32; --ok-soft: #EAF5E9;
--warn: #B45309; --warn-soft: #FDF3E7; /* 弱密码、即将过期 */
--danger: #C62828; --danger-soft:#FDECEC; /* 泄露、拒绝 */
/* 形状 */
--r-modal: 24px; --r-card: 20px; --r-input: 12px; --r-pill: 999px;
--shadow-modal: 0 24px 48px -12px rgb(17 18 20 / 0.18);
--scrim: rgb(17 18 20 / 0.30);
}- 深色模式： 同一套语义名字，
--bg #0F1011、--surface #17181A、--border #26282A、--text #F2F3F3，嫩绿主按钮保持不变。跟随系统设置。 - 字体：
- 用 Inter（OFL 许可，随应用打包）；中文回退到系统字体：PingFang SC、Microsoft YaHei UI、Noto Sans CJK SC。
- 数字用等宽数字（
font-variant-numeric: tabular-nums）。密码、TOTP、密钥这类值用等宽字体（JetBrains Mono，OFL）。
- 字号：
| 用途 | 字号 / 行高 / 字重 |
|---|---|
| 页面标题 | 32 / 40，600，字距 -0.02em |
| 区块标题 | 18 / 26，600 |
| 正文 | 14 / 20，400 |
| 说明 | 13 / 18，400，用 --text-2 |
| 统计数字 | 24 / 30，600 |
- 间距： 4 的倍数。卡片内边距 24，页面左右边距 40，列表行高 56。
3. 简洁、易用的规则
- 顶部导航最多 4 项： 条目、安全、共享、Agent。设置放进头像菜单。
- 一页只放一个主按钮。 条目页是"新建"，弹窗里是确认动作。其余都用次要按钮或
⋯菜单。 - 渐进展开。 默认只显示最常用的字段，高级选项折叠起来，比如生成器的字符集细节、条目的自定义分区。
- 不用二次确认弹窗，用撤销。 删除或归档后，底部弹一条"已删除 · 撤销"，保留 8 秒。真正不可逆的操作（移除共享成员、轮换密钥）才弹确认。
- 全键盘可用：
| 快捷键 | 动作 |
|---|---|
⌘K / Ctrl+K | 命令面板：搜索、跳转、执行 |
⌘N | 新建 |
⌘C | 复制密码 |
⌘⇧C | 复制用户名 |
⌘⌥C | 复制 TOTP |
⌘L | 锁定 |
↑ ↓ / Enter / Esc | 在列表中选择、打开、关闭 |
- 空状态要能直接动手。 第一次打开时只显示三张卡片：从 1Password 导入、从 Apple 密码导入、新建第一个条目。
- 措辞平实。 例如说"这个密码在 3 个网站重复使用"，而不是"检测到凭据复用风险"。
4. 流畅的指标（要写进测试或基准）
| 场景 | 目标 |
|---|---|
| 冷启动到解锁界面 | < 800 ms |
| 解锁（指纹通过后）到列表可见 | < 300 ms |
| 搜索每次按键到结果更新 | < 30 ms（1 万条目，本地索引） |
| 打开条目详情 | < 50 ms，不出现转圈 |
| 列表滚动 | 60 fps（虚拟列表，10 万条也不卡） |
| 动效 | 150–200 ms ease-out；只动 opacity 和 transform；尊重 prefers-reduced-motion |
- 本地操作不显示加载转圈，用乐观更新。只有同步、导入这类耗时操作才显示进度。
- 详情面板从右侧滑入，列表保持可见，不整页跳转。
5. 主要界面
5.1 主窗口：条目
┌───────────────────────────────────────────────────────────────────────────┐
│ [P] passno (条目) 安全 共享 Agent 🔍 🔒 (头像)│
│ │
│ 个人 · 全部条目 │
│ 条目 [ 导入 ] [ + 新建 ] ← 嫩绿│
│ ┌──────────────┬──────────────┬──────────────┬──────────────┐ │
│ │ 条目 1,284 │ 弱密码 12 │ 重复使用 7 │ Agent 授权 3 │ ← 统计卡片, │
│ │ │ 去处理 → │ 去处理 → │ 2 个将过期 │ 点击跳转 │
│ └──────────────┴──────────────┴──────────────┴──────────────┘ │
│ ┌───────────────────────────────────────────────┬───────────────────────┐ │
│ │ (全部 1,284) 登录 卡片 笔记 密钥 保险库▾ │ GitHub ⋯ ✕ │ │
│ │ 🔍 搜索标题、网址、用户名… │ alice@example.com │ │
│ │ ───────────────────────────────────────────── │ ───────────────────── │ │
│ │ (GH) GitHub 个人 今天 7:42 ⋯ │ 用户名 alice@… [复制] │ │
│ │ alice@example.com │ 密码 •••••• 👁 [复制]│ │
│ │ (GO) Google 账号 个人 昨天 ⋯ │ 验证码 123 456 ◔ 18s │ │
│ │ (NF) Netflix ●共享 家庭 10月3日 ⋯ │ 网址 github.com │ │
│ │ … │ 标签 dev 工作 │ │
│ └───────────────────────────────────────────────┴───────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘- 统计卡片照参考图的指标行做。只放能直接处理的问题，点击就进入筛选后的列表。
- 分类切换用参考图的胶囊页签（
All 51,712那种样式），带计数。 - 列表头像优先用网站图标；没有图标就用两个字母的缩写，底色取自标题哈希的淡色。
- 详情面板：每个字段旁有复制按钮，点一下就复制，按钮短暂显示"已复制"。TOTP 旁边是一个倒计时圆环。
5.2 密码生成器（弹窗，照参考图的导出弹窗布局）
┌────────────────────────────────────────────┐
│ 生成密码 (✕) │
│ 用于 github.com · 已按该网站规则调整 │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ k7#Rq-vN2p-Lx9!e-Wm4s ↻ [复制] │ │ ← 等宽字体，大号
│ │ ████████████░░ 很强 · 128 位熵 │ │
│ └────────────────────────────────────────┘ │
│ 类型 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │(●)随机字符│ │( )易记短语│ │( )PIN 码 │ │ ← 卡片式单选
│ └──────────┘ └──────────┘ └──────────┘ │
│ 长度 ──────────●────── 20 │
│ (■) 大写 (■) 数字 (■) 符号 (□) 排除易混字符│
│ ▸ 高级：每类最少个数、自定义字符集 │
│ │
│ [ 取消 ] [ 使用此密码 ] │
└────────────────────────────────────────────┘- 改任何选项，预览立即刷新，不需要点"生成"。
5.3 导入向导（弹窗）
- 第 1 步： 三张卡片式单选：1Password（
.1pux）、Apple 密码（.csv）、其他 CSV。下面是拖放区，旁边有一行小字链接"怎么导出？"。 - 第 2 步： 预览统计，例如"将导入 1,284 条 · 4 个保险库 · 23 个附件"，并列出"不会迁移的内容"，比如通行密钥。还有两个选项：目标保险库、遇到重复条目怎么办（跳过 / 合并 / 都保留）。
- 第 3 步： 完成报告，有一个"查看降级的字段"链接，主按钮是"开始使用"。
5.4 Agent 审批（系统级小窗，置顶）
┌──────────────────────────────────────────┐
│ (🤖) Claude Code 请求使用一个密钥 │
│ ~/code/github/passno · 终端 glass │
│ │
│ GitHub token → api.github.com │
│ POST /repos/*/issues │ ← 精确到域名、路径和方法
│ agent 看不到密钥的值 │ ← 绿色提示；注入环境变量时变成黄色警告
│ │
│ 允许多久 │
│ (●) 仅这一次 ( ) 本次运行 ( ) 8 小时 │
│ │
│ [ 拒绝 ] [ 允许 · Touch ID ] │
└──────────────────────────────────────────┘- 键盘操作：
Enter允许（会触发 Touch ID），Esc拒绝。 - 没有响应时，60 秒后自动拒绝。
- "Agent" 页面列出所有授权，每条都能撤销，右上角有一个"全部撤销"。
5.5 浏览器扩展：页面内填充菜单
- 小卡片紧贴在输入框下方，宽 320，圆角 16，用同一套颜色和字体。
- 每行显示头像、标题、用户名；
↑↓选择，Enter填充。 - 最底下一行是"生成强密码"，只在注册或改密码的表单上出现。
- 提交表单后，在页面右上角弹出一个保存或更新的提示卡片，有"保存"（主按钮）和"不保存"两个选项。
6. 前端技术建议（Tauri + 扩展共用）
- 框架： React + TypeScript + Tailwind（上面的令牌写成 Tailwind 主题）+ Radix UI 基础组件，可以参照 shadcn/ui 的写法。这些都是 MIT，风格也和参考图接近。
- 共用组件： 扩展和桌面端共用一个
ui/组件包。 - 列表和搜索：
- 列表用 TanStack Virtual 做虚拟化。
- 搜索索引放在 Rust 侧，前端只拿当前可见的那一页结果。
- 明文不进前端状态，只有显示或复制的那一刻才向 Rust 要。
- 图标： Lucide（ISC），线宽 1.5，尺寸 18。