mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-03 03:10:50 +08:00
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:
@@ -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 {
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user