完成了机柜可视化功能，鼠标悬停显示设备信息

frontend/package-lock.json

@@ -13,7 +13,8 @@
         "axios": "^1.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.15.0"
+        "react-router-dom": "^6.15.0",
+        "three": "^0.160.0"
       },
       "devDependencies": {
         "@vitejs/plugin-react": "^4.0.3",
@@ -2575,6 +2576,12 @@
       "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
       "license": "MIT"
     },
+    "node_modules/three": {
+      "version": "0.160.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.160.1.tgz",
+      "integrity": "sha512-Bgl2wPJypDOZ1stAxwfWAcJ0WQf7QzlptsxkjYiURPz+n5k4RBDLsq+6f9Y75TYxn6aHLcWz+JNmwTOXWrQTBQ==",
+      "license": "MIT"
+    },
     "node_modules/throttle-debounce": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz",

frontend/package.json

@@ -14,7 +14,8 @@
     "axios": "^1.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0"
+    "react-router-dom": "^6.15.0",
+    "three": "^0.160.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.0.3",

frontend/src/App.jsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { Layout, Menu, theme, Button } from 'antd';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
-import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
+import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined, EyeOutlined } from '@ant-design/icons';
 import Dashboard from './pages/Dashboard';
 import DeviceManagement from './pages/DeviceManagement';
 import RackManagement from './pages/RackManagement';
 import RoomManagement from './pages/RoomManagement';
 import DeviceFieldManagement from './pages/DeviceFieldManagement';
+import RackVisualization from './pages/RackVisualization';
 
 
 const { Content, Sider } = Layout;
@@ -87,6 +88,11 @@ function App() {
                   icon: <BarChartOutlined />,
                   label: <Link to="/fields">字段管理</Link>,
                 },
+                {
+                  key: '6',
+                  icon: <EyeOutlined />,
+                  label: <Link to="/visualization">机柜可视化</Link>,
+                },
               ]}
             />
           </Sider>
@@ -106,6 +112,7 @@ function App() {
               <Route path="/racks" element={<RackManagement />} />
               <Route path="/rooms" element={<RoomManagement />} />
               <Route path="/fields" element={<DeviceFieldManagement />} />
+              <Route path="/visualization" element={<RackVisualization />} />
             </Routes>
           </Content>
         </Layout>

frontend/vite.config.js

@@ -7,7 +7,7 @@ export default defineConfig({
     port: 3000,
     proxy: {
       '/api': {
-        target: 'http://localhost:3001',
+        target: 'http://localhost:8000',
         changeOrigin: true
       }
     }