From 0cf64d23162013f0a625b3e6f51c19e01c3b9c26 Mon Sep 17 00:00:00 2001
From: "chen.zhang" <422734124@qq.com>
Date: Wed, 4 Dec 2024 16:31:56 +0800
Subject: [PATCH 1/6] =?UTF-8?q?perf:=20=E8=AF=81=E4=B9=A6=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA-=E8=B4=A6=E5=8F=B7=E7=9A=84=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=EF=BC=8C=E6=9B=BF=E6=8D=A2=E4=B8=BA=E7=BB=84=E4=BB=B6=20--stor?=
 =?UTF-8?q?y=3D121038957?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/business/cert-manager/index.tsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/front/src/views/business/cert-manager/index.tsx b/front/src/views/business/cert-manager/index.tsx
index e5d868d893..24af2b68cb 100644
--- a/front/src/views/business/cert-manager/index.tsx
+++ b/front/src/views/business/cert-manager/index.tsx
@@ -11,7 +11,7 @@ import { useResourceAccountStore } from '@/store/useResourceAccountStore';
 import useColumns from '@/views/resource/resource-manage/hooks/use-columns';
 import useSelection from '@/views/resource/resource-manage/hooks/use-selection';
 import CommonSideslider from '@/components/common-sideslider';
-import AccountSelector from '@/components/account-selector/index.vue';
+import AccountSelector from '@/components/account-selector/index-new.vue';
 import { BatchDistribution, DResourceType } from '@/views/resource/resource-manage/children/dialog/batch-distribution';
 import Confirm from '@/components/confirm';
 import { getTableNewRowClass } from '@/common/util';
@@ -173,14 +173,7 @@ export default defineComponent({
         label: '云账号',
         property: 'account_id',
         required: true,
-        content: () => (
-          <AccountSelector
-            v-model={formModel.account_id}
-            disabled={!!resourceAccountStore?.resourceAccount?.id}
-            mustBiz={!isResourcePage}
-            bizId={accountStore.bizs}
-            type='resource'></AccountSelector>
-        ),
+        content: () => <AccountSelector v-model={formModel.account_id} bizId={accountStore.bizs}></AccountSelector>,
       },
       {
         label: '证书名称',

From 68cf14d1be2db6c7ee51dce72495287f50fc5eab Mon Sep 17 00:00:00 2001
From: "chen.zhang" <422734124@qq.com>
Date: Fri, 6 Dec 2024 19:17:05 +0800
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E6=89=B9=E9=87=8F=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E8=B7=9F=E5=A4=8D=E5=88=B6=E5=88=86=E5=BC=80=E6=9D=A5?=
 =?UTF-8?q?=20--story=3D121039445?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/drop-down-menu/index.vue | 106 ++++++++++++++++++
 front/src/typings/common.ts                   |   5 +
 .../host/children/host-operations/index.tsx   |  71 +++++-------
 .../common/table/HostOperations.tsx           |  59 ++++------
 4 files changed, 163 insertions(+), 78 deletions(-)
 create mode 100644 front/src/components/drop-down-menu/index.vue

diff --git a/front/src/components/drop-down-menu/index.vue b/front/src/components/drop-down-menu/index.vue
new file mode 100644
index 0000000000..6c71124a01
--- /dev/null
+++ b/front/src/components/drop-down-menu/index.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Button, Dropdown } from 'bkui-vue';
+import { BkDropdownItem, BkDropdownMenu } from 'bkui-vue/lib/dropdown';
+import { AngleDown } from 'bkui-vue/lib/icon';
+import { DropDownPopover } from '@/typings';
+import { useI18n } from 'vue-i18n';
+import CopyToClipboard from '@/components/copy-to-clipboard/index.vue';
+
+export interface DropDownMenuProps {
+  isShow: boolean;
+  disabled: boolean;
+  btnText: string;
+  popoverOptions: DropDownPopover;
+  type: string;
+  itemValue: any;
+  className: string;
+}
+
+defineOptions({ name: 'DropDownMenu' });
+
+const { t } = useI18n();
+const emit = defineEmits<(e: 'clickItemVal', val: string | number) => void>();
+
+const props = withDefaults(defineProps<DropDownMenuProps>(), {
+  isShow: false,
+  btnText: '批量操作',
+  type: 'default',
+  className: 'host_operations_container',
+  popoverOptions: () => ({
+    trigger: 'manual',
+    forceClickoutside: true,
+  }),
+});
+
+const show = ref<boolean>(props.isShow);
+let popHideTimerId: any = undefined;
+const popShowTimerId: any = undefined;
+let isMouseenter = false;
+
+const showPopover = () => {
+  show.value = true;
+};
+const hidePopover = () => {
+  show.value = false;
+};
+const handleMouseEnter = () => {
+  if (!props.disabled) showPopover();
+};
+const handleMouseLeave = () => {
+  popHideTimerId = setTimeout(() => {
+    popShowTimerId && clearTimeout(popShowTimerId);
+    hidePopover();
+  }, 300);
+};
+const handleClickItem = (type: string | number) => {
+  hidePopover();
+  emit('clickItemVal', type);
+};
+const handleContentEnter = () => {
+  if (popHideTimerId) {
+    isMouseenter = true;
+    clearTimeout(popHideTimerId);
+    popHideTimerId = undefined;
+  }
+};
+const handleContentLeave = () => {
+  if (isMouseenter) {
+    hidePopover();
+    isMouseenter = false;
+  }
+};
+</script>
+
+<template>
+  <div :class="props.className" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
+    <Dropdown :disabled="props.disabled" :is-show="show" :popover-options="props.popoverOptions" @hide="hidePopover">
+      <Button :disabled="props.disabled" @click="showPopover">
+        {{ t(props.btnText) }}
+        <AngleDown class="f26"></AngleDown>
+      </Button>
+      <template #content>
+        <BkDropdownMenu @mouseenter="handleContentEnter" @mouseleave="handleContentLeave">
+          <template v-if="props.type === 'default'">
+            <BkDropdownItem
+              v-for="(item, value, index) in props.itemValue"
+              :key="index"
+              @click="handleClickItem(value)"
+            >
+              批量{{ item }}
+            </BkDropdownItem>
+          </template>
+          <template v-else>
+            <CopyToClipboard
+              v-for="(item, index) in props.itemValue"
+              :key="index"
+              type="dropdown-item"
+              :text="t(item.name)"
+              :content="item.value"
+            />
+          </template>
+        </BkDropdownMenu>
+      </template>
+    </Dropdown>
+  </div>
+</template>
diff --git a/front/src/typings/common.ts b/front/src/typings/common.ts
index c0cd4dab1f..b0dac39cb8 100644
--- a/front/src/typings/common.ts
+++ b/front/src/typings/common.ts
@@ -93,3 +93,8 @@ export interface IBreadcrumb {
   title: string;
   display: boolean;
 }
+
+export interface DropDownPopover {
+  trigger: 'manual' | 'click' | 'hover';
+  forceClickoutside: boolean;
+}
diff --git a/front/src/views/business/host/children/host-operations/index.tsx b/front/src/views/business/host/children/host-operations/index.tsx
index 270f27ad32..4e6c18c432 100644
--- a/front/src/views/business/host/children/host-operations/index.tsx
+++ b/front/src/views/business/host/children/host-operations/index.tsx
@@ -1,12 +1,10 @@
 import { PropType, defineComponent, reactive, ref, watch, computed, toRefs } from 'vue';
-import { Button, Dialog, Dropdown, Loading } from 'bkui-vue';
+import { Button, Dialog, Loading } from 'bkui-vue';
 import cssModule from './index.module.scss';
-import { AngleDown } from 'bkui-vue/lib/icon';
-import { BkDropdownItem, BkDropdownMenu } from 'bkui-vue/lib/dropdown';
 import CommonLocalTable from '@/components/LocalTable';
-import CopyToClipboard from '@/components/copy-to-clipboard/index.vue';
 import { BkButtonGroup } from 'bkui-vue/lib/button';
 import useBatchOperation from './use-batch-operation';
+import DropDownMenu from '@/components/drop-down-menu/index.vue';
 
 export const HOST_SHUTDOWN_STATUS = [
   'TERMINATED',
@@ -70,6 +68,14 @@ export const operationMap = {
   },
 };
 
+const validOperationMap = Object.entries(operationMap)
+  .filter(([opType]) => opType !== OperationActions.NONE)
+  .reduce((prev: any, cur) => {
+    const [key, value] = cur;
+    prev[key] = value?.label ?? '';
+    return prev;
+  }, {});
+
 export default defineComponent({
   props: {
     selections: {
@@ -148,42 +154,27 @@ export default defineComponent({
 
     return () => (
       <>
-        <div class={cssModule.host_operations_container}>
-          <Dropdown disabled={operationsDisabled.value}>
-            {{
-              default: () => (
-                <Button disabled={operationsDisabled.value}>
-                  批量操作
-                  <AngleDown class={cssModule.f26}></AngleDown>
-                </Button>
-              ),
-              content: () => (
-                <BkDropdownMenu>
-                  {Object.entries(operationMap)
-                    .filter(([opType]) => opType !== OperationActions.NONE)
-                    .map(([opType, opData]) => (
-                      <BkDropdownItem
-                        onClick={() => {
-                          operationType.value = opType as OperationActions;
-                        }}>
-                        {`批量${opData.label}`}
-                      </BkDropdownItem>
-                    ))}
-                  <CopyToClipboard
-                    type='dropdown-item'
-                    text='复制内网IP'
-                    content={selectedRowPrivateIPs.value?.join?.(',')}
-                  />
-                  <CopyToClipboard
-                    type='dropdown-item'
-                    text='复制公网IP'
-                    content={selectedRowPublicIPs.value?.join?.(',')}
-                  />
-                </BkDropdownMenu>
-              ),
-            }}
-          </Dropdown>
-        </div>
+        <DropDownMenu
+          className={cssModule.host_operations_container}
+          itemValue={validOperationMap}
+          disabled={operationsDisabled.value}
+          onClickItemVal={(value) => (operationType.value = value as OperationActions)}></DropDownMenu>
+
+        <DropDownMenu
+          className={cssModule.host_operations_container}
+          btnText={'复制'}
+          type={'copy'}
+          itemValue={[
+            {
+              name: '复制内网IP',
+              value: selectedRowPrivateIPs?.value?.join?.(','),
+            },
+            {
+              name: '复制公网IP',
+              value: selectedRowPublicIPs?.value?.join?.(','),
+            },
+          ]}
+          disabled={operationsDisabled.value}></DropDownMenu>
 
         <Dialog
           isShow={isDialogShow.value}
diff --git a/front/src/views/resource/resource-manage/common/table/HostOperations.tsx b/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
index 50cfb65347..e6a1b1727c 100644
--- a/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
+++ b/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
@@ -1,14 +1,12 @@
-import { Button, Checkbox, Dialog, Dropdown, Loading, Message } from 'bkui-vue';
+import { Button, Checkbox, Dialog, Loading, Message } from 'bkui-vue';
 import { PropType, computed, defineComponent, reactive, ref, watch } from 'vue';
 import './index.scss';
 import { usePreviousState } from '@/hooks/usePreviousState';
 import { useResourceStore } from '@/store';
-import { AngleDown } from 'bkui-vue/lib/icon';
-import { BkDropdownItem, BkDropdownMenu } from 'bkui-vue/lib/dropdown';
-import CopyToClipboard from '@/components/copy-to-clipboard/index.vue';
 import CommonLocalTable from '../commonLocalTable';
 import { BkButtonGroup } from 'bkui-vue/lib/button';
 import http from '@/http';
+import DropDownMenu from '@/components/drop-down-menu/index.vue';
 const { BK_HCM_AJAX_URL_PREFIX } = window.PROJECT_CONFIG;
 
 export enum Operations {
@@ -387,40 +385,25 @@ export default defineComponent({
 
     return () => (
       <>
-        <div class={'host_operations_container'}>
-          <Dropdown disabled={operationsDisabled.value}>
-            {{
-              default: () => (
-                <Button disabled={operationsDisabled.value}>
-                  批量操作
-                  <AngleDown class={'f26'}></AngleDown>
-                </Button>
-              ),
-              content: () => (
-                <BkDropdownMenu>
-                  {Object.entries(OperationsMap).map(([opType, opName]) => (
-                    <BkDropdownItem
-                      onClick={() => {
-                        operationType.value = opType as Operations;
-                      }}>
-                      {`批量${opName}`}
-                    </BkDropdownItem>
-                  ))}
-                  <CopyToClipboard
-                    type='dropdown-item'
-                    text='复制内网IP'
-                    content={selectedRowPrivateIPs.value?.join?.(',')}
-                  />
-                  <CopyToClipboard
-                    type='dropdown-item'
-                    text='复制公网IP'
-                    content={selectedRowPublicIPs.value?.join?.(',')}
-                  />
-                </BkDropdownMenu>
-              ),
-            }}
-          </Dropdown>
-        </div>
+        <DropDownMenu
+          itemValue={OperationsMap}
+          disabled={operationsDisabled.value}
+          onClickItemVal={(value) => (operationType.value = value as Operations)}></DropDownMenu>
+
+        <DropDownMenu
+          btnText={'复制'}
+          type={'copy'}
+          itemValue={[
+            {
+              name: '复制内网IP',
+              value: selectedRowPrivateIPs?.value?.join?.(','),
+            },
+            {
+              name: '复制公网IP',
+              value: selectedRowPublicIPs?.value?.join?.(','),
+            },
+          ]}
+          disabled={operationsDisabled.value}></DropDownMenu>
 
         <Dialog
           isShow={isDialogShow.value}

From 3860b276a72c5a728352bd0bc3fbcb203eabb58e Mon Sep 17 00:00:00 2001
From: "chen.zhang" <422734124@qq.com>
Date: Tue, 10 Dec 2024 17:10:07 +0800
Subject: [PATCH 3/6] =?UTF-8?q?perf:=20=E7=BB=84=E4=BB=B6=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/drop-down-menu/index.vue | 106 ------------------
 front/src/components/dropdown-menu/index.vue  |  74 ++++++++++++
 front/src/typings/common.ts                   |   5 -
 .../host/children/host-operations/index.tsx   |  84 +++++++++-----
 .../common/table/HostOperations.tsx           |  71 ++++++++----
 5 files changed, 182 insertions(+), 158 deletions(-)
 delete mode 100644 front/src/components/drop-down-menu/index.vue
 create mode 100644 front/src/components/dropdown-menu/index.vue

diff --git a/front/src/components/drop-down-menu/index.vue b/front/src/components/drop-down-menu/index.vue
deleted file mode 100644
index 6c71124a01..0000000000
--- a/front/src/components/drop-down-menu/index.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { Button, Dropdown } from 'bkui-vue';
-import { BkDropdownItem, BkDropdownMenu } from 'bkui-vue/lib/dropdown';
-import { AngleDown } from 'bkui-vue/lib/icon';
-import { DropDownPopover } from '@/typings';
-import { useI18n } from 'vue-i18n';
-import CopyToClipboard from '@/components/copy-to-clipboard/index.vue';
-
-export interface DropDownMenuProps {
-  isShow: boolean;
-  disabled: boolean;
-  btnText: string;
-  popoverOptions: DropDownPopover;
-  type: string;
-  itemValue: any;
-  className: string;
-}
-
-defineOptions({ name: 'DropDownMenu' });
-
-const { t } = useI18n();
-const emit = defineEmits<(e: 'clickItemVal', val: string | number) => void>();
-
-const props = withDefaults(defineProps<DropDownMenuProps>(), {
-  isShow: false,
-  btnText: '批量操作',
-  type: 'default',
-  className: 'host_operations_container',
-  popoverOptions: () => ({
-    trigger: 'manual',
-    forceClickoutside: true,
-  }),
-});
-
-const show = ref<boolean>(props.isShow);
-let popHideTimerId: any = undefined;
-const popShowTimerId: any = undefined;
-let isMouseenter = false;
-
-const showPopover = () => {
-  show.value = true;
-};
-const hidePopover = () => {
-  show.value = false;
-};
-const handleMouseEnter = () => {
-  if (!props.disabled) showPopover();
-};
-const handleMouseLeave = () => {
-  popHideTimerId = setTimeout(() => {
-    popShowTimerId && clearTimeout(popShowTimerId);
-    hidePopover();
-  }, 300);
-};
-const handleClickItem = (type: string | number) => {
-  hidePopover();
-  emit('clickItemVal', type);
-};
-const handleContentEnter = () => {
-  if (popHideTimerId) {
-    isMouseenter = true;
-    clearTimeout(popHideTimerId);
-    popHideTimerId = undefined;
-  }
-};
-const handleContentLeave = () => {
-  if (isMouseenter) {
-    hidePopover();
-    isMouseenter = false;
-  }
-};
-</script>
-
-<template>
-  <div :class="props.className" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
-    <Dropdown :disabled="props.disabled" :is-show="show" :popover-options="props.popoverOptions" @hide="hidePopover">
-      <Button :disabled="props.disabled" @click="showPopover">
-        {{ t(props.btnText) }}
-        <AngleDown class="f26"></AngleDown>
-      </Button>
-      <template #content>
-        <BkDropdownMenu @mouseenter="handleContentEnter" @mouseleave="handleContentLeave">
-          <template v-if="props.type === 'default'">
-            <BkDropdownItem
-              v-for="(item, value, index) in props.itemValue"
-              :key="index"
-              @click="handleClickItem(value)"
-            >
-              批量{{ item }}
-            </BkDropdownItem>
-          </template>
-          <template v-else>
-            <CopyToClipboard
-              v-for="(item, index) in props.itemValue"
-              :key="index"
-              type="dropdown-item"
-              :text="t(item.name)"
-              :content="item.value"
-            />
-          </template>
-        </BkDropdownMenu>
-      </template>
-    </Dropdown>
-  </div>
-</template>
diff --git a/front/src/components/dropdown-menu/index.vue b/front/src/components/dropdown-menu/index.vue
new file mode 100644
index 0000000000..1917e5bd1a
--- /dev/null
+++ b/front/src/components/dropdown-menu/index.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+export interface DropDownPopover {
+  trigger: 'manual' | 'click' | 'hover';
+  forceClickoutside: boolean;
+}
+export interface DropDownMenuProps {
+  isShow: boolean;
+  disabled: boolean;
+  popoverOptions: DropDownPopover;
+}
+
+defineOptions({ name: 'DropDownMenu' });
+
+const props = withDefaults(defineProps<DropDownMenuProps>(), {
+  isShow: false,
+  popoverOptions: () => ({
+    trigger: 'manual',
+    forceClickoutside: true,
+  }),
+});
+
+const show = ref<boolean>(props.isShow);
+let popHideTimerId: ReturnType<typeof setTimeout> | null = null;
+const popShowTimerId: ReturnType<typeof setTimeout> | null = null;
+let isMouseenter = false;
+
+const showPopover = () => {
+  show.value = true;
+};
+const hidePopover = () => {
+  show.value = false;
+};
+const handleMouseEnter = () => {
+  if (!props.disabled) showPopover();
+};
+const handleMouseLeave = () => {
+  popHideTimerId = setTimeout(() => {
+    popShowTimerId && clearTimeout(popShowTimerId);
+    hidePopover();
+  }, 300);
+};
+const handleContentEnter = () => {
+  if (popHideTimerId) {
+    isMouseenter = true;
+    clearTimeout(popHideTimerId);
+    popHideTimerId = null;
+  }
+};
+const handleContentLeave = () => {
+  if (isMouseenter) {
+    hidePopover();
+    isMouseenter = false;
+  }
+};
+
+defineExpose({ hidePopover });
+</script>
+
+<template>
+  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
+    <bk-dropdown :disabled="props.disabled" :is-show="show" :popover-options="props.popoverOptions" @hide="hidePopover">
+      <bk-button :disabled="props.disabled" @click="showPopover">
+        <slot></slot>
+      </bk-button>
+      <template #content>
+        <bk-dropdown-menu @mouseenter="handleContentEnter" @mouseleave="handleContentLeave">
+          <slot name="menuItem"></slot>
+        </bk-dropdown-menu>
+      </template>
+    </bk-dropdown>
+  </div>
+</template>
diff --git a/front/src/typings/common.ts b/front/src/typings/common.ts
index b0dac39cb8..c0cd4dab1f 100644
--- a/front/src/typings/common.ts
+++ b/front/src/typings/common.ts
@@ -93,8 +93,3 @@ export interface IBreadcrumb {
   title: string;
   display: boolean;
 }
-
-export interface DropDownPopover {
-  trigger: 'manual' | 'click' | 'hover';
-  forceClickoutside: boolean;
-}
diff --git a/front/src/views/business/host/children/host-operations/index.tsx b/front/src/views/business/host/children/host-operations/index.tsx
index 4e6c18c432..c4bef27259 100644
--- a/front/src/views/business/host/children/host-operations/index.tsx
+++ b/front/src/views/business/host/children/host-operations/index.tsx
@@ -1,10 +1,13 @@
 import { PropType, defineComponent, reactive, ref, watch, computed, toRefs } from 'vue';
 import { Button, Dialog, Loading } from 'bkui-vue';
 import cssModule from './index.module.scss';
+import { AngleDown } from 'bkui-vue/lib/icon';
+import { BkDropdownItem } from 'bkui-vue/lib/dropdown';
 import CommonLocalTable from '@/components/LocalTable';
+import CopyToClipboard from '@/components/copy-to-clipboard/index.vue';
 import { BkButtonGroup } from 'bkui-vue/lib/button';
 import useBatchOperation from './use-batch-operation';
-import DropDownMenu from '@/components/drop-down-menu/index.vue';
+import DropDownMenu from '@/components/dropdown-menu/index.vue';
 
 export const HOST_SHUTDOWN_STATUS = [
   'TERMINATED',
@@ -68,14 +71,6 @@ export const operationMap = {
   },
 };
 
-const validOperationMap = Object.entries(operationMap)
-  .filter(([opType]) => opType !== OperationActions.NONE)
-  .reduce((prev: any, cur) => {
-    const [key, value] = cur;
-    prev[key] = value?.label ?? '';
-    return prev;
-  }, {});
-
 export default defineComponent({
   props: {
     selections: {
@@ -95,6 +90,7 @@ export default defineComponent({
   },
   setup(props) {
     const dialogRef = ref(null);
+    const operationRef = ref(null);
 
     const { selections } = toRefs(props);
 
@@ -155,26 +151,58 @@ export default defineComponent({
     return () => (
       <>
         <DropDownMenu
-          className={cssModule.host_operations_container}
-          itemValue={validOperationMap}
-          disabled={operationsDisabled.value}
-          onClickItemVal={(value) => (operationType.value = value as OperationActions)}></DropDownMenu>
+          ref={operationRef}
+          class={cssModule.host_operations_container}
+          disabled={operationsDisabled.value}>
+          {{
+            default: () => (
+              <>
+                批量操作
+                <AngleDown class={cssModule.f26}></AngleDown>
+              </>
+            ),
+            menuItem: () => (
+              <>
+                {Object.entries(operationMap)
+                  .filter(([opType]) => opType !== OperationActions.NONE)
+                  .map(([opType, opData]) => (
+                    <BkDropdownItem
+                      onClick={() => {
+                        operationType.value = opType as OperationActions;
+                        operationRef.value?.hidePopover();
+                      }}>
+                      {`批量${opData.label}`}
+                    </BkDropdownItem>
+                  ))}
+              </>
+            ),
+          }}
+        </DropDownMenu>
 
-        <DropDownMenu
-          className={cssModule.host_operations_container}
-          btnText={'复制'}
-          type={'copy'}
-          itemValue={[
-            {
-              name: '复制内网IP',
-              value: selectedRowPrivateIPs?.value?.join?.(','),
-            },
-            {
-              name: '复制公网IP',
-              value: selectedRowPublicIPs?.value?.join?.(','),
-            },
-          ]}
-          disabled={operationsDisabled.value}></DropDownMenu>
+        <DropDownMenu class={cssModule.host_operations_container} disabled={operationsDisabled.value}>
+          {{
+            default: () => (
+              <>
+                复制
+                <AngleDown class={cssModule.f26}></AngleDown>
+              </>
+            ),
+            menuItem: () => (
+              <>
+                <CopyToClipboard
+                  type='dropdown-item'
+                  text='复制内网IP'
+                  content={selectedRowPrivateIPs.value?.join?.(',')}
+                />
+                <CopyToClipboard
+                  type='dropdown-item'
+                  text='复制公网IP'
+                  content={selectedRowPublicIPs.value?.join?.(',')}
+                />
+              </>
+            ),
+          }}
+        </DropDownMenu>
 
         <Dialog
           isShow={isDialogShow.value}
diff --git a/front/src/views/resource/resource-manage/common/table/HostOperations.tsx b/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
index e6a1b1727c..44897426a6 100644
--- a/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
+++ b/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
@@ -6,7 +6,10 @@ import { useResourceStore } from '@/store';
 import CommonLocalTable from '../commonLocalTable';
 import { BkButtonGroup } from 'bkui-vue/lib/button';
 import http from '@/http';
-import DropDownMenu from '@/components/drop-down-menu/index.vue';
+import DropDownMenu from '@/components/dropdown-menu/index.vue';
+import { AngleDown } from 'bkui-vue/lib/icon';
+import { BkDropdownItem } from 'bkui-vue/lib/dropdown';
+import CopyToClipboard from '@/components/copy-to-clipboard/index.vue';
 const { BK_HCM_AJAX_URL_PREFIX } = window.PROJECT_CONFIG;
 
 export enum Operations {
@@ -60,6 +63,7 @@ export default defineComponent({
   setup(props) {
     const operationType = ref<Operations>(Operations.None);
     const dialogRef = ref(null);
+    const operationRef = ref(null);
     const isConfirmDisabled = ref(true);
     const targetHost = ref([]);
     const unTargetHost = ref([]);
@@ -385,25 +389,54 @@ export default defineComponent({
 
     return () => (
       <>
-        <DropDownMenu
-          itemValue={OperationsMap}
-          disabled={operationsDisabled.value}
-          onClickItemVal={(value) => (operationType.value = value as Operations)}></DropDownMenu>
+        <DropDownMenu class={'host_operations_container'} ref={operationRef} disabled={operationsDisabled.value}>
+          {{
+            default: () => (
+              <>
+                批量操作
+                <AngleDown class={'f26'}></AngleDown>
+              </>
+            ),
+            menuItem: () => (
+              <>
+                {Object.entries(OperationsMap).map(([opType, opName]) => (
+                  <BkDropdownItem
+                    onClick={() => {
+                      operationType.value = opType as Operations;
+                      operationRef.value?.hidePopover();
+                    }}>
+                    {`批量${opName}`}
+                  </BkDropdownItem>
+                ))}
+              </>
+            ),
+          }}
+        </DropDownMenu>
 
-        <DropDownMenu
-          btnText={'复制'}
-          type={'copy'}
-          itemValue={[
-            {
-              name: '复制内网IP',
-              value: selectedRowPrivateIPs?.value?.join?.(','),
-            },
-            {
-              name: '复制公网IP',
-              value: selectedRowPublicIPs?.value?.join?.(','),
-            },
-          ]}
-          disabled={operationsDisabled.value}></DropDownMenu>
+        <DropDownMenu class={'host_operations_container'} disabled={operationsDisabled.value}>
+          {{
+            default: () => (
+              <>
+                复制
+                <AngleDown class={'f26'}></AngleDown>
+              </>
+            ),
+            menuItem: () => (
+              <>
+                <CopyToClipboard
+                  type='dropdown-item'
+                  text='复制内网IP'
+                  content={selectedRowPrivateIPs.value?.join?.(',')}
+                />
+                <CopyToClipboard
+                  type='dropdown-item'
+                  text='复制公网IP'
+                  content={selectedRowPublicIPs.value?.join?.(',')}
+                />
+              </>
+            ),
+          }}
+        </DropDownMenu>
 
         <Dialog
           isShow={isDialogShow.value}

From 3adbc2b1dcd7fcd62541680a56b22bd8d05767c3 Mon Sep 17 00:00:00 2001
From: "chen.zhang" <422734124@qq.com>
Date: Tue, 10 Dec 2024 17:57:33 +0800
Subject: [PATCH 4/6] =?UTF-8?q?perf:=20=E5=A4=8D=E5=88=B6=E6=88=90?=
 =?UTF-8?q?=E5=8A=9F=E5=90=8E=E4=B8=8B=E6=8B=89=E5=B1=82=E6=B6=88=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{dropdown-menu => hcm-dropdown}/index.vue   | 10 ++++------
 .../host/children/host-operations/index.tsx     | 11 +++++++----
 .../common/table/HostOperations.tsx             | 17 ++++++++++-------
 3 files changed, 21 insertions(+), 17 deletions(-)
 rename front/src/components/{dropdown-menu => hcm-dropdown}/index.vue (82%)

diff --git a/front/src/components/dropdown-menu/index.vue b/front/src/components/hcm-dropdown/index.vue
similarity index 82%
rename from front/src/components/dropdown-menu/index.vue
rename to front/src/components/hcm-dropdown/index.vue
index 1917e5bd1a..2e3d1db2bb 100644
--- a/front/src/components/dropdown-menu/index.vue
+++ b/front/src/components/hcm-dropdown/index.vue
@@ -3,7 +3,6 @@ import { ref } from 'vue';
 
 export interface DropDownPopover {
   trigger: 'manual' | 'click' | 'hover';
-  forceClickoutside: boolean;
 }
 export interface DropDownMenuProps {
   isShow: boolean;
@@ -11,13 +10,12 @@ export interface DropDownMenuProps {
   popoverOptions: DropDownPopover;
 }
 
-defineOptions({ name: 'DropDownMenu' });
+defineOptions({ name: 'hcm-dropdown' });
 
 const props = withDefaults(defineProps<DropDownMenuProps>(), {
   isShow: false,
   popoverOptions: () => ({
     trigger: 'manual',
-    forceClickoutside: true,
   }),
 });
 
@@ -60,13 +58,13 @@ defineExpose({ hidePopover });
 
 <template>
   <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
-    <bk-dropdown :disabled="props.disabled" :is-show="show" :popover-options="props.popoverOptions" @hide="hidePopover">
-      <bk-button :disabled="props.disabled" @click="showPopover">
+    <bk-dropdown :disabled="disabled" :is-show="show" :popover-options="popoverOptions" @hide="hidePopover">
+      <bk-button :disabled="disabled" @click="showPopover">
         <slot></slot>
       </bk-button>
       <template #content>
         <bk-dropdown-menu @mouseenter="handleContentEnter" @mouseleave="handleContentLeave">
-          <slot name="menuItem"></slot>
+          <slot name="menus"></slot>
         </bk-dropdown-menu>
       </template>
     </bk-dropdown>
diff --git a/front/src/views/business/host/children/host-operations/index.tsx b/front/src/views/business/host/children/host-operations/index.tsx
index c4bef27259..ba9a0402fa 100644
--- a/front/src/views/business/host/children/host-operations/index.tsx
+++ b/front/src/views/business/host/children/host-operations/index.tsx
@@ -7,7 +7,7 @@ import CommonLocalTable from '@/components/LocalTable';
 import CopyToClipboard from '@/components/copy-to-clipboard/index.vue';
 import { BkButtonGroup } from 'bkui-vue/lib/button';
 import useBatchOperation from './use-batch-operation';
-import DropDownMenu from '@/components/dropdown-menu/index.vue';
+import DropDownMenu from '@/components/hcm-dropdown/index.vue';
 
 export const HOST_SHUTDOWN_STATUS = [
   'TERMINATED',
@@ -91,6 +91,7 @@ export default defineComponent({
   setup(props) {
     const dialogRef = ref(null);
     const operationRef = ref(null);
+    const copyRef = ref(null);
 
     const { selections } = toRefs(props);
 
@@ -161,7 +162,7 @@ export default defineComponent({
                 <AngleDown class={cssModule.f26}></AngleDown>
               </>
             ),
-            menuItem: () => (
+            menus: () => (
               <>
                 {Object.entries(operationMap)
                   .filter(([opType]) => opType !== OperationActions.NONE)
@@ -179,7 +180,7 @@ export default defineComponent({
           }}
         </DropDownMenu>
 
-        <DropDownMenu class={cssModule.host_operations_container} disabled={operationsDisabled.value}>
+        <DropDownMenu ref={copyRef} class={cssModule.host_operations_container} disabled={operationsDisabled.value}>
           {{
             default: () => (
               <>
@@ -187,17 +188,19 @@ export default defineComponent({
                 <AngleDown class={cssModule.f26}></AngleDown>
               </>
             ),
-            menuItem: () => (
+            menus: () => (
               <>
                 <CopyToClipboard
                   type='dropdown-item'
                   text='复制内网IP'
                   content={selectedRowPrivateIPs.value?.join?.(',')}
+                  onSuccess={() => copyRef.value?.hidePopover()}
                 />
                 <CopyToClipboard
                   type='dropdown-item'
                   text='复制公网IP'
                   content={selectedRowPublicIPs.value?.join?.(',')}
+                  onSuccess={() => copyRef.value?.hidePopover()}
                 />
               </>
             ),
diff --git a/front/src/views/resource/resource-manage/common/table/HostOperations.tsx b/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
index 44897426a6..1d65e4b48b 100644
--- a/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
+++ b/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
@@ -3,13 +3,13 @@ import { PropType, computed, defineComponent, reactive, ref, watch } from 'vue';
 import './index.scss';
 import { usePreviousState } from '@/hooks/usePreviousState';
 import { useResourceStore } from '@/store';
-import CommonLocalTable from '../commonLocalTable';
-import { BkButtonGroup } from 'bkui-vue/lib/button';
-import http from '@/http';
-import DropDownMenu from '@/components/dropdown-menu/index.vue';
 import { AngleDown } from 'bkui-vue/lib/icon';
 import { BkDropdownItem } from 'bkui-vue/lib/dropdown';
 import CopyToClipboard from '@/components/copy-to-clipboard/index.vue';
+import CommonLocalTable from '../commonLocalTable';
+import { BkButtonGroup } from 'bkui-vue/lib/button';
+import http from '@/http';
+import DropDownMenu from '@/components/hcm-dropdown/index.vue';
 const { BK_HCM_AJAX_URL_PREFIX } = window.PROJECT_CONFIG;
 
 export enum Operations {
@@ -64,6 +64,7 @@ export default defineComponent({
     const operationType = ref<Operations>(Operations.None);
     const dialogRef = ref(null);
     const operationRef = ref(null);
+    const copyRef = ref(null);
     const isConfirmDisabled = ref(true);
     const targetHost = ref([]);
     const unTargetHost = ref([]);
@@ -397,7 +398,7 @@ export default defineComponent({
                 <AngleDown class={'f26'}></AngleDown>
               </>
             ),
-            menuItem: () => (
+            menus: () => (
               <>
                 {Object.entries(OperationsMap).map(([opType, opName]) => (
                   <BkDropdownItem
@@ -413,7 +414,7 @@ export default defineComponent({
           }}
         </DropDownMenu>
 
-        <DropDownMenu class={'host_operations_container'} disabled={operationsDisabled.value}>
+        <DropDownMenu class={'host_operations_container'} ref={copyRef} disabled={operationsDisabled.value}>
           {{
             default: () => (
               <>
@@ -421,17 +422,19 @@ export default defineComponent({
                 <AngleDown class={'f26'}></AngleDown>
               </>
             ),
-            menuItem: () => (
+            menus: () => (
               <>
                 <CopyToClipboard
                   type='dropdown-item'
                   text='复制内网IP'
                   content={selectedRowPrivateIPs.value?.join?.(',')}
+                  onSuccess={() => copyRef.value?.hidePopover()}
                 />
                 <CopyToClipboard
                   type='dropdown-item'
                   text='复制公网IP'
                   content={selectedRowPublicIPs.value?.join?.(',')}
+                  onSuccess={() => copyRef.value?.hidePopover()}
                 />
               </>
             ),

From 1adc8e030345facba95eed4ddbf8f8b36d4d0de2 Mon Sep 17 00:00:00 2001
From: "chen.zhang" <422734124@qq.com>
Date: Tue, 10 Dec 2024 18:14:28 +0800
Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../host/children/host-operations/index.tsx   | 25 +++++++++++--------
 .../common/table/HostOperations.tsx           | 20 +++++++--------
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/front/src/views/business/host/children/host-operations/index.tsx b/front/src/views/business/host/children/host-operations/index.tsx
index ba9a0402fa..f89ee3e0c3 100644
--- a/front/src/views/business/host/children/host-operations/index.tsx
+++ b/front/src/views/business/host/children/host-operations/index.tsx
@@ -7,7 +7,7 @@ import CommonLocalTable from '@/components/LocalTable';
 import CopyToClipboard from '@/components/copy-to-clipboard/index.vue';
 import { BkButtonGroup } from 'bkui-vue/lib/button';
 import useBatchOperation from './use-batch-operation';
-import DropDownMenu from '@/components/hcm-dropdown/index.vue';
+import HcmDropdown from '@/components/hcm-dropdown/index.vue';
 
 export const HOST_SHUTDOWN_STATUS = [
   'TERMINATED',
@@ -90,8 +90,8 @@ export default defineComponent({
   },
   setup(props) {
     const dialogRef = ref(null);
-    const operationRef = ref(null);
-    const copyRef = ref(null);
+    const dropdownOperationRef = ref(null);
+    const dropdownCopyRef = ref(null);
 
     const { selections } = toRefs(props);
 
@@ -151,8 +151,8 @@ export default defineComponent({
 
     return () => (
       <>
-        <DropDownMenu
-          ref={operationRef}
+        <HcmDropdown
+          ref={dropdownOperationRef}
           class={cssModule.host_operations_container}
           disabled={operationsDisabled.value}>
           {{
@@ -170,7 +170,7 @@ export default defineComponent({
                     <BkDropdownItem
                       onClick={() => {
                         operationType.value = opType as OperationActions;
-                        operationRef.value?.hidePopover();
+                        dropdownOperationRef.value?.hidePopover();
                       }}>
                       {`批量${opData.label}`}
                     </BkDropdownItem>
@@ -178,9 +178,12 @@ export default defineComponent({
               </>
             ),
           }}
-        </DropDownMenu>
+        </HcmDropdown>
 
-        <DropDownMenu ref={copyRef} class={cssModule.host_operations_container} disabled={operationsDisabled.value}>
+        <HcmDropdown
+          ref={dropdownCopyRef}
+          class={cssModule.host_operations_container}
+          disabled={operationsDisabled.value}>
           {{
             default: () => (
               <>
@@ -194,18 +197,18 @@ export default defineComponent({
                   type='dropdown-item'
                   text='复制内网IP'
                   content={selectedRowPrivateIPs.value?.join?.(',')}
-                  onSuccess={() => copyRef.value?.hidePopover()}
+                  onSuccess={() => dropdownCopyRef.value?.hidePopover()}
                 />
                 <CopyToClipboard
                   type='dropdown-item'
                   text='复制公网IP'
                   content={selectedRowPublicIPs.value?.join?.(',')}
-                  onSuccess={() => copyRef.value?.hidePopover()}
+                  onSuccess={() => dropdownCopyRef.value?.hidePopover()}
                 />
               </>
             ),
           }}
-        </DropDownMenu>
+        </HcmDropdown>
 
         <Dialog
           isShow={isDialogShow.value}
diff --git a/front/src/views/resource/resource-manage/common/table/HostOperations.tsx b/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
index 1d65e4b48b..279a9a3034 100644
--- a/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
+++ b/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
@@ -9,7 +9,7 @@ import CopyToClipboard from '@/components/copy-to-clipboard/index.vue';
 import CommonLocalTable from '../commonLocalTable';
 import { BkButtonGroup } from 'bkui-vue/lib/button';
 import http from '@/http';
-import DropDownMenu from '@/components/hcm-dropdown/index.vue';
+import HcmDropdown from '@/components/hcm-dropdown/index.vue';
 const { BK_HCM_AJAX_URL_PREFIX } = window.PROJECT_CONFIG;
 
 export enum Operations {
@@ -63,8 +63,8 @@ export default defineComponent({
   setup(props) {
     const operationType = ref<Operations>(Operations.None);
     const dialogRef = ref(null);
-    const operationRef = ref(null);
-    const copyRef = ref(null);
+    const dropdownOperationRef = ref(null);
+    const dropdownCopyRef = ref(null);
     const isConfirmDisabled = ref(true);
     const targetHost = ref([]);
     const unTargetHost = ref([]);
@@ -390,7 +390,7 @@ export default defineComponent({
 
     return () => (
       <>
-        <DropDownMenu class={'host_operations_container'} ref={operationRef} disabled={operationsDisabled.value}>
+        <HcmDropdown class={'host_operations_container'} ref={dropdownOperationRef} disabled={operationsDisabled.value}>
           {{
             default: () => (
               <>
@@ -404,7 +404,7 @@ export default defineComponent({
                   <BkDropdownItem
                     onClick={() => {
                       operationType.value = opType as Operations;
-                      operationRef.value?.hidePopover();
+                      dropdownOperationRef.value?.hidePopover();
                     }}>
                     {`批量${opName}`}
                   </BkDropdownItem>
@@ -412,9 +412,9 @@ export default defineComponent({
               </>
             ),
           }}
-        </DropDownMenu>
+        </HcmDropdown>
 
-        <DropDownMenu class={'host_operations_container'} ref={copyRef} disabled={operationsDisabled.value}>
+        <HcmDropdown class={'host_operations_container'} ref={dropdownCopyRef} disabled={operationsDisabled.value}>
           {{
             default: () => (
               <>
@@ -428,18 +428,18 @@ export default defineComponent({
                   type='dropdown-item'
                   text='复制内网IP'
                   content={selectedRowPrivateIPs.value?.join?.(',')}
-                  onSuccess={() => copyRef.value?.hidePopover()}
+                  onSuccess={() => dropdownCopyRef.value?.hidePopover()}
                 />
                 <CopyToClipboard
                   type='dropdown-item'
                   text='复制公网IP'
                   content={selectedRowPublicIPs.value?.join?.(',')}
-                  onSuccess={() => copyRef.value?.hidePopover()}
+                  onSuccess={() => dropdownCopyRef.value?.hidePopover()}
                 />
               </>
             ),
           }}
-        </DropDownMenu>
+        </HcmDropdown>
 
         <Dialog
           isShow={isDialogShow.value}

From 1eb168025127c4c1e84205df1ce535059268f39f Mon Sep 17 00:00:00 2001
From: "chen.zhang" <422734124@qq.com>
Date: Wed, 11 Dec 2024 16:45:45 +0800
Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/hcm-dropdown/index.vue              | 9 +++++++--
 .../business/host/children/host-operations/index.tsx     | 4 ++--
 .../resource-manage/common/table/HostOperations.tsx      | 4 ++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/front/src/components/hcm-dropdown/index.vue b/front/src/components/hcm-dropdown/index.vue
index 2e3d1db2bb..b5b37c0d45 100644
--- a/front/src/components/hcm-dropdown/index.vue
+++ b/front/src/components/hcm-dropdown/index.vue
@@ -21,11 +21,16 @@ const props = withDefaults(defineProps<DropDownMenuProps>(), {
 
 const show = ref<boolean>(props.isShow);
 let popHideTimerId: ReturnType<typeof setTimeout> | null = null;
-const popShowTimerId: ReturnType<typeof setTimeout> | null = null;
+let popShowTimerId: ReturnType<typeof setTimeout> | null = null;
 let isMouseenter = false;
 
 const showPopover = () => {
-  show.value = true;
+  popShowTimerId = setTimeout(() => {
+    if (popHideTimerId) {
+      clearTimeout(popHideTimerId);
+    }
+    show.value = true;
+  });
 };
 const hidePopover = () => {
   show.value = false;
diff --git a/front/src/views/business/host/children/host-operations/index.tsx b/front/src/views/business/host/children/host-operations/index.tsx
index f89ee3e0c3..99608dcaaa 100644
--- a/front/src/views/business/host/children/host-operations/index.tsx
+++ b/front/src/views/business/host/children/host-operations/index.tsx
@@ -195,13 +195,13 @@ export default defineComponent({
               <>
                 <CopyToClipboard
                   type='dropdown-item'
-                  text='复制内网IP'
+                  text='内网IP'
                   content={selectedRowPrivateIPs.value?.join?.(',')}
                   onSuccess={() => dropdownCopyRef.value?.hidePopover()}
                 />
                 <CopyToClipboard
                   type='dropdown-item'
-                  text='复制公网IP'
+                  text='公网IP'
                   content={selectedRowPublicIPs.value?.join?.(',')}
                   onSuccess={() => dropdownCopyRef.value?.hidePopover()}
                 />
diff --git a/front/src/views/resource/resource-manage/common/table/HostOperations.tsx b/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
index 279a9a3034..77fcb8845e 100644
--- a/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
+++ b/front/src/views/resource/resource-manage/common/table/HostOperations.tsx
@@ -426,13 +426,13 @@ export default defineComponent({
               <>
                 <CopyToClipboard
                   type='dropdown-item'
-                  text='复制内网IP'
+                  text='内网IP'
                   content={selectedRowPrivateIPs.value?.join?.(',')}
                   onSuccess={() => dropdownCopyRef.value?.hidePopover()}
                 />
                 <CopyToClipboard
                   type='dropdown-item'
-                  text='复制公网IP'
+                  text='公网IP'
                   content={selectedRowPublicIPs.value?.join?.(',')}
                   onSuccess={() => dropdownCopyRef.value?.hidePopover()}
                 />