feat(背景设置): 实现背景图片上传及设置功能- 新增背景设置路由和文件上传功能- 添加静态文件服务支持- 前端实现背景设置保存和加载逻辑- 配置vite代理以支持上传文件访问

backend/backgroundSettings.json

@@ -0,0 +1,5 @@
+{
+  "type": "image",
+  "image": "/uploads/1766210792626_生成情侣图片.png",
+  "size": "cover"
+}

backend/fileIndex.json

@@ -0,0 +1 @@
+{}

backend/routes/background.js

@@ -0,0 +1,73 @@
+const express = require('express');
+const path = require('path');
+const fs = require('fs');
+const router = express.Router();
+
+// 确保上传目录存在
+const UPLOAD_DIR = path.join(__dirname, '../uploads');
+if (!fs.existsSync(UPLOAD_DIR)) {
+  fs.mkdirSync(UPLOAD_DIR, { recursive: true });
+}
+
+// 确保背景设置文件存在
+const SETTINGS_FILE = path.join(__dirname, '../backgroundSettings.json');
+if (!fs.existsSync(SETTINGS_FILE)) {
+  fs.writeFileSync(SETTINGS_FILE, JSON.stringify({
+    type: 'gradient',
+    image: '',
+    size: 'contain'
+  }, null, 2));
+}
+
+// 上传图片接口
+router.post('/upload', (req, res) => {
+  try {
+    if (!req.files || !req.files.file) {
+      return res.status(400).json({ error: '没有上传文件' });
+    }
+
+    const file = req.files.file;
+    const fileName = `${Date.now()}_${file.name}`;
+    const filePath = path.join(UPLOAD_DIR, fileName);
+
+    // 保存文件到服务器
+    file.mv(filePath, (err) => {
+      if (err) {
+        console.error('文件保存失败:', err);
+        return res.status(500).json({ error: '文件保存失败' });
+      }
+
+      // 返回文件路径
+      const fileUrl = `/uploads/${fileName}`;
+      res.json({ path: fileUrl });
+    });
+  } catch (error) {
+    console.error('上传错误:', error);
+    res.status(500).json({ error: '上传失败' });
+  }
+});
+
+// 获取背景设置
+router.get('/settings', (req, res) => {
+  try {
+    const settings = JSON.parse(fs.readFileSync(SETTINGS_FILE, 'utf8'));
+    res.json(settings);
+  } catch (error) {
+    console.error('读取背景设置失败:', error);
+    res.status(500).json({ error: '读取背景设置失败' });
+  }
+});
+
+// 保存背景设置
+router.post('/settings', (req, res) => {
+  try {
+    const settings = req.body;
+    fs.writeFileSync(SETTINGS_FILE, JSON.stringify(settings, null, 2));
+    res.json({ success: true });
+  } catch (error) {
+    console.error('保存背景设置失败:', error);
+    res.status(500).json({ error: '保存背景设置失败' });
+  }
+});
+
+module.exports = router;

backend/server.js

@@ -38,12 +38,17 @@ const deviceRoutes = require('./routes/devices');
 const rackRoutes = require('./routes/racks');
 const roomRoutes = require('./routes/rooms');
 const deviceFieldRoutes = require('./routes/deviceFields');
+const backgroundRoutes = require('./routes/background');
 
 // 使用路由
 app.use('/api/devices', deviceRoutes);
 app.use('/api/racks', rackRoutes);
 app.use('/api/rooms', roomRoutes);
 app.use('/api/deviceFields', deviceFieldRoutes);
+app.use('/api/background', backgroundRoutes);
+
+// 静态文件服务
+app.use('/uploads', express.static('uploads'));
 
 // 健康检查
 app.get('/health', (req, res) => {

frontend/src/pages/RackVisualization.jsx

@@ -145,6 +145,7 @@ function RackVisualization() {
   const [backgroundImage, setBackgroundImage] = useState(null);
   const [backgroundType, setBackgroundType] = useState('gradient'); // gradient or image
   const [backgroundSize, setBackgroundSize] = useState('contain'); // cover, contain, auto
+  const [uploading, setUploading] = useState(false); // 上传状态
 
   // 获取所有机柜
   const fetchRacks = async () => {
@@ -333,6 +334,7 @@ function RackVisualization() {
 
   useEffect(() => {
     fetchRacks();
+    loadBackgroundSettings();
   }, []);
 
   // 根据设备类型获取图标
@@ -618,6 +620,33 @@ function RackVisualization() {
     });
   };
   
+  // 保存背景设置到服务器
+  const saveBackgroundSettings = async (type, image, size) => {
+    try {
+      await axios.post('/api/background/settings', {
+        type,
+        image,
+        size
+      });
+    } catch (error) {
+      console.error('保存背景设置失败:', error);
+    }
+  };
+  
+  // 从服务器加载背景设置
+  const loadBackgroundSettings = async () => {
+    try {
+      const response = await axios.get('/api/background/settings');
+      if (response.data) {
+        setBackgroundType(response.data.type || 'gradient');
+        setBackgroundImage(response.data.image || null);
+        setBackgroundSize(response.data.size || 'contain');
+      }
+    } catch (error) {
+      console.error('加载背景设置失败:', error);
+    }
+  };
+
   // 重置视角
   const handleResetView = () => {
     setZoom(1);
@@ -692,7 +721,10 @@ function RackVisualization() {
                   placeholder="选择背景类型"
                   style={{ width: 150 }}
                   value={backgroundType}
-              onChange={setBackgroundType}
+                  onChange={async (type) => {
+                    setBackgroundType(type);
+                    await saveBackgroundSettings(type, backgroundImage, backgroundSize);
+                  }}
                 >
                   <Option value="gradient">渐变背景</Option>
                   <Option value="image">自定义图片</Option>
@@ -703,31 +735,61 @@ function RackVisualization() {
                       type="text"
                       placeholder="输入图片URL"
                       style={{ width: 200, padding: '4px 8px', borderRadius: '4px', border: '1px solid #d9d9d9' }}
-                  onChange={(e) => setBackgroundImage(e.target.value)}
+                      onChange={async (e) => {
+                        const image = e.target.value;
+                        setBackgroundImage(image);
+                        await saveBackgroundSettings(backgroundType, image, backgroundSize);
+                      }}
                       value={backgroundImage || ''}
                     />
                 <input
                   type="file"
                   accept="image/*"
-                  onChange={(e) => {
+                  onChange={async (e) => {
                     const file = e.target.files[0];
                     if (file) {
-                      const reader = new FileReader();
+                      try {
-                      reader.onload = (event) => {
+                        setUploading(true);
-                        setBackgroundImage(event.target.result);
+                        const formData = new FormData();
-                      };
+                        formData.append('file', file);
-                      reader.readAsDataURL(file);
+                        formData.append('type', 'background');
+                        
+                        // 发送图片到服务器
+                        const response = await axios.post('/api/background/upload', formData, {
+                          headers: {
+                            'Content-Type': 'multipart/form-data'
+                          }
+                        });
+                        
+                        // 保存服务器返回的图片路径
+                        if (response.data && response.data.path) {
+                          setBackgroundImage(response.data.path);
+                          message.success('背景图片上传成功');
+                          // 保存背景设置到服务器
+                          await saveBackgroundSettings('image', response.data.path, backgroundSize);
+                        } else {
+                          message.error('上传失败：服务器返回格式不正确');
+                        }
+                      } catch (error) {
+                        console.error('上传失败:', error);
+                        message.error('背景图片上传失败，请重试');
+                      } finally {
+                        setUploading(false);
+                      }
                     }
                   }}
                   style={{ display: 'none' }}
                   id="backgroundFileInput"
                 />
-                <Button onClick={() => document.getElementById('backgroundFileInput').click()}>上传图片</Button>
+                <Button onClick={() => document.getElementById('backgroundFileInput').click()} loading={uploading}>上传图片</Button>
                 <Select
                   placeholder="图片大小"
                   style={{ width: 100 }}
                   value={backgroundSize}
-                  onChange={setBackgroundSize}
+                  onChange={async (size) => {
+                    setBackgroundSize(size);
+                    await saveBackgroundSettings(backgroundType, backgroundImage, size);
+                  }}
                 >
                   <Option value="contain">自适应</Option>
                   <Option value="cover">覆盖</Option>

frontend/vite.config.js

@@ -10,6 +10,10 @@ export default defineConfig({
       '/api': {
         target: 'http://localhost:8000',
         changeOrigin: true
+      },
+      '/uploads': {
+        target: 'http://localhost:8000',
+        changeOrigin: true
       }
     }
   },