1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <script lang="ts" setup>
| import { useRouter } from 'vue-router';
|
| import { IconifyIcon } from '..\..\..\..\packages\icons\src';
|
| import { Card } from 'ant-design-vue';
|
| /** 快捷入口卡片 */
| defineOptions({ name: 'ShortcutCard' });
|
| const router = useRouter();
|
| /** 菜单列表 */
| const menuList = [
| {
| name: '用户管理',
| icon: 'lucide:user',
| bgColor: 'bg-red-400',
| routerName: 'MemberUser',
| },
| {
| name: '商品管理',
| icon: 'fluent-mdl2:product',
| bgColor: 'bg-orange-400',
| routerName: 'ProductSpu',
| },
| {
| name: '订单管理',
| icon: 'lucide:list',
| bgColor: 'bg-yellow-500',
| routerName: 'TradeOrder',
| },
| {
| name: '售后管理',
| icon: 'ri:refund-2-line',
| bgColor: 'bg-green-600',
| routerName: 'TradeAfterSale',
| },
| {
| name: '分销管理',
| icon: 'fa-solid:project-diagram',
| bgColor: 'bg-cyan-500',
| routerName: 'TradeBrokerageUser',
| },
| {
| name: '优惠券',
| icon: 'lucide:ticket',
| bgColor: 'bg-blue-500',
| routerName: 'PromotionCoupon',
| },
| {
| name: '拼团活动',
| icon: 'lucide:users',
| bgColor: 'bg-purple-500',
| routerName: 'PromotionBargainActivity',
| },
| {
| name: '佣金提现',
| icon: 'vaadin:money-withdraw',
| bgColor: 'bg-rose-500',
| routerName: 'TradeBrokerageWithdraw',
| },
| ];
|
| /** 跳转到菜单对应页面 */
| function handleMenuClick(routerName: string) {
| router.push({ name: routerName });
| }
| </script>
|
| <template>
| <Card :bordered="false" title="快捷入口">
| <div class="flex flex-row flex-wrap gap-8 p-4">
| <div
| v-for="menu in menuList"
| :key="menu.name"
| class="flex h-20 w-[20%] cursor-pointer flex-col items-center justify-center gap-2"
| @click="handleMenuClick(menu.routerName)"
| >
| <div
| :class="menu.bgColor"
| class="flex h-12 w-12 items-center justify-center rounded text-white"
| >
| <IconifyIcon :icon="menu.icon" class="text-2xl" />
| </div>
| <span>{{ menu.name }}</span>
| </div>
| </div>
| </Card>
| </template>
|
|
