<template>
|
<HomePanel title="快捷入口" subtitle="按权限自动展示常用功能">
|
<div class="entry">
|
<div
|
v-for="item in entries"
|
:key="item.title"
|
class="entry__item"
|
role="link"
|
tabindex="0"
|
@click="go(item.path)"
|
@keyup.enter="go(item.path)"
|
>
|
<div class="entry__icon">
|
<el-icon :size="18"><component :is="item.icon" /></el-icon>
|
</div>
|
<span class="entry__label">{{ item.title }}</span>
|
</div>
|
<el-empty v-if="!entries.length" description="暂无可用入口" :image-size="48" />
|
</div>
|
</HomePanel>
|
</template>
|
|
<script setup>
|
import { computed } from 'vue'
|
import { useRouter } from 'vue-router'
|
import HomePanel from './HomePanel.vue'
|
|
const router = useRouter()
|
|
// 期望展示的常用入口（按业务顺序）；用户无对应菜单权限时自动跳过
|
const WANTED = [
|
{ title: '生产订单', icon: 'Tickets' },
|
{ title: '生产工单', icon: 'List' },
|
{ title: '生产报工', icon: 'DataLine' },
|
{ title: '入库管理', icon: 'Download' },
|
{ title: '出库台账', icon: 'Upload' },
|
{ title: '库存管理', icon: 'Box' },
|
{ title: '原材料检验', icon: 'Aim' },
|
{ title: '出厂检验', icon: 'CircleCheck' },
|
{ title: '客户档案', icon: 'User' },
|
{ title: '销售台账', icon: 'Money' },
|
{ title: '采购台账', icon: 'ShoppingCart' },
|
{ title: '设备台账', icon: 'Cpu' }
|
]
|
|
// 从已注册路由（后端菜单按权限生成）中建立 标题 -> 完整路径 映射
|
const entries = computed(() => {
|
const titlePath = new Map()
|
router.getRoutes().forEach((r) => {
|
if (r.meta && r.meta.title && !titlePath.has(r.meta.title)) {
|
titlePath.set(r.meta.title, r.path)
|
}
|
})
|
return WANTED
|
.filter((w) => titlePath.has(w.title))
|
.map((w) => ({ ...w, path: titlePath.get(w.title) }))
|
})
|
|
const go = (path) => router.push(path)
|
</script>
|
|
<style scoped>
|
.entry {
|
display: grid;
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
gap: 10px;
|
}
|
|
.entry__item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 8px;
|
padding: 14px 6px;
|
border-radius: var(--app-radius-sm);
|
border: 1px solid transparent;
|
cursor: pointer;
|
transition: background var(--app-transition), border-color var(--app-transition);
|
outline: none;
|
}
|
|
.entry__item:hover,
|
.entry__item:focus-visible {
|
background: var(--app-primary-soft);
|
border-color: var(--app-border);
|
}
|
|
.entry__icon {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 36px;
|
height: 36px;
|
border-radius: 50%;
|
background: var(--app-surface-hover);
|
color: var(--app-primary);
|
transition: background var(--app-transition);
|
}
|
|
.entry__item:hover .entry__icon {
|
background: var(--app-surface);
|
}
|
|
.entry__label {
|
font-size: 12px;
|
color: var(--app-text-secondary);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: 100%;
|
}
|
|
@media (max-width: 1440px) {
|
.entry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
}
|
|
@media (max-width: 768px) {
|
.entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
}
|
</style>
|
