2

draggable-panels/vite.config.ts

@@ -6,37 +6,73 @@ import type { Plugin } from 'vite'
 
 // 配置文件路径
 const CONFIG_FILE = path.resolve(__dirname, 'config.json')
+const DESIGN_STATE_FILE = path.resolve(__dirname, 'design-state.json')
+const MATERIAL_STATES_FILE = path.resolve(__dirname, 'material-states.json')
+const DESIGN_COMPONENTS_DIR = path.resolve(__dirname, 'src/designComponents')
+
+// 通用JSON文件读写处理器
+function createJsonHandler(filePath: string) {
+  return {
+    read: () => {
+      if (fs.existsSync(filePath)) {
+        return fs.readFileSync(filePath, 'utf-8')
+      }
+      return JSON.stringify({})
+    },
+    write: (data: string) => {
+      fs.writeFileSync(filePath, data)
+    }
+  }
+}
+
+// 读取设计组件元数据
+function loadDesignComponentMetas() {
+  const metas: any[] = []
+  if (!fs.existsSync(DESIGN_COMPONENTS_DIR)) {
+    return metas
+  }
+  const dirs = fs.readdirSync(DESIGN_COMPONENTS_DIR)
+  for (const dir of dirs) {
+    const jsonPath = path.join(DESIGN_COMPONENTS_DIR, dir, 'index.json')
+    if (fs.existsSync(jsonPath)) {
+      try {
+        const content = fs.readFileSync(jsonPath, 'utf-8')
+        const meta = JSON.parse(content)
+        metas.push({ id: dir, ...meta })
+      } catch (e) {
+        console.error(`加载设计组件元数据失败: ${dir}`, e)
+      }
+    }
+  }
+  return metas
+}
 
 // 自定义插件：处理配置文件的读写
 function configApiPlugin(): Plugin {
+  const configHandler = createJsonHandler(CONFIG_FILE)
+  const designStateHandler = createJsonHandler(DESIGN_STATE_FILE)
+  const materialStatesHandler = createJsonHandler(MATERIAL_STATES_FILE)
+
   return {
     name: 'config-api',
     configureServer(server) {
-      // 读取配置
+      // 布局配置 API
       server.middlewares.use('/api/config', (req, res, next) => {
         if (req.method === 'GET') {
           try {
-            if (fs.existsSync(CONFIG_FILE)) {
-              const config = fs.readFileSync(CONFIG_FILE, 'utf-8')
-              res.setHeader('Content-Type', 'application/json')
-              res.end(config)
-            } else {
-              res.statusCode = 404
-              res.end(JSON.stringify({ error: 'Config not found' }))
-            }
+            res.setHeader('Content-Type', 'application/json')
+            res.end(configHandler.read())
           } catch (error) {
             res.statusCode = 500
             res.end(JSON.stringify({ error: 'Failed to read config' }))
           }
         } else if (req.method === 'POST') {
           let body = ''
-          req.on('data', (chunk) => {
-            body += chunk.toString()
-          })
+          req.on('data', (chunk) => body += chunk.toString())
           req.on('end', () => {
             try {
               const config = JSON.parse(body)
-              fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2))
+              configHandler.write(JSON.stringify(config, null, 2))
               res.setHeader('Content-Type', 'application/json')
               res.end(JSON.stringify({ success: true }))
             } catch (error) {
@@ -48,6 +84,80 @@ function configApiPlugin(): Plugin {
           next()
         }
       })
+
+      // 设计组件元数据 API
+      server.middlewares.use('/api/design-components', (req, res, next) => {
+        if (req.method === 'GET') {
+          try {
+            const metas = loadDesignComponentMetas()
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify(metas))
+          } catch (error) {
+            res.statusCode = 500
+            res.end(JSON.stringify({ error: 'Failed to load design components' }))
+          }
+        } else {
+          next()
+        }
+      })
+
+      // 设计中心状态 API
+      server.middlewares.use('/api/design-state', (req, res, next) => {
+        if (req.method === 'GET') {
+          try {
+            res.setHeader('Content-Type', 'application/json')
+            res.end(designStateHandler.read())
+          } catch (error) {
+            res.statusCode = 500
+            res.end(JSON.stringify({ error: 'Failed to read design state' }))
+          }
+        } else if (req.method === 'POST') {
+          let body = ''
+          req.on('data', (chunk) => body += chunk.toString())
+          req.on('end', () => {
+            try {
+              const state = JSON.parse(body)
+              designStateHandler.write(JSON.stringify(state, null, 2))
+              res.setHeader('Content-Type', 'application/json')
+              res.end(JSON.stringify({ success: true }))
+            } catch (error) {
+              res.statusCode = 500
+              res.end(JSON.stringify({ error: 'Failed to save design state' }))
+            }
+          })
+        } else {
+          next()
+        }
+      })
+
+      // 物料组件状态 API (独立存储)
+      server.middlewares.use('/api/material-states', (req, res, next) => {
+        if (req.method === 'GET') {
+          try {
+            res.setHeader('Content-Type', 'application/json')
+            res.end(materialStatesHandler.read())
+          } catch (error) {
+            res.statusCode = 500
+            res.end(JSON.stringify({ error: 'Failed to read material states' }))
+          }
+        } else if (req.method === 'POST') {
+          let body = ''
+          req.on('data', (chunk) => body += chunk.toString())
+          req.on('end', () => {
+            try {
+              const states = JSON.parse(body)
+              materialStatesHandler.write(JSON.stringify(states, null, 2))
+              res.setHeader('Content-Type', 'application/json')
+              res.end(JSON.stringify({ success: true }))
+            } catch (error) {
+              res.statusCode = 500
+              res.end(JSON.stringify({ error: 'Failed to save material states' }))
+            }
+          })
+        } else {
+          next()
+        }
+      })
     }
   }
 }