From 53e5df3a57b0f1604e91ef302dc3f21a772a35b0 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    |  93 +++++++--
 .../components/FilterTypeSelect.vue           |  80 ++++++++
 .../search-result/FilterOptions.vue           |   4 +-
 .../components/search-result/Index.vue        |  91 +++++++--
 .../render-result/ClusterDomain.vue           |  17 +-
 .../render-result/ClusterName.vue             |  19 +-
 .../search-result/render-result/Instance.vue  |  25 +--
 .../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        |   5 +
 .../src/services/source/quickSearch.ts        |   8 +-
 .../frontend/src/views/quick-search/Index.vue |  79 ++++----
 .../quick-search/components/SearchInput.vue   | 177 ++++++++++++------
 15 files changed, 435 insertions(+), 176 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..2911e0e847 100644
--- a/dbm-ui/frontend/src/components/system-search/Index.vue
+++ b/dbm-ui/frontend/src/components/system-search/Index.vue
@@ -23,11 +23,18 @@
       v-model="serach"
       class="search-input"
       clearable
-      :placeholder="t('全站搜索 Ctrl + K')"
+      :placeholder="t('全站搜索，支持多对象，Enter开启搜索')"
       :type="isFocused ? 'text' : 'search'"
       @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" />
@@ -61,11 +69,14 @@
 </template>
 <script setup lang="ts">
   import tippy, { type Instance, type SingleTarget } from 'tippy.js';
-  import { computed, onBeforeUnmount, ref } from 'vue';
+  import { computed, onBeforeUnmount, ref, type UnwrapRef } 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.EXACT);
 
   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, '|');
@@ -137,28 +149,39 @@
   };
 
   const handleSearch = () => {
-    // 页面跳转参数处理
-    const options = searchResultRef.value.getFilterOptions();
-    const query = Object.keys(options).reduce((prevQuery, optionKey) => {
-      const optionItem = options[optionKey];
+    const getQuery = (options: UnwrapRef<typeof formData> & { short_code?: string }) =>
+      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 { formData, keyword } = searchResultRef.value!.getFilterOptions();
+    if (keyword) {
+      quickSearch({
+        ...formData,
+        keyword,
+      }).then((quickSearchResult) => {
+        const options = {
+          ...formData,
+          short_code: quickSearchResult.short_code,
+        };
+        handleRedirect(getQuery(options));
+      });
+    } else {
+      handleRedirect(getQuery(formData));
+    }
+  };
 
+  const handleRedirect = (query = {}) => {
     const url = router.resolve({
       name: 'QuickSearch',
       query: {
@@ -224,6 +247,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..9c3e6213fd
--- /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 {
+    EXACT = 'EXACT',
+    CONTAINS = 'CONTAINS',
+  }
+</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.EXACT,
+    },
+    {
+      label: t('模糊搜索'),
+      value: FilterType.CONTAINS,
+    },
+  ];
+
+  const isRotate = ref(false);
+
+  const currentTitle = computed(() =>
+    modelValue.value === FilterType.EXACT ? 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..202fed9fda 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;
+      }
     },
   });
 
@@ -128,7 +164,6 @@
       }
 
       serachResult.value = {} as ServiceReturnType<typeof quickSearch>;
-
       if (!modelValue.value) {
         return;
       }
@@ -144,14 +179,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 +229,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 +242,6 @@
         .value-text {
           display: flex;
           height: 32px;
-          padding: 0 8px;
           cursor: pointer;
           align-items: center;
 
@@ -199,6 +249,12 @@
             background: #f5f7fa;
           }
 
+          .keyword-highlight {
+            display: inline;
+            width: fit-content;
+            overflow: unset;
+          }
+
           .value-text {
             display: flex;
             overflow: hidden;
@@ -212,16 +268,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 dfb6562c5b..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,16 +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>
@@ -22,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';
 
@@ -47,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 aa009cf308..69b778732e 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3649,5 +3649,10 @@
   "仅可授权状态为“已启用”的集群": "仅可授权状态为“已启用”的集群",
   "请先禁用集群": "请先禁用集群",
   "无运维节点": "无运维节点",
+  "模糊搜索": "模糊搜索",
+  "精确搜索": "精确搜索",
+  "每个分类最多显示 10 条记录，点击搜索可查看全部记录。": "每个分类最多显示 10 条记录，点击搜索可查看全部记录。",
+  "全站搜索，支持多对象，Shift + Enter 换行，Enter键开启搜索": "全站搜索，支持多对象，Shift + Enter 换行，Enter键开启搜索",
+  "全站搜索，支持多对象，Enter开启搜索": "全站搜索，支持多对象，Enter开启搜索",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
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..15ae02b42c 100644
--- a/dbm-ui/frontend/src/views/quick-search/Index.vue
+++ b/dbm-ui/frontend/src/views/quick-search/Index.vue
@@ -12,6 +12,7 @@
         <div class="quick-search-search">
           <SearchInput
             v-model="keyword"
+            v-model:filter-type="formData.filter_type"
             @search="handleSearch" />
           <!-- <BkDropdown class="ml-8">
                 <BkButton
@@ -82,7 +83,6 @@
 </template>
 
 <script setup lang="ts">
-  import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
@@ -92,6 +92,7 @@
 
   import { batchSplitRegex } from '@common/regex';
 
+  import { FilterType } from '@components/system-search/components/FilterTypeSelect.vue';
   import FilterOptions from '@components/system-search/components/search-result/FilterOptions.vue';
 
   import ClusterDomain from './components/ClusterDomain.vue';
@@ -104,7 +105,7 @@
 
   const formatRouteQuery = () => {
     const {
-      filter_type,
+      filter_type: filterType,
       bk_biz_ids: bkBizIds,
       db_types: dbTypes,
       resource_types: resourceTypes,
@@ -119,7 +120,7 @@
       bk_biz_ids: bkBizIds ? bkBizIds.split(',').map((bizId) => Number(bizId)) : [],
       db_types: dbTypes ? dbTypes.split(',') : [],
       resource_types: resourceTypes ? resourceTypes.split(',') : [],
-      filter_type,
+      filter_type: filterType || FilterType.EXACT,
     };
   };
 
@@ -128,6 +129,8 @@
   const { t } = useI18n();
   const { bizs: bizList } = useGlobalBizs();
 
+  let isRedirectSearch = true;
+
   const comMap = {
     cluster_domain: ClusterDomain,
     cluster_name: ClusterName,
@@ -142,9 +145,9 @@
     {} as Record<number, string>,
   );
 
-  const keyword = ref((route.query.keyword as string) || '');
-  const isTableSearching = ref(false);
-  const dataMap = ref<Omit<ServiceReturnType<typeof quickSearch>, 'machine'>>({
+  // const keyword = ref((route.query.keyword as string) || '');
+  const keyword = ref('');
+  const dataMap = ref<Omit<ServiceReturnType<typeof quickSearch>, 'machine' | 'keyword' | 'short_code'>>({
     cluster_name: [],
     cluster_domain: [],
     instance: [],
@@ -188,7 +191,7 @@
     },
   ]);
 
-  const isSearching = computed(() => isTableSearching.value && !!keyword.value);
+  const isSearching = computed(() => loading.value && !!keyword.value);
 
   const renderComponent = computed(() => {
     if (loading.value) {
@@ -219,6 +222,10 @@
   } = useRequest(quickSearch, {
     manual: true,
     onSuccess(data) {
+      if (isRedirectSearch) {
+        keyword.value = data.keyword;
+        handleSearch();
+      }
       Object.assign(dataMap.value, {
         cluster_domain: data.cluster_domain,
         cluster_name: data.cluster_name,
@@ -239,6 +246,9 @@
         activeTab.value = panelItem.name;
       }
     },
+    onAfter() {
+      isRedirectSearch = false;
+    },
   });
 
   watch(
@@ -251,16 +261,16 @@
     },
   );
 
-  watch(keyword, (newKeyword, oldKeyword) => {
-    const newKeywordArr = newKeyword.split(batchSplitRegex);
-    const oldKeywordArr = (oldKeyword || '').split(batchSplitRegex);
-    if (_.isEqual(newKeywordArr, oldKeywordArr)) {
-      return;
-    }
+  // watch(keyword, (newKeyword, oldKeyword) => {
+  //   const newKeywordArr = newKeyword.split(batchSplitRegex);
+  //   const oldKeywordArr = (oldKeyword || '').split(batchSplitRegex);
+  //   if (_.isEqual(newKeywordArr, oldKeywordArr)) {
+  //     return;
+  //   }
 
-    isTableSearching.value = false;
-    clearData();
-  });
+  //   isTableSearching.value = false;
+  //   clearData();
+  // });
 
   const clearData = () => {
     Object.assign(dataMap.value, {
@@ -285,7 +295,6 @@
       return;
     }
 
-    isTableSearching.value = true;
     quickSearchRun({
       ...formData.value,
       keyword: keyword.value.replace(batchSplitRegex, ' '),
@@ -293,20 +302,20 @@
     });
   };
 
-  watch(
-    keyword,
-    (newKeyword, oldKeyword) => {
-      const newKeywordArr = newKeyword.split(batchSplitRegex);
-      const oldKeywordArr = (oldKeyword || '').split(batchSplitRegex);
-
-      if (!_.isEqual(newKeywordArr, oldKeywordArr) && !newKeyword.endsWith('\n')) {
-        handleSearch();
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
+  // watch(
+  //   keyword,
+  //   (newKeyword, oldKeyword) => {
+  //     const newKeywordArr = newKeyword.split(batchSplitRegex);
+  //     const oldKeywordArr = (oldKeyword || '').split(batchSplitRegex);
+
+  //     if (!_.isEqual(newKeywordArr, oldKeywordArr) && !newKeyword.endsWith('\n')) {
+  //       handleSearch();
+  //     }
+  //   },
+  //   {
+  //     immediate: true,
+  //   },
+  // );
 
   watch(
     formData,
@@ -331,7 +340,13 @@
   };
 
   // 初始化查询
-  handleSearch();
+  if (route.query.short_code) {
+    quickSearchRun({
+      ...formData.value,
+      short_code: route.query.short_code as string,
+      limit: 1000,
+    });
+  }
 
   defineExpose({
     routerBack() {
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..73c302d045 100644
--- a/dbm-ui/frontend/src/views/quick-search/components/SearchInput.vue
+++ b/dbm-ui/frontend/src/views/quick-search/components/SearchInput.vue
@@ -13,37 +13,39 @@
 
 <template>
   <div
-    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
+      ref="rootRef"
+      class="input-box">
+      <BkInput
+        v-model="modelValue"
+        autosize
+        class="search-input-textarea"
+        clearable
+        :placeholder="t('全站搜索，支持多对象，Shift + Enter 换行，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 +54,7 @@
     <SearchResult
       v-if="isPopMenuShow"
       v-model="modelValue"
+      :filter-type="filterType"
       :show-options="false"
       style="height: 506px">
       <SearchHistory
@@ -67,6 +70,7 @@
 
   import { batchSplitRegex } from '@common/regex';
 
+  import FilterTypeSelect 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';
@@ -79,6 +83,9 @@
   const modelValue = defineModel<string>({
     default: '',
   });
+  const filterType = defineModel<string>('filter-type', {
+    default: '',
+  });
 
   const { t } = useI18n();
 
@@ -88,14 +95,16 @@
   const popRef = ref<HTMLElement>();
   const popContentStyle = ref({});
   const isPopMenuShow = ref(false);
+  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,17 +129,18 @@
 
   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) {
       popContentStyle.value = {
-        width: `${Math.max(width - 91, 600)}px`,
+        width: `${Math.max(width - 91, 712)}px`,
       };
       tippyIns.show();
     }
@@ -138,11 +148,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 +215,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;
       }
     }
   }