|
|
@@ -1,3 +1,4 @@
|
|
|
+import fetch from "node-fetch";
|
|
|
// myPlugin.js
|
|
|
export default function myPlugin() {
|
|
|
return {
|
|
|
@@ -6,6 +7,24 @@ export default function myPlugin() {
|
|
|
transform(code, id) {
|
|
|
if (!/\.vue$/.test(id) || !isTargetFile(id)) return
|
|
|
|
|
|
+ // 为el-col el-row 注入
|
|
|
+ // :_material="{
|
|
|
+ // id:'__auto_3_47f3v9'
|
|
|
+ // }">
|
|
|
+ let uuid = generateNumericUUID();
|
|
|
+ code = materialUUID(code)
|
|
|
+
|
|
|
+ // 发送处理后的代码到指定接口（非阻塞）
|
|
|
+ fetch('http://localhost:8080/test/getcode', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'text/plain' },
|
|
|
+ body: code // 发送最终处理后的代码
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('发送代码失败:', error);
|
|
|
+ });
|
|
|
+ console.log(code,2222222)
|
|
|
+
|
|
|
+
|
|
|
// 处理模板
|
|
|
const templateContent = extractTemplateContent(code)
|
|
|
const processedTemplate = processTemplate(templateContent)
|
|
|
@@ -20,7 +39,7 @@ export default function myPlugin() {
|
|
|
.replace(/(<script\s+setup[^>]*>)/, `$1\n${processedScript}`)
|
|
|
.replace(/(<\/style>)/, `${targetStyles}\n$1`)
|
|
|
//输出代码
|
|
|
- console.log(processedCode,1111111)
|
|
|
+ // console.log(processedCode,1111111)
|
|
|
return processedCode
|
|
|
},
|
|
|
handleHotUpdate(ctx) {
|
|
|
@@ -37,6 +56,20 @@ export default function myPlugin() {
|
|
|
|
|
|
const regex = /<!--watchstart-->([\s\S]*?)<!--watchend-->/
|
|
|
|
|
|
+// 新增方法：生成_material属性并拼接标签
|
|
|
+function materialUUID(code) {
|
|
|
+ return code.replace(/<el-col([^>]*)>/g, (match, attrs) => {
|
|
|
+ const uid = generateNumericUUID(); // 生成纯数字UUID
|
|
|
+ // 构建_material属性字符串
|
|
|
+ const materialAttr = ` :_material="{id: '${uid}'}"`;
|
|
|
+
|
|
|
+ // 将新属性拼接到原有属性后面
|
|
|
+ return `<el-col${attrs}${materialAttr}>`;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
// 模板处理逻辑
|
|
|
function processTemplate(template) {
|
|
|
let rowIndex = 0
|
|
|
@@ -46,8 +79,10 @@ function processTemplate(template) {
|
|
|
return `${match} data-auto-row="${rowIndex}"`
|
|
|
})
|
|
|
.replace(/<el-col([^>]*)>/g, (match, attrs) => {
|
|
|
- const uniqueSuffix = Math.random().toString(36).substr(2, 6)
|
|
|
- const uid = `__auto_${rowIndex}_${uniqueSuffix}`
|
|
|
+
|
|
|
+ const idMatch = attrs.match(/:_material="\{id:\s*'(\d+)'\}"/);
|
|
|
+ const uid = idMatch ? idMatch[1] : generateNumericUUID(); // 使用已有ID或生成备用ID
|
|
|
+
|
|
|
return `
|
|
|
<el-col${attrs}>
|
|
|
<div class="grid-content"
|
|
|
@@ -74,34 +109,49 @@ function processScript(script) {
|
|
|
// AUTO-INJECTED DRAG LOGIC
|
|
|
const __autoDragElement = ref(null)
|
|
|
const __autoDropInfo = ref({
|
|
|
- targetId: null,
|
|
|
- direction: null
|
|
|
+ targetId: null,
|
|
|
+ direction: null
|
|
|
})
|
|
|
|
|
|
const __autoDragStart = (e, id) => {
|
|
|
- __autoDragElement.value = id
|
|
|
- e.dataTransfer.effectAllowed = 'move'
|
|
|
+ __autoDragElement.value = id
|
|
|
+ e.dataTransfer.effectAllowed = 'move'
|
|
|
}
|
|
|
|
|
|
const __autoDragOver = (e, targetId) => {
|
|
|
- e.preventDefault()
|
|
|
- const rect = e.currentTarget.getBoundingClientRect()
|
|
|
- __autoDropInfo.value = {
|
|
|
- targetId,
|
|
|
- direction: e.clientX - rect.left < rect.width / 2 ? 'left' : 'right'
|
|
|
- }
|
|
|
+ e.preventDefault()
|
|
|
+ const rect = e.currentTarget.getBoundingClientRect()
|
|
|
+ __autoDropInfo.value = {
|
|
|
+ targetId,
|
|
|
+ direction: e.clientX - rect.left < rect.width / 2 ? 'left' : 'right'
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const __autoDragLeave = () => {
|
|
|
- __autoDropInfo.value = { targetId: null, direction: null }
|
|
|
+ __autoDropInfo.value = { targetId: null, direction: null }
|
|
|
}
|
|
|
|
|
|
const __autoDragDrop = (e, targetId) => {
|
|
|
- e.preventDefault()
|
|
|
- if (!__autoDragElement.value || !targetId) return
|
|
|
- console.log(\`DRAG_ACTION: \${__autoDragElement.value} -> \${targetId} (\${__autoDropInfo.value.direction})\`)
|
|
|
- __autoDragElement.value = null
|
|
|
- __autoDropInfo.value = { targetId: null, direction: null }
|
|
|
+ e.preventDefault()
|
|
|
+ if (!__autoDragElement.value || !targetId) return
|
|
|
+
|
|
|
+ // 构造请求数据
|
|
|
+ const data = \`\${__autoDragElement.value}-\${targetId}-\${__autoDropInfo.value.direction}\`;
|
|
|
+
|
|
|
+ // 发送 POST 请求
|
|
|
+ fetch('http://localhost:8080/test/changecode', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded', // 或 'text/plain' 根据后端需求
|
|
|
+ },
|
|
|
+ body: data
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('请求失败:', error);
|
|
|
+ });
|
|
|
+
|
|
|
+ __autoDragElement.value = null
|
|
|
+ __autoDropInfo.value = { targetId: null, direction: null }
|
|
|
}
|
|
|
`.trim()
|
|
|
|
|
|
@@ -246,3 +296,23 @@ const targetStyles = `.grid-content {
|
|
|
}
|
|
|
}
|
|
|
}`;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function generateNumericUUID() {
|
|
|
+ // 时间戳部分 (13位)
|
|
|
+ const timestamp = Date.now().toString();
|
|
|
+
|
|
|
+ // 随机数部分 (10位)
|
|
|
+ const randomPart = Math.floor(Math.random() * 9e9 + 1e9).toString();
|
|
|
+
|
|
|
+ // 组合并添加校验位
|
|
|
+ const base = timestamp + randomPart;
|
|
|
+
|
|
|
+ // 计算简单校验和
|
|
|
+ const checksum = base.split('').reduce((sum, char) => sum + parseInt(char, 10), 0) % 10;
|
|
|
+
|
|
|
+ return base + checksum;
|
|
|
+}
|
|
|
+
|
