From b5344a7586c5f09b255dbc93d5af076f8a35d166 Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Fri, 19 Jun 2026 01:03:03 +0800
Subject: [PATCH] refactor(config): flatten advanced section and card-style
 simple-mode fields

- Drop the inner Collapsible in the advanced section; surface Plugins and Antigravity Signature as labeled sub-groups instead of a nested disclosure
- Wrap bare simple-mode inputs in .simpleField cards for visual consistency with toggle rows and API-key blocks
---
 .../config/VisualConfigEditor.module.scss     |   8 +
 src/components/config/VisualConfigEditor.tsx  | 326 +++++++++---------
 src/i18n/locales/en.json                      |   3 +-
 src/i18n/locales/ru.json                      |   3 +-
 src/i18n/locales/zh-CN.json                   |   3 +-
 src/i18n/locales/zh-TW.json                   |   3 +-
 6 files changed, 185 insertions(+), 161 deletions(-)

diff --git a/src/components/config/VisualConfigEditor.module.scss b/src/components/config/VisualConfigEditor.module.scss
index 2c998e16..254ae277 100644
--- a/src/components/config/VisualConfigEditor.module.scss
+++ b/src/components/config/VisualConfigEditor.module.scss
@@ -227,6 +227,14 @@
   min-width: 0;
 }
 
+// Wrap bare inputs so they read as cards consistent with toggleRow / API key blocks.
+.simpleField {
+  padding: 14px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: transparent;
+}
+
 .simpleBanner {
   display: flex;
   align-items: center;
diff --git a/src/components/config/VisualConfigEditor.tsx b/src/components/config/VisualConfigEditor.tsx
index ff1070d9..179a1d07 100644
--- a/src/components/config/VisualConfigEditor.tsx
+++ b/src/components/config/VisualConfigEditor.tsx
@@ -539,9 +539,7 @@ export function VisualConfigEditor({
           >
             <button
               type="button"
-              className={`${styles.modeButton} ${
-                mode === 'simple' ? styles.modeButtonActive : ''
-              }`}
+              className={`${styles.modeButton} ${mode === 'simple' ? styles.modeButtonActive : ''}`}
               onClick={() => handleModeChange('simple')}
               aria-pressed={mode === 'simple'}
             >
@@ -586,9 +584,9 @@ export function VisualConfigEditor({
           ) : null}
 
           <div className={styles.simpleForm}>
-            {portField}
+            <div className={styles.simpleField}>{portField}</div>
             {apiKeysField}
-            {proxyUrlField}
+            <div className={styles.simpleField}>{proxyUrlField}</div>
             {debugToggle}
             {loggingToFileToggle}
             {quotaSwitchProjectToggle}
@@ -724,7 +722,9 @@ export function VisualConfigEditor({
                     <SectionGrid>
                       <ToggleRow
                         title={t('config_management.visual.sections.remote.allow_remote')}
-                        description={t('config_management.visual.sections.remote.allow_remote_desc')}
+                        description={t(
+                          'config_management.visual.sections.remote.allow_remote_desc'
+                        )}
                         checked={values.rmAllowRemote}
                         disabled={disabled}
                         onChange={(rmAllowRemote) => onChange({ rmAllowRemote })}
@@ -889,7 +889,9 @@ export function VisualConfigEditor({
                     value={values.gptImage2BaseModel}
                     onChange={(e) => onChange({ gptImage2BaseModel: e.target.value })}
                     disabled={disabled}
-                    hint={t('config_management.visual.sections.network.gpt_image_2_base_model_hint')}
+                    hint={t(
+                      'config_management.visual.sections.network.gpt_image_2_base_model_hint'
+                    )}
                   />
                   <Input
                     label={t('config_management.visual.sections.network.session_affinity_ttl')}
@@ -921,7 +923,9 @@ export function VisualConfigEditor({
                   />
                   <ToggleRow
                     title={t('config_management.visual.sections.network.disable_cooling')}
-                    description={t('config_management.visual.sections.network.disable_cooling_desc')}
+                    description={t(
+                      'config_management.visual.sections.network.disable_cooling_desc'
+                    )}
                     checked={values.disableCooling}
                     disabled={disabled}
                     onChange={(disableCooling) => onChange({ disableCooling })}
@@ -940,7 +944,9 @@ export function VisualConfigEditor({
                     onChange={(wsAuth) => onChange({ wsAuth })}
                   />
                   <ToggleRow
-                    title={t('config_management.visual.sections.network.enable_gemini_cli_endpoint')}
+                    title={t(
+                      'config_management.visual.sections.network.enable_gemini_cli_endpoint'
+                    )}
                     description={t(
                       'config_management.visual.sections.network.enable_gemini_cli_endpoint_desc'
                     )}
@@ -1153,50 +1159,57 @@ export function VisualConfigEditor({
               title={t('config_management.visual.sections.advanced.title')}
               description={t('config_management.visual.sections.advanced.description')}
             >
-              <Collapsible
-                label={t('config_management.visual.sections.advanced.disclosure')}
-                defaultOpen={false}
-              >
-                <SectionStack>
-                  <SectionGrid>
-                    <ToggleRow
-                      title={t('config_management.visual.sections.system.plugins_enabled')}
-                      description={t('config_management.visual.sections.system.plugins_enabled_desc')}
-                      checked={values.pluginsEnabled}
-                      disabled={disabled}
-                      onChange={(pluginsEnabled) => onChange({ pluginsEnabled })}
-                    />
-                  </SectionGrid>
-
-                  <SectionSubsection
-                    title={t('config_management.visual.sections.system.plugin_store_sources')}
-                    description={t(
-                      'config_management.visual.sections.system.plugin_store_sources_desc'
-                    )}
-                  >
-                    <div className={styles.fieldShell}>
-                      <label className={styles.fieldLabel}>
-                        {t('config_management.visual.sections.system.plugin_store_sources_label')}
-                      </label>
-                      <StringListEditor
-                        value={values.pluginStoreSources}
+              <SectionStack>
+                <Collapsible
+                  label={t('config_management.visual.sections.advanced.plugins_title')}
+                  defaultOpen={false}
+                >
+                  <SectionStack>
+                    <SectionGrid>
+                      <ToggleRow
+                        title={t('config_management.visual.sections.system.plugins_enabled')}
+                        description={t(
+                          'config_management.visual.sections.system.plugins_enabled_desc'
+                        )}
+                        checked={values.pluginsEnabled}
                         disabled={disabled}
-                        placeholder={t(
-                          'config_management.visual.sections.system.plugin_store_sources_placeholder'
-                        )}
-                        inputAriaLabel={t(
-                          'config_management.visual.sections.system.plugin_store_sources_label'
-                        )}
-                        onChange={handlePluginStoreSourcesChange}
+                        onChange={(pluginsEnabled) => onChange({ pluginsEnabled })}
                       />
-                      <div className={styles.fieldHint}>
-                        {t('config_management.visual.sections.system.plugin_store_sources_hint')}
+                    </SectionGrid>
+
+                    <SectionSubsection
+                      title={t('config_management.visual.sections.system.plugin_store_sources')}
+                      description={t(
+                        'config_management.visual.sections.system.plugin_store_sources_desc'
+                      )}
+                    >
+                      <div className={styles.fieldShell}>
+                        <label className={styles.fieldLabel}>
+                          {t('config_management.visual.sections.system.plugin_store_sources_label')}
+                        </label>
+                        <StringListEditor
+                          value={values.pluginStoreSources}
+                          disabled={disabled}
+                          placeholder={t(
+                            'config_management.visual.sections.system.plugin_store_sources_placeholder'
+                          )}
+                          inputAriaLabel={t(
+                            'config_management.visual.sections.system.plugin_store_sources_label'
+                          )}
+                          onChange={handlePluginStoreSourcesChange}
+                        />
+                        <div className={styles.fieldHint}>
+                          {t('config_management.visual.sections.system.plugin_store_sources_hint')}
+                        </div>
                       </div>
-                    </div>
-                  </SectionSubsection>
-
-                  <Divider />
+                    </SectionSubsection>
+                  </SectionStack>
+                </Collapsible>
 
+                <Collapsible
+                  label={t('config_management.visual.sections.advanced.signature_title')}
+                  defaultOpen={false}
+                >
                   <SectionGrid>
                     <ToggleRow
                       title={t(
@@ -1225,115 +1238,114 @@ export function VisualConfigEditor({
                       }
                     />
                   </SectionGrid>
+                </Collapsible>
 
-                  <Divider />
-
-                  <SectionSubsection
-                    title={t('config_management.visual.sections.headers.title')}
-                    description={t('config_management.visual.sections.headers.description')}
-                  >
-                    <SectionStack>
-                      <div className={styles.subsectionHeader}>
-                        <h3 className={styles.subsectionTitle}>
-                          {t('config_management.visual.sections.headers.claude_title')}
-                        </h3>
-                      </div>
-                      <SectionGrid>
-                        <Input
-                          label={t('config_management.visual.sections.headers.user_agent')}
-                          placeholder="claude-cli/2.1.44 (external, sdk-cli)"
-                          value={values.claudeHeaderUserAgent}
-                          onChange={(e) => onChange({ claudeHeaderUserAgent: e.target.value })}
-                          disabled={disabled}
-                        />
-                        <Input
-                          label={t('config_management.visual.sections.headers.package_version')}
-                          placeholder="0.74.0"
-                          value={values.claudeHeaderPackageVersion}
-                          onChange={(e) => onChange({ claudeHeaderPackageVersion: e.target.value })}
-                          disabled={disabled}
-                        />
-                        <Input
-                          label={t('config_management.visual.sections.headers.runtime_version')}
-                          placeholder="v24.3.0"
-                          value={values.claudeHeaderRuntimeVersion}
-                          onChange={(e) => onChange({ claudeHeaderRuntimeVersion: e.target.value })}
-                          disabled={disabled}
-                        />
-                        <Input
-                          label={t('config_management.visual.sections.headers.os')}
-                          placeholder="MacOS"
-                          value={values.claudeHeaderOs}
-                          onChange={(e) => onChange({ claudeHeaderOs: e.target.value })}
-                          disabled={disabled}
-                        />
-                        <Input
-                          label={t('config_management.visual.sections.headers.arch')}
-                          placeholder="arm64"
-                          value={values.claudeHeaderArch}
-                          onChange={(e) => onChange({ claudeHeaderArch: e.target.value })}
-                          disabled={disabled}
-                        />
-                        <Input
-                          label={t('config_management.visual.sections.headers.timeout')}
-                          placeholder="600"
-                          value={values.claudeHeaderTimeout}
-                          onChange={(e) => onChange({ claudeHeaderTimeout: e.target.value })}
-                          disabled={disabled}
-                        />
-                      </SectionGrid>
-                      <SectionGrid>
-                        <ToggleRow
-                          title={t('config_management.visual.sections.headers.stabilize_device')}
-                          description={t(
-                            'config_management.visual.sections.headers.stabilize_device_desc'
-                          )}
-                          checked={values.claudeHeaderStabilizeDeviceProfile}
-                          disabled={disabled}
-                          onChange={(claudeHeaderStabilizeDeviceProfile) =>
-                            onChange({ claudeHeaderStabilizeDeviceProfile })
-                          }
-                        />
-                      </SectionGrid>
-                      <Divider />
-                      <div className={styles.subsectionHeader}>
-                        <h3 className={styles.subsectionTitle}>
-                          {t('config_management.visual.sections.headers.codex_title')}
-                        </h3>
-                      </div>
-                      <SectionGrid>
-                        <Input
-                          label={t('config_management.visual.sections.headers.user_agent')}
-                          placeholder="codex_cli_rs/0.114.0 (Mac OS 14.2.0; x86_64) vscode/1.111.0"
-                          value={values.codexHeaderUserAgent}
-                          onChange={(e) => onChange({ codexHeaderUserAgent: e.target.value })}
-                          disabled={disabled}
-                        />
-                        <Input
-                          label={t('config_management.visual.sections.headers.beta_features')}
-                          placeholder="multi_agent"
-                          value={values.codexHeaderBetaFeatures}
-                          onChange={(e) => onChange({ codexHeaderBetaFeatures: e.target.value })}
-                          disabled={disabled}
-                        />
-                      </SectionGrid>
-                      <SectionGrid>
-                        <ToggleRow
-                          title={t(
-                            'config_management.visual.sections.headers.codex_identity_confuse'
-                          )}
-                          description={t(
-                            'config_management.visual.sections.headers.codex_identity_confuse_desc'
-                          )}
-                          checked={values.codexIdentityConfuse}
-                          disabled={disabled}
-                          onChange={(codexIdentityConfuse) => onChange({ codexIdentityConfuse })}
-                        />
-                      </SectionGrid>
-                    </SectionStack>
-                  </SectionSubsection>
-                </SectionStack>
-              </Collapsible>
+                <Collapsible
+                  label={t('config_management.visual.sections.headers.title')}
+                  hint={t('config_management.visual.sections.headers.description')}
+                  defaultOpen={false}
+                >
+                  <SectionStack>
+                    <div className={styles.subsectionHeader}>
+                      <h3 className={styles.subsectionTitle}>
+                        {t('config_management.visual.sections.headers.claude_title')}
+                      </h3>
+                    </div>
+                    <SectionGrid>
+                      <Input
+                        label={t('config_management.visual.sections.headers.user_agent')}
+                        placeholder="claude-cli/2.1.44 (external, sdk-cli)"
+                        value={values.claudeHeaderUserAgent}
+                        onChange={(e) => onChange({ claudeHeaderUserAgent: e.target.value })}
+                        disabled={disabled}
+                      />
+                      <Input
+                        label={t('config_management.visual.sections.headers.package_version')}
+                        placeholder="0.74.0"
+                        value={values.claudeHeaderPackageVersion}
+                        onChange={(e) => onChange({ claudeHeaderPackageVersion: e.target.value })}
+                        disabled={disabled}
+                      />
+                      <Input
+                        label={t('config_management.visual.sections.headers.runtime_version')}
+                        placeholder="v24.3.0"
+                        value={values.claudeHeaderRuntimeVersion}
+                        onChange={(e) => onChange({ claudeHeaderRuntimeVersion: e.target.value })}
+                        disabled={disabled}
+                      />
+                      <Input
+                        label={t('config_management.visual.sections.headers.os')}
+                        placeholder="MacOS"
+                        value={values.claudeHeaderOs}
+                        onChange={(e) => onChange({ claudeHeaderOs: e.target.value })}
+                        disabled={disabled}
+                      />
+                      <Input
+                        label={t('config_management.visual.sections.headers.arch')}
+                        placeholder="arm64"
+                        value={values.claudeHeaderArch}
+                        onChange={(e) => onChange({ claudeHeaderArch: e.target.value })}
+                        disabled={disabled}
+                      />
+                      <Input
+                        label={t('config_management.visual.sections.headers.timeout')}
+                        placeholder="600"
+                        value={values.claudeHeaderTimeout}
+                        onChange={(e) => onChange({ claudeHeaderTimeout: e.target.value })}
+                        disabled={disabled}
+                      />
+                    </SectionGrid>
+                    <SectionGrid>
+                      <ToggleRow
+                        title={t('config_management.visual.sections.headers.stabilize_device')}
+                        description={t(
+                          'config_management.visual.sections.headers.stabilize_device_desc'
+                        )}
+                        checked={values.claudeHeaderStabilizeDeviceProfile}
+                        disabled={disabled}
+                        onChange={(claudeHeaderStabilizeDeviceProfile) =>
+                          onChange({ claudeHeaderStabilizeDeviceProfile })
+                        }
+                      />
+                    </SectionGrid>
+                    <Divider />
+                    <div className={styles.subsectionHeader}>
+                      <h3 className={styles.subsectionTitle}>
+                        {t('config_management.visual.sections.headers.codex_title')}
+                      </h3>
+                    </div>
+                    <SectionGrid>
+                      <Input
+                        label={t('config_management.visual.sections.headers.user_agent')}
+                        placeholder="codex_cli_rs/0.114.0 (Mac OS 14.2.0; x86_64) vscode/1.111.0"
+                        value={values.codexHeaderUserAgent}
+                        onChange={(e) => onChange({ codexHeaderUserAgent: e.target.value })}
+                        disabled={disabled}
+                      />
+                      <Input
+                        label={t('config_management.visual.sections.headers.beta_features')}
+                        placeholder="multi_agent"
+                        value={values.codexHeaderBetaFeatures}
+                        onChange={(e) => onChange({ codexHeaderBetaFeatures: e.target.value })}
+                        disabled={disabled}
+                      />
+                    </SectionGrid>
+                    <SectionGrid>
+                      <ToggleRow
+                        title={t(
+                          'config_management.visual.sections.headers.codex_identity_confuse'
+                        )}
+                        description={t(
+                          'config_management.visual.sections.headers.codex_identity_confuse_desc'
+                        )}
+                        checked={values.codexIdentityConfuse}
+                        disabled={disabled}
+                        onChange={(codexIdentityConfuse) => onChange({ codexIdentityConfuse })}
+                      />
+                    </SectionGrid>
+                  </SectionStack>
+                </Collapsible>
+              </SectionStack>
             </ConfigSection>
 
             <ConfigSection
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 13a9c54a..cdf2ae14 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -929,7 +929,8 @@
         "advanced": {
           "title": "Advanced & Experimental",
           "description": "Header spoofing, signature cache, plugin sources, and other rarely changed settings",
-          "disclosure": "Show advanced & experimental settings (hidden by default)"
+          "plugins_title": "Plugins",
+          "signature_title": "Antigravity Signature"
         },
         "server": {
           "title": "Server Configuration",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index 41adcd84..d691bc3d 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -916,7 +916,8 @@
         "advanced": {
           "title": "Дополнительно и эксперименты",
           "description": "Подмена заголовков, кэш подписей, источники плагинов и другие редко изменяемые настройки",
-          "disclosure": "Показать дополнительные и экспериментальные настройки (скрыты по умолчанию)"
+          "plugins_title": "Плагины",
+          "signature_title": "Подпись Antigravity"
         },
         "server": {
           "title": "Настройки сервера",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 7a6f951e..9cafe6d1 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -929,7 +929,8 @@
         "advanced": {
           "title": "高级与实验",
           "description": "请求头伪装、签名缓存、插件源等不常修改的设置",
-          "disclosure": "展开高级与实验配置（默认隐藏）"
+          "plugins_title": "插件",
+          "signature_title": "Antigravity 签名"
         },
         "server": {
           "title": "服务器配置",
diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json
index 45be1a53..aea09558 100644
--- a/src/i18n/locales/zh-TW.json
+++ b/src/i18n/locales/zh-TW.json
@@ -955,7 +955,8 @@
         "advanced": {
           "title": "進階與實驗",
           "description": "請求標頭偽裝、簽章快取、外掛來源等不常修改的設定",
-          "disclosure": "展開進階與實驗設定（預設隱藏）"
+          "plugins_title": "外掛",
+          "signature_title": "Antigravity 簽章"
         },
         "server": {
           "title": "伺服器設定",