feat：【mall 商城】商城首页的迁移【ele】60%：初始化

apps/web-ele/src/views/mall/home/modules/shortcut-card.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElCard } from 'element-plus';
+
+/** 快捷入口卡片 */
+defineOptions({ name: 'ShortcutCard' });
+
+const router = useRouter();
+
+/** 菜单列表 */
+const menuList = [
+  {
+    name: '用户管理',
+    icon: 'ep:user-filled',
+    bgColor: 'bg-red-400',
+    routerName: 'MemberUser',
+  },
+  {
+    name: '商品管理',
+    icon: 'fluent-mdl2:product',
+    bgColor: 'bg-orange-400',
+    routerName: 'ProductSpu',
+  },
+  {
+    name: '订单管理',
+    icon: 'ep: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: 'ep:ticket',
+    bgColor: 'bg-blue-500',
+    routerName: 'PromotionCoupon',
+  },
+  {
+    name: '拼团活动',
+    icon: 'fa:group',
+    bgColor: 'bg-purple-500',
+    routerName: 'PromotionBargainActivity',
+  },
+  {
+    name: '佣金提现',
+    icon: 'vaadin:money-withdraw',
+    bgColor: 'bg-rose-500',
+    routerName: 'TradeBrokerageWithdraw',
+  },
+];
+
+/** 跳转到菜单对应页面 */
+// TODO @xingyu：貌似通过 name 的方式，都无法跳转，找不到路由？
+function handleMenuClick(routerName: string) {
+  router.push({ name: routerName });
+}
+</script>
+
+<template>
+  <ElCard :border="false">
+    <template #header>
+      <div>快捷入口</div>
+    </template>
+    <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>
+  </ElCard>
+</template>