refactor(Dashboard): 优化布局样式和响应式设计

- 将卡片顶部边框改为左侧边框以提升视觉效果
- 调整网格布局的响应式断点
- 重新组织欢迎横幅和系统信息布局
- 移除未使用的样式定义

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)}
         >
           <div style={{ position: 'relative' }}>
-            <div style={createTopBorderStyle(color)} />
             <div style={createStatIconContainer(color)}>
               <Icon style={{ color }} />
             </div>
@@ -929,8 +915,8 @@ function Dashboard() {
           {statCards.map(renderStatCard)}
         </Row>
 
-        <Row gutter={[24, 24]} style={{ marginBottom: '32px' }}>
+        <Row gutter={[24, 24]} style={{ marginBottom: '24px' }}>
-          <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 }}>
@@ -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,6 +981,8 @@ function Dashboard() {
         <div>
           <Card style={overviewCardStyle}>
             <div style={{ padding: '24px' }}>
+              <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,
@@ -1021,7 +1009,7 @@ function Dashboard() {
                     </p>
                   </div>
 
-              <div style={{ ...quickStatsStyle, animation: 'fadeInUp 0.6s ease-out 0.5s backwards' }}>
+                  <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={{
@@ -1045,14 +1033,18 @@ function Dashboard() {
                       </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>