@objectivex666/dsh-settings-search 1.2.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() {
@@ -135,26 +173,50 @@ window.__ModuleLoader__.load({
       }
 
       /**
-       * Read visible titles for self-drawing occupants out of the live DOM:
-       * the shell marks every rendered inner-slot occupant with
-       * `[data-slot="<name>"]`; when DOM order matches entry order we can
-       * pair each rendered card with its registration id.
+       * Read visible titles for self-drawing occupants out of the live DOM.
+       * Two shell shapes exist for `[data-slot="<name>"]`:
+       * - per-occupant anchors: one element each, count === regs → pair ids;
+       * - a single WRAPPER around all rows (e.g. settings.general.item's
+       *   stacked section): harvest each direct child as one row, keyed by
+       *   render order ("#i") since id pairing is impossible.
        */
       const runHarvest = () => {
         let grew = false
         if (typeof document === 'undefined') return false
+        let map
         for (const cfg of DEEP_SLOTS) {
-          let nodes = []
-          try { nodes = [...document.querySelectorAll(`[data-slot="${cfg.slot}"]`)] } catch { continue }
+          let containers = []
+          try { containers = [...document.querySelectorAll(`[data-slot="${cfg.slot}"]`)] } catch { continue }
           const regs = sortEntries(entriesOf(cfg.slot))
-          if (nodes.length === 0 || nodes.length !== regs.length) continue
-          let map = harvest.get(cfg.slot)
+          if (regs.length === 0) continue
+          let nodes = []
+          if (containers.length === 1 && containers[0].childElementCount > 0) {
+            nodes = [...containers[0].children]
+          } else {
+            nodes = containers.filter((n) => n.childElementCount >= 0)
+          }
+          if (nodes.length === 0) continue
+          map = harvest.get(cfg.slot)
           if (map === undefined) { map = new Map(); harvest.set(cfg.slot, map) }
+          if (nodes.length !== regs.length) {
+            // wrapper shape: index-keyed loose harvest of every rendered row
+            nodes.forEach((node, i) => {
+              const key = '#' + i
+              if (map.has(key)) return
+              const title = titleFromNode(node)
+              if (title === '') return
+              const text = (node.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 160)
+              map.set(key, { title, idx: i, text }); grew = true
+            })
+            continue
+          }
           regs.forEach((entry, i) => {
             const id = String(entry.options?.id ?? i)
             if (map.has(id)) return
             const title = titleFromNode(nodes[i])
-            if (title !== '') { map.set(id, title); grew = true }
+            if (title === '') return
+            const text = (nodes[i].textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 160)
+            map.set(id, { title, idx: i, text }); grew = true
           })
         }
         if (grew) harvestSeq += 1
@@ -194,24 +256,30 @@ window.__ModuleLoader__.load({
         const out = []
         for (const cfg of DEEP_SLOTS) {
           const mapped = harvest.get(cfg.slot)
-          for (const entry of sortEntries(entriesOf(cfg.slot))) {
+          sortEntries(entriesOf(cfg.slot)).forEach((entry, i) => {
             const id = String(entry.options?.id ?? '')
-            if (id === '') continue
-            const label = staticLabel(entry, cfg)
-              || (mapped ? mapped.get(id) ?? '' : '')
-            if (label === '') continue // unmapped, unharvested — invisible until it renders once
-            if (out.some((e) => e.key === cfg.slot + '#' + id)) continue
+            if (id === '') return
+            // static label first, then id-paired harvest, then loose index-keyed harvest
+            const hitId = mapped?.get(id)
+            const hitIdx = mapped?.get('#' + i)
+            const hitObj = typeof hitId === 'object' ? hitId : (typeof hitIdx === 'object' ? hitIdx : undefined)
+            const label = staticLabel(entry, cfg) || hitObj?.title || ''
+            if (label === '') return // unmapped, unharvested — invisible until it renders once
+            const key = cfg.slot + '#' + id
+            if (out.some((e) => e.key === key)) return
             out.push({
               kind: 'option',
-              key: cfg.slot + '#' + id,
+              key,
               slot: cfg.slot,
               id,
               order: entry.options?.order ?? 0,
               label,
+              hay: label + ' ' + (hitObj?.text ?? ''),
+              rowIndex: hitObj?.idx ?? i,
               parentId: cfg.parent,
               parentLabel: parentLabel(cfg.parent),
             })
-          }
+          })
         }
         return out.sort((a, b) => a.parentLabel !== b.parentLabel
           ? a.parentLabel.localeCompare(b.parentLabel)
@@ -232,8 +300,10 @@ window.__ModuleLoader__.load({
       const want = String(wantText ?? '').trim()
       if (want === '') return false
       const buttons = panelButtons()
-      const hit = buttons.find((b) => (b.textContent ?? '').trim() === want)
-        ?? buttons.find((b) => (b.textContent ?? '').trim().startsWith(want))
+      const textOf = (b) => (b.textContent ?? '').trim()
+      const hit = buttons.find((b) => textOf(b) === want)
+        ?? buttons.find((b) => textOf(b).startsWith(want))
+        ?? buttons.find((b) => want.length >= 2 && textOf(b) !== '' && (textOf(b).includes(want) || want.includes(textOf(b))))
       if (!hit) return false
       hit.click()
       return true
@@ -261,8 +331,23 @@ window.__ModuleLoader__.load({
       /** Highlight the rendered row card for one indexed option. */
       const flashOptionRow = (item) => {
         try {
-          const nodes = [...document.querySelectorAll(`[data-slot="${item.slot}"]`)]
-          const target = nodes.find((n) => (n.textContent ?? '').includes(item.label)) ?? nodes[0]
+          let target = null
+          if (typeof item.rowIndex === 'number') {
+            // wrapper shape: pick the exact rendered row by index
+            const container = document.querySelector(`[data-slot="${item.slot}"]`)
+            target = container?.children?.[item.rowIndex] ?? null
+            if (target && !(target.textContent ?? '').includes(item.label)) {
+              // index drift — fall through to textual match below
+              target = null
+            }
+          }
+          if (!target) {
+            const nodes = [...document.querySelectorAll(`[data-slot="${item.slot}"]`)]
+            const rows = nodes.length === 1 && nodes[0].childElementCount > 0
+              ? [...nodes[0].children]
+              : nodes
+            target = rows.find((n) => (n.textContent ?? '').includes(item.label)) ?? null
+          }
           if (!target) return
           target.scrollIntoView({ block: 'nearest' })
           target.classList.remove('sss-flash')
@@ -342,7 +427,7 @@ window.__ModuleLoader__.load({
           ? sections.filter((s) => matches(`${s.label} ${s.id}`.toLowerCase()))
           : []
         const shownOptions = q !== ''
-          ? deeps.filter((o) => matches(`${o.label} ${o.parentLabel} ${o.id} ${o.slot}`.toLowerCase()))
+          ? deeps.filter((o) => matches(`${o.hay} ${o.parentLabel} ${o.id} ${o.slot}`.toLowerCase()))
           : []
         const none = q !== '' && shownPages.length === 0 && shownOptions.length === 0
 
@@ -416,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.2.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)