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

export default function myPlugin() {
  return {
    name: 'myplugin',
    enforce: 'pre',
    transform(code, id) {
      if (!/\.vue$/.test(id))
        return

      //找到带有标记的代码，以后估计安装路径直接找

      if (isInVue(id)){
        // //为全部el开头的组件外面再套一层
        // code = wrapElementComponents(code)
        // code = injectStyles(code)
      }

      const css = code
      if (css) {
        return {
          code: css,
          map: null,
        }
      }
    },
    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-->/;

function isInVue(id) {
  return id == 'D:/workspace/RuoYi-Vue/ruoyi-ui/src/views/index.vue'
}

function wrapElementComponents(code) {
  // 匹配el-col和el-row的开始标签，并包裹div
  let wrappedCode = code.replace(
    /<(el-(row|col))([^>]*)>/g,
    '<$1$3><div class="grid-content">'
  );

  // 匹配el-col和el-row的结束标签前插入div闭合标签
  wrappedCode = wrappedCode.replace(
    /<\/(el-(row|col))>/g,
    '</div></$1>'
  );

  return wrappedCode;
}

// 在myPlugin.js中添加样式注入逻辑
function injectStyles(code) {
  // 匹配现有的style标签
  const styleRegex = /<style[^>]*scoped[^>]*>([\s\S]*?)<\/style>/i;

  if (styleRegex.test(code)) {
    // 如果已有scoped样式，追加内容
    return code.replace(styleRegex, (match, p1) => {
      return `<style scoped>${p1}\n${targetStyles}</style>`;
    });
  } else {
    // 如果没有样式标签，添加新样式块
    return code.replace(/<\/template>/, `</template>\n<style scoped>\n${targetStyles}\n</style>`);
  }
}




//样式
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;

  &:hover {
    background-color: #f5f7fa;
    border-color: #409eff;
    transform: translateY(-2px);
  }
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}`;