fix: resolve ui issue of global search component (#7485)

#### 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 的全局搜索样式问题。
```
pull/7486/head^2
Ryan Wang 2025-05-30 17:52:28 +08:00 committed by GitHub
parent 4acddb27a5
commit bb49a10a01
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 28 deletions

View File

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