<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 { getProblemPage } from '#/api/aftersales/problem';
|
import { getReturnPage } from '#/api/aftersales/return';
|
import { getTicketPage } from '#/api/aftersales/ticket';
|
import { getOvertimeWageConfigList } from '#/api/hrm/salary/overtime-wage';
|
|
defineOptions({ name: 'DashboardBizCards' });
|
|
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: 'ticket', title: '售后工单', path: '/aftersales/ticket', unit: '单', desc: '售后管理', icon: 'lucide:wrench', gradient: 'from-cyan-500 to-teal-400', shadow: 'shadow-cyan-500/25', textColor: 'text-cyan-600 dark:text-cyan-400' },
|
{ id: 'return', title: '退货申请', path: '/aftersales/return', unit: '单', desc: '售后管理', icon: 'lucide:undo-2', gradient: 'from-pink-500 to-rose-400', shadow: 'shadow-pink-500/25', textColor: 'text-pink-600 dark:text-pink-400' },
|
{ id: 'problem', title: '问题库', path: '/aftersales/problem', unit: '条', desc: '售后管理', icon: 'lucide:book-open', gradient: 'from-amber-500 to-yellow-400', shadow: 'shadow-amber-500/25', textColor: 'text-amber-600 dark:text-amber-400' },
|
{ id: 'overtimeWage', title: '加班工资管理', path: '/hrm/salary/overtime-wage', unit: '项', desc: '薪酬管理', icon: 'lucide:clock', gradient: 'from-indigo-500 to-blue-400', shadow: 'shadow-indigo-500/25', textColor: 'text-indigo-600 dark:text-indigo-400' },
|
];
|
|
const counts = ref<Record<string, number>>({ ticket: 0, return: 0, problem: 0, overtimeWage: 0 });
|
|
async function load() {
|
try { counts.value.ticket = (await getTicketPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
|
try { counts.value.return = (await getReturnPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
|
try { counts.value.problem = (await getProblemPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
|
try { counts.value.overtimeWage = (await getOvertimeWageConfigList()).length ?? 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 * -5, y: y * 5 };
|
}
|
|
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(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(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-pink-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>
|
