dsh-opencode-palette 1.5.0 → 1.6.0

package/README.md

@@ -5,6 +5,7 @@
 **The complete opencode palette for DeepSeek Harness — 34 official themes, one click.**
 
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](../LICENSE)
+[![npm](https://img.shields.io/npm/v/dsh-opencode-palette)](https://www.npmjs.com/package/dsh-opencode-palette)
 [![opencode](https://img.shields.io/badge/themes-opencode%20v1.18.12-orange)](https://github.com/anomalyco/opencode)
 [![tests](https://img.shields.io/badge/tests-20%2F20-green)]()
 

package/lib/client.js

@@ -1,5 +1,5 @@
 /**
- * dsh-opencode-palette v1.5.0 — 浏览器半（构建产物，勿手改）
+ * dsh-opencode-palette v1.6.0 — 浏览器半（构建产物，勿手改）
  * 数据驱动管线：opencode v1.18.12 官方主题 JSON → 颜色解析 → DSH 适配注入
  * 源：src/engine/* + runtime/client.mjs（npm run build 重新生成）
  */
@@ -363,6 +363,25 @@ function generateTheme(colors, typography, themeName) {
 __mods["generate"] = { buildTokens, buildTypographyCss, buildColorCss, generateTheme }
 })();
 (function () {
+// zh-names.mjs — 主题中文名表（单一来源）
+// 供运行时面板（中文界面显示中文主题名）与 assets 生成器（矩阵/故事卡中文名）共用。
+// 无中文译名者（opencode / One Dark / Monokai / Cursor / GitHub / Vercel）保留原名。
+
+const THEME_ZH = {
+  opencode: "opencode", tokyonight: "东京之夜", dracula: "德古拉", gruvbox: "复古凹槽",
+  matrix: "黑客帝国", "rose-pine": "玫瑰松林", catppuccin: "卡布奇诺", "catppuccin-frappe": "卡布奇诺·冰沙",
+  "catppuccin-macchiato": "卡布奇诺·玛奇朵", solarized: "日光浴", synthwave84: "合成波 84",
+  everforest: "常青森林", nord: "北极", kanagawa: "神奈川", nightowl: "夜猫子",
+  "one-dark": "One Dark", monokai: "Monokai", palenight: "苍白之夜", material: "材料设计",
+  ayu: "鮎", carbonfox: "碳狐", cobalt2: "钴蓝", cursor: "Cursor", aura: "光环",
+  flexoki: "纸墨", github: "GitHub", zenburn: "禅燃", mercury: "水星",
+  "osaka-jade": "大阪翡翠", vesper: "黄昏星", vercel: "Vercel", "lucent-orng": "透光橙",
+  orng: "纯橙", system: "跟随系统",
+}
+
+__mods["zh-names"] = { THEME_ZH }
+})();
+(function () {
 // registry.mjs — 主题注册表：33 个静态主题（vendored JSON）+ system 特殊主题
 // 数据由 scripts/sync-themes.mjs 从 opencode v1.18.12 官方 tag 同步（见 MANIFEST.json 指纹）
 const aura = {
@@ -7962,6 +7981,7 @@ __mods["index"] = { renderTheme, previewColors, themeNames, themeGroups, GROUP_O
 // 依赖注入：theme（dsh-client-ui-theme）、slots（settings.plugins.tab / tool.view.cordis）
 const { renderTheme, previewColors, themeNames, themeGroups } = __mods["index"]
 const { FONTS, SANS_STACK } = __mods["map-dsh"]
+const { THEME_ZH } = __mods["zh-names"]
 
 const STORAGE_KEY = 'dsh.opencode-palette.v2'
 // 兼容迁移：旧插件（dsh-opencode-tui-theme）的本地设置键，读到即迁移到新键
@@ -8008,8 +8028,8 @@ const I18N = {
   enableTitle: { zh: '点击启用主题', en: 'Click to enable' },
   typography: { zh: '字体字号', en: 'Typography' },
   bodyStyle: { zh: '正文样式', en: 'Body style' },
-  mono: { zh: '等宽字体（终端风）', en: 'Monospace (terminal)' },
-  sans: { zh: '常规字体（界面风）', en: 'Regular (UI)' },
+  mono: { zh: '等宽（终端风）', en: 'Monospace (terminal)' },
+  sans: { zh: '常规（界面风）', en: 'Regular (UI)' },
   fontSize: { zh: '字号', en: 'Font size' },
   codeFont: { zh: '代码字体', en: 'Code font' },
   fontPreview: { zh: '等宽', en: 'mono' },
@@ -8146,20 +8166,23 @@ function createClient(slotTarget) {
         const h = react.createElement
         const [query, setQuery] = react.useState('')
         const [fontOpen, setFontOpen] = react.useState(false)
+        const [sizeOpen, setSizeOpen] = react.useState(false)
         const fontRef = react.useRef(null)
+        const sizeRef = react.useRef(null)
         // UI 快照：所有引擎动作后 setUi(props.getState()) 重同步，避免受控控件显示值漂移
         const [ui, setUi] = react.useState(props.getState())
         const st = ui
 
         // 字体下拉：点击外部关闭
         react.useEffect(function () {
-          if (!fontOpen) return
+          if (!fontOpen && !sizeOpen) return
           function onDoc(e) {
             if (fontRef.current && !fontRef.current.contains(e.target)) setFontOpen(false)
+            if (sizeRef.current && !sizeRef.current.contains(e.target)) setSizeOpen(false)
           }
           document.addEventListener('mousedown', onDoc)
           return function () { document.removeEventListener('mousedown', onDoc) }
-        }, [fontOpen])
+        }, [fontOpen, sizeOpen])
 
         // 语言切换：DSH 界面语言变化时重渲染（文案跟随）
         react.useEffect(function () {
@@ -8171,11 +8194,15 @@ function createClient(slotTarget) {
         const shown = q === ''
           ? props.groups()
           : props.groups()
-              .map(function (g) { return { name: g.name, color: g.color, themes: g.themes.filter(function (t) { return t.name.indexOf(q) >= 0 }) } })
+              .map(function (g) { return { name: g.name, color: g.color, themes: g.themes.filter(function (t) { return (t.name + ' ' + (THEME_ZH[t.name] || '')).toLowerCase().indexOf(q) >= 0 }) } })
               .filter(function (g) { return g.themes.length > 0 })
 
         const muted = 'var(--dsw-alias-label-secondary)'
         const base = 'var(--dsw-alias-label-primary)'
+        // 主题显示名：中文界面用中文名（system 走 i18n 文案）
+        const themeLabel = function (name) {
+          return currentLang === 'zh' && name !== 'system' ? (THEME_ZH[name] || name) : name
+        }
         const fieldLabel = { fontSize: 11, color: muted }
         const secTitle = { fontSize: 11, color: muted, letterSpacing: '.08em', marginBottom: 8, display: 'flex', alignItems: 'baseline', gap: 8 }
         const countStyle = { color: 'var(--dsw-alias-label-dimmed)', fontSize: 11, letterSpacing: 0 }
@@ -8197,9 +8224,26 @@ function createClient(slotTarget) {
               }, opt.label)
             }))
         }
-        const field = function (labelText, node) {
-          return h('div', { style: { display: 'flex', flexDirection: 'column', gap: 5 } },
-            h('span', { style: fieldLabel }, labelText), node)
+        // 通用下拉（字号 / 代码字体）：紧凑按钮 + 弹出菜单，对齐 setup-panel 样例
+        const dd = function (open, setOpen, ref, labelNode, items) {
+          return h('div', { ref: ref, style: { position: 'relative' } }, [
+            h('button', {
+              onClick: function () { setOpen(!open) },
+              style: {
+                display: 'flex', alignItems: 'center', gap: 8,
+                background: 'var(--dsw-alias-bg-layer-2)', border: '1px solid var(--dsw-alias-border-l1)',
+                borderRadius: 6, padding: '5px 10px', fontSize: 12, cursor: 'pointer',
+                color: base, fontFamily: 'var(--dsw-font-family)',
+              },
+            }, [labelNode, h('span', { style: { color: muted } }, '▾')]),
+            open ? h('div', {
+              style: {
+                position: 'absolute', top: 'calc(100% + 4px)', left: 0, zIndex: 20,
+                background: 'var(--dsw-alias-bg-overlay)', border: '1px solid var(--dsw-alias-border-l1)',
+                borderRadius: 8, minWidth: 200, padding: 4, boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
+              },
+            }, items) : null,
+          ])
         }
         const dot = function (color, size) {
           return h('span', { style: { width: size, height: size, borderRadius: '50%', background: color || '#555', display: 'inline-block', flex: 'none' } })
@@ -8223,48 +8267,11 @@ function createClient(slotTarget) {
             },
           }, [
             dot(c && c.primary, 9),
-            t.name === 'system' ? tr('systemDefault') : t.name,
+            t.name === 'system' ? tr('systemDefault') : themeLabel(t.name),
             isCur ? h('span', { style: { color: 'var(--dsw-alias-brand-primary)', fontWeight: 700 } }, '✓') : null,
           ])
         }
 
-        // 自定义字体下拉（每个选项用其字体预览）
-        const fontDropdown = h('div', { ref: fontRef, style: { position: 'relative' } }, [
-          h('button', {
-            onClick: function () { setFontOpen(!fontOpen) },
-            style: {
-              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
-              background: 'var(--dsw-alias-bg-layer-2)', border: '1px solid var(--dsw-alias-border-l1)',
-              borderRadius: 6, padding: '6px 12px', fontSize: 12, cursor: 'pointer', minWidth: 200,
-              color: base, fontFamily: 'var(--dsw-font-family)',
-            },
-          }, [
-            h('span', { style: { fontFamily: FONTS[st.fontKey] || FONTS['JetBrains Mono'] } }, st.fontKey),
-            h('span', { style: { color: muted } }, '▾'),
-          ]),
-          fontOpen ? h('div', {
-            style: {
-              position: 'absolute', top: 'calc(100% + 4px)', left: 0, zIndex: 20,
-              background: 'var(--dsw-alias-bg-overlay)', border: '1px solid var(--dsw-alias-border-l1)',
-              borderRadius: 8, minWidth: 230, padding: 4, boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
-            },
-          }, Object.keys(FONTS).map(function (k) {
-            const on = k === st.fontKey
-            return h('div', {
-              key: k,
-              onClick: function () {
-                props.refresh(st.mode, st.size, k)
-                setUi(props.getState())
-                setFontOpen(false)
-              },
-              style: {
-                padding: '6px 10px', fontSize: 12, borderRadius: 5, cursor: 'pointer',
-                background: on ? 'rgba(255,255,255,0.1)' : 'transparent',
-                color: on ? base : muted,
-              },
-            }, h('span', { style: { fontFamily: FONTS[k] } }, k + ' — Aa ' + tr('fontPreview')))
-          })) : null,
-        ])
 
 
         return h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 920 } }, [
@@ -8299,14 +8306,43 @@ function createClient(slotTarget) {
           h('div', { style: secTitle }, [
             h('span', null, tr('typography')),
           ]),
-          h('div', { style: { display: 'flex', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap' } }, [
-            field(tr('bodyStyle'), seg(st.mode, [
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } }, [
+            seg(st.mode, [
               { value: 'mono', label: tr('mono') },
               { value: 'tui', label: tr('sans') },
-            ], function (v) { props.refresh(v, st.size, st.fontKey); setUi(props.getState()) })),
-            field(tr('fontSize'), seg(st.size, [11, 12, 13, 14, 15, 16, 17, 18].map(function (s) { return { value: s, label: s + 'px' } }),
-              function (v) { props.refresh(st.mode, Number(v), st.fontKey); setUi(props.getState()) })),
-            field(tr('codeFont'), fontDropdown),
+            ], function (v) { props.refresh(v, st.size, st.fontKey); setUi(props.getState()) }),
+            dd(sizeOpen, setSizeOpen, sizeRef,
+              h('span', null, tr('fontSize') + ' ' + st.size + 'px'),
+              [11, 12, 13, 14, 15, 16, 17, 18].map(function (s) {
+                const on = s === st.size
+                return h('div', {
+                  key: String(s),
+                  onClick: function () { props.refresh(st.mode, s, st.fontKey); setUi(props.getState()); setSizeOpen(false) },
+                  style: {
+                    padding: '6px 10px', fontSize: 12, borderRadius: 5, cursor: 'pointer',
+                    background: on ? 'rgba(255,255,255,0.1)' : 'transparent',
+                    color: on ? base : muted,
+                  },
+                }, String(s) + 'px')
+              })),
+            dd(fontOpen, setFontOpen, fontRef,
+              h('span', { style: { fontFamily: FONTS[st.fontKey] || FONTS['JetBrains Mono'] } }, st.fontKey),
+              Object.keys(FONTS).map(function (k) {
+                const on = k === st.fontKey
+                return h('div', {
+                  key: k,
+                  onClick: function () {
+                    props.refresh(st.mode, st.size, k)
+                    setUi(props.getState())
+                    setFontOpen(false)
+                  },
+                  style: {
+                    padding: '6px 10px', fontSize: 12, borderRadius: 5, cursor: 'pointer',
+                    background: on ? 'rgba(255,255,255,0.1)' : 'transparent',
+                    color: on ? base : muted,
+                  },
+                }, h('span', { style: { fontFamily: FONTS[k] } }, k + ' — Aa ' + tr('fontPreview')))
+              })),
           ]),
           // ── 主题选择（色系分组标签 + mini 芯片）──
           h('div', { style: secTitle }, [
@@ -8338,32 +8374,49 @@ function createClient(slotTarget) {
               }),
         ])
       }
+      // 面板 API（settings.plugins.tab 与 settings.section 两个入口共享同一份 state）
+      const paletteApi = function () {
+        return {
+          getState: getState,
+          toggle: toggle,
+          refresh: refresh,
+          setTheme: setTheme,
+          themeNames: themeNames,
+          groups: function () { return themeGroups() },
+          subscribeLocale: function (fn) {
+            localeListeners.push(fn)
+            return function () {
+              const i = localeListeners.indexOf(fn)
+              if (i >= 0) localeListeners.splice(i, 1)
+            }
+          },
+          previews: function () { return themeNames().map(function (n) { return { name: n, colors: previewColors(n) } }) },
+        }
+      }
       disposePanel = slots.inject(slotTarget, function () {
         return slots.register({
           name: slotTarget,
           id: 'opencode-palette',
           order: 30,
           label: function () { return tr('panelName') },
-          inject: function () {
-            return {
-              getState: getState,
-              toggle: toggle,
-              refresh: refresh,
-              setTheme: setTheme,
-              themeNames: themeNames,
-              groups: function () { return themeGroups() },
-              subscribeLocale: function (fn) {
-                localeListeners.push(fn)
-                return function () {
-                  const i = localeListeners.indexOf(fn)
-                  if (i >= 0) localeListeners.splice(i, 1)
-                }
-              },
-              previews: function () { return themeNames().map(function (n) { return { name: n, colors: previewColors(n) } }) },
-            }
-          },
+          inject: paletteApi,
         }, Panel)
       })
+      // 设置页左侧导航直达入口（保留「设置 → 插件」内的原入口）
+      // settings.section = 设置页左侧 section 列表（general=0 / models=10 / plugins=15 / agent-presets=20）
+      let disposeSection = null
+      if (slotTarget === 'settings.plugins.tab') {
+        disposeSection = slots.inject('settings.section', function () {
+          return slots.register({
+            name: 'settings.section',
+            id: 'opencode-palette',
+            order: 16,
+            label: function () { return tr('panelName') },
+            inject: paletteApi,
+          }, Panel)
+        })
+      }
+      disposeSection = disposeSection || null
     }
 
     // 卸载清理（cordis 语义：effect fn 立即执行，返回值才是清理器）
@@ -8371,6 +8424,7 @@ function createClient(slotTarget) {
       return function () {
         try { clearStyle() } catch (e) { /* 忽略 */ }
         try { if (disposePanel) disposePanel() } catch (e) { /* 忽略 */ }
+        try { if (disposeSection) disposeSection() } catch (e) { /* 忽略 */ }
         try { if (globalThis.__opencodePalette) delete globalThis.__opencodePalette } catch (e) { /* 忽略 */ }
         try { if (localeObserver) localeObserver.disconnect() } catch (e) { /* 忽略 */ }
       }

package/lib/index.js

@@ -1,5 +1,5 @@
 /**
- * dsh-opencode-palette v1.5.0 — 宿主半（no-op）
+ * dsh-opencode-palette v1.6.0 — 宿主半（no-op）
  *
  * 主题的全部工作在浏览器端（./client.js）完成：
  *   - 34 个 opencode 主题（33 内置 JSON + system）经数据驱动管线解析

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-opencode-palette",
-  "version": "1.5.0",
-  "description": "DSH Web 多主题引擎：完整支持 opencode TUI 全部 34 个主题（33 内置 + system）。数据驱动管线：主题 JSON → 颜色解析 → DSH 适配注入；设置面板即时切换、持久化。",
+  "version": "1.6.0",
+  "description": "让 DeepSeek Harness 穿上 34 款经典皮肤——东京的霓虹夜色、德古拉的暗红月光、复古工坊的暖黄灯火、黑客帝国的数字雨、玫瑰松林间的风……一键换肤，即点即换，重启不丢。34 legendary skins for DeepSeek Harness — tokyonight's neon dusk, dracula's crimson moon, gruvbox's retro glow, the matrix's digital rain, rose-pine's rosewood calm… one click, instant, persisted.",
   "type": "module",
   "main": "lib/index.js",
   "exports": {