refactor(models): move provider actions to top toolbar

- Relocated "添加模型" button from inline form to page toolbar
- Moved Codex OAuth connect/disconnect controls to toolbar area
- Added onRegisterAddProviderAction callback pattern via useEffect
- Changed source tab variant from segmented to plain for consistency
- Fixed dropdown control height inside dialog surfaces
- Replaced padding-top with padding-block for form headers
- Added w-fit self-start to "添加 Header" button for proper alignment
- Wrapped toolbar with justify-between and flex-wrap for responsive layout

Author: Fectivnfy112357

packages/webui/src/client/features/models/ui/ProviderFormPanel.public.tsx

@@ -16,7 +16,7 @@
 // write will actually send. The editor and its commands arrive as props — the provider CRUD
 // is `models`' duty, not `settings`'.
 
-import { useRef, useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
+import { useEffect, useRef, useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -115,6 +115,7 @@ export interface WebuiProviderFormPanelProps {
   readonly setProviderActionError: (message?: string) => void;
   readonly editor: WebuiProviderEditor;
   readonly snapshot: WebuiProviderEditorSnapshot;
+  readonly onRegisterAddProviderAction: (action?: () => void) => void;
   readonly providerPendingDelete?: WebuiModelProviderView;
   readonly setProviderPendingDelete: Dispatch<SetStateAction<WebuiModelProviderView | undefined>>;
 }
@@ -222,7 +223,7 @@ function ProviderPresetPicker({ controlId, presets, selected, selectedName, onSe
 
 export function ProviderFormPanel({
   providers, presets, commands, setProviderActionError,
-  editor, snapshot,
+  editor, snapshot, onRegisterAddProviderAction,
   providerPendingDelete, setProviderPendingDelete,
 }: WebuiProviderFormPanelProps): ReactElement {
   const { dom } = useWebuiBrowserCapabilities();
@@ -271,6 +272,12 @@ export function ProviderFormPanel({
       try { await commands.loadPresets(); }
       catch (error) { setProviderActionError(error instanceof Error ? error.message : String(error)); }
     };
+    const openNewProviderRef = useRef<() => void>(() => {});
+    openNewProviderRef.current = () => { void openProviderForm(); };
+    useEffect(() => {
+      onRegisterAddProviderAction(() => openNewProviderRef.current());
+      return () => onRegisterAddProviderAction(undefined);
+    }, [onRegisterAddProviderAction]);
     // The dialog closes only on a successful delete; a refusal stays beside it,
     // in the editor's error channel.
     const confirmDeleteProvider = async () => {
@@ -322,7 +329,6 @@ export function ProviderFormPanel({
           }}><SortableContext items={ids} strategy={verticalListSortingStrategy}><div className="w-full rounded-[16px] bg-bg_grouped_tertiary p-1">{models.map((model, index) => <SortableModelRow key={ids[index]} id={ids[index]!} model={model} onTest={() => void commands.testModel({ providerId: id, modelId: textOf(model.modelId) })} onToggle={(enabled) => void toggleModel(id, model, enabled)} />)}</div></SortableContext></DndContext> : null}
         </WebuiStack>;
       })}
-      <WebuiButton variant="plain" className="h-9 w-fit px-3" disabled={!commands.canManageProviders} onClick={() => void openProviderForm()}>添加模型</WebuiButton>
       <WebuiDialog id="provider-form" open={showProviderForm} title={editingProvider ? "编辑提供商" : "添加模型"} onClose={() => editor.close()} dismissOnEscape portalTarget={portalTarget} width="standard" footer={<>
         <WebuiInline as="label" className="webui-provider-form-footer-leading"><WebuiCheckbox checked={skipTest} onChange={(event) => editor.setSkipConnectionTest(event.target.checked)} />跳过连通检测</WebuiInline>
         <WebuiDialogActions>
@@ -346,7 +352,7 @@ export function ProviderFormPanel({
             <WebuiInline justify="between" gap="medium" className="webui-provider-form-models-header"><span className="text-[14px] font-medium leading-5 text-text_default_primary">模型</span><WebuiInline gap="small"><WebuiButton variant="outline-secondary" size="compact" onClick={() => editor.addModel()}>添加模型</WebuiButton><WebuiButton variant="quiet-highlight" size="compact" disabled={!snapshot.canDiscover || formBusy} onClick={() => void editor.discover()}>自动获取</WebuiButton></WebuiInline></WebuiInline>
             {draftModels.length ? draftModels.map((model, index) => <ProviderModelCard key={model.id} model={model} index={index} busy={formBusy} onChange={(patch) => editor.changeModel(model.id, patch)} onTest={() => void editor.testModel(model.id)} onRemove={() => editor.removeModel(model.id)} />) : <FeedbackEmpty className="webui-provider-form-models-empty" title={"请至少添加一个模型"} />}
           </WebuiStack>
-          <WebuiStack gap="small" className="webui-provider-form-headers"><div className="text-[13px] font-medium leading-5 text-text_default_primary">自定义 Headers</div>{draftHeaders.map((header) => <WebuiInline key={header.id} gap="small" className="webui-provider-form-header-row"><WebuiTextInput controlSize="dense" className="flex-1" aria-label="Header 名称" placeholder="Header 名称" value={header.name} onChange={(event) => editor.setHeaders(draftHeaders.map((item) => item.id === header.id ? { ...item, name: event.target.value } : item))} /><WebuiTextInput controlSize="dense" className="flex-1" aria-label="Header 值" placeholder={header.persistedName ? "留空保留原值" : "Header 值"} value={header.value} onChange={(event) => editor.setHeaders(draftHeaders.map((item) => item.id === header.id ? { ...item, value: event.target.value } : item))} /><IconButton label="移除 Header" onClick={() => editor.removeHeader(header.id)}><IconTrash aria-hidden="true" size={16} stroke={1.7} /></IconButton></WebuiInline>)}<WebuiButton variant="outline-secondary" size="compact" onClick={() => editor.addHeader()}><IconPlus aria-hidden="true" size={16} stroke={1.7} /> 添加 Header</WebuiButton></WebuiStack>
+          <WebuiStack gap="small" className="webui-provider-form-headers"><div className="text-[13px] font-medium leading-5 text-text_default_primary">自定义 Headers</div>{draftHeaders.map((header) => <WebuiInline key={header.id} gap="small" className="webui-provider-form-header-row"><WebuiTextInput controlSize="dense" className="flex-1" aria-label="Header 名称" placeholder="Header 名称" value={header.name} onChange={(event) => editor.setHeaders(draftHeaders.map((item) => item.id === header.id ? { ...item, name: event.target.value } : item))} /><WebuiTextInput controlSize="dense" className="flex-1" aria-label="Header 值" placeholder={header.persistedName ? "留空保留原值" : "Header 值"} value={header.value} onChange={(event) => editor.setHeaders(draftHeaders.map((item) => item.id === header.id ? { ...item, value: event.target.value } : item))} /><IconButton label="移除 Header" onClick={() => editor.removeHeader(header.id)}><IconTrash aria-hidden="true" size={16} stroke={1.7} /></IconButton></WebuiInline>)}<WebuiButton variant="outline-secondary" size="compact" className="w-fit self-start" onClick={() => editor.addHeader()}><IconPlus aria-hidden="true" size={16} stroke={1.7} /> 添加 Header</WebuiButton></WebuiStack>
           {formError ? <FeedbackError message={formError} className="webui-provider-form-error" /> : null}
         </WebuiStack>
         </form>

packages/webui/src/client/features/models/ui/models.css

@@ -33,7 +33,7 @@
   .webui-provider-picker-other { flex: 0 0 auto; margin-top: 4px; border-top: 1px solid var(--border_default); padding: 4px 0; }
   .webui-provider-picker-other-option { width: 100%; height: 32px; padding-inline: 12px; color: var(--text_default_secondary); text-align: left; }
   .webui-provider-picker-other-icon { display: flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; }
-  .webui-provider-form-headers { padding-top: 8px; }
+  .webui-provider-form-headers { padding-block: 8px; }
   .webui-provider-form-header-row { min-width: 0; }
   /* The model list: one card per model, each carrying its own fields. */
   .webui-provider-form-models { padding-top: 8px; }

packages/webui/src/client/features/settings/ui/UsageModelSettings.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, type ReactElement } from "react";
+import { useCallback, useEffect, useState, type ReactElement } from "react";
 import { formatWebuiCredits, recordOf, textOf } from "../../../contracts/value-readers.js";
 import { useWebuiModelsWorkflows, useWebuiModelsWorkflowsState, useWebuiSettingsWorkflows, useWebuiSettingsWorkflowsState } from "../../../bindings/use-query-state.js";
 import { useWebuiAccountWorkflows, useWebuiAccountWorkflowsState } from "../../../features/account/bindings/use-account-workflows.public.js";
@@ -96,6 +96,10 @@ export function UsageModelSettings({ sessionId }: Props): ReactElement {
   const [oauthError, setOauthError] = useState<string>();
   const [oauthLoginId, setOauthLoginId] = useState<string>();
   const [providerPendingDelete, setProviderPendingDelete] = useState<WebuiModelProviderView>();
+  const [addProviderAction, setAddProviderAction] = useState<() => void>();
+  const registerAddProviderAction = useCallback((action?: () => void) => {
+    setAddProviderAction(() => action);
+  }, []);
 
   // Committed read state, derived from the owner snapshots.
   const quota = accountState.usage.result;
@@ -215,7 +219,8 @@ export function UsageModelSettings({ sessionId }: Props): ReactElement {
 
 
   return <SettingsPage testId="settings-usage-model">
-    <WebuiInline gap="medium" className="h-8">
+    <WebuiInline gap="medium" justify="between" className="min-h-8 flex-wrap">
+      <WebuiInline gap="medium" className="h-8">
       <WebuiDropdown
         open={sourceMenuOpen}
         onOpen={() => setSourceMenuOpen(true)}
@@ -239,7 +244,7 @@ export function UsageModelSettings({ sessionId }: Props): ReactElement {
                 <WebuiButton
                   {...buttonProps}
                   ref={ref}
-                  variant="segmented"
+                  variant="plain"
                   size="compact"
                   aria-pressed={sourceTab !== "custom"}
                   data-testid="settings-usage-source-tab"
@@ -271,6 +276,17 @@ export function UsageModelSettings({ sessionId }: Props): ReactElement {
       </WebuiDropdown>
       <div className="h-3 w-[0.5px] bg-border_default" />
       <WebuiButton variant="segmented" size="compact" aria-pressed={sourceTab === "custom"} className="h-8 rounded-[8px] px-3 text-[14px] font-medium leading-5" onClick={() => setSourceTab("custom")}>自定义模型</WebuiButton>
+      </WebuiInline>
+      {sourceTab === "custom" ? <WebuiInline gap="small" className="ml-auto">
+        <WebuiButton variant="outline-highlight" size="compact" disabled={!models?.canManageProviders || !addProviderAction} onClick={() => addProviderAction?.()}>添加模型</WebuiButton>
+        {oauth?.state === "connected" ? <>
+          <span className="self-center text-[13px] text-text_default_secondary">Codex OAuth 已连接</span>
+          <WebuiButton variant="outline-highlight" size="compact" disabled={!models?.canManageProviders} onClick={() => void models?.refreshModels?.()}>获取模型列表</WebuiButton>
+        </> : <>
+          <WebuiButton variant="outline-highlight" size="compact" disabled={!settings?.canStartCodexOAuth || Boolean(oauthLoginId)} onClick={() => void beginCodexLogin()}>{oauthLoginId ? "正在连接 Codex OAuth" : "连接 Codex OAuth"}</WebuiButton>
+          {oauthLoginId ? <WebuiButton variant="outline-highlight" size="compact" disabled={!settings?.canStartCodexOAuth} onClick={() => void cancelCodexLogin()}>取消</WebuiButton> : null}
+        </>}
+      </WebuiInline> : null}
     </WebuiInline>
 
     {sourceTab === "token-plan" ? <WebuiStack as="section" gap="roomy" className="w-full" data-testid="settings-usage-token-plan">
@@ -304,10 +320,11 @@ export function UsageModelSettings({ sessionId }: Props): ReactElement {
           setProviderActionError={setProviderActionError}
           editor={editor}
           snapshot={providerEditorSnapshot}
+          onRegisterAddProviderAction={registerAddProviderAction}
           providerPendingDelete={providerPendingDelete}
           setProviderPendingDelete={setProviderPendingDelete}
         />
-        {oauthError ? <FeedbackError message={oauthError} /> : oauth?.state === "connected" ? <WebuiInline gap="medium"><span>Codex OAuth 已连接</span><WebuiButton variant="outline" size="inline" disabled={!models?.canManageProviders} onClick={() => void models?.refreshModels?.()}>获取模型列表</WebuiButton></WebuiInline> : <WebuiInline gap="small"><WebuiButton variant="surface-quiet" size="inline" disabled={!settings?.canStartCodexOAuth || Boolean(oauthLoginId)} onClick={() => void beginCodexLogin()}>{oauthLoginId ? "正在连接 Codex OAuth" : "连接 Codex OAuth"}</WebuiButton>{oauthLoginId ? <WebuiButton variant="quiet-secondary" size="inline" disabled={!settings?.canStartCodexOAuth} onClick={() => void cancelCodexLogin()}>取消</WebuiButton> : null}</WebuiInline>}
+        {oauthError ? <FeedbackError message={oauthError} /> : null}
       </>}
     </WebuiStack> : null}
   </SettingsPage>;

packages/webui/src/client/styles/dialog.css

@@ -160,6 +160,10 @@
     height: 36px;
     min-height: 36px;
   }
+  .webui-dialog-surface .webui-field-control > .webui-dropdown > * {
+    height: 36px;
+    min-height: 36px;
+  }
   .webui-dialog-surface .webui-field-label {
     color: var(--text_default_secondary);
     font-size: var(--size_14);