chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-19 03:00:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor color variables and styles across components for a cohesive design update

Browse Source 
- Updated active state colors in ToastSelect component for better visibility.
- Adjusted box-shadow and border colors in ModelMappingDiagram styles.
- Changed provider colors in ModelMappingDiagram for improved aesthetics.
- Modified background and border styles in ProviderNav for a more modern look.
- Updated accent colors in StatCards to align with new color scheme.
- Refined token colors in TokenBreakdownChart for consistency.
- Adjusted sparkline colors in useSparklines hook to match new design.
- Changed error icon color in AiProvidersOpenAIEditPage for better contrast.
- Updated failure badge styles in AiProvidersPage for a cleaner appearance.
- Refined various status styles in AuthFilesPage for improved clarity.
- Updated colors in ConfigPage to use new variable definitions.
- Refined error and warning styles in LoginPage for better user feedback.
- Adjusted log status colors in LogsPage for consistency with new theme.
- Updated OAuthPage styles to reflect new color variables.
- Refined quota styles in QuotaPage for better visual hierarchy.
- Updated system page styles for improved user experience.
- Adjusted usage page styles to align with new design language.
- Refactored component styles to use new color variables in components.scss.
- Updated layout styles to reflect new primary color definitions.
- Refined theme colors in themes.scss for a more cohesive look.
- Updated color variables in variables.scss to reflect new design choices.
- Adjusted chart colors in usage.ts for consistency with new color scheme.
This commit is contained in:
Supra4E8C
2026-02-14 02:25:58 +08:00
parent 6f4bc7c3bb
commit e2368ddfd7
22 changed files with 192 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/config/VisualConfigEditor.tsx
View File

@@ -174,8 +174,10 @@ function ToastSelect({
style={{ style={{
padding: '10px 12px', padding: '10px 12px',
borderRadius: 10, borderRadius: 10,
border: active ? '1px solid rgba(59, 130, 246, 0.5)' : '1px solid var(--border-color)', border: active
background: active ? 'rgba(59, 130, 246, 0.10)' : 'var(--bg-primary)', ? '1px solid rgba(139, 134, 128, 0.5)'
: '1px solid var(--border-color)',
background: active ? 'rgba(139, 134, 128, 0.12)' : 'var(--bg-primary)',
color: 'var(--text-primary)', color: 'var(--text-primary)',
cursor: 'pointer', cursor: 'pointer',
textAlign: 'left', textAlign: 'left',

2
src/components/modelAlias/ModelMappingDiagram.module.scss
View File

@@ -114,7 +114,7 @@
&.selected { &.selected {
border-color: var(--primary-color); border-color: var(--primary-color);
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 2px rgba($primary-color, 0.18);
} }
} }

2
src/components/modelAlias/ModelMappingDiagram.tsx
View File

@@ -33,7 +33,7 @@ export interface ModelMappingDiagramProps {
} }
const PROVIDER_COLORS = [ const PROVIDER_COLORS = [
'#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b8680', '#10b981', '#f59e0b', '#c65746',
'#8b5cf6', '#ec4899', '#06b6d4', '#84cc16' '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16'
]; ];

14
src/components/providers/ProviderNav/ProviderNav.module.scss
View File

@@ -17,12 +17,12 @@
flex-direction: row; flex-direction: row;
gap: 6px; gap: 6px;
padding: 10px 12px; padding: 10px 12px;
background: rgba(255, 255, 255, 0.7); background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
border-radius: 999px; border-radius: 999px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
overflow-x: auto; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
max-width: inherit; max-width: inherit;
@@ -39,7 +39,7 @@
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
border-radius: 999px; border-radius: 999px;
background: rgba(59, 130, 246, 0.15); background: rgba($primary-color, 0.16);
box-shadow: inset 0 0 0 2px var(--primary-color); box-shadow: inset 0 0 0 2px var(--primary-color);
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
width 220ms cubic-bezier(0.22, 1, 0.36, 1), width 220ms cubic-bezier(0.22, 1, 0.36, 1),
@@ -104,8 +104,8 @@
// 暗色主题适配 // 暗色主题适配
:global([data-theme='dark']) { :global([data-theme='dark']) {
.navList { .navList {
background: rgba(30, 30, 30, 0.7); background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
border-color: rgba(255, 255, 255, 0.1); border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
} }
@@ -116,7 +116,7 @@
} }
.indicator { .indicator {
background: rgba(59, 130, 246, 0.25); background: rgba($primary-color, 0.28);
} }
} }

8
src/components/usage/StatCards.tsx
View File

@@ -56,9 +56,9 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
key: 'requests', key: 'requests',
label: t('usage_stats.total_requests'), label: t('usage_stats.total_requests'),
icon: <IconSatellite size={16} />, icon: <IconSatellite size={16} />,
accent: '#3b82f6', accent: '#8b8680',
accentSoft: 'rgba(59, 130, 246, 0.18)', accentSoft: 'rgba(139, 134, 128, 0.18)',
accentBorder: 'rgba(59, 130, 246, 0.35)', accentBorder: 'rgba(139, 134, 128, 0.35)',
value: loading ? '-' : (usage?.total_requests ?? 0).toLocaleString(), value: loading ? '-' : (usage?.total_requests ?? 0).toLocaleString(),
meta: ( meta: (
<> <>
@@ -67,7 +67,7 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
{t('usage_stats.success_requests')}: {loading ? '-' : (usage?.success_count ?? 0)} {t('usage_stats.success_requests')}: {loading ? '-' : (usage?.success_count ?? 0)}
</span> </span>
<span className={styles.statMetaItem}> <span className={styles.statMetaItem}>
<span className={styles.statMetaDot} style={{ backgroundColor: '#ef4444' }} /> <span className={styles.statMetaDot} style={{ backgroundColor: '#c65746' }} />
{t('usage_stats.failed_requests')}: {loading ? '-' : (usage?.failure_count ?? 0)} {t('usage_stats.failed_requests')}: {loading ? '-' : (usage?.failure_count ?? 0)}
</span> </span>
</> </>

2
src/components/usage/TokenBreakdownChart.tsx
View File

@@ -13,7 +13,7 @@ import type { UsagePayload } from './hooks/useUsageData';
import styles from '@/pages/UsagePage.module.scss'; import styles from '@/pages/UsagePage.module.scss';
const TOKEN_COLORS: Record<TokenCategory, { border: string; bg: string }> = { const TOKEN_COLORS: Record<TokenCategory, { border: string; bg: string }> = {
input: { border: '#3b82f6', bg: 'rgba(59, 130, 246, 0.25)' }, input: { border: '#8b8680', bg: 'rgba(139, 134, 128, 0.25)' },
output: { border: '#22c55e', bg: 'rgba(34, 197, 94, 0.25)' }, output: { border: '#22c55e', bg: 'rgba(34, 197, 94, 0.25)' },
cached: { border: '#f59e0b', bg: 'rgba(245, 158, 11, 0.25)' }, cached: { border: '#f59e0b', bg: 'rgba(245, 158, 11, 0.25)' },
reasoning: { border: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.25)' } reasoning: { border: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.25)' }

2
src/components/usage/hooks/useSparklines.ts
View File

@@ -104,7 +104,7 @@ export function useSparklines({ usage, loading }: UseSparklinesOptions): UseSpar
); );
const requestsSparkline = useMemo( const requestsSparkline = useMemo(
() => buildSparkline(buildLastHourSeries('requests'), '#3b82f6', 'rgba(59, 130, 246, 0.18)'), () => buildSparkline(buildLastHourSeries('requests'), '#8b8680', 'rgba(139, 134, 128, 0.18)'),
[buildLastHourSeries, buildSparkline] [buildLastHourSeries, buildSparkline]
); );

2
src/pages/AiProvidersOpenAIEditPage.tsx
View File

@@ -59,7 +59,7 @@ function StatusSuccessIcon() {
function StatusErrorIcon() { function StatusErrorIcon() {
return ( return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<circle cx="8" cy="8" r="8" fill="var(--danger-color, #ef4444)" /> <circle cx="8" cy="8" r="8" fill="var(--danger-color, #c65746)" />
<path <path
d="M5 5L11 11M11 5L5 11" d="M5 5L11 11M11 5L5 11"
stroke="white" stroke="white"

38
src/pages/AiProvidersPage.module.scss
View File

@@ -93,9 +93,9 @@
} }
.statFailure { .statFailure {
background-color: var(--failure-badge-bg, #fee2e2); background-color: var(--failure-badge-bg);
color: var(--failure-badge-text, #991b1b); color: var(--failure-badge-text);
border-color: var(--failure-badge-border, #fca5a5); border-color: var(--failure-badge-border);
} }
// 字段行样式：标签 + 值 // 字段行样式：标签 + 值
@@ -311,8 +311,8 @@
} }
.apiKeyEntryStatFailure { .apiKeyEntryStatFailure {
background: var(--failure-badge-bg, #fee2e2); background: var(--failure-badge-bg);
color: var(--failure-badge-text, #991b1b); color: var(--failure-badge-text);
} }
// OpenAI 模型发现（二级界面） // OpenAI 模型发现（二级界面）
@@ -422,11 +422,11 @@
} }
.statusBlockFailure { .statusBlockFailure {
background-color: var(--danger-color, #ef4444); background-color: var(--danger-color);
} }
.statusBlockMixed { .statusBlockMixed {
background-color: var(--warning-color, #f59e0b); background-color: var(--warning-color);
} }
.statusBlockIdle { .statusBlockIdle {
@@ -456,8 +456,8 @@
} }
.statusRateLow { .statusRateLow {
color: var(--failure-badge-text, #991b1b); color: var(--failure-badge-text);
background: var(--failure-badge-bg, #fee2e2); background: var(--failure-badge-bg);
} }
// ============================================ // ============================================
@@ -775,8 +775,8 @@
// 暗色主题适配 // 暗色主题适配
:global([data-theme='dark']) { :global([data-theme='dark']) {
.headerBadge { .headerBadge {
background: rgba(59, 130, 246, 0.15); background: rgba($primary-color, 0.14);
border-color: rgba(59, 130, 246, 0.3); border-color: rgba($primary-color, 0.35);
color: var(--text-secondary); color: var(--text-secondary);
strong { strong {
@@ -785,22 +785,22 @@
} }
.modelTag { .modelTag {
background: rgba(59, 130, 246, 0.1); background: rgba($primary-color, 0.1);
border-color: var(--border-secondary); border-color: var(--border-secondary);
} }
.excludedModelTag { .excludedModelTag {
background: rgba(251, 191, 36, 0.22); background: rgba($warning-color, 0.22);
border-color: rgba(251, 191, 36, 0.55); border-color: rgba($warning-color, 0.55);
color: #fde68a; color: var(--warning-color);
.modelName { .modelName {
color: #fde68a; color: var(--warning-color);
} }
} }
.excludedModelsLabel { .excludedModelsLabel {
color: #fde68a; color: var(--warning-color);
} }
.apiKeyEntryCard { .apiKeyEntryCard {
@@ -827,7 +827,7 @@
} }
.statusRateLow { .statusRateLow {
background: rgba(239, 68, 68, 0.2); background: rgba($error-color, 0.24);
color: #fca5a5; color: #f1b0a6;
} }
} }

32
src/pages/AuthFilesPage.module.scss
View File

@@ -56,7 +56,7 @@
.errorBox { .errorBox {
padding: $spacing-md; padding: $spacing-md;
background-color: rgba(239, 68, 68, 0.1); background-color: rgba($error-color, 0.1);
border: 1px solid var(--danger-color); border: 1px solid var(--danger-color);
border-radius: $radius-md; border-radius: $radius-md;
color: var(--danger-color); color: var(--danger-color);
@@ -382,11 +382,11 @@
} }
.quotaBarFillMedium { .quotaBarFillMedium {
background-color: var(--warning-color, #f59e0b); background-color: var(--warning-color);
} }
.quotaBarFillLow { .quotaBarFillLow {
background-color: var(--danger-color, #ef4444); background-color: var(--danger-color);
} }
.quotaMeta { .quotaMeta {
@@ -443,7 +443,7 @@
.quotaError { .quotaError {
font-size: 12px; font-size: 12px;
color: var(--danger-color); color: var(--danger-color);
background-color: rgba(239, 68, 68, 0.08); background-color: rgba($error-color, 0.08);
border: 1px solid var(--danger-color); border: 1px solid var(--danger-color);
border-radius: $radius-sm; border-radius: $radius-sm;
padding: $spacing-xs $spacing-sm; padding: $spacing-xs $spacing-sm;
@@ -451,9 +451,9 @@
.quotaWarning { .quotaWarning {
font-size: 12px; font-size: 12px;
color: var(--warning-color, #f59e0b); color: var(--warning-text);
background-color: rgba(245, 158, 11, 0.12); background-color: var(--warning-bg);
border: 1px solid var(--warning-color, #f59e0b); border: 1px solid var(--warning-border);
border-radius: $radius-sm; border-radius: $radius-sm;
padding: $spacing-xs $spacing-sm; padding: $spacing-xs $spacing-sm;
} }
@@ -586,9 +586,9 @@
} }
.statFailure { .statFailure {
background-color: var(--failure-badge-bg, #fee2e2); background-color: var(--failure-badge-bg);
color: var(--failure-badge-text, #991b1b); color: var(--failure-badge-text);
border-color: var(--failure-badge-border, #fca5a5); border-color: var(--failure-badge-border);
} }
// 状态监测栏 // 状态监测栏
@@ -627,11 +627,11 @@
} }
.statusBlockFailure { .statusBlockFailure {
background-color: var(--danger-color, #ef4444); background-color: var(--danger-color);
} }
.statusBlockMixed { .statusBlockMixed {
background-color: var(--warning-color, #f59e0b); background-color: var(--warning-color);
} }
.statusBlockIdle { .statusBlockIdle {
@@ -661,8 +661,8 @@
} }
.statusRateLow { .statusRateLow {
color: var(--failure-badge-text, #991b1b); color: var(--failure-badge-text);
background: var(--failure-badge-bg, #fee2e2); background: var(--failure-badge-bg);
} }
.prefixProxyEditor { .prefixProxyEditor {
@@ -687,7 +687,7 @@
padding: $spacing-sm $spacing-md; padding: $spacing-sm $spacing-md;
border-radius: $radius-md; border-radius: $radius-md;
border: 1px solid var(--danger-color); border: 1px solid var(--danger-color);
background-color: rgba(239, 68, 68, 0.1); background-color: rgba($error-color, 0.1);
color: var(--danger-color); color: var(--danger-color);
font-size: 12px; font-size: 12px;
} }
@@ -1097,7 +1097,7 @@
.modelExcludedBadge { .modelExcludedBadge {
font-size: 10px; font-size: 10px;
color: var(--danger-color); color: var(--danger-color);
background-color: rgba(239, 68, 68, 0.1); background-color: rgba($error-color, 0.1);
padding: 2px 6px; padding: 2px 6px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--danger-color); border: 1px solid var(--danger-color);

10
src/pages/ConfigPage.module.scss
View File

@@ -192,15 +192,15 @@
color: var(--text-secondary); color: var(--text-secondary);
&.modified { &.modified {
color: #f59e0b; color: var(--warning-color);
} }
&.saved { &.saved {
color: #16a34a; color: var(--success-color);
} }
&.error { &.error {
color: #dc2626; color: var(--danger-color);
} }
} }
@@ -395,8 +395,8 @@
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 999px; border-radius: 999px;
background: #f59e0b; background: var(--warning-color);
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25); box-shadow: 0 0 0 2px rgba($warning-color, 0.25);
} }
:global([data-theme='dark']) { :global([data-theme='dark']) {

10
src/pages/LoginPage.module.scss
View File

@@ -4,7 +4,7 @@
.container { .container {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
background: var(--bg-primary); background: var(--bg-secondary);
} }
// 左侧品牌展示区 // 左侧品牌展示区
@@ -88,7 +88,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: $spacing-2xl; padding: $spacing-2xl;
background: var(--bg-primary); background: var(--bg-secondary);
position: relative; position: relative;
@media (max-width: $breakpoint-mobile) { @media (max-width: $breakpoint-mobile) {
@@ -183,7 +183,7 @@
&:focus { &:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 3px rgba($primary-color, 0.18);
} }
} }
@@ -235,8 +235,8 @@
// 错误提示框 // 错误提示框
.errorBox { .errorBox {
background: rgba(239, 68, 68, 0.1); background: rgba($error-color, 0.1);
border: 1px solid rgba(239, 68, 68, 0.4); border: 1px solid rgba($error-color, 0.4);
border-radius: $radius-md; border-radius: $radius-md;
padding: $spacing-sm $spacing-md; padding: $spacing-sm $spacing-md;
color: $error-color; color: $error-color;

30
src/pages/LogsPage.module.scss
View File

@@ -308,7 +308,7 @@
color: var(--text-primary); color: var(--text-primary);
&:hover { &:hover {
background: rgba(59, 130, 246, 0.06); background: rgba($primary-color, 0.06);
} }
@include tablet { @include tablet {
@@ -409,14 +409,14 @@
.statusInfo { .statusInfo {
color: var(--info-color); color: var(--info-color);
background: rgba(59, 130, 246, 0.12); background: rgba($primary-color, 0.12);
border-color: rgba(59, 130, 246, 0.25); border-color: rgba($primary-color, 0.25);
} }
.statusWarn { .statusWarn {
color: var(--warning-color); color: var(--warning-text);
background: rgba(245, 158, 11, 0.14); background: var(--warning-bg);
border-color: rgba(245, 158, 11, 0.25); border-color: var(--warning-border);
} }
.statusError { .statusError {
@@ -427,20 +427,20 @@
.levelInfo { .levelInfo {
color: var(--info-color); color: var(--info-color);
background: rgba(59, 130, 246, 0.12); background: rgba($primary-color, 0.12);
border-color: rgba(59, 130, 246, 0.25); border-color: rgba($primary-color, 0.25);
} }
.levelWarn { .levelWarn {
color: var(--warning-color); color: var(--warning-text);
background: rgba(245, 158, 11, 0.14); background: var(--warning-bg);
border-color: rgba(245, 158, 11, 0.25); border-color: var(--warning-border);
} }
.levelError { .levelError {
color: var(--error-color); color: var(--error-color);
background: rgba(239, 68, 68, 0.12); background: rgba($error-color, 0.12);
border-color: rgba(239, 68, 68, 0.25); border-color: rgba($error-color, 0.25);
} }
.levelDebug, .levelDebug,
@@ -452,8 +452,8 @@
.methodBadge { .methodBadge {
color: var(--text-primary); color: var(--text-primary);
background: rgba(59, 130, 246, 0.08); background: rgba($primary-color, 0.08);
border-color: rgba(59, 130, 246, 0.22); border-color: rgba($primary-color, 0.22);
} }
.path { .path {

8
src/pages/OAuthPage.module.scss
View File

@@ -61,13 +61,13 @@
} }
&.error { &.error {
background-color: rgba(239, 68, 68, 0.1); background-color: rgba($error-color, 0.12);
color: #dc2626; color: $error-color;
} }
&.waiting { &.waiting {
background-color: rgba(59, 130, 246, 0.1); background-color: rgba($primary-color, 0.12);
color: #3b82f6; color: var(--primary-color);
} }
} }

14
src/pages/QuotaPage.module.scss
View File

@@ -65,7 +65,7 @@
.errorBox { .errorBox {
padding: $spacing-md; padding: $spacing-md;
background-color: rgba(239, 68, 68, 0.1); background-color: rgba($error-color, 0.1);
border: 1px solid var(--danger-color); border: 1px solid var(--danger-color);
border-radius: $radius-md; border-radius: $radius-md;
color: var(--danger-color); color: var(--danger-color);
@@ -233,11 +233,11 @@
} }
.quotaBarFillMedium { .quotaBarFillMedium {
background-color: var(--warning-color, #f59e0b); background-color: var(--warning-color);
} }
.quotaBarFillLow { .quotaBarFillLow {
background-color: var(--danger-color, #ef4444); background-color: var(--danger-color);
} }
.quotaMeta { .quotaMeta {
@@ -276,7 +276,7 @@
.quotaError { .quotaError {
font-size: 12px; font-size: 12px;
color: var(--danger-color); color: var(--danger-color);
background-color: rgba(239, 68, 68, 0.08); background-color: rgba($error-color, 0.08);
border: 1px solid var(--danger-color); border: 1px solid var(--danger-color);
border-radius: $radius-sm; border-radius: $radius-sm;
padding: $spacing-xs $spacing-sm; padding: $spacing-xs $spacing-sm;
@@ -284,9 +284,9 @@
.quotaWarning { .quotaWarning {
font-size: 12px; font-size: 12px;
color: var(--warning-color, #f59e0b); color: var(--warning-text);
background-color: rgba(245, 158, 11, 0.12); background-color: var(--warning-bg);
border: 1px solid var(--warning-color, #f59e0b); border: 1px solid var(--warning-border);
border-radius: $radius-sm; border-radius: $radius-sm;
padding: $spacing-xs $spacing-sm; padding: $spacing-xs $spacing-sm;
} }

2
src/pages/SystemPage.module.scss
View File

@@ -83,7 +83,7 @@
&:hover { &:hover {
transform: translateY(-1px); transform: translateY(-1px);
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 8px 18px rgba(59, 130, 246, 0.15); box-shadow: 0 8px 18px rgba($primary-color, 0.18);
} }
&:active { &:active {

32
src/pages/UsagePage.module.scss
View File

@@ -75,12 +75,12 @@
&:focus { &:focus {
outline: none; outline: none;
box-shadow: var(--shadow), 0 0 0 3px rgba(59, 130, 246, 0.15); box-shadow: var(--shadow), 0 0 0 3px rgba($primary-color, 0.18);
} }
&[aria-expanded='true'] { &[aria-expanded='true'] {
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: var(--shadow), 0 0 0 3px rgba(59, 130, 246, 0.15); box-shadow: var(--shadow), 0 0 0 3px rgba($primary-color, 0.18);
} }
} }
@@ -135,8 +135,8 @@
} }
.timeRangeOptionActive { .timeRangeOptionActive {
border-color: rgba(59, 130, 246, 0.5); border-color: rgba($primary-color, 0.5);
background: rgba(59, 130, 246, 0.10); background: rgba($primary-color, 0.1);
font-weight: 600; font-weight: 600;
} }
@@ -149,7 +149,7 @@
.errorBox { .errorBox {
padding: 10px; padding: 10px;
background-color: rgba(239, 68, 68, 0.1); background-color: rgba($error-color, 0.1);
border: 1px solid var(--error-color); border: 1px solid var(--error-color);
border-radius: $radius-sm; border-radius: $radius-sm;
color: var(--error-color); color: var(--error-color);
@@ -170,7 +170,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: rgba(243, 244, 246, 0.75); background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
} }
@@ -191,9 +191,9 @@
} }
.loadingOverlaySpinner { .loadingOverlaySpinner {
border-color: rgba(59, 130, 246, 0.25); border-color: rgba($primary-color, 0.25);
border-top-color: var(--primary-color); border-top-color: var(--primary-color);
box-shadow: 0 0 10px rgba(59, 130, 246, 0.25); box-shadow: 0 0 10px rgba($primary-color, 0.25);
} }
.loadingOverlayText { .loadingOverlayText {
@@ -214,9 +214,9 @@
} }
.statCard { .statCard {
--accent: #3b82f6; --accent: var(--primary-color);
--accent-soft: rgba(59, 130, 246, 0.18); --accent-soft: rgba($primary-color, 0.18);
--accent-border: rgba(59, 130, 246, 0.35); --accent-border: rgba($primary-color, 0.35);
grid-column: span 4; grid-column: span 4;
position: relative; position: relative;
@@ -366,11 +366,11 @@
} }
.statSuccess { .statSuccess {
color: var(--success-color, #22c55e); color: var(--success-color);
} }
.statFailure { .statFailure {
color: var(--danger-color, #ef4444); color: var(--danger-color);
} }
.statNeutral { .statNeutral {
@@ -459,8 +459,8 @@
} }
.apiSortBtnActive { .apiSortBtnActive {
border-color: rgba(59, 130, 246, 0.5); border-color: rgba($primary-color, 0.5);
background: rgba(59, 130, 246, 0.10); background: rgba($primary-color, 0.1);
color: var(--text-primary); color: var(--text-primary);
font-weight: 600; font-weight: 600;
} }
@@ -759,7 +759,7 @@
&:focus { &:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 3px rgba($primary-color, 0.18);
} }
} }

26
src/styles/components.scss
View File

@@ -78,14 +78,14 @@ textarea {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: $radius-md; border-radius: $radius-md;
padding: 10px 12px; padding: 10px 12px;
background-color: var(--bg-primary); background-color: var(--bg-secondary);
color: var(--text-primary); color: var(--text-primary);
transition: border-color $transition-fast, box-shadow $transition-fast; transition: border-color $transition-fast, box-shadow $transition-fast;
&:focus { &:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 3px rgba($primary-color, 0.18);
} }
} }
@@ -144,20 +144,20 @@ textarea {
&.success { &.success {
color: $success-color; color: $success-color;
border-color: rgba(16, 185, 129, 0.35); border-color: rgba($success-color, 0.35);
background: rgba(16, 185, 129, 0.08); background: rgba($success-color, 0.08);
} }
&.warning { &.warning {
color: $warning-color; color: $warning-color;
border-color: rgba(245, 158, 11, 0.35); border-color: rgba($warning-color, 0.35);
background: rgba(245, 158, 11, 0.08); background: rgba($warning-color, 0.08);
} }
&.error { &.error {
color: $error-color; color: $error-color;
border-color: rgba(239, 68, 68, 0.35); border-color: rgba($error-color, 0.35);
background: rgba(239, 68, 68, 0.08); background: rgba($error-color, 0.08);
} }
&.muted { &.muted {
@@ -220,13 +220,13 @@ textarea {
} }
&.success { &.success {
border-color: rgba(16, 185, 129, 0.4); border-color: rgba($success-color, 0.4);
} }
&.warning { &.warning {
border-color: rgba(245, 158, 11, 0.4); border-color: rgba($warning-color, 0.4);
} }
&.error { &.error {
border-color: rgba(239, 68, 68, 0.4); border-color: rgba($error-color, 0.4);
} }
.message { .message {
@@ -611,8 +611,8 @@ textarea {
} }
.error-box { .error-box {
background: rgba(239, 68, 68, 0.1); background: rgba($error-color, 0.1);
border: 1px solid rgba(239, 68, 68, 0.4); border: 1px solid rgba($error-color, 0.4);
border-radius: $radius-md; border-radius: $radius-md;
padding: $spacing-sm $spacing-md; padding: $spacing-sm $spacing-md;
color: $error-color; color: $error-color;

6
src/styles/layout.scss
View File

@@ -229,7 +229,7 @@
&:focus-visible { &:focus-visible {
outline: none; outline: none;
background: var(--bg-secondary); background: var(--bg-secondary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); box-shadow: 0 0 0 2px rgba($primary-color, 0.22);
} }
&.active { &.active {
@@ -382,9 +382,9 @@
} }
&.active { &.active {
background: rgba(59, 130, 246, 0.12); background: rgba($primary-color, 0.14);
color: var(--primary-color); color: var(--primary-color);
border: 1px solid rgba(59, 130, 246, 0.3); border: 1px solid rgba($primary-color, 0.35);
} }
} }

93
src/styles/themes.scss
View File

@@ -4,39 +4,55 @@
// 浅色主题（默认） // 浅色主题（默认）
:root { :root {
--bg-primary: #ffffff; // 极简暖灰：浅色模式
--bg-secondary: #f3f4f6; --bg-secondary: #faf9f5; // 页面背景（纸感）
--bg-tertiary: #e5e7eb; --bg-primary: #f0eee8; // 容器/卡片背景
--bg-tertiary: #e9e6df; // hover/次级背景
--bg-hover: var(--bg-tertiary);
--bg-quinary: #f6f4ee;
--bg-error-light: rgba(198, 87, 70, 0.1);
--text-primary: #1f2937; --text-primary: #2d2a26;
--text-secondary: #6b7280; --text-secondary: #6d6760;
--text-tertiary: #9ca3af; --text-tertiary: #a29c95;
--text-quaternary: #c0bab3;
--text-muted: var(--text-tertiary);
--border-color: #e5e7eb; --border-color: #e3e1db; // 边框/分割线
--border-hover: #d1d5db; --border-secondary: var(--border-color);
--border-primary: #d5d2cb;
--border-hover: #cecac4;
--primary-color: #3b82f6; --primary-color: #8b8680; // 行动色（主色）
--primary-hover: #2563eb; --primary-hover: #7f7a74;
--primary-active: #1d4ed8; --primary-active: #726d67;
--success-color: #10b981; --success-color: #10b981;
--warning-color: #f59e0b; --warning-color: #c65746; // 错误/警告色
--error-color: #ef4444; --error-color: #c65746;
--info-color: #3b82f6; --danger-color: var(--error-color);
--info-color: var(--primary-color);
--warning-bg: rgba(198, 87, 70, 0.12);
--warning-border: rgba(198, 87, 70, 0.35);
--warning-text: var(--warning-color);
--success-badge-bg: #d1fae5; --success-badge-bg: #d1fae5;
--success-badge-text: #065f46; --success-badge-text: #065f46;
--success-badge-border: #6ee7b7; --success-badge-border: #6ee7b7;
--failure-badge-bg: #fee2e2; --failure-badge-bg: rgba(198, 87, 70, 0.14);
--failure-badge-text: #991b1b; --failure-badge-text: #8a3a30;
--failure-badge-border: #fca5a5; --failure-badge-border: rgba(198, 87, 70, 0.35);
--count-badge-bg: rgba(59, 130, 246, 0.14); --count-badge-bg: rgba(139, 134, 128, 0.18);
--count-badge-text: var(--primary-active); --count-badge-text: var(--primary-active);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 18px -3px rgb(0 0 0 / 0.1);
--radius-md: 8px;
--accent-tertiary: var(--bg-tertiary);
} }
// 深色主题（#191919） // 深色主题（#191919）
@@ -44,34 +60,49 @@
--bg-primary: #202020; --bg-primary: #202020;
--bg-secondary: #191919; --bg-secondary: #191919;
--bg-tertiary: #262626; --bg-tertiary: #262626;
--bg-hover: #2a2a2a;
--bg-quinary: #1f1f1f;
--bg-error-light: rgba(198, 87, 70, 0.18);
--text-primary: #fafafa; --text-primary: #fafafa;
--text-secondary: #a3a3a3; --text-secondary: #a3a3a3;
--text-tertiary: #737373; --text-tertiary: #737373;
--text-quaternary: #525252;
--text-muted: var(--text-tertiary);
--border-color: #262626; --border-color: #262626;
--border-hover: #404040; --border-secondary: var(--border-color);
--border-primary: #404040;
--border-hover: #4a4a4a;
--primary-color: #3b82f6; --primary-color: #8b8680;
--primary-hover: #60a5fa; --primary-hover: #a39e98;
--primary-active: #93c5fd; --primary-active: #bcb7b1;
--success-color: #10b981; --success-color: #10b981;
--warning-color: #f59e0b; --warning-color: #c65746;
--error-color: #ef4444; --error-color: #c65746;
--info-color: #3b82f6; --danger-color: var(--error-color);
--info-color: var(--primary-color);
--warning-bg: rgba(198, 87, 70, 0.22);
--warning-border: rgba(198, 87, 70, 0.45);
--warning-text: var(--warning-color);
--success-badge-bg: rgba(6, 78, 59, 0.3); --success-badge-bg: rgba(6, 78, 59, 0.3);
--success-badge-text: #6ee7b7; --success-badge-text: #6ee7b7;
--success-badge-border: #059669; --success-badge-border: #059669;
--failure-badge-bg: rgba(153, 27, 27, 0.3); --failure-badge-bg: rgba(198, 87, 70, 0.24);
--failure-badge-text: #fca5a5; --failure-badge-text: #f1b0a6;
--failure-badge-border: #dc2626; --failure-badge-border: rgba(198, 87, 70, 0.5);
--count-badge-bg: rgba(59, 130, 246, 0.25); --count-badge-bg: rgba(139, 134, 128, 0.28);
--count-badge-text: var(--primary-active); --count-badge-text: var(--primary-active);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
--radius-md: 8px;
--accent-tertiary: var(--bg-tertiary);
} }

8
src/styles/variables.scss
View File

@@ -3,11 +3,11 @@
*/ */
// 颜色 // 颜色
$primary-color: #3b82f6; $primary-color: #8b8680;
$success-color: #10b981; $success-color: #10b981;
$warning-color: #f59e0b; $warning-color: #c65746;
$error-color: #ef4444; $error-color: #c65746;
$info-color: #3b82f6; $info-color: #8b8680;
// 灰阶 // 灰阶
$gray-50: #f9fafb; $gray-50: #f9fafb;

4
src/utils/usage.ts
View File

@@ -1003,10 +1003,10 @@ export interface ChartData {
} }
const CHART_COLORS = [ const CHART_COLORS = [
{ borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' }, { borderColor: '#8b8680', backgroundColor: 'rgba(139, 134, 128, 0.15)' },
{ borderColor: '#22c55e', backgroundColor: 'rgba(34, 197, 94, 0.15)' }, { borderColor: '#22c55e', backgroundColor: 'rgba(34, 197, 94, 0.15)' },
{ borderColor: '#f59e0b', backgroundColor: 'rgba(245, 158, 11, 0.15)' }, { borderColor: '#f59e0b', backgroundColor: 'rgba(245, 158, 11, 0.15)' },
{ borderColor: '#ef4444', backgroundColor: 'rgba(239, 68, 68, 0.15)' }, { borderColor: '#c65746', backgroundColor: 'rgba(198, 87, 70, 0.15)' },
{ borderColor: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.15)' }, { borderColor: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.15)' },
{ borderColor: '#06b6d4', backgroundColor: 'rgba(6, 182, 212, 0.15)' }, { borderColor: '#06b6d4', backgroundColor: 'rgba(6, 182, 212, 0.15)' },
{ borderColor: '#ec4899', backgroundColor: 'rgba(236, 72, 153, 0.15)' }, { borderColor: '#ec4899', backgroundColor: 'rgba(236, 72, 153, 0.15)' },