<script lang="ts" setup>
|
import { useRouter } from 'vue-router';
|
|
import { IconifyIcon } from '@vben/icons';
|
|
import { Card, Col, Row, message } from 'ant-design-vue';
|
|
defineOptions({ name: 'BagCodeHomeShortcuts' });
|
|
const router = useRouter();
|
|
/** 快捷入口列表，按业务域精简为 4 个核心入口 */
|
const shortcuts = [
|
{ bgColor: '#409EFF', icon: 'lucide:package', name: '品种管理', routeName: 'MdmItem' },
|
{ bgColor: '#E6A23C', icon: 'lucide:folder-tree', name: '品种分类', routeName: 'MesMdItemType' },
|
{ bgColor: '#f59e0b', icon: 'lucide:layers', name: '批次生产', routeName: 'MesProBatch' },
|
{ bgColor: '#ec4899', icon: 'lucide:scan-barcode', name: '赋码管理', routeName: 'MesProBagCode' },
|
];
|
|
/** 跳转到目标页面（按路由 name，未加载时提示） */
|
async function handleNavigate(routeName: string) {
|
try {
|
await router.push({ name: routeName });
|
} catch {
|
message.warning('当前菜单尚未加载，请从左侧菜单进入对应页面');
|
}
|
}
|
</script>
|
|
<template>
|
<Card title="快捷入口" class="h-full">
|
<Row :gutter="16">
|
<Col v-for="item in shortcuts" :key="item.name" :lg="6" :md="8" :sm="12" :xs="12" 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="handleNavigate(item.routeName)"
|
>
|
<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>
|
