feat(设备管理): 添加机房筛选功能并优化UI样式

refactor(耗材统计): 重构筛选卡片布局和统计卡片样式

style(3D可视化): 优化机柜信息卡片样式和交互体验

backend/routes/devices.js

@@ -31,7 +31,7 @@ Rack.hasMany(Device, { foreignKey: 'rackId' });
 
 router.get('/', validateQuery(queryDeviceSchema), async (req, res) => {
   try {
-    const { keyword, status, type, rackId, page = 1, pageSize = 10 } = req.query;
+    const { keyword, status, type, rackId, roomId, page = 1, pageSize = 10 } = req.query;
     const offset = (page - 1) * pageSize;
 
     // 构建查询条件
@@ -101,6 +101,11 @@ router.get('/', validateQuery(queryDeviceSchema), async (req, res) => {
       where.rackId = rackId;
     }
 
+    // 机房筛选 - 通过机柜关联查询
+    if (roomId && roomId !== 'all') {
+      where['$Rack.roomId$'] = roomId;
+    }
+
     // 执行查询 - 优化：使用 JOIN 避免 N+1 查询问题
     const { count, rows } = await Device.findAndCountAll({
       where,