<script lang="ts" setup>
|
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' });
|
|
const emit = defineEmits<{
|
navigate: [path: string];
|
}>();
|
|
interface ModuleCard {
|
id: string;
|
title: string;
|
path: string;
|
unit: string;
|
desc: string;
|
icon: string;
|
gradient: string;
|
shadow: string;
|
textColor: string;
|
}
|
|
/** 人力资源模块 */
|
const cards: ModuleCard[] = [
|
{ 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 }
|
const tilts = ref<Record<string, TiltState>>({});
|
|
function onMouseMove(e: MouseEvent, id: 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[id] = { x: x * -6, y: y * 6 };
|
}
|
|
function onMouseLeave(id: string) {
|
tilts.value[id] = { x: 0, y: 0 };
|
}
|
|
function tiltStyle(id: string) {
|
const t = tilts.value[id] ?? { x: 0, y: 0 };
|
return {
|
transform: `perspective(600px) rotateX(${t.y}deg) rotateY(${t.x}deg)`,
|
transition: t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
|
};
|
}
|
|
onMounted(load);
|
</script>
|
|
<template>
|
<Row :gutter="16">
|
<Col v-for="c in cards" :key="c.id" :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(c.id)"
|
@mousemove="(e: MouseEvent) => onMouseMove(e, c.id)"
|
@mouseleave="onMouseLeave(c.id)"
|
@click="emit('navigate', c.path)"
|
>
|
<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 transition-transform duration-300 group-hover:scale-110" :class="[c.gradient, c.shadow]">
|
<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.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" />
|
</div>
|
</Col>
|
</Row>
|
</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 1px 4px rgba(0,0,0,0.2),
|
inset 0 1px 0 rgba(255,255,255,0.05);
|
}
|
</style>
|
