ry-slave1/ruoyi-ui/vite/plugins/myPlugin.js

import fetch from "node-fetch";
// myPlugin.js
export default function myPlugin() {
  return {
    name: 'myplugin',
    enforce: 'pre',
    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)

      // 处理脚本
      const scriptContent = extractScriptContent(code)
      const processedScript = processScript(scriptContent)

      // 处理样式
      const processedCode = code
        .replace(regex, processedTemplate)
        .replace(/(<script\s+setup[^>]*>)/, `$1\n${processedScript}`)
        .replace(/(<\/style>)/, `${targetStyles}\n$1`)
      //输出代码
      // console.log(processedCode,1111111)
      return processedCode
    },
    handleHotUpdate(ctx) {
      const read = ctx.read
      if (/\.vue$/.test(ctx.file)) {
        ctx.read = async () => {
          const code = await read()
          return `${code}`
        }
      }
    }
  }
}

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
  return template
    .replace(/<el-row/g, (match) => {
      rowIndex++
      return `${match} data-auto-row="${rowIndex}"`
    })
    .replace(/<el-col([^>]*)>/g, (match, attrs) => {

      const idMatch = attrs.match(/:_material="\{id:\s*'(\d+)'\}"/);
      const uid = idMatch ? idMatch[1] : generateNumericUUID(); // 使用已有ID或生成备用ID

      return `
        <el-col${attrs}>
          <div class="grid-content"
               id="${uid}"
               draggable="true"
               @dragstart="__autoDragStart($event, '${uid}')"
               @dragover="__autoDragOver($event, '${uid}')"
               @dragleave="__autoDragLeave"
               @drop="__autoDragDrop($event, '${uid}')">
            <div class="drop-hint left"
                 v-if="__autoDropInfo.targetId === '${uid}'
                       && __autoDropInfo.direction === 'left'"></div>
            <div class="drop-hint right"
                 v-if="__autoDropInfo.targetId === '${uid}'
                       && __autoDropInfo.direction === 'right'"></div>
      `.trim().replace(/\n\s+/g, ' ')
    })
    .replace(/<\/el-col>/g, '</div></el-col>')
}

// 脚本处理逻辑
function processScript(script) {
  const autoScript = `
// AUTO-INJECTED DRAG LOGIC
const __autoDragElement = ref(null)
const __autoDropInfo = ref({
    targetId: null,
    direction: null
})

const __autoDragStart = (e, id) => {
    __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'
    }
}

const __autoDragLeave = () => {
    __autoDropInfo.value = { targetId: null, direction: null }
}

const __autoDragDrop = (e, targetId) => {
    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()

  return script.includes('ref')
    ? autoScript
    : `import { ref } from 'vue'\n${autoScript}`
}

// 辅助函数
function isTargetFile(id) {
  return id === 'D:/workspace/RuoYi-Vue/ruoyi-ui/src/views/index.vue'
}

function extractTemplateContent(code) {
  const match = code.match(regex)
  return match ? match[1] : ''
}

function extractScriptContent(code) {
  const scriptMatch = code.match(/<script\s+setup[^>]*>([\s\S]*?)<\/script>/)
  return scriptMatch ? scriptMatch[1] : ''
}

// 样式配置（保持原样）
//样式
const targetStyles = `.grid-content {
  border: 1px solid #e4e7ed;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  cursor: move;
  user-select: none;
  background: white;
  z-index: 1;

  /* 悬停效果 */
  &:hover {
    background-color: #f5f7fa;
    border-color: #409eff;
    transform: translateY(-2px);
    z-index: 2;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  /* 拖放指示器 */
  .drop-hint {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: 3;
    pointer-events: none;

    &::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      color: #409eff;
      font-weight: 500;
      padding: 4px 8px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 左侧指示 */
    &.left {
      left: 0;
      border-left: 3px solid #409eff;

      &::after {
        content: "← 放置左侧";
        left: 10px;
      }
    }

    /* 右侧指示 */
    &.right {
      right: 0;
      border-right: 3px solid #409eff;

      &::after {
        content: "放置右侧 →";
        right: 10px;
      }
    }
  }

  /* 拖放时的半透明效果 */
  &[draggable="true"]:active {
    opacity: 0.8;
    transform: scale(0.98);
  }

  /* 当前拖拽元素的样式 */
  &.drag-overlay {
    opacity: 0.5;
    transform: rotate(3deg);
  }
}

/* 行间距 */
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

/* 拖放过程的状态指示 */
.drag-enter {
  background: linear-gradient(
      45deg,
      rgba(64, 158, 255, 0.1) 25%,
      transparent 25%,
      transparent 50%,
      rgba(64, 158, 255, 0.1) 50%,
      rgba(64, 158, 255, 0.1) 75%,
      transparent 75%,
      transparent
  );
  background-size: 40px 40px;
  animation: dragStripes 3s linear infinite;
}

@keyframes dragStripes {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

/* 优化移动端触摸体验 */
@media (hover: none) {
  .grid-content {
    touch-action: manipulation;
    &:active {
      transform: scale(0.96);
    }
  }
}`;




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;
}