From f38f3243ba0ebed3ecdb57c435978c56d6aa7c51 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Fri, 27 Oct 2023 17:18:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=8A=BD=E5=B1=89?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E8=B0=83=E6=95=B4=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6&=E6=8F=8F=E8=BF=B0=E7=BB=84=E4=BB=B6=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/pure/ms-description/index.vue  |  5 +-
 .../src/components/pure/ms-drawer/index.vue   | 54 ++++++++++++++++---
 .../setting/system/resourcePool/index.vue     |  3 +-
 3 files changed, 51 insertions(+), 11 deletions(-)

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 @@
               </MsTag>
             </div>
           </template>
-          <a-button v-else-if="item.isButton" type="text" :size="item.buttonSize" @click="handleItemClick(item)">
+          <MsButton v-else-if="item.isButton" type="text" @click="handleItemClick(item)">
             {{ item.value }}
-          </a-button>
+          </MsButton>
           <template v-else>
             <slot name="value" :item="item">
               {{ item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value }}
@@ -108,7 +108,6 @@
     isTag?: boolean; // 是否标签
     showTagAdd?: boolean; // 是否显示添加标签
     isButton?: boolean;
-    buttonSize?: 'small' | 'mini' | 'large' | 'medium';
     showCopy?: boolean;
     copyTimer?: any | null;
     onClick?: () => void;
diff --git a/frontend/src/components/pure/ms-drawer/index.vue b/frontend/src/components/pure/ms-drawer/index.vue
index 3016868823..3897638a40 100644
--- a/frontend/src/components/pure/ms-drawer/index.vue
+++ b/frontend/src/components/pure/ms-drawer/index.vue
@@ -2,7 +2,7 @@
   <a-drawer
     v-bind="props"
     v-model:visible="visible"
-    :width="props.width"
+    :width="drawerWidth"
     :footer="props.footer"
     :mask="props.mask"
     :class="[
@@ -10,9 +10,6 @@
       props.mask ? '' : 'ms-drawer-no-mask',
       props.noContentPadding ? 'ms-drawer-no-content-padding' : '',
     ]"
-    :drawer-style="{
-      minWidth: props.minWidth,
-    }"
     @cancel="handleCancel"
     @close="handleClose"
   >
@@ -25,6 +22,9 @@
         </div>
       </slot>
     </template>
+    <div class="handle" @mousedown="startResize">
+      <icon-drag-dot-vertical class="absolute left-[-3px] top-[50%] w-[14px]" size="14" />
+    </div>
     <a-scrollbar class="overflow-y-auto" :style="{ height: `calc(100vh - ${contentExtraHeight}px)` }">
       <div class="ms-drawer-body">
         <slot>
@@ -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);
+  };
 </script>
 
 <style lang="less">
@@ -177,4 +212,11 @@
       @apply p-0;
     }
   }
+  .handle {
+    @apply absolute left-0 top-0 flex h-full items-center;
+
+    width: 8px;
+    background-color: var(--color-neutral-3);
+    cursor: col-resize;
+  }
 </style>
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 @@
   </MsCard>
   <MsDrawer
     v-model:visible="showDetailDrawer"
-    width="40vw"
-    min-width="480px"
+    :width="480"
     :title="activePool?.name"
     :title-tag="activePool?.enable ? t('system.resourcePool.tableEnable') : t('system.resourcePool.tableDisable')"
     :title-tag-color="activePool?.enable ? 'green' : 'gray'"