<script lang="ts" setup>
|
import { IconifyIcon } from '@vben/icons';
|
|
defineOptions({ name: 'DashboardQuickActions' });
|
|
const emit = defineEmits<{
|
navigate: [name: string];
|
}>();
|
|
interface QuickAction {
|
title: string;
|
icon: string;
|
route: string;
|
}
|
|
/** 快捷入口：对应系统实际菜单（审批中心 / 课题管理 / 财务报销 / 通知公告） */
|
const actions: QuickAction[] = [
|
{ title: '发起流程', icon: 'lucide:circle-plus', route: 'BpmProcessInstanceCreate' },
|
{ title: '待办任务', icon: 'lucide:list-todo', route: 'BpmTaskTodo' },
|
{ title: '已办任务', icon: 'lucide:circle-check-big', route: 'BpmTaskDone' },
|
{ title: '我的流程', icon: 'lucide:git-branch', route: 'BpmProcessInstance' },
|
{ title: '课题申报', icon: 'lucide:file-text', route: 'ResearchApplication' },
|
{ title: '课题指南', icon: 'lucide:book-open', route: 'ResearchGuideline' },
|
{ title: '财务报销', icon: 'lucide:receipt', route: 'FinanceReimbursement' },
|
{ title: '通知公告', icon: 'lucide:bell', route: 'BpmOaNotice' },
|
];
|
</script>
|
|
<template>
|
<div class="elite-card p-5">
|
<div class="elite-head">
|
<h3 class="elite-title">
|
<span class="elite-bar"></span>
|
快捷入口
|
</h3>
|
</div>
|
<div class="grid grid-cols-4 gap-3">
|
<div
|
v-for="action in actions"
|
:key="action.route"
|
class="elite-action group flex cursor-pointer flex-col items-center gap-2 rounded-xl p-3 transition-colors duration-300"
|
@click="emit('navigate', action.route)"
|
>
|
<div
|
class="elite-icon flex size-10 items-center justify-center rounded-xl transition-shadow duration-300"
|
>
|
<IconifyIcon :icon="action.icon" class="size-5 text-[#e3c567]" />
|
</div>
|
<span class="elite-action-label">{{ action.title }}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.elite-card {
|
background: #fdfcfa;
|
border: 1px solid rgba(212, 175, 55, 0.22);
|
border-radius: 14px;
|
box-shadow: 0 2px 14px rgba(15, 36, 64, 0.05);
|
transition:
|
border-color 0.3s ease,
|
box-shadow 0.3s ease;
|
}
|
|
.elite-card:hover {
|
border-color: rgba(212, 175, 55, 0.5);
|
box-shadow: 0 6px 20px rgba(15, 36, 64, 0.09);
|
}
|
|
.dark .elite-card {
|
background: #101a2b;
|
border-color: rgba(212, 175, 55, 0.2);
|
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
|
}
|
|
.elite-head {
|
display: flex;
|
align-items: center;
|
margin-bottom: 16px;
|
}
|
|
.elite-title {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
margin: 0;
|
font-size: 15px;
|
font-weight: 600;
|
letter-spacing: 1px;
|
color: #0f2440;
|
}
|
|
.dark .elite-title {
|
color: #f0ead8;
|
}
|
|
.elite-bar {
|
display: inline-block;
|
width: 3px;
|
height: 15px;
|
border-radius: 2px;
|
background: linear-gradient(180deg, #e3c567, #b8901f);
|
}
|
|
/* 图标底：藏青渐变 + 金色图标 */
|
.elite-icon {
|
color: #e3c567;
|
background: linear-gradient(135deg, #1e4571, #0f2440);
|
border: 1px solid rgba(212, 175, 55, 0.3);
|
box-shadow: 0 4px 12px rgba(15, 36, 64, 0.18);
|
}
|
|
/* 悬停只提亮金色描边，不做位移 */
|
.elite-action:hover .elite-icon {
|
box-shadow:
|
0 0 0 1px rgba(212, 175, 55, 0.7),
|
0 4px 14px rgba(15, 36, 64, 0.22);
|
}
|
|
.elite-action-label {
|
font-size: 12px;
|
font-weight: 500;
|
letter-spacing: 0.5px;
|
color: #8a94a6;
|
}
|
|
.elite-action:hover .elite-action-label {
|
color: #b8901f;
|
}
|
|
.dark .elite-action:hover .elite-action-label {
|
color: #e3c567;
|
}
|
</style>
|
