feat(config): redesign settings navigation and preserve v7 config migration

- reorganize advanced settings with horizontal navigation, search, and contextual help
- remove LAN discovery and trusted proxy settings
- add robust v7-to-v8 migration for custom, plugin, routing, TLS, and credential fields
- preserve unsaved drafts during external configuration refresh
- add migration and settings UI coverage

src/components/SettingsHelp.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { CircleHelp } from 'lucide-react';
+import { useI18n } from '../i18n';
+
+export function SettingsHelp({ label, children }: { label: string; children: ReactNode }) {
+  const { locale } = useI18n();
+  const helpLabel = locale === 'zh-CN' ? '说明' : locale === 'ja' ? '説明' : 'Help';
+  const id = useId();
+  const trigger = useRef<HTMLButtonElement>(null);
+  const popover = useRef<HTMLSpanElement>(null);
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    const place = () => {
+      if (!trigger.current || !popover.current) return;
+      const anchor = trigger.current.getBoundingClientRect();
+      // Close help when its setting is hidden by a category or search change.
+      if (!anchor.width || !anchor.height) { setOpen(false); return; }
+      const bounds = popover.current.getBoundingClientRect();
+      const left = Math.max(12, Math.min(anchor.left, window.innerWidth - bounds.width - 12));
+      const below = anchor.bottom + 8;
+      const top = Math.max(12, below + bounds.height <= window.innerHeight - 12 ? below : anchor.top - bounds.height - 8);
+      setPosition({ left, top });
+    };
+    place();
+    window.addEventListener('resize', place);
+    window.addEventListener('scroll', place, true);
+    const observer = new ResizeObserver(place);
+    if (trigger.current) observer.observe(trigger.current);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', place);
+      window.removeEventListener('scroll', place, true);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const dismiss = (event: PointerEvent) => {
+      if (!trigger.current?.contains(event.target as Node) && !popover.current?.contains(event.target as Node)) setOpen(false);
+    };
+    const escape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+        trigger.current?.focus({ preventScroll: true });
+      }
+    };
+    document.addEventListener('pointerdown', dismiss);
+    window.addEventListener('keydown', escape, true);
+    return () => {
+      document.removeEventListener('pointerdown', dismiss);
+      window.removeEventListener('keydown', escape, true);
+    };
+  }, [open]);
+
+  return <span className="settings-help">
+    <button ref={trigger} type="button" className="settings-help-trigger" aria-label={`${label} · ${helpLabel}`} aria-expanded={open} aria-controls={id} aria-describedby={open ? id : undefined} onClick={() => { setPosition(null); setOpen(previous => !previous); }}>
+      <CircleHelp size={14} aria-hidden="true" />
+    </button>
+    {open ? createPortal(<span ref={popover} id={id} role="tooltip" className="settings-help-popover" style={{ left: position?.left ?? 0, top: position?.top ?? 0, visibility: position ? 'visible' : 'hidden' }}>{children}</span>, document.body) : null}
+  </span>;
+}

src/components/StructuredConfigEditor.tsx

@@ -3,6 +3,7 @@ import { ArrowDown, ArrowUp, Plus, Trash2, Undo2 } from 'lucide-react';
 import { useI18n } from '../i18n';
 import { templateText } from '../i18n/templateConfig';
 import { configRecord, defaultStructuredValue, type ConfigShape, type ConfigText } from '../services/structuredConfig';
+import { SettingsHelp } from './SettingsHelp';
 import './StructuredConfigEditor.css';
 
 export function useConfigText() {
@@ -75,11 +76,11 @@ export function StructuredConfigEditor({ shape, value, onChange, disabled = fals
     return <div className="structured-object">
       {Object.entries(shape.fields ?? {}).map(([key, field]) => <div key={key} className={`structured-field${['array', 'map', 'object', 'any'].includes(field.type) ? ' structured-field-wide' : ''}`}>
         <div className="structured-label"><label htmlFor={`${id}-${key}`}>{tx(field.label) || key}</label>
+          {field.hint && <SettingsHelp label={tx(field.label) || key}>{tx(field.hint)}</SettingsHelp>}
           {field.optional && record[key] !== undefined && <button type="button" className="icon-button quiet" disabled={disabled} onClick={() => update(key, undefined)} title={inheritText} aria-label={`${inheritText}: ${tx(field.label) || key}`}><Undo2 size={13} /></button>}
         </div>
         {field.optional && record[key] == null ? <button type="button" className="secondary-button structured-unset" disabled={disabled} aria-label={`${tx(field.label) || key}: ${inheritText}`} onClick={() => update(key, defaultStructuredValue(field))}>{inheritText} · {tx({ zh: '设置', en: 'Set', ja: '設定' })}</button>
           : <StructuredConfigEditor shape={field} value={record[key]} onChange={next => update(key, next)} disabled={disabled} id={`${id}-${key}`} />}
-        {field.hint && <small>{tx(field.hint)}</small>}
       </div>)}
     </div>;
   }

src/components/TemplateConfigSection.tsx

@@ -2,19 +2,23 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
 import { open } from '@tauri-apps/plugin-dialog';
-import { RotateCcw, Save, Settings2 } from 'lucide-react';
+import { RotateCcw, Save } from 'lucide-react';
 import { useI18n } from '../i18n';
 import { templateMessages, templateText } from '../i18n/templateConfig';
 import { useCoreRuntime, type CoreStatus } from '../coreRuntime';
+import { SettingsHelp } from './SettingsHelp';
 import {
   applyTemplateChanges, draftTemplateField, readTemplatePath, templateFieldKey, templateFieldValidation, templateFieldSaveValue,
-  type TemplateConfigChange, type TemplateConfigDraft, type TemplateConfigField, type TemplateConfigGroup, type TemplateConfigSaveResult,
+  type TemplateConfigChange, type TemplateConfigDraft, type TemplateConfigField, type TemplateConfigGroup, type TemplateConfigSaveResult, type TemplateText,
 } from '../services/templateConfig';
 import '../styles/template-config.css';
 
-export function TemplateConfigSection({ groups, visibleGroups }: {
+const restartHint = { zh: '需重启内核', en: 'Core restart required', ja: 'コアの再起動が必要' } satisfies TemplateText;
+
+export function TemplateConfigSection({ groups, visibleGroups, onDirtyGroupsChange }: {
   groups: readonly TemplateConfigGroup[];
   visibleGroups?: readonly string[];
+  onDirtyGroupsChange?: (groupIds: readonly string[]) => void;
 }) {
   const { locale } = useI18n();
   const { status, publishStatus, refreshStatus } = useCoreRuntime();
@@ -27,8 +31,18 @@ export function TemplateConfigSection({ groups, visibleGroups }: {
   const [busy, setBusy] = useState<string | null>(null);
   const mounted = useRef(true);
   const revision = useRef(0);
+  const reportedDirtyGroups = useRef<string | null>(null);
   const tr = (message: keyof typeof templateMessages) => templateText(templateMessages[message], locale);
 
+  useEffect(() => {
+    if (!onDirtyGroupsChange) return;
+    const dirtyGroups = groups.filter((group) => group.fields.some((field) => drafts[templateFieldKey(field.path)])).map((group) => group.id);
+    const signature = JSON.stringify(dirtyGroups);
+    if (reportedDirtyGroups.current === signature) return;
+    reportedDirtyGroups.current = signature;
+    onDirtyGroupsChange(dirtyGroups);
+  }, [drafts, groups, onDirtyGroupsChange]);
+
   const reload = useCallback(async () => {
     const request = ++revision.current;
     try {
@@ -132,9 +146,9 @@ export function TemplateConfigSection({ groups, visibleGroups }: {
   const control = (group: TemplateConfigGroup, field: TemplateConfigField, value: unknown, id: string, invalid: boolean) => {
     const disabled = busy !== null || config === null;
     const onChange = (next: unknown) => changeField(group, field, next);
-    const common = { id, disabled, 'aria-invalid': invalid || undefined, 'aria-describedby': `${id}-description` };
+    const common = { id, disabled, 'aria-invalid': invalid || undefined, 'aria-describedby': invalid ? `${id}-error` : undefined };
     if (field.type === 'custom' && field.render) return field.render({ value, onChange, disabled, id });
-    if (field.type === 'boolean') return <label className="switch-control"><input {...common} type="checkbox" checked={value === true} onChange={(event) => onChange(event.currentTarget.checked)} /><span className="switch-track" /></label>;
+    if (field.type === 'boolean') return <label className="switch-control template-config-switch"><input {...common} type="checkbox" checked={value === true} onChange={(event) => onChange(event.currentTarget.checked)} /><span className="switch-track" /></label>;
     if (field.type === 'select') {
       const selected = field.options?.findIndex((option) => Object.is(option.value, value)) ?? -1;
       return <select {...common} className="config-network-input" value={String(selected)} onChange={(event) => onChange(field.options?.[Number(event.currentTarget.value)]?.value)}>
@@ -160,8 +174,9 @@ export function TemplateConfigSection({ groups, visibleGroups }: {
     {restartNeeded ? <div className="template-config-notice" role="status"><span>{tr('restart')}</span>{status?.running ? <button type="button" className="secondary-button compact-button" disabled={busy !== null} onClick={() => void restart()}>{tr('restartNow')}</button> : null}</div> : null}
     {groups.map((group) => {
       const dirty = group.fields.some((field) => drafts[templateFieldKey(field.path)]);
-      return <section key={group.id} className="config-card template-config-card" hidden={!visible.includes(group)} aria-labelledby={`template-group-${group.id}`}>
-        <div className="template-config-heading"><div><h3 id={`template-group-${group.id}`}><Settings2 size={18} aria-hidden="true" />{templateText(group.title, locale)}</h3>{group.description ? <p>{templateText(group.description, locale)}</p> : null}</div></div>
+      const needsRestart = group.fields.some((field) => field.restart);
+      return <section key={group.id} id={`config-group-${group.id}`} tabIndex={-1} className={`config-card template-config-card${dirty ? ' template-config-card-dirty' : ''}`} hidden={!visible.includes(group)} aria-labelledby={`template-group-${group.id}`}>
+        <div className="template-config-heading"><div className="template-config-heading-main"><h3 id={`template-group-${group.id}`}>{templateText(group.title, locale)}</h3>{group.description ? <SettingsHelp label={templateText(group.title, locale)}>{templateText(group.description, locale)}</SettingsHelp> : null}</div>{needsRestart ? <span className="template-config-restart-hint"><RotateCcw size={12} aria-hidden="true" />{templateText(restartHint, locale)}</span> : null}</div>
         <div className="template-config-fields">{group.fields.map((field, index) => {
           const key = templateFieldKey(field.path);
           const original = readTemplatePath(config, field.path);
@@ -170,16 +185,16 @@ export function TemplateConfigSection({ groups, visibleGroups }: {
           const value = draft && !draft.remove ? draft.value : draft?.remove || !original.exists ? field.defaultValue : original.value;
           const validation = draft && !draft.remove ? templateFieldValidation(field, value) : null;
           const id = `template-${group.id}-${index}`;
-          return <div key={key} className={`template-config-field${field.type === 'custom' || field.type === 'json' || field.type === 'string-list' ? ' template-config-field-wide' : ''}${field.type === 'boolean' ? ' template-config-toggle' : ''}`}>
-            <div className="template-config-label">{field.type === 'custom' ? <span id={`${id}-label`}>{templateText(field.label, locale)}</span> : <label htmlFor={id}>{templateText(field.label, locale)}</label>}<span className={`template-config-origin${draft ? ' template-config-origin-dirty' : ''}`}>{draft ? tr('dirty') : exists ? tr('explicit') : tr('inherited')}</span></div>
-            {field.type === 'custom' ? <details className="template-config-custom"><summary aria-labelledby={`${id}-label ${id}-edit`} aria-describedby={`${id}-description`}><span id={`${id}-edit`}>{tr('editDetails')}</span></summary><div className="template-config-control" role="group" aria-labelledby={`${id}-label`}>{control(group, field, value, id, Boolean(validation))}</div></details> : <div className="template-config-control">{control(group, field, value, id, Boolean(validation))}</div>}
-            <small id={`${id}-description`}>{templateText(field.description, locale)}{field.type === 'string-list' ? ` ${tr('list')}` : ''}</small>
-            {validation ? <small className="template-config-error" role="alert">{templateText(validation, locale)}</small> : null}
-            {exists ? <button type="button" className="template-config-reset" disabled={busy !== null || !config} aria-label={`${tr('default')}: ${templateText(field.label, locale)}`} onClick={() => changeField(group, field, null, true)}><RotateCcw size={12} aria-hidden="true" />{tr('default')}</button> : null}
+          const description = [templateText(field.description, locale), field.type === 'string-list' ? tr('list') : ''].filter(Boolean).join(' ');
+          const resetLabel = `${tr('default')}: ${templateText(field.label, locale)}`;
+          return <div key={key} id={`template-field-${group.id}-${index}`} tabIndex={-1} className={`template-config-field${field.type === 'custom' || field.type === 'json' || field.type === 'string-list' ? ' template-config-field-wide' : ''}${field.type === 'boolean' ? ' template-config-toggle' : ''}${draft ? ' template-config-field-dirty' : ''}`}>
+            <div className="template-config-label">{field.type === 'custom' ? <span id={`${id}-label`}>{templateText(field.label, locale)}</span> : <label htmlFor={id}>{templateText(field.label, locale)}</label>}<div className="template-config-label-tools">{description ? <SettingsHelp label={templateText(field.label, locale)}>{description}</SettingsHelp> : null}{exists ? <button type="button" className="template-config-reset" disabled={busy !== null || !config} title={resetLabel} aria-label={resetLabel} onClick={() => changeField(group, field, null, true)}><RotateCcw size={14} aria-hidden="true" /></button> : null}</div></div>
+            {field.type === 'custom' ? <details className="template-config-custom"><summary aria-labelledby={`${id}-label ${id}-edit`} aria-describedby={validation ? `${id}-error` : undefined}><span id={`${id}-edit`}>{tr('editDetails')}</span></summary><div className="template-config-control" role="group" aria-labelledby={`${id}-label`}>{control(group, field, value, id, Boolean(validation))}</div></details> : <div className="template-config-control">{control(group, field, value, id, Boolean(validation))}</div>}
+            {validation ? <small id={`${id}-error`} className="template-config-error" role="alert">{templateText(validation, locale)}</small> : null}
           </div>;
         })}</div>
         {groupErrors[group.id] ? <p className="template-config-error" role="alert">{groupErrors[group.id]}</p> : null}
-        <div className="template-config-actions"><span role="status">{dirty ? tr('dirty') : saved[group.id] ? tr('saved') : ''}</span><div>{dirty ? <button type="button" className="secondary-button compact-button" disabled={busy !== null} onClick={() => discardGroup(group)}>{tr('discard')}</button> : null}<button type="button" className="primary-button compact-button" disabled={!dirty || busy !== null || !config} onClick={() => void saveGroup(group)}><Save size={15} aria-hidden="true" />{busy === group.id ? tr('saving') : tr('save')}</button></div></div>
+        <div className="template-config-actions"><span className={dirty ? 'template-config-action-status-dirty' : saved[group.id] ? 'template-config-action-status-saved' : undefined} role="status">{dirty ? tr('dirty') : saved[group.id] ? tr('saved') : ''}</span><div>{dirty ? <button type="button" className="secondary-button compact-button" disabled={busy !== null} onClick={() => discardGroup(group)}>{tr('discard')}</button> : null}<button type="button" className="primary-button compact-button" disabled={!dirty || busy !== null || !config} onClick={() => void saveGroup(group)}><Save size={15} aria-hidden="true" />{busy === group.id ? tr('saving') : tr('save')}</button></div></div>
       </section>;
     })}
   </div>;

src/mocks/browserMockRuntime.ts

@@ -926,7 +926,7 @@ export function createBrowserMockRuntime(
           else if (key === 'requestLog' || key === 'pluginsEnabled') syncValues[key] = false;
         }
         Object.assign(state.coreConfig, syncValues);
-        const restartRequired = changes.some((change) => !sameTemplateValue(readTemplatePath(before, change.path), readTemplatePath(state.extendedConfig, change.path)) && ['server.host', 'server.port', 'server.tls', 'server.trusted-proxies', 'management', 'oauth.auth-dir'].some((prefix) => change.path.join('.') === prefix || change.path.join('.').startsWith(`${prefix}.`)));
+        const restartRequired = changes.some((change) => !sameTemplateValue(readTemplatePath(before, change.path), readTemplatePath(state.extendedConfig, change.path)) && ['server.host', 'server.port', 'server.tls', 'management', 'oauth.auth-dir'].some((prefix) => change.path.join('.') === prefix || change.path.join('.').startsWith(`${prefix}.`)));
         emit('config-files-changed', { paths: ['cpa-core/config.yaml'], errors: [] });
         return { config: clone(state.extendedConfig), restartRequired };
       }

src/pages/SensitiveWordsPage.tsx

@@ -96,7 +96,7 @@ function WordEditor({ provider, entries, composer, disabled, onAdd, onCompose, o
   );
 }
 
-export function SensitiveWordsPage() {
+export function SensitiveWordsPage({ onDirtyChange }: { onDirtyChange?: (dirty: boolean) => void } = {}) {
   const { t } = useI18n();
   const { askConfirmation, confirmationDialog } = useConfirmation();
   const nextEntryId = useRef(0);
@@ -143,6 +143,8 @@ export function SensitiveWordsPage() {
     || JSON.stringify(words.devinSensitiveWords) !== JSON.stringify(saved.devinSensitiveWords)
   );
 
+  useEffect(() => { onDirtyChange?.(dirty); }, [dirty, onDirtyChange]);
+
   const changeWord = (provider: Provider, id: number, value: string) => {
     setDraft((current) => ({
       ...current,

src/pages/ThinkingAliasesPage.tsx

@@ -24,6 +24,7 @@ import {
   Zap,
 } from 'lucide-react';
 import { getCurrentLocale, translate, useI18n } from '../i18n';
+import { SettingsHelp } from '../components/SettingsHelp';
 import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 
 type PresetThinkingEffort = 'low' | 'medium' | 'high' | 'xhigh' | 'max';
@@ -591,7 +592,6 @@ export function ThinkingAliasesPage({ embedded = false }: { embedded?: boolean }
               <span><GitFork size={18} /></span>
               <div>
                 <h2 id="thinking-alias-editor-title">{t(editingEntry ? 'common.edit' : 'aliases.create.title')}</h2>
-                <p>{t('aliases.create.description')}</p>
               </div>
               <button type="button" className="icon-button quiet" onClick={closeEditor} disabled={Boolean(busyAlias)} title={t('common.close')} aria-label={t('common.close')}>
                 <X size={18} />
@@ -601,7 +601,7 @@ export function ThinkingAliasesPage({ embedded = false }: { embedded?: boolean }
             <div className="thinking-alias-dialog-body">
 
             <div className="thinking-alias-field thinking-model-field">
-            <label htmlFor="thinking-model-search">{t('aliases.originalModel')}</label>
+            <div className="config-field-label"><label htmlFor="thinking-model-search">{t('aliases.originalModel')}</label><SettingsHelp label={t('aliases.originalModel')}>{t('aliases.sourceHint')}</SettingsHelp></div>
             <div className="thinking-model-picker" ref={modelPickerRef}>
               <div className="thinking-model-search">
                 {loading ? <LoaderCircle size={15} className="spin" /> : <Search size={15} />}
@@ -701,15 +701,12 @@ export function ThinkingAliasesPage({ embedded = false }: { embedded?: boolean }
                   {t('aliases.sourceLabel', { source: thinkingAliasSourceDetail(selectedSource) })}
                 </strong>
               </div>
-            ) : (
-              <small className="thinking-model-hint">{t('aliases.sourceHint')}</small>
-            )}
+            ) : null}
             </div>
 
             <div className="thinking-alias-field">
             <div className="thinking-field-heading">
               <strong>{t('aliases.effort.title')}</strong>
-              <span>{t('aliases.effort.description')}</span>
             </div>
             <div className="thinking-effort-options">
               <button
@@ -750,7 +747,6 @@ export function ThinkingAliasesPage({ embedded = false }: { embedded?: boolean }
               <label className={`thinking-fast-option${fastEnabled ? ' active' : ''}`}>
                 <span className="thinking-fast-option-copy">
                   <span><Zap size={15} /> Fast</span>
-                  <small>{fastEnabled ? t('aliases.fast.enabled') : t('aliases.fast.disabled')}</small>
                 </span>
                 <span className="switch-control thinking-fast-switch">
                   <input

src/services/generalTemplateFields.ts

@@ -25,27 +25,6 @@ export const generalTemplateGroups: readonly TemplateConfigGroup[] = [
   },
 ];
 
-export const networkTemplateGroups: readonly TemplateConfigGroup[] = [
-  {
-    id: 'trusted-proxies', title: text('可信代理', 'Trusted proxies', '信頼するプロキシ'),
-    fields: [field('server.trusted-proxies', 'string-list', '可信代理 IP / CIDR', 'Trusted proxy IPs / CIDRs', '信頼するプロキシの IP / CIDR', [], text('仅信任这些代理提供的客户端 IP 转发头。空列表表示不信任转发头；修改后需重启内核。', 'Only trust forwarded client IP headers from these proxies. An empty list trusts none. Restart the core after changing this setting.', '指定したプロキシからのクライアント IP 転送ヘッダーのみを信頼します。空のリストでは信頼しません。変更後はコアを再起動してください。'), { restart: true })],
-  },
-  {
-    id: 'discovery', title: text('局域网服务发现', 'Local network discovery', 'ローカルネットワークでのサービス検出'),
-    description: text('通过 mDNS / DNS-SD 广播服务，运行中的内核会自动应用修改。', 'Advertise this service through mDNS / DNS-SD. The running core applies changes automatically.', 'mDNS / DNS-SD でサービスを通知します。実行中のコアが変更を自動で適用します。'),
-    fields: [
-      field('server.discovery.enabled', 'boolean', '启用服务发现', 'Enable service discovery', 'サービス検出を有効化', false),
-      field('server.discovery.service-name', 'string', '服务名称前缀', 'Service name prefix', 'サービス名の接頭辞', '', text('留空使用 CPA；内核会自动追加短 ID。', 'Leave blank to use CPA. The core appends a short ID.', '空欄では CPA を使用します。コアが短い ID を追加します。')),
-      field('server.discovery.service-type', 'string', '服务类型', 'Service type', 'サービス種別', '_ai-gateway._tcp'),
-      field('server.discovery.subtypes', 'string-list', '广播的协议子类型', 'Advertised protocol subtypes', '通知するプロトコルのサブタイプ', undefined, text('未单独配置时由内核决定。示例：_chat-completions、_responses、_messages。', 'When unset, the core chooses subtypes. Examples: _chat-completions, _responses, _messages.', '未設定ではコアがサブタイプを選択します。例：_chat-completions、_responses、_messages。')),
-      field('server.discovery.interfaces.include', 'string-list', '允许的网卡', 'Included interfaces', '使用するネットワークインターフェース', [], text('空列表表示自动检测物理网卡。', 'An empty list automatically detects physical interfaces.', '空のリストでは物理ネットワークインターフェースを自動検出します。')),
-      field('server.discovery.interfaces.exclude', 'string-list', '排除的网卡模式', 'Excluded interface patterns', '除外するインターフェースのパターン', []),
-      field('server.discovery.auth-required', 'boolean', '广播需要身份验证', 'Advertise authentication requirement', '認証が必要なことを通知', true),
-      field('server.discovery.advertise-management', 'boolean', '广播管理接口可用性', 'Advertise management availability', '管理 API の利用可否を通知', false),
-    ],
-  },
-];
-
 export const routingTemplateGroups: readonly TemplateConfigGroup[] = [
   {
     id: 'routing-advanced', title: text('会话与冷却策略', 'Session & cooldown behavior', 'セッションとクールダウンの動作'),

src/services/settingsNavigation.ts

@@ -0,0 +1,53 @@
+import type { TemplateText } from './templateConfig';
+import { generalTemplateGroups, requestTemplateGroups, routingTemplateGroups } from './generalTemplateFields';
+import { oauthTemplateGroups } from './oauthTemplateFields';
+import { extensionTemplateGroups } from './extensionTemplateFields';
+import { payloadTemplateGroups } from './payloadTemplateFields';
+
+const text = (zh: string, en: string, ja: string): TemplateText => ({ zh, en, ja });
+export const settingsCategories = [
+  { id: 'general', title: text('服务与访问', 'Service & access', 'サービスとアクセス') },
+  { id: 'routing', title: text('路由与稳定性', 'Routing & reliability', 'ルーティングと安定性') },
+  { id: 'requests', title: text('模型与请求', 'Models & requests', 'モデルとリクエスト') },
+  { id: 'oauth', title: text('上游与凭据', 'Upstreams & credentials', '上流と認証情報') },
+  { id: 'diagnostics', title: text('日志与诊断', 'Logs & diagnostics', 'ログと診断') },
+  { id: 'extensions', title: text('扩展与集成', 'Extensions & integrations', '拡張と連携') },
+  { id: 'software', title: text('应用偏好', 'App preferences', 'アプリの設定') },
+] as const;
+export type SettingsCategory = typeof settingsCategories[number]['id'];
+export type SettingsView = 'access' | 'connection' | 'behavior' | 'aliases' | 'sensitive-words';
+export const settingsViews = {
+  general: [
+    { id: 'access', title: text('访问与管理', 'Access & management', 'アクセスと管理') },
+    { id: 'connection', title: text('连接与 TLS', 'Connections & TLS', '接続と TLS') },
+  ],
+  requests: [
+    { id: 'behavior', title: text('请求行为', 'Request behavior', 'リクエストの動作') },
+    { id: 'aliases', title: text('思考别名', 'Thinking aliases', '思考の別名') },
+    { id: 'sensitive-words', title: text('内容过滤', 'Content filters', 'コンテンツフィルター') },
+  ],
+} as const;
+export const settingsTemplateGroups = {
+  general: generalTemplateGroups.filter(group => group.id === 'management'),
+  routing: [...routingTemplateGroups, ...extensionTemplateGroups.filter(group => group.id === 'extensions-concurrency')],
+  requests: [...requestTemplateGroups, ...payloadTemplateGroups],
+  oauth: oauthTemplateGroups,
+  diagnostics: [...generalTemplateGroups.filter(group => group.id === 'diagnostics'), ...extensionTemplateGroups.filter(group => group.id === 'extensions-inflight')],
+  extensions: extensionTemplateGroups.filter(group => group.id === 'extensions-plugins'),
+  software: [],
+};
+export const allSettingsTemplateGroups = Object.values(settingsTemplateGroups).flat();
+export const settingsMessages = {
+  title: text('高级设置', 'Advanced settings', '詳細設定'),
+  search: text('搜索设置', 'Search settings', '設定を検索'),
+  searchHint: text('搜索设置…', 'Search settings…', '設定を検索…'),
+  clearSearch: text('清空搜索', 'Clear search', '検索をクリア'),
+  results: text('搜索结果', 'Search results', '検索結果'),
+  noResults: text('没有找到匹配的设置，试试其他关键词。', 'No matching settings. Try another keyword.', '一致する設定がありません。別のキーワードをお試しください。'),
+  restart: text('保存后重启内核', 'Core restarts after saving', '保存後にコアを再起動'),
+  automatic: text('自动保存', 'Auto-save', '自動保存'),
+  dirty: text('有未保存修改', 'Unsaved changes', '未保存の変更'),
+  nativeNetwork: text('监听与上游代理', 'Listening & upstream proxy', '待ち受けと上流プロキシ'),
+  nativeRouting: text('凭据选择与会话', 'Credential selection & sessions', '認証情報の選択とセッション'),
+  nativeRetry: text('重试与冷却', 'Retries & cooldowns', '再試行とクールダウン'),
+} satisfies Record<string, TemplateText>;

src/styles/config-settings.css

@@ -0,0 +1,103 @@
+.config-page { gap: 20px; min-width: 0; }
+.config-settings-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; }
+.config-settings-header h1 { margin: 0; font-size: 25px; letter-spacing: -.035em; }
+.config-settings-search { display: flex; align-items: center; gap: 10px; flex: 0 1 370px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-tertiary); }
+.config-settings-search:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent); }
+.config-settings-search > svg { flex: none; }
+.config-settings-search input { width: 100%; min-width: 0; padding: 3px 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 13px; }
+.config-settings-search input::-webkit-search-cancel-button { display: none; }
+.config-settings-search button { flex: none; width: 26px; height: 26px; }
+.config-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; min-width: 0; }
+.config-settings-topnav { min-width: 0; }
+.config-settings-navigation.config-subpage-tabs { display: flex; flex-wrap: nowrap; gap: 4px; width: 100%; max-width: 100%; padding: 0 0 5px; margin: 0; border: 0; border-bottom: 1px solid var(--border-color); background: none; border-radius: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; scroll-padding-inline: 4px; }
+.config-settings-navigation::-webkit-scrollbar { height: 5px; }
+.config-settings-navigation::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--border-color); }
+.config-page .config-settings-navigation.config-subpage-tabs button { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; min-width: 0; width: auto; height: auto; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; background: transparent; color: var(--text-secondary); text-align: center; white-space: nowrap; font-size: 12px; line-height: 1.5; font-weight: 500; box-shadow: none; }
+.config-page .config-settings-navigation.config-subpage-tabs button:hover { background: var(--bg-hover); color: var(--text-primary); }
+.config-page .config-settings-navigation.config-subpage-tabs button.active { border-bottom-color: var(--primary-color); background: var(--ui-accent-soft); color: var(--primary-color); font-weight: 650; box-shadow: none; }
+.config-page .config-settings-navigation.config-subpage-tabs button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -3px; }
+.config-settings-navigation button > svg { flex: none; color: var(--text-tertiary); }
+.config-settings-navigation button.active > svg { color: var(--primary-color); }
+.config-settings-navigation button > span:not(.config-nav-dirty) { min-width: 0; }
+.config-nav-dirty { flex: none; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--primary-color); }
+.config-settings-content { min-width: 0; }
+.config-settings-views { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 20px; padding: 4px; width: fit-content; max-width: 100%; border: 1px solid var(--border-color); background: var(--bg-secondary); border-radius: 9px; }
+.config-settings-views button { padding: 8px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; }
+.config-settings-views button.active { background: var(--bg-card); color: var(--text-primary); font-weight: 650; box-shadow: 0 1px 4px rgba(0, 0, 0, .07); }
+.config-settings-cards { display: grid; gap: 16px; min-width: 0; }
+.config-settings-cards > [hidden], .config-settings-content > [hidden] { display: none; }
+.config-settings-cards > section, .config-settings-content .template-config-card { scroll-margin-top: 24px; border-radius: 12px; }
+.config-settings-cards > section:focus-visible, .config-settings-content .template-config-card:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }
+.config-settings-content .config-keys-panel { height: auto; min-height: 225px; max-height: 370px; grid-template-rows: auto minmax(0, 1fr); }
+.config-settings-content .config-network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
+.config-settings-content .config-network-field { height: auto; min-height: 86px; gap: 10px; padding: 0; border: 0; background: transparent; }
+.config-settings-content .config-proxy-field { grid-column: 1 / -1; }
+.config-settings-content .config-network-routing-field { grid-column: 1 / -1; min-height: 0; }
+.config-settings-content .routing-segmented { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; background: var(--bg-secondary); }
+.config-settings-content .routing-segmented button { min-height: 38px; padding: 8px 10px; overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.5; }
+.config-settings-content .routing-segmented button.active { background: var(--bg-card); color: var(--primary-color); box-shadow: 0 0 0 1px var(--border-color); }
+.config-settings-content .config-network-section { padding: 20px; }
+.config-settings-content .config-panel-heading { flex-wrap: wrap; gap: 12px; }
+.config-settings-content .config-network-section-heading { flex-wrap: wrap; gap: 10px; }
+.config-card-status { margin-left: auto; color: var(--primary-color); font-size: 11px; }
+.config-settings-content .config-diagnostics-toggle-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
+.config-settings-content .config-diagnostics-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
+.config-settings-content .config-management-content { grid-template-columns: minmax(0, 1fr); }
+.config-settings-content .config-management-form { max-width: none; }
+.config-settings-content .config-tls-fields { grid-template-columns: minmax(0, 1fr); }
+.config-settings-content .thinking-alias-page { padding: 0; }
+.config-settings-content .template-config-section { margin-top: 18px; }
+.config-settings-content .config-settings-cards:empty + #config-template-panel .template-config-section { margin-top: 0; }
+.config-search-results { min-width: 0; }
+.config-search-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.config-search-heading h2 { margin: 0; font-size: 19px; }
+.config-search-heading > span { padding: 3px 8px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 11px; color: var(--text-secondary); }
+.config-search-result-list { display: grid; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
+.config-search-result-list > button { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 16px 18px; border: 0; background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; }
+.config-search-result-list > button + button { border-top: 1px solid var(--border-color); }
+.config-search-result-list > button:hover { background: var(--bg-hover); }
+.config-search-result-list > button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -3px; }
+.config-search-result-copy { display: grid; min-width: 0; gap: 6px; overflow-wrap: anywhere; }
+.config-search-result-copy strong { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.config-search-result-copy small { font-size: 11px; color: var(--text-tertiary); }
+.config-search-result-list > button > svg { flex: none; }
+.config-search-empty { padding: 40px 20px; border: 1px dashed var(--border-color); border-radius: 12px; color: var(--text-secondary); font-size: 13px; text-align: center; }
+
+.config-field-label { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.5; }
+.config-field-label > label { display: flex; align-items: center; gap: 7px; min-width: 0; }
+.config-inline-status { margin-left: auto; color: var(--text-tertiary); font-size: 11px; font-weight: 400; }
+.config-settings-content .config-network-port-field .config-network-input { width: 100%; }
+.config-settings-content .config-proxy-heading > .settings-help { margin-right: auto; }
+.config-settings-content .config-diagnostics-setting { padding: 8px 0; border: 0; background: transparent; grid-template-columns: 28px minmax(0, 1fr) 44px; gap: 10px; }
+.config-settings-content .config-diagnostics-setting-icon,
+.config-settings-content .config-software-setting-icon { width: 28px; height: 28px; border: 0; background: transparent; }
+.config-settings-content .config-diagnostics-field { padding: 0; border: 0; background: transparent; gap: 10px; }
+.config-settings-content .config-management-form { padding: 0; border: 0; background: transparent; }
+.config-settings-content .config-management-content > p { margin: 0; font-size: 12px; color: var(--text-secondary); }
+.config-settings-content .config-software-setting-row { min-height: 66px; padding: 14px 16px; gap: 16px; }
+.settings-help { display: inline-flex; flex: none; vertical-align: middle; }
+.settings-help-trigger { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-tertiary); cursor: pointer; }
+.settings-help-trigger:hover,
+.settings-help-trigger[aria-expanded="true"] { background: var(--bg-hover); color: var(--text-primary); }
+.settings-help-trigger:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
+.settings-help-popover { position: fixed; z-index: 1000; display: block; width: min(320px, calc(100vw - 24px)); max-height: min(360px, calc(100vh - 24px)); overflow-y: auto; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); box-shadow: 0 8px 28px rgba(0, 0, 0, .14); color: var(--text-secondary); font-size: 12px; font-weight: 400; line-height: 1.7; overflow-wrap: anywhere; }
+
+@media (max-width: 1150px) {
+  .config-settings-layout { gap: 20px; }
+  .config-page .config-settings-navigation.config-subpage-tabs button { padding: 10px; }
+  .config-settings-header { gap: 18px; }
+}
+@media (max-width: 720px) {
+  .config-page { gap: 20px; }
+  .config-settings-header { flex-direction: column; align-items: stretch; gap: 16px; }
+  .config-settings-search { flex-basis: auto; }
+  .config-settings-header h1 { font-size: 23px; }
+  .config-settings-navigation button > svg { display: none; }
+  .config-page .config-settings-navigation.config-subpage-tabs button { padding: 10px 12px; }
+  .config-settings-content .config-network-grid { grid-template-columns: minmax(0, 1fr); }
+  .config-settings-content .config-network-section { padding: 16px; }
+  .config-settings-content .config-network-field { min-height: 0; }
+  .config-settings-views { width: 100%; }
+  .config-settings-views button { flex: 1 1 auto; padding: 9px 8px; }
+  .config-search-result-list > button { padding: 14px; }
+}

src/styles/index.css

@@ -5,3 +5,4 @@
 @import './responsive-providers.css';
 @import './responsive-agents.css';
 @import './responsive-settings.css';
+@import './config-settings.css';

src/styles/template-config.css

@@ -1,31 +1,57 @@
-.template-config-section { display: grid; gap: 20px; min-width: 0; margin-top: 20px; }
+.template-config-section { display: grid; gap: 18px; min-width: 0; margin-top: 20px; }
 .template-config-section[hidden], .template-config-card[hidden] { display: none; }
-.template-config-card { min-width: 0; padding: 22px; border: 1px solid var(--border-color, #dce5ee); border-radius: 14px; background: var(--bg-card, #fff); }
-.template-config-heading h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; }
-.template-config-heading p, .template-config-field small { color: var(--text-secondary, #586779); line-height: 1.65; overflow-wrap: anywhere; }
-.template-config-heading p { margin: 9px 0 0; font-size: 13px; }
-.template-config-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; margin-top: 20px; }
+.template-config-card { min-width: 0; padding: 20px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); scroll-margin-top: 18px; transition: border-color 150ms ease, box-shadow 150ms ease; }
+.template-config-card-dirty { border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color)); box-shadow: inset 3px 0 0 var(--primary-color); }
+.template-config-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
+.template-config-heading-main { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 0; }
+.template-config-heading h3 { min-width: 0; margin: 0; color: var(--text-primary); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
+.template-config-restart-hint { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
+.template-config-restart-hint svg { flex: none; }
+.template-config-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); align-items: start; gap: 18px 22px; margin-top: 18px; }
 .template-config-field { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
 .template-config-field-wide { grid-column: 1 / -1; }
-.template-config-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-weight: 600; font-size: 13px; width: 100%; min-width: 0; }
-.template-config-label label { overflow-wrap: anywhere; }
-.template-config-origin { font-size: 10px; font-weight: 400; color: var(--text-secondary, #64748b); border: 1px solid var(--border-color, #dce5ee); padding: 2px 6px; border-radius: 6px; }
-.template-config-origin-dirty { color: var(--primary-color, #087e79); border-color: currentColor; }
+.template-config-field-dirty > .template-config-label { color: var(--primary-color); }
+.template-config-field-dirty .config-network-input, .template-config-field-dirty .template-config-custom { border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-primary)); }
+.template-config-label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; line-height: 1.5; width: 100%; min-width: 0; color: var(--text-primary); }
+.template-config-label label, .template-config-label > span:first-child { overflow-wrap: anywhere; }
+.template-config-label-tools { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
 .template-config-control { min-width: 0; width: 100%; }
+.template-config-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; gap: 8px 12px; min-height: 38px; }
+.template-config-toggle > .template-config-label { grid-column: 1; }
+.template-config-toggle > .template-config-control { grid-column: 2; grid-row: 1; width: auto; }
+.template-config-toggle > small { grid-column: 1 / -1; }
+.template-config-switch input:checked + .switch-track { border-color: var(--primary-color); background: var(--primary-color); }
+.template-config-switch input:focus-visible + .switch-track { outline: 2px solid var(--primary-color); outline-offset: 3px; }
 .template-config-directory { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
 .template-config-directory > input { flex: 1 1 180px; min-width: 0; width: auto; }
 .template-config-directory > button { flex: 0 1 auto; white-space: normal; }
-.template-config-custom { width: 100%; min-width: 0; border: 1px solid var(--border-color); border-radius: 9px; padding: 10px 12px; box-sizing: border-box; }
+.template-config-custom { width: 100%; min-width: 0; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; background: var(--bg-card); box-sizing: border-box; }
 .template-config-custom > summary { cursor: pointer; color: var(--primary-color); font-size: 12px; }
 .template-config-custom[open] > summary { margin-bottom: 14px; }
 .template-config-control > input, .template-config-control > select, .template-config-control > textarea { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
+.template-config-control .config-network-input { border-color: var(--border-primary); background: var(--bg-card); color: var(--text-primary); }
+.template-config-control .config-network-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--ui-focus-ring); }
+.template-config-control .config-network-input[aria-invalid='true'] { border-color: var(--danger-color); }
 .template-config-textarea { resize: vertical; line-height: 1.6; padding: 10px 12px; font-family: inherit; }
 .template-config-control > textarea.template-config-textarea { height: auto; min-height: 86px; padding: 10px 12px; }
-.template-config-reset { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: var(--primary-color, #087e79); cursor: pointer; font-size: 11px; }
+.template-config-field > small { font-size: 12px; line-height: 1.6; }
+.template-config-reset { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-tertiary); cursor: pointer; }
+.template-config-reset svg { flex: none; }
+.template-config-reset:hover:not(:disabled) { background: var(--bg-hover); color: var(--primary-color); }
 .template-config-reset:disabled { opacity: .5; cursor: default; }
-.template-config-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color, #dce5ee); }
-.template-config-actions > span { font-size: 12px; color: var(--text-secondary, #64748b); }
+.template-config-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); }
+.template-config-actions > span { min-width: 0; font-size: 12px; color: var(--text-tertiary); overflow-wrap: anywhere; }
+.template-config-actions > .template-config-action-status-dirty { color: var(--primary-color); font-weight: 600; }
+.template-config-actions > .template-config-action-status-saved { color: var(--success-color); }
 .template-config-actions > div { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
-.template-config-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--border-color, #dce5ee); border-radius: 10px; overflow-wrap: anywhere; font-size: 13px; }
-.template-config-error, .template-config-field small.template-config-error { color: var(--danger-color, #c0392b); overflow-wrap: anywhere; }
-@media (max-width: 680px) { .template-config-card { padding: 16px; } .template-config-actions > div { width: 100%; } .template-config-actions button { flex: 1 1 auto; white-space: normal; } }
+.template-config-card .compact-button { margin-top: 0; min-height: 36px; }
+.template-config-card :is(button, summary):focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
+.template-config-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-secondary); overflow-wrap: anywhere; font-size: 13px; }
+.template-config-error, .template-config-field small.template-config-error { color: var(--danger-color); overflow-wrap: anywhere; }
+@media (max-width: 680px) {
+  .template-config-card { padding: 16px; }
+  .template-config-heading-main { flex-basis: 180px; }
+  .template-config-actions > div { width: 100%; }
+  .template-config-actions button { flex: 1 1 auto; white-space: normal; }
+}
+@media (prefers-reduced-motion: reduce) { .template-config-card { transition: none; } }