From 0d9f41d2cbb0a7dfc79e52b266e38d4f12a3f7f7 Mon Sep 17 00:00:00 2001
From: xy <1803352740@qq.com>
Date: Tue, 9 Apr 2024 10:51:26 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix(backend):=20=E6=8E=92=E5=BA=8F=E5=A4=B1?=
 =?UTF-8?q?=E6=95=88=E9=97=AE=E9=A2=98=E8=A7=A3=E5=86=B3=20#3888?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/backend/db_services/dbbase/resources/query.py | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/dbm-ui/backend/db_services/dbbase/resources/query.py b/dbm-ui/backend/db_services/dbbase/resources/query.py
index a0e5df4733..e820d5c169 100644
--- a/dbm-ui/backend/db_services/dbbase/resources/query.py
+++ b/dbm-ui/backend/db_services/dbbase/resources/query.py
@@ -370,9 +370,6 @@ def filter_instance_func(_query_params, _cluster_queryset, _proxy_queryset, _sto
             _cluster_queryset = filter_inst_queryset(
                 _cluster_queryset, _proxy_queryset, _storage_queryset, cls.build_q_for_instance_filter(_query_params)
             )
-            #  部署时间表头排序
-            if query_params.get("ordering"):
-                _cluster_queryset = _cluster_queryset.order_by(query_params.get("ordering"))
 
             return _cluster_queryset
 
@@ -388,6 +385,10 @@ def filter_instance_func(_query_params, _cluster_queryset, _proxy_queryset, _sto
                     query_params, cluster_queryset, proxy_queryset, storage_queryset
                 )
 
+        #  部署时间表头排序
+        if query_params.get("ordering"):
+            cluster_queryset = cluster_queryset.order_by(query_params.get("ordering"))
+
         cluster_infos = cls._filter_cluster_hook(
             bk_biz_id, cluster_queryset, proxy_queryset, storage_queryset, limit, offset, **kwargs
         )

From cc7370ea3e48d6c6f6f34dd35d80ab4730209bb5 Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Tue, 9 Apr 2024 11:15:07 +0800
Subject: [PATCH 2/5] =?UTF-8?q?fix(frontend):=20=E5=91=8A=E8=AD=A6?=
 =?UTF-8?q?=E7=BB=84=E6=9B=B4=E6=96=B0=E5=8E=BB=E9=99=A4=E4=B8=9A=E5=8A=A1?=
 =?UTF-8?q?id=20#3893?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/services/source/monitorNoticeGroup.ts | 19 +++++++++----------
 .../alarm-group/components/DetailDialog.vue   |  6 ++++--
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/dbm-ui/frontend/src/services/source/monitorNoticeGroup.ts b/dbm-ui/frontend/src/services/source/monitorNoticeGroup.ts
index faef1c2cec..f32ad97be2 100644
--- a/dbm-ui/frontend/src/services/source/monitorNoticeGroup.ts
+++ b/dbm-ui/frontend/src/services/source/monitorNoticeGroup.ts
@@ -39,27 +39,26 @@ export function getAlarmGroupList(params: {
 }
 
 /**
- * 告警组新增、编辑参数
+ * 新建告警组
  */
-interface IOperaionNoticeGroupParams {
+export function insertAlarmGroup(params: {
   bk_biz_id: number
   name: string,
   receivers: NoticGroupModel['receivers'][],
   details: NoticGroupModel['details']
-  id: number
-}
-
-/**
- * 新建告警组
- */
-export function insertAlarmGroup(params: Omit<IOperaionNoticeGroupParams, 'id'>) {
+}) {
   return http.post(`${path}/`, params);
 }
 
 /**
  * 编辑告警组
  */
-export function updateAlarmGroup(params: IOperaionNoticeGroupParams) {
+export function updateAlarmGroup(params: {
+  name: string,
+  receivers: NoticGroupModel['receivers'][],
+  details: NoticGroupModel['details']
+  id: number
+}) {
   return http.put(`${path}/${params.id}/`, params);
 }
 
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/DetailDialog.vue b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/DetailDialog.vue
index 16eac8e67a..29adcf6039 100644
--- a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/DetailDialog.vue
+++ b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/DetailDialog.vue
@@ -194,7 +194,6 @@
 
     const { name } = formData;
     const params = {
-      bk_biz_id: props.bizId,
       name,
       receivers: receiversSelectorRef.value.getSelectedReceivers(),
       details: {
@@ -208,7 +207,10 @@
         id: props.detailData.id,
       });
     } else {
-      insertAlarmGroupRun(params);
+      insertAlarmGroupRun({
+        ...params,
+        bk_biz_id: props.bizId,
+      });
     }
   };
 

From acf78ef451a1b1eec8a0494b6e8c57ec5ba4a6b9 Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Tue, 9 Apr 2024 10:54:00 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix(frontend):=20=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E4=BD=93=E9=AA=8C=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=8F=8A=E4=BC=98=E5=8C=96=20#3834?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/system-search/Index.vue    |  12 +-
 .../components/search-result/Index.vue        |  26 +++-
 .../render-result/ClusterDomain.vue           |  33 ++---
 .../render-result/ClusterName.vue             |  33 ++---
 .../search-result/render-result/Instance.vue  |  49 ++----
 .../search-result/render-result/Machine.vue   |  32 ++--
 .../components/HightLightText.vue             |  14 +-
 .../system-search/hooks/useRedirect.ts        |  47 ++++++
 .../frontend/src/views/quick-search/Index.vue |  21 ++-
 .../quick-search/components/ClusterDomain.vue | 128 ++++++++--------
 .../quick-search/components/ClusterName.vue   | 126 ++++++++--------
 .../quick-search/components/Instance.vue      | 140 +++++++++---------
 .../quick-search/components/ResourcePool.vue  |  72 ++++++---
 .../quick-search/components/SearchInput.vue   |  16 +-
 .../views/quick-search/components/Task.vue    |  72 ++++++---
 .../views/quick-search/components/Ticket.vue  |  69 ++++++---
 .../views/quick-search/style/table-card.less  |   8 +
 17 files changed, 523 insertions(+), 375 deletions(-)
 create mode 100644 dbm-ui/frontend/src/components/system-search/hooks/useRedirect.ts

diff --git a/dbm-ui/frontend/src/components/system-search/Index.vue b/dbm-ui/frontend/src/components/system-search/Index.vue
index e4bf809ce6..7c79e86d43 100644
--- a/dbm-ui/frontend/src/components/system-search/Index.vue
+++ b/dbm-ui/frontend/src/components/system-search/Index.vue
@@ -12,7 +12,8 @@
       :placeholder="t('全站搜索 Ctrl + K')"
       type="search"
       @enter="handleEnter"
-      @focus="handleFocus" />
+      @focus="handleFocus"
+      @paste="handlePaste" />
   </div>
   <div
     ref="popRef"
@@ -42,6 +43,8 @@
 
   import { useDebouncedRef } from '@hooks';
 
+  import { batchSplitRegex } from '@common/regex';
+
   import SearchResult from './components/search-result/Index.vue';
   import SearchHistory from './components/SearchHistory.vue';
 
@@ -63,6 +66,13 @@
 
   let tippyIns:Instance | undefined;
 
+  const handlePaste = (value: string, event: ClipboardEvent) => {
+    const pasteValue = (event.clipboardData || window.clipboardData).getData('text');
+    setTimeout(() => {
+      serach.value = `${serach.value}${serach.value ? '|' : ''}${pasteValue}`.replace(batchSplitRegex, '|');
+    });
+  };
+
   const handleFocus = () => {
     if (isFocused.value) {
       return;
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/Index.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/Index.vue
index b719d9fb73..86a282dd1e 100644
--- a/dbm-ui/frontend/src/components/system-search/components/search-result/Index.vue
+++ b/dbm-ui/frontend/src/components/system-search/components/search-result/Index.vue
@@ -20,6 +20,11 @@
             <template
               v-for="resultType in Object.keys(serachResult)"
               :key="resultType">
+              <div
+                v-if="serachResult[resultType].length"
+                class="result-type-text">
+                {{ resultTypeTextMap[resultType] }}
+              </div>
               <RenderResult
                 :biz-id-name-map="bizIdNameMap"
                 :data="serachResult[resultType]"
@@ -52,6 +57,8 @@
     useGlobalBizs,
   } from '@stores';
 
+  import { batchSplitRegex } from '@common/regex';
+
   import FilterOptions from './FilterOptions.vue';
   import RenderResult from './render-result/Index.vue';
 
@@ -61,7 +68,6 @@
 
   const modelValue = defineModel<string>({
     default: '',
-    local: true,
   });
 
   const {
@@ -70,6 +76,14 @@
 
   const { t } = useI18n();
 
+  const resultTypeTextMap: Record<string, string> = {
+    cluster_domain: t('域名'),
+    cluster_name: t('集群名'),
+    instance: t('实例'),
+    machine: t('主机'),
+    task: t('任务ID'),
+    ticket: t('单据'),
+  };
 
   const isSearchEmpty = ref(false);
   const formData = ref({
@@ -99,7 +113,7 @@
     }
     handleSerach({
       ...formData.value,
-      keyword: modelValue.value,
+      keyword: modelValue.value.replace(batchSplitRegex, ' '),
     });
   }, {
     immediate: true,
@@ -132,10 +146,16 @@
     color: #63656E;
     flex: 1;
 
+    .result-type-text {
+      color: #979BA5;
+      padding-left: 12px;
+      line-height: 32px;
+    }
+
     .result-item{
       display: flex;
       height: 32px;
-      padding: 0 8px;
+      padding: 0 12px 0 24px;
       cursor: pointer;
       align-items: center;
 
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ClusterDomain.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ClusterDomain.vue
index 89e0b6dbdd..302bbe18f1 100644
--- a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ClusterDomain.vue
+++ b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ClusterDomain.vue
@@ -20,10 +20,10 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useLocation } from '@hooks';
-
   import { systemSearchCache } from '@common/cache';
 
+  import { useRedirect } from '@components/system-search/hooks/useRedirect';
+
   import HightLightText from './components/HightLightText.vue';
 
   interface Props {
@@ -40,34 +40,19 @@
 
   defineProps<Props>();
 
-  const location = useLocation();
+  const handleRedirect = useRedirect();
 
   const handleGo = (data: Props['data'][number]) => {
     systemSearchCache.appendItem(data.immute_domain);
 
-    const routerNameMap = {
-      TwemproxyRedisInstance: 'DatabaseRedisList',
-      tendbha: 'DatabaseTendbha',
-      tendbsingle: 'DatabaseTendbsingle',
-      tendbcluster: 'tendbClusterList',
-      es: 'EsList',
-      kafka: 'KafkaList',
-      hdfs: 'HdfsList',
-      pulsar: 'PulsarList',
-      redis: 'DatabaseRedisList',
-      riak: 'RiakList',
-    } as Record<string, string>;
-
-    if (!routerNameMap[data.cluster_type]) {
-      return;
-    }
-
-    location({
-      name: routerNameMap[data.cluster_type],
-      query: {
+    handleRedirect(
+      data.cluster_type,
+      {
         id: data.id,
+        domain: data.immute_domain,
       },
-    }, data.bk_biz_id);
+      data.bk_biz_id,
+    );
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ClusterName.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ClusterName.vue
index 2125a7b864..e49335ed32 100644
--- a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ClusterName.vue
+++ b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ClusterName.vue
@@ -20,10 +20,10 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useLocation } from '@hooks';
-
   import { systemSearchCache } from '@common/cache';
 
+  import { useRedirect } from '@components/system-search/hooks/useRedirect';
+
   import HightLightText from './components/HightLightText.vue';
 
   interface Props {
@@ -40,34 +40,19 @@
 
   defineProps<Props>();
 
-  const location = useLocation();
+  const handleRedirect = useRedirect();
 
   const handleGo = (data: Props['data'][number]) => {
     systemSearchCache.appendItem(data.name);
 
-    const routerNameMap = {
-      TwemproxyRedisInstance: 'DatabaseRedisList',
-      tendbha: 'DatabaseTendbha',
-      tendbsingle: 'DatabaseTendbsingle',
-      tendbcluster: 'tendbClusterList',
-      es: 'EsList',
-      kafka: 'KafkaList',
-      hdfs: 'HdfsList',
-      pulsar: 'PulsarList',
-      redis: 'DatabaseRedisList',
-      riak: 'RiakList',
-    } as Record<string, string>;
-
-    if (!routerNameMap[data.cluster_type]) {
-      return;
-    }
-
-    location({
-      name: routerNameMap[data.cluster_type],
-      query: {
+    handleRedirect(
+      data.cluster_type,
+      {
         id: data.id,
+        name: data.name,
       },
-    }, data.bk_biz_id);
+      data.bk_biz_id,
+    );
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Instance.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Instance.vue
index c7baac71fc..4829a6fe67 100644
--- a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Instance.vue
+++ b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Instance.vue
@@ -20,10 +20,10 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useLocation } from '@hooks';
-
   import { systemSearchCache } from '@common/cache';
 
+  import { useRedirect } from '@components/system-search/hooks/useRedirect';
+
   import HightLightText from './components/HightLightText.vue';
 
   interface Props {
@@ -43,7 +43,7 @@
 
   const props = defineProps<Props>();
 
-  const location = useLocation();
+  const handleRedirect = useRedirect();
 
   const getMatchText = (data: Props['data'][number]) => {
     if (data.name.indexOf(props.keyWord) > -1) {
@@ -54,42 +54,15 @@
 
   const handleGo = (data: Props['data'][number]) => {
     systemSearchCache.appendItem(data.name);
-    const routerNameMap = {
-      TwemproxyRedisInstance: 'DatabaseRedisList',
-      tendbha: 'DatabaseTendbha',
-      tendbsingle: 'DatabaseTendbsingle',
-      tendbcluster: 'tendbClusterList',
-      es: 'EsList',
-      kafka: 'KafkaList',
-      hdfs: 'HdfsList',
-      pulsar: 'PulsarList',
-      redis: 'DatabaseRedisList',
-      influxdb: 'InfluxDBInstDetails',
-      riak: 'RiakList',
-    } as Record<string, string>;
 
-    if (data.cluster_type === 'tendbha') {
-      location({
-        name: 'DatabaseTendbhaInstance',
-        query: {
-          ip: data.ip,
-        },
-      }, data.bk_biz_id);
-    } if (data.cluster_type === 'tendbcluster') {
-      location({
-        name: 'tendbClusterInstance',
-        query: {
-          ip: data.ip,
-        },
-      }, data.bk_biz_id);
-    } else {
-      location({
-        name: routerNameMap[data.cluster_type],
-        query: {
-          id: data.id,
-        },
-      }, data.bk_biz_id);
-    }
+    handleRedirect(
+      data.cluster_type,
+      {
+        id: data.cluster_id,
+        ip: data.ip,
+      },
+      data.bk_biz_id,
+    );
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Machine.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Machine.vue
index dc37498ab8..8b099b6e37 100644
--- a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Machine.vue
+++ b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Machine.vue
@@ -20,10 +20,10 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useLocation } from '@hooks';
-
   import { systemSearchCache } from '@common/cache';
 
+  import { useRedirect } from '@components/system-search/hooks/useRedirect';
+
   import HightLightText from './components/HightLightText.vue';
 
   interface Props {
@@ -32,37 +32,25 @@
       bk_biz_id: number,
       ip: string,
       cluster_type: string,
+      cluster_id: number
     }[],
     bizIdNameMap: Record<number, string>
   }
 
   defineProps<Props>();
 
-  const location = useLocation();
+  const handleRedirect = useRedirect();
 
   const handleGo = (data: Props['data'][number]) => {
     systemSearchCache.appendItem(data.ip);
-    const routerNameMap = {
-      TwemproxyRedisInstance: 'DatabaseRedisList',
-      tendbha: 'DatabaseTendbha',
-      tendbsingle: 'DatabaseTendbsingle',
-      tendbcluster: 'tendbClusterList',
-      es: 'EsList',
-      kafka: 'KafkaList',
-      hdfs: 'HdfsList',
-      pulsar: 'PulsarList',
-      redis: 'DatabaseRedisList',
-    } as Record<string, string>;
-
-    if (!routerNameMap[data.cluster_type]) {
-      return;
-    }
 
-    location({
-      name: routerNameMap[data.cluster_type],
-      query: {
+    handleRedirect(
+      data.cluster_type,
+      {
+        id: data.cluster_id,
         ip: data.ip,
       },
-    }, data.bk_biz_id);
+      data.bk_biz_id,
+    );
   };
 </script>
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/components/HightLightText.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/components/HightLightText.vue
index 8420107aa9..e5c042504e 100644
--- a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/components/HightLightText.vue
+++ b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/components/HightLightText.vue
@@ -13,6 +13,8 @@
 <script setup lang="ts">
   import { computed } from 'vue';
 
+  import { batchSplitRegex } from '@common/regex';
+
   import { encodeRegexp } from '@utils';
 
   interface Props {
@@ -25,7 +27,17 @@
     highLightColor: '#3A84FF',
   });
 
-  const keywordMatch = computed(() => props.text.match(new RegExp(`^(.*?)(${encodeRegexp(props.keyWord)})(.*)$`)));
+  const keywordMatch = computed(() => {
+    const keyWordList = props.keyWord.split(batchSplitRegex);
+    for (let i = 0; i < keyWordList.length; i++) {
+      const keyWordItem = keyWordList[i];
+      const matchResult = props.text.match(new RegExp(`^(.*?)(${encodeRegexp(keyWordItem)})(.*)$`));
+      if (matchResult) {
+        return matchResult;
+      }
+    }
+    return [];
+  });
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/components/system-search/hooks/useRedirect.ts b/dbm-ui/frontend/src/components/system-search/hooks/useRedirect.ts
new file mode 100644
index 0000000000..832b96c118
--- /dev/null
+++ b/dbm-ui/frontend/src/components/system-search/hooks/useRedirect.ts
@@ -0,0 +1,47 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+*/
+
+import { useLocation } from '@hooks';
+
+export const useRedirect = () => {
+  const location = useLocation();
+
+  const routerNameMap = {
+    TwemproxyRedisInstance: 'DatabaseRedisList',
+    tendbha: 'DatabaseTendbha',
+    tendbsingle: 'DatabaseTendbsingle',
+    tendbcluster: 'tendbClusterList',
+    es: 'EsList',
+    kafka: 'KafkaList',
+    hdfs: 'HdfsList',
+    pulsar: 'PulsarList',
+    redis: 'DatabaseRedisList',
+    riak: 'RiakList',
+    influxdb: 'InfluxDBInstDetails',
+  } as Record<string, string>;
+
+  return (
+    clusterType: string,
+    queryParams: Record<string, any>,
+    bizId: number,
+  ) => {
+    if (!routerNameMap[clusterType]) {
+      return;
+    }
+
+    location({
+      name: routerNameMap[clusterType],
+      query: queryParams,
+    }, bizId);
+  };
+};
diff --git a/dbm-ui/frontend/src/views/quick-search/Index.vue b/dbm-ui/frontend/src/views/quick-search/Index.vue
index 2e72e2022e..969849702a 100644
--- a/dbm-ui/frontend/src/views/quick-search/Index.vue
+++ b/dbm-ui/frontend/src/views/quick-search/Index.vue
@@ -59,7 +59,10 @@
                   :biz-id-name-map="bizIdNameMap"
                   class="tab-table"
                   :data="dataList"
-                  :keyword="keyword" />
+                  :is-anomalies="!!error"
+                  :keyword="keyword"
+                  @clear-search="handleClearSearch"
+                  @refresh="handleSearch" />
               </KeepAlive>
             </ScrollFaker>
           </BkLoading>
@@ -88,6 +91,8 @@
 
   import { useGlobalBizs } from '@stores';
 
+  import { batchSplitRegex } from '@common/regex';
+
   import FilterOptions from '@components/system-search/components/search-result/FilterOptions.vue';
 
   import ClusterDomain from './components/ClusterDomain.vue';
@@ -205,6 +210,7 @@
 
   const {
     loading,
+    error,
     run: quickSearchRun,
   } = useRequest(quickSearch, {
     manual: true,
@@ -223,6 +229,11 @@
       panelList[3].count = data.resource_pool.length;
       panelList[4].count = data.task.length;
       panelList[5].count = data.ticket.length;
+
+      const panelItem = panelList.find(panel => panel.count > 0);
+      if (panelItem) {
+        activeTab.value = panelItem.name;
+      }
     },
   });
 
@@ -254,8 +265,8 @@
   };
 
   watch(keyword, (newKeyword, oldKeyword) => {
-    const newKeywordArr = newKeyword.split(/，|\n/g);
-    const oldKeywordArr = (oldKeyword || '').split(/，|\n/g);
+    const newKeywordArr = newKeyword.split(batchSplitRegex);
+    const oldKeywordArr = (oldKeyword || '').split(batchSplitRegex);
 
     if (!_.isEqual(newKeywordArr, oldKeywordArr) && !newKeyword.endsWith('\n')) {
       handleSearch();
@@ -278,6 +289,10 @@
 
   // };
 
+  const handleClearSearch = () => {
+    keyword.value = '';
+  };
+
   defineExpose({
     routerBack() {
       if (!route.query.from) {
diff --git a/dbm-ui/frontend/src/views/quick-search/components/ClusterDomain.vue b/dbm-ui/frontend/src/views/quick-search/components/ClusterDomain.vue
index 90fa865ab5..8cd9e41292 100644
--- a/dbm-ui/frontend/src/views/quick-search/components/ClusterDomain.vue
+++ b/dbm-ui/frontend/src/views/quick-search/components/ClusterDomain.vue
@@ -1,40 +1,49 @@
 <template>
   <div :key="settingChangeKey">
-    <DbCard
-      v-for="(item, index) in renderData.dataList"
-      :key="item.clusterType"
-      class="search-result-cluster search-result-card"
-      mode="collapse"
-      :title="item.clusterType">
-      <template #desc>
-        <I18nT
-          class="ml-8"
-          keypath="共n条"
-          style="color: #63656E;"
-          tag="span">
-          <template #n>
-            <strong>{{ item.dataList.length }}</strong>
-          </template>
-        </I18nT>
-        <BkButton
-          class="ml-8"
-          text
-          theme="primary"
-          @click.stop="handleExport(item.clusterType, item.dataList)">
-          <DbIcon
-            class="export-button-icon"
-            type="daochu" />
-          <span class="export-button-text">{{ t('导出') }}</span>
-        </BkButton>
-      </template>
-      <DbOriginalTable
-        class="search-result-table mt-14 mb-8"
-        :columns="columnsMap[item.clusterType]"
-        :data="item.dataList"
-        :pagination="pagination[index]"
-        :settings="tableSetting"
-        @setting-change="updateTableSettings" />
-    </DbCard>
+    <template v-if="renderData.dataList.length">
+      <DbCard
+        v-for="(item, index) in renderData.dataList"
+        :key="item.clusterType"
+        class="search-result-cluster search-result-card"
+        mode="collapse"
+        :title="item.clusterType">
+        <template #desc>
+          <I18nT
+            class="ml-8"
+            keypath="共n条"
+            style="color: #63656E;"
+            tag="span">
+            <template #n>
+              <strong>{{ item.dataList.length }}</strong>
+            </template>
+          </I18nT>
+          <BkButton
+            class="ml-8"
+            text
+            theme="primary"
+            @click.stop="handleExport(item.clusterType, item.dataList)">
+            <DbIcon
+              class="export-button-icon"
+              type="daochu" />
+            <span class="export-button-text">{{ t('导出') }}</span>
+          </BkButton>
+        </template>
+        <DbOriginalTable
+          class="search-result-table mt-14 mb-8"
+          :columns="columnsMap[item.clusterType]"
+          :data="item.dataList"
+          :pagination="pagination[index]"
+          :settings="tableSetting"
+          @setting-change="updateTableSettings" />
+      </DbCard>
+    </template>
+    <EmptyStatus
+      v-else
+      class="empty-status"
+      :is-anomalies="isAnomalies"
+      :is-searching="!!keyword"
+      @clear-search="handleClearSearch"
+      @refresh="handleRefresh" />
   </div>
 </template>
 
@@ -46,14 +55,15 @@
 
   import {
     useCopy,
-    useLocation,
     useTableSettings,
   } from '@hooks';
 
   import { UserPersonalSettings } from '@common/const';
 
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
+  import EmptyStatus from '@components/empty-status/EmptyStatus.vue';
   import HightLightText from '@components/system-search/components/search-result/render-result/components/HightLightText.vue';
+  import { useRedirect } from '@components/system-search/hooks/useRedirect';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import { exportExcelFile } from '@utils';
@@ -63,14 +73,21 @@
   interface Props {
     keyword: string
     data: QuickSearchClusterDomainModel[],
-    bizIdNameMap: Record<number, string>
+    bizIdNameMap: Record<number, string>,
+    isAnomalies: boolean
+  }
+
+  interface Emits {
+    (e: 'refresh'): void,
+    (e: 'clearSearch'): void
   }
 
   const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const copy = useCopy();
-  const location = useLocation();
+  const handleRedirect = useRedirect();
 
   const settingChangeKey = ref(1);
   const pagination = ref<{
@@ -247,29 +264,22 @@
   };
 
   const handleToCluster = (data: QuickSearchClusterDomainModel) => {
-    const routerNameMap = {
-      TwemproxyRedisInstance: 'DatabaseRedisList',
-      tendbha: 'DatabaseTendbha',
-      tendbsingle: 'DatabaseTendbsingle',
-      tendbcluster: 'tendbClusterList',
-      es: 'EsList',
-      kafka: 'KafkaList',
-      hdfs: 'HdfsList',
-      pulsar: 'PulsarList',
-      redis: 'DatabaseRedisList',
-      riak: 'RiakList',
-    } as Record<string, string>;
-
-    if (!routerNameMap[data.cluster_type]) {
-      return;
-    }
-
-    location({
-      name: routerNameMap[data.cluster_type],
-      query: {
+    handleRedirect(
+      data.cluster_type,
+      {
         id: data.id,
+        domain: data.immute_domain,
       },
-    }, data.bk_biz_id);
+      data.bk_biz_id,
+    );
+  };
+
+  const handleRefresh = () => {
+    emits('refresh');
+  };
+
+  const handleClearSearch = () => {
+    emits('clearSearch');
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/views/quick-search/components/ClusterName.vue b/dbm-ui/frontend/src/views/quick-search/components/ClusterName.vue
index a355850af8..fd45175673 100644
--- a/dbm-ui/frontend/src/views/quick-search/components/ClusterName.vue
+++ b/dbm-ui/frontend/src/views/quick-search/components/ClusterName.vue
@@ -1,40 +1,49 @@
 <template>
   <div :key="settingChangeKey">
-    <DbCard
-      v-for="(item, index) in renderData.dataList"
-      :key="item.clusterType"
-      class="search-result-cluster search-result-card"
-      mode="collapse"
-      :title="item.clusterType">
-      <template #desc>
-        <I18nT
-          class="ml-8"
-          keypath="共n条"
-          style="color: #63656E;"
-          tag="span">
-          <template #n>
-            <strong>{{ item.dataList.length }}</strong>
-          </template>
-        </I18nT>
-        <BkButton
-          class="ml-8"
-          text
-          theme="primary"
-          @click.stop="handleExport(item.clusterType, item.dataList)">
-          <DbIcon
-            class="export-button-icon"
-            type="daochu" />
-          <span class="export-button-text">{{ t('导出') }}</span>
-        </BkButton>
-      </template>
-      <DbOriginalTable
-        class="search-result-table mt-14 mb-8"
-        :columns="columnsMap[item.clusterType]"
-        :data="item.dataList"
-        :pagination="pagination[index]"
-        :settings="tableSetting"
-        @setting-change="updateTableSettings" />
-    </DbCard>
+    <template v-if="renderData.dataList.length">
+      <DbCard
+        v-for="(item, index) in renderData.dataList"
+        :key="item.clusterType"
+        class="search-result-cluster search-result-card"
+        mode="collapse"
+        :title="item.clusterType">
+        <template #desc>
+          <I18nT
+            class="ml-8"
+            keypath="共n条"
+            style="color: #63656E;"
+            tag="span">
+            <template #n>
+              <strong>{{ item.dataList.length }}</strong>
+            </template>
+          </I18nT>
+          <BkButton
+            class="ml-8"
+            text
+            theme="primary"
+            @click.stop="handleExport(item.clusterType, item.dataList)">
+            <DbIcon
+              class="export-button-icon"
+              type="daochu" />
+            <span class="export-button-text">{{ t('导出') }}</span>
+          </BkButton>
+        </template>
+        <DbOriginalTable
+          class="search-result-table mt-14 mb-8"
+          :columns="columnsMap[item.clusterType]"
+          :data="item.dataList"
+          :pagination="pagination[index]"
+          :settings="tableSetting"
+          @setting-change="updateTableSettings" />
+      </DbCard>
+    </template>
+    <EmptyStatus
+      v-else
+      class="empty-status"
+      :is-anomalies="isAnomalies"
+      :is-searching="!!keyword"
+      @clear-search="handleClearSearch"
+      @refresh="handleRefresh" />
   </div>
 </template>
 
@@ -46,14 +55,15 @@
 
   import {
     useCopy,
-    useLocation,
     useTableSettings,
   } from '@hooks';
 
   import { UserPersonalSettings } from '@common/const';
 
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
+  import EmptyStatus from '@components/empty-status/EmptyStatus.vue';
   import HightLightText from '@components/system-search/components/search-result/render-result/components/HightLightText.vue';
+  import { useRedirect } from '@components/system-search/hooks/useRedirect';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import { exportExcelFile } from '@utils';
@@ -64,13 +74,20 @@
     keyword: string,
     data: QuickSearchClusterNameModel[],
     bizIdNameMap: Record<number, string>
+    isAnomalies: boolean
+  }
+
+  interface Emits {
+    (e: 'refresh'): void,
+    (e: 'clearSearch'): void
   }
 
   const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const copy = useCopy();
-  const location = useLocation();
+  const handleRedirect = useRedirect();
 
   const settingChangeKey = ref(1);
   const pagination = ref<{
@@ -249,29 +266,22 @@
   };
 
   const handleToCluster = (data: QuickSearchClusterNameModel) => {
-    const routerNameMap = {
-      TwemproxyRedisInstance: 'DatabaseRedisList',
-      tendbha: 'DatabaseTendbha',
-      tendbsingle: 'DatabaseTendbsingle',
-      tendbcluster: 'tendbClusterList',
-      es: 'EsList',
-      kafka: 'KafkaList',
-      hdfs: 'HdfsList',
-      pulsar: 'PulsarList',
-      redis: 'DatabaseRedisList',
-      riak: 'RiakList',
-    } as Record<string, string>;
-
-    if (!routerNameMap[data.cluster_type]) {
-      return;
-    }
-
-    location({
-      name: routerNameMap[data.cluster_type],
-      query: {
+    handleRedirect(
+      data.cluster_type,
+      {
         id: data.id,
+        name: data.name,
       },
-    }, data.bk_biz_id);
+      data.bk_biz_id,
+    );
+  };
+
+  const handleRefresh = () => {
+    emits('refresh');
+  };
+
+  const handleClearSearch = () => {
+    emits('clearSearch');
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/views/quick-search/components/Instance.vue b/dbm-ui/frontend/src/views/quick-search/components/Instance.vue
index 4897b2c0f2..6f695b532f 100644
--- a/dbm-ui/frontend/src/views/quick-search/components/Instance.vue
+++ b/dbm-ui/frontend/src/views/quick-search/components/Instance.vue
@@ -1,40 +1,49 @@
 <template>
   <div :key="settingChangeKey">
-    <DbCard
-      v-for="(item, index) in renderData.dataList"
-      :key="item.clusterType"
-      class="search-result-cluster search-result-card"
-      mode="collapse"
-      :title="item.clusterType">
-      <template #desc>
-        <I18nT
-          class="ml-8"
-          keypath="共n条"
-          style="color: #63656E;"
-          tag="span">
-          <template #n>
-            <strong>{{ item.dataList.length }}</strong>
-          </template>
-        </I18nT>
-        <BkButton
-          class="ml-8"
-          text
-          theme="primary"
-          @click.stop="handleExport(item.clusterType, item.dataList)">
-          <DbIcon
-            class="export-button-icon"
-            type="daochu" />
-          <span class="export-button-text">{{ t('导出') }}</span>
-        </BkButton>
-      </template>
-      <DbOriginalTable
-        class="search-result-table mt-14 mb-8"
-        :columns="columnsMap[item.clusterType]"
-        :data="item.dataList"
-        :pagination="pagination[index]"
-        :settings="tableSetting"
-        @setting-change="updateTableSettings" />
-    </DbCard>
+    <template v-if="renderData.dataList.length">
+      <DbCard
+        v-for="(item, index) in renderData.dataList"
+        :key="item.clusterType"
+        class="search-result-cluster search-result-card"
+        mode="collapse"
+        :title="item.clusterType">
+        <template #desc>
+          <I18nT
+            class="ml-8"
+            keypath="共n条"
+            style="color: #63656E;"
+            tag="span">
+            <template #n>
+              <strong>{{ item.dataList.length }}</strong>
+            </template>
+          </I18nT>
+          <BkButton
+            class="ml-8"
+            text
+            theme="primary"
+            @click.stop="handleExport(item.clusterType, item.dataList)">
+            <DbIcon
+              class="export-button-icon"
+              type="daochu" />
+            <span class="export-button-text">{{ t('导出') }}</span>
+          </BkButton>
+        </template>
+        <DbOriginalTable
+          class="search-result-table mt-14 mb-8"
+          :columns="columnsMap[item.clusterType]"
+          :data="item.dataList"
+          :pagination="pagination[index]"
+          :settings="tableSetting"
+          @setting-change="updateTableSettings" />
+      </DbCard>
+    </template>
+    <EmptyStatus
+      v-else
+      class="empty-status"
+      :is-anomalies="isAnomalies"
+      :is-searching="!!keyword"
+      @clear-search="handleClearSearch"
+      @refresh="handleRefresh" />
   </div>
 </template>
 
@@ -46,7 +55,6 @@
 
   import {
     useCopy,
-    useLocation,
     useTableSettings,
   } from '@hooks';
 
@@ -57,7 +65,9 @@
   } from '@common/const';
 
   import DbStatus from '@components/db-status/index.vue';
+  import EmptyStatus from '@components/empty-status/EmptyStatus.vue';
   import HightLightText from '@components/system-search/components/search-result/render-result/components/HightLightText.vue';
+  import { useRedirect } from '@components/system-search/hooks/useRedirect';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import { formatCluster } from '../common/utils';
@@ -68,13 +78,20 @@
     keyword: string,
     data: QuickSearchInstanceModel[],
     bizIdNameMap: Record<number, string>
+    isAnomalies: boolean
+  }
+
+  interface Emits {
+    (e: 'refresh'): void,
+    (e: 'clearSearch'): void
   }
 
   const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const copy = useCopy();
-  const location = useLocation();
+  const handleRedirect = useRedirect();
 
   const settingChangeKey = ref(1);
   const pagination = ref<{
@@ -274,42 +291,21 @@
   };
 
   const handleToInstance = (data: QuickSearchInstanceModel) => {
-    const routerNameMap = {
-      TwemproxyRedisInstance: 'DatabaseRedisList',
-      tendbha: 'DatabaseTendbha',
-      tendbsingle: 'DatabaseTendbsingle',
-      tendbcluster: 'tendbClusterList',
-      es: 'EsList',
-      kafka: 'KafkaList',
-      hdfs: 'HdfsList',
-      pulsar: 'PulsarList',
-      redis: 'DatabaseRedisList',
-      influxdb: 'InfluxDBInstDetails',
-      riak: 'RiakList',
-    } as Record<string, string>;
+    handleRedirect(
+      data.cluster_type,
+      {
+        id: data.cluster_id,
+        ip: data.ip,
+      },
+      data.bk_biz_id,
+    );
+  };
+  const handleRefresh = () => {
+    emits('refresh');
+  };
 
-    if (data.cluster_type === 'tendbha') {
-      location({
-        name: 'DatabaseTendbhaInstance',
-        query: {
-          ip: data.ip,
-        },
-      }, data.bk_biz_id);
-    } if (data.cluster_type === 'tendbcluster') {
-      location({
-        name: 'tendbClusterInstance',
-        query: {
-          ip: data.ip,
-        },
-      }, data.bk_biz_id);
-    } else {
-      location({
-        name: routerNameMap[data.cluster_type],
-        query: {
-          id: data.id,
-        },
-      }, data.bk_biz_id);
-    }
+  const handleClearSearch = () => {
+    emits('clearSearch');
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/views/quick-search/components/ResourcePool.vue b/dbm-ui/frontend/src/views/quick-search/components/ResourcePool.vue
index 0adaf3e796..9cf8b52e6d 100644
--- a/dbm-ui/frontend/src/views/quick-search/components/ResourcePool.vue
+++ b/dbm-ui/frontend/src/views/quick-search/components/ResourcePool.vue
@@ -1,27 +1,37 @@
 <template>
-  <DbCard
-    class="search-result-machine search-result-card"
-    mode="collapse"
-    :title="t('资源池主机')">
-    <template #desc>
-      <I18nT
-        class="ml-8"
-        keypath="共n条"
-        style="color: #63656E;"
-        tag="span">
-        <template #n>
-          <strong>{{ data.length }}</strong>
-        </template>
-      </I18nT>
-    </template>
-    <DbOriginalTable
-      class="search-result-table mt-14 mb-8"
-      :columns="columns"
-      :data="data"
-      :pagination="pagination"
-      :settings="tableSetting"
-      @setting-change="updateTableSettings" />
-  </DbCard>
+  <div>
+    <DbCard
+      v-if="data.length"
+      class="search-result-machine search-result-card"
+      mode="collapse"
+      :title="t('资源池主机')">
+      <template #desc>
+        <I18nT
+          class="ml-8"
+          keypath="共n条"
+          style="color: #63656E;"
+          tag="span">
+          <template #n>
+            <strong>{{ data.length }}</strong>
+          </template>
+        </I18nT>
+      </template>
+      <DbOriginalTable
+        class="search-result-table mt-14 mb-8"
+        :columns="columns"
+        :data="data"
+        :pagination="pagination"
+        :settings="tableSetting"
+        @setting-change="updateTableSettings" />
+    </DbCard>
+    <EmptyStatus
+      v-else
+      class="empty-status"
+      :is-anomalies="isAnomalies"
+      :is-searching="!!keyword"
+      @clear-search="handleClearSearch"
+      @refresh="handleRefresh" />
+  </div>
 </template>
 
 <script setup lang="tsx">
@@ -38,15 +48,23 @@
 
   import HostAgentStatus from '@components/cluster-common/HostAgentStatus.vue';
   import DiskPopInfo from '@components/disk-pop-info/DiskPopInfo.vue';
+  import EmptyStatus from '@components/empty-status/EmptyStatus.vue';
   import HightLightText from '@components/system-search/components/search-result/render-result/components/HightLightText.vue';
 
   interface Props {
     keyword: string,
     data: DbResourceModel[],
     bizIdNameMap: Record<number, string>
+    isAnomalies: boolean
+  }
+
+  interface Emits {
+    (e: 'refresh'): void,
+    (e: 'clearSearch'): void
   }
 
   const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const copy = useCopy();
@@ -250,6 +268,14 @@
   const handleCopy = (content: string) => {
     copy(content);
   };
+
+  const handleRefresh = () => {
+    emits('refresh');
+  };
+
+  const handleClearSearch = () => {
+    emits('clearSearch');
+  };
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/views/quick-search/components/SearchInput.vue b/dbm-ui/frontend/src/views/quick-search/components/SearchInput.vue
index 2a54aabd28..a879f15d26 100644
--- a/dbm-ui/frontend/src/views/quick-search/components/SearchInput.vue
+++ b/dbm-ui/frontend/src/views/quick-search/components/SearchInput.vue
@@ -9,7 +9,8 @@
       type="textarea"
       @blur="handleBlur"
       @enter="handleEnter"
-      @focus="handleFocus" />
+      @focus="handleFocus"
+      @paste="handlePaste" />
     <div class="icon-area">
       <DbIcon
         v-if="modelValue"
@@ -25,6 +26,8 @@
 </template>
 
 <script setup lang="ts">
+  import { batchSplitRegex } from '@common/regex';
+
   interface Emits {
     (e: 'search', value: string): void
   }
@@ -43,12 +46,19 @@
     }
   };
 
+  const handlePaste = (value: string, event: ClipboardEvent) => {
+    const pasteValue = (event.clipboardData || window.clipboardData).getData('text');
+    setTimeout(() => {
+      modelValue.value = `${modelValue.value}${modelValue.value ? '|' : ''}${pasteValue}`.replace(batchSplitRegex, '|');
+    });
+  };
+
   const handleFocus = () => {
-    modelValue.value = modelValue.value.replace(/，/g, '\n');
+    modelValue.value = modelValue.value.replace(/\|/g, '\n');
   };
 
   const handleBlur = () => {
-    modelValue.value = modelValue.value.replace(/\n/g, '，');
+    modelValue.value = modelValue.value.replace(/\n/g, '|');
   };
 
   const handleClose = () => {
diff --git a/dbm-ui/frontend/src/views/quick-search/components/Task.vue b/dbm-ui/frontend/src/views/quick-search/components/Task.vue
index 5d84413900..c8425fc23f 100644
--- a/dbm-ui/frontend/src/views/quick-search/components/Task.vue
+++ b/dbm-ui/frontend/src/views/quick-search/components/Task.vue
@@ -1,27 +1,37 @@
 <template>
-  <DbCard
-    class="search-result-task search-result-card"
-    mode="collapse"
-    :title="t('历史任务')">
-    <template #desc>
-      <I18nT
-        class="ml-8"
-        keypath="共n条"
-        style="color: #63656E;"
-        tag="span">
-        <template #n>
-          <strong>{{ data.length }}</strong>
-        </template>
-      </I18nT>
-    </template>
-    <DbOriginalTable
-      class="mt-14 mb-8"
-      :columns="columns"
-      :data="data"
-      :pagination="pagination"
-      :settings="tableSetting"
-      @setting-change="updateTableSettings" />
-  </DbCard>
+  <div>
+    <DbCard
+      v-if="data.length"
+      class="search-result-task search-result-card"
+      mode="collapse"
+      :title="t('历史任务')">
+      <template #desc>
+        <I18nT
+          class="ml-8"
+          keypath="共n条"
+          style="color: #63656E;"
+          tag="span">
+          <template #n>
+            <strong>{{ data.length }}</strong>
+          </template>
+        </I18nT>
+      </template>
+      <DbOriginalTable
+        class="mt-14 mb-8"
+        :columns="columns"
+        :data="data"
+        :pagination="pagination"
+        :settings="tableSetting"
+        @setting-change="updateTableSettings" />
+    </DbCard>
+    <EmptyStatus
+      v-else
+      class="empty-status"
+      :is-anomalies="isAnomalies"
+      :is-searching="!!keyword"
+      @clear-search="handleClearSearch"
+      @refresh="handleRefresh" />
+  </div>
 </template>
 
 <script setup lang="tsx">
@@ -37,15 +47,23 @@
   import { UserPersonalSettings } from '@common/const';
 
   import DbStatus from '@components/db-status/index.vue';
+  import EmptyStatus from '@components/empty-status/EmptyStatus.vue';
   import HightLightText from '@components/system-search/components/search-result/render-result/components/HightLightText.vue';
 
   interface Props {
     keyword: string,
     data: TaskFlowModel[]
     bizIdNameMap: Record<number, string>
+    isAnomalies: boolean
+  }
+
+  interface Emits {
+    (e: 'refresh'): void,
+    (e: 'clearSearch'): void
   }
 
   const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const router = useRouter();
@@ -198,6 +216,14 @@
     });
     window.open(url.href, '_blank');
   };
+
+  const handleRefresh = () => {
+    emits('refresh');
+  };
+
+  const handleClearSearch = () => {
+    emits('clearSearch');
+  };
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/views/quick-search/components/Ticket.vue b/dbm-ui/frontend/src/views/quick-search/components/Ticket.vue
index fb6fd5389a..516093c936 100644
--- a/dbm-ui/frontend/src/views/quick-search/components/Ticket.vue
+++ b/dbm-ui/frontend/src/views/quick-search/components/Ticket.vue
@@ -1,25 +1,35 @@
 <template>
-  <DbCard
-    class="search-result-ticket search-result-card"
-    mode="collapse"
-    :title="t('单据')">
-    <template #desc>
-      <I18nT
-        class="ml-8"
-        keypath="共n条"
-        style="color: #63656E;"
-        tag="span">
-        <template #n>
-          <strong>{{ data.length }}</strong>
-        </template>
-      </I18nT>
-    </template>
-    <DbOriginalTable
-      class="mt-14 mb-8"
-      :columns="columns"
-      :data="data"
-      :pagination="pagination" />
-  </DbCard>
+  <div>
+    <DbCard
+      v-if="data.length"
+      class="search-result-ticket search-result-card"
+      mode="collapse"
+      :title="t('单据')">
+      <template #desc>
+        <I18nT
+          class="ml-8"
+          keypath="共n条"
+          style="color: #63656E;"
+          tag="span">
+          <template #n>
+            <strong>{{ data.length }}</strong>
+          </template>
+        </I18nT>
+      </template>
+      <DbOriginalTable
+        class="mt-14 mb-8"
+        :columns="columns"
+        :data="data"
+        :pagination="pagination" />
+    </DbCard>
+    <EmptyStatus
+      v-else
+      class="empty-status"
+      :is-anomalies="isAnomalies"
+      :is-searching="!!keyword"
+      @clear-search="handleClearSearch"
+      @refresh="handleRefresh" />
+  </div>
 </template>
 
 <script setup lang="tsx">
@@ -29,15 +39,23 @@
 
   import { useLocation } from '@hooks';
 
+  import EmptyStatus from '@components/empty-status/EmptyStatus.vue';
   import HightLightText from '@components/system-search/components/search-result/render-result/components/HightLightText.vue';
 
   interface Props {
     keyword: string,
     data: TicketModel[],
     bizIdNameMap: Record<number, string>
+    isAnomalies: boolean
+  }
+
+  interface Emits {
+    (e: 'refresh'): void,
+    (e: 'clearSearch'): void
   }
 
   const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const location = useLocation();
@@ -142,6 +160,15 @@
       },
     }, data.bk_biz_id);
   };
+
+
+  const handleRefresh = () => {
+    emits('refresh');
+  };
+
+  const handleClearSearch = () => {
+    emits('clearSearch');
+  };
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/views/quick-search/style/table-card.less b/dbm-ui/frontend/src/views/quick-search/style/table-card.less
index 59deed9a08..18512e754b 100644
--- a/dbm-ui/frontend/src/views/quick-search/style/table-card.less
+++ b/dbm-ui/frontend/src/views/quick-search/style/table-card.less
@@ -24,3 +24,11 @@
     }
   }
 }
+
+.empty-status {
+  background-color: #FFFFFF;
+  box-shadow: 0 2px 4px 0 rgba(25, 25, 41, 0.05);
+  padding-bottom: 16px;
+  border-radius: 2px;
+}
+

From 14f0d3f459f2a20e332c6b724969853d0fa02ead Mon Sep 17 00:00:00 2001
From: fanfanyangyang <yushang88@qq.com>
Date: Tue, 9 Apr 2024 11:26:37 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Edbpriv=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E5=B8=90=E5=8F=B7=E5=90=8E=E8=BF=94=E5=9B=9E=E6=96=B0?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7=E7=9A=84=E4=BF=A1=E6=81=AF=E7=9A=84=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20#3892?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-services/mysql/db-priv/handler/account.go |  4 +--
 dbm-services/mysql/db-priv/service/account.go | 28 +++++++++++--------
 .../service/migrate_account_rule_base_func.go |  2 +-
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/dbm-services/mysql/db-priv/handler/account.go b/dbm-services/mysql/db-priv/handler/account.go
index b263216d69..463eea4973 100644
--- a/dbm-services/mysql/db-priv/handler/account.go
+++ b/dbm-services/mysql/db-priv/handler/account.go
@@ -30,12 +30,12 @@ func (m *PrivService) AddAccount(c *gin.Context) {
 		return
 	}
 
-	err = input.AddAccount(string(body))
+	account, err := input.AddAccount(string(body))
 	if err != nil {
 		SendResponse(c, err, nil)
 		return
 	}
-	SendResponse(c, nil, nil)
+	SendResponse(c, nil, account)
 	return
 }
 
diff --git a/dbm-services/mysql/db-priv/service/account.go b/dbm-services/mysql/db-priv/service/account.go
index d54c8689b7..cdc0a2c688 100644
--- a/dbm-services/mysql/db-priv/service/account.go
+++ b/dbm-services/mysql/db-priv/service/account.go
@@ -16,22 +16,23 @@ import (
 )
 
 // AddAccount 新增账号
-func (m *AccountPara) AddAccount(jsonPara string) error {
+func (m *AccountPara) AddAccount(jsonPara string) (TbAccounts, error) {
 	var (
 		account *TbAccounts
 		psw     string
 		count   uint64
 		err     error
+		detail  TbAccounts
 	)
 
 	if m.BkBizId == 0 {
-		return errno.BkBizIdIsEmpty
+		return detail, errno.BkBizIdIsEmpty
 	}
 	if m.User == "" || m.Psw == "" {
-		return errno.PasswordOrAccountNameNull
+		return detail, errno.PasswordOrAccountNameNull
 	}
 	if (*m.ClusterType == "sqlserver_single" || *m.ClusterType == "sqlserver_ha") && m.Sid == "" {
-		return errno.SqlserverSidNull
+		return detail, errno.SqlserverSidNull
 	}
 	if m.ClusterType == nil {
 		ct := mysql
@@ -41,15 +42,15 @@ func (m *AccountPara) AddAccount(jsonPara string) error {
 	err = DB.Self.Model(&TbAccounts{}).Where(&TbAccounts{BkBizId: m.BkBizId, User: m.User, ClusterType: *m.ClusterType}).
 		Count(&count).Error
 	if err != nil {
-		return err
+		return detail, err
 	}
 	if count != 0 {
-		return errno.AccountExisted.AddBefore(m.User)
+		return detail, errno.AccountExisted.AddBefore(m.User)
 	}
 	psw = m.Psw
 	// 从旧系统迁移的，不检查是否帐号和密码不同
 	if psw == m.User && !m.MigrateFlag {
-		return errno.PasswordConsistentWithAccountName
+		return detail, errno.PasswordConsistentWithAccountName
 	}
 	// 从旧系统迁移的，存储的密码为mysql password()允许迁移，old_password()已过滤不迁移
 	if m.PasswordFunc {
@@ -57,14 +58,14 @@ func (m *AccountPara) AddAccount(jsonPara string) error {
 	} else if *m.ClusterType == mysql || *m.ClusterType == tendbcluster {
 		psw, err = EncryptPswInDb(psw)
 		if err != nil {
-			return err
+			return detail, err
 		}
 	} else {
 		// 兼容其他数据库类型比如mongo，密码不存储mysql password函数，而是SM4，需要能够查询
 		psw, err = SM4Encrypt(psw)
 		if err != nil {
 			slog.Error("SM4Encrypt", "error", err)
-			return err
+			return detail, err
 		}
 		psw = fmt.Sprintf(`{"sm4":"%s"}`, psw)
 	}
@@ -73,12 +74,15 @@ func (m *AccountPara) AddAccount(jsonPara string) error {
 		CreateTime: vtime, UpdateTime: vtime, Sid: m.Sid}
 	err = DB.Self.Model(&TbAccounts{}).Create(&account).Error
 	if err != nil {
-		return err
+		return detail, err
+	}
+	err = DB.Self.Model(&TbAccounts{}).First(&detail, account.Id).Error
+	if err != nil {
+		return detail, err
 	}
-
 	log := PrivLog{BkBizId: m.BkBizId, Operator: m.Operator, Para: jsonPara, Time: vtime}
 	AddPrivLog(log)
-	return nil
+	return detail, nil
 }
 
 // ModifyAccountPassword 修改账号的密码
diff --git a/dbm-services/mysql/db-priv/service/migrate_account_rule_base_func.go b/dbm-services/mysql/db-priv/service/migrate_account_rule_base_func.go
index 98d3bbad1b..d6fd8c4d4f 100644
--- a/dbm-services/mysql/db-priv/service/migrate_account_rule_base_func.go
+++ b/dbm-services/mysql/db-priv/service/migrate_account_rule_base_func.go
@@ -124,7 +124,7 @@ func DoAddAccounts(apps map[string]int64, users []PrivModule, clusterType string
 		}
 		log, _ := json.Marshal(account)
 		// 添加帐号
-		err := account.AddAccount(string(log))
+		_, err := account.AddAccount(string(log))
 		if err != nil {
 			slog.Error("add account error", account, err)
 			return err

From 60995c56bf86c1497a6f45caadcad53bc67de2b3 Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Tue, 9 Apr 2024 11:35:40 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feat(frontend):=20=E7=88=B6=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=A2=9E=E5=8A=A0=E6=91=98=E8=A6=81=E4=BB=A5=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E5=AD=90=E6=B5=81=E7=A8=8B=E7=9A=84=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=20#3886=20#=20Reviewed,=20transaction=20id:=205419?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/redis/Index.vue                |  6 +--
 .../components/tendb-cluster/Index.vue        |  6 +--
 .../components/tendb-single/Index.vue         | 15 ++++---
 .../components/tendbha/Index.vue              | 15 ++++---
 .../render-instances/RenderInstances.vue      | 18 ++++----
 .../src/hooks/useLinkQueryColumnSerach.ts     | 26 +++++++----
 .../views/task-history/common/graphRender.tsx | 43 ++++++++++++++++++-
 7 files changed, 90 insertions(+), 39 deletions(-)

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
index 13ced35cb1..6ee5aeb464 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
@@ -131,7 +131,7 @@
             <bk-popover theme="dark" placement="top" popoverDelay={0}>
               {{
                 default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
-                content: () => <span>{disabledRowConfig?.tip}</span>,
+                content: () => <span>{disabledRowConfig.tip}</span>,
               }}
             </bk-popover>
           );
@@ -231,8 +231,8 @@
   const isIndeterminate = computed(() => !isSelectedAll.value
     && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
 
-  // eslint-disable-next-line max-len
-  const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length === tableData.value.length);
+  const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
+    .find(item => item.handler(data))).length === tableData.value.length);
 
   const generatedColumns = computed(() => {
     if (props.customColums) {
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
index f50e54b380..ddd508b5ee 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
@@ -132,7 +132,7 @@
             <bk-popover theme="dark" placement="top" popoverDelay={0}>
               {{
                 default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
-                content: () => <span>{disabledRowConfig?.tip}</span>,
+                content: () => <span>{disabledRowConfig.tip}</span>,
               }}
             </bk-popover>
           );
@@ -233,8 +233,8 @@
   const isIndeterminate = computed(() => !isSelectedAll.value
     && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
 
-  // eslint-disable-next-line max-len
-  const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length === tableData.value.length);
+  const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
+    .find(item => item.handler(data))).length === tableData.value.length);
 
   const generatedColumns = computed(() => {
     if (props.customColums) {
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
index fbb9eba30d..d4a314db7d 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
@@ -129,7 +129,7 @@
             <bk-popover theme="dark" placement="top" popoverDelay={0}>
               {{
                 default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
-                content: () => <span>{disabledRowConfig?.tip}</span>,
+                content: () => <span>{disabledRowConfig.tip}</span>,
               }}
             </bk-popover>
           );
@@ -246,8 +246,8 @@
   const isIndeterminate = computed(() => !isSelectedAll.value
     && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
 
-  // eslint-disable-next-line max-len
-  const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length === tableData.value.length);
+  const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
+    .find(item => item.handler(data))).length === tableData.value.length);
 
   const generatedColumns = computed(() => {
     if (props.customColums) {
@@ -262,10 +262,11 @@
       if (!props.selected || !props.selected[props.activeTab]) {
         return;
       }
-      // eslint-disable-next-line max-len
-      const tabSelectMap = props.selected[props.activeTab].reduce((selectResult, selectItem) => Object.assign({}, selectResult, {
-        [selectItem.id]: selectItem,
-      }), {} as Record<string, ResourceItem>);
+
+      const tabSelectMap = props.selected[props.activeTab]
+        .reduce((selectResult, selectItem) => Object.assign(selectResult, {
+          [selectItem.id]: selectItem,
+        }), {} as Record<string, ResourceItem>);
       selectedMap.value = {
         [props.activeTab]: tabSelectMap,
       };
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
index 4785e17335..e0824fd18c 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
@@ -133,7 +133,7 @@
             <bk-popover theme="dark" placement="top" popoverDelay={0}>
               {{
                 default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
-                content: () => <span>{disabledRowConfig?.tip}</span>,
+                content: () => <span>{disabledRowConfig.tip}</span>,
               }}
             </bk-popover>
           );
@@ -245,8 +245,8 @@
   const isIndeterminate = computed(() => !isSelectedAll.value
     && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
 
-  // eslint-disable-next-line max-len
-  const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length === tableData.value.length);
+  const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
+    .find(item => item.handler(data))).length === tableData.value.length);
 
   const generatedColumns = computed(() => {
     if (props.customColums) {
@@ -261,10 +261,11 @@
       if (!props.selected || !props.selected[props.activeTab]) {
         return;
       }
-      // eslint-disable-next-line max-len
-      const tabSelectMap = props.selected[props.activeTab].reduce((selectResult, selectItem) => Object.assign({}, selectResult, {
-        [selectItem.id]: selectItem,
-      }), {} as Record<string, ResourceItem>);
+
+      const tabSelectMap = props.selected[props.activeTab]
+        .reduce((selectResult, selectItem) => Object.assign(selectResult, {
+          [selectItem.id]: selectItem,
+        }), {} as Record<string, ResourceItem>);
       selectedMap.value = {
         [props.activeTab]: tabSelectMap,
       };
diff --git a/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue b/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
index 5c9b86de91..a382f7dfe8 100644
--- a/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
+++ b/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
@@ -19,16 +19,14 @@
       class="pt-2 pb-2"
       :class="{ 'is-unavailable': inst.status === 'unavailable' }">
       <TextOverflowLayout>
-        <template #default>
-          <span
-            class="pr-4"
-            :style="{ color: highlightIps.includes(inst.ip)
-              || highlightIps.includes(`${inst.ip}:${inst.port}`) ? 'rgb(255 130 4)' : '#63656e' }">
-            <slot :data="inst">
-              {{ inst.ip }}:{{ inst.port }}
-            </slot>
-          </span>
-        </template>
+        <span
+          class="pr-4"
+          :style="{ color: highlightIps.includes(inst.ip)
+            || highlightIps.includes(`${inst.ip}:${inst.port}`) ? 'rgb(255 130 4)' : '#63656e' }">
+          <slot :data="inst">
+            {{ inst.ip }}:{{ inst.port }}
+          </slot>
+        </span>
         <template #append>
           <BkTag v-if="inst.status === 'unavailable'">
             {{ $t('不可用') }}
diff --git a/dbm-ui/frontend/src/hooks/useLinkQueryColumnSerach.ts b/dbm-ui/frontend/src/hooks/useLinkQueryColumnSerach.ts
index e7b2f98d43..085111c549 100644
--- a/dbm-ui/frontend/src/hooks/useLinkQueryColumnSerach.ts
+++ b/dbm-ui/frontend/src/hooks/useLinkQueryColumnSerach.ts
@@ -102,6 +102,9 @@ export const useLinkQueryColumnSerach = (
     index: number;
   }) => {
     // console.log('filtervalue>>>', data);
+    if (!data.column.filter.checked) {
+      return;
+    }
     if (data.checked.length === 0) {
       searchValue.value = searchValue.value.filter(item => item.id !== data.column.field);
       queryTableDataFn();
@@ -162,21 +165,28 @@ export const useLinkQueryColumnSerach = (
     const handledValueList: ISearchValue[] = [];
     // console.log('valueList>>>', valueList);
     valueList.forEach((item) => {
-      const idList = item.values ? _.flatMap(item.values.map(value => `${value.id}`.split(batchSplitRegex))) : [];
-      const nameList = item.values ? _.flatMap(item.values.map(value => `${value.name}`.split(batchSplitRegex))) : [];
+      const values = item.values ? item.values.reduce((results, value) => {
+        const idList = _.uniq(`${value.id}`.split(batchSplitRegex));
+        const nameList = _.uniq(`${value.name}`.split(batchSplitRegex));
+        results.push(...idList.map((id, index) => ({
+          id,
+          name: nameList[index],
+        })));
+        return results;
+      }, [] as {
+        id: string;
+        name: string;
+      }[]) : [];
+
       const searchObj = {
         ...item,
-        values: idList.map((value, index) => ({
-          id: value,
-          name: nameList[index],
-        })),
+        values,
       };
 
       if (item.id === 'domain') {
         // 搜索访问入口，前端去除端口
         searchObj.values = searchObj.values?.map(value => ({
-          id: value.id.split(',').map(domain => domain.split(':')[0])
-            .join(','),
+          id: value.id.split(':')[0],
           name: value.name,
         }));
       }
diff --git a/dbm-ui/frontend/src/views/task-history/common/graphRender.tsx b/dbm-ui/frontend/src/views/task-history/common/graphRender.tsx
index 0ba2b9bb84..fac9704ddc 100644
--- a/dbm-ui/frontend/src/views/task-history/common/graphRender.tsx
+++ b/dbm-ui/frontend/src/views/task-history/common/graphRender.tsx
@@ -101,6 +101,7 @@ export default class GraphRender {
     const flowInfo = args[1];
     const {
       component,
+      pipeline,
       status,
       updated_at: updatedAt,
       type,
@@ -108,6 +109,28 @@ export default class GraphRender {
       retryable,
       skippable,
     } = node.data;
+
+    const activities = pipeline?.activities;
+    let isParentFlow = false;
+    const abstractNum = {
+      success: 0,
+      failed: 0,
+      total: 0,
+    };
+
+    if (activities) {
+      const activityList = Object.values(activities);
+      abstractNum.total = activityList.length;
+      isParentFlow = abstractNum.total > 0;
+      activityList.forEach((activity) => {
+        if (activity.status === 'FAILED') {
+          abstractNum.failed = abstractNum.failed + 1;
+        } else if (activity.status === 'FINISHED') {
+          abstractNum.success = abstractNum.success + 1;
+        }
+      });
+    }
+
     const icon = component && component.code in NODE_ICON ? NODE_ICON[component.code as keyof typeof NODE_ICON] : 'db-icon-default-node';
     const nodeCls = status ? `node-ractangle--${status.toLowerCase()}` : '';
     const createdStatus = status && status.toLowerCase() === 'created';
@@ -138,7 +161,25 @@ export default class GraphRender {
           <div class="node-ractangle__content">
             <div class="node-ractangle__content-left text-overflow">
               <strong class="node-ractangle__name" title={node.data.name as string}>{node.data.name}</strong>
-              <p class="node-ractangle__text">{nodeStatusText ? t(nodeStatusText) : t('待执行')}</p>
+              <p class="node-ractangle__text">
+                {
+                  // eslint-disable-next-line no-nested-ternary
+                  isParentFlow
+                    ? (
+                      <span style="color:#63656E">
+                        <span style="color:#2DCB56">{`${abstractNum.success}`}</span>
+                        <span style="margin: 0 5px">/</span>
+                        <span style="color:#EA3636">{`${abstractNum.failed}`}</span>
+                        <span style="margin: 0 5px">/</span>
+                        <span>{`${abstractNum.total}`}</span>
+                      </span>
+                    )
+                    : nodeStatusText
+                      ? t(nodeStatusText)
+                      : t('待执行')
+                }
+              </p>
+              {/* <p class="node-ractangle__text">{nodeStatusText ? t(nodeStatusText) : t('待执行')}</p> */}
             </div>
             <span class="node-ractangle__time">{isShowTime ? getCostTimeDisplay(updatedAt - startedAt) : ''}</span>
           </div>