feat(ui): 江苏商贸品牌视觉与首页/登录页改版

liu

2026-09-29 982c97ab82f3beb1b4febcf014562eda34b9fc05

 src/views/dashboard/analytics/modules/quick-actions.vue

@@ -11,62 +11,125 @@
  title: string;
  icon: string;
  route: string;
  gradient: string;
  shadow: string;
}

/** 快捷入口：对应系统实际菜单（审批中心 / 课题管理 / 财务报销 / 通知公告） */
const actions: QuickAction[] = [
  { title: '生产工单', icon: 'lucide:file-text', route: 'MesProWorkOrder', gradient: 'from-blue-500 to-cyan-500', shadow: 'shadow-blue-500/15' },
  { title: '生产报工', icon: 'lucide:check-square', route: 'MesProFeedback', gradient: 'from-emerald-500 to-green-500', shadow: 'shadow-emerald-500/15' },
  { title: '质检管理', icon: 'lucide:clipboard-check', route: 'MesQcRecord', gradient: 'from-orange-500 to-amber-500', shadow: 'shadow-orange-500/15' },
  { title: '设备点检', icon: 'lucide:settings', route: 'MesDvMachinery', gradient: 'from-violet-500 to-purple-500', shadow: 'shadow-violet-500/15' },
  { title: '生产排程', icon: 'lucide:calendar-range', route: 'MesProScheduling', gradient: 'from-cyan-500 to-teal-500', shadow: 'shadow-cyan-500/15' },
  { title: '物料库存', icon: 'lucide:package-search', route: 'WlsMaterialStock', gradient: 'from-indigo-500 to-blue-500', shadow: 'shadow-indigo-500/15' },
  { title: '工艺路线', icon: 'lucide:route', route: 'MesPdRouting', gradient: 'from-teal-500 to-emerald-500', shadow: 'shadow-teal-500/15' },
  { title: '数据报表', icon: 'lucide:bar-chart-big', route: 'MesHomeIndex', gradient: 'from-pink-500 to-rose-500', shadow: 'shadow-pink-500/15' },
  { 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="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 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="group flex cursor-pointer flex-col items-center gap-2 rounded-xl p-3 transition-all duration-300 hover:-translate-y-1"
        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="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]"
          class="elite-icon flex size-10 items-center justify-center rounded-xl transition-shadow duration-300"
        >
          <IconifyIcon :icon="action.icon" class="size-5 text-white" />
          <IconifyIcon :icon="action.icon" class="size-5 text-[#e3c567]" />
        </div>
        <span class="text-xs font-medium text-gray-600 dark:text-gray-400">{{ action.title }}</span>
        <span class="elite-action-label">{{ 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);
.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;
}

.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);
.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 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);
    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>