style: 全局菜单搜索仅过滤菜单名称

This commit is contained in:
TsMask
2025-09-17 15:10:08 +08:00
parent 749e880aa7
commit 4a5008f1b5

View File

@@ -2,11 +2,7 @@
<!-- 搜索按钮 --> <!-- 搜索按钮 -->
<a-tooltip placement="bottom"> <a-tooltip placement="bottom">
<template #title>{{ t('common.search') }}</template> <template #title>{{ t('common.search') }}</template>
<a-button <a-button type="text" style="color: inherit" @click="fnClickSearch">
type="text"
style="color: inherit"
@click="fnClickSearch"
>
<template #icon> <template #icon>
<SearchOutlined /> <SearchOutlined />
</template> </template>
@@ -42,7 +38,9 @@
<div class="search-results"> <div class="search-results">
<div v-if="filteredMenus.length === 0" class="no-results"> <div v-if="filteredMenus.length === 0" class="no-results">
<a-empty <a-empty
:description="searchKeyword ? t('common.noData') : t('common.searchTip')" :description="
searchKeyword ? t('common.noData') : t('common.searchTip')
"
:image="false" :image="false"
/> />
</div> </div>
@@ -83,10 +81,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { import { getMenuData, clearMenuItem } from 'antdv-pro-layout';
getMenuData,
clearMenuItem
} from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal'; import { ProModal } from 'antdv-pro-modal';
import IconFont from '@/components/IconFont/index.vue'; import IconFont from '@/components/IconFont/index.vue';
import { ref, computed, nextTick } from 'vue'; import { ref, computed, nextTick } from 'vue';
@@ -164,26 +159,30 @@ const searchableMenus = computed(() => {
try { try {
const title = t(route.meta.title); const title = t(route.meta.title);
// 避免重复添加已存在的路由 // 避免重复添加已存在的路由
const exists = menus.find(m => m.routeName === route.name || m.path === fullPath); const exists = menus.find(
m => m.routeName === route.name || m.path === fullPath
);
if (!exists) { if (!exists) {
menus.push({ menus.push({
title: title, title: title,
path: fullPath, path: fullPath,
icon: route.meta.icon, icon: route.meta.icon,
key: route.name || fullPath, key: route.name || fullPath,
routeName: route.name routeName: route.name,
}); });
} }
} catch (error) { } catch (error) {
// 如果翻译失败,使用原始标题 // 如果翻译失败,使用原始标题
const exists = menus.find(m => m.routeName === route.name || m.path === fullPath); const exists = menus.find(
m => m.routeName === route.name || m.path === fullPath
);
if (!exists) { if (!exists) {
menus.push({ menus.push({
title: route.meta.title, title: route.meta.title,
path: fullPath, path: fullPath,
icon: route.meta.icon, icon: route.meta.icon,
key: route.name || fullPath, key: route.name || fullPath,
routeName: route.name routeName: route.name,
}); });
} }
} }
@@ -212,10 +211,14 @@ const filteredMenus = computed(() => {
return searchableMenus.value.slice(0, 10); // 默认显示前10个 return searchableMenus.value.slice(0, 10); // 默认显示前10个
} }
return searchableMenus.value.filter(menu => // return searchableMenus.value.filter(menu =>
menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) || // menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
menu.path.toLowerCase().includes(searchKeyword.value.toLowerCase()) // menu.path.toLowerCase().includes(searchKeyword.value.toLowerCase())
).slice(0, 10); // ).slice(0, 10);
const value = searchKeyword.value.toLowerCase();
return searchableMenus.value
.filter(menu => menu.title.toLowerCase().includes(value))
.slice(0, 10);
}); });
/**打开搜索弹窗 */ /**打开搜索弹窗 */
@@ -343,7 +346,7 @@ function fnHandleKeydown(e: KeyboardEvent) {
} }
// 暗黑主题支持 // 暗黑主题支持
[data-theme="dark"] { [data-theme='dark'] {
.search-modal-content { .search-modal-content {
.search-results { .search-results {
.menu-list { .menu-list {