@objectivex666/dsh-settings-search 1.4.4 → 1.5.0

package/README.en.md

@@ -14,6 +14,7 @@
 
 - 🔍 **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.
 - 📂 **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.
+- 🔤 **Pinyin association search (v1.5.0)** — type initials (`sz`) or full pinyin (`shezhi`) to surface Chinese settings items; navigate with `↑`/`↓`, confirm with `Enter`, dismiss with `Esc`, and matched text is highlighted.
 - 🧭 **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.

package/README.md

@@ -14,6 +14,7 @@
 
 - 🔍 **实时搜索**：在设置面板左侧导航顶部嵌入搜索框，输入关键词立即过滤所有已注册的设置页（`settings.section`）与通用设置项（`settings.general.item`）。
 - 📂 **页内选项搜索（v1.2.0）**：不只搜页面，还能直达每个设置页内部的具体选项——插件页的标签页（`settings.plugins.tab`）、Web UI 插件的卡片（`web-ui.plugin.item`）、通用设置行等，结果以「页面 › 选项」面包屑展示。
+- 🔤 **拼音联想搜索（v1.5.0）**：输入拼音首字母（如 `sz`）或全拼（如 `shezhi`）即可联想中文设置项；支持 `↑`/`↓` 选择、`Enter` 跳转、`Esc` 关闭，命中的文字自动高亮。
 - 🧭 **点击即达**：选中结果后自动点击对应的左侧导航项打开所在分区；若是页内标签页会继续点开对应标签，并高亮闪烁目标选项行。无法自动跳转时显示手动路径提示。
 - 🌱 **渐进索引**：自绘界面的设置行会在其所在页面首次被访问时从渲染 DOM 中收割标题并加入索引（此后始终可搜）。
 - 🛠 **自带设置页（v1.4.0）**：左侧导航新增「设置搜索」页——展示当前版本，一键检查 npm 注册表上的最新版本；有更新时直接给出复制就用的 `dsh plugin update` 命令。

package/lib/client.js

@@ -30,7 +30,7 @@ window.__ModuleLoader__.load({
 
     const NS = 'settings-search-v5'
     /** Single source of truth is package.json — scripts/check.mjs asserts this matches. */
-    const PKG_VERSION = '1.4.4'
+    const PKG_VERSION = '1.5.0'
     const NPM_NAME = '@objectivex666/dsh-settings-search'
     const zh = {
       title: '设置',
@@ -84,6 +84,89 @@ window.__ModuleLoader__.load({
       { slot: 'settings.general.item', parent: 'general' },
     ]
 
+    /**
+     * Compact zh→pinyin table (tone-less) for association search. Covers
+     * characters common in settings UI labels; anything outside the table
+     * simply falls back to plain substring matching. Entries: 字pinyin.
+     */
+    const PINYIN_TABLE = `
+      设she 置zhi 通tong 用yong 插cha 件jian 搜sou 索suo 外wai 观guan 语yu 言yan
+      声sheng 音yin 知zhi 账zhang 户hu 安an 全quan 网wang 络luo 存cun 储chu 关guan
+      于yu 主zhu 题ti 字zi 体ti 显xian 示shi 隐yin 私si 帮bang 助zhu 反fan 馈kui
+      更geng 新xin 版ban 本ben 深shen 度du 思si 考kao 模mo 式shi 对dui 话hua 上shang
+      下xia 文wen 记ji 忆yi 提ti 词ci 快kuai 捷jie 键jian 界jie 面mian 颜yan 色se
+      背bei 景jing 号hao 密mi 数shu 据ju 同tong 步bu 备bei 份fen 导dao 出chu 入ru
+      重chong 清qing 除chu 登deng 录lu 销xiao 码ma 邮you 箱xiang 手shou 机ji 绑bang
+      定ding 验yan 证zheng 会hui 员yuan 订ding 阅yue 支zhi 付fu 单dan 发fa 票piao
+      应ying 权quan 限xian 推tui 荐jian 个ge 性xing 化hua 高gao 级ji 基ji 选xuan
+      项xiang 开kai 启qi 禁jin 自zi 动dong 默mo 认ren 义yi 夹jia 径jing 载zai 传chuan
+      享xiang 制zhi 粘nian 贴tie 剪jian 切qie 撤che 复fu 保bao 打da 加jia 编bian 辑ji
+      查cha 看kan 排pai 序xu 筛shai 刷shua 速su 质zhi 量liang 大da 小xiao 位wei 时shi
+      间jian 日ri 期qi 区qu 格ge 符fu 换huan 行hang 缩suo 进jin 空kong 电dian 池chi
+      亮liang 滚gun 桌zhuo 免mian 扰rao 屏ping 幕mu 源yuan 节jie 眠mian 器qi 目mu
+      标biao 签qian 窗chuang 口kou 工gong 具ju 栏lan 菜cai 群qun 频pin 道dao 乐yue
+      图tu 片pian 相xiang 册ce 拍pai 照zhao 头tou 麦mai 克ke 风feng 蓝lan 牙ya 连lian
+      接jie 印yin 扫sao 描miao 感gan 智zhi 能neng 家jia 居ju 灯deng 光guang 温wen
+      湿shi 门men 锁suo 帘lian 场chang 情qing 人ren 朋peng 友you 客ke 厅ting 房fang
+      厨chu 卫wei 生sheng 书shu 阳yang 台tai 车che 库ku 园yuan 院yuan 坪ping 树shu
+      木mu 草cao 增zeng 删shan 改gai 移yi 停ting 运yun 行xing 测ce 境jing 渠qu 官guan
+      方fang 正zheng 内nei 公gong 有you 效xiao 失shi 败bai 成cheng 功gong 完wan 毕bi
+      中zhong 英ying 韩han 法fa 德de 西xi 俄e 翻fan 译yi 简jian 繁fan 历li 史shi 聊liao
+      天tian 消xiao 息xi 醒xing 静jing 震zhen 红hong 点dian 角jiao 未wei 读du 部bu
+      为wei 已yi 好 hao 坏huai 多duo 少shao
+    `
+    const PINYIN = new Map(
+      PINYIN_TABLE.split(/\s+/).filter(Boolean).map((pair) => [pair[0], pair.slice(1)])
+    )
+    const CJK_RE = /[\u4e00-\u9fff]/
+
+    /**
+     * Transliterate a label into full-pinyin and initial-letter keys for
+     * association search. Returns null when any CJK character is outside
+     * the built-in table (then only substring matching applies).
+     */
+    const pinyinKeys = (text) => {
+      let full = ''
+      let initials = ''
+      for (const ch of text) {
+        if (CJK_RE.test(ch)) {
+          const py = PINYIN.get(ch)
+          if (py === undefined) return null
+          full += py
+          initials += py[0]
+        } else if (/[a-zA-Z0-9]/.test(ch)) {
+          const lower = ch.toLowerCase()
+          full += lower
+          initials += lower
+        }
+      }
+      return full === '' ? null : { full, initials }
+    }
+
+    /** Match one query token: raw substring, full pinyin, or initial letters. */
+    const tokenMatch = (haystackLower, keys, token) => {
+      if (haystackLower.includes(token)) return 'text'
+      if (keys !== null) {
+        if (keys.full.includes(token)) return 'pinyin'
+        if (keys.initials.startsWith(token)) return 'initials'
+      }
+      return null
+    }
+
+    /** Character count of the label consumed by a full-pinyin prefix. */
+    const pinyinPrefixChars = (label, pinyinLength) => {
+      let consumed = 0
+      let acc = 0
+      for (const ch of label) {
+        const py = CJK_RE.test(ch) ? PINYIN.get(ch) : (/[a-zA-Z0-9]/.test(ch) ? ch.toLowerCase() : '')
+        if (py === undefined || py === '') continue
+        acc += py.length
+        consumed += 1
+        if (acc >= pinyinLength) break
+      }
+      return consumed
+    }
+
     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); }
@@ -99,8 +182,10 @@ window.__ModuleLoader__.load({
       .sss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
       .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.is-active { background: var(--dsw-alias-interactive-bg-hover); }
       .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-label mark { background: transparent; color: inherit; font-weight: 600; }
       .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; }
@@ -420,19 +505,34 @@ window.__ModuleLoader__.load({
 
         const q = query.trim().toLowerCase()
         const tokens = q.split(/\s+/).filter(Boolean)
-        const matches = (haystack) => tokens.every((tok) => haystack.includes(tok))
 
         const sections = model.readSections()
         const deeps = q !== '' ? model.readDeep() : []
+        const matchItem = (item, haystackLower) =>
+          tokens.every((tok) => tokenMatch(haystackLower, item.keys, tok) !== null)
         const shownPages = q !== ''
-          ? sections.filter((s) => matches(`${s.label} ${s.id}`.toLowerCase()))
+          ? sections
+              .map((s) => ({ ...s, keys: pinyinKeys(s.label) }))
+              .filter((s) => matchItem(s, `${s.label} ${s.id}`.toLowerCase()))
           : []
         const shownOptions = q !== ''
-          ? deeps.filter((o) => matches(`${o.hay} ${o.parentLabel} ${o.id} ${o.slot}`.toLowerCase()))
+          ? deeps
+              .map((o) => ({ ...o, keys: pinyinKeys(`${o.label} ${o.parentLabel}`) }))
+              .filter((o) => matchItem(o, `${o.hay} ${o.parentLabel} ${o.id} ${o.slot}`.toLowerCase()))
           : []
         const none = q !== '' && shownPages.length === 0 && shownOptions.length === 0
+        const results = [...shownPages, ...shownOptions]
 
         const [hint, setHint] = React.useState(null)
+        const [active, setActive] = React.useState(0)
+        const popRef = React.useRef(null)
+        const activeIndex = Math.min(active, Math.max(results.length - 1, 0))
+
+        React.useEffect(() => { setActive(0) }, [query])
+        React.useEffect(() => {
+          const el = popRef.current?.querySelector('.sss-item.is-active')
+          el?.scrollIntoView?.({ block: 'nearest' })
+        }, [activeIndex, q])
         const pick = (item) => {
           setOpen(false)
           const jumped = item.kind === 'page'
@@ -443,21 +543,59 @@ window.__ModuleLoader__.load({
           })
         }
 
-        const renderPage = (item) => React.createElement('li', {
+        const mark = (text) => React.createElement('mark', { className: 'sss-hit' }, text)
+
+        /** Highlight the matched substring, or the pinyin-covered prefix. */
+        const highlightLabel = (item) => {
+          const label = item.label
+          const lower = label.toLowerCase()
+          let bestStart = -1
+          let bestLen = 0
+          for (const tok of tokens) {
+            const at = lower.indexOf(tok)
+            if (at !== -1 && (bestStart === -1 || at < bestStart)) {
+              bestStart = at
+              bestLen = tok.length
+            }
+          }
+          if (bestStart !== -1) {
+            return [
+              label.slice(0, bestStart),
+              mark(label.slice(bestStart, bestStart + bestLen)),
+              label.slice(bestStart + bestLen),
+            ]
+          }
+          const keys = item.keys
+          if (keys !== null && tokens.length > 0) {
+            const tok = tokens[0]
+            const consumed = keys.initials.startsWith(tok)
+              ? tok.length
+              : keys.full.startsWith(tok) ? pinyinPrefixChars(label, tok.length) : 0
+            if (consumed > 0) {
+              const cut = Math.min(consumed, label.length)
+              return [mark(label.slice(0, cut)), label.slice(cut)]
+            }
+          }
+          return [label]
+        }
+
+        const renderPage = (item, flatIndex) => React.createElement('li', {
           key: 'page:' + item.id,
-          className: 'sss-item',
+          className: 'sss-item' + (flatIndex === activeIndex ? ' is-active' : ''),
           onMouseDown: () => pick(item),
+          onMouseEnter: () => setActive(flatIndex),
         }, [
-          React.createElement('span', { className: 'sss-item-label' }, item.label),
+          React.createElement('span', { className: 'sss-item-label' }, highlightLabel(item)),
           React.createElement('span', { className: 'sss-item-kind' }, t('page')),
         ])
-        const renderOption = (item) => React.createElement('li', {
+        const renderOption = (item, flatIndex) => React.createElement('li', {
           key: item.key,
-          className: 'sss-item',
+          className: 'sss-item' + (flatIndex === activeIndex ? ' is-active' : ''),
           onMouseDown: () => pick(item),
+          onMouseEnter: () => setActive(flatIndex),
         }, [
           React.createElement('span', { className: 'sss-item-col' }, [
-            React.createElement('span', { className: 'sss-item-label' }, item.label),
+            React.createElement('span', { className: 'sss-item-label' }, highlightLabel(item)),
             React.createElement('span', { className: 'sss-item-path' }, item.parentLabel),
           ]),
           React.createElement('span', { className: 'sss-item-kind' }, t('option')),
@@ -472,6 +610,20 @@ window.__ModuleLoader__.load({
               value: query,
               placeholder: t('placeholder'),
               spellCheck: false,
+              onKeyDown: (e) => {
+                if (e.key === 'ArrowDown') {
+                  e.preventDefault()
+                  if (results.length > 0) setActive(Math.min(activeIndex + 1, results.length - 1))
+                } else if (e.key === 'ArrowUp') {
+                  e.preventDefault()
+                  setActive(Math.max(activeIndex - 1, 0))
+                } else if (e.key === 'Enter') {
+                  const item = results[activeIndex]
+                  if (item) { e.preventDefault(); pick(item) }
+                } else if (e.key === 'Escape') {
+                  setOpen(false)
+                }
+              },
               onChange: (e) => { setQuery(e.target.value); setHint(null); setOpen(true) },
               onFocus: () => setOpen(true),
               onBlur: () => setOpen(false),
@@ -482,17 +634,19 @@ window.__ModuleLoader__.load({
               onClick: () => { setQuery(''); setHint(null); setOpen(false) },
             }, '✕') : null,
           ]),
-          open && q !== '' ? React.createElement('div', { className: 'sss-pop' }, [
+          open && q !== '' ? React.createElement('div', { className: 'sss-pop', ref: popRef }, [
             none
               ? React.createElement('p', { className: 'sss-empty' }, t('empty'))
               : React.createElement('div', { className: 'sss-groups' }, [
                   shownPages.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
                     React.createElement('div', { className: 'sss-group-title' }, t('pages')),
-                    React.createElement('ul', { className: 'sss-list' }, shownPages.map(renderPage)),
+                    React.createElement('ul', { className: 'sss-list' },
+                      shownPages.map((item, i) => renderPage(item, i))),
                   ]) : null,
                   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)),
+                    React.createElement('ul', { className: 'sss-list' },
+                      shownOptions.map((item, i) => renderOption(item, shownPages.length + i))),
                   ]) : null,
                 ]),
           ]) : null,

package/package.json

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