@wangnanshan/dsh-nanshan-publish-manager 1.0.2 → 1.0.5

package/README.md

@@ -3,7 +3,7 @@
 把本机开发的 DSH 组件，按 DeepSeek Harness 官方推荐的 npm 包形式发布给其他人安装。
 
 - **一个组件清单页**：卡片形式展示本机所有可发布的 DSH 组件（`dsh.bundle` / `dsh.client`），包含版本、发布状态、预检查结果和最近一次发布。
-- **一个组件详情页**：点击卡片进入，用「流程化板块」完成发布——版本与标签 → 发布目标与选项 → 发布预检查 → 确认与执行，右侧常驻该组件的**发布记录列表**。
+- **一个组件详情页**：点击卡片进入，用「流程化板块」完成发布——版本与标签 → 发布目标与选项 → 发布预检查 → 确认与执行，右侧常驻该组件的 **NPM信息查询**、**发布记录列表**。
 
 界面采用现代极简的开发者工具控制台风格（Linear / Vercel / Raycast 一类的浅色克制审美），跟随 Harness 的浅色 / 深色主题。插件图标、侧栏入口和页面标识使用 3D 液态玻璃黑色调；搜索、勾选、关闭等功能图标保持线性，以保证小尺寸下的可读性。
 
@@ -84,8 +84,9 @@ DSH 组件就是一个 npm 包：
 1. **版本与标签** —— 目标版本（写回 `package.json`）、npm tag、`public` / `restricted`。
 2. **发布目标与选项** —— registry（默认读取你的 `~/.npmrc`）、可选构建脚本（`npm run <script>`）、自动运行发布预检查、先演练、自动写入版本号、发布备注。
 3. **发布预检查** —— 运行发布预检查；有阻断项时正式发布按钮不可用。
-4. **确认与执行** —— 选择发布验证方式，勾选确认，先「仅演练」（`npm publish --dry-run`，临时写入的目标版本会在演练后还原）或「正式发布」（带最终确认弹窗）；本机会话方式还可以在弹窗里选「在终端发布」。
+4. **确认与执行** —— 选择发布验证方式，勾选确认，先「仅演练」（`npm publish --dry-run`，临时写入的目标版本会在演练后还原）或「正式发布」（带最终确认弹窗）；本机会话方式的最终弹窗按钮为：左侧「再想想」，右侧「采用终端发布（推荐）」和「采用 OTP 发布」。
 5. **发布记录** —— 每次演练 / 发布 / 失败都会写入本机记录，包含版本、tag、access、验证方式、耗时、预检查摘要和命令输出；终端发布会在记录里标记「终端」。
+6. **NPM信息查询** —— 右侧栏显示当前包名、近 7 天每日下载量柱状图（数据来自 npm downloads API）和「NPM查看该组件」入口。
 
 ## 发布验证方式
 
@@ -101,13 +102,13 @@ npm 已在 **2025-12-09 永久撤销全部经典 Token**，本插件不再提供
 
 Granular Access Token 可以在 npm 网站 Settings → Tokens 或 `npm token create` 创建；写令牌最长 90 天，无人值守发布建议开启 Bypass 2FA。
 
-页面内的 OTP 只支持 TOTP（身份验证器 6 位数字）。如果账号使用安全密钥 / 网页型 2FA，npm 需要在交互式终端里打开浏览器授权；这种情况下可以直接在确认弹窗点「在终端发布」，或创建一个开启 Bypass 2FA 的 Granular Access Token 后使用「细粒度令牌」方式。
+页面内的 OTP 只支持 TOTP（身份验证器 6 位数字）。如果账号使用安全密钥 / 网页型 2FA，npm 需要在交互式终端里打开浏览器授权；这种情况下可以直接在确认弹窗点「采用终端发布（推荐）」，或创建一个开启 Bypass 2FA 的 Granular Access Token 后使用「细粒度令牌」方式。
 
 npm 凭据**不经过插件的存储层**：本机会话使用你自己的 `~/.npmrc`；Granular Token 的临时 npmrc 在发布后删除；OTP 只作用于一次子进程。三者都不会写入发布记录。
 
 ### 在系统终端发布
 
-在「本机登录会话」方式下，最终确认弹窗提供「在终端发布」：
+在「本机登录会话」方式下，最终确认弹窗提供「采用终端发布（推荐）」：
 
 - macOS 打开 Terminal.app；
 - Windows 打开 `cmd.exe`；
@@ -149,7 +150,7 @@ OTP 不是插件强制每次都要填写的字段：
 
 1. 确认验证码来自**当前登录账号**（`npm whoami` 显示 `wangnanshan`）绑定的身份验证器，并且是刚生成的；旧码不能复用。
 2. 确认系统时间自动同步。TOTP 依赖本机时钟；当前机器与 npm registry 的偏差约 0.6 秒，属于正常范围。
-3. 如果账号的 2FA 方式是**安全密钥 / 网页认证**而不是身份验证器 TOTP，页面内输入 6 位码不会成功。请在确认弹窗点「在终端发布」，让 npm 在系统终端里打开浏览器授权；或使用下面的令牌方案。
+3. 如果账号的 2FA 方式是**安全密钥 / 网页认证**而不是身份验证器 TOTP，页面内输入 6 位码不会成功。请在确认弹窗点「采用终端发布（推荐）」，让 npm 在系统终端里打开浏览器授权；或使用下面的令牌方案。
 4. 使用 **Granular Access Token** 时，必须在创建令牌时勾选 **Bypass 2FA**（`npm token create --bypass-2fa`）；只粘贴一个未开启 Bypass 2FA 的令牌仍会返回 EOTP。
 5. 如果配置了构建脚本，构建会先于发布执行；构建较慢时验证码可能过期，建议使用开启 Bypass 2FA 的令牌。
 
@@ -225,5 +226,6 @@ HTTP 接口（仅本机、同源写入）：
 - 发布使用本机 npm 配置，不支持在页面里输入 token；OTP 只用于单次发布，不落盘。
 - 系统终端发布支持 macOS Terminal、Windows `cmd.exe` 和 Linux 常见终端；Windows 的 `npm.cmd` 已做启动适配，但当前环境主要在 macOS 验证。
 - 终端发布最多等待 15 分钟；关闭终端或未完成验证会超时，不会写入成功记录；终端输出不写入插件记录。
+- 近 7 天下载量来自 npm downloads API，统计通常滞后约 1 天；新包或未发布包可能暂无数据。
 - 页面直接执行 `npm publish`，请在发布前用「仅演练」确认打包内容。
 - `npm publish` 会执行组件 `package.json` 中的 publish 生命周期脚本；请只发布你信任的组件。

package/client.js

@@ -29,7 +29,8 @@ window.__ModuleLoader__.load({
         'action.dryRun': '仅演练',
         'action.dryRunning': '演练中…',
         'action.publish': '正式发布',
-        'action.publishTerminal': '在终端发布',
+        'action.publishTerminal': '采用终端发布（推荐）',
+        'action.reconsider': '再想想',
         'action.terminalWaiting': '等待终端…',
         'action.publishing': '发布中…',
         'action.cancel': '再想想',
@@ -65,6 +66,15 @@ window.__ModuleLoader__.load({
         'badge.host': 'Host',
         'badge.bundlePatch': '含 patch',
         'detail.records': '发布记录',
+        'npmInfo.title': 'NPM信息查询',
+        'npmInfo.open': 'NPM查看该组件',
+        'npmInfo.hint': '在 npm 网站查看版本、README 与安装信息；未发布时可能显示 404。',
+        'npmInfo.last7': '近 7 天下载',
+        'npmInfo.chartLabel': '近 7 天每日下载量柱形图',
+        'npmInfo.loading': '查询中…',
+        'npmInfo.empty': '暂无下载数据（新包或未发布）',
+        'npmInfo.unavailable': '下载数据暂时不可用',
+        'npmInfo.source': '数据来源：npm downloads API',
         'detail.synopsis': '发布状态',
         'detail.noRecords': '还没有发布记录',
         'detail.noRecordsHint': '完成第一次演练或正式发布后，记录会按时间出现在这里。',
@@ -241,8 +251,9 @@ window.__ModuleLoader__.load({
         'modal.publishWarning': '请确认版本号、tag 与可见范围都正确；公开包会立刻被其他人安装到。',
         'modal.dryFirstHint': '本次设置启用了「发布前先演练」，你还没有在本次会话里演练；确认后仍会直接正式发布。',
         'modal.publishOk': '确认发布',
+        'modal.otpPublish': '采用 OTP 发布',
         'modal.otpHint': '请填写刚生成的验证码；一次性、约 30 秒有效。',
-        'modal.terminalHint': '也可以打开系统终端完成发布：npm 会在终端里询问 OTP 或打开浏览器完成 2FA，插件会等待结果并写入记录。',
+        'modal.terminalHint': '推荐用系统终端发布：npm 会在终端里询问 OTP 或打开浏览器完成 2FA，插件等待结果并写入记录。也可以填写上方 OTP，改用「采用 OTP 发布」。',
         'modal.buildBeforeOtp': '当前配置了构建脚本：发布前会先执行构建，耗时较长时验证码可能过期；建议使用开启 Bypass 2FA 的 Granular Token。',
         'toast.settingsSaved': '发布设置已保存',
         'toast.checkDone': '预检查完成',
@@ -354,7 +365,8 @@ window.__ModuleLoader__.load({
         'action.dryRun': 'Dry run',
         'action.dryRunning': 'Dry running…',
         'action.publish': 'Publish',
-        'action.publishTerminal': 'Publish in terminal',
+        'action.publishTerminal': 'Publish in terminal (recommended)',
+        'action.reconsider': 'Reconsider',
         'action.terminalWaiting': 'Waiting for terminal…',
         'action.publishing': 'Publishing…',
         'action.cancel': 'Not yet',
@@ -390,6 +402,15 @@ window.__ModuleLoader__.load({
         'badge.host': 'Host',
         'badge.bundlePatch': 'patch',
         'detail.records': 'Publish history',
+        'npmInfo.title': 'npm information',
+        'npmInfo.open': 'View this component on npm',
+        'npmInfo.hint': 'View versions, README and install info on npm; a 404 means it is not published yet.',
+        'npmInfo.last7': 'Downloads · last 7 days',
+        'npmInfo.chartLabel': 'Daily downloads over the last 7 days',
+        'npmInfo.loading': 'Loading…',
+        'npmInfo.empty': 'No download data yet (new or unpublished package)',
+        'npmInfo.unavailable': 'Download data is temporarily unavailable',
+        'npmInfo.source': 'Source: npm downloads API',
         'detail.synopsis': 'Release status',
         'detail.noRecords': 'No publish records yet',
         'detail.noRecordsHint': 'After the first dry run or publish, entries appear here in order.',
@@ -566,8 +587,9 @@ window.__ModuleLoader__.load({
         'modal.publishWarning': 'Double-check the version, tag, and access. A public package becomes installable immediately.',
         'modal.dryFirstHint': '“Dry run first” is enabled but no dry run has happened in this session; confirming publishes directly.',
         'modal.publishOk': 'Publish',
+        'modal.otpPublish': 'Publish with OTP',
         'modal.otpHint': 'Enter a freshly generated code; single-use and valid for about 30 seconds.',
-        'modal.terminalHint': 'You can also publish in the system terminal: npm handles OTP or web 2FA there, and the plugin waits and records the result.',
+        'modal.terminalHint': 'Recommended: publish in the system terminal. npm handles OTP or web 2FA there, and the plugin records the result. You can also enter an OTP above and use “Publish with OTP”.',
         'modal.buildBeforeOtp': 'A build script is configured: the build runs before publishing and may outlast the OTP; a Granular Access Token with Bypass 2FA is recommended.',
         'toast.settingsSaved': 'Release settings saved',
         'toast.checkDone': 'Pre-check finished',
@@ -693,7 +715,7 @@ window.__ModuleLoader__.load({
 .np__title{margin:0;font-size:23px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
 .np__subtitle{margin:4px 0 0;max-width:680px;font-size:13px;line-height:1.6;color:var(--np-ink-soft)}
 .np__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
-.np-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--np-line-strong);border-radius:8px;background:var(--np-sheet);color:var(--np-ink);font:inherit;font-size:13px;font-weight:500;line-height:1;cursor:pointer;box-shadow:var(--np-shadow);transition:background-color .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;white-space:nowrap}
+.np-btn{appearance:none;display:inline-flex;text-decoration:none;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--np-line-strong);border-radius:8px;background:var(--np-sheet);color:var(--np-ink);font:inherit;font-size:13px;font-weight:500;line-height:1;cursor:pointer;box-shadow:var(--np-shadow);transition:background-color .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;white-space:nowrap}
 .np-btn:hover:not(:disabled){background:var(--np-sheet2);border-color:var(--np-line-strong)}
 .np-btn:active:not(:disabled){background:var(--np-sheet2)}
 .np-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
@@ -852,7 +874,24 @@ window.__ModuleLoader__.load({
 .np-result__close:focus-visible{outline:2px solid var(--np-bad);outline-offset:2px}
 .np-result__cmd{padding:7px 11px;border-bottom:1px solid var(--np-line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;color:var(--np-ink-soft);word-break:break-all}
 .np-log{margin:0;padding:10px 12px;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;color:var(--np-ink-soft)}
+.np-downloads{display:flex;flex-direction:column;gap:8px;padding-top:2px}
+.np-downloads__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--np-ink-soft)}
+.np-downloads__head strong{font-size:14px;font-weight:600;color:var(--np-ink);font-variant-numeric:tabular-nums}
+.np-downloads__loading{font-size:11px;color:var(--np-ink-soft)}
+.np-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:5px;height:96px;padding-top:14px}
+.np-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;min-width:0}
+.np-bar__value{font-size:9px;line-height:1;color:var(--np-ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
+.np-bar__track{display:flex;align-items:flex-end;width:100%;max-width:18px;height:62px;overflow:hidden;border-radius:3px;background:var(--np-sheet2)}
+.np-bar__fill{display:block;width:100%;min-height:2px;border-radius:3px 3px 0 0;background:var(--np-accent);opacity:.9}
+.np-bar__label{font-size:9px;line-height:1;color:var(--np-ink-soft);white-space:nowrap}
+.np-downloads__hint{font-size:10px;line-height:1.5;color:var(--np-ink-soft)}
+.np-bars--skeleton{height:96px;padding-top:14px}
+.np-bar__skeleton{display:block;width:100%;max-width:18px;height:62px;align-self:end;justify-self:center;border-radius:3px;background:linear-gradient(100deg,var(--np-sheet2) 20%,var(--np-line) 45%,var(--np-sheet2) 70%);background-size:200% 100%;animation:np-shimmer 1.5s linear infinite}
 .np-railcard{position:relative;padding:16px;background:var(--np-sheet);border:1px solid var(--np-line);border-radius:12px;box-shadow:var(--np-shadow)}
+.np-railcard__body{display:flex;flex-direction:column;gap:8px}
+.np-railcard__pkg{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--np-ink-soft);word-break:break-all}
+.np-railcard__hint{font-size:11px;line-height:1.55;color:var(--np-ink-soft)}
+.np-railcard__action{width:100%;justify-content:center}
 .np-railcard__title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;font-size:13px;font-weight:600;line-height:1.3}
 .np-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;margin:0;font-size:12px;line-height:1.5}
 .np-dl dt{color:var(--np-ink-soft)}
@@ -879,6 +918,8 @@ window.__ModuleLoader__.load({
 .np-dialog .np-field{margin:2px 0 10px}
 .np-dialog__warn{padding:8px 10px;border:1px solid color-mix(in srgb,var(--np-bad) 30%,var(--np-line));border-radius:8px;background:color-mix(in srgb,var(--np-bad) 6%,transparent);color:var(--np-bad)!important}
 .np-dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
+.np-dialog__actions--split{justify-content:space-between;flex-wrap:wrap}
+.np-dialog__actions-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-left:auto}
 .np-dialog.np-dialog--info{width:min(560px,100%)}
 .np-dialog.np-dialog--error{width:min(540px,100%)}
 .np-dialog--error .np-info__head h2{margin:0;flex:1;min-width:0}
@@ -971,6 +1012,19 @@ window.__ModuleLoader__.load({
       return text
     }
 
+    function formatCount(value) {
+      const n = Number(value) || 0
+      if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 1)}M`
+      if (n >= 10_000) return `${Math.round(n / 1000)}k`
+      if (n >= 1000) return `${(n / 1000).toFixed(1)}k`
+      return String(n)
+    }
+
+    function shortDay(value) {
+      const text = String(value || '')
+      return text.length >= 10 ? text.slice(5, 10) : text
+    }
+
     function formatDateTime(value) {
       const date = new Date(value)
       if (Number.isNaN(date.getTime())) return '—'
@@ -1254,6 +1308,10 @@ window.__ModuleLoader__.load({
         ['rect', { x: 2.2, y: 3.2, width: 11.6, height: 9.6, rx: 1.6 }],
         ['path', { d: 'm4.8 6.1 2.4 2.2-2.4 2.2M8.6 10.5h2.8' }],
       ],
+      external: [
+        ['path', { d: 'M9.4 2.8H13v3.6M13 2.8 8.2 7.6' }],
+        ['path', { d: 'M12 9.2v2.2a1.6 1.6 0 0 1-1.6 1.6H3.8A1.6 1.6 0 0 1 2.2 11.4V4.8a1.6 1.6 0 0 1 1.6-1.6h2.4' }],
+      ],
       pencil: [
         ['path', { d: 'M3 13l.9-3.1 6.3-6.3 2.2 2.2-6.3 6.3L3 13Z' }],
         ['path', { d: 'M9.6 4.2 11.8 6.4' }],
@@ -1369,6 +1427,69 @@ window.__ModuleLoader__.load({
       )
     }
 
+    function DownloadBars(props) {
+      const [t] = useText()
+      const status = props.status || 'loading'
+      const points = Array.isArray(props.points) ? props.points : []
+      const total = Number(props.total) || 0
+      if (status === 'loading') {
+        return h('div', { className: 'np-downloads' },
+          h('div', { className: 'np-downloads__head' },
+            h('span', null, t('npmInfo.last7')),
+            h('span', { className: 'np-downloads__loading' }, t('npmInfo.loading')),
+          ),
+          h('div', { className: 'np-bars np-bars--skeleton', 'aria-hidden': 'true' },
+            Array.from({ length: 7 }, (_, index) => h('span', { key: index, className: 'np-bar__skeleton' })),
+          ),
+        )
+      }
+      if (status === 'unavailable' || status === 'error') {
+        return h('div', { className: 'np-downloads' },
+          h('div', { className: 'np-downloads__head' }, h('span', null, t('npmInfo.last7'))),
+          h('span', { className: 'np-downloads__hint', title: props.error || undefined }, t('npmInfo.unavailable')),
+        )
+      }
+      if (status === 'empty' || points.length === 0) {
+        return h('div', { className: 'np-downloads' },
+          h('div', { className: 'np-downloads__head' },
+            h('span', null, t('npmInfo.last7')),
+            h('strong', null, '0'),
+          ),
+          h('span', { className: 'np-downloads__hint' }, t('npmInfo.empty')),
+        )
+      }
+      const max = Math.max(1, ...points.map((point) => Number(point.downloads) || 0))
+      return h('div', { className: 'np-downloads' },
+        h('div', { className: 'np-downloads__head' },
+          h('span', null, t('npmInfo.last7')),
+          h('strong', null, formatCount(total)),
+        ),
+        h('div', {
+          className: 'np-bars',
+          role: 'img',
+          'aria-label': t('npmInfo.chartLabel'),
+          style: { gridTemplateColumns: `repeat(${Math.max(points.length, 1)},minmax(0,1fr))` },
+        },
+          points.map((point, index) => {
+            const value = Number(point.downloads) || 0
+            const height = Math.max(2, Math.round((value / max) * 100))
+            return h('div', {
+              key: point.day || index,
+              className: 'np-bar',
+              title: `${point.day}: ${formatCount(value)}`,
+            },
+              h('span', { className: 'np-bar__value' }, value > 0 ? formatCount(value) : ''),
+              h('span', { className: 'np-bar__track' },
+                h('span', { className: 'np-bar__fill', style: { height: `${height}%` } }),
+              ),
+              h('span', { className: 'np-bar__label' }, shortDay(point.day)),
+            )
+          }),
+        ),
+        h('span', { className: 'np-downloads__hint' }, t('npmInfo.source')),
+      )
+    }
+
     function Toast(props) {
       if (!props.toast) return null
       return h('div', { className: `np-toast np-toast--${props.toast.kind}`, role: 'status', 'aria-live': 'polite' },
@@ -1659,6 +1780,7 @@ window.__ModuleLoader__.load({
       const [showToken, setShowToken] = React.useState(false)
       const [toast, showToast] = useToast()
       const [errorDialog, setErrorDialog] = React.useState(null)
+      const [downloads, setDownloads] = React.useState({ status: 'loading', points: [], total: 0, error: '' })
       const okButtonRef = React.useRef(null)
       const otpInputRef = React.useRef(null)
       const tokenInputRef = React.useRef(null)
@@ -1747,6 +1869,32 @@ window.__ModuleLoader__.load({
       const effectiveAccess = isScopedPackage ? (settings ? settings.access : 'public') : 'public'
       const isPrerelease = typeof targetVersion === 'string' && targetVersion.includes('-')
 
+      React.useEffect(() => {
+        if (!packageName) return undefined
+        const controller = new AbortController()
+        setDownloads({ status: 'loading', points: [], total: 0, error: '' })
+        apiGet(`/downloads?dir=${encodeURIComponent(dir)}`, controller.signal)
+          .then((data) => {
+            const points = Array.isArray(data.points) ? data.points : []
+            setDownloads({
+              status: data.unavailable ? 'unavailable' : points.length > 0 ? 'ready' : 'empty',
+              points,
+              total: Number(data.total) || 0,
+              error: data.error || '',
+            })
+          })
+          .catch((failure) => {
+            if (failure && failure.name === 'AbortError') return
+            setDownloads({
+              status: 'error',
+              points: [],
+              total: 0,
+              error: failure && failure.message ? failure.message : '',
+            })
+          })
+        return () => controller.abort()
+      }, [dir, packageName])
+
       const closeError = React.useCallback(() => setErrorDialog(null), [])
       const showError = React.useCallback((title, message, detail, hint) => {
         setModalOpen(false)
@@ -2019,6 +2167,7 @@ window.__ModuleLoader__.load({
       if (!component || !settings) return null
 
       const recordSummary = component.lastPublish || null
+      const npmUrl = packageName ? `https://www.npmjs.com/package/${packageName}` : ''
 
       return h('div', { className: 'np__inner' },
         h('div', { className: 'np-detail__head' },
@@ -2413,6 +2562,27 @@ window.__ModuleLoader__.load({
                 h('dd', null, npmInfo ? (npmInfo.username ? tr('synopsis.npmUser', { name: npmInfo.username }) : t('synopsis.npmUnknown')) : t('synopsis.npmIdle')),
               ),
             ),
+            h('section', { className: 'np-railcard' },
+              h('h2', { className: 'np-railcard__title' }, t('npmInfo.title')),
+              h('div', { className: 'np-railcard__body' },
+                h('code', { className: 'np-railcard__pkg' }, packageName || '—'),
+                h('span', { className: 'np-railcard__hint' }, t('npmInfo.hint')),
+                h(DownloadBars, {
+                  status: downloads.status,
+                  points: downloads.points,
+                  total: downloads.total,
+                  error: downloads.error,
+                }),
+                npmUrl
+                  ? h('a', {
+                    className: 'np-btn np-btn--small np-railcard__action',
+                    href: npmUrl,
+                    target: '_blank',
+                    rel: 'noreferrer noopener',
+                  }, h(Glyph, { name: 'external', size: 13 }), t('npmInfo.open'))
+                  : h('button', { type: 'button', className: 'np-btn np-btn--small np-railcard__action', disabled: true }, h(Glyph, { name: 'external', size: 13 }), t('npmInfo.open')),
+              ),
+            ),
             h('section', { className: 'np-railcard' },
               h('h2', { className: 'np-railcard__title' },
                 t('detail.records'),
@@ -2528,23 +2698,32 @@ window.__ModuleLoader__.load({
               settings.dryRunFirst && !records.some((record) => record.dryRun === true)
                 ? h('p', { className: 'np-hint' }, t('modal.dryFirstHint'))
                 : null,
-              h('div', { className: 'np-dialog__actions' },
-                authMode === 'session'
-                  ? h('button', {
-                    type: 'button',
-                    className: 'np-btn',
-                    disabled: busy !== '' || blocked !== '',
-                    onClick: publishInTerminal,
-                  }, h(Glyph, { name: 'terminal', size: 13 }), busy === 'terminal' ? t('action.terminalWaiting') : t('action.publishTerminal'))
-                  : null,
-                h('button', { type: 'button', className: 'np-btn np-btn--ghost', onClick: () => setModalOpen(false) }, t('action.cancel')),
+              h('div', { className: 'np-dialog__actions np-dialog__actions--split' },
                 h('button', {
                   type: 'button',
-                  className: 'np-btn np-btn--primary',
-                  ref: okButtonRef,
-                  disabled: busy !== '' || blocked !== '',
-                  onClick: () => publish(false),
-                }, t('modal.publishOk')),
+                  className: 'np-btn np-btn--ghost',
+                  onClick: () => setModalOpen(false),
+                }, t('action.reconsider')),
+                h('div', { className: 'np-dialog__actions-right' },
+                  authMode === 'session'
+                    ? h('button', {
+                      type: 'button',
+                      className: 'np-btn np-btn--primary',
+                      disabled: busy !== '' || blocked !== '',
+                      onClick: publishInTerminal,
+                    }, h(Glyph, { name: 'terminal', size: 13 }), busy === 'terminal' ? t('action.terminalWaiting') : t('action.publishTerminal'))
+                    : null,
+                  h('button', {
+                    type: 'button',
+                    className: authMode === 'session' ? 'np-btn' : 'np-btn np-btn--primary',
+                    ref: okButtonRef,
+                    disabled: busy !== '' || blocked !== '',
+                    onClick: () => publish(false),
+                  },
+                    authMode === 'session' ? h(Glyph, { name: 'upload', size: 13 }) : null,
+                    authMode === 'session' ? t('modal.otpPublish') : t('modal.publishOk'),
+                  ),
+                ),
               ),
             ),
           )

package/index.js

@@ -84,6 +84,7 @@ export function apply(ctx, config = {}) {
   let discoveryCache = { at: 0, value: null }
   let overviewCache = { at: 0, value: null }
   let npmCache = { at: 0, value: null }
+  const downloadsCache = new Map()
   let npmrcRegistry = null
   const publishing = new Set()
 
@@ -1725,6 +1726,76 @@ export function apply(ctx, config = {}) {
     }
   }
 
+  async function getDownloads(rawDir) {
+    const { pkg } = await requireComponentDir(rawDir)
+    const name = typeof pkg.name === 'string' ? pkg.name : ''
+    if (!name) throw httpError(400, '该组件没有可查询的 npm 包名。')
+    const cached = downloadsCache.get(name)
+    if (cached && Date.now() - cached.at < cached.ttl) return cached.value
+    const remember = (value, ttl) => {
+      downloadsCache.set(name, { at: Date.now(), ttl, value })
+      return value
+    }
+    const unavailable = (message) => remember({
+      package: name,
+      points: [],
+      total: 0,
+      start: null,
+      end: null,
+      unavailable: true,
+      error: message,
+      fetchedAt: new Date().toISOString(),
+    }, 2 * 60_000)
+    const controller = new AbortController()
+    const timer = setTimeout(() => controller.abort(), 10_000)
+    let response
+    try {
+      response = await fetch(`https://api.npmjs.org/downloads/range/last-week/${encodeURIComponent(name)}`, {
+        signal: controller.signal,
+        headers: { accept: 'application/json' },
+      })
+    } catch (error) {
+      return unavailable(error && error.name === 'AbortError' ? '查询下载量超时。' : '无法连接 npm 下载统计接口。')
+    } finally {
+      clearTimeout(timer)
+    }
+    if (response.status === 404) {
+      return remember({
+        package: name,
+        points: [],
+        total: 0,
+        start: null,
+        end: null,
+        unavailable: false,
+        empty: true,
+        fetchedAt: new Date().toISOString(),
+      }, 10 * 60_000)
+    }
+    if (!response.ok) return unavailable(`npm 下载统计接口返回 HTTP ${response.status}。`)
+    let data
+    try {
+      data = await response.json()
+    } catch {
+      return unavailable('npm 下载统计返回了无法解析的数据。')
+    }
+    const points = Array.isArray(data.downloads)
+      ? data.downloads.map((point) => ({
+        day: String(point && point.day ? point.day : ''),
+        downloads: Number(point && point.downloads) || 0,
+      }))
+      : []
+    return remember({
+      package: name,
+      start: data.start || (points.length > 0 ? points[0].day : null),
+      end: data.end || (points.length > 0 ? points[points.length - 1].day : null),
+      points,
+      total: points.reduce((sum, point) => sum + point.downloads, 0),
+      unavailable: false,
+      empty: points.length === 0,
+      fetchedAt: new Date().toISOString(),
+    }, 10 * 60_000)
+  }
+
   async function addTarget(rawDir) {
     await ensureState()
     const { dir } = await requireComponentDir(rawDir)
@@ -1765,6 +1836,9 @@ export function apply(ctx, config = {}) {
           const { dir } = await requireComponentDir(url.searchParams.get('dir'))
           return sendJson(response, 200, { ok: true, ...(await buildDetail(dir)) })
         }
+        if (pathname === `${API}/downloads`) {
+          return sendJson(response, 200, { ok: true, ...(await getDownloads(url.searchParams.get('dir'))) })
+        }
         return sendJson(response, 404, { ok: false, code: 'not-found', message: '未知的发布管理接口。' })
       }
       if (request.method !== 'POST') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangnanshan/dsh-nanshan-publish-manager",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "type": "module",
   "description": "【南山】DSH发布管理：以 npm 包（dsh.bundle + dsh.client）的官方形式，管理本机 DSH 组件的发布设置、发布预检查、npm 发布与发布记录。",
   "license": "MIT",