mirror of https://github.com/halo-dev/halo
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
parent
4acddb27a5
commit
bb49a10a01
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue