refactor(config-editor): replace ce-* DOM ids with semantic namespaces

Use editor-* for chrome, field-* for field controls, and section-* for sections; update focus/navigation helpers, unit test fixtures, and the browser regressions. Rename the Svelte context keys accordingly and keep the #app mount point.

Assisted-by: opencode:deepseek-flash

Author: Itsusinn

config-editor/index.html

@@ -9,7 +9,7 @@
     <script type="module" src="/ui/main.ts"></script>
   </head>
   <body>
-    <p id="ce-loading" role="status">正在加载本地配置编辑器，需要支持 WebAssembly 的现代浏览器。</p>
+    <p id="editor-loading" role="status">正在加载本地配置编辑器，需要支持 WebAssembly 的现代浏览器。</p>
     <div id="app"></div>
     <noscript>请启用 JavaScript 和 WebAssembly 以使用本地配置编辑器。</noscript>
   </body>

config-editor/ui/App.svelte

@@ -23,9 +23,9 @@
 <svelte:head><title>{view.ui.brand} {view.ui.title}</title></svelte:head>
 
 <div class="shell" data-theme={theme.current}>
-  <a class="skip-link" href="#ce-editor" onclick={(event) => { event.preventDefault(); workbench.skipToEditor(); }}>跳转到配置表单</a>
+  <a class="skip-link" href="#editor-form" onclick={(event) => { event.preventDefault(); workbench.skipToEditor(); }}>跳转到配置表单</a>
   <AppHeader {theme} />
-  <main id="config-editor" data-ready="true">
+  <main id="editor" data-ready="true">
     <div class="page-heading">
       <div><p class="page-heading__eyebrow">{view.ui.eyebrow}</p><h1>{view.ui.title}</h1><p class="page-heading__intro">{view.ui.description}</p></div>
       <p class="privacy-note"><span class="privacy-note__dot"></span>本地处理<span>不保存输入 · 不上传凭据</span></p>
@@ -45,7 +45,7 @@
     </div>
     <div class="workspace" data-pane={workbench.pane}>
       <SectionNav />
-      <form id="ce-editor" class="editor-form" autocomplete="off" onsubmit={(event) => event.preventDefault()}>
+      <form id="editor-form" class="editor-form" autocomplete="off" onsubmit={(event) => event.preventDefault()}>
         <div class="region-heading"><h2>选择配置</h2><span>修改后实时更新预览</span></div>
         {#key session.schema}
           <FieldSearch />
@@ -84,7 +84,7 @@
     box-shadow: var(--shadow-pop);
   }
   .skip-link:focus { top: 10px; }
-  #config-editor {
+  #editor {
     max-width: 1616px;
     padding: 26px 28px 22px;
     margin: auto;
@@ -204,7 +204,7 @@
     [data-pane="preview"] > :global(.section-nav) { display: none; }
   }
   @media (max-width: 480px) {
-    #config-editor { padding: 18px 16px; }
+    #editor { padding: 18px 16px; }
     .page-heading { margin-bottom: 12px; }
     .region-heading { flex-wrap: wrap; }
   }

config-editor/ui/components/AppHeader.svelte

@@ -19,14 +19,14 @@
   </a>
   <div class="app-header__controls">
     {#if session.schemas.length}
-      <label class="app-header__schema" for="ce-schema"><span>配置方案</span>
-        <select id="ce-schema" value={session.schema} onchange={(event) => selectSchema(event.currentTarget.value)}>
+      <label class="app-header__schema" for="editor-schema"><span>配置方案</span>
+        <select id="editor-schema" value={session.schema} onchange={(event) => selectSchema(event.currentTarget.value)}>
           {#each session.schemas as item (item.name)}<option value={item.name}>{item.label}</option>{/each}
         </select>
       </label>
     {/if}
-    <label class="app-header__theme" for="ce-theme"><span>主题</span>
-      <select id="ce-theme" value={theme.current} onchange={(event) => theme.select(event.currentTarget.value)}>
+    <label class="app-header__theme" for="editor-theme"><span>主题</span>
+      <select id="editor-theme" value={theme.current} onchange={(event) => theme.select(event.currentTarget.value)}>
         {#each THEMES as option (option.id)}<option value={option.id}>{option.label}</option>{/each}
       </select>
     </label>

config-editor/ui/components/FieldControl.svelte

@@ -4,7 +4,7 @@
 
   let { field, row }: { field: FieldView; row?: { collection: string; id: string } } = $props();
   const session = useSession();
-  const id = $derived(`ce-${field.path}`);
+  const id = $derived(`field-${field.path}`);
   const described = $derived([field.hint && `${id}-hint`, field.error && `${id}-error`].filter(Boolean).join(' ') || undefined);
   const classes = $derived(field.kind === 'toggle' ? 'field field--toggle' : 'field');
 

config-editor/ui/components/FieldSearch.svelte

@@ -6,7 +6,7 @@
   const workbench = useWorkbench();
 
   function escape(event: KeyboardEvent) {
-    if (event.key === 'Escape') { query = ''; document.getElementById('ce-search')?.focus(); }
+    if (event.key === 'Escape') { query = ''; document.getElementById('editor-search')?.focus(); }
   }
 
   const matches = $derived.by(() => {
@@ -18,9 +18,9 @@
 </script>
 
 <div class="field-search" role="search" aria-label="查找配置项">
-  <label for="ce-search">查找配置项</label>
-  <div class="field-search__input"><input id="ce-search" type="search" onkeydown={escape} bind:value={query} placeholder="搜索名称、说明或配置路径" autocomplete="off" />
-    {#if query}<button type="button" onclick={() => { query = ''; document.getElementById('ce-search')?.focus(); }}>清除</button>{/if}
+  <label for="editor-search">查找配置项</label>
+  <div class="field-search__input"><input id="editor-search" type="search" onkeydown={escape} bind:value={query} placeholder="搜索名称、说明或配置路径" autocomplete="off" />
+    {#if query}<button type="button" onclick={() => { query = ''; document.getElementById('editor-search')?.focus(); }}>清除</button>{/if}
   </div>
   {#if query.trim()}
     <div class="field-search__results">

config-editor/ui/components/FormSection.svelte

@@ -21,13 +21,13 @@
 {/snippet}
 
 {#if section.collapsed}
-  <details id={`ce-section-${section.name}`} class="form-section form-section--advanced" hidden={!section.visible}>
+  <details id={`section-${section.name}`} class="form-section form-section--advanced" hidden={!section.visible}>
     <summary>{@render heading()}<span class="form-section__chevron" aria-hidden="true">⌄</span></summary>
     {@render contents()}
   </details>
 {:else}
-  <section id={`ce-section-${section.name}`} class="form-section" hidden={!section.visible} aria-labelledby={`ce-heading-${section.name}`}>
-    <h2 id={`ce-heading-${section.name}`} tabindex="-1">{@render heading()}</h2>
+  <section id={`section-${section.name}`} class="form-section" hidden={!section.visible} aria-labelledby={`section-${section.name}-heading`}>
+    <h2 id={`section-${section.name}-heading`} tabindex="-1">{@render heading()}</h2>
     {@render contents()}
   </section>
 {/if}

config-editor/ui/components/PreviewPanel.svelte

@@ -11,7 +11,7 @@
   const format = $derived(view.format?.value ?? 'json');
 </script>
 
-<aside id="ce-preview" class="preview" aria-label="配置预览区" tabindex="-1">
+<aside id="editor-preview" class="preview" aria-label="配置预览区" tabindex="-1">
   <div class="preview__top">
     <h2>配置预览</h2>
     <span class="preview__validity" role="status" data-valid={String(view.valid)}>
@@ -27,7 +27,7 @@
     </div>
     {#if view.format}
       {@const field = view.format}
-      <select id={`ce-${field.key}`} aria-label={field.label} value={field.value}
+      <select id={`field-${field.key}`} aria-label={field.label} value={field.value}
         onchange={(event) => session.dispatch({ type: 'set', field: field.key, value: event.currentTarget.value })}>
         {#each field.options as [value, label] (value)}
           <option {value}>{label}</option>
@@ -37,8 +37,8 @@
   </div>
   <div class="preview__filebar">
     <strong>{view.filename}</strong>
-    <label for="ce-reveal">
-      <input id="ce-reveal" type="checkbox" checked={session.reveal} onchange={(event) => session.setReveal(event.currentTarget.checked)} />
+    <label for="editor-reveal">
+      <input id="editor-reveal" type="checkbox" checked={session.reveal} onchange={(event) => session.setReveal(event.currentTarget.checked)} />
       显示密码
     </label>
   </div>

config-editor/ui/components/SectionNav.svelte

@@ -12,16 +12,16 @@
     const update = () => {
       cancelAnimationFrame(frame);
       frame = requestAnimationFrame(() => {
-        const elements = names.map(name => document.getElementById(`ce-section-${name}`)).filter((element): element is HTMLElement => !!element && element.getClientRects().length > 0);
+        const elements = names.map(name => document.getElementById(`section-${name}`)).filter((element): element is HTMLElement => !!element && element.getClientRects().length > 0);
         if (!elements.length) return;
         const atBottom = window.scrollY > 0 && window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;
         const current = atBottom ? elements.at(-1) : elements.filter(element => element.getBoundingClientRect().top <= 140).at(-1) ?? elements[0];
-        active = current?.id.replace('ce-section-', '') ?? '';
+        active = current?.id.replace('section-', '') ?? '';
       });
     };
     update();
     const observer = new ResizeObserver(update);
-    const form = document.getElementById('ce-editor');
+    const form = document.getElementById('editor-form');
     if (form) observer.observe(form);
     window.addEventListener('scroll', update, { passive: true });
     window.addEventListener('resize', update);
@@ -31,8 +31,8 @@
 
 <nav class="section-nav" aria-label="配置分区">
   <p>配置目录</p>
-  <label class="section-nav__picker" for="ce-section-picker">配置分区
-    <select id="ce-section-picker" value={active} onchange={(event) => focusSection(event.currentTarget.value)}>
+  <label class="section-nav__picker" for="editor-section-picker">配置分区
+    <select id="editor-section-picker" value={active} onchange={(event) => focusSection(event.currentTarget.value)}>
       {#each session.visibleSections as section (section.name)}<option value={section.name}>{section.label}{session.errorCount(section) ? ` · ${session.errorCount(section)} 项待修正` : ''}</option>{/each}
     </select>
   </label>
@@ -44,7 +44,7 @@
       </button>
     {/if}
   {/each}
-  <a href="#ce-preview" onclick={(event) => { event.preventDefault(); workbench.showPreview(); }}>查看配置预览 →</a>
+  <a href="#editor-preview" onclick={(event) => { event.preventDefault(); workbench.showPreview(); }}>查看配置预览 →</a>
 </nav>
 
 <style>

config-editor/ui/lib/dom.spec.ts

@@ -21,10 +21,10 @@ describe('download', () => {
 
 describe('focusField', () => {
   it('opens collapsed ancestors and focuses the field', () => {
-    document.body.innerHTML = '<details id="ce-section-s"><summary>sec</summary><input id="ce-host"></details>';
-    const input = document.getElementById('ce-host') as HTMLInputElement;
+    document.body.innerHTML = '<details id="section-s"><summary>sec</summary><input id="field-host"></details>';
+    const input = document.getElementById('field-host') as HTMLInputElement;
     focusField('host');
-    expect((document.getElementById('ce-section-s') as HTMLDetailsElement).open).toBe(true);
+    expect((document.getElementById('section-s') as HTMLDetailsElement).open).toBe(true);
     expect(document.activeElement).toBe(input);
     expect(input.scrollIntoView).toHaveBeenCalled();
   });
@@ -36,10 +36,10 @@ describe('focusField', () => {
 
 describe('focusSection', () => {
   it('opens the section and focuses its heading', () => {
-    document.body.innerHTML = '<details id="ce-section-s"><summary>sec</summary></details>';
+    document.body.innerHTML = '<details id="section-s"><summary>sec</summary></details>';
     const summary = document.querySelector('summary') as HTMLElement;
     focusSection('s');
-    expect((document.getElementById('ce-section-s') as HTMLDetailsElement).open).toBe(true);
+    expect((document.getElementById('section-s') as HTMLDetailsElement).open).toBe(true);
     expect(document.activeElement).toBe(summary);
   });
 });

config-editor/ui/lib/dom.ts

@@ -21,15 +21,15 @@ function openAncestors(element: HTMLElement): void {
 }
 
 export function focusField(path: string): void {
-  const element = document.getElementById(`ce-${path}`);
+  const element = document.getElementById(`field-${path}`);
   if (!element) return;
   openAncestors(element);
   element.focus();
   element.scrollIntoView({ block: 'center' });
 }
 
 export function focusSection(name: string): void {
-  const section = document.getElementById(`ce-section-${name}`);
+  const section = document.getElementById(`section-${name}`);
   if (!section) return;
   if (section instanceof HTMLDetailsElement) section.open = true;
   const heading = section.querySelector<HTMLElement>('summary, h2');