dsh-plugin 0.1.0 → 1.0.0

package/src/client/components/Dropdown.tsx

@@ -0,0 +1,80 @@
+/**
+ * Custom dropdown (native <select> replacement).
+ *
+ * macOS/浏览器原生下拉无法跟随宿主主题，这里自绘：触发器按钮 + 绝对定位面板，
+ * 点外部/Esc 关闭；选项 hover 加重底色、激活项深色实心高亮，全部走 --dsw-alias-* 主题变量。
+ */
+import { createElement as h, useEffect, useRef, useState } from 'react'
+import type { JSX } from 'react'
+import styles from '../styles/Dropdown.module.css'
+import { ChevronDownIcon } from './icons.tsx'
+
+export interface DropdownOption<T extends string> {
+  value: T
+  label: string
+  /** 可选计数徽标（如「已安装 12」） */
+  count?: number
+}
+
+interface DropdownProps<T extends string> {
+  value: T
+  options: DropdownOption<T>[]
+  onChange: (value: T) => void
+  title?: string
+}
+
+export function Dropdown<T extends string>({ value, options, onChange, title }: DropdownProps<T>): JSX.Element {
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement | null>(null)
+
+  // 面板展开时：点面板外部或按 Esc 关闭。
+  useEffect(() => {
+    if (!open) return
+    const onDoc = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false)
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', onDoc)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDoc)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  const current = options.find((o) => o.value === value)
+
+  return h('div', { className: styles.dropdown, ref: rootRef },
+    h('button', {
+      className: styles.dropdownBtn,
+      type: 'button',
+      title,
+      'aria-haspopup': 'listbox',
+      'aria-expanded': open,
+      onClick: () => setOpen((v) => !v),
+    },
+      h('span', { className: styles.dropdownLabel }, current?.label ?? value),
+      h('span', { className: open ? styles.dropdownArrowOpen : styles.dropdownArrow }, h(ChevronDownIcon)),
+    ),
+    open && h('div', { className: styles.dropdownPanel, role: 'listbox' },
+      options.map((o) => h('button', {
+        key: o.value,
+        type: 'button',
+        role: 'option',
+        'aria-selected': o.value === value,
+        className: o.value === value ? styles.dropdownItemActive : styles.dropdownItem,
+        onClick: () => {
+          onChange(o.value)
+          setOpen(false)
+        },
+      },
+        h('span', { className: styles.dropdownItemLabel }, o.label),
+        typeof o.count === 'number'
+          ? h('span', { className: o.value === value ? styles.dropdownCountActive : styles.dropdownCount }, o.count)
+          : null,
+      )),
+    ),
+  )
+}

package/src/client/components/NotificationsModal.tsx

@@ -0,0 +1,230 @@
+/**
+ * Notification-center dialog: a persistent log of every settled install /
+ * remove task — successes and failures alike.
+ *
+ * Records are written to localStorage at settle time (see lib/failures.ts),
+ * so a result is never lost even when the dialog was dismissed or the user
+ * was away. Each entry carries a circular status badge (green check for
+ * success, red cross for failure) with white glyph and message text;
+ * failures keep their copy / fix / file-an-issue actions. Opened from the
+ * header entry button.
+ */
+import { createElement as h } from 'react'
+import type { MouseEvent } from 'react'
+import styles from '../styles/Modal.module.css'
+import type { EnvInfo, Translate } from '../types.ts'
+import type { NotificationRecord } from '../lib/failures.ts'
+import { classifyFailure } from '../lib/failures.ts'
+import type { PendingRestart, QueueTask } from '../hooks/useTaskQueue.ts'
+import { pluginIssueUrl, pluginSiteUrl } from '../lib/catalog.ts'
+import { CloseIcon } from './icons.tsx'
+
+/** 记录时间紧凑展示：今年内 MM-DD HH:mm，跨年补年份前缀。 */
+function fmtTime(at: number): string {
+  const d = new Date(at)
+  const pad = (n: number) => String(n).padStart(2, '0')
+  const mmdd = `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+  return d.getFullYear() === new Date().getFullYear() ? mmdd : `${d.getFullYear()}-${mmdd}`
+}
+
+/** 圆形状态徽标内的白色图形：成功为对勾、失败为叉。 */
+function BadgeGlyph({ ok }: { ok: boolean }) {
+  return h('svg', {
+    className: styles.noticeBadgeIcon,
+    viewBox: '0 0 16 16',
+    width: 12,
+    height: 12,
+    fill: 'none',
+    'aria-hidden': 'true',
+  }, ok
+    ? h('path', {
+      d: 'M3 8.5l3.5 3.5 6.5-6.5',
+      stroke: '#ffffff',
+      strokeWidth: 2,
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+    })
+    : h('path', {
+      d: 'M4 4l8 8M12 4L4 12',
+      stroke: '#ffffff',
+      strokeWidth: 2,
+      strokeLinecap: 'round',
+    }))
+}
+
+export function NotificationsModal({ records, tasks, pendingRestarts, t, env, onClose, onCopy, onClear, cancelTask, restarting, onRestart }: {
+  records: NotificationRecord[]
+  /** 进行中的安装/卸载任务（实时进度，与队列弹窗同一数据源） */
+  tasks: QueueTask[]
+  /** 待重启插件：装完没重启的常驻提醒 */
+  pendingRestarts: PendingRestart[]
+  t: Translate
+  env: EnvInfo | null
+  onClose: () => void
+  onCopy: (text: string) => void
+  onClear: () => void
+  cancelTask: (id: number) => void
+  restarting: boolean
+  onRestart: () => void
+}) {
+  return h('div', {
+    className: styles.overlay,
+    onClick: (e: MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) onClose()
+    },
+  },
+    h('div', { className: styles.errorModal, role: 'dialog', 'aria-modal': 'true' },
+      h('div', { className: styles.modalHead },
+        h('div', { className: styles.modalTitle }, t('notifications')),
+        h('button', {
+          className: styles.modalClose,
+          'aria-label': t('errorClose'),
+          onClick: onClose,
+        }, h(CloseIcon)),
+      ),
+      h('div', { className: styles.modalBody },
+        h('div', { className: styles.errorHint }, t('notificationsDesc')),
+        // 进行中的安装/卸载任务实时进度也进通知中心：与队列弹窗同一套行结构，
+        // 关掉任务弹窗后仍可在这里盯着进度；待重启插件可在此直接触发重启
+        (tasks.length > 0 || pendingRestarts.length > 0)
+          ? h('div', null, [
+            pendingRestarts.length > 0
+              ? h('div', { className: styles.queueSection },
+                h('div', { className: styles.queueSectionTitle }, t('sectionPendingRestart')),
+                pendingRestarts.map((p) => h('div', { key: `restart-${p.target}`, className: styles.queueRow },
+                  h('div', { className: styles.queueRowHead },
+                    h('span', {
+                      className: `${styles.failKind} ${p.kind === 'uninstall' ? styles.failKindUninstall : styles.failKindInstall}`,
+                    }, p.kind === 'uninstall' ? t('uninstall') : t('install')),
+                    h('span', { className: styles.queueRowTarget, title: p.target }, p.target),
+                  ),
+                  p.desc ? h('div', { className: styles.queueRowDesc, title: p.desc }, p.desc) : null,
+                  h('div', { className: styles.queueRowBody },
+                    h('span', { className: styles.pendingRowStatus },
+                      p.kind === 'uninstall' ? t('restartPendingHintUninstall') : t('restartPendingHint')),
+                    h('span', { className: styles.pendingRowActions },
+                      h('button', {
+                        className: styles.restartLater,
+                        disabled: restarting,
+                        onClick: onClose,
+                      }, t('restartLater')),
+                      h('button', {
+                        className: styles.restartNow,
+                        disabled: restarting,
+                        onClick: onRestart,
+                      }, restarting ? t('restarting') : t('restartNow')),
+                    ),
+                  ),
+                )),
+              )
+              : null,
+            tasks.length > 0
+              ? h('div', { className: styles.queueSection },
+                h('div', { className: styles.queueSectionTitle }, t('sectionInProgress')),
+                tasks.map((q) => h('div', { key: q.id, className: styles.queueRow },
+                  h('div', { className: styles.queueRowHead },
+                    h('span', {
+                      className: `${styles.failKind} ${q.kind === 'install' ? styles.failKindInstall : styles.failKindUninstall}`,
+                    }, q.kind === 'install' ? t('install') : t('uninstall')),
+                    h('span', { className: styles.queueRowTarget, title: q.target }, q.target),
+                    h('button', {
+                      className: styles.stripCancel,
+                      disabled: q.status === 'cancelling',
+                      onClick: (e: MouseEvent<HTMLButtonElement>) => { e.stopPropagation(); cancelTask(q.id) },
+                    }, t('cancelTask')),
+                  ),
+                  q.desc ? h('div', { className: styles.queueRowDesc, title: q.desc }, q.desc) : null,
+                  h('div', { className: styles.queueRowBody },
+                    h('span', { className: styles.queueRowStatus },
+                      q.status === 'running'
+                        ? (q.kind === 'install' ? t('installing') : t('uninstalling'))
+                        : q.status === 'cancelling'
+                          ? t('cancelling')
+                          : (q.kind === 'install' ? t('queuedTitle') : t('queuedUninstallTitle'))),
+                    h('div', { className: `${styles.progressTrack} ${styles.queueRowTrack}` },
+                      h('div', { className: styles.progressFill, style: { width: `${q.progress}%` } }),
+                    ),
+                    h('span', { className: styles.queueRowPct }, `${q.progress}%`),
+                  ),
+                )),
+              )
+              : null,
+          ])
+          : null,
+        records.length === 0
+          ? h('div', { className: styles.failEmpty }, t('notificationsEmpty'))
+          : h('div', { className: styles.noticeList },
+            records.map((r) => {
+              return h('div', { key: r.id, className: styles.noticeRow },
+              h('div', {
+                className: r.ok ? styles.noticeBadgeOk : styles.noticeBadgeFail,
+              }, h(BadgeGlyph, { ok: r.ok })),
+              h('div', { className: styles.noticeMain },
+                h('div', { className: styles.noticeHead },
+                  h('span', {
+                    className: r.ok ? styles.noticeTextOk : styles.noticeTextFail,
+                  }, r.ok
+                    ? (r.kind === 'install' ? t('installDone') : t('uninstallDone'))
+                    : (r.kind === 'install' ? t('errorTitleInstall') : t('errorTitleUninstall'))),
+                  r.repo
+                    ? h('a', {
+                      className: styles.failRepo,
+                      // 跳转到官网详情页（含插件收录信息），不在通知弹窗直接跳 GitHub
+                      href: pluginSiteUrl(r.repo),
+                      target: '_blank',
+                      rel: 'noopener noreferrer',
+                      title: r.repo,
+                    }, r.repo)
+                    : null,
+                  h('span', {
+                    className: styles.failTime,
+                    title: new Date(r.at).toLocaleString(),
+                  }, fmtTime(r.at)),
+                  !r.ok && h('button', {
+                    className: styles.failCopy,
+                    onClick: () => onCopy(r.message),
+                  }, t('failCopy')),
+                ),
+                // 每条失败记录是一个独立卡片：头部（状态/仓库/时间/复制完整日志）→ 修复或提 Issue 动作。
+                // 卡片不展示错误日志预览，完整日志靠「复制完整日志」按钮带走，避免每条卡片被日志撑高
+                !r.ok && (() => {
+                  const kind = classifyFailure(r.message)
+                  if (kind === 'pluginPrepare' || kind === 'pnpmIgnoredBuild') {
+                    // [packaging]（预检/装后校验拦截：git 分发缺产物，不支持官方默认安装方式）与
+                    // prepare 构建脚本实际执行失败 / 原生依赖构建被 pnpm 拦截：都是插件打包分发问题 —— 先说明原因，按钮在下方提交
+                    return h('div', null, [
+                      h('div', { className: styles.failPrepareHint }, kind === 'pnpmIgnoredBuild'
+                        ? t('failIgnoredBuild')
+                        : /\[packaging\]/i.test(r.message) ? t('failPackagingHint') : t('failPrepareHint')),
+                      r.repo ? h('a', {
+                        className: styles.failBigIssue,
+                        href: pluginIssueUrl(r.repo, r.message, env),
+                        target: '_blank',
+                        rel: 'noopener noreferrer',
+                        title: t('failIssueHint'),
+                      }, t('failIssueBig')) : null,
+                    ])
+                  }
+                  return r.repo ? h('a', {
+                    className: styles.failBigIssue,
+                    href: pluginIssueUrl(r.repo, r.message, env),
+                    target: '_blank',
+                    rel: 'noopener noreferrer',
+                    title: t('failIssueHint'),
+                  }, t('failIssueBig')) : null
+                })(),
+              ),
+            )
+            }),
+          ),
+        h('div', { className: styles.modalActions },
+          records.length > 0 ? h('button', {
+            className: styles.failClear,
+            onClick: onClear,
+          }, t('notificationsClear')) : null,
+          h('button', { className: styles.restartNow, onClick: onClose }, t('errorClose')),
+        ),
+      ),
+    ),
+  )
+}

package/src/client/components/PluginCard.tsx

@@ -0,0 +1,104 @@
+/**
+ * One plugin card in the catalog list: name/category/verified badge,
+ * description + topics, star/fork/date stats, and the detail/install/
+ * uninstall actions.
+ */
+import { createElement as h } from 'react'
+import styles from '../styles/List.module.css'
+import type { HubPlugin, LocaleId, Translate } from '../types.ts'
+import { CATEGORY_LABELS, categoryLabel, pluginDetailUrl } from '../lib/catalog.ts'
+import { fmtStars, relTime } from '../lib/format.ts'
+
+export function PluginCard({ plugin: p, copied, installedName, installedVersion, hasUpdate, t, langKey, langPath, onInstall, onUninstall }: {
+  plugin: HubPlugin
+  copied: string | null
+  installedName: (p: HubPlugin) => string | null
+  /** 已安装版本号（安装时从目录信号记录；无 release 的仓库为空，无版本号可展示） */
+  installedVersion: (p: HubPlugin) => string | null
+  /** 已安装且目录有更新（有版本比版本、无版本比仓库更新时间） */
+  hasUpdate: (p: HubPlugin) => boolean
+  t: Translate
+  langKey: LocaleId
+  langPath: string
+  /** 第二个参数标记「更新」（已安装目标的覆盖安装）：按钮/弹窗据此走更新语义 */
+  onInstall: (p: HubPlugin, opts?: { update?: boolean }) => void
+  onUninstall: (p: HubPlugin) => void
+}) {
+  const repo = p.source?.repo ?? ''
+  const isCopied = copied === repo
+  const pkg = installedName(p)
+  const isInstalled = pkg !== null
+  const update = hasUpdate(p)
+  // 版本号展示：已安装 → 当前已装版本（最能反映用户状态）；未安装 → 目录最新版本
+  const versionShown = isInstalled ? installedVersion(p) : p.version
+
+  return h('div', { className: styles.card },
+    h('div', { className: styles.cardMain },
+      h('div', { className: styles.cardHead },
+        h('div', { className: styles.cardTitle, title: p.description ?? '' }, p.displayName ?? p.slug),
+        // 版本号紧跟插件名称：有版本才显示（无 release 的仓库不展示版本号）
+        versionShown ? h('span', { className: styles.versionBadge, title: t('version') }, versionShown) : null,
+        // 已安装且有更新：醒目提示（有 release 比版本号、无 release 比仓库最近更新时间）
+        update ? h('span', { className: styles.updateBadge, title: t('updateAvailableHint') }, t('updateAvailable')) : null,
+        p.category ? h('span', { className: styles.categoryBadge }, categoryLabel(CATEGORY_LABELS, p.category, langKey)) : null,
+        p.compatibility?.status === 'verified'
+          ? h('span', { className: styles.verified }, t('verified'))
+          : null,
+      ),
+      // 描述始终显示：站点英文数据缺翻译时 description 回退成中文也照常展示，
+      // 描述是了解插件的第一入口，比隐藏更实用（不再为求语言一致而砍内容）。
+      p.description ? h('p', { className: styles.desc }, p.description) : null,
+      (p.topics?.length ?? 0) > 0
+        ? h('div', { className: styles.topics },
+          p.topics!.slice(0, 3).map((topic) => h('span', { key: topic, className: styles.topic }, topic)),
+        )
+        : null,
+    ),
+    h('div', { className: styles.cardSide },
+      h('div', { className: styles.stats },
+        h('span', { className: styles.star }, '\u2605 ', fmtStars(p.stats?.stargazers_count)),
+        h('span', { className: styles.fork }, t('fork'), ' ', fmtStars(p.stats?.forks_count)),
+        h('span', { className: styles.date }, relTime(p.dates?.repoUpdatedAt, t)),
+      ),
+      repo
+        ? h('div', { className: styles.actions },
+          // 查看详情：未安装/已安装都始终显示，跳转官网详情页
+          h('a', {
+            className: styles.detailBtn,
+            // 两级路径：/plugins/{ownerSlug}/{slug}；旧数据缺 ownerSlug 时从 repo 推导
+            href: pluginDetailUrl(p, langPath),
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            title: p.slug,
+          }, t('detail')),
+          isInstalled
+            // 已安装且有更新：按钮变「可更新」，点击直接覆盖安装（安装完成自动记录新版本）
+            ? (update
+              ? h('button', {
+                className: styles.installBtnUpdate,
+                title: t('updateAvailableHint'),
+                onClick: () => onInstall(p, { update: true }),
+              }, t('update'))
+              : h('button', {
+                className: styles.installBtnInstalled,
+                disabled: true,
+                title: t('installed'),
+              }, t('installed')))
+            : h('button', {
+              className: isCopied ? styles.installBtnCopied : styles.installBtn,
+              // 文字恒定避免按钮宽度变化导致卡片跳动；点击先弹信任确认，
+              // 弹窗内可选择复制命令或直接安装
+              onClick: () => onInstall(p),
+            }, t('install')),
+          isInstalled
+            // 已安装：卸载按钮（危险色），保留明确状态语义
+            ? h('button', {
+              className: styles.uninstallBtn,
+              onClick: () => onUninstall(p),
+            }, t('uninstall'))
+            : null,
+        )
+        : null,
+    ),
+  )
+}