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-18 10:40:50 +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={{
padding: '10px 12px',
borderRadius: 10,
border: active ? '1px solid rgba(59, 130, 246, 0.5)' : '1px solid var(--border-color)',
background: active ? 'rgba(59, 130, 246, 0.10)' : 'var(--bg-primary)',
border: active
? '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)',
cursor: 'pointer',
textAlign: 'left',

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

@@ -114,7 +114,7 @@
&.selected {
border-color: var(--primary-color);
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 = [
'#3b82f6', '#10b981', '#f59e0b', '#ef4444',
'#8b8680', '#10b981', '#f59e0b', '#c65746',
'#8b5cf6', '#ec4899', '#06b6d4', '#84cc16'
];

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

@@ -17,12 +17,12 @@
flex-direction: row;
gap: 6px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.7);
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
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;
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;
scrollbar-width: none;
max-width: inherit;
@@ -39,7 +39,7 @@
pointer-events: none;
opacity: 0;
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);
transition: transform 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']) {
.navList {
background: rgba(30, 30, 30, 0.7);
border-color: rgba(255, 255, 255, 0.1);
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
@@ -116,7 +116,7 @@
}
.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',
label: t('usage_stats.total_requests'),
icon: <IconSatellite size={16} />,
accent: '#3b82f6',
accentSoft: 'rgba(59, 130, 246, 0.18)',
accentBorder: 'rgba(59, 130, 246, 0.35)',
accent: '#8b8680',
accentSoft: 'rgba(139, 134, 128, 0.18)',
accentBorder: 'rgba(139, 134, 128, 0.35)',
value: loading ? '-' : (usage?.total_requests ?? 0).toLocaleString(),
meta: (
<>
@@ -67,7 +67,7 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
{t('usage_stats.success_requests')}: {loading ? '-' : (usage?.success_count ?? 0)}
</span>
<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)}
</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';
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)' },
cached: { border: '#f59e0b', bg: 'rgba(245, 158, 11, 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(
() => buildSparkline(buildLastHourSeries('requests'), '#3b82f6', 'rgba(59, 130, 246, 0.18)'),
() => buildSparkline(buildLastHourSeries('requests'), '#8b8680', 'rgba(139, 134, 128, 0.18)'),
[buildLastHourSeries, buildSparkline]
);

2
src/pages/AiProvidersOpenAIEditPage.tsx
View File

@@ -59,7 +59,7 @@ function StatusSuccessIcon() {
function StatusErrorIcon() {
return (
<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
d="M5 5L11 11M11 5L5 11"
stroke="white"

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@
.container {
min-height: 100vh;
display: flex;
background: var(--bg-primary);
background: var(--bg-secondary);
}
// 左侧品牌展示区
@@ -88,7 +88,7 @@
justify-content: center;
align-items: center;
padding: $spacing-2xl;
background: var(--bg-primary);
background: var(--bg-secondary);
position: relative;
@media (max-width: $breakpoint-mobile) {
@@ -183,7 +183,7 @@
&:focus {
outline: none;
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 {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.4);
background: rgba($error-color, 0.1);
border: 1px solid rgba($error-color, 0.4);
border-radius: $radius-md;
padding: $spacing-sm $spacing-md;
color: $error-color;

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

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

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

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

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

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

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

@@ -83,7 +83,7 @@
&:hover {
transform: translateY(-1px);
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 {

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

@@ -75,12 +75,12 @@
&:focus {
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'] {
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 {
border-color: rgba(59, 130, 246, 0.5);
background: rgba(59, 130, 246, 0.10);
border-color: rgba($primary-color, 0.5);
background: rgba($primary-color, 0.1);
font-weight: 600;
}
@@ -149,7 +149,7 @@
.errorBox {
padding: 10px;
background-color: rgba(239, 68, 68, 0.1);
background-color: rgba($error-color, 0.1);
border: 1px solid var(--error-color);
border-radius: $radius-sm;
color: var(--error-color);
@@ -170,7 +170,7 @@
display: flex;
align-items: 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);
-webkit-backdrop-filter: blur(6px);
}
@@ -191,9 +191,9 @@
}
.loadingOverlaySpinner {
border-color: rgba(59, 130, 246, 0.25);
border-color: rgba($primary-color, 0.25);
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 {
@@ -214,9 +214,9 @@
}
.statCard {
--accent: #3b82f6;
--accent-soft: rgba(59, 130, 246, 0.18);
--accent-border: rgba(59, 130, 246, 0.35);
--accent: var(--primary-color);
--accent-soft: rgba($primary-color, 0.18);
--accent-border: rgba($primary-color, 0.35);
grid-column: span 4;
position: relative;
@@ -366,11 +366,11 @@
}
.statSuccess {
color: var(--success-color, #22c55e);
color: var(--success-color);
}
.statFailure {
color: var(--danger-color, #ef4444);
color: var(--danger-color);
}
.statNeutral {
@@ -459,8 +459,8 @@
}
.apiSortBtnActive {
border-color: rgba(59, 130, 246, 0.5);
background: rgba(59, 130, 246, 0.10);
border-color: rgba($primary-color, 0.5);
background: rgba($primary-color, 0.1);
color: var(--text-primary);
font-weight: 600;
}
@@ -759,7 +759,7 @@
&:focus {
outline: none;
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-radius: $radius-md;
padding: 10px 12px;
background-color: var(--bg-primary);
background-color: var(--bg-secondary);
color: var(--text-primary);
transition: border-color $transition-fast, box-shadow $transition-fast;
&:focus {
outline: none;
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 {
color: $success-color;
border-color: rgba(16, 185, 129, 0.35);
background: rgba(16, 185, 129, 0.08);
border-color: rgba($success-color, 0.35);
background: rgba($success-color, 0.08);
}
&.warning {
color: $warning-color;
border-color: rgba(245, 158, 11, 0.35);
background: rgba(245, 158, 11, 0.08);
border-color: rgba($warning-color, 0.35);
background: rgba($warning-color, 0.08);
}
&.error {
color: $error-color;
border-color: rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.08);
border-color: rgba($error-color, 0.35);
background: rgba($error-color, 0.08);
}
&.muted {
@@ -220,13 +220,13 @@ textarea {
}
&.success {
border-color: rgba(16, 185, 129, 0.4);
border-color: rgba($success-color, 0.4);
}
&.warning {
border-color: rgba(245, 158, 11, 0.4);
border-color: rgba($warning-color, 0.4);
}
&.error {
border-color: rgba(239, 68, 68, 0.4);
border-color: rgba($error-color, 0.4);
}
.message {
@@ -611,8 +611,8 @@ textarea {
}
.error-box {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.4);
background: rgba($error-color, 0.1);
border: 1px solid rgba($error-color, 0.4);
border-radius: $radius-md;
padding: $spacing-sm $spacing-md;
color: $error-color;

6
src/styles/layout.scss
View File

@@ -229,7 +229,7 @@
&:focus-visible {
outline: none;
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 {
@@ -382,9 +382,9 @@
}
&.active {
background: rgba(59, 130, 246, 0.12);
background: rgba($primary-color, 0.14);
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 {
--bg-primary: #ffffff;
--bg-secondary: #f3f4f6;
--bg-tertiary: #e5e7eb;
// 极简暖灰：浅色模式
--bg-secondary: #faf9f5; // 页面背景（纸感）
--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-secondary: #6b7280;
--text-tertiary: #9ca3af;
--text-primary: #2d2a26;
--text-secondary: #6d6760;
--text-tertiary: #a29c95;
--text-quaternary: #c0bab3;
--text-muted: var(--text-tertiary);
--border-color: #e5e7eb;
--border-hover: #d1d5db;
--border-color: #e3e1db; // 边框/分割线
--border-secondary: var(--border-color);
--border-primary: #d5d2cb;
--border-hover: #cecac4;
--primary-color: #3b82f6;
--primary-hover: #2563eb;
--primary-active: #1d4ed8;
--primary-color: #8b8680; // 行动色（主色）
--primary-hover: #7f7a74;
--primary-active: #726d67;
--success-color: #10b981;
--warning-color: #f59e0b;
--error-color: #ef4444;
--info-color: #3b82f6;
--warning-color: #c65746; // 错误/警告色
--error-color: #c65746;
--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-text: #065f46;
--success-badge-border: #6ee7b7;
--failure-badge-bg: #fee2e2;
--failure-badge-text: #991b1b;
--failure-badge-border: #fca5a5;
--failure-badge-bg: rgba(198, 87, 70, 0.14);
--failure-badge-text: #8a3a30;
--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);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
--shadow-lg: 0 10px 18px -3px rgb(0 0 0 / 0.1);
--radius-md: 8px;
--accent-tertiary: var(--bg-tertiary);
}
// 深色主题（#191919）
@@ -44,34 +60,49 @@
--bg-primary: #202020;
--bg-secondary: #191919;
--bg-tertiary: #262626;
--bg-hover: #2a2a2a;
--bg-quinary: #1f1f1f;
--bg-error-light: rgba(198, 87, 70, 0.18);
--text-primary: #fafafa;
--text-secondary: #a3a3a3;
--text-tertiary: #737373;
--text-quaternary: #525252;
--text-muted: var(--text-tertiary);
--border-color: #262626;
--border-hover: #404040;
--border-secondary: var(--border-color);
--border-primary: #404040;
--border-hover: #4a4a4a;
--primary-color: #3b82f6;
--primary-hover: #60a5fa;
--primary-active: #93c5fd;
--primary-color: #8b8680;
--primary-hover: #a39e98;
--primary-active: #bcb7b1;
--success-color: #10b981;
--warning-color: #f59e0b;
--error-color: #ef4444;
--info-color: #3b82f6;
--warning-color: #c65746;
--error-color: #c65746;
--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-text: #6ee7b7;
--success-badge-border: #059669;
--failure-badge-bg: rgba(153, 27, 27, 0.3);
--failure-badge-text: #fca5a5;
--failure-badge-border: #dc2626;
--failure-badge-bg: rgba(198, 87, 70, 0.24);
--failure-badge-text: #f1b0a6;
--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);
--shadow: 0 1px 3px 0 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;
$warning-color: #f59e0b;
$error-color: #ef4444;
$info-color: #3b82f6;
$warning-color: #c65746;
$error-color: #c65746;
$info-color: #8b8680;
// 灰阶
$gray-50: #f9fafb;

4
src/utils/usage.ts
View File

@@ -1003,10 +1003,10 @@ export interface ChartData {
}
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: '#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: '#06b6d4', backgroundColor: 'rgba(6, 182, 212, 0.15)' },
{ borderColor: '#ec4899', backgroundColor: 'rgba(236, 72, 153, 0.15)' },