wfz/fauto-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

31

Browse Source
This commit is contained in:
wfz
2026-01-20 20:02:38 +08:00
parent ad2322b553
commit 1bf26e6e71
4 changed files with 174 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
draggable-panels/src/fauto/materials/DesignCenter/DropZone.vue
View File

@@ -38,13 +38,17 @@ const isRowLayout = computed(() => {
return dragStore.selectedNode?.type === 'er'
})
// 是否是跨类型拖放
const isCrossType = computed(() => dragStore.isCrossTypeDrop)
// 获取方向文本
const getDirectionText = (direction: DropDirection): string => {
const texts: Record<DropDirection, string> = {
'top': '移动至上方',
'bottom': '移动至下方',
'left': '移动至左侧',
'right': '移动至右侧'
'right': '移动至右侧',
'inside': '放入其中'
}
return texts[direction]
}
@@ -55,7 +59,8 @@ const getDirectionIcon = (direction: DropDirection): string => {
'top': '⬆',
'bottom': '⬇',
'left': '⬅',
'right': '➡'
'right': '➡',
'inside': '⬇️⤵️' // 放入图标
}
return icons[direction]
}
@@ -66,7 +71,11 @@ const getDirectionIcon = (direction: DropDirection): string => {
<div
v-if="dragStore.isDragging && dragStore.selectedNode"
class="drop-zone-container"
:class="{ 'is-row': isRowLayout, 'is-col': !isRowLayout }"
:class="{
'is-row': isRowLayout && !isCrossType,
'is-col': !isRowLayout && !isCrossType,
'is-inside': isCrossType
}"
:style="zoneStyle"
>
<div
@@ -137,6 +146,32 @@ const getDirectionIcon = (direction: DropDirection): string => {
border-left: 2px solid rgba(64, 158, 255, 0.8);
}
/* 放入内部区域 */
.drop-zone-container.is-inside {
flex-direction: column;
}
.zone-inside {
background: rgba(103, 194, 58, 0.15);
border: 3px dashed rgba(103, 194, 58, 0.6);
border-radius: 8px;
}
.zone-inside.is-active {
background: rgba(103, 194, 58, 0.3);
border-color: rgba(103, 194, 58, 0.9);
}
.zone-inside .zone-icon,
.zone-inside .zone-text {
color: #67c23a;
}
.zone-inside.is-active .zone-icon,
.zone-inside.is-active .zone-text {
color: #85ce61;
}
.drop-zone:hover,
.drop-zone.is-active {
background: rgba(64, 158, 255, 0.25);

36
draggable-panels/src/fauto/plugins/dragStore.ts
View File

@@ -8,8 +8,11 @@ const TEMPLATE_SERVICE_URL = 'http://localhost:3001'
/**
* 拖放方向
* - top/bottom: el-row 的上下方
* - left/right: el-col 的左右方
* - inside: 放入内部（跨类型拖放时）
*/
export type DropDirection = 'top' | 'bottom' | 'left' | 'right'
export type DropDirection = 'top' | 'bottom' | 'left' | 'right' | 'inside'
/**
* 拖拽源信息
@@ -245,6 +248,22 @@ export const useDragStore = defineStore('drag', () => {
hoverDirection.value = direction
}
/**
* 是否为跨类型拖放（源和目标类型不同）
*/
const isCrossTypeDrop = computed(() => {
if (!dragSource.value || !selectedNode.value) return false
// 只有画布内元素拖放才考虑跨类型
if (dragSource.value.type !== 'canvas-element') return false
const sourceType = dragSource.value.elementType
const targetType = selectedNode.value.type
// er 拖到 ec 或 ec 拖到 er 都是跨类型
return sourceType !== targetType
})
/**
* 根据鼠标位置自动计算拖放方向
* @param mouseX 鼠标X坐标
@@ -253,6 +272,12 @@ export const useDragStore = defineStore('drag', () => {
const updateDirectionFromMouse = (mouseX: number, mouseY: number) => {
if (!selectedNode.value?.element) return
// 跨类型拖放时，始终显示 "inside"
if (isCrossTypeDrop.value) {
hoverDirection.value = 'inside'
return
}
const rect = selectedNode.value.element.getBoundingClientRect()
const isRow = selectedNode.value.type === 'er'
@@ -365,7 +390,8 @@ export const useDragStore = defineStore('drag', () => {
'top': '上方',
'bottom': '下方',
'left': '左侧',
'right': '右侧'
'right': '右侧',
'inside': '内部'
}
let sourceName = ''
@@ -384,6 +410,11 @@ export const useDragStore = defineStore('drag', () => {
const getDropDirections = computed((): DropDirection[] => {
if (!selectedNode.value) return []
// 跨类型拖放：显示"放入内部"
if (isCrossTypeDrop.value) {
return ['inside']
}
// el-row 显示上下
if (selectedNode.value.type === 'er') {
return ['top', 'bottom']
@@ -403,6 +434,7 @@ export const useDragStore = defineStore('drag', () => {
lastDropRecord,
dropRecords,
getDropDirections,
isCrossTypeDrop,
// 方法
startDragFromComponentList,

7
draggable-panels/src/views/TestPage1.vue
View File

@@ -10,13 +10,14 @@
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<div class="design-component">右侧列1</div>
</el-col>
<el-col :span="12">
<div class="design-component">右侧列2</div>
</el-col>
</el-row>
<el-col :span="12">
<div class="design-component">右侧列1</div>
</el-col>
</el-col>
</el-row>
</template>

102
vue-template-service/src/services/templateService.js
View File

@@ -100,6 +100,93 @@ function getNodeSourceText(source, node) {
return source.substring(start, end)
}
/**
* 将元素移动到目标元素内部
* 如果目标已有子元素，则放到最后
*/
function moveElementInside(templateContent, sourceNode, targetNode, sourcePath, targetPath) {
const sourceStart = sourceNode.loc.start.offset
const sourceEnd = sourceNode.loc.end.offset
const sourceText = templateContent.substring(sourceStart, sourceEnd)
// 找到源元素行的开始位置（用于删除整行）
const sourceLineStart = templateContent.lastIndexOf('\n', sourceStart - 1) + 1
// 获取目标元素的缩进（子元素需要比父元素多一层缩进）
const targetLineStart = templateContent.lastIndexOf('\n', targetNode.loc.start.offset - 1) + 1
const targetIndent = templateContent.substring(targetLineStart, targetNode.loc.start.offset)
const childIndent = targetIndent + ' ' // 子元素缩进
// 找到目标元素的结束标签位置
// 目标元素内容的结束位置（结束标签前）
const targetText = templateContent.substring(targetNode.loc.start.offset, targetNode.loc.end.offset)
const targetTag = targetNode.tag // 'el-row' 或 'el-col'
const closeTagPattern = `</${targetTag}>`
const closeTagIndex = targetText.lastIndexOf(closeTagPattern)
if (closeTagIndex === -1) {
console.error('[moveElementInside] 未找到结束标签:', targetTag)
return templateContent
}
// 计算插入位置（在结束标签之前）
const insertPositionInTarget = closeTagIndex
const insertPositionInTemplate = targetNode.loc.start.offset + insertPositionInTarget
// 调整源元素的缩进
const sourceLines = sourceText.split('\n')
const adjustedSourceLines = sourceLines.map((line, index) => {
if (index === 0) {
return childIndent + line.trimStart()
}
// 保持相对缩进
return childIndent + line.trimStart()
})
const adjustedSourceText = adjustedSourceLines.join('\n')
// 根据源和目标的位置关系进行操作
if (sourceStart < targetNode.loc.start.offset) {
// 源在目标前面：先删除源，再插入
// 删除源元素
const beforeSource = templateContent.substring(0, sourceLineStart)
const afterSource = templateContent.substring(sourceEnd)
let afterSourceTrimmed = afterSource.startsWith('\n') ? afterSource.substring(1) : afterSource
const withoutSource = beforeSource + afterSourceTrimmed
// 计算新的插入位置
const removedLength = templateContent.length - withoutSource.length
const newInsertPosition = insertPositionInTemplate - removedLength
// 插入到目标内部
const insertText = adjustedSourceText + '\n' + targetIndent
return withoutSource.substring(0, newInsertPosition) +
insertText +
withoutSource.substring(newInsertPosition)
} else {
// 源在目标后面：先插入，再删除
// 插入到目标内部
const insertText = adjustedSourceText + '\n' + targetIndent
const withInsert = templateContent.substring(0, insertPositionInTemplate) +
insertText +
templateContent.substring(insertPositionInTemplate)
// 计算源元素新位置
const insertedLength = insertText.length
const newSourceLineStart = sourceLineStart + insertedLength
const newSourceEnd = sourceEnd + insertedLength
// 删除源元素
const beforeNewSource = withInsert.substring(0, newSourceLineStart)
const afterNewSource = withInsert.substring(newSourceEnd)
let afterTrimmed = afterNewSource.startsWith('\n') ? afterNewSource.substring(1) : afterNewSource
return beforeNewSource + afterTrimmed
}
}
/**
* 移动元素
*
@@ -107,7 +194,7 @@ function getNodeSourceText(source, node) {
* @param {Object} options - 移动选项
* @param {string} options.sourcePath - 源元素路径，如 "r1c1"
* @param {string} options.targetPath - 目标元素路径，如 "r1c2"
* @param {string} options.direction - 移动方向: 'top' | 'bottom' | 'left' | 'right'
* @param {string} options.direction - 移动方向: 'top' | 'bottom' | 'left' | 'right' | 'inside'
* @returns {Object} - { success: boolean, content?: string, error?: string }
*/
export function moveElement(vueContent, options) {
@@ -194,9 +281,16 @@ export function moveElement(vueContent, options) {
const targetLineStart = templateContent.lastIndexOf('\n', targetStart - 1) + 1
const targetIndent = templateContent.substring(targetLineStart, targetStart)
// 判断是否需要先删除源，再插入
// 关键：需要考虑源和目标的相对位置
if (sourceStart < targetStart) {
// 处理 'inside' 方向（放入目标元素内部）
if (direction === 'inside') {
newTemplateContent = moveElementInside(
templateContent,
sourceNode,
targetNode,
sourcePath,
targetPath
)
} else if (sourceStart < targetStart) {
// 源在目标前面：先处理目标位置，再删除源
const insertPosition = (direction === 'bottom' || direction === 'right')
? targetEnd