From bb49a10a01a8891900dd772b7d3d033a7aeae677 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 30 May 2025 17:52:28 +0800
Subject: [PATCH] fix: resolve ui issue of global search component (#7485)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind bug
/milestone 2.21.x

#### What this PR does / why we need it:

Resolve ui issue of global search component cause by https://github.com/halo-dev/halo/pull/7383

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/7478

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
修复 2.21.0-alpha.1 中 Console 的全局搜索样式问题。
```
---
 .../global-search/GlobalSearchModal.vue       | 50 ++++++++-----------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/ui/src/components/global-search/GlobalSearchModal.vue b/ui/src/components/global-search/GlobalSearchModal.vue
index 76125798a..87fcc6332 100644
--- a/ui/src/components/global-search/GlobalSearchModal.vue
+++ b/ui/src/components/global-search/GlobalSearchModal.vue
@@ -10,8 +10,6 @@ import {
   IconPalette,
   IconSettings,
   IconUserSettings,
-  VEntity,
-  VEntityField,
   VModal,
 } from "@halo-dev/components";
 import { useEventListener } from "@vueuse/core";
@@ -369,7 +367,7 @@ useEventListener("keydown", handleKeydown);
       </div>
       <ul
         v-if="searchResults.length > 0"
-        class="box-border flex h-full w-full flex-col gap-0.5"
+        class="box-border flex h-full w-full flex-col gap-1"
         role="list"
       >
         <li
@@ -378,33 +376,29 @@ useEventListener("keydown", handleKeydown);
           :key="itemIndex"
           @click="handleRoute(item)"
         >
-          <VEntity
-            class="rounded-md px-2 py-2.5 hover:bg-gray-100"
+          <div
+            class="flex items-center rounded-md px-2 py-2.5 cursor-pointer hover:bg-gray-100"
             :class="{ 'bg-gray-100': selectedIndex === itemIndex }"
           >
-            <template #start>
-              <VEntityField>
-                <template #description>
-                  <div class="h-5 w-5 rounded border p-0.5">
-                    <component
-                      :is="item.icon.component"
-                      v-if="'component' in item.icon"
-                      class="h-full w-full"
-                    />
-                    <img
-                      v-if="'src' in item.icon"
-                      :src="item.icon.src"
-                      class="h-full w-full object-cover"
-                    />
-                  </div>
-                </template>
-              </VEntityField>
-              <VEntityField :title="item.title"></VEntityField>
-            </template>
-            <template #end>
-              <VEntityField :description="item.group"></VEntityField>
-            </template>
-          </VEntity>
+            <div class="inline-flex items-center gap-3 flex-1">
+              <div class="h-5 w-5 rounded border p-0.5">
+                <component
+                  :is="item.icon.component"
+                  v-if="'component' in item.icon"
+                  class="h-full w-full"
+                />
+                <img
+                  v-if="'src' in item.icon"
+                  :src="item.icon.src"
+                  class="h-full w-full object-cover"
+                />
+              </div>
+              <span class="text-sm font-medium">{{ item.title }}</span>
+            </div>
+            <div class="text-xs text-gray-500 flex-shrink-0 flex-none">
+              {{ item.group }}
+            </div>
+          </div>
         </li>
       </ul>
     </div>