feat: 批量操作跟复制分开来

front/src/components/hcm-dropdown/index.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+export interface DropDownPopover {
+  trigger: 'manual' | 'click' | 'hover';
+}
+export interface DropDownMenuProps {
+  isShow: boolean;
+  disabled: boolean;
+  popoverOptions: DropDownPopover;
+}
+
+defineOptions({ name: 'hcm-dropdown' });
+
+const props = withDefaults(defineProps<DropDownMenuProps>(), {
+  isShow: false,
+  popoverOptions: () => ({
+    trigger: 'manual',
+  }),
+});
+
+const show = ref<boolean>(props.isShow);
+let popHideTimerId: ReturnType<typeof setTimeout> | null = null;
+let popShowTimerId: ReturnType<typeof setTimeout> | null = null;
+let isMouseenter = false;
+
+const showPopover = () => {
+  popShowTimerId = setTimeout(() => {
+    if (popHideTimerId) {
+      clearTimeout(popHideTimerId);
+    }
+    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="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="menus"></slot>
+        </bk-dropdown-menu>
+      </template>
+    </bk-dropdown>
+  </div>
+</template>

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: '证书名称',

front/src/views/business/host/children/host-operations/index.tsx

@@ -1,12 +1,13 @@
 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 { 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 HcmDropdown from '@/components/hcm-dropdown/index.vue';
 
 export const HOST_SHUTDOWN_STATUS = [
   'TERMINATED',
@@ -89,6 +90,8 @@ export default defineComponent({
   },
   setup(props) {
     const dialogRef = ref(null);
+    const dropdownOperationRef = ref(null);
+    const dropdownCopyRef = ref(null);
 
     const { selections } = toRefs(props);
 
@@ -148,42 +151,64 @@ 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>
+        <HcmDropdown
+          ref={dropdownOperationRef}
+          class={cssModule.host_operations_container}
+          disabled={operationsDisabled.value}>
+          {{
+            default: () => (
+              <>
+                批量操作
+                <AngleDown class={cssModule.f26}></AngleDown>
+              </>
+            ),
+            menus: () => (
+              <>
+                {Object.entries(operationMap)
+                  .filter(([opType]) => opType !== OperationActions.NONE)
+                  .map(([opType, opData]) => (
+                    <BkDropdownItem
+                      onClick={() => {
+                        operationType.value = opType as OperationActions;
+                        dropdownOperationRef.value?.hidePopover();
+                      }}>
+                      {`批量${opData.label}`}
+                    </BkDropdownItem>
+                  ))}
+              </>
+            ),
+          }}
+        </HcmDropdown>
+
+        <HcmDropdown
+          ref={dropdownCopyRef}
+          class={cssModule.host_operations_container}
+          disabled={operationsDisabled.value}>
+          {{
+            default: () => (
+              <>
+                复制
+                <AngleDown class={cssModule.f26}></AngleDown>
+              </>
+            ),
+            menus: () => (
+              <>
+                <CopyToClipboard
+                  type='dropdown-item'
+                  text='内网IP'
+                  content={selectedRowPrivateIPs.value?.join?.(',')}
+                  onSuccess={() => dropdownCopyRef.value?.hidePopover()}
+                />
+                <CopyToClipboard
+                  type='dropdown-item'
+                  text='公网IP'
+                  content={selectedRowPublicIPs.value?.join?.(',')}
+                  onSuccess={() => dropdownCopyRef.value?.hidePopover()}
+                />
+              </>
+            ),
+          }}
+        </HcmDropdown>
 
         <Dialog
           isShow={isDialogShow.value}

front/src/views/resource/resource-manage/common/table/HostOperations.tsx

@@ -1,14 +1,15 @@
-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 { 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 HcmDropdown from '@/components/hcm-dropdown/index.vue';
 const { BK_HCM_AJAX_URL_PREFIX } = window.PROJECT_CONFIG;
 
 export enum Operations {
@@ -62,6 +63,8 @@ export default defineComponent({
   setup(props) {
     const operationType = ref<Operations>(Operations.None);
     const dialogRef = ref(null);
+    const dropdownOperationRef = ref(null);
+    const dropdownCopyRef = ref(null);
     const isConfirmDisabled = ref(true);
     const targetHost = ref([]);
     const unTargetHost = ref([]);
@@ -387,40 +390,56 @@ 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>
+        <HcmDropdown class={'host_operations_container'} ref={dropdownOperationRef} disabled={operationsDisabled.value}>
+          {{
+            default: () => (
+              <>
+                批量操作
+                <AngleDown class={'f26'}></AngleDown>
+              </>
+            ),
+            menus: () => (
+              <>
+                {Object.entries(OperationsMap).map(([opType, opName]) => (
+                  <BkDropdownItem
+                    onClick={() => {
+                      operationType.value = opType as Operations;
+                      dropdownOperationRef.value?.hidePopover();
+                    }}>
+                    {`批量${opName}`}
+                  </BkDropdownItem>
+                ))}
+              </>
+            ),
+          }}
+        </HcmDropdown>
+
+        <HcmDropdown class={'host_operations_container'} ref={dropdownCopyRef} disabled={operationsDisabled.value}>
+          {{
+            default: () => (
+              <>
+                复制
+                <AngleDown class={'f26'}></AngleDown>
+              </>
+            ),
+            menus: () => (
+              <>
+                <CopyToClipboard
+                  type='dropdown-item'
+                  text='内网IP'
+                  content={selectedRowPrivateIPs.value?.join?.(',')}
+                  onSuccess={() => dropdownCopyRef.value?.hidePopover()}
+                />
+                <CopyToClipboard
+                  type='dropdown-item'
+                  text='公网IP'
+                  content={selectedRowPublicIPs.value?.join?.(',')}
+                  onSuccess={() => dropdownCopyRef.value?.hidePopover()}
+                />
+              </>
+            ),
+          }}
+        </HcmDropdown>
 
         <Dialog
           isShow={isDialogShow.value}