feat(config-generator): copy displayed configuration from detail view

Add a copy button to the config-desc document header that writes the currently visible lines of the selected config, format, and selector branch as plain text, with success and failure status feedback. The status resets when the config, format, or selector changes.

Cover the clipboard round trip in the TUIC browser regression and assert the button in the reuse example regression.

Assisted-by: opencode:deepseek-v4-flash

Author: Itsusinn

config-generator/AGENTS.md

@@ -53,7 +53,7 @@ Svelte 通过 WASM `Engine` 提交 `set`、`set-row`、`add`、`remove`、`gener
 
 ## 配置详解
 
-可选的 `config-desc` 区块为独立的“配置详解”视图提供结构化示例和逐项说明。它不读取表单状态，也不参与配置投影、校验或导出；产品字段、示例值和说明仍全部留在 XML 中。页面左侧先选择 `config`、YAML/TOML 格式和该配置声明的任意 `selector`；右侧只显示 `when` 匹配的配置项。每行可用鼠标悬浮或键盘聚焦查看 `description`。前端 `ui/prism.ts` 用 Prism 仅注册 YAML/TOML 语法逐行高亮，颜色由 `--tok-*` 变量在明暗主题下定义；高亮只影响展示，XML 与 Rust 契约不变。
+可选的 `config-desc` 区块为独立的“配置详解”视图提供结构化示例和逐项说明。它不读取表单状态，也不参与配置投影、校验或导出；产品字段、示例值和说明仍全部留在 XML 中。页面左侧先选择 `config`、YAML/TOML 格式和该配置声明的任意 `selector`；右侧只显示 `when` 匹配的配置项。每行可用鼠标悬浮或键盘聚焦查看 `description`。前端 `ui/prism.ts` 用 Prism 仅注册 YAML/TOML 语法逐行高亮，颜色由 `--tok-*` 变量在明暗主题下定义；高亮只影响展示，XML 与 Rust 契约不变。右侧头部提供“复制配置”，复制当前 config、格式与 selector 过滤后可见的纯文本。
 
 页面级方案来自 `schema/schemas.txt`，与单份 XML 内的输出和 `config-desc/config` 名称无关。页面可通过 `?schema=<schema-id>&mode=generate|detail` 直接选择应用 schema 和生成/详解视图；选择器与页签会同步这些参数并保留其他查询参数和片段。切换 schema 会创建全新会话，不复用上一应用的输入或凭据。
 

config-generator/styles.css

@@ -99,6 +99,10 @@ footer { display: flex; justify-content: space-between; border-top: 1px solid va
 .cg-desc-document { min-width: 0; overflow: visible; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 4px 18px #14223404; }
 .cg-desc-document > header { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
 .cg-desc-document > header span { color: var(--muted); font-size: 11px; }
+.cg-desc-meta { display: flex; align-items: center; gap: 12px; }
+.cg-desc-document header button { min-height: 30px; padding: 4px 10px; font-size: 12px; }
+.cg-desc-status { margin: 0; padding: 8px 20px 0; color: var(--muted); font-size: 11px; }
+.cg-desc-status:empty { display: none; }
 .cg-desc-code { padding: 14px 0; background: var(--subtle); border-radius: 0 0 12px 12px; }
 .cg-desc-line { position: relative; display: grid; width: 100%; grid-template-columns: 42px minmax(0, 1fr); min-height: 28px; align-items: center; padding: 1px 20px 1px 0; border: 0; border-radius: 0; background: transparent; color: var(--text); text-align: left; font-weight: 400; outline: 0; }
 .cg-desc-line:hover, .cg-desc-line:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
@@ -120,5 +124,5 @@ footer { display: flex; justify-content: space-between; border-top: 1px solid va
   .cg-header { padding: 16px 20px; align-items: flex-start; } .cg-brand-sub, .cg-header nav a, .cg-schema > span { display: none; } .cg-header nav { gap: 3px; font-size: 12px; flex-wrap: wrap; justify-content: flex-end; }
   #config-generator { padding: 28px 20px 20px; } h1 { font-size: 27px; } .cg-heading > p { font-size: 13px; } .cg-heading .cg-privacy { font-size: 10px; }
   .cg-modes button { min-width: 0; flex: 1; font-size: 12px; padding: 8px; } .cg-output { padding: 16px; } .cg-row-title { flex-wrap: wrap; }
-  .cg-desc-document > header { display: block; } .cg-desc-document > header span { display: block; margin-top: 4px; } .cg-tooltip { left: 12px; width: calc(100vw - 64px); }
+  .cg-desc-document > header { display: block; } .cg-desc-document > header span { display: block; margin-top: 4px; } .cg-desc-meta { display: block; } .cg-desc-meta button { margin-top: 8px; } .cg-tooltip { left: 12px; width: calc(100vw - 64px); }
 }

config-generator/ui/ConfigDescription.svelte

@@ -6,20 +6,32 @@
   let selected = $state('');
   let selectedFormat = $state('yaml');
   let selections = $state<Record<string, string>>({});
+  let status = $state('');
   const config = $derived(description.configs.find(item => item.name === selected) ?? description.configs[0]);
   const format = $derived(config?.formats.find(item => item.name === selectedFormat) ?? config?.formats[0]);
   const lines = $derived(format?.lines.filter(line => line.conditions.every(([name, value]) => selections[name] === value)) ?? []);
   const rendered = $derived(highlightLines(lines.map(line => line.text), format?.name ?? 'yaml'));
 
   function selectConfig(name: string) {
     selected = name;
+    status = '';
     const next = description.configs.find(item => item.name === name);
     selections = Object.fromEntries(next?.selectors.map(selector => [selector.name, selector.default]) ?? []);
     if (next && !next.formats.some(item => item.name === selectedFormat)) selectedFormat = next.formats[0]?.name ?? '';
   }
 
   function setSelection(name: string, value: string) {
     selections = { ...selections, [name]: value };
+    status = '';
+  }
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(`${lines.map(line => line.text).join('\n')}\n`);
+      status = '已复制当前显示的配置。';
+    } catch {
+      status = '浏览器未允许复制，请手动选择文本。';
+    }
   }
 
   $effect(() => {
@@ -47,7 +59,7 @@
         {#if config.formats.length > 1}
           <label class="cg-desc-selector" for="cg-desc-format">
             <span>配置格式</span>
-            <select id="cg-desc-format" value={selectedFormat} onchange={(event) => selectedFormat = event.currentTarget.value}>
+            <select id="cg-desc-format" value={selectedFormat} onchange={(event) => { selectedFormat = event.currentTarget.value; status = ''; }}>
               {#each config.formats as item (item.name)}<option value={item.name}>{item.label}</option>{/each}
             </select>
           </label>
@@ -66,7 +78,14 @@
     </aside>
     {#if config && format}
       <article class="cg-desc-document" aria-label={`${config.label} ${format.label} 配置详解`}>
-        <header><strong>{config.filename}.{format.extension}</strong><span>悬浮或聚焦任意配置项查看说明</span></header>
+        <header>
+          <strong>{config.filename}.{format.extension}</strong>
+          <div class="cg-desc-meta">
+            <span>悬浮或聚焦任意配置项查看说明</span>
+            <button type="button" onclick={copy}>复制配置</button>
+          </div>
+        </header>
+        <p class="cg-desc-status" role="status" aria-live="polite">{status}</p>
         <div class="cg-desc-code">
           {#each lines as line, index (`${line.text}-${index}`)}
             <button type="button" class="cg-desc-line" aria-label={`${line.text}。${line.description}`}>

tests/config-generator/browser-generic.mjs

@@ -30,6 +30,7 @@ try {
   assert.equal(await page.getByRole('heading', { name: '任务清单生成器' }).count(), 1);
   await click('配置详解');
   assert.equal(await page.getByRole('heading', { name: '清单格式详解' }).count(), 1);
+  assert.equal(await page.getByRole('button', { name: '复制配置', exact: true }).count(), 1);
   await id('desc-visibility').selectOption('private');
   assert.ok((await page.locator('.cg-desc-line').allTextContents()).some(line => line.includes('visibility: "private"')));
   assert.ok(await page.locator('.cg-desc-line code .token.atrule').count() > 0, 'YAML keys are highlighted');

tests/config-generator/browser.mjs

@@ -37,6 +37,10 @@ try {
   assert.ok(await page.locator('.cg-desc-line code .token.atrule').count() > 0, 'YAML keys are highlighted');
   await page.locator('#cg-desc-forward').selectOption('udp');
   assert.ok((await page.locator('.cg-desc-line').allTextContents()).some(line => line.includes('udp_forward:')));
+  const visible = (await page.locator('.cg-desc-line code').allTextContents()).join('\n');
+  await click('复制配置');
+  const detailCopy = (await page.evaluate(() => navigator.clipboard.readText())).replace(/\r\n/g, '\n');
+  assert.equal(detailCopy, `${visible}\n`);
   await id('desc-format').selectOption('toml');
   assert.equal(await page.locator('article[aria-label="客户端配置 TOML 配置详解"]').count(), 1);
   assert.equal(await page.locator('.cg-desc-document header strong').textContent(), 'client.toml');