31

vue-template-service/src/index.js

@@ -0,0 +1,134 @@
+/**
+ * Vue模板源码修改服务
+ * 
+ * 接收前端拖放请求，修改Vue文件中的template结构
+ */
+
+import express from 'express'
+import cors from 'cors'
+import { moveElement } from './services/templateService.js'
+import { readFile, writeFile } from 'fs/promises'
+import path from 'path'
+
+const app = express()
+const PORT = 3001
+
+// 中间件
+app.use(cors())
+app.use(express.json())
+
+// Vue源码目录（相对于服务根目录）
+const VUE_SOURCE_DIR = path.resolve('../draggable-panels/src/views')
+
+/**
+ * API: 执行元素移动操作
+ * 
+ * POST /api/move-element
+ * Body: {
+ *   pagePath: string,     // Vue文件路径（相对于views目录）
+ *   source: { type, path, elementType },
+ *   targetPath: string,
+ *   targetType: string,
+ *   direction: 'top' | 'bottom' | 'left' | 'right'
+ * }
+ */
+app.post('/api/move-element', async (req, res) => {
+  try {
+    const { pagePath, source, targetPath, targetType, direction } = req.body
+    
+    console.log('[API] 收到移动请求:', {
+      pagePath,
+      source: source.path,
+      target: targetPath,
+      direction
+    })
+    
+    // 验证参数
+    if (!pagePath || !source?.path || !targetPath || !direction) {
+      return res.status(400).json({
+        success: false,
+        error: '缺少必要参数'
+      })
+    }
+    
+    // 构建完整文件路径
+    // 前端传来的路径可能是多种格式:
+    // - "../../../views/TestPage1.vue"
+    // - "../views/xxx.vue"
+    // - "./views/xxx.vue"
+    // - "TestPage1.vue"
+    // 需要提取 views/ 后面的部分
+    let normalizedPath = pagePath
+    
+    // 查找 views/ 的位置，取其后面的内容
+    const viewsIndex = normalizedPath.indexOf('views/')
+    if (viewsIndex !== -1) {
+      normalizedPath = normalizedPath.substring(viewsIndex + 6)  // 6 = 'views/'.length
+    }
+    
+    const filePath = path.join(VUE_SOURCE_DIR, normalizedPath)
+    
+    console.log('[API] 原始路径:', pagePath)
+    console.log('[API] 规范化路径:', normalizedPath)
+    console.log('[API] 完整路径:', filePath)
+    
+    // 读取Vue文件
+    let vueContent
+    try {
+      vueContent = await readFile(filePath, 'utf-8')
+    } catch (err) {
+      return res.status(404).json({
+        success: false,
+        error: `文件不存在: ${pagePath}`
+      })
+    }
+    
+    // 执行移动操作
+    const result = moveElement(vueContent, {
+      sourcePath: source.path,
+      targetPath,
+      direction
+    })
+    
+    if (!result.success) {
+      return res.status(400).json({
+        success: false,
+        error: result.error
+      })
+    }
+    
+    // 写回文件
+    await writeFile(filePath, result.content, 'utf-8')
+    
+    console.log('[API] 移动成功')
+    
+    res.json({
+      success: true,
+      message: `已将 ${source.path} 移动到 ${targetPath} 的${direction}方向`
+    })
+    
+  } catch (error) {
+    console.error('[API] 错误:', error)
+    res.status(500).json({
+      success: false,
+      error: error.message
+    })
+  }
+})
+
+/**
+ * API: 获取服务状态
+ */
+app.get('/api/health', (req, res) => {
+  res.json({
+    status: 'ok',
+    service: 'vue-template-service',
+    sourceDir: VUE_SOURCE_DIR
+  })
+})
+
+// 启动服务
+app.listen(PORT, () => {
+  console.log(`🚀 Vue模板服务启动: http://localhost:${PORT}`)
+  console.log(`📁 源码目录: ${VUE_SOURCE_DIR}`)
+})