<script lang="ts" setup>
|
import { computed } from 'vue';
|
|
import { IconifyIcon } from '@vben/icons';
|
|
import { Card, Col, Row } from 'ant-design-vue';
|
|
import { useHomeAccess } from '#/utils/use-home-access';
|
|
import { HOME_SHORTCUTS } from '../data';
|
|
defineOptions({ name: 'MesHomeShortcuts' });
|
|
const emit = defineEmits<{
|
navigate: [name: string];
|
}>();
|
|
const { canSeeMenu } = useHomeAccess();
|
|
/** 快捷入口列表，3×3 网格布局与订单状态分布面板等高；菜单没开的不展示 */
|
const shortcuts = computed(() =>
|
HOME_SHORTCUTS.filter((item) => canSeeMenu(item.menu)),
|
);
|
</script>
|
|
<template>
|
<Card v-if="shortcuts.length" title="快捷入口" class="h-full">
|
<Row :gutter="16">
|
<Col v-for="item in shortcuts" :key="item.name" :span="8" class="mb-4">
|
<div
|
class="hover:bg-accent flex cursor-pointer flex-col items-center gap-2 rounded-lg py-3 transition-all hover:-translate-y-0.5"
|
@click="emit('navigate', item.menu)"
|
>
|
<div
|
class="flex size-12 items-center justify-center rounded-xl text-white"
|
:style="{ background: item.bgColor }"
|
>
|
<IconifyIcon class="size-6" :icon="item.icon" />
|
</div>
|
<span class="text-sm">{{ item.name }}</span>
|
</div>
|
</Col>
|
</Row>
|
</Card>
|
</template>
|
