Merge branch 'master' of gitee.com:liangzigongshe/foreign-admin-ui into yueyixin
This commit is contained in:
杨
commit
f3dc589fd7
|
|
@ -15,13 +15,52 @@
|
|||
@click="toggleSidebar"
|
||||
text
|
||||
/>
|
||||
<!-- 中间：面包屑导航 -->
|
||||
<!-- 中间：面包屑导航和搜索框 -->
|
||||
<div class="header-center">
|
||||
<Breadcrumb />
|
||||
</div>
|
||||
|
||||
<!-- 右侧：功能按钮和用户信息 -->
|
||||
<div class="header-right">
|
||||
<!-- 菜单搜索 -->
|
||||
<div class="menu-search-wrapper">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索菜单..."
|
||||
class="menu-search-input"
|
||||
clearable
|
||||
@focus="handleSearchFocus"
|
||||
@blur="handleSearchBlur"
|
||||
@input="handleSearchInput"
|
||||
@keydown.enter="handleSearchEnter"
|
||||
@keydown.up.prevent="navigateResults(-1)"
|
||||
@keydown.down.prevent="navigateResults(1)"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- 搜索结果下拉 -->
|
||||
<div v-show="searchVisible && searchResults.length > 0" class="search-results-dropdown">
|
||||
<div
|
||||
v-for="(item, index) in searchResults"
|
||||
:key="item.path"
|
||||
class="search-result-item"
|
||||
:class="{ 'is-active': activeIndex === index }"
|
||||
@click="handleResultClick(item)"
|
||||
@mouseenter="activeIndex = index"
|
||||
>
|
||||
<el-icon v-if="item.icon" class="result-icon"><component :is="item.icon" /></el-icon>
|
||||
<span class="result-label">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 无结果提示 -->
|
||||
<div v-show="searchVisible && searchQuery && !searchResults.length" class="search-empty">
|
||||
<el-icon><Search /></el-icon>
|
||||
<span>未找到匹配的菜单</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全屏 -->
|
||||
<el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'">
|
||||
<el-button :icon="isFullscreen ? Crop : FullScreen" text @click="toggleFullscreen" />
|
||||
|
|
@ -61,7 +100,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import {
|
||||
FullScreen,
|
||||
Crop,
|
||||
|
|
@ -70,7 +109,8 @@ import {
|
|||
SwitchButton,
|
||||
ArrowDown,
|
||||
Fold,
|
||||
Expand
|
||||
Expand,
|
||||
Search
|
||||
} from '@element-plus/icons-vue'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { useLanguageStore } from '@/stores/modules/language'
|
||||
|
|
@ -96,6 +136,106 @@ const toggleSidebar = () => {
|
|||
// 用户信息 - 使用 userStore 的响应式数据
|
||||
const activeUserName = computed(() => userStore.userInfo?.username || '-')
|
||||
|
||||
// ==================== 菜单搜索功能 ====================
|
||||
interface SearchMenuItem {
|
||||
label: string
|
||||
path: string
|
||||
icon?: string
|
||||
}
|
||||
|
||||
const searchQuery = ref('')
|
||||
const searchVisible = ref(false)
|
||||
const searchResults = ref<SearchMenuItem[]>([])
|
||||
const activeIndex = ref(-1)
|
||||
|
||||
// 从 storage 获取菜单列表
|
||||
const getMenuList = (): any[] => {
|
||||
return getStorage('menusInfo') || []
|
||||
}
|
||||
|
||||
// 扁平化菜单（只获取没有子菜单的菜单项，即叶子菜单）
|
||||
const flattenMenu = (menus: any[], result: SearchMenuItem[] = []): SearchMenuItem[] => {
|
||||
menus.forEach(menu => {
|
||||
// 只有没有子菜单的菜单项才添加到搜索结果
|
||||
if (menu.name && menu.path && (!menu.son || menu.son.length === 0)) {
|
||||
result.push({
|
||||
label: menu.name,
|
||||
path: menu.path,
|
||||
icon: menu.icon
|
||||
})
|
||||
}
|
||||
// 递归处理子菜单
|
||||
if (menu.son && menu.son.length > 0) {
|
||||
flattenMenu(menu.son, result)
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
// 搜索菜单
|
||||
const performSearch = (query: string) => {
|
||||
if (!query.trim()) {
|
||||
searchResults.value = []
|
||||
return
|
||||
}
|
||||
|
||||
const allMenus = flattenMenu(getMenuList())
|
||||
const lowerQuery = query.toLowerCase()
|
||||
|
||||
searchResults.value = allMenus.filter(menu =>
|
||||
menu.label.toLowerCase().includes(lowerQuery)
|
||||
).slice(0, 10) // 最多显示10条
|
||||
|
||||
activeIndex.value = searchResults.value.length > 0 ? 0 : -1
|
||||
}
|
||||
|
||||
// 搜索输入处理
|
||||
const handleSearchInput = () => {
|
||||
performSearch(searchQuery.value)
|
||||
searchVisible.value = true
|
||||
}
|
||||
|
||||
// 搜索框获得焦点
|
||||
const handleSearchFocus = () => {
|
||||
if (searchQuery.value) {
|
||||
searchVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索框失去焦点
|
||||
const handleSearchBlur = () => {
|
||||
// 延迟关闭，以便点击结果
|
||||
setTimeout(() => {
|
||||
searchVisible.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
// 回车键处理
|
||||
const handleSearchEnter = () => {
|
||||
if (activeIndex.value >= 0 && searchResults.value[activeIndex.value]) {
|
||||
handleResultClick(searchResults.value[activeIndex.value])
|
||||
}
|
||||
}
|
||||
|
||||
// 点击搜索结果
|
||||
const handleResultClick = (item: SearchMenuItem) => {
|
||||
searchQuery.value = ''
|
||||
searchVisible.value = false
|
||||
router.push(item.path)
|
||||
}
|
||||
|
||||
// 上下键导航搜索结果
|
||||
const navigateResults = (direction: number) => {
|
||||
if (searchResults.value.length === 0) return
|
||||
|
||||
activeIndex.value += direction
|
||||
if (activeIndex.value < 0) {
|
||||
activeIndex.value = searchResults.value.length - 1
|
||||
} else if (activeIndex.value >= searchResults.value.length) {
|
||||
activeIndex.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
// 全屏相关
|
||||
const isFullscreen = ref(false)
|
||||
const toggleFullscreen = () => {
|
||||
|
|
@ -219,6 +359,90 @@ const handleLogout = () => {
|
|||
min-width: 200px;
|
||||
justify-content: flex-end;
|
||||
|
||||
// 菜单搜索样式
|
||||
.menu-search-wrapper {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
|
||||
.menu-search-input {
|
||||
width: 180px;
|
||||
transition: width 0.3s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
min-width: 240px;
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
z-index: 2000;
|
||||
|
||||
.search-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-empty {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 13px;
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
padding: 4px 8px;
|
||||
color: var(--el-text-color-regular);
|
||||
|
|
|
|||
|
|
@ -310,6 +310,7 @@ const getCustomerList = async () => {
|
|||
tableTree.value = data.data.map((item: any) => ({
|
||||
...item,
|
||||
accountName: item.username,
|
||||
amount: item.wallet_capital.amount,
|
||||
userId: item.id,
|
||||
status: item.status === 1 ? '正常' : '禁用',
|
||||
role: item.role.title || '未知',
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const tableColumns = [
|
|||
{ prop: 'role', label: '账号角色' },
|
||||
// 账号数量
|
||||
{ prop: 'accountQty', label: '账号数量' },
|
||||
{ prop: 'wallet_capital.amount', label: '资金', align: 'center' as const, isNumber: true },
|
||||
{ prop: 'amount', label: '资金', align: 'center' as const, isNumber: true },
|
||||
// 点差分配比例
|
||||
{ prop: 'marginRatio', label: '点差分配比例', slotName: 'marginRatio' },
|
||||
// 手续费分成比例
|
||||
|
|
|
|||
Loading…
Reference in New Issue