🐛 fix(settings): 修正更新通道说明与控件对齐

- 按 latest 和 dev 通道显示对应的稳定版或开发版说明 - 统一更新通道与检查间隔控件宽度及右侧对齐 - 补充六种语言文案和设置中心回归测试
2026-08-09 16:23:27 +08:00 · 2026-07-23 10:23:14 +08:00
parent 5e71ad0090
commit 93b2bfef69
10 changed files with 68 additions and 9 deletions
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1389,7 +1389,14 @@ body[data-theme='dark'] .gonavi-ai-mcp-disclosure > summary:hover {
  }
 }

+body .gonavi-about-pane {
+  --gn-about-update-control-width: 200px;
+}
+
 body .gonavi-about-update-channel.ant-segmented.ant-segmented {
+  width: var(--gn-about-update-control-width);
+  max-width: 100%;
+  justify-self: end;
  height: var(--gn-control-height, 32px) !important;
  padding: 2px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
@@ -1398,17 +1405,25 @@ body .gonavi-about-update-channel.ant-segmented.ant-segmented {
  box-shadow: none !important;
 }

+body .gonavi-about-auto-check-interval.ant-select {
+  width: var(--gn-about-update-control-width);
+  max-width: 100%;
+  justify-self: end;
+}
+
 body .gonavi-about-update-channel .ant-segmented-group {
  gap: 3px;
 }

 body .gonavi-about-update-channel .ant-segmented-item {
+  flex: 1 1 0;
+  min-width: 0;
  border-radius: 4px !important;
 }

 body .gonavi-about-update-channel .ant-segmented-item-label {
  min-height: calc(var(--gn-control-height, 32px) - 4px) !important;
-  padding: 0 10px !important;
+  padding: 0 8px !important;
  color: rgba(15, 23, 42, 0.62) !important;
  font-size: var(--gn-font-size-sm, 12px) !important;
  font-weight: 600 !important;
--- a/frontend/src/App.settings-center.test.ts
+++ b/frontend/src/App.settings-center.test.ts
@@ -259,11 +259,30 @@ describe('settings center layout', () => {
    expect(appSource).toContain("[t('app.about.version.package_type'), t(`app.about.package_type.${packageType}`)]");
    expect(appSource).toContain('className="gonavi-about-update-channel"');
    expect(appSource).toContain('<Segmented');
+    expect(appSource).toContain("t('app.about.version_update.channel_hint.latest')");
+    expect(appSource).toContain("t('app.about.version_update.channel_hint.dev')");
+    expect(appSource).not.toContain("t('app.about.version_update.channel_hint')");
+    expect(appSource).toMatch(/updateChannel === 'dev'\s*\? t\('app\.about\.version_update\.channel_hint\.dev'\)\s*: t\('app\.about\.version_update\.channel_hint\.latest'\)/s);
+    expect(appCssSource).toMatch(/\.gonavi-about-pane\s*\{[^}]*--gn-about-update-control-width:\s*200px;/s);
+    expect(appCssSource).toMatch(/\.gonavi-about-update-channel\.ant-segmented\.ant-segmented\s*\{[^}]*width:\s*var\(--gn-about-update-control-width\);/s);
+    expect(appCssSource).toMatch(/\.gonavi-about-update-channel\.ant-segmented\.ant-segmented\s*\{[^}]*max-width:\s*100%;/s);
+    expect(appCssSource).toMatch(/\.gonavi-about-update-channel\.ant-segmented\.ant-segmented\s*\{[^}]*justify-self:\s*end;/s);
+    expect(appCssSource).toMatch(/\.gonavi-about-update-channel \.ant-segmented-item\s*\{[^}]*flex:\s*1 1 0;/s);
    expect(appSource).toContain("t('app.about.field.auto_check_updates')");
    expect(appSource).toContain("t('app.about.field.auto_check_interval')");
    expect(appSource).toContain("t('app.about.version_update.auto_check_hint')");
    expect(appSource).toContain("t('app.about.version_update.auto_check_disabled_hint')");
    expect(appSource).toContain('className="gonavi-about-auto-check-interval"');
+    const autoCheckIntervalSelectStart = aboutPaneSource.indexOf('className="gonavi-about-auto-check-interval"');
+    const autoCheckIntervalSelectSource = aboutPaneSource.slice(
+      autoCheckIntervalSelectStart,
+      aboutPaneSource.indexOf('/>', autoCheckIntervalSelectStart),
+    );
+    expect(autoCheckIntervalSelectStart).toBeGreaterThan(-1);
+    expect(autoCheckIntervalSelectSource).not.toContain("width: '100%'");
+    expect(appCssSource).toMatch(/\.gonavi-about-auto-check-interval\.ant-select\s*\{[^}]*width:\s*var\(--gn-about-update-control-width\);/s);
+    expect(appCssSource).toMatch(/\.gonavi-about-auto-check-interval\.ant-select\s*\{[^}]*max-width:\s*100%;/s);
+    expect(appCssSource).toMatch(/\.gonavi-about-auto-check-interval\.ant-select\s*\{[^}]*justify-self:\s*end;/s);
    expect(appSource).toContain('checked={autoCheckForUpdates}');
    expect(appSource).toContain('setAutoCheckForUpdates(checked)');
    expect(appSource).toContain('setAutoCheckForUpdatesIntervalMinutes(Number(value))');
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5046,7 +5046,11 @@ function App() {
                                    style={{ flexShrink: 0 }}
                                  />
                              </div>
-                              <div style={{ ...utilityMutedTextStyle, lineHeight: 1.55, maxWidth: 360 }}>{t('app.about.version_update.channel_hint')}</div>
+                              <div style={{ ...utilityMutedTextStyle, lineHeight: 1.55, maxWidth: 360 }}>
+                                  {updateChannel === 'dev'
+                                      ? t('app.about.version_update.channel_hint.dev')
+                                      : t('app.about.version_update.channel_hint.latest')}
+                              </div>
                              <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', alignItems: 'center', gap: 16, marginTop: 10 }}>
                                  <div style={{ fontSize: 15, fontWeight: 600, color: overlayTheme.titleText, whiteSpace: 'nowrap' }}>{t('app.about.field.auto_check_updates')}</div>
                                  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
@@ -5070,7 +5074,6 @@ function App() {
                                                : t('app.about.auto_check_interval.minutes', { minutes }),
                                            }))}
                                            onChange={(value) => setAutoCheckForUpdatesIntervalMinutes(Number(value))}
-                                            style={{ width: '100%' }}
                                          />
                                      </div>
                                      <div style={{ ...utilityMutedTextStyle, lineHeight: 1.55, maxWidth: 360 }}>{t('app.about.version_update.auto_check_hint')}</div>
--- a/frontend/src/i18n/catalog.test.ts
+++ b/frontend/src/i18n/catalog.test.ts
@@ -151,6 +151,22 @@ describe("i18n catalog", () => {
    }
  });

+  it("keeps latest and dev update channel descriptions distinct", () => {
+    const latestHintKey = "app.about.version_update.channel_hint.latest";
+    const devHintKey = "app.about.version_update.channel_hint.dev";
+
+    for (const language of SUPPORTED_LANGUAGES) {
+      expect(catalogs[language]).toHaveProperty(latestHintKey);
+      expect(catalogs[language]).toHaveProperty(devHintKey);
+      expect(catalogs[language][latestHintKey]).toBeTruthy();
+      expect(catalogs[language][devHintKey]).toBeTruthy();
+      expect(catalogs[language][latestHintKey]).not.toBe(catalogs[language][devHintKey]);
+    }
+
+    expect(catalogs["zh-CN"][latestHintKey]).toBe("接收最新的稳定版本");
+    expect(catalogs["zh-CN"][devHintKey]).toBe("接收最新的开发版本");
+  });
+
  it("includes App shell keys required by every supported language", () => {
    const appShellKeys = [
      "app.tools.title",
--- a/shared/i18n/de-DE.json
+++ b/shared/i18n/de-DE.json
@@ -2502,7 +2502,8 @@
  "app.about.version_update.available": "Update verfügbar",
  "app.about.version_update.auto_check_disabled_hint": "Wenn deaktiviert, werden Updates nur über die manuelle Aktion „Nach Updates suchen“ geprüft",
  "app.about.version_update.auto_check_hint": "Beim Start und im gewählten Intervall im Hintergrund nach Updates suchen",
-  "app.about.version_update.channel_hint": "Neueste Entwicklungsversion erhalten",
+  "app.about.version_update.channel_hint.dev": "Neueste Entwicklungsversion erhalten",
+  "app.about.version_update.channel_hint.latest": "Neueste stabile Version erhalten",
  "app.about.version_update.title": "Version und Updates",
  "app.about.version_update.up_to_date": "Auf dem neuesten Stand",
  "app.ai_panel.action.close": "Panel schließen",
--- a/shared/i18n/en-US.json
+++ b/shared/i18n/en-US.json
@@ -2502,7 +2502,8 @@
  "app.about.version_update.available": "Update available",
  "app.about.version_update.auto_check_disabled_hint": "When off, updates are only checked via the manual Check for Updates action",
  "app.about.version_update.auto_check_hint": "Check for updates in the background on startup and at the selected interval",
-  "app.about.version_update.channel_hint": "Receive the latest development build",
+  "app.about.version_update.channel_hint.dev": "Receive the latest development build",
+  "app.about.version_update.channel_hint.latest": "Receive the latest stable release",
  "app.about.version_update.title": "Version and Updates",
  "app.about.version_update.up_to_date": "Up to date",
  "app.ai_panel.action.close": "Close Panel",
--- a/shared/i18n/ja-JP.json
+++ b/shared/i18n/ja-JP.json
@@ -2502,7 +2502,8 @@
  "app.about.version_update.available": "利用可能な更新があります",
  "app.about.version_update.auto_check_disabled_hint": "オフの場合、手動の「更新を確認」でのみ新バージョンを取得します",
  "app.about.version_update.auto_check_hint": "起動後にバックグラウンドで確認し、設定した間隔で繰り返し確認します",
-  "app.about.version_update.channel_hint": "最新の開発版を受け取る",
+  "app.about.version_update.channel_hint.dev": "最新の開発版を受け取る",
+  "app.about.version_update.channel_hint.latest": "最新の安定版を受け取る",
  "app.about.version_update.title": "バージョンと更新",
  "app.about.version_update.up_to_date": "最新です",
  "app.ai_panel.action.close": "パネルを閉じる",
--- a/shared/i18n/ru-RU.json
+++ b/shared/i18n/ru-RU.json
@@ -2502,7 +2502,8 @@
  "app.about.version_update.available": "Доступно обновление",
  "app.about.version_update.auto_check_disabled_hint": "При отключении обновления проверяются только вручную через «Проверить обновления»",
  "app.about.version_update.auto_check_hint": "Проверять обновления в фоне при запуске и с выбранным интервалом",
-  "app.about.version_update.channel_hint": "Получать последнюю dev-версию",
+  "app.about.version_update.channel_hint.dev": "Получать последнюю dev-версию",
+  "app.about.version_update.channel_hint.latest": "Получать последнюю стабильную версию",
  "app.about.version_update.title": "Версия и обновления",
  "app.about.version_update.up_to_date": "Актуально",
  "app.ai_panel.action.close": "Закрыть панель",
--- a/shared/i18n/zh-CN.json
+++ b/shared/i18n/zh-CN.json
@@ -2502,7 +2502,8 @@
  "app.about.version_update.available": "有可用更新",
  "app.about.version_update.auto_check_disabled_hint": "关闭后仅可通过手动「检查更新」获取新版本",
  "app.about.version_update.auto_check_hint": "启动后在后台检查，并按设定间隔重复检查",
-  "app.about.version_update.channel_hint": "接收最新的开发版本",
+  "app.about.version_update.channel_hint.dev": "接收最新的开发版本",
+  "app.about.version_update.channel_hint.latest": "接收最新的稳定版本",
  "app.about.version_update.title": "版本与更新",
  "app.about.version_update.up_to_date": "当前已是最新",
  "app.ai_panel.action.close": "关闭面板",
--- a/shared/i18n/zh-TW.json
+++ b/shared/i18n/zh-TW.json
@@ -2502,7 +2502,8 @@
  "app.about.version_update.available": "有可用更新",
  "app.about.version_update.auto_check_disabled_hint": "關閉後僅可透過手動「檢查更新」取得新版本",
  "app.about.version_update.auto_check_hint": "啟動後在背景檢查，並依設定間隔重複檢查",
-  "app.about.version_update.channel_hint": "接收最新的開發版本",
+  "app.about.version_update.channel_hint.dev": "接收最新的開發版本",
+  "app.about.version_update.channel_hint.latest": "接收最新的穩定版本",
  "app.about.version_update.title": "版本與更新",
  "app.about.version_update.up_to_date": "目前已是最新",
  "app.ai_panel.action.close": "關閉面板",