1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
| <script lang="ts" setup>
| import { IconifyIcon } from '@vben/icons';
|
| defineOptions({ name: 'DashboardQuickActions' });
|
| const emit = defineEmits<{
| navigate: [path: string];
| }>();
|
| interface QuickAction {
| title: string;
| icon: string;
| path: string;
| gradient: string;
| shadow: string;
| }
|
| const actions: QuickAction[] = [
| { title: '员工管理', icon: 'lucide:users', path: '/hrm/employee', gradient: 'from-blue-500 to-cyan-500', shadow: 'shadow-blue-500/15' },
| { title: '员工合同', icon: 'lucide:file-signature', path: '/hrm/employee-contract', gradient: 'from-emerald-500 to-green-500', shadow: 'shadow-emerald-500/15' },
| { title: '考勤管理', icon: 'lucide:calendar-check', path: '/hrm/attendance/rule', gradient: 'from-orange-500 to-amber-500', shadow: 'shadow-orange-500/15' },
| { title: '薪酬管理', icon: 'lucide:wallet', path: '/hrm/salary/calculation', gradient: 'from-violet-500 to-purple-500', shadow: 'shadow-violet-500/15' },
| { title: '加班工资管理', icon: 'lucide:clock', path: '/hrm/salary/overtime-wage', gradient: 'from-cyan-500 to-teal-500', shadow: 'shadow-cyan-500/15' },
| { title: '售后工单', icon: 'lucide:wrench', path: '/aftersales/ticket', gradient: 'from-indigo-500 to-blue-500', shadow: 'shadow-indigo-500/15' },
| { title: '退货申请', icon: 'lucide:undo-2', path: '/aftersales/return', gradient: 'from-pink-500 to-rose-500', shadow: 'shadow-pink-500/15' },
| { title: '问题库', icon: 'lucide:book-open', path: '/aftersales/problem', gradient: 'from-teal-500 to-emerald-500', shadow: 'shadow-teal-500/15' },
| ];
| </script>
|
| <template>
| <div class="glass-card rounded-2xl p-5">
| <h3 class="mb-4 text-sm font-semibold text-gray-800 dark:text-gray-100">快捷操作</h3>
| <div class="grid grid-cols-4 gap-3 sm:grid-cols-8">
| <div
| v-for="action in actions"
| :key="action.path"
| class="group flex cursor-pointer flex-col items-center gap-2 rounded-xl p-3 transition-all duration-300 hover:-translate-y-1"
| @click="emit('navigate', action.path)"
| >
| <div
| class="flex size-10 items-center justify-center rounded-xl bg-gradient-to-br transition-shadow duration-300 group-hover:shadow-lg"
| :class="[action.gradient, action.shadow]"
| >
| <IconifyIcon :icon="action.icon" class="size-5 text-white" />
| </div>
| <span class="text-xs font-medium text-gray-600 dark:text-gray-400">{{ action.title }}</span>
| </div>
| </div>
| </div>
| </template>
|
| <style scoped>
| .glass-card {
| 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);
| }
|
| .dark .glass-card {
| 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.04);
| }
| </style>
|
|
