mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-18 10:40:50 +08:00
feat(dashboard): add dashboard page with stats and splash screen
This commit is contained in:
Supra4E8C
223
src/pages/DashboardPage.module.scss
Normal file
223
src/pages/DashboardPage.module.scss
Normal file
@@ -0,0 +1,223 @@
|
||||
@use 'sass:color';
|
||||
@use '../styles/variables.scss' as *;
|
||||
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-lg;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 15px;
|
||||
color: var(--text-secondary);
|
||||
margin: $spacing-xs 0 0 0;
|
||||
}
|
||||
|
||||
.connectionCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacing-md;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: $radius-lg;
|
||||
padding: $spacing-md $spacing-lg;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.connectionStatus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.statusDot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: $gray-400;
|
||||
|
||||
&.connected {
|
||||
background: $success-color;
|
||||
box-shadow: 0 0 8px rgba($success-color, 0.5);
|
||||
}
|
||||
|
||||
&.connecting {
|
||||
background: $warning-color;
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&.disconnected {
|
||||
background: $error-color;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.statusText {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.connectionInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.serverUrl {
|
||||
font-family: $font-mono;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-primary);
|
||||
padding: 4px 10px;
|
||||
border-radius: $radius-md;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.serverVersion {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
background: rgba($primary-color, 0.1);
|
||||
padding: 4px 10px;
|
||||
border-radius: $radius-full;
|
||||
}
|
||||
|
||||
.statsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
.statCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
padding: $spacing-lg;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: $radius-lg;
|
||||
text-decoration: none;
|
||||
transition: all $transition-fast;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.statIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: $radius-md;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.statContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.actionsGrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacing-sm;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.configGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.configItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacing-sm;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: $radius-md;
|
||||
}
|
||||
|
||||
.configLabel {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.configValue {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
|
||||
&.enabled {
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
184
src/pages/DashboardPage.tsx
Normal file
184
src/pages/DashboardPage.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { IconKey, IconBot, IconFileText, IconChartLine, IconSettings, IconShield } from '@/components/ui/icons';
|
||||
import { useAuthStore, useConfigStore } from '@/stores';
|
||||
import { apiKeysApi, providersApi, authFilesApi } from '@/services/api';
|
||||
import styles from './DashboardPage.module.scss';
|
||||
|
||||
interface QuickStat {
|
||||
label: string;
|
||||
value: number | string;
|
||||
icon: React.ReactNode;
|
||||
path: string;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export function DashboardPage() {
|
||||
const { t } = useTranslation();
|
||||
const connectionStatus = useAuthStore((state) => state.connectionStatus);
|
||||
const serverVersion = useAuthStore((state) => state.serverVersion);
|
||||
const apiBase = useAuthStore((state) => state.apiBase);
|
||||
const config = useConfigStore((state) => state.config);
|
||||
|
||||
const [stats, setStats] = useState<{
|
||||
apiKeys: number | null;
|
||||
providers: number | null;
|
||||
authFiles: number | null;
|
||||
}>({
|
||||
apiKeys: null,
|
||||
providers: null,
|
||||
authFiles: null
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStats = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [keysRes, providersRes, filesRes] = await Promise.allSettled([
|
||||
apiKeysApi.list(),
|
||||
providersApi.getOpenAIProviders(),
|
||||
authFilesApi.list()
|
||||
]);
|
||||
|
||||
setStats({
|
||||
apiKeys: keysRes.status === 'fulfilled' ? keysRes.value.length : null,
|
||||
providers: providersRes.status === 'fulfilled' ? providersRes.value.length : null,
|
||||
authFiles: filesRes.status === 'fulfilled' ? filesRes.value.files.length : null
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (connectionStatus === 'connected') {
|
||||
fetchStats();
|
||||
}
|
||||
}, [connectionStatus]);
|
||||
|
||||
const quickStats: QuickStat[] = [
|
||||
{
|
||||
label: t('nav.api_keys'),
|
||||
value: stats.apiKeys ?? '-',
|
||||
icon: <IconKey size={24} />,
|
||||
path: '/api-keys',
|
||||
loading: loading && stats.apiKeys === null
|
||||
},
|
||||
{
|
||||
label: t('dashboard.openai_providers'),
|
||||
value: stats.providers ?? '-',
|
||||
icon: <IconBot size={24} />,
|
||||
path: '/ai-providers',
|
||||
loading: loading && stats.providers === null
|
||||
},
|
||||
{
|
||||
label: t('nav.auth_files'),
|
||||
value: stats.authFiles ?? '-',
|
||||
icon: <IconFileText size={24} />,
|
||||
path: '/auth-files',
|
||||
loading: loading && stats.authFiles === null
|
||||
}
|
||||
];
|
||||
|
||||
const quickActions = [
|
||||
{ label: t('nav.basic_settings'), icon: <IconSettings size={18} />, path: '/settings' },
|
||||
{ label: t('nav.ai_providers'), icon: <IconBot size={18} />, path: '/ai-providers' },
|
||||
{ label: t('nav.oauth'), icon: <IconShield size={18} />, path: '/oauth' },
|
||||
{ label: t('nav.usage_stats'), icon: <IconChartLine size={18} />, path: '/usage' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.dashboard}>
|
||||
<div className={styles.header}>
|
||||
<h1 className={styles.title}>{t('dashboard.title')}</h1>
|
||||
<p className={styles.subtitle}>{t('dashboard.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.connectionCard}>
|
||||
<div className={styles.connectionStatus}>
|
||||
<span
|
||||
className={`${styles.statusDot} ${
|
||||
connectionStatus === 'connected'
|
||||
? styles.connected
|
||||
: connectionStatus === 'connecting'
|
||||
? styles.connecting
|
||||
: styles.disconnected
|
||||
}`}
|
||||
/>
|
||||
<span className={styles.statusText}>
|
||||
{t(
|
||||
connectionStatus === 'connected'
|
||||
? 'common.connected'
|
||||
: connectionStatus === 'connecting'
|
||||
? 'common.connecting'
|
||||
: 'common.disconnected'
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.connectionInfo}>
|
||||
<span className={styles.serverUrl}>{apiBase || '-'}</span>
|
||||
{serverVersion && <span className={styles.serverVersion}>v{serverVersion}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.statsGrid}>
|
||||
{quickStats.map((stat) => (
|
||||
<Link key={stat.path} to={stat.path} className={styles.statCard}>
|
||||
<div className={styles.statIcon}>{stat.icon}</div>
|
||||
<div className={styles.statContent}>
|
||||
<span className={styles.statValue}>{stat.loading ? '...' : stat.value}</span>
|
||||
<span className={styles.statLabel}>{stat.label}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.section}>
|
||||
<h2 className={styles.sectionTitle}>{t('dashboard.quick_actions')}</h2>
|
||||
<div className={styles.actionsGrid}>
|
||||
{quickActions.map((action) => (
|
||||
<Link key={action.path} to={action.path}>
|
||||
<Button variant="secondary" className={styles.actionButton}>
|
||||
{action.icon}
|
||||
{action.label}
|
||||
</Button>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{config && (
|
||||
<div className={styles.section}>
|
||||
<h2 className={styles.sectionTitle}>{t('dashboard.current_config')}</h2>
|
||||
<div className={styles.configGrid}>
|
||||
<div className={styles.configItem}>
|
||||
<span className={styles.configLabel}>{t('basic_settings.debug_enable')}</span>
|
||||
<span className={`${styles.configValue} ${config.debug ? styles.enabled : styles.disabled}`}>
|
||||
{config.debug ? t('common.yes') : t('common.no')}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.configItem}>
|
||||
<span className={styles.configLabel}>{t('basic_settings.usage_statistics_enable')}</span>
|
||||
<span className={`${styles.configValue} ${config.usageStatisticsEnabled ? styles.enabled : styles.disabled}`}>
|
||||
{config.usageStatisticsEnabled ? t('common.yes') : t('common.no')}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.configItem}>
|
||||
<span className={styles.configLabel}>{t('basic_settings.logging_to_file_enable')}</span>
|
||||
<span className={`${styles.configValue} ${config.loggingToFile ? styles.enabled : styles.disabled}`}>
|
||||
{config.loggingToFile ? t('common.yes') : t('common.no')}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.configItem}>
|
||||
<span className={styles.configLabel}>{t('basic_settings.retry_count_label')}</span>
|
||||
<span className={styles.configValue}>{config.requestRetry ?? 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user