fix(frontend): 优化整站复制功能 TencentBlueKing#9221

Author: 3octaves

dbm-ui/frontend/src/components/cluster-selector/Index.vue

@@ -156,11 +156,11 @@
   import { getTendbsingleList } from '@services/source/tendbsingle';
   import type { ListBase } from '@services/types';
 
-  import { useCopy, useSelectorDialogWidth } from '@hooks';
+  import { useSelectorDialogWidth } from '@hooks';
 
   import { ClusterTypes } from '@common/const';
 
-  import { messageWarn } from '@utils';
+  import { execCopy, messageWarn } from '@utils';
 
   import ResultPreview from './components/common/result-preview/Index.vue';
   import type { SearchSelectList } from './components/common/SearchBar.vue';
@@ -232,7 +232,6 @@
   });
 
   const slots = useSlots();
-  const copy = useCopy();
   const { dialogWidth } = useSelectorDialogWidth();
   const { t } = useI18n();
 
@@ -564,8 +563,7 @@
       messageWarn(t('没有可复制集群'));
       return;
     }
-
-    copy(copyValues.join('\n'));
+    execCopy(copyValues.join('\n'), t('复制成功，共n条', { n: copyValues.length }));
   };
 
   const handleConfirm = () => {

dbm-ui/frontend/src/components/db-member-selector/index.vue

@@ -46,7 +46,7 @@
 
   import { getUserList } from '@services/source/user';
 
-  import { useCopy } from '@hooks';
+  import { execCopy } from '@utils';
 
   const emits = defineEmits<{
     (e: 'change', value: string[]): void;
@@ -57,7 +57,6 @@
   });
 
   const { t } = useI18n();
-  const copy = useCopy();
 
   const userSelectorRef = ref();
   const isHover = ref(false);
@@ -133,7 +132,7 @@
   };
 
   const handleCopy = () => {
-    copy(modelValue.value.join(';'));
+    execCopy(modelValue.value.join(';'), t('复制成功，共n条', { n: modelValue.value.length }));
   };
 </script>
 

dbm-ui/frontend/src/components/editable-info/index.vue

@@ -76,7 +76,7 @@
                 <i
                   v-if="config.isCopy"
                   class="base-info__icon db-icon-copy"
-                  @click.stop="handleCopy(data[config.key])" />
+                  @click.stop="execCopy(data[config.key], t('复制成功，共n条', { n: 1 }))" />
               </div>
             </template>
           </div>
@@ -88,9 +88,7 @@
 <script lang="tsx">
   import type { VNode } from 'vue';
 
-  import { useCopy } from '@hooks';
-
-  import { generateId } from '@utils';
+  import { execCopy, generateId } from '@utils';
 
   import { t } from '@locales/index';
 
@@ -226,11 +224,6 @@
       }
     }
   };
-
-  /**
-   * 复制信息
-   */
-  const handleCopy = useCopy();
 </script>
 
 <style lang="less" scoped>

dbm-ui/frontend/src/components/host-preview/HostPreview.vue

@@ -28,7 +28,7 @@
         <BkButton
           class="mr-8"
           @click="handleCopyIps">
-          {{ $t('复制全部IP') }}
+          {{ $t('复制所有IP') }}
         </BkButton>
         <BkInput
           v-model="state.keyword"
@@ -65,10 +65,12 @@
 
   import type { HostNode } from '@services/types';
 
-  import { useCopy, useDefaultPagination } from '@hooks';
+  import { useDefaultPagination } from '@hooks';
 
   import DbStatus from '@components/db-status/index.vue';
 
+  import { execCopy } from '@utils';
+
   interface Props {
     fetchParams: Record<string, any>,
     fetchNodes: (params: any) => Promise<HostNode[]>,
@@ -83,7 +85,6 @@
   });
 
   const { t } = useI18n();
-  const copy = useCopy();
 
   /**
    * 预览表格配置
@@ -161,14 +162,16 @@
 
   function handleCopyAbnormalIps() {
     const abnormalIps = state.data.filter(item => item.status === 0).map(item => item.bk_host_innerip);
-    if (abnormalIps.length === 0) return;
-    copy(abnormalIps.join('\n'));
+    if (abnormalIps.length > 0) {
+      execCopy(abnormalIps.join('\n'), t('复制成功，共n条', { n: abnormalIps.length }));
+    }
   }
 
   function handleCopyIps() {
     const ips = state.data.map(item => item.bk_host_innerip);
-    if (ips.length === 0) return;
-    copy(ips.join('\n'));
+    if (ips.length > 0) {
+      execCopy(ips.join('\n'), t('复制成功，共n条', { n: ips.length }));
+    }
   }
 
   /**

dbm-ui/frontend/src/components/instance-selector/components/common/preview-result/Index.vue

@@ -68,9 +68,7 @@
 <script setup lang="ts" generic="T extends IValue">
   import { useI18n } from 'vue-i18n';
 
-  import { useCopy } from '@hooks';
-
-  import { messageWarn } from '@utils';
+  import { execCopy, messageWarn } from '@utils';
 
   import type { InstanceSelectorValues, IValue } from '../../../Index.vue';
 
@@ -99,7 +97,6 @@
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
-  const copy = useCopy();
 
   const keys = computed(() => Object.keys(props.lastValues) as Keys[]);
   const isEmpty = computed(() => keys.value.every((key) => props.lastValues[key].length < 1));
@@ -133,7 +130,8 @@
     for (const key of keys.value) {
       instances.push(...props.lastValues[key]);
     }
-    copy(instances.map((item) => item[mainKey.value]).join('\n'));
+    const copyData = instances.map((item) => item[mainKey.value]);
+    execCopy(copyData.join('\n'), t('复制成功，共n条', { n: copyData.length }));
   };
 </script>
 <style lang="less">

dbm-ui/frontend/src/components/ip-selector/IpSelector.vue

@@ -118,13 +118,15 @@
   import { getWhitelist } from '@services/source/whitelist';
   import type { HostInfo } from '@services/types';
 
-  import { useCopy, useFormItem } from '@hooks';
+  import { useFormItem } from '@hooks';
 
   import { OSTypes } from '@common/const';
 
   import DBCollapseTable from '@components/db-collapse-table/DBCollapseTable.vue';
   import DbStatus from '@components/db-status/index.vue';
 
+  import { execCopy } from '@utils';
+
   import { t } from '@locales/index';
 
   import PreviewWhitelist from './components/PreviewWhitelist.vue';
@@ -192,7 +194,6 @@
     default: false,
   });
 
-  const copy = useCopy();
   const formItem = useFormItem();
 
   const cloudTips = computed(() => {
@@ -369,15 +370,15 @@
       label: t('复制所有IP'),
       onClick: () => {
         const ips = selectorState.selected.host_list.map((item: any) => item.ip);
-        copy(ips.join('\n'));
+        copy(ips);
       },
     },
     {
       label: t('复制异常IP'),
       onClick: () => {
         const abnormalHosts = selectorState.selected.host_list.filter((item: any) => item.alive === 0);
         const abnormalIps = abnormalHosts.map((item: any) => item.ip);
-        copy(abnormalIps.join('\n'));
+        copy(abnormalIps);
       },
     }];
 
@@ -392,6 +393,10 @@
     deep: true,
   });
 
+  const copy = (list: string[]) => {
+    execCopy(list.join('\n'), t('复制成功，共n条', { n: list.length }))
+  }
+
   /**
    * ip 选择器预览表默认配置
    */

dbm-ui/frontend/src/components/ip-selector/components/PreviewWhitelist.vue

@@ -38,11 +38,11 @@
 
   import { getWhitelist } from '@services/source/whitelist';
 
-  import { useCopy } from '@hooks';
-
   import DBCollapseTable from '@components/db-collapse-table/DBCollapseTable.vue';
   import RenderRow from '@components/render-row/index.vue';
 
+  import { execCopy } from '@utils';
+
   type WhitelistItem = ServiceReturnType<typeof getWhitelist>['results'][number]
 
   interface Props {
@@ -59,7 +59,6 @@
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
-  const copy = useCopy();
 
   const totals = computed(() => {
     const ips = props.data.reduce((result, item) => result.concat(item.ips || []), [] as string[]);
@@ -114,7 +113,7 @@
     label: t('复制'),
     onClick: () => {
       const ips = props.data.reduce((result: string[], item: WhitelistItem) => result.concat(item.ips), []);
-      copy(ips.join('\n'));
+      execCopy(ips.join('\n'), t('复制成功，共n条', { n: ips.length }));
     },
   }];
 

dbm-ui/frontend/src/components/tag-block/Index.vue

@@ -166,7 +166,7 @@
   );
 
   const handleCopy = () => {
-    execCopy(props.data.join('\n'), t('复制成功'));
+    execCopy(props.data.join('\n'), t('复制成功，共n条', { n: props.data.length }));
   };
 
   let resizeObserver: any;

dbm-ui/frontend/src/hooks/useLinkQueryColumnSerach.ts

@@ -73,6 +73,8 @@ export const useLinkQueryColumnSerach = (config: {
     return [];
   });
 
+  const isFilter = computed(() => searchValue.value.length > 0);
+
   const resourceTypes = ['spotty_host', 'resource_record'];
 
   const sortValue: {
@@ -342,6 +344,7 @@ export const useLinkQueryColumnSerach = (config: {
     sortValue,
     columnCheckedMap,
     batchSearchIpInatanceList,
+    isFilter,
     columnFilterChange,
     columnSortChange,
     clearSearchValue,

dbm-ui/frontend/src/locales/zh-cn.json

@@ -514,7 +514,7 @@
   "请输入IP搜索": "请输入 IP 搜索",
   "复制已选IP": "复制已选 IP",
   "复制异常IP": "复制异常 IP",
-  "复制全部IP": "复制全部 IP",
+  "复制全部IP": "复制所有 IP",
   "替换": "替换",
   "节点列表": "节点列表",
   "当前集群有xx暂时不能进行其他操作跳转xx查看进度": "当前集群有 {0} 暂时不能进行其他操作跳转 {1} 查看进度",
@@ -965,7 +965,7 @@
   "数据版本": "数据版本",
   "没有可复制实例": "没有可复制实例",
   "请输入实例_enter进行搜索": "请输入实例，enter 进行搜索",
-  "复制全部实例": "复制全部实例",
+  "复制全部实例": "复制所有实例",
   "复制异常实例": "复制异常实例",
   "xx预览": "{name} 预览",
   "查看更多": "查看更多",
@@ -1443,7 +1443,7 @@
   "消费主机": "消费主机",
   "请选择操作时间": "请选择操作时间",
   "请选择匹配规格": "请选择匹配规格",
-  "复制全部 IP": "复制全部 IP",
+  "复制全部 IP": "复制所有 IP",
   "请选择切换模式": "请选择切换模式",
   "目标台数不能为空": "目标台数不能为空",
   "确认整机替换n台主机？": "确认整机替换 {n} 台主机？",
@@ -3940,5 +3940,6 @@
   "展示我作为主 DBA 的业务，当日所产生的巡检异常，一般每日更新一次": "展示我作为主 DBA 的业务，当日所产生的巡检异常，一般每日更新一次",
   "展示我作为备 DBA、二线 DBA 的业务，当日所产生的巡检异常，一般每日更新一次": "展示我作为备 DBA、二线 DBA 的业务，当日所产生的巡检异常，一般每日更新一次",
   "主DBA": "主 DBA",
+  "复制成功，共n条": "复制成功，共 {n} 条",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/views/db-manage/common/RenderPassword.vue

@@ -110,18 +110,17 @@
 
   import { getPulsarPassword } from '@services/source/pulsar';
 
-  import { useCopy } from '@hooks';
-
   import type { DBTypes } from '@common/const';
 
+  import { execCopy } from '@utils';
+
   interface Props {
     clusterId: number;
     dbType?: DBTypes;
   }
 
   const props = defineProps<Props>();
 
-  const copy = useCopy();
   const { t } = useI18n();
 
   const isLoading = ref(true);
@@ -194,6 +193,10 @@
     }
   };
 
+  const copy = (value: string) => {
+    execCopy(value, t('复制成功，共n条', { n: 1 }));
+  };
+
   const handlePasswordToggle = () => {
     isShowPassword.value = !isShowPassword.value;
   };

dbm-ui/frontend/src/views/db-manage/common/big-data-host-table/HdfsHostTable.vue

@@ -86,10 +86,10 @@
 
   import type { HostInfo } from '@services/types';
 
-  import { useCopy } from '@hooks';
-
   import DbStatus from '@components/db-status/index.vue';
 
+  import { execCopy } from '@utils';
+
   import tableSetting from './common/tableSetting';
   import useLocalPagination from './hook/useLocalPagination';
 
@@ -105,7 +105,6 @@
   const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
-  const copy = useCopy();
   const { t } = useI18n();
 
   const isLoading = ref(false);
@@ -344,7 +343,7 @@
   // 复制所有主机IP
   const handleCopyAll = () => {
     const ipList = props.data.map(_ => _.ip);
-    copy(ipList.join('\n'));
+    execCopy(ipList.join('\n'), t('复制成功，共n条', { n: ipList.length }));
   };
   // 复制异常主机IP
   const handleCopyAbnormal = () => {
@@ -354,7 +353,7 @@
       }
       return result;
     }, [] as Array<string>);
-    copy(abnormalList.join('\n'));
+    execCopy(abnormalList.join('\n'), t('复制成功，共n条', { n: abnormalList.length }));
   };
 </script>
 <style lang="less" scoped>