dsh-vaultwarden 0.8.7 → 0.8.8

package/CHANGELOG.md

@@ -4,6 +4,23 @@ 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.8.8] — 2026-10-18
+
+### 新增
+
+- 面板标题行改为「Vaultwarden 凭据库 + dsh-vaultwarden + 版本号 + GitHub 链接」，版本号与仓库地址由构建时从 package.json 写入、宿主 boot 回报时以宿主为准。
+- 侧栏与条目图标按宿主图标语言重绘：16 网格、1px 描边、0.16 淡体块，视觉框统一留白。
+- 新增统一徽章体系：19px / 11px / 全圆角 / 扁平无描边，按语义分蓝绿琥珀灰墨五档，底色取宿主状态 tertiary 色并随主题翻转。
+
+### 修复
+
+- 修复移动端字段行竖排规则从未生效：620px 标签列规则排在 480px 之后且特异性相同，导致密码掩码折两行、显示/复制按钮漂出卡片。
+- 修复面板横向溢出：滚动区负边距使其始终比列宽多 4px，改用 scrollbar-gutter；侧栏与列表项补 border-box。
+- 修复手机窄面板下详情头部与操作按钮溢出卡片。
+- 修复「显示」与「复制」按钮高度字号不一致（28/30/32px 三套字面量）。
+- 修复字段行未顶端对齐，标签与控件随值长度漂移。
+- 修复掩码点在窄屏折成两行。
+- 修复标题行折行时只拆下半截（包名留在上行、版本号落到下行）；改为标题组与元信息组整体换行。
 ## [0.8.7] — 2026-10-17
 
 ### 安全

package/docs/release.md

@@ -2,9 +2,16 @@
 
 ## 一句话
 
-跑门禁 → 提交并推 main → 打 tag → `npm pack` → 建 Release 并**同时上传带版本号与不带版本号两个资产** → 四道复验。
+跑门禁 → 提交并推 main → 打 tag → `npm publish` → `npm pack` → 建 Release 并**同时上传带版本号与不带版本号两个资产** → 四道复验。
 
-**市场条目不需要再动。** v0.8.1 起条目的 tarball 指向 `releases/latest/download/dsh-vaultwarden.tgz`（不带版本号的稳定资产名），GitHub 会自动解析到最新 release，因此发新版本不再产生市场 PR。
+**市场条目不需要再动，但 npm 必须发。** v0.8.1 起条目的 tarball 指向 `releases/latest/download/dsh-vaultwarden.tgz`（不带版本号的稳定资产名），GitHub 会自动解析到最新 release，因此发新版本不再产生市场 PR。
+
+**但「发版即自动更新」还依赖 npm。** 市场判断某条目有没有新版本时，走的是 `dsh-market` 的 `lib/updates.js`：目录条目的 `npm` 字段有值时，才拿 registry 的 `dist-tags.latest` 和用户已装版本比较。目录的 `npm` 字段来自 `awesome-dsh-plugin` 每天 02:23 UTC 的 `probe-npm.mjs`——它读仓库 `package.json` 的 `name`，再去 registry 校验 `repository` 是否指回本仓库。所以：
+
+- 只推 GitHub、不发 npm → 目录 `npm` 恒为 null → **用户永远看不到更新提示**，只能手动重装；
+- 发了 npm → 次日构建回填 → 更新角标生效。
+
+条目里**不要**手写 `npm:` 字段，收录指南明确说会被校验拒绝，映射自动采集。
 
 ## 详细步骤
 
@@ -21,11 +28,15 @@ git push origin main
 # 3. 打 tag 并推送（务必先让 tag 指向最终 commit，推完不要再移动）
 git tag -a v0.8.2 -m 'v0.8.2：...' && git push origin v0.8.2
 
-# 4. 打包
+# 4. 发布到 npm（市场更新提示的来源，漏了这一步用户就看不到更新）
+npm publish                            # 需要 ~/.npmrc 里的 npmjs token
+npm view dsh-vaultwarden version       # 确认 latest 已是新版本
+
+# 5. 打包
 npm pack --silent                      # -> dsh-vaultwarden-0.8.2.tgz
 sha256sum dsh-vaultwarden-0.8.2.tgz
 
-# 5. 建 Release，两个资产都传
+# 6. 建 Release，两个资产都传
 cp dsh-vaultwarden-0.8.2.tgz /tmp/dsh-vaultwarden.tgz
 gh release create v0.8.2 \
   --title 'v0.8.2：...' \

package/docs/ui-design.md

@@ -79,7 +79,12 @@ Host 侧由 `lib/gateway.js`（`TypertRemoteService` 子类，命名空间 `vw`
 
 ## 4. 条目面板
 
-- **标题行**：`Bitwarden 凭据库` + 小字 `（支持 Bitwarden / Vaultwarden）`；标题本身保持短，兼容说明不喧宾夺主。
+- **标题行**：**照抄宿主插件标题的格式**（见插件市场卡片头），**不带头部图标**。分两组、组内不折行：
+  - 标题组：`Vaultwarden 凭据库`（16px 半粗、正文墨色）
+  - 元信息组：`dsh-vaultwarden` · `v<版本号>` · `GitHub` 链接（12.5 / 11.5 / 11.5px 次要灰）
+
+  两组各自 `nowrap`、行本身 `flex-wrap`，所以窄屏时**整组下沉**而不是拆散——这解决了「第一行留包名、第二行只剩版本号」那种读起来像没排完的断法。实测 ≥370px 单行（行高 22px），<370px 两行（标题一行、元信息完整一行）。曾试过用盾牌线稿打头，但图标要和名字配大小、且在手机宽度会把元信息顶到第二行，而设置导航栏本身已经带了这枚盾牌，面板内重复一遍没有收益，故去掉。实测 16px 下 ≥360px 仍单行（行高 22px），<360px 才让元信息整体折到第二行。四点刻意与宿主对齐：图标**直接画在页面上**、不加圆角底色块（18px 字形套一层底衬会读成贴纸）；包名与版本号同为次要灰，构成一条元信息尾巴；链接**用默认墨色不用链接蓝**，否则面板里最小的字反而最抢眼；分隔符是宿主自己那种 2px 圆点。原先的兼容说明「（支持 Bitwarden / Vaultwarden）」只是重复标题已说的事，已删除。
+  **版本号有两个来源，缺一不可**：bundle 读不到 `package.json`，宿主经 `vw/boot` 由 node 半边 `gateway.js` 的 `pluginIdentity()` 读自身 manifest 返回（面板本来就要发这次调用，不增加往返，且不会与实装包脱节）；但改 node 半边**必须重启才生效**，所以 `scripts/stamp-build.mjs` 在每次 build 时把 `package.json` 的 version 与 repository 写进 bundle 的 `BUILD_VERSION` / `BUILD_REPOSITORY` 两个字面量作为兜底——宿主有值就用宿主的，没有就用构建戳，任何时候标题行都不会缺版本号。构建戳由脚本改写、幂等，不靠人手维护。`repository.url` 是 npm 简写（`git+https://…​.git`），浏览器不认这个 scheme，前端用 `normalizeRepoUrl()` 去 `git+` 前缀与 `.git` 后缀后渲染为 `target=_blank` + `rel=noopener noreferrer` 的链接；拿不到时回退到写死的仓库地址。窄面板（<300px）下元信息簇换行到标题下方，不隐藏——版本与源码入口正是陌生安装环境里最需要的信息。
 - **工具行**：搜索框（占位符只说明搜什么；`/` 聚焦、Esc 清空、↑↓ 移动选中放在 tooltip——原先塞在占位符里，窄屏先被截断）、同步状态 chip（实时/轮询/关闭 + 连接圆点 + 相对同步时间）、条目总数，以及**三个图标按钮**：新建条目（`+`）、设置、刷新（v0.8.0 起由文字改 16×16 线稿；文字版在手机上占掉整第三行）。
 - **布局**：左「侧栏」+ 右「内容列」两栏；内容列在列表与条目详情之间切换（打开条目时列表让位给详情，列表上方留「‹ 返回列表」一行）。侧栏始终可见，不用手机那种「点进去就换屏」。
   滚动区是带高度预算的 flex 列（`max-height: min(58vh, 560px)` + `overflow-y: auto`，标题与工具栏因此常驻、内容自己滚）。**它的直接子项一律 `flex: none`（`S.scrollItem`）**：flex 子项默认会缩，卡片内容高过预算时盒子被压扁、字段却继续画到卡片底衬之外——API 密钥模式比主密码模式多两行，829px 高的窗口下 58vh 只有 480px，client_secret、它的说明与按钮整块浮在弹窗底色上，看着就像字段错位。
@@ -88,12 +93,15 @@ Host 侧由 `lib/gateway.js`（`TypertRemoteService` 子类，命名空间 `vw`
   面板窄到 **300px 以下**（宿主弹窗减去自己的导航列后只剩 ~110px）时每个控件各占一行：三个 32px 按钮加间距要 112px，比内容列宽一个像素，第三个会被挤到新的一行——收到 28px 正好一排。这个宽度下计数所在的可伸缩轨道还会塌成 0、文字直接画到按钮上面（`elementsFromPoint` 命中的是计数而不是按钮），所以必须先让每个控件各占一行。
   **齿轮图标是一条闭合轮廓 + 中心毂**（八齿、32 个点），不是「圆 + 八根辐条」：辐条与轮圈同粗，14px 下只读得出太阳。
   断点走 **CSS 容器查询**（`@container vw-panel`）而不是窗口宽度：宿主设置弹窗固定 800px 宽，其中约 280px 是设置导航，面板自己只剩 ~560px，用窗口宽度判断会永远判成「桌面」。
-  `<480px` 才把侧栏搬到顶部、钻取时藏侧栏；`<620px` 把字段行的标签列从 92px 收到 72px。不支持容器查询的浏览器回退到 `@supports not (container-type)` + 760px 窗口断点。
+  `<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`，16×16、1.3px 描边、`currentColor`），不再用 `▦ ★ ⏱ ◍ ▸ · ⌸ ⌫` 这些字体字符——它们的视觉大小与基线随宿主字体而变（半个高度的三角挨着满高的方框，未归类的中点在文字基线上），换成同一套线稿后每行读起来一致；条目类型的图标按 `TYPE_ICON_NAMES` 投影，未知类型退到通用记号。图标是装饰（`aria-hidden`），颜色比标签浅一档，当前行加深。
+   每行的图标是**画出来的 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 未归类）靠**体块浓淡**区分，不靠再加线条。
   计数是**统一的扁平药丸**（`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.fieldRow`）：`align-items: start` 而非 center——一个值可能是一行也可能是五行（长 URL、笔记），居中会让标签和右侧控件落在值中间，同列基线不一致；顶端对齐后标签与值首行、右侧控件永远同一水平线。
 - **分区缓存**：切回刚离开的分区时，若该分区快照在 5 分钟内（`SECTION_CACHE_MS`）就**直接重绘、零 RPC**；搜索、刷新按钮与写操作不走缓存（一律重查）。首次进入某分区仍是「先画后拉」。
-- **列表**：行 = 服务端缓存的站点图标（`<img>` 指向 `<serverUrl>/icons/<host>/icon.png`，主题无关、随服务器缓存；加载失败或像素小于 `ICON_MIN_PX = 24` 的行退回中性首字母圆枕，纯数字名如 IP 不会退化成同一个「1」）+ 名称 + 用户名·URI 截断 + 收藏星 + TOTP 徽标；归档条目带「已归档」徽标，回收站条目名称划掉、带「回收站」徽标（warn 色）；`role="listbox"`/`role="option"` + `aria-selected`；选中行用 bg-2 高亮。
+- **列表**：行 = 服务端缓存的站点图标（`<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 间距），所以一行里两个徽章与相邻只有一个徽章的行左右边缘仍然对齐。
   列表行的盒子模型是 **border-box**：`listRow` 是 `width:100%` 加自身内边距，`<button>` 行从 UA 样式表拿到 border-box，而「验证码」分区的行是 `<div>`（行里不能再套按钮），不写 `boxSizing` 就会比列表宽 28px，把复制按钮切在面板右缘之外——桌面 800px 与手机 390px 都实测到了。
 - **验证码分区行**（等于 m00193 的 App 形态）：图标 + 名称 + 用户名 + 30px 倒计时圆环（环心写剩余秒数）+ 6 位动态码（等宽、3+3 分组「686 029」）+ 右侧复制按钮（点它不打开条目）。动态码每秒只在这几行里请求。
 - **详情头部**：图标位与列表行同源（`iconFor(value, S.avatarImgLg) ?? monogram(value)`）——服务器有站点图标就显示图标，没有才退回 36px 的字母圆枕。这两处曾各走各的：列表行取图标，头部直接画字母，于是点开条目图标就消失了（v0.7.1 修）。大圆枕里用 22px 的图，列表行仍是 18px。reprompt 条目的头部同样拿得到图标：`projectItem` 的门只挡字段，网址本就在打开它的那一行里露着。