feat(仪表盘): 添加统计API并优化仪表盘组件

frontend/src/components/dashboard/QuickStats.jsx

@@ -16,7 +16,11 @@ const quickStatItemStyle = {
   boxShadow: designTokens.shadows.small,
 };
 
-const QuickStats = ({ onlineRate, powerUsage }) => {
+const QuickStats = ({ onlineRate, powerUsage, totalMaxPower }) => {
+  const powerUsagePercent = totalMaxPower > 0
+    ? ((powerUsage / totalMaxPower) * 100).toFixed(1)
+    : '0.0';
+
   const quickStats = [
     {
       icon: LineChartOutlined,
@@ -33,7 +37,7 @@ const QuickStats = ({ onlineRate, powerUsage }) => {
     {
       icon: ThunderboltOutlined,
       label: '功率使用',
-      value: `${powerUsage}W`,
+      value: `${powerUsagePercent}%`,
       color: designTokens.colors.warning.main,
     },
   ];

frontend/src/components/dashboard/StatCard.jsx

@@ -46,6 +46,7 @@ const StatCard = ({
     trend,
     tagColor,
     customStatus,
+    hideTrend,
     xs,
     sm,
     lg,
@@ -135,7 +136,7 @@ const StatCard = ({
               />
               <span>{statKey === 'totalRacks' ? '正常运行中' : '全部在线'}</span>
             </div>
-          ) : (
+          ) : !hideTrend ? (
             <div
               style={{
                 display: 'flex',
@@ -166,7 +167,7 @@ const StatCard = ({
                 环比
               </Tag>
             </div>
-          )}
+          ) : null}
         </div>
       </Card>
     </Col>

frontend/src/components/dashboard/StatusLegend.jsx

@@ -4,12 +4,12 @@ import { designTokens } from '../../config/theme';
 
 const { Text } = Typography;
 
-const StatusLegend = () => {
+const StatusLegend = ({ deviceStatusPercentages }) => {
   const legends = [
-    { color: designTokens.colors.success.main, label: '运行中', percent: 60 },
-    { color: designTokens.colors.warning.main, label: '维护中', percent: 20 },
-    { color: designTokens.colors.error.main, label: '故障', percent: 10 },
-    { color: designTokens.colors.primary.main, label: '离线', percent: 10 },
+    { color: designTokens.colors.success.main, label: '运行中', percent: deviceStatusPercentages?.running ?? 0 },
+    { color: designTokens.colors.warning.main, label: '维护中', percent: deviceStatusPercentages?.maintenance ?? 0 },
+    { color: designTokens.colors.error.main, label: '故障', percent: deviceStatusPercentages?.fault ?? 0 },
+    { color: designTokens.colors.primary.main, label: '离线', percent: deviceStatusPercentages?.offline ?? 0 },
   ];
 
   return (