diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md index 8aa6b1ef..d65d3897 100644 --- a/frontend/DESIGN.md +++ b/frontend/DESIGN.md @@ -95,7 +95,7 @@ The base unit is 4px. Tokens are `--space-1: 4px`, `--space-2: 8px`, `--space-3: ### Model selector -- **Structure:** a compact text trigger sits below the composer and opens an upward popover aligned to its left edge. The trigger names the active model; the popover gives each option a model name, short purpose, credit cost, and radio selection state. +- **Structure:** a compact text trigger sits below the composer and opens an upward popover aligned to its left edge. The trigger shows only the active model name; each option shows only its model name and radio selection state. - **Surface:** canvas trigger with no card treatment; the popover uses the elevated canvas recipe, warm hairlines, and one selected-surface row. The action color is reserved for the selected indicator and focus ring. - **States:** closed, open, hover, focus-visible, selected, disabled, and unavailable catalog. Selecting a model closes the popover and only affects later messages in the current conversation. - **Accessibility:** the trigger and every option meet the 44px touch target; options are a native radio group, with a small roving-focus fallback so Tab, arrow keys, Space, and screen readers consistently expose the selected model inside the popover. diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 50641c72..1ac1168a 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -344,7 +344,6 @@ button:disabled { cursor: default; opacity: .45; } .composer-footer > p { grid-column: 2; margin: 0; color: var(--color-ink-tertiary); text-align: center; font-size: var(--type-overline); } .composer-footer > p.composer-notice { display: block; color: var(--color-action-hover); } .model-selector-trigger { min-width: 0; max-width: 100%; min-height: 44px; display: inline-flex; grid-column: 1; align-items: center; justify-self: start; gap: var(--space-2); border: 0; padding: 0 var(--space-2); border-radius: var(--radius-md); background: transparent; color: var(--color-ink-secondary); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; } -.model-selector-trigger > span { flex: 0 0 auto; color: var(--color-ink-tertiary); font-size: var(--type-overline); font-weight: 500; } .model-selector-trigger > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-caption); font-weight: 500; } .model-selector-trigger svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-ink-tertiary); transition: transform 120ms ease-out; } .model-selector-trigger[data-popup-open] svg { transform: rotate(180deg); } @@ -352,15 +351,12 @@ button:disabled { cursor: default; opacity: .45; } .model-selector-popup { width: min(360px, calc(100vw - var(--space-6))); border: 1px solid var(--color-border); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-canvas); box-shadow: var(--shadow-elevated); transform-origin: var(--transform-origin); transition: opacity 120ms ease-out, transform 120ms var(--ease-out); } .model-selector-popup[data-starting-style], .model-selector-popup[data-ending-style] { opacity: 0; transform: translateY(var(--space-1)); } .model-selector-title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: var(--type-title-sm); font-weight: 400; } -.model-selector-description { margin: var(--space-1) 0 var(--space-3); color: var(--color-ink-tertiary); font-size: var(--type-caption); line-height: 1.5; } -.model-selector-options { display: grid; gap: var(--space-1); margin: 0; padding: 0; border: 0; } -.model-selector-option { min-height: 60px; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-ink-secondary); cursor: pointer; transition: border-color 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out; } +.model-selector-options { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; border: 0; } +.model-selector-option { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-ink-secondary); cursor: pointer; transition: border-color 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out; } .model-selector-option[data-selected] { border-color: var(--color-border); background: var(--color-selected); color: var(--color-ink); } .model-selector-option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--color-focus) 56%, transparent); outline-offset: 1px; } .model-selector-copy { min-width: 0; display: grid; gap: var(--space-1); } .model-selector-copy b { overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-body-sm); font-weight: 500; } -.model-selector-copy small { overflow: hidden; color: var(--color-ink-tertiary); text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-caption); } -.model-selector-cost { white-space: nowrap; color: var(--color-ink-tertiary); font-size: var(--type-caption); } .model-selector-check { width: 18px; height: 18px; opacity: 0; color: var(--color-action); } .model-selector-option[data-selected] .model-selector-check { opacity: 1; } diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 83c1a32c..61331306 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -850,9 +850,7 @@ export default function Home() { modelSelectionVersions.current.set(nextSession.id, selectionVersion); if (!retryingFailedSync) updateSession(activeSession.id, () => nextSession); setRequestError(null); - setComposerNotice(retryingFailedSync - ? `正在重新同步 ${selectedModel.label}。` - : `已切换至 ${selectedModel.label}，只影响之后的问题。`); + setComposerNotice(""); try { await modelPersistence.current.enqueue(nextSession.id, () => persistSessionModelSelection( @@ -876,9 +874,6 @@ export default function Home() { if (modelSelectionVersions.current.get(nextSession.id) !== selectionVersion) return; modelSelectionVersions.current.delete(nextSession.id); modelSyncFailures.current.delete(nextSession.id); - if (retryingFailedSync && activeSessionIdRef.current === nextSession.id) { - setComposerNotice(`已同步 ${selectedModel.label}。`); - } } catch (caught) { if (modelSelectionVersions.current.get(nextSession.id) !== selectionVersion) return; modelSelectionVersions.current.delete(nextSession.id); diff --git a/frontend/src/components/model-selector.tsx b/frontend/src/components/model-selector.tsx index 6e00cff3..cff64058 100644 --- a/frontend/src/components/model-selector.tsx +++ b/frontend/src/components/model-selector.tsx @@ -48,7 +48,6 @@ export function ModelSelector({ disabled={disabled || unavailable} aria-label={selectedModel ? `当前模型：${selectedModel.label}，点击切换` : "模型暂不可用"} > - 模型 {selectedModel?.label ?? "暂不可用"}