@objectivex666/dsh-settings-search 1.1.2 → 1.2.0

package/README.en.md

@@ -13,7 +13,9 @@
 ## Features
 
 - 🔍 **Live search** — a search box at the top of the settings panel's left navigation filters every registered settings page (`settings.section`) and general item (`settings.general.item`) as you type.
-- 🧭 **Navigation guidance** — clicking a result shows which left-navigation entry owns that setting, so you can jump straight to it.
+- 📂 **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.
 - 🌐 **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

@@ -13,7 +13,9 @@
 ## 功能特性
 
 - 🔍 **实时搜索**：在设置面板左侧导航顶部嵌入搜索框，输入关键词立即过滤所有已注册的设置页（`settings.section`）与通用设置项（`settings.general.item`）。
-- 🧭 **导航引导**：点击搜索结果后，显示该设置所在导航项的标签，帮助用户快速定位。
+- 📂 **页内选项搜索（v1.2.0）**：不只搜页面，还能直达每个设置页内部的具体选项——插件页的标签页（`settings.plugins.tab`）、Web UI 插件的卡片（`web-ui.plugin.item`）、通用设置行等，结果以「页面 › 选项」面包屑展示。
+- 🧭 **点击即达**：选中结果后自动点击对应的左侧导航项打开所在分区；若是页内标签页会继续点开对应标签，并高亮闪烁目标选项行。无法自动跳转时显示手动路径提示。
+- 🌱 **渐进索引**：自绘界面的设置行会在其所在页面首次被访问时从渲染 DOM 中收割标题并加入索引（此后始终可搜）。
 - 🌐 **多语言支持**：内置中英文国际化，可跟随 DSH 本地化系统扩展。
 - 🎨 **主题适配**：完全使用 CSS 变量，自动跟随 DSH 主题（亮/暗）。
 - ⚡ **动态响应**：实时订阅设置项的新增/删除/变更，搜索结果自动刷新。

package/lib/client.js

@@ -7,11 +7,18 @@
  * and the client kernel adopts the exported `{ apply, inject }` as the
  * plugin's browser half.
  *
- * Behavior (identical to the dynamic-plugin source, `dsh-settings-search.js`):
- * embed a live search box at the top of the settings panel's left navigation
- * (`settings.header`, priority -1), filtering every registered settings page
- * (`settings.section`) and general item (`settings.general.item`), with a
- * navigation guide on selection.
+ * Behavior:
+ * - embeds a live search box at the top of the settings panel's left
+ *   navigation (`settings.header`, priority -1);
+ * - indexes every settings PAGE (`settings.section`);
+ * - deep-indexes specific OPTIONS inside pages from machine-readable inner
+ *   slots (`settings.plugins.tab`, `web-ui.plugin.item`,
+ *   `settings.general.item`) — occupants that draw their own labels are read
+ *   back from the rendered DOM via their `[data-slot]` anchors;
+ * - results show a breadcrumb path (页面 › 选项);
+ * - selecting a result really navigates: clicks the matching left-nav button
+ *   (then the matching tab button), flashes the target row, and falls back to
+ *   a breadcrumb hint when no DOM target exists.
  */
 window.__ModuleLoader__.load({
   id: '@objectivex666/dsh-settings-search',
@@ -21,28 +28,35 @@ window.__ModuleLoader__.load({
     Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
     const React = require('react')
 
-    const NS = 'settings-search-v4'
+    const NS = 'settings-search-v5'
     const zh = {
       title: '设置',
       placeholder: '搜索设置…',
       empty: '没有匹配的设置',
       pages: '设置页',
-      rows: '通用设置项',
-      guide: '该设置位于左侧导航「{label}」，点击左侧导航项即可打开',
-      page: '设置页',
-      row: '设置项',
+      options: '页内选项',
+      page: '页面',
+      option: '选项',
+      jumpFail: '未能自动跳转，请手动打开：{path}',
     }
     const en = {
       title: 'Settings',
       placeholder: 'Search settings…',
       empty: 'No matching settings',
       pages: 'Settings pages',
-      rows: 'General items',
-      guide: 'This setting lives in "{label}" — open it from the left navigation',
+      options: 'In-page options',
       page: 'Page',
-      row: 'Item',
+      option: 'Option',
+      jumpFail: 'Could not navigate automatically — open it here: {path}',
     }
 
+    /** Inner-row slots that represent specific options inside one page. */
+    const DEEP_SLOTS = [
+      { slot: 'settings.plugins.tab', parent: 'plugins' },
+      { slot: 'web-ui.plugin.item', parent: 'web-ui-plugins' },
+      { slot: 'settings.general.item', parent: 'general' },
+    ]
+
     const CSS = `
       .sss-wrap { position: relative; display: flex; flex-direction: column; gap: 8px; }
       .sss-title { font-size: 16px; font-weight: 600; line-height: 24px; color: var(--dsw-alias-label-primary); }
@@ -52,20 +66,24 @@ window.__ModuleLoader__.load({
       .sss-input::placeholder { color: var(--dsw-alias-label-dimmed); }
       .sss-clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 1; cursor: pointer; }
       .sss-clear:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
-      .sss-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--dsw-alias-bg-overlay); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; box-shadow: var(--dsw-shadow-lv3); padding: 6px; max-height: 300px; overflow: auto; }
+      .sss-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--dsw-alias-bg-overlay); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; box-shadow: var(--dsw-shadow-lv3); padding: 6px; max-height: 320px; overflow: auto; }
       .sss-groups { display: flex; flex-direction: column; gap: 8px; }
       .sss-group-title { font-size: 11px; color: var(--dsw-alias-label-secondary); letter-spacing: .05em; padding: 2px 6px; }
       .sss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
-      .sss-item { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
+      .sss-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
       .sss-item:hover { background: var(--dsw-alias-interactive-bg-hover); }
-      .sss-item-label { flex: 1; min-width: 0; color: var(--dsw-alias-label-primary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-      .sss-item-id { font-size: 10px; color: var(--dsw-alias-label-secondary); flex-shrink: 0; }
+      .sss-item-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+      .sss-item-label { color: var(--dsw-alias-label-primary); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .sss-item-path { font-size: 10px; line-height: 14px; color: var(--dsw-alias-label-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .sss-item-kind { flex-shrink: 0; font-size: 10px; color: var(--dsw-alias-label-secondary); border: 1px solid var(--dsw-alias-border-l2); border-radius: 4px; padding: 1px 5px; }
       .sss-empty { margin: 0; padding: 10px 8px; color: var(--dsw-alias-label-secondary); font-size: 13px; }
       .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; }
     `
     let stylesInstalled = false
     function installStyles() {
-      if (stylesInstalled || typeof document === 'undefined') return
+      if (stylesInstalled || typeof document === 'undefined') return undefined
       stylesInstalled = true
       const tag = document.createElement('style')
       tag.dataset.plugin = '@objectivex666/dsh-settings-search'
@@ -78,10 +96,183 @@ window.__ModuleLoader__.load({
       }
     }
 
-    const resolveLabel = (entry) => {
-      const raw = entry.options.label
-      if (typeof raw === 'function') return String(raw())
-      return raw == null ? '' : String(raw)
+    const callSafe = (fn) => {
+      try { return fn() } catch { return undefined }
+    }
+
+    /** Resolve a registrant-provided label option (string or thunk). */
+    const optionLabel = (raw) => {
+      const value = typeof raw === 'function' ? callSafe(raw) : raw
+      return typeof value === 'string' ? value : ''
+    }
+
+    function createModel(ctx) {
+      /** id → harvested visible title, per slot. */
+      const harvest = new Map()
+      let harvestSeq = 0
+
+      const entriesOf = (slot) => {
+        try { return ctx.slots.entries(slot) ?? [] } catch { return [] }
+      }
+      const sortEntries = (list) => list.slice().sort((a, b) => ((a.options?.order ?? 0) - (b.options?.order ?? 0)))
+
+      /** Best-effort static label from occupant options/locale namespace. */
+      const staticLabel = (entry, slotConfig) => {
+        const o = entry.options ?? {}
+        const explicit = optionLabel(o.label)
+        if (explicit !== '') return explicit
+        if (typeof o.locale === 'string') {
+          const t = callSafe(() => ctx.locale.bind(o.locale))
+          if (typeof t === 'function') {
+            for (const key of ['tab', 'title', 'card.title', 'name']) {
+              const value = callSafe(() => t(key))
+              if (typeof value === 'string' && value !== '' && value !== key) return value
+            }
+          }
+        }
+        void slotConfig
+        return ''
+      }
+
+      /**
+       * 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.
+       */
+      const runHarvest = () => {
+        let grew = false
+        if (typeof document === 'undefined') return false
+        for (const cfg of DEEP_SLOTS) {
+          let nodes = []
+          try { nodes = [...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 (map === undefined) { map = new Map(); harvest.set(cfg.slot, map) }
+          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 (grew) harvestSeq += 1
+        return grew
+      }
+
+      const titleFromNode = (node) => {
+        const pick = (el) => {
+          const text = (el.textContent ?? '').replace(/\s+/g, ' ').trim()
+          return text !== '' && text.length <= 60 ? text : ''
+        }
+        for (const sel of ['h1,h2,h3,h4,h5', '[class*="title"]', '[class*="heading"]', 'label', 'p']) {
+          const hit = node.querySelector(sel)
+          if (hit) { const text = pick(hit); if (text !== '') return text }
+        }
+        const first = node.firstElementChild
+        if (first) {
+          for (const child of first.children) { const text = pick(child); if (text !== '') return text }
+        }
+        return pick(node).split('·')[0].trim()
+      }
+
+      const readSections = () => sortEntries(entriesOf('settings.section'))
+        .filter((e) => e.options?.id !== 'settings-search')
+        .map((e) => ({
+          kind: 'page',
+          id: String(e.options?.id ?? ''),
+          order: e.options?.order ?? 0,
+          label: optionLabel(e.options?.label),
+        }))
+        .filter((e) => e.id !== '' && e.label !== '')
+
+      const readDeep = () => {
+        const sections = readSections()
+        const parentLabel = (parentId) =>
+          sections.find((s) => s.id === parentId)?.label ?? parentId
+        const out = []
+        for (const cfg of DEEP_SLOTS) {
+          const mapped = harvest.get(cfg.slot)
+          for (const entry of sortEntries(entriesOf(cfg.slot))) {
+            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
+            out.push({
+              kind: 'option',
+              key: cfg.slot + '#' + id,
+              slot: cfg.slot,
+              id,
+              order: entry.options?.order ?? 0,
+              label,
+              parentId: cfg.parent,
+              parentLabel: parentLabel(cfg.parent),
+            })
+          }
+        }
+        return out.sort((a, b) => a.parentLabel !== b.parentLabel
+          ? a.parentLabel.localeCompare(b.parentLabel)
+          : a.order - b.order)
+      }
+
+      return { readSections, readDeep, runHarvest, bump: () => harvestSeq }
+    }
+
+    /* ---------- DOM-level navigation into the settings shell ---------- */
+
+    const panelButtons = () => {
+      if (typeof document === 'undefined') return []
+      const root = document.querySelector('[role="dialog"]') ?? document.body
+      return [...root.querySelectorAll('button')]
+    }
+    const clickNavButton = (wantText) => {
+      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))
+      if (!hit) return false
+      hit.click()
+      return true
+    }
+    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+    function createNavigator(ctx) {
+      /** Jump to a page result; falls back to showing a manual hint. */
+      const jumpToPage = async (item) => {
+        const ok = await Promise.resolve(clickNavButton(item.label))
+        return ok
+      }
+      /** Jump to an in-page option: open its page, select its tab, flash its row. */
+      const jumpToOption = async (item) => {
+        const opened = await Promise.resolve(clickNavButton(item.parentLabel))
+        await delay(160)
+        const label = item.label
+        const buttons = panelButtons()
+        const tab = buttons.find((b) => (b.textContent ?? '').trim() === label)
+          ?? buttons.find((b) => (b.getAttribute('role') ?? '') === 'tab' && (b.textContent ?? '').includes(label))
+        if (tab) { tab.click(); await delay(120) }
+        flashOptionRow(item)
+        return opened
+      }
+      /** 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]
+          if (!target) return
+          target.scrollIntoView({ block: 'nearest' })
+          target.classList.remove('sss-flash')
+          void target.offsetWidth // restart animation if re-flashed
+          target.classList.add('sss-flash')
+          setTimeout(() => target.classList.remove('sss-flash'), 1900)
+        } catch { /* visual nicety only */ }
+      }
+      void ctx
+      return { jumpToPage, jumpToOption }
     }
 
     function apply(ctx) {
@@ -92,13 +283,8 @@ window.__ModuleLoader__.load({
         return () => { if (typeof remove === 'function') remove() }
       }, 'settings-search: styles')
 
-      const readSections = () => ctx.slots.entries('settings.section')
-        .filter((e) => e.options.id !== 'settings-search')
-        .map((e) => ({ id: e.options.id, order: e.options.order ?? 0, label: resolveLabel(e) }))
-        .sort((a, b) => a.order - b.order)
-      const readRows = () => ctx.slots.entries('settings.general.item')
-        .map((e) => ({ id: e.options.id, order: e.options.order ?? 0, label: resolveLabel(e) }))
-        .sort((a, b) => a.order - b.order)
+      const model = createModel(ctx)
+      const navigator = createNavigator(ctx)
 
       const SearchIcon = React.createElement('svg', {
         className: 'sss-icon',
@@ -121,36 +307,74 @@ window.__ModuleLoader__.load({
       function SettingsHeaderSearch() {
         const [query, setQuery] = React.useState('')
         const [open, setOpen] = React.useState(false)
-        const [sections, setSections] = React.useState(readSections)
-        const [rows, setRows] = React.useState(readRows)
-        const [selected, setSelected] = React.useState(null)
+        const [tick, setTick] = React.useState(0)
+        const [, forceTick] = React.useReducer((x) => x + 1, 0)
+        void tick
+
         React.useEffect(() => {
-          const refresh = () => {
-            setSections(readSections())
-            setRows(readRows())
-          }
+          const watched = ['settings.section', ...DEEP_SLOTS.map((c) => c.slot)]
           const offs = [
-            ctx.slots.subscribe('settings.section', refresh),
-            ctx.slots.subscribe('settings.general.item', refresh),
-            ctx.locale.subscribe(refresh),
+            ...watched.map((slot) => ctx.slots.subscribe(slot, forceTick)),
+            ctx.locale.subscribe(forceTick),
           ]
-          return () => { for (const off of offs) off() }
+          // Grow the index whenever the panel body re-renders (visits new pages).
+          const observer = typeof MutationObserver === 'function'
+            ? new MutationObserver(() => {
+                if (model.runHarvest()) setTick((x) => x + 1)
+              })
+            : null
+          observer?.observe(document.body, { childList: true, subtree: true })
+          const warm = setTimeout(() => { model.runHarvest(); setTick((x) => x + 1) }, 800)
+          return () => {
+            for (const off of offs) off()
+            observer?.disconnect()
+            clearTimeout(warm)
+          }
         }, [])
 
         const q = query.trim().toLowerCase()
         const tokens = q.split(/\s+/).filter(Boolean)
-        const match = (label, id) => tokens.every((tok) => (label + ' ' + id).toLowerCase().includes(tok))
-        const shownSections = tokens.length ? sections.filter((s) => match(s.label, s.id)) : []
-        const shownRows = tokens.length ? rows.filter((r) => match(r.label, r.id)) : []
-        const none = tokens.length > 0 && shownSections.length === 0 && shownRows.length === 0
+        const matches = (haystack) => tokens.every((tok) => haystack.includes(tok))
+
+        const sections = model.readSections()
+        const deeps = q !== '' ? model.readDeep() : []
+        const shownPages = q !== ''
+          ? 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()))
+          : []
+        const none = q !== '' && shownPages.length === 0 && shownOptions.length === 0
+
+        const [hint, setHint] = React.useState(null)
+        const pick = (item) => {
+          setOpen(false)
+          const jumped = item.kind === 'page'
+            ? navigator.jumpToPage(item)
+            : navigator.jumpToOption(item)
+          Promise.resolve(jumped).then((ok) => {
+            if (ok === false) setHint(item.kind === 'page' ? item.label : `${item.parentLabel} › ${item.label}`)
+          })
+        }
 
-        const renderItem = (item, kind) => React.createElement('li', {
-          key: item.id,
+        const renderPage = (item) => React.createElement('li', {
+          key: 'page:' + item.id,
           className: 'sss-item',
-          onMouseDown: () => { setSelected(item); setOpen(false) },
+          onMouseDown: () => pick(item),
         }, [
-          React.createElement('span', { className: 'sss-item-label' }, item.label || item.id),
-          React.createElement('span', { className: 'sss-item-id' }, kind),
+          React.createElement('span', { className: 'sss-item-label' }, item.label),
+          React.createElement('span', { className: 'sss-item-kind' }, t('page')),
+        ])
+        const renderOption = (item) => React.createElement('li', {
+          key: item.key,
+          className: 'sss-item',
+          onMouseDown: () => pick(item),
+        }, [
+          React.createElement('span', { className: 'sss-item-col' }, [
+            React.createElement('span', { className: 'sss-item-label' }, item.label),
+            React.createElement('span', { className: 'sss-item-path' }, item.parentLabel),
+          ]),
+          React.createElement('span', { className: 'sss-item-kind' }, t('option')),
         ])
 
         return React.createElement('div', { className: 'sss-wrap' }, [
@@ -162,32 +386,32 @@ window.__ModuleLoader__.load({
               value: query,
               placeholder: t('placeholder'),
               spellCheck: false,
-              onChange: (e) => { setQuery(e.target.value); setOpen(true) },
+              onChange: (e) => { setQuery(e.target.value); setHint(null); setOpen(true) },
               onFocus: () => setOpen(true),
               onBlur: () => setOpen(false),
             }),
             query !== '' ? React.createElement('button', {
               className: 'sss-clear',
               type: 'button',
-              onClick: () => { setQuery(''); setSelected(null); setOpen(false) },
+              onClick: () => { setQuery(''); setHint(null); setOpen(false) },
             }, '✕') : null,
           ]),
-          open && tokens.length > 0 ? React.createElement('div', { className: 'sss-pop' }, [
+          open && q !== '' ? React.createElement('div', { className: 'sss-pop' }, [
             none
               ? React.createElement('p', { className: 'sss-empty' }, t('empty'))
               : React.createElement('div', { className: 'sss-groups' }, [
-                  shownSections.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
+                  shownPages.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
                     React.createElement('div', { className: 'sss-group-title' }, t('pages')),
-                    React.createElement('ul', { className: 'sss-list' }, shownSections.map((s) => renderItem(s, t('page')))),
+                    React.createElement('ul', { className: 'sss-list' }, shownPages.map(renderPage)),
                   ]) : null,
-                  shownRows.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
-                    React.createElement('div', { className: 'sss-group-title' }, t('rows')),
-                    React.createElement('ul', { className: 'sss-list' }, shownRows.map((r) => renderItem(r, t('row')))),
+                  shownOptions.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
+                    React.createElement('div', { className: 'sss-group-title' }, t('options')),
+                    React.createElement('ul', { className: 'sss-list' }, shownOptions.map(renderOption)),
                   ]) : null,
                 ]),
           ]) : null,
-          selected !== null
-            ? React.createElement('div', { className: 'sss-guide' }, t('guide').replace('{label}', selected.label || selected.id))
+          hint !== null
+            ? React.createElement('div', { className: 'sss-guide' }, t('jumpFail').replace('{path}', hint))
             : null,
         ])
       }

package/package.json

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