ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

边框调节

Browse Source
This commit is contained in:
zqm
2025-12-30 11:38:59 +08:00
parent 5f0794aab0
commit 3865b91837
6 changed files with 792 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
View File

@@ -10,42 +10,42 @@
>
<!-- 调整大小的边框 -->
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-nw"
@mousedown="onResizeStart('nw', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-ne"
@mousedown="onResizeStart('ne', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-sw"
@mousedown="onResizeStart('sw', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-se"
@mousedown="onResizeStart('se', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-n"
@mousedown="onResizeStart('n', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-e"
@mousedown="onResizeStart('e', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-s"
@mousedown="onResizeStart('s', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-w"
@mousedown="onResizeStart('w', $event)"
></div>
@@ -113,7 +113,7 @@
<script setup>
import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
import { emitEvent, EVENT_TYPES } from './eventBus'
import { emitEvent, onEvent, EVENT_TYPES } from './eventBus'
import TabPage from './TabPage.vue'
import Panel from './Panel.vue'
import Render from './Render.vue'
@@ -145,28 +145,62 @@ const props = defineProps({
// 本地状态
const localState = ref(props.windowState)
// 保存原始位置和大小信息
const originalPosition = ref({
width: props.width,
height: props.height,
left: props.left,
top: props.top
})
// 保存最大化前的位置和大小，用于还原
const maximizedFromPosition = ref(null)
// 不再需要存储接收到的外部Area内容，改为通过children配置管理
// 组件引用
const areaRef = ref(null)
// 不再需要获取插槽，改为使用props.children
// 原始位置和大小（用于拖拽和调整大小）
const originalPosition = ref({
width: props.width,
height: props.height,
left: props.left || 0,
top: props.top || 0
})
// 调整大小相关状态
const isResizing = ref(false)
const resizeDirection = ref(null)
const resizeStartPos = ref({ x: 0, y: 0 })
const resizeStartSize = ref({ width: 0, height: 0 })
const resizeStartAreaPos = ref({ left: 0, top: 0 })
// 计算属性：是否是单面板场景
const isSinglePanel = computed(() => {
// 检查children配置
if (props.children) {
const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
// 如果没有children，不是单面板
if (childrenArray.length === 0) return false;
// 如果children不是TabPage，不是单面板
const firstChild = childrenArray[0];
if (firstChild.type !== 'TabPage') return false;
// 检查TabPage的children
const tabPageChildren = firstChild.children;
if (!tabPageChildren) return false;
const tabPageChildrenArray = Array.isArray(tabPageChildren) ? tabPageChildren : [tabPageChildren];
// 如果TabPage只包含一个Panel，是单面板
return tabPageChildrenArray.length === 1;
}
// 默认不是单面板
return false;
});
// 计算属性：是否显示标题栏
const shouldShowTitleBar = computed(() => {
// 基础条件：props.showTitleBar为true
if (!props.showTitleBar) return false;
// 单面板场景不显示标题栏
if (isSinglePanel.value) return false;
// 检查children配置
if (props.children) {
const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
@@ -201,32 +235,12 @@ const dragStartPos = ref({ x: 0, y: 0 })
const areaStartPos = ref({ x: 0, y: 0 })
const currentDragId = ref(null)
// 调整大小相关状态
const isResizing = ref(false)
const resizeStartPos = ref({ x: 0, y: 0 })
const resizeDirection = ref(null)
const resizeStartSize = ref({ width: 0, height: 0 })
const resizeStartAreaPos = ref({ left: 0, top: 0 })
// 父容器引用
const parentContainer = ref(null)
// 根据本地状态计算是否最大化
const isMaximized = computed(() => localState.value === '最大化' || localState.value === 'maximized')
// 监听props位置变化，更新原始位置
watch(() => props.left, (newLeft) => {
if (newLeft !== undefined && newLeft !== originalPosition.value.left) {
originalPosition.value.left = newLeft
}
}, { immediate: true })
watch(() => props.top, (newTop) => {
if (newTop !== undefined && newTop !== originalPosition.value.top) {
originalPosition.value.top = newTop
}
}, { immediate: true })
// 监听windowState变化，同步更新localState
watch(() => props.windowState, (newState) => {
if (newState !== localState.value) {
@@ -235,14 +249,11 @@ watch(() => props.windowState, (newState) => {
// 如果是从外部设置为最大化，保存当前位置以便还原
if (newState === '最大化' || newState === 'maximized') {
maximizedFromPosition.value = {
width: originalPosition.value.width,
height: originalPosition.value.height,
left: originalPosition.value.left,
top: originalPosition.value.top
width: props.width,
height: props.height,
left: props.left,
top: props.top
}
} else if (maximizedFromPosition.value) {
// 如果是从外部设置为正常状态，恢复保存的位置
originalPosition.value = { ...maximizedFromPosition.value }
}
}
}, { immediate: true })
@@ -263,21 +274,15 @@ const areaStyle = computed(() => {
}
}
// 非最大化状态：使用原始位置或默认居中
// 非最大化状态：优先使用originalPosition的值，实时响应拖拽变化
const style = {
width: `${originalPosition.value.width}px`,
height: `${originalPosition.value.height}px`,
left: `${originalPosition.value.left}px`,
top: `${originalPosition.value.top}px`,
zIndex: Z_INDEX_LAYERS.CONTENT // 使用统一的z-index层级
}
// 如果有明确的位置，则使用指定位置
if (originalPosition.value.left !== undefined) {
style.left = `${originalPosition.value.left}px`
}
if (originalPosition.value.top !== undefined) {
style.top = `${originalPosition.value.top}px`
}
return style
})
@@ -370,77 +375,81 @@ const onDragStart = (e) => {
e.preventDefault()
}
// 拖拽移动
const onDragMove = (e) => {
if (!isDragging.value || !currentDragId.value) return
// 拖拽移动 - 处理事件总线的area.drag.move事件
const onDragMove = (eventData) => {
// 从事件数据中获取位置信息
const { left, top, dragId } = eventData
// 计算移动距离
const deltaX = e.clientX - dragStartPos.value.x
const deltaY = e.clientY - dragStartPos.value.y
// 计算新位置
let newLeft = areaStartPos.value.x + deltaX
let newTop = areaStartPos.value.y + deltaY
// 确保不超出父容器边界
if (parentContainer.value) {
const parentRect = parentContainer.value.getBoundingClientRect()
const areaWidth = originalPosition.value.width
const areaHeight = originalPosition.value.height
// 严格边界检查，确保元素完全在父容器内
newLeft = Math.max(0, Math.min(newLeft, parentRect.width - areaWidth))
newTop = Math.max(0, Math.min(newTop, parentRect.height - areaHeight))
// 只使用明确提供的left和top值，不直接使用position.x和position.y
if (left !== undefined) {
originalPosition.value.left = left
}
if (top !== undefined) {
originalPosition.value.top = top
}
// 更新位置
originalPosition.value.left = newLeft
originalPosition.value.top = newTop
// 使用事件总线通知拖拽移动，包含 dragId
emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
dragId: currentDragId.value,
areaId: props.id,
position: { x: e.clientX, y: e.clientY },
left: newLeft,
top: newTop,
timestamp: Date.now()
}, {
source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
})
// 使用事件总线通知位置变化，包含 dragId
// 发送位置更新事件
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
dragId: currentDragId.value,
dragId: dragId || currentDragId.value,
areaId: props.id,
left: newLeft,
top: newTop
left: originalPosition.value.left,
top: originalPosition.value.top
}, {
source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
source: { component: 'Area', areaId: props.id, dragId: dragId || currentDragId.value }
})
}
// 拖拽结束
const onDragEnd = () => {
if (!currentDragId.value) return
// 拖拽结束 - 处理事件总线的area.drag.end事件
const onDragEnd = (eventData) => {
const { dragId, finalPosition } = eventData
// 使用事件总线通知拖拽结束，包含 dragId 和标准化数据格式
emitEvent(EVENT_TYPES.AREA_DRAG_END, {
dragId: currentDragId.value,
areaId: props.id,
finalPosition: {
x: originalPosition.value.left,
y: originalPosition.value.top
},
left: originalPosition.value.left,
top: originalPosition.value.top,
timestamp: Date.now()
}, {
source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
})
// 如果提供了finalPosition，更新位置
if (finalPosition) {
originalPosition.value.left = finalPosition.x
originalPosition.value.top = finalPosition.y
}
// 清理拖拽状态
isDragging.value = false
currentDragId.value = null
// 发送位置更新事件
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
dragId: dragId || currentDragId.value,
areaId: props.id,
left: originalPosition.value.left,
top: originalPosition.value.top
}, {
source: { component: 'Area', areaId: props.id, dragId: dragId || currentDragId.value }
})
}
// 处理事件总线的area.resize.move事件
const onAreaResizeMove = (eventData) => {
const { areaId, size, position, direction } = eventData
if (areaId !== props.id) return
if (direction.includes('right') || direction.includes('left')) {
originalPosition.value.width = size.width
if (direction.includes('left')) {
originalPosition.value.left = position.left
}
}
if (direction.includes('bottom') || direction.includes('top')) {
originalPosition.value.height = size.height
if (direction.includes('top')) {
originalPosition.value.top = position.top
}
}
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,
left: originalPosition.value.left,
top: originalPosition.value.top
}, {
source: { component: 'Area', areaId: props.id }
})
}
// 调整大小开始
@@ -576,28 +585,19 @@ const onToggleMaximize = () => {
if (!isMaximized.value) {
// 切换到最大化状态前，保存当前位置和大小
maximizedFromPosition.value = {
width: originalPosition.value.width,
height: originalPosition.value.height,
left: originalPosition.value.left,
top: originalPosition.value.top
width: props.width,
height: props.height,
left: props.left,
top: props.top
}
} else if (maximizedFromPosition.value) {
// 从最大化状态还原时，恢复到保存的位置和大小
originalPosition.value = { ...maximizedFromPosition.value }
// 通知父组件位置变化
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,
left: originalPosition.value.left,
top: originalPosition.value.top
}, {
source: { component: 'Area', areaId: props.id }
})
}
localState.value = next
emitEvent(EVENT_TYPES.WINDOW_STATE_CHANGE, {
areaId: props.id,
state: next
state: next,
// 从最大化状态还原时，传递原始位置信息
position: isMaximized.value && maximizedFromPosition.value ? maximizedFromPosition.value : undefined
}, {
source: { component: 'Area', areaId: props.id }
})
@@ -614,7 +614,7 @@ onMounted(() => {
parentContainer.value = document.querySelector('.dock-layout') || window
// 如果没有指定left或top，自动居中定位
if (originalPosition.value.left === undefined || originalPosition.value.top === undefined) {
if (props.left === undefined || props.top === undefined) {
let parentWidth, parentHeight
if (parentContainer.value === window) {
@@ -630,22 +630,40 @@ onMounted(() => {
parentHeight = 600
}
const areaWidth = originalPosition.value.width || 300
const areaHeight = originalPosition.value.height || 250
const areaWidth = props.width || 300
const areaHeight = props.height || 250
// 计算居中位置
originalPosition.value.left = Math.floor((parentWidth - areaWidth) / 2)
originalPosition.value.top = Math.floor((parentHeight - areaHeight) / 2)
const centerLeft = Math.floor((parentWidth - areaWidth) / 2)
const centerTop = Math.floor((parentHeight - areaHeight) / 2)
// 更新originalPosition
originalPosition.value.left = centerLeft
originalPosition.value.top = centerTop
// 通知父组件位置变化
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,
left: originalPosition.value.left,
top: originalPosition.value.top
left: centerLeft,
top: centerTop
}, {
source: { component: 'Area', areaId: props.id }
})
} else {
// 使用props初始化originalPosition
originalPosition.value.left = props.left
originalPosition.value.top = props.top
originalPosition.value.width = props.width
originalPosition.value.height = props.height
}
// 监听区域拖拽事件
onEvent(EVENT_TYPES.AREA_DRAG_MOVE, onDragMove, { componentId: `area-${props.id}` })
onEvent(EVENT_TYPES.AREA_DRAG_END, onDragEnd, { componentId: `area-${props.id}` })
// 监听区域resize事件 - 同时监听两种事件类型，确保兼容性
onEvent(EVENT_TYPES.AREA_RESIZE_MOVE, onAreaResizeMove, { componentId: `area-${props.id}` })
onEvent(EVENT_TYPES.AREA_RESIZE, onAreaResizeMove, { componentId: `area-${props.id}` })
})
// 组件卸载时清理状态
@@ -869,24 +887,24 @@ defineExpose({
}
.resize-handle-e {
width: 12px;
right: -6px;
width: 3px;
right: -1.5px;
top: 12px;
bottom: 12px;
cursor: ew-resize;
}
.resize-handle-s {
height: 12px;
bottom: -6px;
height: 3px;
bottom: -1.5px;
left: 12px;
right: 12px;
cursor: ns-resize;
}
.resize-handle-w {
width: 12px;
left: -6px;
width: 3px;
left: -1.5px;
top: 12px;
bottom: 12px;
cursor: ew-resize;