feat: persist channel routing mode immediately

linhay · linhay · commit 32c689ffb9f3 · 2026-05-26T23:21:37.000+08:00
diff --git a/frontend/src/features/channel-routing/components/ChannelRoutingWorkbench.tsx b/frontend/src/features/channel-routing/components/ChannelRoutingWorkbench.tsx
@@ -5,10 +5,8 @@ import {
   History,
   Play,
   RefreshCw,
-  Save,
   ShieldCheck,
   Shuffle,
-  SlidersHorizontal,
   Split,
   X,
   Zap,
@@ -45,7 +43,6 @@ interface ChannelRoutingWorkbenchProps {
   onModeChange: (mode: ChannelRouteMode) => void;
   onShadowEnabledChange: (enabled: boolean) => void;
   onShadowModeChange: (mode: ChannelRouteMode) => void;
-  onSave: () => void;
   onExplain: () => void;
   onRefreshEvents?: () => void;
 }
@@ -76,7 +73,6 @@ export default function ChannelRoutingWorkbench({
   onModeChange,
   onShadowEnabledChange,
   onShadowModeChange,
-  onSave,
   onExplain,
   onRefreshEvents,
 }: ChannelRoutingWorkbenchProps) {
@@ -85,7 +81,6 @@ export default function ChannelRoutingWorkbench({
   const legacyMask = buildLegacyRoutingMaskPanel();
   const eventSummaries = routeEvents.slice(0, 5).map((event) => buildChannelRouteAuditEventSummary(event));
   const hasExplain = explainView.hasExplain;
-  const routeModeLabel = resolveRouteModeLabel(config.routeMode);
   const shadowPanelLabel = config.shadowEnabled ? (hasExplain ? explainView.shadowLabel : '开启') : '关闭';
   const shadowPanelMeta = config.shadowEnabled && hasExplain ? explainView.shadowMeta : '';
   const participantRows = buildChannelRoutingParticipantRows(config, accounts);
@@ -114,53 +109,34 @@ export default function ChannelRoutingWorkbench({
       aria-label={`${channel} 请求模式`}
       className="overflow-hidden border-2 border-[var(--border-color)] bg-[var(--bg-main)]"
     >
-      <header className="flex flex-wrap items-center justify-between gap-3 p-4">
-        <div className="flex min-w-0 items-center gap-2">
-          <Zap className="h-4 w-4 shrink-0 text-[var(--text-secondary)]" strokeWidth={3} />
-          <h2 className="min-w-0 text-[length:var(--font-size-ui-lg)] font-black leading-5 tracking-[0] text-[var(--text-primary)] sm:text-[length:var(--font-size-heading-sm)] sm:leading-normal">
-            请求模式
-          </h2>
-          <button
-            type="button"
-            onClick={() => setHelpOpen(true)}
-            aria-label="查看请求模式说明"
-            title="查看请求模式说明"
-            aria-pressed={helpOpen}
-            className={`flex h-8 w-8 shrink-0 items-center justify-center border-2 transition-colors active:scale-95 ${
-              helpOpen
-                ? 'border-[var(--text-primary)] bg-[var(--text-primary)] text-[var(--bg-main)]'
-                : 'border-[var(--border-color)] bg-[var(--bg-main)] text-[var(--text-primary)] [@media(hover:hover)]:hover:border-[var(--text-primary)]'
-            }`}
-          >
-            <CircleHelp className="h-4 w-4" strokeWidth={4} />
-          </button>
-          {preview ? (
-            <span className="font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-wide text-[var(--text-muted)]">
-              预览
-            </span>
-          ) : null}
-        </div>
-        <button
-          type="button"
-          onClick={onSave}
-          disabled={disabled || saving}
-          className="btn-swiss flex min-h-10 items-center gap-2 !px-3 !py-2 !text-[length:var(--font-size-ui-sm)]"
-        >
-          <Save className="h-3.5 w-3.5" strokeWidth={4} />
-          {saving ? '保存中' : '保存'}
-        </button>
-      </header>
-
-      <div className="border-t-2 border-[var(--border-color)]">
-        <section className="min-w-0 p-4">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <SectionHeading icon={SlidersHorizontal} label="当前模式" />
-            <span className="font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-wide text-[var(--text-muted)]">
-              {routeModeLabel}
-            </span>
+      <header className="p-4">
+        <div className="flex min-w-0 flex-wrap items-center justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2">
+            <Zap className="h-4 w-4 shrink-0 text-[var(--text-secondary)]" strokeWidth={3} />
+            <h2 className="min-w-0 text-[length:var(--font-size-ui-lg)] font-black leading-5 tracking-[0] text-[var(--text-primary)] sm:text-[length:var(--font-size-heading-sm)] sm:leading-normal">
+              请求模式
+            </h2>
+            <button
+              type="button"
+              onClick={() => setHelpOpen(true)}
+              aria-label="查看请求模式说明"
+              title="查看请求模式说明"
+              aria-pressed={helpOpen}
+              className={`flex h-8 w-8 shrink-0 items-center justify-center border-2 transition-colors active:scale-95 ${
+                helpOpen
+                  ? 'border-[var(--text-primary)] bg-[var(--text-primary)] text-[var(--bg-main)]'
+                  : 'border-[var(--border-color)] bg-[var(--bg-main)] text-[var(--text-primary)] [@media(hover:hover)]:hover:border-[var(--text-primary)]'
+              }`}
+            >
+              <CircleHelp className="h-4 w-4" strokeWidth={4} />
+            </button>
+            {preview ? (
+              <span className="font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-wide text-[var(--text-muted)]">
+                预览
+              </span>
+            ) : null}
           </div>
-
-          <div className="mt-3 grid gap-2 sm:grid-cols-2">
+          <div className="grid min-w-0 flex-1 gap-2 sm:max-w-[28rem] sm:flex-none sm:grid-cols-2">
             {routeModes.map((item) => (
               <StrategyButton
                 key={item.mode}
@@ -169,13 +145,15 @@ export default function ChannelRoutingWorkbench({
                 label={item.label}
                 cue={item.cue}
                 active={config.routeMode === item.mode}
-                disabled={disabled}
+                disabled={disabled || saving}
                 onModeChange={onModeChange}
               />
             ))}
           </div>
-        </section>
+        </div>
+      </header>
 
+      <div className="border-t-2 border-[var(--border-color)]">
         <details className="group/participants min-w-0 border-t-2 border-[var(--border-color)] p-4">
           <summary className="flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden">
             <SectionHeading icon={Split} label="参与账号" />
@@ -381,14 +359,14 @@ function StrategyButton({
       onClick={() => onModeChange(mode)}
       disabled={disabled}
       aria-pressed={active}
-      className={`grid min-h-14 grid-cols-[1.75rem_minmax(0,1fr)_auto] items-center gap-3 border-2 px-3 py-2 text-left transition-colors active:scale-[0.98] ${
+      className={`grid min-h-10 grid-cols-[1.5rem_minmax(0,1fr)_auto] items-center gap-2 border-2 px-3 py-2 text-left transition-colors active:scale-[0.98] ${
         active
           ? 'border-[var(--text-primary)] bg-[var(--text-primary)] text-[var(--bg-main)]'
           : 'border-[var(--border-color)] bg-[var(--bg-main)] text-[var(--text-primary)] [@media(hover:hover)]:hover:border-[var(--text-primary)]'
       }`}
     >
-      <Icon className="h-4 w-4 shrink-0" strokeWidth={4} />
-      <span className="min-w-0 text-[length:var(--font-size-ui-md)] font-black">{label}</span>
+      <Icon className="h-3.5 w-3.5 shrink-0" strokeWidth={4} />
+      <span className="min-w-0 truncate text-[length:var(--font-size-ui-sm)] font-black">{label}</span>
       <span
         className={`min-w-0 truncate font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-wide ${
           active ? 'text-[var(--bg-main)]/75' : 'text-[var(--text-muted)]'
diff --git a/frontend/src/features/channel-routing/tests/channelRouting.test.mjs b/frontend/src/features/channel-routing/tests/channelRouting.test.mjs
@@ -441,3 +441,14 @@ test('ChannelRoutingWorkbench opens route mode help as a modal next to route mod
   assert.doesNotMatch(source, /返回模式/);
   assert.doesNotMatch(source, /view === 'help'/);
 });
+
+test('ChannelRoutingWorkbench keeps route mode toggles in the header and removes the save button', async () => {
+  const source = await readFile(new URL('../components/ChannelRoutingWorkbench.tsx', import.meta.url), 'utf8');
+
+  assert.match(source, /routeModes\.map/);
+  assert.match(source, /onModeChange\(mode\)/);
+  assert.match(source, /<header className="p-4">/);
+  assert.match(source, /grid min-w-0 flex-1 gap-2 sm:max-w-\[28rem\] sm:flex-none sm:grid-cols-2/);
+  assert.doesNotMatch(source, /\bonSave\b/);
+  assert.doesNotMatch(source, /\bSave\b/);
+});
diff --git a/frontend/src/features/claude-code/ClaudeCodeAccountListFeature.tsx b/frontend/src/features/claude-code/ClaudeCodeAccountListFeature.tsx
@@ -385,15 +385,17 @@ export default function ClaudeCodeAccountListFeature({ sidecarStatus }: ClaudeCo
     setDetailRowID(null);
   }
 
-  async function saveOrder() {
-    if (!ready || !orderDirty || saving) {
+  async function persistChannelRoutingConfig(
+    nextConfig: ChannelRoutingConfig,
+    options: { reloadAfterSave?: boolean } = {},
+  ) {
+    if (!ready || saving) {
       return;
     }
 
     setSaving(true);
     setMessage('');
     try {
-      const nextConfig = withCurrentChannelOrder(channelConfig, orderedRows.map((row) => row.id));
       if (!browserMode) {
         await trackRequest('SaveChannelRoutingConfig', { channel: 'claude', mode: nextConfig.routeMode }, () =>
           SaveChannelRoutingConfig(main.ChannelRoutingConfig.createFrom(nextConfig)),
@@ -403,8 +405,10 @@ export default function ClaudeCodeAccountListFeature({ sidecarStatus }: ClaudeCo
       setOrderDirty(false);
       if (browserMode) {
         setMessage(t('claude_code.account_list_preview_saved'));
-      } else {
+      } else if (options.reloadAfterSave) {
         await reload(t('claude_code.account_list_saved'));
+      } else {
+        setMessage('');
       }
     } catch (error) {
       console.error(error);
@@ -414,6 +418,15 @@ export default function ClaudeCodeAccountListFeature({ sidecarStatus }: ClaudeCo
     }
   }
 
+  async function saveOrder() {
+    if (!ready || !orderDirty || saving) {
+      return;
+    }
+
+    const nextConfig = withCurrentChannelOrder(channelConfig, orderedRows.map((row) => row.id));
+    await persistChannelRoutingConfig(nextConfig, { reloadAfterSave: !browserMode });
+  }
+
   useEffect(() => {
     if (!autoSaveOrderRequested || draggedID || saving) {
       return;
@@ -427,24 +440,30 @@ export default function ClaudeCodeAccountListFeature({ sidecarStatus }: ClaudeCo
   }, [autoSaveOrderRequested, channelConfig, draggedID, orderDirty, orderedRows, saving]);
 
   function updateChannelMode(mode: ChannelRouteMode) {
-    setChannelConfig((prev) => updateChannelRoutingConfig(prev, { routeMode: mode }));
-    setOrderDirty(true);
+    const nextConfig = withCurrentChannelOrder(
+      updateChannelRoutingConfig(channelConfig, { routeMode: mode }),
+      orderedRows.map((row) => row.id),
+    );
     setChannelExplain(null);
-    setMessage(t('claude_code.account_list_unsaved'));
+    void persistChannelRoutingConfig(nextConfig);
   }
 
   function updateShadowEnabled(enabled: boolean) {
-    setChannelConfig((prev) => updateChannelRoutingConfig(prev, { shadowEnabled: enabled }));
-    setOrderDirty(true);
+    const nextConfig = withCurrentChannelOrder(
+      updateChannelRoutingConfig(channelConfig, { shadowEnabled: enabled }),
+      orderedRows.map((row) => row.id),
+    );
     setChannelExplain(null);
-    setMessage(t('claude_code.account_list_unsaved'));
+    void persistChannelRoutingConfig(nextConfig);
   }
 
   function updateShadowMode(mode: ChannelRouteMode) {
-    setChannelConfig((prev) => updateChannelRoutingConfig(prev, { shadowRouteMode: mode }));
-    setOrderDirty(true);
+    const nextConfig = withCurrentChannelOrder(
+      updateChannelRoutingConfig(channelConfig, { shadowRouteMode: mode }),
+      orderedRows.map((row) => row.id),
+    );
     setChannelExplain(null);
-    setMessage(t('claude_code.account_list_unsaved'));
+    void persistChannelRoutingConfig(nextConfig);
   }
 
   async function runChannelExplain() {
@@ -763,7 +782,6 @@ export default function ClaudeCodeAccountListFeature({ sidecarStatus }: ClaudeCo
           onModeChange={updateChannelMode}
           onShadowEnabledChange={updateShadowEnabled}
           onShadowModeChange={updateShadowMode}
-          onSave={() => void saveOrder()}
           onExplain={() => void runChannelExplain()}
           onRefreshEvents={() => void loadChannelRouteEvents()}
         />
diff --git a/frontend/src/features/codex/CodexAccountListFeature.tsx b/frontend/src/features/codex/CodexAccountListFeature.tsx
@@ -518,15 +518,17 @@ export default function CodexAccountListFeature({ sidecarStatus }: CodexAccountL
     };
   }, []);
 
-  async function saveOrder() {
-    if (!ready || !orderChanged || saving) {
+  async function persistChannelRoutingConfig(
+    nextConfig: ChannelRoutingConfig,
+    options: { reloadAfterSave?: boolean } = {},
+  ) {
+    if (!ready || saving) {
       return;
     }
 
     setSaving(true);
     setMessage('');
     try {
-      const nextConfig = withCurrentChannelOrder(channelConfig, orderedRows.map((row) => row.id));
       if (!browserMode) {
         await trackRequest('SaveChannelRoutingConfig', { channel: 'codex', mode: nextConfig.routeMode }, () =>
           SaveChannelRoutingConfig(main.ChannelRoutingConfig.createFrom(nextConfig)),
@@ -536,8 +538,10 @@ export default function CodexAccountListFeature({ sidecarStatus }: CodexAccountL
       setOrderDirty(false);
       if (browserMode) {
         setMessage(t('codex.account_list_preview_saved'));
-      } else {
+      } else if (options.reloadAfterSave) {
         await reload(t('codex.account_list_saved'));
+      } else {
+        setMessage('');
       }
     } catch (error) {
       console.error(error);
@@ -547,6 +551,15 @@ export default function CodexAccountListFeature({ sidecarStatus }: CodexAccountL
     }
   }
 
+  async function saveOrder() {
+    if (!ready || !orderChanged || saving) {
+      return;
+    }
+
+    const nextConfig = withCurrentChannelOrder(channelConfig, orderedRows.map((row) => row.id));
+    await persistChannelRoutingConfig(nextConfig, { reloadAfterSave: !browserMode });
+  }
+
   useEffect(() => {
     if (!autoSaveOrderRequested || draggedID || saving) {
       return;
@@ -560,24 +573,30 @@ export default function CodexAccountListFeature({ sidecarStatus }: CodexAccountL
   }, [autoSaveOrderRequested, channelConfig, draggedID, orderChanged, orderedRows, saving]);
 
   function updateChannelMode(mode: ChannelRouteMode) {
-    setChannelConfig((prev) => updateChannelRoutingConfig(prev, { routeMode: mode }));
-    setOrderDirty(true);
+    const nextConfig = withCurrentChannelOrder(
+      updateChannelRoutingConfig(channelConfig, { routeMode: mode }),
+      orderedRows.map((row) => row.id),
+    );
     setChannelExplain(null);
-    setMessage(t('codex.account_list_unsaved'));
+    void persistChannelRoutingConfig(nextConfig);
   }
 
   function updateShadowEnabled(enabled: boolean) {
-    setChannelConfig((prev) => updateChannelRoutingConfig(prev, { shadowEnabled: enabled }));
-    setOrderDirty(true);
+    const nextConfig = withCurrentChannelOrder(
+      updateChannelRoutingConfig(channelConfig, { shadowEnabled: enabled }),
+      orderedRows.map((row) => row.id),
+    );
     setChannelExplain(null);
-    setMessage(t('codex.account_list_unsaved'));
+    void persistChannelRoutingConfig(nextConfig);
   }
 
   function updateShadowMode(mode: ChannelRouteMode) {
-    setChannelConfig((prev) => updateChannelRoutingConfig(prev, { shadowRouteMode: mode }));
-    setOrderDirty(true);
+    const nextConfig = withCurrentChannelOrder(
+      updateChannelRoutingConfig(channelConfig, { shadowRouteMode: mode }),
+      orderedRows.map((row) => row.id),
+    );
     setChannelExplain(null);
-    setMessage(t('codex.account_list_unsaved'));
+    void persistChannelRoutingConfig(nextConfig);
   }
 
   async function runChannelExplain() {
@@ -896,7 +915,6 @@ export default function CodexAccountListFeature({ sidecarStatus }: CodexAccountL
           onModeChange={updateChannelMode}
           onShadowEnabledChange={updateShadowEnabled}
           onShadowModeChange={updateShadowMode}
-          onSave={() => void saveOrder()}
           onExplain={() => void runChannelExplain()}
           onRefreshEvents={() => void loadChannelRouteEvents()}
         />
diff --git a/frontend/src/features/codex/codexAccountList.test.mjs b/frontend/src/features/codex/codexAccountList.test.mjs
@@ -573,6 +573,15 @@ test('getCodexAccountOrderGridClass keeps list single-column and card modes adap
   assert.doesNotMatch(getCodexAccountOrderGridClass('full'), /xl:grid-cols-3/);
 });
 
+test('Codex account list switches routing mode through immediate config persistence', async () => {
+  const source = await readFile(new URL('./CodexAccountListFeature.tsx', import.meta.url), 'utf8');
+
+  assert.match(source, /async function persistChannelRoutingConfig/);
+  assert.match(source, /updateChannelMode\(mode: ChannelRouteMode\)/);
+  assert.match(source, /void persistChannelRoutingConfig\(nextConfig/);
+  assert.doesNotMatch(source, /onSave=\{\(\) => void saveOrder\(\)\}/);
+});
+
 test('Codex account order cards reuse the account attribution card and keep custom controls in the footer', async () => {
   const source = await readFile(new URL('./components/CodexAccountOrderRow.tsx', import.meta.url), 'utf8');
 
