151 lines
3.7 KiB
Vue
151 lines
3.7 KiB
Vue
<template>
|
|
<div class="page-shell dashboard-page">
|
|
<div class="dashboard-grid">
|
|
<div class="soft-stat">
|
|
<n-statistic label="可见菜单" :value="visibleMenuTotal" />
|
|
</div>
|
|
<div class="soft-stat">
|
|
<n-statistic label="可访问页面" :value="visiblePageTotal" />
|
|
</div>
|
|
<div class="soft-stat">
|
|
<n-statistic label="权限数量" :value="authStore.permissions.length" />
|
|
</div>
|
|
<div class="soft-stat">
|
|
<n-statistic label="当前状态" :value="currentStatus" />
|
|
</div>
|
|
<div class="soft-stat">
|
|
<n-statistic label="已打开页签" :value="authStore.tabs.length" />
|
|
</div>
|
|
</div>
|
|
<div class="menu-shortcut-grid">
|
|
<button
|
|
v-for="menu in shortcutMenus"
|
|
:key="menu.id"
|
|
class="soft-stat menu-shortcut"
|
|
type="button"
|
|
@click="openMenu(menu)"
|
|
>
|
|
<span class="shortcut-icon">
|
|
<n-icon :size="22">
|
|
<component :is="resolveIcon(menu.icon)" />
|
|
</n-icon>
|
|
</span>
|
|
<span class="shortcut-content">
|
|
<span class="shortcut-title">{{ menu.title }}</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, type Component } from 'vue'
|
|
import { NIcon } from 'naive-ui'
|
|
import * as LucideIcons from 'lucide-vue-next'
|
|
import { useRouter } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { statusLabel } from '@/utils/display'
|
|
import type { MenuNode } from '@/types/auth'
|
|
|
|
const authStore = useAuthStore()
|
|
const router = useRouter()
|
|
|
|
function flattenMenus(nodes: MenuNode[]): MenuNode[] {
|
|
return nodes.flatMap((item) => [item, ...flattenMenus(item.children ?? [])])
|
|
}
|
|
|
|
function resolveIcon(icon?: string | null) {
|
|
return (
|
|
(icon ? (LucideIcons[icon as keyof typeof LucideIcons] as unknown as Component | undefined) : undefined) ??
|
|
LucideIcons.PanelRightOpen
|
|
)
|
|
}
|
|
|
|
function openMenu(menu: MenuNode) {
|
|
if (menu.path) {
|
|
router.push(menu.path)
|
|
}
|
|
}
|
|
|
|
const visibleMenus = computed(() => flattenMenus(authStore.menus).filter((item) => item.visible))
|
|
const visibleMenuTotal = computed(() => visibleMenus.value.length)
|
|
const visiblePageTotal = computed(
|
|
() => visibleMenus.value.filter((item) => item.type === 'MENU' && item.path).length
|
|
)
|
|
const shortcutMenus = computed(() =>
|
|
visibleMenus.value.filter((item) => item.type === 'MENU' && Boolean(item.path))
|
|
)
|
|
const currentStatus = computed(() => statusLabel(authStore.user?.status))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard-page {
|
|
overflow: auto;
|
|
}
|
|
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.menu-shortcut-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.menu-shortcut {
|
|
width: 100%;
|
|
min-height: 92px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
color: #111827;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition:
|
|
border-color 0.16s ease,
|
|
box-shadow 0.16s ease,
|
|
transform 0.16s ease;
|
|
}
|
|
|
|
.menu-shortcut:hover {
|
|
border-color: #94a3b8;
|
|
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.menu-shortcut:focus-visible {
|
|
outline: 2px solid #2563eb;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.shortcut-icon {
|
|
width: 42px;
|
|
height: 42px;
|
|
flex: 0 0 42px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 10px;
|
|
color: #2563eb;
|
|
background: var(--app-primary-soft);
|
|
}
|
|
|
|
.shortcut-content {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.shortcut-title {
|
|
overflow: hidden;
|
|
color: #111827;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|