diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue index 6199a8cea..17cec39fa 100644 --- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue +++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue @@ -9,14 +9,17 @@ const sidebarMenu = shallowRef(sidebarItems); const showIframe = ref(false); -const dragButtonStyle = { +const dragHeaderStyle = { width: '100%', padding: '4px', - cursor: 'move', background: '#f0f0f0', borderBottom: '1px solid #ccc', borderTopLeftRadius: '8px', - borderTopRightRadius: '8px' + borderTopRightRadius: '8px', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + cursor: 'move' }; function toggleIframe() { @@ -27,27 +30,36 @@ let offsetX = 0; let offsetY = 0; let isDragging = false; -// @ts-ignore function onMouseDown(event) { + // 如果点击的是关闭按钮则不启动拖拽 + // 可通过 event.target 判断(这里通过在关闭按钮上添加 .stop 处理) isDragging = true; - offsetX = event.clientX - event.target.parentElement.getBoundingClientRect().left; - offsetY = event.clientY - event.target.parentElement.getBoundingClientRect().top; + const dm = document.getElementById('draggable-iframe'); + const rect = dm.getBoundingClientRect(); + offsetX = event.clientX - rect.left; + offsetY = event.clientY - rect.top; + // 禁用文字选中 + document.body.style.userSelect = 'none'; + // 绑定全局事件,确保拖拽不中断 + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); } -// @ts-ignore + function onMouseMove(event) { if (isDragging) { const dm = document.getElementById('draggable-iframe'); - // @ts-ignore dm.style.left = (event.clientX - offsetX) + 'px'; - // @ts-ignore dm.style.top = (event.clientY - offsetY) + 'px'; } } function onMouseUp() { isDragging = false; + document.body.style.userSelect = ''; // 恢复文字选中 + // 移除全局事件监听 + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); } - @@ -106,8 +133,8 @@ export default { hasWebUIUpdate: false, }), mounted() { - this.get_version() - this.check_webui_update() + this.get_version(); + this.check_webui_update(); }, methods: { get_version() { @@ -131,4 +158,4 @@ export default { } }, }; - \ No newline at end of file +