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"
|
@click="toggleSidebar"
|
||||||
text
|
text
|
||||||
/>
|
/>
|
||||||
<!-- 中间:面包屑导航 -->
|
<!-- 中间:面包屑导航和搜索框 -->
|
||||||
<div class="header-center">
|
<div class="header-center">
|
||||||
<Breadcrumb />
|
<Breadcrumb />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 右侧:功能按钮和用户信息 -->
|
<!-- 右侧:功能按钮和用户信息 -->
|
||||||
<div class="header-right">
|
<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-tooltip :content="isFullscreen ? '退出全屏' : '全屏'">
|
||||||
<el-button :icon="isFullscreen ? Crop : FullScreen" text @click="toggleFullscreen" />
|
<el-button :icon="isFullscreen ? Crop : FullScreen" text @click="toggleFullscreen" />
|
||||||
|
|
@ -61,7 +100,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import {
|
import {
|
||||||
FullScreen,
|
FullScreen,
|
||||||
Crop,
|
Crop,
|
||||||
|
|
@ -70,7 +109,8 @@ import {
|
||||||
SwitchButton,
|
SwitchButton,
|
||||||
ArrowDown,
|
ArrowDown,
|
||||||
Fold,
|
Fold,
|
||||||
Expand
|
Expand,
|
||||||
|
Search
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
import { useUserStore } from '@/stores/modules/user'
|
import { useUserStore } from '@/stores/modules/user'
|
||||||
import { useLanguageStore } from '@/stores/modules/language'
|
import { useLanguageStore } from '@/stores/modules/language'
|
||||||
|
|
@ -96,6 +136,106 @@ const toggleSidebar = () => {
|
||||||
// 用户信息 - 使用 userStore 的响应式数据
|
// 用户信息 - 使用 userStore 的响应式数据
|
||||||
const activeUserName = computed(() => userStore.userInfo?.username || '-')
|
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 isFullscreen = ref(false)
|
||||||
const toggleFullscreen = () => {
|
const toggleFullscreen = () => {
|
||||||
|
|
@ -219,6 +359,90 @@ const handleLogout = () => {
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
justify-content: flex-end;
|
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 {
|
.el-button {
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
color: var(--el-text-color-regular);
|
color: var(--el-text-color-regular);
|
||||||
|
|
|
||||||
|
|
@ -310,6 +310,7 @@ const getCustomerList = async () => {
|
||||||
tableTree.value = data.data.map((item: any) => ({
|
tableTree.value = data.data.map((item: any) => ({
|
||||||
...item,
|
...item,
|
||||||
accountName: item.username,
|
accountName: item.username,
|
||||||
|
amount: item.wallet_capital.amount,
|
||||||
userId: item.id,
|
userId: item.id,
|
||||||
status: item.status === 1 ? '正常' : '禁用',
|
status: item.status === 1 ? '正常' : '禁用',
|
||||||
role: item.role.title || '未知',
|
role: item.role.title || '未知',
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@ export const tableColumns = [
|
||||||
{ prop: 'role', label: '账号角色' },
|
{ prop: 'role', label: '账号角色' },
|
||||||
// 账号数量
|
// 账号数量
|
||||||
{ prop: 'accountQty', 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' },
|
{ prop: 'marginRatio', label: '点差分配比例', slotName: 'marginRatio' },
|
||||||
// 手续费分成比例
|
// 手续费分成比例
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue