dsh-structured 0.9.2 → 0.9.3

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.9.3 — 2026-10-24
+
+- 配置页主题分段：三个主题选项（DeepSeek / Codex / Anthropic）各带所代表主题的强调色——选项前 7px 圆点标识 + 选中态文字着色，明暗自适应（DeepSeek `#2563EB`/`#60A5FA`、Codex `#10A37F`/`#34D399`、Anthropic `#CC785C`/`#E8A087`，与视觉层三套 token 同源）。样式只作用于 `[data-dsh-structured-config]` 容器内，随配置页 slot 同生命周期注入/撤销。
+- 截图：新增第 7 张 `assets/screenshots/11-config-page.png`（插件板块 → dsh-structured 详情页配置区实机截图，0.9.2 效果）；`screenshots.json` 与 README Screenshots 节同步。
+
 ## 0.9.2 — 2026-10-24
 
 - 插件详情页配置区：client 注册 `plugins.bundle.config`（键 `dsh-structured`），`theme`/`visual`/`defaultEnabled`/`tailReminder`/`includeSubagents`/`genui` 六字段在 插件板块 → dsh-structured 详情页直接编辑；写入走 configForms 的 `set`（落到 active profile 的 Cordis patch），`writable=false` 时控件只读并提示。

package/README.md

@@ -129,7 +129,9 @@ Phase 2 已落地 2.1–2.4：卡片类型（结论/判断/指标/风险/下一
 
 ![三套主题·暗色](assets/screenshots/10-theme-dark.png)
 
-`screenshots.json` 列出全部 6 张：前 4 张是实机裁图，覆盖标题卡、表格 + 表格结论、状态列、代码块与 800px 窄窗；后 2 张是按 0.9.1 实际 token 渲染的主题对照图，用于看 accent/surface/status，**不是桌面实机截图**。GenUI 截图因避免暴露工作区未收录。
+![插件设置页](assets/screenshots/11-config-page.png)
+
+`screenshots.json` 列出全部 7 张：前 4 张是实机裁图，覆盖标题卡、表格 + 表格结论、状态列、代码块与 800px 窄窗；09/10 两张是按 0.9.1 实际 token 渲染的主题对照图（不是桌面实机截图）；第 7 张是 0.9.2 起插件板块 → dsh-structured 详情页的配置区实机截图（六字段 + 主题分段按钮带各主题强调色）。GenUI 截图因避免暴露工作区未收录。
 
 ### 配置
 
@@ -144,7 +146,7 @@ Phase 2 已落地 2.1–2.4：卡片类型（结论/判断/指标/风险/下一
 GenUI 联动              auto | on | off
 ```
 
-宿主 describe 未服务本插件、或部署缺少前端 primitives 时，配置区自动隐藏（此时用下面的 patch 方式）。会话级开关不在这里：用 `/structured on | off`。
+宿主 describe 未服务本插件、或部署缺少前端 primitives 时，配置区自动隐藏（此时用下面的 patch 方式）。会话级开关不在这里：用 `/structured on | off`。主题分段的三个选项各带所代表主题的强调色圆点，选中态文字同色（0.9.3 起）。
 
 底层方式：在 profile 的 `cordis.patch.yml` 里覆盖同一行（注意：config 是整份替换，不是深合并）：
 

package/lib/client.js

@@ -44,6 +44,49 @@ window.__ModuleLoader__.load({
       { field: 'genui', kind: 'segmented', fallback: 'auto', label: 'GenUI 联动 / GenUI routing', hint: 'auto：检测到 dsh-genui 才追加 dsh-ui 路由规则', options: [['auto', 'auto'], ['on', 'on'], ['off', 'off']] },
     ]
 
+    /**
+     * 配置页专用样式：主题分段选择器的三个选项各带自己所代表主题的强调色
+     * （圆点标识 + 选中态文字着色，明暗自适应）。色值与视觉层三套 token 同源，
+     * 但作用域是设置面板（不在 _markdown_ 容器内），所以单独一份而不是复用 --ds-*。
+     */
+    const CONFIG_STYLE_ID = 'dsh-structured-config-style'
+    const CONFIG_CSS = `
+[data-dsh-structured-config] button[id^="dsh-structured-theme-"]{position:relative}
+[data-dsh-structured-config] button[id^="dsh-structured-theme-"]::before{
+  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
+  margin-right:7px;vertical-align:baseline;background:var(--dsw-alias-label-tertiary,#9CA3AF);
+}
+[data-dsh-structured-config] button#dsh-structured-theme-deepseek::before{background:#2563EB}
+[data-dsh-structured-config] button#dsh-structured-theme-codex::before{background:#10A37F}
+[data-dsh-structured-config] button#dsh-structured-theme-anthropic::before{background:#CC785C}
+[data-dsh-structured-config] button#dsh-structured-theme-deepseek[aria-selected="true"]{color:#2563EB;font-weight:600}
+[data-dsh-structured-config] button#dsh-structured-theme-codex[aria-selected="true"]{color:#0B6B4F;font-weight:600}
+[data-dsh-structured-config] button#dsh-structured-theme-anthropic[aria-selected="true"]{color:#A14A2E;font-weight:600}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-deepseek::before{background:#60A5FA}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-codex::before{background:#34D399}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-anthropic::before{background:#E8A087}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-deepseek[aria-selected="true"]{color:#60A5FA}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-codex[aria-selected="true"]{color:#34D399}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-anthropic[aria-selected="true"]{color:#E8A087}
+`
+
+    /** 插入配置页样式；返回移除函数。document 不可用时是空操作。 */
+    const ensureConfigStyle = () => {
+      if (typeof document === 'undefined' || document.head === null) return () => {}
+      document.getElementById(CONFIG_STYLE_ID)?.remove()
+      const style = document.createElement('style')
+      style.id = CONFIG_STYLE_ID
+      style.textContent = CONFIG_CSS
+      document.head.appendChild(style)
+      return () => {
+        try {
+          style.remove()
+        } catch {
+          // 移除失败不影响宿主。
+        }
+      }
+    }
+
     const CARD_TYPES = new Map([
       ['结论', 'conclusion'], ['总结', 'conclusion'], ['答案', 'conclusion'],
       ['判断', 'decision'], ['决策', 'decision'],
@@ -555,8 +598,10 @@ body[data-ds-dark-theme][data-dsh-structured-theme="anthropic"] [class*="_markdo
 
       child.effect?.(
         () =>
-          child.configForms.whileServed([CONFIG_NS], () =>
-            child.slots.inject(BUNDLE_CONFIG_SLOT, () =>
+          child.configForms.whileServed([CONFIG_NS], () => {
+            // 样式与 slot 注册同生命周期：命名空间不被服务时一并撤下。
+            const removeStyle = ensureConfigStyle()
+            const offSlot = child.slots.inject(BUNDLE_CONFIG_SLOT, () =>
               child.slots.register({
                 name: BUNDLE_CONFIG_SLOT,
                 key: 'dsh-structured',
@@ -571,8 +616,16 @@ body[data-ds-dark-theme][data-dsh-structured-theme="anthropic"] [class*="_markdo
                   },
                 }),
               }, StructuredConfigCard),
-            ),
-          ),
+            )
+            return () => {
+              try {
+                offSlot?.()
+              } catch {
+                // slot 撤销失败交由宿主清理。
+              }
+              removeStyle()
+            }
+          }),
         'dsh-structured: bundle config page',
       )
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-structured",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Structured output for DSH: no-label title card first, then tables/lists/steps; per-session switch and style.md override. 让 DSH 的每条实质回复默认结构化。",
   "type": "module",
   "main": "lib/index.js",

package/screenshots.json

@@ -4,5 +4,6 @@
   "assets/screenshots/07-code-block.png",
   "assets/screenshots/08-narrow.png",
   "assets/screenshots/09-theme-light.png",
-  "assets/screenshots/10-theme-dark.png"
+  "assets/screenshots/10-theme-dark.png",
+  "assets/screenshots/11-config-page.png"
 ]

package/src/client.js

@@ -42,6 +42,49 @@ window.__ModuleLoader__.load({
       { field: 'genui', kind: 'segmented', fallback: 'auto', label: 'GenUI 联动 / GenUI routing', hint: 'auto：检测到 dsh-genui 才追加 dsh-ui 路由规则', options: [['auto', 'auto'], ['on', 'on'], ['off', 'off']] },
     ]
 
+    /**
+     * 配置页专用样式：主题分段选择器的三个选项各带自己所代表主题的强调色
+     * （圆点标识 + 选中态文字着色，明暗自适应）。色值与视觉层三套 token 同源，
+     * 但作用域是设置面板（不在 _markdown_ 容器内），所以单独一份而不是复用 --ds-*。
+     */
+    const CONFIG_STYLE_ID = 'dsh-structured-config-style'
+    const CONFIG_CSS = `
+[data-dsh-structured-config] button[id^="dsh-structured-theme-"]{position:relative}
+[data-dsh-structured-config] button[id^="dsh-structured-theme-"]::before{
+  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
+  margin-right:7px;vertical-align:baseline;background:var(--dsw-alias-label-tertiary,#9CA3AF);
+}
+[data-dsh-structured-config] button#dsh-structured-theme-deepseek::before{background:#2563EB}
+[data-dsh-structured-config] button#dsh-structured-theme-codex::before{background:#10A37F}
+[data-dsh-structured-config] button#dsh-structured-theme-anthropic::before{background:#CC785C}
+[data-dsh-structured-config] button#dsh-structured-theme-deepseek[aria-selected="true"]{color:#2563EB;font-weight:600}
+[data-dsh-structured-config] button#dsh-structured-theme-codex[aria-selected="true"]{color:#0B6B4F;font-weight:600}
+[data-dsh-structured-config] button#dsh-structured-theme-anthropic[aria-selected="true"]{color:#A14A2E;font-weight:600}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-deepseek::before{background:#60A5FA}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-codex::before{background:#34D399}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-anthropic::before{background:#E8A087}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-deepseek[aria-selected="true"]{color:#60A5FA}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-codex[aria-selected="true"]{color:#34D399}
+body[data-ds-dark-theme] [data-dsh-structured-config] button#dsh-structured-theme-anthropic[aria-selected="true"]{color:#E8A087}
+`
+
+    /** 插入配置页样式；返回移除函数。document 不可用时是空操作。 */
+    const ensureConfigStyle = () => {
+      if (typeof document === 'undefined' || document.head === null) return () => {}
+      document.getElementById(CONFIG_STYLE_ID)?.remove()
+      const style = document.createElement('style')
+      style.id = CONFIG_STYLE_ID
+      style.textContent = CONFIG_CSS
+      document.head.appendChild(style)
+      return () => {
+        try {
+          style.remove()
+        } catch {
+          // 移除失败不影响宿主。
+        }
+      }
+    }
+
     const CARD_TYPES = new Map([
       ['结论', 'conclusion'], ['总结', 'conclusion'], ['答案', 'conclusion'],
       ['判断', 'decision'], ['决策', 'decision'],
@@ -553,8 +596,10 @@ body[data-ds-dark-theme][data-dsh-structured-theme="anthropic"] [class*="_markdo
 
       child.effect?.(
         () =>
-          child.configForms.whileServed([CONFIG_NS], () =>
-            child.slots.inject(BUNDLE_CONFIG_SLOT, () =>
+          child.configForms.whileServed([CONFIG_NS], () => {
+            // 样式与 slot 注册同生命周期：命名空间不被服务时一并撤下。
+            const removeStyle = ensureConfigStyle()
+            const offSlot = child.slots.inject(BUNDLE_CONFIG_SLOT, () =>
               child.slots.register({
                 name: BUNDLE_CONFIG_SLOT,
                 key: 'dsh-structured',
@@ -569,8 +614,16 @@ body[data-ds-dark-theme][data-dsh-structured-theme="anthropic"] [class*="_markdo
                   },
                 }),
               }, StructuredConfigCard),
-            ),
-          ),
+            )
+            return () => {
+              try {
+                offSlot?.()
+              } catch {
+                // slot 撤销失败交由宿主清理。
+              }
+              removeStyle()
+            }
+          }),
         'dsh-structured: bundle config page',
       )
     }

package/test/client-config-page.test.mjs

@@ -21,12 +21,30 @@ function makeDom() {
       return null
     },
   })
+  // 可观察的 style 表：createElement('style') 产物按 id 登记，remove 时注销。
+  const styles = new Map()
+  const styleElement = () => {
+    const style = element()
+    style.id = ''
+    style.textContent = ''
+    style.remove = () => {
+      if (style.id) styles.delete(style.id)
+    }
+    return style
+  }
   return {
+    styles,
     body: element(),
     documentElement: { setAttribute() {}, removeAttribute() {} },
-    head: { children: [], appendChild() {} },
-    createElement: () => element(),
-    getElementById: () => null,
+    head: {
+      children: [],
+      appendChild(style) {
+        this.children.push(style)
+        if (style.id) styles.set(style.id, style)
+      },
+    },
+    createElement: (tag) => (tag === 'style' ? styleElement() : element()),
+    getElementById: (id) => styles.get(id) ?? null,
     querySelectorAll: () => [],
   }
 }
@@ -82,13 +100,14 @@ function loadClient(dom, fakeRequire) {
 }
 
 function makeChild(form, slots) {
-  return {
+  const child = {
     configForms: {
       get(id) {
         return id === 'dsh-structured' ? form : undefined
       },
       whileServed(namespaces, register) {
-        if (served) register()
+        // 把 register 返回的组合 disposer 暴露给测试，模拟命名空间停服。
+        if (served) child.__disposeRegistration = register()
         return () => {}
       },
     },
@@ -97,6 +116,7 @@ function makeChild(form, slots) {
       return fn()
     },
   }
+  return child
 }
 
 let served = true
@@ -106,7 +126,7 @@ function collectRegistration() {
   const slots = {
     inject(name, factory) {
       assert.equal(name, 'plugins.bundle.config')
-      factory()
+      return factory()
     },
     register(options, component) {
       registered = { options, component }
@@ -271,3 +291,39 @@ test('config page：插件未就绪与只读态的降级渲染', () => {
   assert.equal(switches.length, 4)
   for (const element of switches) assert.equal(element.props.disabled, true)
 })
+
+test('config page：主题分段按钮带各主题强调色，随注册注入/撤销移除', () => {
+  served = true
+  const { require: fakeRequire } = fakeRuntime()
+  const dom = makeDom()
+  const module = loadClient(dom, fakeRequire)
+  const form = {
+    set() {
+      return Promise.resolve(true)
+    },
+    getSnapshot() {
+      return { status: 'ready', writable: true, value: {} }
+    },
+    subscribe() {
+      return () => {}
+    },
+  }
+  const { slots } = collectRegistration()
+  const child = makeChild(form, slots)
+  module.__test.setupConfigPage(child, form)
+
+  const style = dom.getElementById('dsh-structured-config-style')
+  assert.ok(style, 'config style should be injected with the slot registration')
+  // 三套主题的强调色选择器齐全（明暗两态），与视觉层 token 同源。
+  for (const token of ['#2563EB', '#10A37F', '#CC785C', '#60A5FA', '#34D399', '#E8A087']) {
+    assert.ok(style.textContent.includes(token), 'missing theme token ' + token)
+  }
+  assert.match(style.textContent, /#dsh-structured-theme-deepseek\[aria-selected="true"\]/)
+  assert.match(style.textContent, /#dsh-structured-theme-codex\[aria-selected="true"\]/)
+  assert.match(style.textContent, /#dsh-structured-theme-anthropic\[aria-selected="true"\]/)
+  assert.match(style.textContent, /body\[data-ds-dark-theme\]/)
+
+  // 命名空间停服：slot 与样式一并撤下。
+  child.__disposeRegistration?.()
+  assert.equal(dom.getElementById('dsh-structured-config-style'), null)
+})