From fdd0af4e886c7671985074872bec53f4d57677ae Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Fri, 15 Nov 2024 10:01:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=85=A8=E7=AB=99=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E4=BC=98=E5=8C=96=20#7951?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/system-search/Index.vue    |  94 +++++++---
 .../components/FilterTypeSelect.vue           |  80 +++++++++
 .../search-result/FilterOptions.vue           |   4 +-
 .../components/search-result/Index.vue        |  90 ++++++++--
 .../render-result/ClusterDomain.vue           |  17 +-
 .../render-result/ClusterName.vue             |  19 +-
 .../search-result/render-result/Instance.vue  |  24 +--
 .../search-result/render-result/Machine.vue   |   4 -
 .../render-result/ResourcePool.vue            |   1 -
 .../search-result/render-result/Task.vue      |   4 -
 .../search-result/render-result/Ticket.vue    |   4 -
 dbm-ui/frontend/src/locales/zh-cn.json        |   3 +
 .../src/services/source/quickSearch.ts        |   8 +-
 .../frontend/src/views/quick-search/Index.vue |  31 +++-
 .../quick-search/components/SearchInput.vue   | 170 ++++++++++++------
 15 files changed, 402 insertions(+), 151 deletions(-)
 create mode 100644 dbm-ui/frontend/src/components/system-search/components/FilterTypeSelect.vue

diff --git a/dbm-ui/frontend/src/components/system-search/Index.vue b/dbm-ui/frontend/src/components/system-search/Index.vue
index c31ad7afba..e440915151 100644
--- a/dbm-ui/frontend/src/components/system-search/Index.vue
+++ b/dbm-ui/frontend/src/components/system-search/Index.vue
@@ -28,6 +28,13 @@
       @enter="handleEnter"
       @focus="handleFocus"
       @paste="handlePaste">
+      <template #prefix>
+        <FilterTypeSelect
+          v-model="filterType"
+          icon-type="down-big"
+          title-color="#fff"
+          trigger-class-name="system-search-top-filter-type-select" />
+      </template>
       <template
         v-if="isFocused"
         #suffix>
@@ -52,7 +59,8 @@
     <SearchResult
       v-if="isPopMenuShow"
       ref="searchResultRef"
-      v-model="serach">
+      v-model="serach"
+      :filter-type="filterType">
       <SearchHistory
         v-if="!serach"
         v-model="serach" />
@@ -64,8 +72,11 @@
   import { computed, onBeforeUnmount, ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
+  import { quickSearch } from '@services/source/quickSearch';
+
   import { batchSplitRegex } from '@common/regex';
 
+  import FilterTypeSelect, { FilterType } from './components/FilterTypeSelect.vue';
   import SearchResult from './components/search-result/Index.vue';
   import SearchHistory from './components/SearchHistory.vue';
   import useKeyboard from './hooks/useKeyboard';
@@ -74,13 +85,16 @@
   const route = useRoute();
   const router = useRouter();
 
+  let tippyIns: Instance | undefined;
+
   const serach = ref('');
   const rootRef = ref<HTMLElement>();
   const popRef = ref();
-  const searchResultRef = ref();
+  const searchResultRef = ref<InstanceType<typeof SearchResult>>();
   const isFocused = ref(false);
   const popContentStyle = ref({});
   const isPopMenuShow = ref(false);
+  const filterType = ref(FilterType.CONTAINS);
 
   const styles = computed(() => ({
     flex: isFocused.value ? '1' : '0 0 auto',
@@ -88,8 +102,6 @@
 
   const { activeIndex } = useKeyboard(rootRef, popRef);
 
-  let tippyIns: Instance | undefined;
-
   const handlePaste = () => {
     setTimeout(() => {
       serach.value = serach.value.replace(batchSplitRegex, '|');
@@ -138,35 +150,37 @@
 
   const handleSearch = () => {
     // 页面跳转参数处理
-    const options = searchResultRef.value.getFilterOptions();
-    const query = Object.keys(options).reduce((prevQuery, optionKey) => {
-      const optionItem = options[optionKey];
+    const { formData, keyword } = searchResultRef.value!.getFilterOptions();
+    quickSearch({
+      ...formData,
+      keyword,
+    }).then((quickSearchResult) => {
+      const options = {
+        ...formData,
+        short_code: quickSearchResult.short_code,
+      };
+      const query = Object.keys(options).reduce((prevQuery, optionKey) => {
+        const optionItem = options[optionKey as keyof typeof options];
 
-      if (optionItem !== '' && !(Array.isArray(optionItem) && optionItem.length === 0)) {
-        if (Array.isArray(optionItem)) {
+        if (optionItem !== '' && !(Array.isArray(optionItem) && optionItem.length === 0)) {
           return {
             ...prevQuery,
-            [optionKey]: optionItem.join(','),
+            [optionKey]: Array.isArray(optionItem) ? optionItem.join(',') : optionItem,
           };
         }
 
-        return {
-          ...prevQuery,
-          [optionKey]: optionItem,
-        };
-      }
+        return prevQuery;
+      }, {});
 
-      return prevQuery;
-    }, {});
-
-    const url = router.resolve({
-      name: 'QuickSearch',
-      query: {
-        ...query,
-        from: route.name as string,
-      },
+      const url = router.resolve({
+        name: 'QuickSearch',
+        query: {
+          ...query,
+          from: route.name as string,
+        },
+      });
+      window.open(url.href, '_blank');
     });
-    window.open(url.href, '_blank');
   };
 
   const handleEnter = () => {
@@ -224,6 +238,36 @@
       width: auto !important;
     }
 
+    .system-search-top-filter-type-select {
+      display: flex;
+      width: 80px;
+      height: 30px;
+      color: #fff;
+      cursor: pointer;
+      background: #3b4b68;
+      align-items: center;
+      justify-content: space-around;
+
+      .label-content {
+        position: relative;
+
+        .more-icon {
+          display: inline-block;
+          font-size: 14px;
+          transform: rotate(0deg);
+          transition: all 0.5s;
+        }
+
+        .more-icon-active {
+          transform: rotate(-180deg);
+        }
+
+        .icon-disabled {
+          color: #c4c6cc;
+        }
+      }
+    }
+
     .search-input {
       overflow: hidden;
       border: 1px solid transparent;
diff --git a/dbm-ui/frontend/src/components/system-search/components/FilterTypeSelect.vue b/dbm-ui/frontend/src/components/system-search/components/FilterTypeSelect.vue
new file mode 100644
index 0000000000..9f5b2a885a
--- /dev/null
+++ b/dbm-ui/frontend/src/components/system-search/components/FilterTypeSelect.vue
@@ -0,0 +1,80 @@
+<template>
+  <BkSelect
+    v-model="modelValue"
+    :filterable="false"
+    @change="handleChooseType"
+    @toggle="handleTogglePopover">
+    <template #trigger>
+      <div :class="triggerClassName">
+        <span class="label-content">
+          <BkButton
+            class="mr-4"
+            :style="{ color: titleColor }"
+            text>
+            {{ currentTitle }}
+          </BkButton>
+          <DbIcon
+            class="more-icon"
+            :class="{
+              'more-icon-active': isRotate,
+            }"
+            :type="iconType" />
+        </span>
+      </div>
+    </template>
+    <BkOption
+      v-for="item in dropdownList"
+      :id="item.value"
+      :key="item.value"
+      :name="item.label" />
+  </BkSelect>
+</template>
+
+<script lang="ts">
+  export enum FilterType {
+    CONTAINS = 'CONTAINS',
+    EXACT = 'EXACT',
+  }
+</script>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  interface Props {
+    titleColor: string;
+    iconType: string;
+    triggerClassName: string;
+  }
+
+  defineProps<Props>();
+
+  const modelValue = defineModel<string>({
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  const dropdownList = [
+    {
+      label: t('模糊搜索'),
+      value: FilterType.CONTAINS,
+    },
+    {
+      label: t('精确搜索'),
+      value: FilterType.EXACT,
+    },
+  ];
+
+  const isRotate = ref(false);
+
+  const currentTitle = computed(() =>
+    modelValue.value === 'CONTAINS' ? dropdownList[0].label : dropdownList[1].label,
+  );
+
+  const handleChooseType = (type: string) => {
+    modelValue.value = type;
+  };
+
+  const handleTogglePopover = (isShow: boolean) => {
+    isRotate.value = isShow;
+  };
+</script>
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/FilterOptions.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/FilterOptions.vue
index 4baec09f6a..48d679e208 100644
--- a/dbm-ui/frontend/src/components/system-search/components/search-result/FilterOptions.vue
+++ b/dbm-ui/frontend/src/components/system-search/components/search-result/FilterOptions.vue
@@ -85,7 +85,7 @@
         </BkCheckboxGroup>
       </div>
     </div>
-    <div class="filter-item">
+    <!-- <div class="filter-item">
       <div class="filter-title">
         {{ t('检索类型') }}
       </div>
@@ -97,7 +97,7 @@
           {{ t('精确') }}
         </BkRadio>
       </BkRadioGroup>
-    </div>
+    </div> -->
   </div>
 </template>
 <script setup lang="ts">
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 299bc8bd70..b51ca78d25 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
@@ -2,11 +2,26 @@
   <div class="system-serach-box">
     <div class="result-list">
       <slot>
+        <BkAlert
+          v-if="showAlert"
+          closable
+          style="margin: 0 12px"
+          theme="info">
+          <template #title>
+            <span>{{ t('每个分类最多显示 10 条记录，点击搜索可查看全部记录。') }}</span>
+            <BkButton
+              text
+              theme="primary"
+              @click="handleUnsubscribe">
+              {{ t('不再提示') }}
+            </BkButton>
+          </template>
+        </BkAlert>
         <BkException
           v-if="isSearchEmpty"
           :description="t('暂无搜索内容，换个关键词试一试')"
           scene="part"
-          style="padding-top: 145px"
+          style="padding-top: 100px"
           type="search-empty">
           <BkButton
             text
@@ -15,7 +30,9 @@
             {{ t('清空输入内容') }}
           </BkButton>
         </BkException>
-        <ScrollFaker v-else>
+        <ScrollFaker
+          v-else
+          style="height: calc(100% - 16px)">
           <div v-if="serachResult">
             <template
               v-for="resultType in serachResultKeyList"
@@ -46,7 +63,7 @@
 </template>
 <script setup lang="ts">
   import _ from 'lodash';
-  import { computed, watch } from 'vue';
+  import { computed, type UnwrapRef, watch } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
@@ -62,13 +79,17 @@
 
   interface Props {
     showOptions?: boolean;
+    filterType: string;
   }
 
   interface Expose {
-    getFilterOptions: () => typeof formData.value;
+    getFilterOptions: () => {
+      formData: UnwrapRef<typeof formData>;
+      keyword: string;
+    };
   }
 
-  withDefaults(defineProps<Props>(), {
+  const props = withDefaults(defineProps<Props>(), {
     showOptions: true,
   });
   const modelValue = defineModel<string>({
@@ -80,6 +101,8 @@
   const { t } = useI18n();
   useKeyboard();
 
+  const QUICK_SEARCH_NO_LONGER_PROMPT = 'QUICK_SEARCH_NO_LONGER_PROMPT';
+
   const resultTypeTextMap: Record<string, string> = {
     cluster_domain: t('域名'),
     cluster_name: t('集群名'),
@@ -95,8 +118,10 @@
     bk_biz_ids: [] as number[],
     db_types: [] as string[],
     resource_types: [] as string[],
-    filter_type: 'CONTAINS',
+    filter_type: props.filterType,
   });
+  const showUnsubscribeButton = ref(localStorage.getItem(QUICK_SEARCH_NO_LONGER_PROMPT) !== 'true');
+  const firstSearch = ref(true);
 
   const bizIdNameMap = computed(() =>
     bizList.reduce((result, item) => Object.assign(result, { [item.bk_biz_id]: item.name }), {}),
@@ -109,10 +134,21 @@
     return Object.keys(serachResult.value) as (keyof typeof serachResult.value)[];
   });
 
+  const showAlert = computed(() => showUnsubscribeButton.value && !firstSearch.value && !isDataEmpty.value);
+
+  const isDataEmpty = computed(() => {
+    const dataItemList = Object.values(serachResult.value || {}).filter((item) => Array.isArray(item));
+    return _.every(Object.values(dataItemList), (item) => item.length < 1);
+  });
+
   const { data: serachResult, run: handleSerach } = useRequest(quickSearch, {
     manual: true,
     onSuccess(data) {
-      isSearchEmpty.value = _.every(Object.values(data), (item) => item.length < 1);
+      const dataItemList = Object.values(data).filter((item) => Array.isArray(item));
+      isSearchEmpty.value = _.every(dataItemList, (item) => item.length < 1);
+      if (firstSearch.value) {
+        firstSearch.value = false;
+      }
     },
   });
 
@@ -144,14 +180,29 @@
     },
   );
 
+  watch(
+    () => props.filterType,
+    () => {
+      formData.value.filter_type = props.filterType;
+    },
+    {
+      immediate: true,
+    },
+  );
+
   const handleClearSearch = () => {
     modelValue.value = '';
   };
 
+  const handleUnsubscribe = () => {
+    localStorage.setItem(QUICK_SEARCH_NO_LONGER_PROMPT, 'true');
+    showUnsubscribeButton.value = false;
+  };
+
   defineExpose<Expose>({
     getFilterOptions() {
       return {
-        ...formData.value,
+        formData: formData.value,
         keyword: modelValue.value,
       };
     },
@@ -179,9 +230,10 @@
       .result-item {
         display: flex;
         height: 32px;
-        padding: 0 12px 0 24px;
+        padding: 0 12px;
         cursor: pointer;
         align-items: center;
+        justify-content: space-between;
 
         &:hover,
         &.active {
@@ -191,7 +243,6 @@
         .value-text {
           display: flex;
           height: 32px;
-          padding: 0 8px;
           cursor: pointer;
           align-items: center;
 
@@ -199,6 +250,12 @@
             background: #f5f7fa;
           }
 
+          .keyword-highlight {
+            display: inline;
+            width: fit-content;
+            overflow: unset;
+          }
+
           .value-text {
             display: flex;
             overflow: hidden;
@@ -212,16 +269,17 @@
               color: #c4c6cc;
             }
           }
+        }
 
-          .biz-text {
-            flex: 0 0 auto;
-            padding-left: 24px;
-            margin-left: auto;
-            color: #979ba5;
-          }
+        .biz-text {
+          flex: 0 0 auto;
+          padding-left: 12px;
+          margin-left: auto;
+          color: #979ba5;
         }
       }
     }
+
     .filter-wrapper {
       padding: 10px 12px;
       border-left: 1px solid #dcdee5;
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 c372fe63f3..38b35f221a 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
@@ -5,12 +5,13 @@
       :key="item.immute_domain"
       class="result-item"
       @click="handleGo(item)">
-      <div class="value-text">
-        <HightLightText
-          :key-word="formattedKeyword"
-          :text="item.immute_domain" />
-        <div class="intro">({{ t('域名') }})</div>
-      </div>
+      <TextOverflowLayout>
+        <div class="value-text">
+          <HightLightText
+            :key-word="formattedKeyword"
+            :text="item.immute_domain" />
+        </div>
+      </TextOverflowLayout>
       <div class="biz-text">
         {{ bizIdNameMap[item.bk_biz_id] }}
       </div>
@@ -18,12 +19,11 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
   import { systemSearchCache } from '@common/cache';
   import { batchSplitRegex } from '@common/regex';
 
   import { useRedirect } from '@components/system-search/hooks/useRedirect';
+  import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import HightLightText from './components/HightLightText.vue';
 
@@ -41,7 +41,6 @@
 
   const props = defineProps<Props>();
 
-  const { t } = useI18n();
   const handleRedirect = useRedirect();
 
   const formattedKeyword = computed(() =>
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 cbb03cb1ad..072e6d2118 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
@@ -5,12 +5,15 @@
       :key="item.name"
       class="result-item"
       @click="handleGo(item)">
-      <div class="value-text">
-        <HightLightText
-          :key-word="keyWord"
-          :text="item.name" />
-        <div class="intro">({{ t('集群名') }}, {{ item.immute_domain }})</div>
-      </div>
+      <TextOverflowLayout>
+        <div class="value-text">
+          <HightLightText
+            class="keyword-highlight"
+            :key-word="keyWord"
+            :text="item.name" />
+          <div class="intro">（{{ item.immute_domain }}）</div>
+        </div>
+      </TextOverflowLayout>
       <div class="biz-text">
         {{ bizIdNameMap[item.bk_biz_id] }}
       </div>
@@ -18,11 +21,10 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
   import { systemSearchCache } from '@common/cache';
 
   import { useRedirect } from '@components/system-search/hooks/useRedirect';
+  import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import HightLightText from './components/HightLightText.vue';
 
@@ -40,7 +42,6 @@
 
   defineProps<Props>();
 
-  const { t } = useI18n();
   const handleRedirect = useRedirect();
 
   const handleGo = (data: Props['data'][number]) => {
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 98750ceadc..74de3d4874 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
@@ -5,15 +5,19 @@
       :key="item.id"
       class="result-item"
       @click="handleGo(item)">
-      <div class="value-text">
-        <HightLightText
-          :key-word="keyWord"
-          :text="getMatchText(item)" />
-        <div class="intro">
-          ({{ t('实例') }}<span v-if="item.cluster_domain">, {{ item.cluster_domain }}</span
-          >)
+      <TextOverflowLayout>
+        <div class="value-text">
+          <HightLightText
+            class="keyword-highlight"
+            :key-word="keyWord"
+            :text="getMatchText(item)" />
+          <div
+            v-if="item.cluster_domain"
+            class="intro">
+            （{{ item.cluster_domain }}）
+          </div>
         </div>
-      </div>
+      </TextOverflowLayout>
       <div class="biz-text">
         {{ bizIdNameMap[item.bk_biz_id] }}
       </div>
@@ -21,11 +25,10 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
   import { systemSearchCache } from '@common/cache';
 
   import { useRedirect } from '@components/system-search/hooks/useRedirect';
+  import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import HightLightText from './components/HightLightText.vue';
 
@@ -46,7 +49,6 @@
 
   const props = defineProps<Props>();
 
-  const { t } = useI18n();
   const handleRedirect = useRedirect();
 
   const getMatchText = (data: Props['data'][number]) => {
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 a8c86e266e..7291939338 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
@@ -9,7 +9,6 @@
         <HightLightText
           :key-word="keyWord"
           :text="item.ip" />
-        <div class="intro">({{ t('主机') }})</div>
       </div>
       <div class="biz-text">
         {{ bizIdNameMap[item.bk_biz_id] }}
@@ -18,8 +17,6 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
   import { systemSearchCache } from '@common/cache';
 
   import { useRedirect } from '@components/system-search/hooks/useRedirect';
@@ -39,7 +36,6 @@
 
   defineProps<Props>();
 
-  const { t } = useI18n();
   const handleRedirect = useRedirect();
 
   const handleGo = (data: Props['data'][number]) => {
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ResourcePool.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ResourcePool.vue
index ea14e37ce7..6c4b9fbb97 100644
--- a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ResourcePool.vue
+++ b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/ResourcePool.vue
@@ -9,7 +9,6 @@
         <HightLightText
           :key-word="keyWord"
           :text="item.ip" />
-        <div class="intro">({{ t('资源池主机') }})</div>
       </div>
       <div class="biz-text">
         {{ t('资源池') }}
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Task.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Task.vue
index 790a7fdd89..c30954aa48 100644
--- a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Task.vue
+++ b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Task.vue
@@ -10,7 +10,6 @@
         <HightLightText
           :key-word="keyWord"
           :text="item.root_id" />
-        <div class="intro">({{ t('任务ID') }})</div>
       </div>
       <div class="biz-text">
         {{ bizIdNameMap[item.bk_biz_id] }}
@@ -19,8 +18,6 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
   import { useLocation } from '@hooks';
 
   import { systemSearchCache } from '@common/cache';
@@ -39,7 +36,6 @@
 
   defineProps<Props>();
 
-  const { t } = useI18n();
   const location = useLocation();
 
   const handleGo = (data: Props['data'][number]) => {
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Ticket.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Ticket.vue
index a74de364e6..7037fd283c 100644
--- a/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Ticket.vue
+++ b/dbm-ui/frontend/src/components/system-search/components/search-result/render-result/Ticket.vue
@@ -10,7 +10,6 @@
         <HightLightText
           :key-word="keyWord"
           :text="`${item.id}`" />
-        <div class="intro">({{ t('单据') }})</div>
       </div>
       <div class="biz-text">
         {{ bizIdNameMap[item.bk_biz_id] }}
@@ -19,8 +18,6 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
   import { useLocation } from '@hooks';
 
   import { systemSearchCache } from '@common/cache';
@@ -39,7 +36,6 @@
 
   defineProps<Props>();
 
-  const { t } = useI18n();
   const location = useLocation();
 
   const handleGo = (data: Props['data'][number]) => {
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 1dd0d4dffa..0f8031c8f8 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3656,5 +3656,8 @@
   "请先禁用集群": "请先禁用集群",
   "无运维节点": "无运维节点",
   "删除规则会创建单据，需此规则所有过往调用方审批后才执行删除。": "删除规则会创建单据，需此规则所有过往调用方审批后才执行删除。",
+  "模糊搜索": "模糊搜索",
+  "精确搜索": "精确搜索",
+  "每个分类最多显示 10 条记录，点击搜索可查看全部记录。": "每个分类最多显示 10 条记录，点击搜索可查看全部记录。",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/source/quickSearch.ts b/dbm-ui/frontend/src/services/source/quickSearch.ts
index 58a4fc15b8..ac9783548b 100644
--- a/dbm-ui/frontend/src/services/source/quickSearch.ts
+++ b/dbm-ui/frontend/src/services/source/quickSearch.ts
@@ -23,13 +23,16 @@ import http from '../http';
 
 /**
  * 全局搜索
+ *
+ * keyword 和 short_code 二选一, 不能同时为空
  */
 export function quickSearch(params: {
   bk_biz_ids: number[];
   db_types: string[];
   resource_types: string[];
   filter_type: string;
-  keyword: string;
+  keyword?: string;
+  short_code?: string;
   limit?: number;
 }) {
   return http
@@ -41,8 +44,11 @@ export function quickSearch(params: {
       resource_pool: DbResourceModel[];
       task: TaskFlowModel[];
       ticket: TicketModel<unknown>[];
+      keyword: string;
+      short_code: string;
     }>('/apis/quick_search/search/', params)
     .then((res) => ({
+      ...res,
       cluster_domain: (res.cluster_domain || []).map((item) => new QuickSearchClusterDomainModel(item)),
       cluster_name: (res.cluster_name || []).map((item) => new QuickSearchClusterNameModel(item)),
       instance: (res.instance || []).map((item) => new QuickSearchInstanceModel(item)),
diff --git a/dbm-ui/frontend/src/views/quick-search/Index.vue b/dbm-ui/frontend/src/views/quick-search/Index.vue
index e44e529165..a2fe4bafd1 100644
--- a/dbm-ui/frontend/src/views/quick-search/Index.vue
+++ b/dbm-ui/frontend/src/views/quick-search/Index.vue
@@ -128,6 +128,8 @@
   const { t } = useI18n();
   const { bizs: bizList } = useGlobalBizs();
 
+  let isRedirectSearch = true;
+
   const comMap = {
     cluster_domain: ClusterDomain,
     cluster_name: ClusterName,
@@ -142,9 +144,10 @@
     {} as Record<number, string>,
   );
 
-  const keyword = ref((route.query.keyword as string) || '');
+  // const keyword = ref((route.query.keyword as string) || '');
+  const keyword = ref('');
   const isTableSearching = ref(false);
-  const dataMap = ref<Omit<ServiceReturnType<typeof quickSearch>, 'machine'>>({
+  const dataMap = ref<Omit<ServiceReturnType<typeof quickSearch>, 'machine' | 'keyword' | 'short_code'>>({
     cluster_name: [],
     cluster_domain: [],
     instance: [],
@@ -219,6 +222,9 @@
   } = useRequest(quickSearch, {
     manual: true,
     onSuccess(data) {
+      if (isRedirectSearch) {
+        keyword.value = data.keyword;
+      }
       Object.assign(dataMap.value, {
         cluster_domain: data.cluster_domain,
         cluster_name: data.cluster_name,
@@ -239,6 +245,9 @@
         activeTab.value = panelItem.name;
       }
     },
+    onAfter() {
+      isRedirectSearch = false;
+    },
   });
 
   watch(
@@ -280,17 +289,27 @@
   };
 
   const handleSearch = () => {
-    if (!keyword.value) {
+    if (!keyword.value && !isRedirectSearch) {
       clearData();
       return;
     }
 
     isTableSearching.value = true;
-    quickSearchRun({
+
+    const params = {
       ...formData.value,
-      keyword: keyword.value.replace(batchSplitRegex, ' '),
       limit: 1000,
-    });
+    };
+    if (isRedirectSearch) {
+      Object.assign(params, {
+        short_code: route.query.short_code as string,
+      });
+    } else {
+      Object.assign(params, {
+        keyword: keyword.value.replace(batchSplitRegex, ' '),
+      });
+    }
+    quickSearchRun(params);
   };
 
   watch(
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 c5c736dee6..e3c004e774 100644
--- a/dbm-ui/frontend/src/views/quick-search/components/SearchInput.vue
+++ b/dbm-ui/frontend/src/views/quick-search/components/SearchInput.vue
@@ -16,34 +16,35 @@
     ref="rootRef"
     class="search-input"
     data-role="quick-search-result">
-    <BkInput
-      v-model="modelValue"
-      autosize
-      class="search-input-textarea"
-      :placeholder="t('请输入关键字， Shift + Enter 换行')"
-      :resize="false"
-      type="textarea"
-      @blur="handleBlur"
-      @enter="handleEnter"
-      @focus="handleFocus"
-      @paste="handlePaste" />
-    <div class="icon-area">
-      <DbIcon
-        v-if="modelValue"
-        class="search-input-icon icon-close"
-        type="close-circle-shape"
-        @click="handleClear" />
-      <BkButton
-        class="search-input-icon ml-4"
-        size="large"
-        theme="primary"
-        @click="handleSearch">
-        <DbIcon
-          class="mr-8"
-          type="search" />
-        {{ t('搜索') }}
-      </BkButton>
+    <FilterTypeSelect
+      v-model="filterType"
+      icon-type="down-big"
+      title-color="#4d4f56"
+      trigger-class-name="system-search-result-filter-type-select" />
+    <div class="input-box">
+      <BkInput
+        v-model="modelValue"
+        autosize
+        class="search-input-textarea"
+        clearable
+        :placeholder="t('请输入关键字， Shift + Enter 换行')"
+        :resize="false"
+        type="textarea"
+        @blur="handleBlur"
+        @enter="handleEnter"
+        @focus="handleFocus"
+        @paste="handlePaste" />
     </div>
+    <BkButton
+      class="search-input-icon"
+      size="large"
+      theme="primary"
+      @click="handleSearch">
+      <DbIcon
+        class="mr-8"
+        type="search" />
+      {{ t('搜索') }}
+    </BkButton>
   </div>
   <div
     ref="popRef"
@@ -52,6 +53,7 @@
     <SearchResult
       v-if="isPopMenuShow"
       v-model="modelValue"
+      :filter-type="filterType"
       :show-options="false"
       style="height: 506px">
       <SearchHistory
@@ -67,6 +69,7 @@
 
   import { batchSplitRegex } from '@common/regex';
 
+  import FilterTypeSelect, { FilterType } from '@components/system-search/components/FilterTypeSelect.vue';
   import SearchResult from '@components/system-search/components/search-result/Index.vue';
   import SearchHistory from '@components/system-search/components/SearchHistory.vue';
   import useKeyboard from '@components/system-search/hooks/useKeyboard';
@@ -88,14 +91,17 @@
   const popRef = ref<HTMLElement>();
   const popContentStyle = ref({});
   const isPopMenuShow = ref(false);
+  const filterType = ref(FilterType.CONTAINS);
+  const isFocused = ref(false);
 
   useKeyboard(rootRef, popRef, 'textarea');
 
-  watch(modelValue, () => {
+  watch([modelValue, isFocused], () => {
     setTimeout(() => {
-      if (tippyIns) {
+      if (tippyIns && isFocused.value) {
         tippyIns.setProps({
-          offset: modelValue.value.includes('\n') ? getTippyInsOffset() : [0, 8],
+          // offset: modelValue.value.includes('\n') ? getTippyInsOffset() : [0, 8],
+          offset: getTippyInsOffset(),
         });
       }
     });
@@ -120,12 +126,13 @@
 
   const handlePaste = () => {
     setTimeout(() => {
-      modelValue.value = modelValue.value.replace(batchSplitRegex, '|');
+      modelValue.value = modelValue.value.replace(batchSplitRegex, '\n');
     });
   };
 
   const handleFocus = () => {
     modelValue.value = modelValue.value.replace(/\|/g, '\n');
+    isFocused.value = true;
 
     const { width } = rootRef.value!.getBoundingClientRect();
     if (tippyIns) {
@@ -138,11 +145,12 @@
 
   const handleBlur = () => {
     modelValue.value = modelValue.value.replace(/\n/g, '|');
+    isFocused.value = false;
   };
 
-  const handleClear = () => {
-    modelValue.value = '';
-  };
+  // const handleClear = () => {
+  //   modelValue.value = '';
+  // };
 
   const handleSearch = () => {
     if (tippyIns) {
@@ -204,44 +212,88 @@
   });
 </script>
 
+<style lang="less">
+  // .operation-more-main {
+  .system-search-result-filter-type-select {
+    display: flex;
+    width: 92px;
+    height: 40px;
+    font-size: 14px;
+    cursor: pointer;
+    background-color: #fafbfd;
+    border: 1px solid #c4c6cc;
+    border-right: none;
+    border-radius: 2px 0 0 2px;
+    align-items: center;
+    justify-content: space-around;
+
+    .label-content {
+      position: relative;
+
+      .more-icon {
+        display: inline-block;
+        font-size: 16px;
+        transform: rotate(0deg);
+        transition: all 0.5s;
+      }
+
+      .more-icon-active {
+        transform: rotate(-180deg);
+      }
+
+      .icon-disabled {
+        color: #c4c6cc;
+      }
+    }
+  }
+</style>
 <style lang="less" scoped>
   .search-input {
     position: relative;
-    width: 900px;
+    display: flex;
+    // width: 900px;
     height: 40px;
 
-    .search-input-textarea {
-      position: absolute;
-      z-index: 4;
-      width: 810px;
+    .input-box {
+      position: relative;
+      width: 712px;
+      height: 40px;
+      flex: 1;
 
-      :deep(textarea) {
-        max-height: 400px;
-        min-height: 40px !important;
-        padding: 12px 30px 12px 10px;
+      .search-input-textarea {
+        border-radius: 0;
       }
-    }
 
-    .icon-area {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 4;
+      :deep(.bk-textarea) {
+        position: absolute;
+        z-index: 10;
 
-      .search-input-icon {
-        height: 44px;
-        cursor: pointer;
-      }
+        textarea {
+          height: 38px !important;
+          min-height: 38px !important;
+          padding: 12px 30px 12px 10px;
+        }
 
-      .icon-close {
-        display: none;
-        color: #c4c6cc;
+        &.is-focused {
+          textarea {
+            max-height: 400px;
+            min-height: 100px !important;
+          }
+        }
+
+        .bk-textarea--clear-icon {
+          position: absolute;
+          top: 12px;
+          right: 0;
+        }
       }
     }
 
-    &:hover {
-      .icon-close {
-        display: inline-block;
+    .icon-area {
+      .search-input-icon {
+        height: 40px;
+        cursor: pointer;
+        border-radius: 0 2px 2px 0;
       }
     }
   }