style: 全局菜单搜索仅过滤菜单名称
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user