fix: refine AI providers and auth files styling and layout alignment

- Remove inset box-shadow from stat badges for cleaner appearance
  - Add modelCountLabel style for consistent model count display
  - Refactor model count layout in AiProvidersPage
  - Add openaiTestButton style for proper button height alignment
  - Add item-actions flexbox utility style to layout.scss
This commit is contained in:
Supra4E8C
2025-12-13 17:15:37 +08:00
parent 13d1804e66
commit ccc82e5802
4 changed files with 28 additions and 9 deletions

View File

@@ -70,7 +70,6 @@
background-color: var(--bg-tertiary); background-color: var(--bg-tertiary);
color: var(--text-primary); color: var(--text-primary);
white-space: nowrap; white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
} }
.statSuccess { .statSuccess {
@@ -141,6 +140,18 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 6px;
margin-top: 8px; margin-top: 8px;
align-items: center;
}
.modelCountLabel {
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: var(--text-tertiary);
white-space: nowrap;
flex-shrink: 0;
} }
// 单个模型标签 // 单个模型标签
@@ -362,6 +373,13 @@
} }
} }
// 连通性测试按钮高度对齐
.openaiTestButton {
padding: 8px 12px;
font-size: 14px;
line-height: 1.5;
}
// 暗色主题适配 // 暗色主题适配
:global([data-theme='dark']) { :global([data-theme='dark']) {
.headerBadge { .headerBadge {

View File

@@ -976,11 +976,9 @@ export function AiProvidersPage() {
{/* 模型列表 */} {/* 模型列表 */}
{item.models?.length ? ( {item.models?.length ? (
<div className={styles.modelTagList}> <div className={styles.modelTagList}>
<div className={styles.fieldRow}> <span className={styles.modelCountLabel}>
<span className={styles.fieldLabel}>
{t('ai_providers.claude_models_count')}: {item.models.length} {t('ai_providers.claude_models_count')}: {item.models.length}
</span> </span>
</div>
{item.models.map((model) => ( {item.models.map((model) => (
<span key={model.name} className={styles.modelTag}> <span key={model.name} className={styles.modelTag}>
<span className={styles.modelName}>{model.name}</span> <span className={styles.modelName}>{model.name}</span>
@@ -1352,9 +1350,8 @@ export function AiProvidersPage() {
})} })}
</select> </select>
<Button <Button
size="sm"
variant={openaiTestStatus === 'error' ? 'danger' : 'secondary'} variant={openaiTestStatus === 'error' ? 'danger' : 'secondary'}
className={openaiTestStatus === 'success' ? styles.openaiTestButtonSuccess : ''} className={`${styles.openaiTestButton} ${openaiTestStatus === 'success' ? styles.openaiTestButtonSuccess : ''}`}
onClick={testOpenaiProviderConnection} onClick={testOpenaiProviderConnection}
loading={openaiTestStatus === 'loading'} loading={openaiTestStatus === 'loading'}
disabled={saving || openaiAvailableModels.length === 0} disabled={saving || openaiAvailableModels.length === 0}

View File

@@ -217,7 +217,6 @@
background-color: var(--bg-tertiary); background-color: var(--bg-tertiary);
color: var(--text-primary); color: var(--text-primary);
white-space: nowrap; white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
} }
.statSuccess { .statSuccess {

View File

@@ -404,6 +404,11 @@
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
} }
.item-actions {
display: flex;
gap: $spacing-sm;
}
} }
.toggle-advanced { .toggle-advanced {