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,
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>