dsh-config-manager 0.1.68 → 0.1.70

package/src/client/about/AboutPanel.tsx

@@ -16,15 +16,17 @@
  * （防 tabnabbing）；错误文本渲染前经 redact() 兜底（安全不变量）。
  * 状态组件内自持（低频静态视图，同 Snapshots/Sync/Market 策略，不进 sessionStorage）。
  */
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import type { TranslateNS } from '../client-types.ts'
 import type { ConfigManagerApi } from '../api.ts'
 import { Badge, Banner, Button, Card, SectionTitle } from '../common/ui.tsx'
 import { Skeleton } from '../common/Skeleton.tsx'
 import { CopyButton } from '../common/CopyButton.tsx'
-import { ABOUT_CLI, ABOUT_LINKS, ABOUT_META, aboutStatusRows, buildFeedbackSnippet } from './about-view.ts'
-import type { AboutStatusRows } from './about-view.ts'
+import { InfoHint } from '../common/InfoHint.tsx'
+import { ABOUT_CLI, ABOUT_LINKS, ABOUT_META, aboutStatusRows, aboutUpdateView, buildFeedbackSnippet } from './about-view.ts'
+import type { AboutStatusRows, AboutUpdateView } from './about-view.ts'
 import { ReleaseNotesDialog } from './ReleaseNotesDialog.tsx'
+import { PluginUpdateDialog } from './PluginUpdateDialog.tsx'
 import { redact } from '../../security/redaction.ts'
 import css from '../config-manager.module.css'
 
@@ -47,6 +49,16 @@ export function AboutPanel({ api, t }: AboutPanelProps) {
   const [state, setState] = useState<AboutUiState>(initial)
   const [releaseNotesOpen, setReleaseNotesOpen] = useState(false)
   const patch = (p: Partial<AboutUiState>): void => setState((s) => ({ ...s, ...p }))
+  /** 版本更新检查（只读探测 npm；低频动作，状态自持，与 status 同策略） */
+  const [updateChecking, setUpdateChecking] = useState(false)
+  const [updateView, setUpdateView] = useState<AboutUpdateView | null>(null)
+  /** 「立即更新」弹窗开关（检测到新版本时自动打开） */
+  const [updateDialogOpen, setUpdateDialogOpen] = useState(false)
+  /** 本会话已安装完成、等待重启的版本（不重复弹窗，且卡片改显成功态） */
+  const [appliedVersion, setAppliedVersion] = useState<string | null>(null)
+  const appliedVersionRef = useRef<string | null>(null)
+  const mountedRef = useRef(true)
+  useEffect(() => () => { mountedRef.current = false }, [])
 
   /** 读取运行时版本信息（pluginVersion / dshVersion / platform+arch → 展示行） */
   const loadStatus = useCallback(async (): Promise<void> => {
@@ -59,6 +71,37 @@ export function AboutPanel({ api, t }: AboutPanelProps) {
     }
   }, [api])
 
+  /**
+   * 检查更新（`force=true` 走宿主 ?force=1 绕过 10 分钟缓存 —— 用户点「重新检查」的语义）。
+   * 失败一律落成 `failed` 视图（带原因、可重试），**绝不显示成「已是最新」**。
+   */
+  const runUpdateCheck = useCallback((force: boolean): void => {
+    setUpdateChecking(true)
+    api.checkUpdate(force).then(
+      (result) => {
+        if (!mountedRef.current) return
+        const view = aboutUpdateView(result, { profile: state.rows?.diagnostics?.profile })
+        setUpdateView(view)
+        // 有新版本 → 自动弹出「更新到 vX」弹窗（GitHub 发布说明 + 一键更新）。
+        // 两个前提下不弹：① command 为 null（desktop / 未知档案，注定装不了，走卡片提示）；
+        // ② 本会话已经更新过同一版本（等待重启）——避免每次重新检查都打断用户。
+        if (view.kind === 'available' && view.command !== null && view.latest !== appliedVersionRef.current) {
+          setUpdateDialogOpen(true)
+        }
+        setUpdateChecking(false)
+      },
+      (err) => {
+        if (!mountedRef.current) return
+        setUpdateView({
+          kind: 'failed',
+          current: state.rows?.version ?? '',
+          error: err instanceof Error ? err.message : String(err),
+        })
+        setUpdateChecking(false)
+      },
+    )
+  }, [api, state.rows?.diagnostics?.profile, state.rows?.version])
+
   useEffect(() => {
     void loadStatus()
     // api 为注入单例（注册时创建），生命周期内稳定；仅挂载时加载一次
@@ -96,14 +139,13 @@ export function AboutPanel({ api, t }: AboutPanelProps) {
             用于自查「装了插件却没被备份识别到」——此前用户完全无从查看。 */}
         {state.rows?.diagnostics != null && (
           <div className={css.statRow} style={{ flexDirection: 'column', alignItems: 'flex-start', gap: '4px' }}>
-            <span className={css.groupLabel}>{t('about.diag.label')}</span>
+            <span className={css.groupLabel}>{t('about.diag.label')} <InfoHint text={t('about.diag.hint')} label={t('common.infoHint')} /></span>
             <span>{t('about.diag.profileDir', { path: state.rows.diagnostics.profileDir })}</span>
             <span>{t('about.diag.profile', { profile: state.rows.diagnostics.profile })}</span>
             <span>{t('about.diag.pluginCount', { count: String(state.rows.diagnostics.pluginCount) })}</span>
             {state.rows.diagnostics.manifestUnreadable && (
               <Banner kind="warn">{t('about.diag.manifestUnreadable')}</Banner>
             )}
-            <span className={css.groupLabel}>{t('about.diag.hint')}</span>
           </div>
         )}
 
@@ -111,7 +153,7 @@ export function AboutPanel({ api, t }: AboutPanelProps) {
             拼接规则是 ./about-view.ts 的纯函数，组件只装配（AGENTS.md §UI 分层铁律）。 */}
         {state.rows !== null && (
           <div className={css.actionRow}>
-            <span className={css.hint}>{t('about.feedbackHint')}</span>
+            <InfoHint text={t('about.feedbackHint')} label={t('common.infoHint')} />
             <CopyButton
               text={buildFeedbackSnippet(state.rows)}
               label={t('about.copyEnv')}
@@ -121,6 +163,62 @@ export function AboutPanel({ api, t }: AboutPanelProps) {
         )}
       </Card>
 
+
+      {/* 插件版本更新检查（2026-09）：只读探测 npm latest + 给一条可复制的升级命令。
+          为什么放在「关于」页：这是用户唯一会主动查看「我装的是哪一版」的地方；
+          检查失败如实显示原因并允许重试，绝不显示成「已是最新」。 */}
+      <Card>
+        <span className={css.groupLabel}>{t('about.update.title')} <InfoHint text={t('about.update.offline')} label={t('common.infoHint')} /></span>
+        <div className={css.statRow} style={{ flexWrap: 'wrap', gap: '8px', alignItems: 'center' }}>
+          {state.rows !== null && (
+            <Badge kind="info">{t('about.update.current', { version: state.rows.version })}</Badge>
+          )}
+          {updateView?.kind === 'upToDate' && <Badge kind="ok">{t('about.update.upToDate')}</Badge>}
+          {updateView?.kind === 'available' && updateView.latest === appliedVersion && (
+            <Badge kind="ok">{t('about.update.applied', { version: appliedVersion ?? '' })}</Badge>
+          )}
+          {updateView?.kind === 'available' && updateView.latest !== appliedVersion && (
+            <Badge kind="warn">
+              {t('about.update.available', { latest: updateView.latest, current: updateView.current })}
+            </Badge>
+          )}
+          {updateView?.kind === 'failed' && (
+            <Badge kind="error">{t('about.update.failed', { error: updateView.error })}</Badge>
+          )}
+        </div>
+
+        {updateView?.kind === 'available' && updateView.command !== null && updateView.latest !== appliedVersion && (
+          <div className={css.actionRow}>
+            <Button variant="primary" onClick={() => setUpdateDialogOpen(true)}>{t('about.update.apply')}</Button>
+          </div>
+        )}
+
+        {updateView?.kind === 'available' && (
+          updateView.command !== null ? (
+            <>
+              <div className={css.hint}>{t('about.update.commandHint')}</div>
+              <pre className={css.cliCommand}>{updateView.command}</pre>
+              <div className={css.actionRow}>
+                <CopyButton text={updateView.command} label={t('about.update.copyCommand')} t={t} />
+                <span className={css.hint}>{t('about.update.copyCommand')}</span>
+              </div>
+            </>
+          ) : (
+            <div className={css.hint}>{t('about.update.noCommand')}</div>
+          )
+        )}
+
+        <div className={css.actionRow}>
+          <Button
+            onClick={() => { runUpdateCheck(updateView !== null) }}
+            loading={updateChecking}
+            disabled={updateChecking}
+          >
+            {updateView === null ? t('about.update.check') : t('about.update.recheck')}
+          </Button>
+        </div>
+      </Card>
+
       {/* 相关链接卡：Star 主按钮 + 仓库/文档/Issues 链接行 + 作者行（全部外链） */}
       <Card>
         <span className={css.groupLabel}>{t('about.links')}</span>
@@ -148,14 +246,13 @@ export function AboutPanel({ api, t }: AboutPanelProps) {
 
       {/* P1-⑩：CLI 救援工具引导卡（GUI 里唯一能发现 CLI 的地方；独立安装、DSH 挂了也能用） */}
       <Card>
-        <span className={css.groupLabel}>{t('about.cli.title')}</span>
-        <div className={css.hint}>{t('about.cli.hint')}</div>
+        <span className={css.groupLabel}>{t('about.cli.title')} <InfoHint text={t('about.cli.hint')} label={t('common.infoHint')} /></span>
         <pre className={css.cliCommand}>{ABOUT_CLI.installCommand}</pre>
         <ul className={css.reportList}>
           {ABOUT_CLI.commands.map((c) => (
             <li key={c.command}>
               <code className={css.cliName}>{c.command}</code>
-              {' — '}{c.description}
+              {' — '}{t(c.descriptionKey)}
             </li>
           ))}
         </ul>
@@ -180,6 +277,23 @@ export function AboutPanel({ api, t }: AboutPanelProps) {
         }}
         t={t}
       />
+
+      {/* 新版本弹窗：「检查更新 → 有新版本」自动打开；GitHub 发布说明 + 一键更新（装完提示重启）。
+          只在 command 可用（非 desktop / 已识别档案）时挂载 —— 否则卡片给「插件页更新」提示。 */}
+      {updateView?.kind === 'available' && updateView.command !== null && (
+        <PluginUpdateDialog
+          open={updateDialogOpen}
+          current={updateView.current}
+          latest={updateView.latest}
+          api={api}
+          t={t}
+          onClose={() => setUpdateDialogOpen(false)}
+          onUpdated={(version) => {
+            appliedVersionRef.current = version
+            setAppliedVersion(version)
+          }}
+        />
+      )}
     </div>
   )
 }

package/src/client/about/PluginUpdateDialog.tsx

@@ -0,0 +1,185 @@
+/**
+ * PluginUpdateDialog —— 「检测到新版本 → 立即更新」弹窗。
+ *
+ * 数据流：
+ *  - 打开时拉 GitHub Releases 第一页，取目标版本的 release 正文（纯文本安全渲染，见 ReleaseBody）；
+ *  - 「立即更新」调用宿主 POST /update-apply（官方 dsh plugin 通道，**钉住精确版本**）；
+ *  - 成功后弹窗**保持打开**并提示「请重启 DSH 生效」—— 更新只换了磁盘上的文件，正在运行的进程
+ *    仍是旧版；既不假装已生效，也**绝不自动重启**用户的 DSH。
+ *
+ * 边界：
+ *  - 更新进行中 busy：请求在途时禁用 Esc/遮罩/关闭按钮，避免用户以为没在更新；
+ *  - release 拉取失败**不阻塞更新**（GitHub 限流 / 离线时仍可更新）——只影响说明展示；
+ *  - 失败码 → 本地化文案（plugin-update-view.ts），未知码回落宿主原始文本，渲染前过 redact()。
+ */
+import { useCallback, useEffect, useState } from 'react'
+import type { TranslateNS } from '../client-types.ts'
+import type { ConfigManagerApi } from '../api.ts'
+import { Banner, Button, Spinner } from '../common/ui.tsx'
+import { Modal } from '../common/Modal.tsx'
+import { redact } from '../../security/redaction.ts'
+import { ABOUT_META } from './about-view.ts'
+import { deriveReleasesUrl, fetchReleases, findReleaseForVersion, type FormattedRelease } from './release-notes-view.ts'
+import { ReleaseBody } from './ReleaseBody.tsx'
+import { updateFailureKey } from './plugin-update-view.ts'
+import css from '../config-manager.module.css'
+
+export interface PluginUpdateDialogProps {
+  open: boolean
+  /** 当前运行版本 */
+  current: string
+  /** 目标版本（update-check 的 latest） */
+  latest: string
+  api: ConfigManagerApi
+  t: TranslateNS<'config-manager'>
+  onClose: () => void
+  /** 安装成功回调（父组件据此展示「已更新到 vX，重启后生效」） */
+  onUpdated?: (version: string) => void
+  /** release 来源仓库（缺省 = 插件官方仓库；便于测试注入） */
+  repoUrl?: string
+}
+
+/** 更新说明的拉取状态 */
+type NotesState =
+  | { kind: 'loading' }
+  | { kind: 'loaded'; release: FormattedRelease | null; exact: boolean }
+  | { kind: 'failed'; error: string }
+
+/** 「立即更新」的执行状态 */
+type ApplyState =
+  | { kind: 'idle' }
+  | { kind: 'applying' }
+  | { kind: 'done'; version: string }
+  | { kind: 'failed'; message: string }
+
+const PAGE_SIZE = 10
+
+export function PluginUpdateDialog({
+  open,
+  current,
+  latest,
+  api,
+  t,
+  onClose,
+  onUpdated,
+  repoUrl = ABOUT_META.repoUrl,
+}: PluginUpdateDialogProps) {
+  const [notes, setNotes] = useState<NotesState>({ kind: 'loading' })
+  const [apply, setApply] = useState<ApplyState>({ kind: 'idle' })
+
+  // 打开（或目标版本变化）时重置状态并拉取该版本的 release 正文
+  useEffect(() => {
+    if (!open) return
+    let cancelled = false
+    setNotes({ kind: 'loading' })
+    setApply({ kind: 'idle' })
+    void (async () => {
+      try {
+        const result = await fetchReleases(repoUrl, 1, PAGE_SIZE)
+        if (cancelled) return
+        const match = findReleaseForVersion(result.releases, latest)
+        setNotes({ kind: 'loaded', release: match.release, exact: match.exact })
+      } catch (err) {
+        if (cancelled) return
+        setNotes({ kind: 'failed', error: err instanceof Error ? err.message : String(err) })
+      }
+    })()
+    return () => { cancelled = true }
+  }, [open, latest, repoUrl])
+
+  const runApply = useCallback((): void => {
+    setApply({ kind: 'applying' })
+    api.applyUpdate(latest).then(
+      (result) => {
+        if (result.ok) {
+          setApply({ kind: 'done', version: result.version })
+          onUpdated?.(result.version)
+          return
+        }
+        const key = updateFailureKey(result.code)
+        setApply({ kind: 'failed', message: key !== null ? t(key, { error: result.error }) : result.error })
+      },
+      (err) => {
+        setApply({ kind: 'failed', message: err instanceof Error ? err.message : String(err) })
+      },
+    )
+  }, [api, latest, onUpdated, t])
+
+  const applying = apply.kind === 'applying'
+  const done = apply.kind === 'done'
+  const releasesPageUrl = deriveReleasesUrl(repoUrl)
+  const title = t('about.update.dialog.title', { version: latest })
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={title}
+      busy={applying}
+      cardStyle={{ width: 'min(640px, 100%)', maxHeight: '85vh' }}
+    >
+      <Modal.Header title={title} closeLabel={t('common.close')} onClose={onClose} closeDisabled={applying} />
+
+      <Modal.Body scroll style={{ maxHeight: '60vh' }}>
+        {/* 版本行：当前 → 目标 */}
+        <div className={css.updateVersionRow}>
+          <span className={css.hint}>{t('about.update.dialog.from', { current })}</span>
+          <span className={css.updateVersionArrow} aria-hidden="true">→</span>
+          <span className={css.updateVersionTarget}>{latest}</span>
+        </div>
+
+        {notes.kind === 'loading' && (
+          <div className={css.updateNotesLoading}>
+            <Spinner label={t('about.update.dialog.loadingNotes')} />
+          </div>
+        )}
+
+        {notes.kind === 'failed' && (
+          <div>
+            <Banner kind="warn">{t('about.update.dialog.notesFailed', { error: redact(notes.error) })}</Banner>
+            <div className={css.actionRow}>
+              <Button href={releasesPageUrl}>{t('about.update.dialog.viewOnGithub')}</Button>
+            </div>
+          </div>
+        )}
+
+        {notes.kind === 'loaded' && notes.release === null && (
+          <Banner kind="info">{t('about.update.dialog.noNotes', { version: latest })}</Banner>
+        )}
+
+        {notes.kind === 'loaded' && notes.release !== null && (
+          <>
+            {!notes.exact && <Banner kind="warn">{t('about.update.dialog.notExact', { version: latest })}</Banner>}
+            <ReleaseBody body={notes.release.body} t={t} />
+            <div className={css.actionRow}>
+              <Button href={notes.release.url}>{t('about.update.dialog.viewReleaseOnGithub')}</Button>
+              <Button href={releasesPageUrl}>{t('about.update.dialog.viewOnGithub')}</Button>
+            </div>
+          </>
+        )}
+
+        {apply.kind === 'failed' && <Banner kind="error">{redact(apply.message)}</Banner>}
+
+        {done && (
+          <div>
+            <Banner kind="ok">{t('about.update.dialog.done', { version: apply.version })}</Banner>
+            <div className={css.hint}>{t('about.update.dialog.restart')}</div>
+          </div>
+        )}
+      </Modal.Body>
+
+      <Modal.Footer>
+        {done ? (
+          <Button variant="primary" onClick={onClose}>{t('common.close')}</Button>
+        ) : applying ? (
+          <Button variant="primary" loading disabled>{t('about.update.dialog.installing')}</Button>
+        ) : (
+          <>
+            <Button onClick={onClose}>{t('common.cancel')}</Button>
+            <Button variant="primary" onClick={runApply}>{t('about.update.dialog.install')}</Button>
+          </>
+        )}
+      </Modal.Footer>
+    </Modal>
+  )
+}

package/src/client/about/ReleaseBody.tsx

@@ -0,0 +1,144 @@
+/**
+ * ReleaseBody —— GitHub Release 正文的结构化安全渲染（**共享原语**）。
+ *
+ * 为什么抽出来：「更新内容」浏览弹窗（ReleaseNotesDialog）与新版本弹窗（PluginUpdateDialog）
+ * 都要渲染 release 正文 —— 渲染规则必须只有一份：纯文本分块解析 + 行内格式
+ * （`code` / **bold** / [link](url)），**零 dangerouslySetInnerHTML**（杜绝 XSS）。
+ * 本组件从 ReleaseNotesDialog 原样搬出（含内联样式），视觉与行为逐字不变。
+ */
+import type { TranslateNS } from '../client-types.ts'
+import { parseMarkdownBlocks, type MarkdownBlock } from './release-notes-view.ts'
+import css from '../config-manager.module.css'
+
+/**
+ * 纯 React 安全渲染 Markdown 文本行中的行内格式（粗体、行内代码、链接）。
+ */
+function renderInlineMarkdown(text: string) {
+  // 简单行内解析：`code`, **bold**, [link](url)
+  // 分割正则
+  const regex = /(`[^`]+`|\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\))/g
+  const parts = text.split(regex)
+
+  return parts.map((part, idx) => {
+    if (!part) return null
+    // 行内代码 `...`
+    if (part.startsWith('`') && part.endsWith('`') && part.length >= 2) {
+      return (
+        <code key={idx} className={css.cliName}>
+          {part.slice(1, -1)}
+        </code>
+      )
+    }
+    // 粗体 **...**
+    if (part.startsWith('**') && part.endsWith('**') && part.length >= 4) {
+      return <strong key={idx}>{part.slice(2, -2)}</strong>
+    }
+    // 链接 [text](url)
+    const linkMatch = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/)
+    if (linkMatch && linkMatch[1] && linkMatch[2]) {
+      return (
+        <a
+          key={idx}
+          href={linkMatch[2]}
+          target="_blank"
+          rel="noreferrer"
+          className={css.aboutAuthor}
+        >
+          {linkMatch[1]}
+        </a>
+      )
+    }
+    return <span key={idx}>{part}</span>
+  })
+}
+
+/**
+ * 渲染单个结构化 Markdown 块。
+ */
+function MarkdownBlockView({ block }: { block: MarkdownBlock }) {
+  switch (block.type) {
+    case 'heading': {
+      const headingStyle = {
+        fontWeight: 600,
+        color: 'var(--dsw-alias-label-primary)',
+        marginTop: block.level === 1 ? '12px' : '8px',
+        marginBottom: '4px',
+        fontSize: block.level === 1 ? '15px' : block.level === 2 ? '14px' : '13px',
+      }
+      return <div style={headingStyle}>{block.text}</div>
+    }
+    case 'list-item': {
+      return (
+        <div style={{ display: 'flex', gap: '6px', alignItems: 'flex-start', paddingLeft: '4px' }}>
+          <span style={{ color: 'var(--dsw-alias-label-tertiary)', userSelect: 'none' }}>
+            {block.ordered ? (block.index ?? 1) + '.' : '•'}
+          </span>
+          <div style={{ flex: 1 }}>{renderInlineMarkdown(block.text)}</div>
+        </div>
+      )
+    }
+    case 'quote': {
+      return (
+        <div
+          style={{
+            borderLeft: '3px solid var(--dsw-alias-border-l1)',
+            paddingLeft: '8px',
+            color: 'var(--dsw-alias-label-secondary)',
+            fontStyle: 'italic',
+          }}
+        >
+          {renderInlineMarkdown(block.text)}
+        </div>
+      )
+    }
+    case 'code-block': {
+      return (
+        <pre
+          className={css.cliCommand}
+          style={{ margin: '4px 0', padding: '8px', fontSize: '12px' }}
+        >
+          {block.code}
+        </pre>
+      )
+    }
+    case 'hr': {
+      return (
+        <div
+          style={{
+            borderBottom: '1px solid var(--dsw-alias-border-l2)',
+            margin: '8px 0',
+          }}
+        />
+      )
+    }
+    case 'paragraph':
+    default: {
+      return <div>{renderInlineMarkdown(block.text)}</div>
+    }
+  }
+}
+
+/** release 正文：结构化块渲染；空正文显示「暂无详细说明」。 */
+export function ReleaseBody({ body, t }: { body: string; t: TranslateNS<'config-manager'> }) {
+  const blocks = parseMarkdownBlocks(body)
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '6px',
+        fontSize: '13px',
+        lineHeight: '1.6',
+        color: 'var(--dsw-alias-label-primary)',
+      }}
+    >
+      {blocks.length > 0 ? (
+        blocks.map((block, idx) => <MarkdownBlockView key={idx} block={block} />)
+      ) : (
+        <div style={{ color: 'var(--dsw-alias-label-tertiary)', fontStyle: 'italic' }}>
+          {t('about.releaseNotes.noBody')}
+        </div>
+      )}
+    </div>
+  )
+}