|
9 | 9 | Shuffle, |
10 | 10 | Split, |
11 | 11 | X, |
12 | | - Zap, |
13 | 12 | } from 'lucide-react'; |
14 | 13 | import { useEffect, useState } from 'react'; |
15 | 14 | import ModalFrame from '../../../components/ui/ModalFrame'; |
@@ -81,6 +80,7 @@ export default function ChannelRoutingWorkbench({ |
81 | 80 | const legacyMask = buildLegacyRoutingMaskPanel(); |
82 | 81 | const eventSummaries = routeEvents.slice(0, 5).map((event) => buildChannelRouteAuditEventSummary(event)); |
83 | 82 | const hasExplain = explainView.hasExplain; |
| 83 | + const activeRouteMode = routeModes.find((item) => item.mode === config.routeMode) ?? routeModes[0]; |
84 | 84 | const shadowPanelLabel = config.shadowEnabled ? (hasExplain ? explainView.shadowLabel : '开启') : '关闭'; |
85 | 85 | const shadowPanelMeta = config.shadowEnabled && hasExplain ? explainView.shadowMeta : ''; |
86 | 86 | const participantRows = buildChannelRoutingParticipantRows(config, accounts); |
@@ -111,30 +111,41 @@ export default function ChannelRoutingWorkbench({ |
111 | 111 | > |
112 | 112 | <header className="p-4"> |
113 | 113 | <div className="flex min-w-0 flex-wrap items-center justify-between gap-3"> |
114 | | - <div className="flex min-w-0 items-center gap-2"> |
115 | | - <Zap className="h-4 w-4 shrink-0 text-[var(--text-secondary)]" strokeWidth={3} /> |
116 | | - <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"> |
117 | | - 请求模式 |
118 | | - </h2> |
119 | | - <button |
120 | | - type="button" |
121 | | - onClick={() => setHelpOpen(true)} |
122 | | - aria-label="查看请求模式说明" |
123 | | - title="查看请求模式说明" |
124 | | - aria-pressed={helpOpen} |
125 | | - className={`flex h-8 w-8 shrink-0 items-center justify-center border-2 transition-colors active:scale-95 ${ |
126 | | - helpOpen |
127 | | - ? 'border-[var(--text-primary)] bg-[var(--text-primary)] text-[var(--bg-main)]' |
128 | | - : 'border-[var(--border-color)] bg-[var(--bg-main)] text-[var(--text-primary)] [@media(hover:hover)]:hover:border-[var(--text-primary)]' |
129 | | - }`} |
130 | | - > |
131 | | - <CircleHelp className="h-4 w-4" strokeWidth={4} /> |
132 | | - </button> |
133 | | - {preview ? ( |
134 | | - <span className="font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-wide text-[var(--text-muted)]"> |
135 | | - 预览 |
136 | | - </span> |
137 | | - ) : null} |
| 114 | + <div className="flex min-w-0 items-start gap-3"> |
| 115 | + <div className="flex h-11 w-11 shrink-0 items-center justify-center border-2 border-[var(--border-color)] bg-[var(--bg-main)] text-[var(--text-primary)]"> |
| 116 | + <Split className="h-4 w-4" strokeWidth={4} /> |
| 117 | + </div> |
| 118 | + <div className="min-w-0"> |
| 119 | + <div className="flex min-w-0 flex-wrap items-center gap-2"> |
| 120 | + <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"> |
| 121 | + 请求模式 |
| 122 | + </h2> |
| 123 | + <button |
| 124 | + type="button" |
| 125 | + onClick={() => setHelpOpen(true)} |
| 126 | + aria-label="查看请求模式说明" |
| 127 | + title="查看请求模式说明" |
| 128 | + aria-pressed={helpOpen} |
| 129 | + className={`flex h-8 w-8 shrink-0 items-center justify-center border-2 transition-colors active:scale-95 ${ |
| 130 | + helpOpen |
| 131 | + ? 'border-[var(--text-primary)] bg-[var(--text-primary)] text-[var(--bg-main)]' |
| 132 | + : 'border-[var(--border-color)] bg-[var(--bg-main)] text-[var(--text-primary)] [@media(hover:hover)]:hover:border-[var(--text-primary)]' |
| 133 | + }`} |
| 134 | + > |
| 135 | + <CircleHelp className="h-4 w-4" strokeWidth={4} /> |
| 136 | + </button> |
| 137 | + </div> |
| 138 | + <div className="mt-1 flex min-w-0 flex-wrap items-center gap-2 text-[length:var(--font-size-ui-sm)] font-black leading-5 text-[var(--text-secondary)]"> |
| 139 | + <span className="text-[var(--text-primary)]">{channel === 'codex' ? 'Codex' : 'Claude Code'}</span> |
| 140 | + <span aria-hidden="true">/</span> |
| 141 | + <span>{activeRouteMode.label}模式</span> |
| 142 | + {preview ? ( |
| 143 | + <span className="border-2 border-[var(--border-color)] bg-[var(--bg-main)] px-2 py-0.5 text-[var(--text-primary)]"> |
| 144 | + 预览 |
| 145 | + </span> |
| 146 | + ) : null} |
| 147 | + </div> |
| 148 | + </div> |
138 | 149 | </div> |
139 | 150 | <div className="grid min-w-0 flex-1 gap-2 sm:max-w-[28rem] sm:flex-none sm:grid-cols-2"> |
140 | 151 | {routeModes.map((item) => ( |
@@ -359,21 +370,14 @@ function StrategyButton({ |
359 | 370 | onClick={() => onModeChange(mode)} |
360 | 371 | disabled={disabled} |
361 | 372 | aria-pressed={active} |
362 | | - 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] ${ |
| 373 | + className={`grid min-h-10 grid-cols-[1.5rem_minmax(0,1fr)] items-center gap-2 border-2 px-3 py-2 text-left transition-colors active:scale-[0.98] ${ |
363 | 374 | active |
364 | 375 | ? 'border-[var(--text-primary)] bg-[var(--text-primary)] text-[var(--bg-main)]' |
365 | 376 | : 'border-[var(--border-color)] bg-[var(--bg-main)] text-[var(--text-primary)] [@media(hover:hover)]:hover:border-[var(--text-primary)]' |
366 | 377 | }`} |
367 | 378 | > |
368 | 379 | <Icon className="h-3.5 w-3.5 shrink-0" strokeWidth={4} /> |
369 | 380 | <span className="min-w-0 truncate text-[length:var(--font-size-ui-sm)] font-black">{label}</span> |
370 | | - <span |
371 | | - className={`min-w-0 truncate font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-wide ${ |
372 | | - active ? 'text-[var(--bg-main)]/75' : 'text-[var(--text-muted)]' |
373 | | - }`} |
374 | | - > |
375 | | - {active ? '当前' : cue} |
376 | | - </span> |
377 | 381 | </button> |
378 | 382 | ); |
379 | 383 | } |
|
0 commit comments