feat(ai-providers): 优化 OpenAI 编辑页 UI 交互与对齐

src/components/ui/HeaderInputList.tsx

@@ -10,6 +10,8 @@ interface HeaderInputListProps {
   disabled?: boolean;
   keyPlaceholder?: string;
   valuePlaceholder?: string;
+  removeButtonTitle?: string;
+  removeButtonAriaLabel?: string;
 }
 
 export function HeaderInputList({
@@ -18,7 +20,9 @@ export function HeaderInputList({
   addLabel,
   disabled = false,
   keyPlaceholder = 'X-Custom-Header',
-  valuePlaceholder = 'value'
+  valuePlaceholder = 'value',
+  removeButtonTitle = 'Remove',
+  removeButtonAriaLabel = 'Remove',
 }: HeaderInputListProps) {
   const currentEntries = entries.length ? entries : [{ key: '', value: '' }];
 
@@ -61,8 +65,8 @@ export function HeaderInputList({
               size="sm"
               onClick={() => removeEntry(index)}
               disabled={disabled || currentEntries.length <= 1}
-              title="Remove"
-              aria-label="Remove"
+              title={removeButtonTitle}
+              aria-label={removeButtonAriaLabel}
             >
               <IconX size={14} />
             </Button>

src/components/ui/ModelInputList.tsx

@@ -6,10 +6,18 @@ import type { ModelEntry } from './modelInputListUtils';
 interface ModelInputListProps {
   entries: ModelEntry[];
   onChange: (entries: ModelEntry[]) => void;
-  addLabel: string;
+  addLabel?: string;
   disabled?: boolean;
   namePlaceholder?: string;
   aliasPlaceholder?: string;
+  hideAddButton?: boolean;
+  onAdd?: () => void;
+  className?: string;
+  rowClassName?: string;
+  inputClassName?: string;
+  removeButtonClassName?: string;
+  removeButtonTitle?: string;
+  removeButtonAriaLabel?: string;
 }
 
 export function ModelInputList({
@@ -18,9 +26,20 @@ export function ModelInputList({
   addLabel,
   disabled = false,
   namePlaceholder = 'model-name',
-  aliasPlaceholder = 'alias (optional)'
+  aliasPlaceholder = 'alias (optional)',
+  hideAddButton = false,
+  onAdd,
+  className = '',
+  rowClassName = '',
+  inputClassName = '',
+  removeButtonClassName = '',
+  removeButtonTitle = 'Remove',
+  removeButtonAriaLabel = 'Remove',
 }: ModelInputListProps) {
   const currentEntries = entries.length ? entries : [{ name: '', alias: '' }];
+  const containerClassName = ['header-input-list', className].filter(Boolean).join(' ');
+  const inputClassNames = ['input', inputClassName].filter(Boolean).join(' ');
+  const rowClassNames = ['header-input-row', rowClassName].filter(Boolean).join(' ');
 
   const updateEntry = (index: number, field: 'name' | 'alias', value: string) => {
     const next = currentEntries.map((entry, idx) => (idx === index ? { ...entry, [field]: value } : entry));
@@ -28,7 +47,11 @@ export function ModelInputList({
   };
 
   const addEntry = () => {
-    onChange([...currentEntries, { name: '', alias: '' }]);
+    if (onAdd) {
+      onAdd();
+    } else {
+      onChange([...currentEntries, { name: '', alias: '' }]);
+    }
   };
 
   const removeEntry = (index: number) => {
@@ -37,12 +60,12 @@ export function ModelInputList({
   };
 
   return (
-    <div className="header-input-list">
+    <div className={containerClassName}>
       {currentEntries.map((entry, index) => (
         <Fragment key={index}>
-          <div className="header-input-row">
+          <div className={rowClassNames}>
             <input
-              className="input"
+              className={inputClassNames}
               placeholder={namePlaceholder}
               value={entry.name}
               onChange={(e) => updateEntry(index, 'name', e.target.value)}
@@ -50,7 +73,7 @@ export function ModelInputList({
             />
             <span className="header-separator">→</span>
             <input
-              className="input"
+              className={inputClassNames}
               placeholder={aliasPlaceholder}
               value={entry.alias}
               onChange={(e) => updateEntry(index, 'alias', e.target.value)}
@@ -61,17 +84,20 @@ export function ModelInputList({
               size="sm"
               onClick={() => removeEntry(index)}
               disabled={disabled || currentEntries.length <= 1}
-              title="Remove"
-              aria-label="Remove"
+              className={removeButtonClassName}
+              title={removeButtonTitle}
+              aria-label={removeButtonAriaLabel}
             >
               <IconX size={14} />
             </Button>
           </div>
         </Fragment>
       ))}
-      <Button variant="secondary" size="sm" onClick={addEntry} disabled={disabled} className="align-start">
-        {addLabel}
-      </Button>
+      {!hideAddButton && addLabel && (
+        <Button variant="secondary" size="sm" onClick={addEntry} disabled={disabled} className="align-start">
+          {addLabel}
+        </Button>
+      )}
     </div>
   );
 }