@wangnanshan/dsh-nanshan-publish-manager 1.0.4 → 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 液态玻璃黑色调；搜索、勾选、关闭等功能图标保持线性，以保证小尺寸下的可读性。
 
@@ -86,6 +86,7 @@ DSH 组件就是一个 npm 包：
 3. **发布预检查** —— 运行发布预检查；有阻断项时正式发布按钮不可用。
 4. **确认与执行** —— 选择发布验证方式，勾选确认，先「仅演练」（`npm publish --dry-run`，临时写入的目标版本会在演练后还原）或「正式发布」（带最终确认弹窗）；本机会话方式的最终弹窗按钮为：左侧「再想想」，右侧「采用终端发布（推荐）」和「采用 OTP 发布」。
 5. **发布记录** —— 每次演练 / 发布 / 失败都会写入本机记录，包含版本、tag、access、验证方式、耗时、预检查摘要和命令输出；终端发布会在记录里标记「终端」。
+6. **NPM信息查询** —— 右侧栏显示当前包名、近 7 天每日下载量柱状图（数据来自 npm downloads API）和「NPM查看该组件」入口。
 
 ## 发布验证方式
 
@@ -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

@@ -66,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': '完成第一次演练或正式发布后，记录会按时间出现在这里。',
@@ -393,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.',
@@ -697,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}
@@ -856,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)}
@@ -977,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 '—'
@@ -1260,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' }],
@@ -1375,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' },
@@ -1665,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)
@@ -1753,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)
@@ -2025,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' },
@@ -2419,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'),

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.4",
+  "version": "1.0.5",
   "type": "module",
   "description": "【南山】DSH发布管理：以 npm 包（dsh.bundle + dsh.client）的官方形式，管理本机 DSH 组件的发布设置、发布预检查、npm 发布与发布记录。",
   "license": "MIT",