fix(web): polish collapsible defaults and markdown hint affordance

Default-collapse mode, profile, and settings panels; add inline i-hint tooltips for markdown-only other-settings labels with bracket notes; normalize settings text hierarchy and tighten label-to-hint spacing for clearer visual priority.

Author: TinySnow

index.html

@@ -23,7 +23,7 @@ <h1>排版器</h1>
         </div>
       </header>
 
-      <details id="mode-panel" class="panel collapse-panel" open>
+      <details id="mode-panel" class="panel collapse-panel">
         <summary class="collapse-summary">
           <div class="collapse-head">
             <h2 class="panel-title">模式</h2>
@@ -47,7 +47,7 @@ <h2 class="panel-title">模式</h2>
         </div>
       </details>
 
-      <details id="profile-panel" class="panel collapse-panel" style="display: none" open>
+      <details id="profile-panel" class="panel collapse-panel" style="display: none">
         <summary class="collapse-summary">
           <div class="collapse-head">
             <h2 class="panel-title">配置文件</h2>
@@ -66,7 +66,7 @@ <h2 class="panel-title">配置文件</h2>
       </details>
 
       <section class="panel">
-        <details open>
+        <details>
           <summary>设置</summary>
           <div class="settings">
             <div>

src/web/app/ui.ts

@@ -27,7 +27,19 @@ function renderCks(defs: ReadonlyArray<SettingDef>, cfg: Option, onCheck: (key:
       onCheck(def.key, ck.checked);
     });
 
-    label.append(ck, document.createTextNode(def.label));
+    const parsed = parseInlineHint(def.label);
+    const useInlineHint = def.containerId === "other-settings" && def.mdOnly && parsed !== null;
+    const text = useInlineHint ? parsed.main : def.label;
+
+    label.append(ck, document.createTextNode(text));
+    if (useInlineHint) {
+      const hint = document.createElement("span");
+      hint.className = "inline-help";
+      hint.textContent = "i";
+      hint.title = parsed.hint;
+      hint.setAttribute("aria-label", parsed.hint);
+      label.appendChild(hint);
+    }
     boxWrap.appendChild(label);
   }
 }
@@ -132,4 +144,19 @@ function mustGet<T extends HTMLElement>(id: string): T {
   return node as T;
 }
 
+function parseInlineHint(label: string): { main: string; hint: string } | null {
+  const m = label.match(/^(.*?)[（(]([^）)]+)[）)]\s*$/);
+  if (!m) {
+    return null;
+  }
+
+  const main = m[1].trimEnd();
+  const hint = m[2].trim();
+  if (!main || !hint) {
+    return null;
+  }
+
+  return { main, hint };
+}
+
 export { renderCks, syncCfgUi, syncModeRadios, syncModeUi, syncBrkInput, syncProfileUi };

src/web/style.css

@@ -201,10 +201,12 @@ details[open] > summary::before {
   grid-template-columns: 1fr;
   gap: 12px;
   margin-top: 12px;
+  font-size: 14px;
 }
 
 .settings h2 {
   font-size: 15px;
+  font-weight: 600;
   margin: 0 0 8px;
 }
 
@@ -217,10 +219,31 @@ details[open] > summary::before {
 .check-grid label {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   color: var(--text);
 }
 
+.check-grid label .inline-help {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: #fff;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  cursor: help;
+}
+
+.check-grid label .inline-help:hover {
+  border-color: #9ca9bd;
+  color: #3f5068;
+}
+
 .line-gap-row {
   display: flex;
   align-items: center;