feat(dashboard): 首页卡片改回「带数量」的原格式（人力资源4 + 售后/薪酬4）

tuqin

12 小时以前 c4ea28992abcec98e5464ab714a32df978b3ff33

 src/views/dashboard/analytics/modules/kpi-cards.vue

@@ -1,9 +1,15 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { onMounted, ref } from 'vue';

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

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

import { getAttendanceRecordPage } from '#/api/hrm/attendance/record';
import { getEmployeePage } from '#/api/hrm/employee';
import { getEmployeeContractPage } from '#/api/hrm/employee/contract';
import { getSalaryCalculationPage } from '#/api/hrm/salary/calculation';

defineOptions({ name: 'DashboardKpiCards' });

@@ -14,21 +20,31 @@
interface ModuleCard {
  id: string;
  title: string;
  desc: string;
  path: string;
  unit: string;
  desc: string;
  icon: string;
  gradient: string;
  shadow: string;
  textColor: string;
}

/** 人力资源模块入口 */
/** 人力资源模块 */
const cards: ModuleCard[] = [
  { id: 'employee', title: '员工管理', desc: '人力资源', path: '/hrm/employee', icon: 'lucide:users', gradient: 'from-blue-500 to-cyan-400', shadow: 'shadow-blue-500/25', textColor: 'text-blue-600 dark:text-blue-400' },
  { id: 'contract', title: '员工合同', desc: '人力资源', path: '/hrm/employee-contract', icon: 'lucide:file-signature', gradient: 'from-emerald-500 to-green-400', shadow: 'shadow-emerald-500/25', textColor: 'text-emerald-600 dark:text-emerald-400' },
  { id: 'attendance', title: '考勤管理', desc: '人力资源', path: '/hrm/attendance/rule', icon: 'lucide:calendar-check', gradient: 'from-orange-500 to-amber-400', shadow: 'shadow-orange-500/25', textColor: 'text-orange-600 dark:text-orange-400' },
  { id: 'salary', title: '薪酬管理', desc: '人力资源', path: '/hrm/salary/calculation', icon: 'lucide:wallet', gradient: 'from-violet-500 to-purple-400', shadow: 'shadow-violet-500/25', textColor: 'text-violet-600 dark:text-violet-400' },
  { id: 'employee', title: '员工管理', path: '/hrm/employee', unit: '人', desc: '在册员工', icon: 'lucide:users', gradient: 'from-blue-500 to-cyan-400', shadow: 'shadow-blue-500/25', textColor: 'text-blue-600 dark:text-blue-400' },
  { id: 'contract', title: '员工合同', path: '/hrm/employee-contract', unit: '份', desc: '签约合同', icon: 'lucide:file-signature', gradient: 'from-emerald-500 to-green-400', shadow: 'shadow-emerald-500/25', textColor: 'text-emerald-600 dark:text-emerald-400' },
  { id: 'attendance', title: '考勤管理', path: '/hrm/attendance/rule', unit: '条', desc: '考勤记录', icon: 'lucide:calendar-check', gradient: 'from-orange-500 to-amber-400', shadow: 'shadow-orange-500/25', textColor: 'text-orange-600 dark:text-orange-400' },
  { id: 'salary', title: '薪酬管理', path: '/hrm/salary/calculation', unit: '单', desc: '薪酬核算', icon: 'lucide:wallet', gradient: 'from-violet-500 to-purple-400', shadow: 'shadow-violet-500/25', textColor: 'text-violet-600 dark:text-violet-400' },
];

const counts = ref<Record<string, number>>({ employee: 0, contract: 0, attendance: 0, salary: 0 });

async function load() {
  try { counts.value.employee = (await getEmployeePage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
  try { counts.value.contract = (await getEmployeeContractPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
  try { counts.value.attendance = (await getAttendanceRecordPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
  try { counts.value.salary = (await getSalaryCalculationPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
}

/** 3D 倾斜效果 */
interface TiltState { x: number; y: number }
@@ -53,6 +69,8 @@
    transition: t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
  };
}

onMounted(load);
</script>

<template>
@@ -70,9 +88,12 @@
            <IconifyIcon class="size-6 text-white" :icon="c.icon" />
          </div>
          <div class="min-w-0 flex-1">
            <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.desc }}</div>
            <div class="text-2xl font-bold leading-tight" :class="c.textColor">{{ c.title }}</div>
            <div class="mt-1 text-xs text-gray-400">点击进入</div>
            <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.title }}</div>
            <div class="flex items-baseline gap-1">
              <CountTo class="text-2xl font-bold leading-tight" :class="c.textColor" :end-val="counts[c.id]" :duration="1200" />
              <span class="text-xs text-gray-400">{{ c.unit }}</span>
            </div>
            <div class="mt-1 text-xs text-gray-400">{{ c.desc }}</div>
          </div>
        </div>
        <div class="absolute -right-6 -top-6 size-24 rounded-full bg-blue-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />