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-03 03:10:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add INLINE_LOGO_JPEG to MainLayout for branding, enhance layout styles in UsagePage for improved spacing and responsiveness, and update layout.scss for better logo handling and alignment

Browse Source
This commit is contained in:
Supra4E8C
2025-12-10 22:56:47 +08:00
parent bf5f34be0d
commit 841dfa8a61
4 changed files with 159 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/logoInline.ts Normal file
View File

File diff suppressed because one or more lines are too long

7
src/components/layout/MainLayout.tsx
View File

@@ -2,6 +2,7 @@ import { ReactNode, SVGProps, useCallback, useEffect, useLayoutEffect, useMemo,
import { NavLink, Outlet } from 'react-router-dom'; import { NavLink, Outlet } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/Button'; import { Button } from '@/components/ui/Button';
import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
import { useAuthStore, useConfigStore, useLanguageStore, useNotificationStore, useThemeStore } from '@/stores'; import { useAuthStore, useConfigStore, useLanguageStore, useNotificationStore, useThemeStore } from '@/stores';
import { versionApi } from '@/services/api'; import { versionApi } from '@/services/api';
import { isLocalhost } from '@/utils/connection'; import { isLocalhost } from '@/utils/connection';
@@ -281,6 +282,7 @@ export function MainLayout() {
> >
{sidebarCollapsed ? '»' : '«'} {sidebarCollapsed ? '»' : '«'}
</button> </button>
<img src={INLINE_LOGO_JPEG} alt="CPAMC logo" className="brand-logo" />
<div <div
className={`brand-header ${brandExpanded ? 'expanded' : 'collapsed'}`} className={`brand-header ${brandExpanded ? 'expanded' : 'collapsed'}`}
onClick={handleBrandClick} onClick={handleBrandClick}
@@ -292,6 +294,9 @@ export function MainLayout() {
<Button className="mobile-menu-btn" variant="ghost" size="sm" onClick={() => setSidebarOpen((prev) => !prev)}> <Button className="mobile-menu-btn" variant="ghost" size="sm" onClick={() => setSidebarOpen((prev) => !prev)}>
☰ ☰
</Button> </Button>
</div>
<div className="right">
<div className="connection"> <div className="connection">
<span className={`status-badge ${statusClass}`}> <span className={`status-badge ${statusClass}`}>
{t( {t(
@@ -304,7 +309,6 @@ export function MainLayout() {
</span> </span>
<span className="base">{apiBase || '-'}</span> <span className="base">{apiBase || '-'}</span>
</div> </div>
</div>
<div className="header-actions"> <div className="header-actions">
<Button variant="ghost" size="sm" onClick={handleRefreshAll} title={t('header.refresh_all')}> <Button variant="ghost" size="sm" onClick={handleRefreshAll} title={t('header.refresh_all')}>
@@ -320,6 +324,7 @@ export function MainLayout() {
{theme === 'dark' ? '☀' : '☾'} {theme === 'dark' ? '☀' : '☾'}
</Button> </Button>
</div> </div>
</div>
</header> </header>
<div className="main-body"> <div className="main-body">

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

@@ -5,7 +5,21 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-lg; gap: 16px;
// 覆盖Card组件样式 (80%比例)
:global(.card) {
padding: 12px;
border-radius: $radius-md;
}
:global(.card-header) {
margin-bottom: 10px;
.title {
font-size: 14px;
}
}
} }
.header { .header {
@@ -13,37 +27,37 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: $spacing-md; gap: 10px;
} }
.pageTitle { .pageTitle {
font-size: 28px; font-size: 22px;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
} }
.errorBox { .errorBox {
padding: $spacing-md; padding: 10px;
background-color: rgba(239, 68, 68, 0.1); background-color: rgba(239, 68, 68, 0.1);
border: 1px solid var(--danger-color); border: 1px solid var(--danger-color);
border-radius: $radius-md; border-radius: $radius-sm;
color: var(--danger-color); color: var(--danger-color);
font-size: 14px; font-size: 12px;
} }
.hint { .hint {
color: var(--text-secondary); color: var(--text-secondary);
font-size: 14px; font-size: 12px;
text-align: center; text-align: center;
padding: $spacing-lg; padding: 16px;
} }
// Stats Grid // Stats Grid - 五个卡片并排显示 (80%比例)
.statsGrid { .statsGrid {
display: grid; display: grid;
gap: $spacing-md; gap: 6px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-template-columns: repeat(5, 1fr);
@include tablet { @include tablet {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@@ -55,14 +69,14 @@
} }
.statCard { .statCard {
padding: $spacing-lg; padding: 12px;
background-color: var(--bg-primary); background-color: var(--bg-primary);
border-radius: $radius-lg; border-radius: $radius-md;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-sm; gap: 4px;
min-height: 200px; min-height: 130px;
box-shadow: $shadow-sm; box-shadow: $shadow-sm;
transition: transform $transition-fast, box-shadow $transition-fast, border-color $transition-fast; transition: transform $transition-fast, box-shadow $transition-fast, border-color $transition-fast;
overflow: hidden; overflow: hidden;
@@ -78,24 +92,25 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: $spacing-sm; gap: 4px;
} }
.statLabelGroup { .statLabelGroup {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 1px;
} }
.statIconBadge { .statIconBadge {
width: 40px; width: 26px;
height: 40px; height: 26px;
border-radius: $radius-md; border-radius: $radius-sm;
display: grid; display: grid;
place-items: center; place-items: center;
color: #fff; color: #fff;
font-size: 18px; font-size: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
flex-shrink: 0;
} }
.statHeader { .statHeader {
@@ -109,7 +124,7 @@
} }
.statLabel { .statLabel {
font-size: 13px; font-size: 10px;
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 600; font-weight: 600;
letter-spacing: 0.01em; letter-spacing: 0.01em;
@@ -117,7 +132,7 @@
} }
.statValue { .statValue {
font-size: 30px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
line-height: 1.2; line-height: 1.2;
@@ -167,20 +182,20 @@
.statMetaRow { .statMetaRow {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: $spacing-sm; gap: 3px;
font-size: 12px; font-size: 9px;
color: var(--text-secondary); color: var(--text-secondary);
} }
.statMetaItem { .statMetaItem {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 3px;
} }
.statMetaDot { .statMetaDot {
width: 8px; width: 5px;
height: 8px; height: 5px;
border-radius: 50%; border-radius: 50%;
background-color: var(--text-secondary); background-color: var(--text-secondary);
} }
@@ -192,9 +207,9 @@
.statTrend { .statTrend {
margin-top: auto; margin-top: auto;
background: var(--bg-secondary, #f6f8fb); background: var(--bg-secondary, #f6f8fb);
border-radius: $radius-md; border-radius: $radius-sm;
padding: $spacing-xs $spacing-sm; padding: 3px;
height: 72px; height: 40px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
} }
@@ -215,16 +230,16 @@
font-style: italic; font-style: italic;
} }
// API List // API List (80%比例)
.apiList { .apiList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-sm; gap: 6px;
} }
.apiItem { .apiItem {
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
border-radius: $radius-md; border-radius: $radius-sm;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
overflow: hidden; overflow: hidden;
} }
@@ -233,7 +248,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: $spacing-md; padding: 10px;
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease; transition: background-color 0.15s ease;
@@ -245,7 +260,7 @@
.apiInfo { .apiInfo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-xs; gap: 3px;
min-width: 0; min-width: 0;
flex: 1; flex: 1;
} }
@@ -253,53 +268,53 @@
.apiEndpoint { .apiEndpoint {
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
font-size: 14px; font-size: 12px;
word-break: break-all; word-break: break-all;
} }
.apiStats { .apiStats {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: $spacing-xs; gap: 3px;
} }
.apiBadge { .apiBadge {
font-size: 12px; font-size: 10px;
color: var(--text-secondary); color: var(--text-secondary);
background-color: var(--bg-tertiary); background-color: var(--bg-tertiary);
padding: 2px 8px; padding: 1px 6px;
border-radius: $radius-sm; border-radius: $radius-sm;
} }
.expandIcon { .expandIcon {
color: var(--text-secondary); color: var(--text-secondary);
font-size: 12px; font-size: 10px;
margin-left: $spacing-sm; margin-left: 6px;
} }
.apiModels { .apiModels {
padding: $spacing-md; padding: 10px;
padding-top: 0; padding-top: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-xs; gap: 3px;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
margin-top: 0; margin-top: 0;
padding-top: $spacing-md; padding-top: 10px;
} }
.modelRow { .modelRow {
display: grid; display: grid;
grid-template-columns: 1fr auto auto; grid-template-columns: 1fr auto auto;
gap: $spacing-md; gap: 10px;
padding: $spacing-xs $spacing-sm; padding: 3px 6px;
background-color: var(--bg-primary); background-color: var(--bg-primary);
border-radius: $radius-sm; border-radius: $radius-sm;
font-size: 13px; font-size: 11px;
@include mobile { @include mobile {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: $spacing-xs; gap: 3px;
} }
} }
@@ -318,7 +333,7 @@
} }
} }
// Table // Table (80%比例)
.tableWrapper { .tableWrapper {
overflow-x: auto; overflow-x: auto;
} }
@@ -326,10 +341,10 @@
.table { .table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: 14px; font-size: 11px;
th, td { th, td {
padding: $spacing-sm $spacing-md; padding: 6px 10px;
text-align: left; text-align: left;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
@@ -352,27 +367,27 @@
.modelCell { .modelCell {
font-weight: 500; font-weight: 500;
max-width: 300px; max-width: 240px;
word-break: break-all; word-break: break-all;
} }
// Pricing Section // Pricing Section (80%比例)
.pricingSection { .pricingSection {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-lg; gap: 16px;
} }
.priceForm { .priceForm {
padding: $spacing-md; padding: 10px;
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
border-radius: $radius-md; border-radius: $radius-sm;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
} }
.formRow { .formRow {
display: flex; display: flex;
gap: $spacing-md; gap: 10px;
align-items: flex-end; align-items: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
@@ -385,24 +400,24 @@
.formField { .formField {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-xs; gap: 3px;
flex: 1; flex: 1;
min-width: 150px; min-width: 120px;
label { label {
font-size: 12px; font-size: 10px;
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 500; font-weight: 500;
} }
} }
.select { .select {
padding: 8px 12px; padding: 6px 10px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: $radius-md; border-radius: $radius-sm;
background-color: var(--bg-primary); background-color: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
font-size: 14px; font-size: 11px;
cursor: pointer; cursor: pointer;
&:focus { &:focus {
@@ -414,11 +429,11 @@
.pricesList { .pricesList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-md; gap: 10px;
} }
.pricesTitle { .pricesTitle {
font-size: 14px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
@@ -427,18 +442,18 @@
.pricesGrid { .pricesGrid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-sm; gap: 6px;
} }
.priceItem { .priceItem {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: $spacing-md; padding: 10px;
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
border-radius: $radius-md; border-radius: $radius-sm;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
gap: $spacing-md; gap: 10px;
@include mobile { @include mobile {
flex-direction: column; flex-direction: column;
@@ -449,7 +464,7 @@
.priceInfo { .priceInfo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-xs; gap: 3px;
min-width: 0; min-width: 0;
flex: 1; flex: 1;
} }
@@ -457,40 +472,40 @@
.priceModel { .priceModel {
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
font-size: 14px; font-size: 11px;
word-break: break-all; word-break: break-all;
} }
.priceMeta { .priceMeta {
display: flex; display: flex;
gap: $spacing-md; gap: 10px;
font-size: 12px; font-size: 10px;
color: var(--text-secondary); color: var(--text-secondary);
@include mobile { @include mobile {
flex-direction: column; flex-direction: column;
gap: $spacing-xs; gap: 3px;
} }
} }
.priceActions { .priceActions {
display: flex; display: flex;
gap: $spacing-xs; gap: 3px;
flex-shrink: 0; flex-shrink: 0;
} }
// Chart Section (for future use) // Chart Section (80%比例)
.chartSection { .chartSection {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-md; gap: 10px;
} }
.chartControls { .chartControls {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: $spacing-md; gap: 10px;
@include mobile { @include mobile {
flex-direction: column; flex-direction: column;
@@ -499,25 +514,25 @@
} }
.chartWrapper { .chartWrapper {
padding: $spacing-lg; padding: 16px;
background-color: var(--bg-primary); background-color: var(--bg-primary);
border-radius: $radius-lg; border-radius: $radius-md;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
min-height: 300px; min-height: 240px;
height: 300px; height: 240px;
} }
.periodButtons { .periodButtons {
display: flex; display: flex;
gap: $spacing-xs; gap: 3px;
} }
// Chart Line Controls // Chart Line Controls (80%比例)
.chartLineControls { .chartLineControls {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: $spacing-lg; gap: 16px;
flex-wrap: wrap; flex-wrap: wrap;
@include mobile { @include mobile {
@@ -528,14 +543,14 @@
.chartLineList { .chartLineList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-sm; gap: 6px;
flex: 1; flex: 1;
} }
.chartLineItem { .chartLineItem {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-sm; gap: 6px;
flex-wrap: wrap; flex-wrap: wrap;
@include mobile { @include mobile {
@@ -545,27 +560,27 @@
} }
.chartLineLabel { .chartLineLabel {
font-size: 14px; font-size: 11px;
color: var(--text-secondary); color: var(--text-secondary);
min-width: 60px; min-width: 48px;
} }
.chartLineActions { .chartLineActions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-sm; gap: 6px;
flex-shrink: 0; flex-shrink: 0;
} }
.chartLineCount { .chartLineCount {
font-size: 14px; font-size: 11px;
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 500; font-weight: 500;
} }
.chartLineHint { .chartLineHint {
font-size: 12px; font-size: 10px;
color: var(--text-tertiary); color: var(--text-tertiary);
margin: $spacing-sm 0 0 0; margin: 6px 0 0 0;
font-style: italic; font-style: italic;
} }

31
src/styles/layout.scss
View File

@@ -37,6 +37,29 @@
align-items: center; align-items: center;
gap: $spacing-sm; gap: $spacing-sm;
min-width: 0; min-width: 0;
flex: 0 1 auto;
.brand-logo {
height: 32px;
width: 32px;
object-fit: contain;
flex-shrink: 0;
border-radius: $radius-sm;
}
}
.right {
display: flex;
align-items: center;
gap: $spacing-md;
min-width: 0;
flex: 1 1 auto;
justify-content: flex-end;
@media (max-width: $breakpoint-mobile) {
flex: 0 1 auto;
gap: $spacing-sm;
}
} }
.sidebar-toggle-header { .sidebar-toggle-header {
@@ -165,6 +188,13 @@
gap: $spacing-sm; gap: $spacing-sm;
color: var(--text-secondary); color: var(--text-secondary);
min-width: 0; min-width: 0;
flex-shrink: 1;
overflow: hidden;
.status-badge {
flex-shrink: 0;
white-space: nowrap;
}
.base { .base {
font-weight: 600; font-weight: 600;
@@ -172,6 +202,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
min-width: 80px;
} }
@media (max-width: $breakpoint-mobile) { @media (max-width: $breakpoint-mobile) {