From ee1e10d84e839da6337691d8faf743367f4c92bf Mon Sep 17 00:00:00 2001 From: zhang1106 <849185023@qq.com> Date: Wed, 21 Jan 2026 16:31:07 +0800 Subject: [PATCH] =?UTF-8?q?refactor(Dashboard):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=93=8D=E5=BA=94?= =?UTF-8?q?=E5=BC=8F=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将卡片顶部边框改为左侧边框以提升视觉效果 - 调整网格布局的响应式断点 - 重新组织欢迎横幅和系统信息布局 - 移除未使用的样式定义 --- frontend/src/pages/Dashboard.jsx | 152 +++++++++++++++---------------- 1 file changed, 72 insertions(+), 80 deletions(-) diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx index 1a042a9..cc633ae 100644 --- a/frontend/src/pages/Dashboard.jsx +++ b/frontend/src/pages/Dashboard.jsx @@ -103,7 +103,7 @@ const responsiveConfig = { const containerStyle = { minHeight: '100vh', background: 'linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%)', - padding: '24px' + padding: '20px' }; const headerStyle = { @@ -202,7 +202,8 @@ const STAT_CARD_BASE_STYLE = { overflow: 'hidden', cursor: 'pointer', height: '100%', - animation: 'fadeInUp 0.6s ease-out backwards' + animation: 'fadeInUp 0.6s ease-out backwards', + borderLeft: '4px solid transparent' }; const STAT_ICON_CONTAINER_BASE = { @@ -219,15 +220,6 @@ const STAT_ICON_CONTAINER_BASE = { transition: `all ${designTokens.transitions.normal}` }; -const TOP_BORDER_BASE = { - position: 'absolute', - top: 0, - left: 0, - right: 0, - height: '4px', - borderRadius: `${designTokens.borderRadius.large} ${designTokens.borderRadius.large} 0 0` -}; - const NAV_BUTTON_BASE = { height: 'auto', padding: '24px 20px', @@ -256,7 +248,7 @@ const NAV_ICON_CONTAINER_BASE = { const createStatCardStyle = (color) => ({ ...STAT_CARD_BASE_STYLE, - borderTop: `4px solid ${color}` + borderLeftColor: color }); const createStatIconContainer = (color) => ({ @@ -264,11 +256,6 @@ const createStatIconContainer = (color) => ({ background: `linear-gradient(135deg, ${color}20 0%, ${color}10 100%)` }); -const createTopBorderStyle = (color) => ({ - ...TOP_BORDER_BASE, - background: `linear-gradient(90deg, ${color}, ${color}80)` -}); - const createNavButtonStyle = (color) => ({ ...NAV_BUTTON_BASE, borderColor: color @@ -664,7 +651,7 @@ function Dashboard() { const statCards = useMemo(() => [ { key: 'devices', - xs: 24, sm: 12, lg: 6, xl: 4, + xs: 24, sm: 12, md: 8, lg: 6, xl: 4, icon: CloudServerOutlined, color: designTokens.colors.primary.main, statKey: 'totalDevices', @@ -675,7 +662,7 @@ function Dashboard() { }, { key: 'racks', - xs: 24, sm: 12, lg: 6, xl: 4, + xs: 24, sm: 12, md: 8, lg: 6, xl: 4, icon: DatabaseOutlined, color: designTokens.colors.purple.main, statKey: 'totalRacks', @@ -687,7 +674,7 @@ function Dashboard() { }, { key: 'rooms', - xs: 24, sm: 12, lg: 6, xl: 4, + xs: 24, sm: 12, md: 8, lg: 6, xl: 4, icon: HomeOutlined, color: designTokens.colors.success.main, statKey: 'totalRooms', @@ -699,7 +686,7 @@ function Dashboard() { }, { key: 'faults', - xs: 24, sm: 12, lg: 6, xl: 4, + xs: 24, sm: 12, md: 8, lg: 6, xl: 4, icon: WarningOutlined, color: designTokens.colors.error.main, statKey: 'faultDevices', @@ -710,7 +697,7 @@ function Dashboard() { }, { key: 'users', - xs: 24, sm: 12, lg: 6, xl: 4, + xs: 24, sm: 12, md: 8, lg: 6, xl: 4, icon: TeamOutlined, color: designTokens.colors.cyan.main, statKey: 'totalUsers', @@ -721,7 +708,7 @@ function Dashboard() { }, { key: 'tickets', - xs: 24, sm: 12, lg: 6, xl: 4, + xs: 24, sm: 12, md: 8, lg: 6, xl: 4, icon: BarChartOutlined, color: '#fa8c16', statKey: 'activeTickets', @@ -749,7 +736,6 @@ function Dashboard() { onMouseLeave={() => setHoveredCard(null)} >
-
@@ -929,8 +915,8 @@ function Dashboard() { {statCards.map(renderStatCard)} - - + +
@@ -953,7 +939,7 @@ function Dashboard() { </Card> </Col> - <Col xs={24} lg={8}> + <Col xs={24} md={8}> <Card style={progressCardStyle}> <div style={{ padding: '20px' }}> <Title level={5} style={{ margin: '0 0 20px 0', color: designTokens.colors.text.primary }}> @@ -973,7 +959,7 @@ function Dashboard() { </Card> </Col> - <Col xs={24} lg={8}> + <Col xs={24} md={8}> <Card style={progressCardStyle}> <div style={{ padding: '20px' }}> <Title level={5} style={{ margin: '0 0 20px 0', color: designTokens.colors.text.primary }}> @@ -995,64 +981,70 @@ function Dashboard() { <div> <Card style={overviewCardStyle}> <div style={{ padding: '24px' }}> - <div className="welcome-banner" style={{ - background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', - borderRadius: designTokens.borderRadius.medium, - padding: '28px', - color: '#fff', - marginBottom: '24px', - animation: 'fadeInUp 0.6s ease-out 0.4s backwards' - }}> - <h2 style={{ - fontSize: '1.4rem', - fontWeight: '600', - margin: '0 0 8px 0', - color: '#fff' - }}> - 欢迎使用IDC设备管理系统 - </h2> - <p style={{ - fontSize: '1rem', - margin: '0', - opacity: '0.9', - color: '#fff' - }}> - 专业的机房设备管理解决方案，提供全方位的设备监控和管理能力 - </p> - </div> - - <div style={{ ...quickStatsStyle, animation: 'fadeInUp 0.6s ease-out 0.5s backwards' }}> - {quickStats.map((stat, index) => ( - <div key={index} style={quickStatItemStyle}> - <div style={{ - width: '48px', - height: '48px', - borderRadius: designTokens.borderRadius.medium, - background: `linear-gradient(135deg, ${stat.color}20 0%, ${stat.color}10 100%)`, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - fontSize: '24px', - color: stat.color, - boxShadow: `0 4px 12px ${stat.color}20` + <Row gutter={[24, 24]}> + <Col xs={24} md={16}> + <div className="welcome-banner" style={{ + background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', + borderRadius: designTokens.borderRadius.medium, + padding: '28px', + color: '#fff', + marginBottom: '24px', + animation: 'fadeInUp 0.6s ease-out 0.4s backwards' + }}> + <h2 style={{ + fontSize: '1.4rem', + fontWeight: '600', + margin: '0 0 8px 0', + color: '#fff' }}> - <stat.icon /> - </div> - <div> - <Text style={{ color: designTokens.colors.text.secondary, fontSize: '0.85rem' }}>{stat.label}</Text> - <div style={{ fontSize: '1.2rem', fontWeight: '700', color: designTokens.colors.text.primary }}>{stat.value}</div> - </div> + 欢迎使用IDC设备管理系统 + </h2> + <p style={{ + fontSize: '1rem', + margin: '0', + opacity: '0.9', + color: '#fff' + }}> + 专业的机房设备管理解决方案，提供全方位的设备监控和管理能力 + </p> </div> - ))} - </div> + + <div style={{ ...quickStatsStyle, marginBottom: '0', animation: 'fadeInUp 0.6s ease-out 0.5s backwards' }}> + {quickStats.map((stat, index) => ( + <div key={index} style={quickStatItemStyle}> + <div style={{ + width: '48px', + height: '48px', + borderRadius: designTokens.borderRadius.medium, + background: `linear-gradient(135deg, ${stat.color}20 0%, ${stat.color}10 100%)`, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: '24px', + color: stat.color, + boxShadow: `0 4px 12px ${stat.color}20` + }}> + <stat.icon /> + </div> + <div> + <Text style={{ color: designTokens.colors.text.secondary, fontSize: '0.85rem' }}>{stat.label}</Text> + <div style={{ fontSize: '1.2rem', fontWeight: '700', color: designTokens.colors.text.primary }}>{stat.value}</div> + </div> + </div> + ))} + </div> + </Col> + + <Col xs={24} md={8}> + <div style={{ animation: 'fadeInUp 0.6s ease-out 0.5s backwards' }}> + {systemInfo} + </div> + </Col> + </Row> <div style={{ ...navigationGridStyle, animation: 'fadeInUp 0.6s ease-out 0.6s backwards' }}> {navButtons} </div> - - <div style={{ animation: 'fadeInUp 0.6s ease-out 0.7s backwards' }}> - {systemInfo} - </div> </div> </Card> </div>