@objectivex666/dsh-settings-search 1.3.0 → 1.4.0

package/README.en.md

@@ -16,6 +16,7 @@
 - 📂 **In-page option search (v1.2.0)** — search beyond pages and reach the specific options inside them: Plugins-page tabs (`settings.plugins.tab`), Web UI plugin cards (`web-ui.plugin.item`), general rows, and more, each shown with a "page › option" breadcrumb.
 - 🧭 **Click-to-jump** — selecting a result clicks the matching left-nav entry to open its section; for tab options it also opens the tab and flashes the target row. A manual-path hint appears if automatic navigation is not possible.
 - 🌱 **Progressive indexing** — self-drawing settings rows are harvested from the rendered DOM (via their `[data-slot]` anchors) the first time their page is visited, then stay searchable.
+- 🛠 **Built-in settings page (v1.4.0)** — a "Settings Search" page in the left navigation shows the current version and checks npm for a newer release on demand; when one exists it hands you a copy-ready `dsh plugin update` command.
 - 🌐 **i18n** — built-in Chinese/English dictionaries that follow the DSH localization system and are easy to extend.
 - 🎨 **Theme-aware** — styled entirely with CSS variables, automatically following the DSH theme (light/dark).
 - ⚡ **Reactive** — subscribes to settings entries being added, removed, or changed, and refreshes results automatically.

package/README.md

@@ -16,6 +16,7 @@
 - 📂 **页内选项搜索（v1.2.0）**：不只搜页面，还能直达每个设置页内部的具体选项——插件页的标签页（`settings.plugins.tab`）、Web UI 插件的卡片（`web-ui.plugin.item`）、通用设置行等，结果以「页面 › 选项」面包屑展示。
 - 🧭 **点击即达**：选中结果后自动点击对应的左侧导航项打开所在分区；若是页内标签页会继续点开对应标签，并高亮闪烁目标选项行。无法自动跳转时显示手动路径提示。
 - 🌱 **渐进索引**：自绘界面的设置行会在其所在页面首次被访问时从渲染 DOM 中收割标题并加入索引（此后始终可搜）。
+- 🛠 **自带设置页（v1.4.0）**：左侧导航新增「设置搜索」页——展示当前版本，一键检查 npm 注册表上的最新版本；有更新时直接给出复制就用的 `dsh plugin update` 命令。
 - 🌐 **多语言支持**：内置中英文国际化，可跟随 DSH 本地化系统扩展。
 - 🎨 **主题适配**：完全使用 CSS 变量，自动跟随 DSH 主题（亮/暗）。
 - ⚡ **动态响应**：实时订阅设置项的新增/删除/变更，搜索结果自动刷新。

package/lib/client.js

@@ -29,6 +29,9 @@ window.__ModuleLoader__.load({
     const React = require('react')
 
     const NS = 'settings-search-v5'
+    /** Single source of truth is package.json — scripts/check.mjs asserts this matches. */
+    const PKG_VERSION = '1.4.0'
+    const NPM_NAME = '@objectivex666/dsh-settings-search'
     const zh = {
       title: '设置',
       placeholder: '搜索设置…',
@@ -38,6 +41,17 @@ window.__ModuleLoader__.load({
       page: '页面',
       option: '选项',
       jumpFail: '未能自动跳转，请手动打开：{path}',
+      updn: '设置搜索',
+      updDesc: '设置面板顶部搜索框由本插件提供。在此检查插件的版本与更新。',
+      updCurrent: '当前版本',
+      updLatestKnown: 'npm 最新版',
+      updCheck: '检查更新',
+      updChecking: '正在检查…',
+      updNewest: '已是最新版本 ✓',
+      updFound: '发现新版本 {ver}，可执行以下命令更新后重启 DSH：',
+      updErr: '检查失败（网络或注册表不可达），请稍后重试。',
+      updCopy: '复制命令',
+      updCopied: '已复制 ✓',
     }
     const en = {
       title: 'Settings',
@@ -48,6 +62,17 @@ window.__ModuleLoader__.load({
       page: 'Page',
       option: 'Option',
       jumpFail: 'Could not navigate automatically — open it here: {path}',
+      updn: 'Settings Search',
+      updDesc: "The search box atop the settings panel comes from this plugin. Check its version and updates here.",
+      updCurrent: 'Current version',
+      updLatestKnown: 'npm latest',
+      updCheck: 'Check for updates',
+      updChecking: 'Checking…',
+      updNewest: 'You are on the latest version ✓',
+      updFound: 'Version {ver} available. Run the command below, then restart DSH:',
+      updErr: 'Check failed (network or registry unreachable). Try again later.',
+      updCopy: 'Copy command',
+      updCopied: 'Copied ✓',
     }
 
     /** Inner-row slots that represent specific options inside one page. */
@@ -80,6 +105,19 @@ window.__ModuleLoader__.load({
       .sss-guide { padding: 7px 10px; border-radius: 8px; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 18px; }
       @keyframes sssFlashBg { 0% { background-color: var(--dsw-alias-interactive-bg-hover); } 100% { background-color: transparent; } }
       .sss-flash { animation: sssFlashBg 1.8s ease-out; border-radius: 8px; }
+      .sss-upd { display: flex; flex-direction: column; gap: 12px; padding: 16px; max-width: 560px; }
+      .sss-upd-title { font-size: 15px; font-weight: 600; line-height: 22px; color: var(--dsw-alias-label-primary); margin: 0; }
+      .sss-upd-desc { margin: 0; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
+      .sss-upd-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; background: var(--dsw-alias-bg-layer-1); }
+      .sss-upd-row { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; }
+      .sss-upd-key { flex-shrink: 0; width: 88px; color: var(--dsw-alias-label-secondary); }
+      .sss-upd-val { color: var(--dsw-alias-label-primary); }
+      .sss-upd-badge { flex-shrink: 0; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 18px; }
+      .sss-btn { height: 28px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); font-size: 12px; cursor: pointer; }
+      .sss-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+      .sss-btn:disabled { opacity: .55; cursor: default; }
+      .sss-cmd { user-select: all; font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 11.5px; line-height: 20px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; padding: 4px 8px; word-break: break-all; }
+      .sss-upd-note { margin: 0; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
     `
     let stylesInstalled = false
     function installStyles() {
@@ -463,6 +501,94 @@ window.__ModuleLoader__.load({
         ])
       }
 
+      const compareSemver = (a, b) => {
+        const pa = String(a).split('.').map((n) => parseInt(n, 10) || 0)
+        const pb = String(b).split('.').map((n) => parseInt(n, 10) || 0)
+        for (let i = 0; i < 3; i += 1) {
+          if ((pa[i] ?? 0) !== (pb[i] ?? 0)) return (pa[i] ?? 0) - (pb[i] ?? 0)
+        }
+        return 0
+      }
+
+      function UpdatePanel() {
+        const [state, setState] = React.useState('idle') // idle | loading | newest | outdated | error
+        const [latest, setLatest] = React.useState('')
+        const [copied, setCopied] = React.useState(false)
+
+        React.useEffect(() => {
+          if (!copied) return
+          const off = setTimeout(() => setCopied(false), 1600)
+          return () => clearTimeout(off)
+        }, [copied])
+
+        const check = async () => {
+          setState('loading')
+          setCopied(false)
+          try {
+            const res = await fetch(`https://registry.npmjs.org/${NPM_NAME}/latest?t=${Date.now()}`)
+            if (!res.ok) throw new Error(`HTTP ${res.status}`)
+            const data = await res.json()
+            const ver = typeof data?.version === 'string' ? data.version : ''
+            if (ver === '') throw new Error('no version in registry response')
+            setLatest(ver)
+            setState(compareSemver(ver, PKG_VERSION) > 0 ? 'outdated' : 'newest')
+          } catch {
+            setState('error')
+          }
+        }
+
+        const copyCmd = async () => {
+          const cmd = `dsh plugin update ${NPM_NAME}`
+          try { await navigator.clipboard.writeText(cmd); setCopied(true) } catch { /* user can copy manually */ }
+        }
+
+        const statusNode = {
+          idle: React.createElement('span', { className: 'sss-upd-val' }, '—'),
+          loading: React.createElement('span', { className: 'sss-upd-val' }, t('updChecking')),
+          newest: React.createElement('span', { className: 'sss-upd-val' }, t('updNewest')),
+          error: React.createElement('span', { className: 'sss-upd-val' }, t('updErr')),
+          outdated: latest === '' ? null : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, [
+            React.createElement('p', { className: 'sss-upd-note' }, t('updFound').replace('{ver}', `v${latest}`)),
+            React.createElement('code', { className: 'sss-cmd' }, `dsh plugin update ${NPM_NAME}`),
+            React.createElement('div', null,
+              React.createElement('button', { className: 'sss-btn', type: 'button', onClick: () => { void copyCmd() } },
+                copied ? t('updCopied') : t('updCopy'))),
+          ]),
+        }
+
+        return React.createElement('div', { className: 'sss-upd' }, [
+          React.createElement('h3', { className: 'sss-upd-title' }, `${t('updn')} v${PKG_VERSION}`),
+          React.createElement('p', { className: 'sss-upd-desc' }, t('updDesc')),
+          React.createElement('div', { className: 'sss-upd-card' }, [
+            React.createElement('div', { className: 'sss-upd-row' }, [
+              React.createElement('span', { className: 'sss-upd-key' }, t('updCurrent')),
+              React.createElement('code', { className: 'sss-cmd' }, PKG_VERSION),
+              state === 'newest' ? React.createElement('span', { className: 'sss-upd-badge' }, 'npm ✓') : null,
+            ]),
+            state === 'outdated' || state === 'loading'
+              ? React.createElement('div', { className: 'sss-upd-row' }, [
+                  React.createElement('span', { className: 'sss-upd-key' }, t('updLatestKnown')),
+                  state === 'loading' ? React.createElement('span', { className: 'sss-upd-val' }, '…') : React.createElement('code', { className: 'sss-cmd' }, latest),
+                ])
+              : null,
+            state === 'outdated' || state === 'loading' || state === 'error' || state === 'idle' || state === 'newest'
+              ? (state === 'outdated' ? statusNode.outdated : statusNode[state])
+              : null,
+            React.createElement('div', { className: 'sss-upd-row' },
+              React.createElement('button', { className: 'sss-btn', type: 'button', disabled: state === 'loading', onClick: () => { void check() } },
+                state === 'loading' ? t('updChecking') : t('updCheck'))),
+          ]),
+        ])
+      }
+
+      ctx.slots.inject('settings.section', () => ctx.slots.register({
+        name: 'settings.section',
+        id: 'settings-search',
+        order: 1600,
+        locale: NS,
+        label: () => t('updn'),
+      }, UpdatePanel))
+
       ctx.slots.inject('settings.header', () => ctx.slots.register({
         name: 'settings.header',
         priority: -1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@objectivex666/dsh-settings-search",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "DSH settings panel search plugin – instantly filter setting sections and general items with navigation guidance. Installable via `dsh plugin add`.",
   "keywords": [
     "dsh",

package/scripts/check.mjs

@@ -54,6 +54,12 @@ check(typeof client.apply === 'function', 'client half must export apply(ctx)')
 check(Array.isArray(client.inject) && client.inject.includes('slots') && client.inject.includes('locale'),
   'client half inject must include "slots" and "locale"')
 
+// 4. embedded version constant matches the manifest (update panel displays it)
+const versionMatch = /const PKG_VERSION = '([^']+)'/.exec(source)
+check(versionMatch !== null, 'lib/client.js must define const PKG_VERSION')
+check(versionMatch?.[1] === pkg.version,
+  `PKG_VERSION (${versionMatch?.[1]}) must equal package.json version (${pkg.version})`)
+
 if (failed > 0) {
   console.error(`${failed} check(s) failed`)
   process.exit(1)