diff --git a/frontend/src/components/pure/ms-description/index.vue b/frontend/src/components/pure/ms-description/index.vue index 9d6ee3b055..dbdf9720a0 100644 --- a/frontend/src/components/pure/ms-description/index.vue +++ b/frontend/src/components/pure/ms-description/index.vue @@ -57,9 +57,9 @@ - + {{ item.value }} - + +
+ +
@@ -91,8 +91,7 @@ cancelText?: string; saveContinueText?: string; showContinue?: boolean; - width: number | string; - minWidth?: string; // 最小宽度 + width: number; noContentPadding?: boolean; // 是否没有内容内边距 } @@ -138,6 +137,42 @@ visible.value = false; emit('update:visible', false); }; + + const resizing = ref(false); // 是否正在拖拽 + const drawerWidth = ref(props.width); // 抽屉初始宽度 + + /** + * 鼠标单击开始监听拖拽移动 + */ + const startResize = (event: MouseEvent) => { + resizing.value = true; + const startX = event.clientX; + const initialWidth = drawerWidth.value; + + // 计算鼠标移动距离 + const handleMouseMove = (_event: MouseEvent) => { + if (resizing.value) { + const newWidth = initialWidth + (startX - _event.clientX); // 新的宽度等于当前抽屉宽度+鼠标移动的距离 + if (newWidth >= (props.width || 480) && newWidth <= window.innerWidth * 0.8) { + // 最大最小宽度限制,最小宽度为传入的width或480,最大宽度为视图窗口宽度的80% + drawerWidth.value = newWidth; + } + } + }; + + // 松开鼠标按键,拖拽结束 + const handleMouseUp = () => { + if (resizing.value) { + // 如果当前是在拖拽,则重置拖拽状态,且移除鼠标监听事件 + resizing.value = false; + window.removeEventListener('mousemove', handleMouseMove); + window.removeEventListener('mouseup', handleMouseUp); + } + }; + + window.addEventListener('mousemove', handleMouseMove); + window.addEventListener('mouseup', handleMouseUp); + }; diff --git a/frontend/src/views/setting/system/resourcePool/index.vue b/frontend/src/views/setting/system/resourcePool/index.vue index 74fab715a0..5783b19c4b 100644 --- a/frontend/src/views/setting/system/resourcePool/index.vue +++ b/frontend/src/views/setting/system/resourcePool/index.vue @@ -29,8 +29,7 @@