feat(首页): 新增仓储物流与人力资源概览卡片

gaoluyang

16 小时以前 f7072c928b7cb9c8ae3bdba00e6c046e3f6f1c34

feat(首页): 新增仓储物流与人力资源概览卡片

首页按菜单删减后偏空，补两行按菜单自动显隐的统计卡（各 4 张）：
- 仓储物流：库存物料、仓库数量、采购入库单、生产领料单
- 人力资源：员工总数、请假申请、考勤异常、薪资发放单

数值取各自列表接口的 total（pageSize 取 1，不拉明细），点击跳对应菜单页；
菜单关着整组不渲染，其他客户的首页不会因此多出没开的模块。

Co-Authored-By: Claude Code <noreply@anthropic.com>

 src/views/dashboard/analytics/index.vue

@@ -17,6 +17,7 @@
import KpiCards from './modules/kpi-cards.vue';
import ProductionTrend from './modules/production-trend.vue';
import QuickActions from './modules/quick-actions.vue';
import WarehouseHrCards from './modules/warehouse-hr-cards.vue';

defineOptions({ name: 'DashboardAnalytics' });

@@ -104,6 +105,9 @@
    <!-- ERP/WMS/BPM ç»è¥ KPI -->
    <BizCards @navigate="handleNavigate" />

    <!-- ä»“储物流 / äººåŠ›èµ„源业务概览（菜单没开的整组不展示） -->
    <WarehouseHrCards @navigate="handleNavigate" />

    <!-- AI æ™ºèƒ½åˆ†æž -->
    <AiInsights
      v-if="showAiInsights"

 src/views/dashboard/analytics/modules/warehouse-hr-cards.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,298 @@
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';

import { CountTo } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { Col, Row } from 'ant-design-vue';

import { getAttendanceExceptionPage } from '#/api/hrm/attendance/exception';
import { getEmployeePage } from '#/api/hrm/employee';
import { getLeavePage } from '#/api/hrm/leave';
import { getSalaryPaymentPage } from '#/api/hrm/salary/payment';
import { getItemReceiptPage } from '#/api/mes/wm/itemreceipt';
import { getMaterialStockPage } from '#/api/mes/wm/materialstock';
import { getProductIssuePage } from '#/api/mes/wm/productissue';
import { getWarehousePage } from '#/api/mes/wm/warehouse';

import { useHomeAccess } from '#/utils/use-home-access';

defineOptions({ name: 'DashboardWarehouseHrCards' });

const emit = defineEmits<{
  navigate: [name: string];
}>();

/** ç»Ÿè®¡å¡ç‰‡å®šä¹‰ï¼šå–数只调各自列表接口拿总数，菜单没开的卡不显示 */
interface StatCard {
  /** å¡ç‰‡æ ‡é¢˜ */
  label: string;
  /** å•ä½ */
  unit: string;
  /** å‰¯æ ‡é¢˜ï¼šæ•°æ®æ¥æº */
  hint: string;
  icon: string;
  /** å›¾æ ‡åº•è‰²æ¸å˜ï¼ˆTailwind） */
  gradient: string;
  /** æ•°å€¼é¢œè‰²ï¼ˆTailwind） */
  color: string;
  /** å¡ç‰‡å½’属的菜单（路由 name），关着就不用展示 */
  menu: string;
  /** èœå•å¯¹åº”的查询权限码，没有按钮权限的菜单留空 */
  permission?: string;
  /** å–数方法 */
  load: () => Promise<number>;
}

/** æŸ¥è¯¢å‚数：只要 total，分页大小取 1，避免拉回整页明细 */
const pageParam = { pageNo: 1, pageSize: 1 };

/** ä»Žåˆ†é¡µç»“果里取总数 */
async function totalOf(promise: Promise<{ total?: number }>) {
  const result = await promise;
  return result.total ?? 0;
}

/** ä»“储物流 */
const WAREHOUSE_CARDS: StatCard[] = [
  {
    color: 'text-amber-600 dark:text-amber-400',
    gradient: 'from-amber-500 to-yellow-400',
    hint: '仓储物流 Â· åº“存现有量',
    icon: 'lucide:package-search',
    label: '库存物料',
    load: () => totalOf(getMaterialStockPage(pageParam)),
    menu: 'MesWmMaterialStock',
    permission: 'mes:wm-material-stock:query',
    unit: '条',
  },
  {
    color: 'text-blue-600 dark:text-blue-400',
    gradient: 'from-blue-500 to-indigo-400',
    hint: '仓储物流 Â· ä»“库设置',
    icon: 'lucide:warehouse',
    label: '仓库数量',
    load: () => totalOf(getWarehousePage(pageParam)),
    menu: 'MesWmWarehouse',
    permission: 'mes:wm-warehouse:query',
    unit: '个',
  },
  {
    color: 'text-cyan-600 dark:text-cyan-400',
    gradient: 'from-cyan-500 to-teal-400',
    hint: '仓储物流 Â· é‡‡è´­å…¥åº“',
    icon: 'lucide:package-open',
    label: '采购入库单',
    load: () => totalOf(getItemReceiptPage(pageParam)),
    menu: 'MesWmItemReceipt',
    permission: 'mes:wm-item-receipt:query',
    unit: '笔',
  },
  {
    color: 'text-violet-600 dark:text-violet-400',
    gradient: 'from-violet-500 to-purple-400',
    hint: '仓储物流 Â· ç”Ÿäº§é¢†æ–™',
    icon: 'lucide:package',
    label: '生产领料单',
    load: () => totalOf(getProductIssuePage(pageParam)),
    menu: 'MesWmProductIssue',
    permission: 'mes:wm-product-issue:query',
    unit: '笔',
  },
];

/** äººåŠ›èµ„源 */
const HR_CARDS: StatCard[] = [
  {
    color: 'text-emerald-600 dark:text-emerald-400',
    gradient: 'from-emerald-500 to-green-400',
    hint: '人力资源 Â· å‘˜å·¥ç®¡ç†',
    icon: 'lucide:users',
    label: '员工总数',
    load: () => totalOf(getEmployeePage(pageParam)),
    menu: 'HrmEmployee',
    permission: 'hrm:employee:query',
    unit: '人',
  },
  {
    color: 'text-orange-600 dark:text-orange-400',
    gradient: 'from-orange-500 to-amber-400',
    hint: '人力资源 Â· è¯·å‡ç”³è¯·',
    icon: 'lucide:calendar-range',
    label: '请假申请',
    load: () => totalOf(getLeavePage(pageParam)),
    menu: 'HrmLeaveApplication',
    permission: 'hrm:leave:query',
    unit: '单',
  },
  {
    color: 'text-rose-600 dark:text-rose-400',
    gradient: 'from-rose-500 to-pink-400',
    hint: '人力资源 Â· è€ƒå‹¤å¼‚常',
    icon: 'lucide:circle-alert',
    label: '考勤异常',
    load: () => totalOf(getAttendanceExceptionPage(pageParam)),
    menu: 'HrmAttendanceException',
    unit: '条',
  },
  {
    color: 'text-fuchsia-600 dark:text-fuchsia-400',
    gradient: 'from-fuchsia-500 to-pink-400',
    hint: '人力资源 Â· è–ªèµ„发放',
    icon: 'lucide:wallet',
    label: '薪资发放单',
    load: () => totalOf(getSalaryPaymentPage(pageParam)),
    menu: 'HrmSalaryPayment',
    unit: '单',
  },
];

const { canQuery, canSeeMenu } = useHomeAccess();

/** èœå•å¼€ç€ï¼ˆæœ‰æŸ¥è¯¢æŒ‰é’®æƒé™æ—¶ä¸€å¹¶æ ¡éªŒï¼‰æ‰å±•ç¤ºè¿™å¼ å¡ */
function isVisible(card: StatCard) {
  return (
    canSeeMenu(card.menu) && (!card.permission || canQuery(card.permission))
  );
}

const warehouseCards = computed(() => WAREHOUSE_CARDS.filter(isVisible));
const hrCards = computed(() => HR_CARDS.filter(isVisible));

/** æŒ‰åˆ†ç»„渲染，分组内无卡片时整组不渲染 */
const groups = computed(() =>
  [
    { cards: warehouseCards.value, title: '仓储物流' },
    { cards: hrCards.value, title: '人力资源' },
  ].filter((group) => group.cards.length > 0),
);

const values = ref<Record<string, number>>({});

/** å¹¶å‘拉取所有可见卡片的统计值，单张失败只影响它自己 */
async function loadValues() {
  const cards = [...warehouseCards.value, ...hrCards.value];
  await Promise.all(
    cards.map(async (card) => {
      try {
        values.value[card.label] = await card.load();
      } catch {
        /* æ— æƒé™æˆ–接口异常时保持 0 */
      }
    }),
  );
}

/** 3D å€¾æ–œ */
const tilts = ref<Record<string, { x: number; y: number }>>({});

function onMouseMove(e: MouseEvent, label: string) {
  const el = e.currentTarget as HTMLElement;
  const rect = el.getBoundingClientRect();
  const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
  const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
  tilts.value[label] = { x: x * -5, y: y * 5 };
}

function onMouseLeave(label: string) {
  tilts.value[label] = { x: 0, y: 0 };
}

function tiltStyle(label: string) {
  const t = tilts.value[label] ?? { x: 0, y: 0 };
  return {
    transform: `perspective(500px) rotateX(${t.y}deg) rotateY(${t.x}deg)`,
    transition:
      t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
  };
}

onMounted(() => {
  loadValues();
});
</script>

<template>
  <template v-for="group in groups" :key="group.title">
    <h3
      class="mb-3 text-base font-semibold text-gray-800 dark:text-gray-100"
    >
      {{ group.title }}
    </h3>
    <Row :gutter="16">
      <Col
        v-for="card in group.cards"
        :key="card.label"
        :lg="6"
        :md="12"
        :sm="12"
        :xl="6"
        :xs="24"
        class="mb-4"
      >
        <div
          class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
          :style="tiltStyle(card.label)"
          @mousemove="(e: MouseEvent) => onMouseMove(e, card.label)"
          @mouseleave="onMouseLeave(card.label)"
          @click="emit('navigate', card.menu)"
        >
          <div class="relative z-10 flex items-center gap-4 p-5">
            <div
              class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br shadow-lg transition-transform duration-300 group-hover:scale-110"
              :class="card.gradient"
            >
              <IconifyIcon class="size-6 text-white" :icon="card.icon" />
            </div>
            <div class="min-w-0 flex-1">
              <div
                class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400"
              >
                {{ card.label }}
              </div>
              <div class="flex items-baseline gap-1">
                <CountTo
                  class="text-2xl font-bold leading-tight"
                  :class="card.color"
                  :end-val="values[card.label] ?? 0"
                  :duration="1200"
                />
                <span class="text-xs text-gray-400">{{ card.unit }}</span>
              </div>
              <div class="mt-1 text-xs text-gray-400">{{ card.hint }}</div>
            </div>
          </div>
          <div
            class="absolute inset-0 -z-0 bg-gradient-to-br from-gray-500/5 to-gray-400/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
          />
          <div
            class="absolute -right-6 -top-6 size-24 rounded-full bg-gray-400/10 blur-xl transition-all duration-300 group-hover:scale-150"
          />
        </div>
      </Col>
    </Row>
  </template>
</template>

<style scoped>
.glass-tilt {
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.04),
    0 1px 4px rgba(0,0,0,0.02),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transform-style: preserve-3d;
}

.dark .glass-tilt {
  background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.3),
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
</style>