|
|
@@ -1,26 +1,27 @@
|
|
|
+// 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,
|
|
|
- }
|
|
|
- }
|
|
|
+ if (!/\.vue$/.test(id) || !isTargetFile(id)) return
|
|
|
+
|
|
|
+ // 处理模板
|
|
|
+ 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
|
|
|
@@ -30,51 +31,101 @@ export default function myPlugin() {
|
|
|
return `${code}`
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const regex = /<!--watchstart-->([\s\S]*?)<!--watchend-->/;
|
|
|
+const regex = /<!--watchstart-->([\s\S]*?)<!--watchend-->/
|
|
|
+
|
|
|
+// 模板处理逻辑
|
|
|
+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 uniqueSuffix = Math.random().toString(36).substr(2, 6)
|
|
|
+ const uid = `__auto_${rowIndex}_${uniqueSuffix}`
|
|
|
+ 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 isInVue(id) {
|
|
|
- return id == 'D:/workspace/RuoYi-Vue/ruoyi-ui/src/views/index.vue'
|
|
|
+// 脚本处理逻辑
|
|
|
+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'
|
|
|
}
|
|
|
|
|
|
-function wrapElementComponents(code) {
|
|
|
- // 匹配el-col和el-row的开始标签，并包裹div
|
|
|
- let wrappedCode = code.replace(
|
|
|
- /<(el-(row|col))([^>]*)>/g,
|
|
|
- '<$1$3><div class="grid-content">'
|
|
|
- );
|
|
|
+const __autoDragOver = (e, targetId) => {
|
|
|
+ e.preventDefault()
|
|
|
+ const rect = e.currentTarget.getBoundingClientRect()
|
|
|
+ __autoDropInfo.value = {
|
|
|
+ targetId,
|
|
|
+ direction: e.clientX - rect.left < rect.width / 2 ? 'left' : 'right'
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- // 匹配el-col和el-row的结束标签前插入div闭合标签
|
|
|
- wrappedCode = wrappedCode.replace(
|
|
|
- /<\/(el-(row|col))>/g,
|
|
|
- '</div></$1>'
|
|
|
- );
|
|
|
+const __autoDragLeave = () => {
|
|
|
+ __autoDropInfo.value = { targetId: null, direction: null }
|
|
|
+}
|
|
|
|
|
|
- return wrappedCode;
|
|
|
+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 }
|
|
|
}
|
|
|
+`.trim()
|
|
|
|
|
|
-// 在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>`);
|
|
|
- }
|
|
|
+ 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;
|
|
|
@@ -84,20 +135,114 @@ const targetStyles = `.grid-content {
|
|
|
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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}`;
|
