dsh-vaultwarden 0.8.9 → 0.9.1

package/CHANGELOG.md

@@ -4,6 +4,34 @@ All notable changes to `dsh-vaultwarden` are documented here.
 The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.1] — 2026-10-21
+
+### 修复
+
+- 打开凭据库面板时不再闪烁。根因不是缺动画，是布局在加载过程中两次改变尺寸：面板先渲染一张单行「同步中」卡片再长成侧栏+列表，侧栏先画一行再补到九行，工具栏要等第一次读取才出现。实测打开过程 14 帧采样中 rootHeight 由 392→624、navHeight 由 48→418。
+- 工具栏改为首帧常驻，同步徽标槽在加载期放等高占位，四轨道不再重新测量。
+- 内容区与详情的「同步中」白屏改为骨架屏：行数与字段结构都和真实内容一致，所以骨架与答案等高，替换时不跳。
+- 侧栏在 overview 到达前先画三个固定地点，并补一段与真实侧栏登高的占位块，不再先一行后九行。
+
+### 新增
+
+- 过渡规范：三级时长（120/180/260ms）、位移上限 6px、列表行 18ms 错峰入场、详情卡按宽窄屏分别从右侧/下方进入、分区切换时旧行保留并淡化而非清空、整面切换淡入。
+- 统一键盘焦点环（:focus-visible 2px accent），修复编辑器输入框 outline:none 导致键盘使用者看不到焦点。
+- 全部动效在 prefers-reduced-motion 下直接给终态。
+
+## [0.9.0] — 2026-10-21
+
+### 变更
+
+- 面板的按钮改成图标：字段行里的「显示/复制」现在是眼睛与双页图标（显示中换成闭眼、复制成功后换成对勾），位置仍在值那一行的右侧。
+- 详情底部的四个写操作（编辑/归档/移入回收站/移动到文件夹，回收站条目为恢复）改成一条页脚工具条，一行 28px 图标方格。
+- 每个图标按钮都带原生悬停提示，提示写的是这个动作对该条目做了什么（例如「移入回收站：软删除，之后仍可恢复」），不只是按钮名。
+
+### 修复
+
+- 手机端字段行的「显示/复制」不再换行占位：窄屏下标签独占一行，值与两个图标同行、图标靠右，每个密码行省下约 34px 高度。
+- 侧栏「全部条目 / 收藏 / 验证码」三个图标重画：原先光学跨度分别是 9.2 / 11.4 / 13.0，并排时一大一小；现在统一到约 12.0（四宫格 11.8、五角星 12.0、时钟环 12.0），四宫格填充由 0.16 降到 0.06，16px 下不再糊成一团。
+
 ## [0.8.9] — 2026-10-19
 
 ### 安全

package/README.md

@@ -142,7 +142,6 @@ bitwarden_get { "id": "…", "field": "totp", "waitFresh": true }
 - 工具返回的明文凭据会进入会话上下文（这是"让模型能用密码"的前提）。提示词要求模型不要回显、不要写入文件。
 - 写回默认关闭（`accessMode: readonly`）；`ask` 档**模型工具**每次写入都走 DSH 审批确认，`auto` 直接写入（面板的人工操作不受这一档限制）。个人条目与组织条目都支持；彻底删除只有 `bitwarden_delete` 工具能发起，必须显式带 `confirm: true`，面板与 RPC 只能移入回收站。
 - 落盘缓存带 HMAC-SHA256 签名（密钥 `~/.dsh/data/dsh-vaultwarden/cache.key`，`0600`）：签名不符、账号不匹配或没有密钥的缓存一律丢弃重下，防止把别处的缓存文件当成自己的读进来。
-- 与本地 `dsh-vault` 插件**无标识冲突**（条目 id / 工具名 / 设置命名空间 / 设置页 id 均不同）：本插件是 `dsh-vaultwarden` ↔ `bitwarden_*` ↔ `bitwarden` ↔ `vaultwarden`，dsh-vault 是 `vault` ↔ `vault_*` ↔ `settings.vault` ↔ `vault`。
 
 ## 排错
 

package/docs/ui-design.md

@@ -15,6 +15,40 @@
 - 0.2.0 起配置表单由宿主按 `Config` schema 渲染，插件不再自绘卡片；旧的 `settingsScope` / `settings.plugin.item` 已被移除，继续用它们会导致前端整块不注册（曾实测踩到）。
 - 会话内表面（composer dock / 右栏 tab）都要求 session 作用域或依赖其他插件，v1 不做。
 
+## 1a. 加载与过渡（v0.9.1）
+
+「点进去会闪一下」不是动画缺失，是**布局两次改变主意**：面板先渲染一个单词的卡片，
+再长成侧栏 + 列表；侧栏先画一行、再长到九行；工具栏要等第一次读取才出现。任何叠在
+这上面的 transition 都藏不住一个自己改变尺寸的盒子，所以修法分两层。
+
+### 先让尺寸不动
+
+| 位置 | 之前 | 现在 |
+|---|---|---|
+| 工具栏 | 等 `state === 'ready'` | 首帧就在（它是面板的框架，不是答案的一部分） |
+| 同步徽标槽 | 加载时塌成 0，回答后撑开 | 加载时放一个等高的不可见占位，四轨道从不重新测量 |
+| 内容区 | 一行「同步中」卡片 | 11 行骨架（超过 `min(58vh,560px)` 的上限，所以骨架与真实列表等高） |
+| 侧栏 | 只画「全部条目」，等 overview 再补到 9 行 | 三个固定地点立刻画 + 与真实侧栏等高（292px）的占位块 |
+| 详情 | 一行「同步中」再变成字段 | 骨架画出字段行的两列结构，卡片不二次变高 |
+
+实测（1280×900，真实 428 条）：打开面板的 14 帧采样里 `rootHeight` 恒定 624px、
+`navHeight` 恒定 414px（与真实 418px 差 4px，肉眼不可见），零跳动。
+
+### 再让出现有形状
+
+| 过渡 | 时长 | 用途 |
+|---|---|---|
+| `--vw-fast` 120ms | 控件确认按压：悬停、焦点、复制成功 |
+| `--vw-base` 180ms | 内容出现：列表、详情卡、表单 |
+| `--vw-slow` 260ms | 整面切换：登录表单 ↔ 库 ↔ 设置表单 |
+
+- **列表行错峰入场**：每行 18ms，最多前十行。整块同时出现像重绘，按序到达像数据流进来——这是「看起来不再像在加载」最有效的一处。
+- **详情卡从来的方向进入**：宽屏从右侧 6px（呼应「来自你点的那一行」），窄屏从下方 6px（呼应「下一屏」）。
+- **整个面板的位移上限 6px**：这是弹窗里的设置面板，不是启动页，位移越大越显慢。
+- **分区切换不清空列表**：旧行留着并压到 0.55 透明度，新行到了再换。一列先空再满正是要消掉的闪烁。
+- **统一焦点环**：`:focus-visible` 2px accent、offset 2，行内 -2。此前 `outline: none` 让编辑器所有输入框键盘不可见。
+- **`prefers-reduced-motion` 一律给终态**，不是更快——用户要的是没有，不是快点。
+
 ## 1b. 图标规范
 
 | 位置 | 形态 | 来源 |
@@ -96,9 +130,10 @@ Host 侧由 `lib/gateway.js`（`TypertRemoteService` 子类，命名空间 `vw`
   `<480px` 才把侧栏搬到顶部、钻取时藏侧栏；`481–620px` 把字段行的标签列从 92px 收到 72px，`<480px` 再让字段行整行竖排。**容器查询的书写顺序是有语义的**：字段行的三条规则特异性相同，所以窄的那条必须写在宽的后面——曾把 `max-width:620px` 写在 `max-width:480px` 之后，结果 72px 标签列在任何宽度都赢，竖排那条永远不生效，手机上密码的掩码点折成两行、显示/复制被挤到卡片外。`<170px` 时最后才收起行内徽章组与 chevron（名称优先保住，状态在打开的详情里本来就有）。不支持容器查询的浏览器回退到 `@supports not (container-type)` + 760px 窗口断点。
 - **分区菜单**（侧栏，计数来自 `vw/overview`）：全部条目 / 收藏 / 验证码 三行，然后是两组带标题的层级：类型 (n)（登录、安全笔记、银行卡、身份信息、SSH 密钥，按数量降序）与 文件夹 (n)（各文件夹 + 未归类），最后是 归档 与 回收站。点一行即把列表切成该分区的池子（`vw/list` 带 `section`/`sectionValue`，宿主侧收窄后才计数、才分页，因此计数与列表永远一致）；当前分区带 `aria-current` 高亮。
    每行的图标是**画出来的 SVG 线稿**（`NAV_ICON_SHAPES` → `navGlyph`），不再用 `▦ ★ ⏱ ◍ ▸ · ⌸ ⌫` 这些字体字符——它们的光学大小与基线随宿主字体变。**画法严格对齐宿主自己的图标语言**（从 `dsh-web-frontend` 的 `Icon*OutlineRegular` 家族实证）：16×16 视框、`strokeWidth: 1`、**不覆盖** `stroke-linecap/linejoin`（宿主靠 SVG 默认 miter 拐角取得锐利感，插件若改成圆角就是在同一列里画另一套图标）、坐标为光学校准值而非粗网格对齐、需要体块时用 `fill: currentColor` + `fillOpacity 0.06–0.16`（宿主对 IconFolderOpenOutlineRegular 的托盘就是这么画的）。视觉框统一在 1.5–14.5，四周留约 1.5 的空气——把视框填满才是「傻大黑粗」的根因。分类标记（文件夹 vs 未归类）靠**体块浓淡**区分，不靠再加线条。
+    **「一样大」指的是光学跨度一致，不是视框一致**：同一列里的图标必须落到同一个约 12.0 宽度上（文件夹 12.2、银行卡面 13.0、垃圾桶 12.2），否则等高的行里窄 3 个单位的那个一定看着更小。v0.9.0 就是因为没守这条被指出来：全部条目只画了 9.2（2.1→13.9 改前是 3.4→12.6）、收藏 11.4、验证码却占满 13.0（1.5→14.5 的整圆），三者并排一大一小。现在全部条目四宫格 2.1→13.9 = 11.8、五角星按外接圆解算到 2.0→14.0 = 12.0、时钟环 2.0→14.0 = 12.0。五角星的坐标是解算出来的（外径 6.31、内径取黄金比 0.382、中心 (8, 8.15)），不是手描——手描的星要么点太胖要么太瘦。四宫格的体块用 0.06 而不是 0.16：四块满色在 16px 会糊成一个黑疙瘩，这是逐版对比确认的。
   计数是**统一的扁平药丸**（`min-width 22` / 高 20 / `border-radius: 999px` / tabular-nums），一位数的回收站与三位数的全部条目等重、数字对齐成列；当前行的药丸反色成面板底色，避免 bg-2 叠在 bg-2 上看不见。计数元素里始终只有裸数字，样式只是它外面的壳。
 - **徽章体系**（`Badge` / `BadgeRow` / `badgeStyle`，一处定义全局复用）：宿主 tag 的同一套度量——`height 19` / `padding 1px 8px` / `font-size 11` / `line-height 17` / `weight 500` / 全圆角 / tabular-nums，无描边、无渐变、无阴影（扁平），底色取宿主每档状态的 **tertiary 浅色**（浅色主题是淡色洗，深色主题是深色洗，随 `body[data-ds-dark-theme]` 自动翻转），字色是同一状态色与正文墨色混合（`color-mix`，不支持时退回状态色）。语义五档、克制配色：`info` 蓝=TOTP/实时、`ok` 绿=通行密钥/重新验证开关、`warn` 琥珀=回收站、`muted` 灰=已归档、`neutral` 墨=条目类型等分类标记；**颜色只花在状态上**，分类一律中性色。中性与灰色两档用 `当前墨色 + 低透明度` 而不是「与 surface 混合」——后者在深色主题会翻成黑卡片上的浅色块。
-- **行内控件**（`S.inlineButton`）：字段行里的复制、显示/隐藏、读取这一项、验证码行的复制共用同一个盒子（`height 28` / `padding 0 11px` / `radius sm` / `font-size 12` / `flex: none`）。它们总是成对出现，所以必须同高同字号——此前是 28/30/32 三套近似字面量，「显示」和「复制」并排时高矮字号都不一致。`CopyButton` 用 `inline` 开关选这一套；完成复制的绿色反馈只换颜色不换盒子，避免点击瞬间按钮跳动。
+- **行内控件**（`S.inlineIconButton` / `IconButton` / `RevealButton` / `CopyButton` 的 `icon` 形态）：字段行里的复制、显示/隐藏、读取这一项、验证码行的复制共用同一个**方格**（`28×28` / `radius sm` / `flex: none` / 图标 14px）。v0.9.0 起它们从文字标签改成图标：显示=睁眼（`eye`）、隐藏=闭眼（`eyeOff`）、复制=双页（`copy`）、复制成功=对勾（`check`）、读取窄字段=带加号的眼（`eyePlus`）。文字标签**移进 `title` 与 `aria-label`**，所以每个控件仍然可读、可被读屏念出、并且有原生悬停提示——只是不再占宽度。这一步是窄屏布局的前提：两个 28px 文字按钮在任何列宽里都放不进值那一行，改成两个 28px 方格后，手机上面板字段行由三行缩回两行（标签一行、值与图标一行），每行省下约 34px。图标画法与 `NAV_ICON_SHAPES` 同一套规范（16×16 视框、1px 描边、体块 `fillOpacity 0.08`/`0.16`）。完成复制的绿色反馈只换颜色不换盒子，避免点击瞬间按钮跳动。
 - **字段行**（`S.fieldRow`）：`align-items: start` 而非 center——一个值可能是一行也可能是五行（长 URL、笔记），居中会让标签和右侧控件落在值中间，同列基线不一致；顶端对齐后标签与值首行、右侧控件永远同一水平线。
 - **分区缓存**：切回刚离开的分区时，若该分区快照在 5 分钟内（`SECTION_CACHE_MS`）就**直接重绘、零 RPC**；搜索、刷新按钮与写操作不走缓存（一律重查）。首次进入某分区仍是「先画后拉」。
 - **列表**：行 = 服务端缓存的站点图标（`<img>` 指向 `<serverUrl>/icons/<host>/icon.png`，主题无关、随服务器缓存；加载失败或像素小于 `ICON_MIN_PX = 24` 的行退回中性首字母圆枕，纯数字名如 IP 不会退化成同一个「1」）+ 名称 + 用户名·URI 截断 + 徽章组 + 收藏星 + chevron；归档条目带「已归档」徽章（muted），回收站条目名称划掉、带「回收站」徽章（warn），带动态码的带 TOTP 徽章（info）；`role="listbox"`/`role="option"` + `aria-selected`；选中行用 bg-2 高亮。收藏星与 chevron 都是**同一套 16×16 线稿**（`navGlyph`），不用 ★ / › 字符——字符的光学大小和基线随宿主字体变。徽章由 `BadgeRow` 包成一组（固定 6px 间距），所以一行里两个徽章与相邻只有一个徽章的行左右边缘仍然对齐。
@@ -106,7 +141,7 @@ Host 侧由 `lib/gateway.js`（`TypertRemoteService` 子类，命名空间 `vw`
 - **验证码分区行**（等于 m00193 的 App 形态）：图标 + 名称 + 用户名 + 30px 倒计时圆环（环心写剩余秒数）+ 6 位动态码（等宽、3+3 分组「686 029」）+ 右侧复制按钮（点它不打开条目）。动态码每秒只在这几行里请求。
 - **详情头部**：图标位与列表行同源（`iconFor(value, S.avatarImgLg) ?? monogram(value)`）——服务器有站点图标就显示图标，没有才退回 36px 的字母圆枕。这两处曾各走各的：列表行取图标，头部直接画字母，于是点开条目图标就消失了（v0.7.1 修）。大圆枕里用 22px 的图，列表行仍是 18px。reprompt 条目的头部同样拿得到图标：`projectItem` 的门只挡字段，网址本就在打开它的那一行里露着。
 - **详情**：用户名/密码（默认掩码，显示/隐藏切换）/TOTP（30px 圆环倒计时，每秒请求、卸载清理定时器；剩余秒数写在环心，弧随剩余时间缩短，色从绿经橙渐变到红，`role="img"` + `aria-label` 报出秒数，`prefers-reduced-motion` 下不扫弧只跳格）/URI/目录/备注/自定义字段；每行复制按钮，成功 1.5 秒反馈（`aria-live`）。按类型投影：卡片（卡号掩码到后四位/持卡人/品牌/有效期/安全码）、身份（姓名/邮箱/电话/地址分组合并）、SSH 密钥（公钥与指纹明文、私钥掩码）；附件与密码历史各自折叠（附件只显示文件名与大小，不提供下载）；带通行密钥的条目显示徽标。回收站条目顶部有软删说明横幅，读取时带 `includeTrashed`。
-- **写操作**（`accessMode` 为 `ask`/`auto` 时）：详情底部「操作」区 = 归档/取消归档、移入回收站、恢复（仅回收站条目）、移动到文件夹；点任一操作先出确认框（文案随操作变化，注明**面板操作不受 accessMode 门禁保护，请谨慎操作**），确认后才发 `vw/update`/`vw/remove`/`vw/restore`。移动文件夹用独立小框（不移动 + 文件夹列表，取消发送 `folderId: null`）。`readonly` 档不渲染按钮，显示一行「当前为只读模式」。写入期间显示「正在写入…」，完成后就地提示并刷新。
+- **写操作**（`accessMode` 为 `ask`/`auto` 时）：详情底部是一条**页脚工具条**（`S.actions`，顶部一条 hairline，右侧对齐一行图标方格 `28×28`、间距 6、无边框、静止态用次级墨色、悬停才上底色与正文墨色）= 编辑/归档（取消归档）/移入回收站（红字，仅正常条目）/移动到文件夹，回收站条目只有恢复。v0.9.0 起从「操作」小标题 + 四个不等宽文字按钮改成图标方格：四个文字按钮里最长的两个（「移入回收站」「移动到文件夹」）正是把这一行、进而把卡片顶出面板右缘的原因。图标分别用 `pencil` / `archiveBox` / `trash` / `moveFolder` / `restore`，**全部语义进 `title`**，并且 tooltip 说的不只是按钮名、而是这个动作对该条目到底做了什么（归档会让模型搜索不再返回它、移入回收站是软删除可恢复）。点任一操作先出确认框（文案随操作变化，注明**面板操作不受 accessMode 门禁保护，请谨慎操作**），确认后才发 `vw/update`/`vw/remove`/`vw/restore`。移动文件夹用独立小框（不移动 + 文件夹列表，取消发送 `folderId: null`）。`readonly` 档不渲染按钮，显示一行「当前为只读模式」。写入期间显示「正在写入…」，完成后就地提示并刷新。
 - **reprompt**：Bitwarden 开启「重新验证」的条目不出明文，**任何字段都不出**。详情里是锁形说明 + **主密码输入框** + 「输入主密码解锁」（回车即提交），输错留在原地报错。这道门没有布尔旁路：`reveal` 不收 `confirm`，解锁只能由 `vw/authorizeReprompt` 打开，时间窗（默认 5 分钟）内整条可读，窗在面板上以「已解锁 N 分钟」显示。
 - **窄字段按需读取**：`all` 只给存在位（`hasCard` / `hasIdentity` / `hasSshKey`，SSH 另给指纹）。详情渲染成「含银行卡 · 读取这一项」一行，点一下才发一次 `vw/reveal { field: 'card' }`，取回的行替换那一行；切换条目时这些窄字段状态一并清空。
 - **编辑器**（v0.8.0，`accessMode` 为 `ask`/`auto` 时）：详情「操作」区多一个**编辑**，工具栏多一个**新建条目**。编辑器**整体替换详情**，不是详情里的一节——两者回答的是不同问题（「这条是什么」vs「这条该改成什么」），半开的编辑器压在只读摘要下面读起来像一个存不进的表单。