feat(dashboard): 首页改为「人力资源+售后管理」模块入口

tuqin

16 小时以前 52d8fdefc85591abe9ee6c8cd382f91698013ebf

feat(dashboard): 首页改为「人力资源+售后管理」模块入口

- 4 张卡=人力资源(员工管理/员工合同/考勤管理/薪酬管理)；3 张卡=售后管理(售后工单/退货申请/问题库)
- 快捷操作改为 HR+售后 8 个入口；去掉生产/采购/AI/趋势等无关内容

 src/views/dashboard/analytics/index.vue

@@ -1,25 +1,16 @@
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { computed } from 'vue';
import { useRouter } from 'vue-router';

import { Page } from '@vben/common-ui';

import { Card, Col, Row } from 'ant-design-vue';

import { getHomeSummary } from '#/api/mes/home';

import { defaultSummary } from './data';
import AiInsights from './modules/ai-insights.vue';
import AlertPanel from './modules/alert-panel.vue';
import BizCards from './modules/biz-cards.vue';
import KpiCards from './modules/kpi-cards.vue';
import ProductionTrend from './modules/production-trend.vue';
import QuickActions from './modules/quick-actions.vue';

defineOptions({ name: 'DashboardAnalytics' });

const router = useRouter();
const summary = ref(defaultSummary);

const greeting = computed(() => {
  const hour = new Date().getHours();
@@ -37,17 +28,9 @@
  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 星期${weekNames[d.getDay()]}`;
});

function handleNavigate(name: string) {
  router.push({ name });
function handleNavigate(path: string) {
  router.push(path);
}

async function loadSummary() {
  summary.value = await getHomeSummary();
}

onMounted(() => {
  loadSummary();
});
</script>

<template>
@@ -71,42 +54,14 @@
      </div>
    </div>

    <!-- MES 生产 KPI -->
    <KpiCards :summary="summary" @navigate="handleNavigate" />
    <!-- 人力资源模块 -->
    <KpiCards @navigate="handleNavigate" />

    <!-- ERP/WMS/BPM 经营 KPI -->
    <!-- 售后管理模块 -->
    <BizCards @navigate="handleNavigate" />

    <!-- AI 智能分析 -->
    <AiInsights
      :active-order-count="summary.workOrderActiveCount"
      @navigate="handleNavigate"
    />

    <!-- 生产趋势 + 预警面板 -->
    <Row :gutter="16" class="mb-4">
      <Col :lg="14" :md="24" :sm="24" :xl="14" :xs="24" class="mb-4">
        <div class="glass-card rounded-2xl p-5">
          <h3 class="mb-4 text-base font-semibold text-gray-800 dark:text-gray-100">
            生产趋势（近7天）
          </h3>
          <ProductionTrend />
        </div>
      </Col>
      <Col :lg="10" :md="24" :sm="24" :xl="10" :xs="24" class="mb-4">
        <AlertPanel
          :repair-active-count="summary.repairActiveCount"
          @navigate="handleNavigate"
        />
      </Col>
    </Row>

    <!-- 快捷操作 -->
    <Row :gutter="16" class="mb-4">
      <Col :span="24">
        <QuickActions @navigate="handleNavigate" />
      </Col>
    </Row>
  </Page>
</template>


 src/views/dashboard/analytics/modules/biz-cards.vue

@@ -1,54 +1,33 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { ref } from 'vue';

import { CountTo } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { Col, Row } from 'ant-design-vue';

import { getPurchaseOrderPage } from '#/api/erp/purchase/order';
import { getSaleOrderPage } from '#/api/erp/sale/order';
import { getMaterialStockPage } from '#/api/mes/wm/materialstock';
import { getTaskTodoPage } from '#/api/bpm/task';

defineOptions({ name: 'DashboardBizCards' });

const emit = defineEmits<{
  navigate: [name: string];
  navigate: [path: string];
}>();

const purchaseCount = ref(0);
const saleCount = ref(0);
const stockCount = ref(0);
const bpmTodoCount = ref(0);

async function loadPurchase() {
  try {
    const result = await getPurchaseOrderPage({ pageNo: 1, pageSize: 1 });
    purchaseCount.value = result.total ?? 0;
  } catch { /* 无权限或接口异常 */ }
interface ModuleCard {
  id: string;
  title: string;
  desc: string;
  path: string;
  icon: string;
  gradient: string;
  shadow: string;
  textColor: string;
}

async function loadSale() {
  try {
    const result = await getSaleOrderPage({ pageNo: 1, pageSize: 1 });
    saleCount.value = result.total ?? 0;
  } catch { /* 无权限或接口异常 */ }
}

async function loadStock() {
  try {
    const result = await getMaterialStockPage({ pageNo: 1, pageSize: 1 });
    stockCount.value = result.total ?? 0;
  } catch { /* 无权限或接口异常 */ }
}

async function loadBpmTodo() {
  try {
    const result = await getTaskTodoPage({ pageNo: 1, pageSize: 1 });
    bpmTodoCount.value = result.total ?? 0;
  } catch { /* 无权限或接口异常 */ }
}
/** 售后管理模块入口 */
const cards: ModuleCard[] = [
  { id: 'ticket', title: '售后工单', desc: '售后管理', path: '/aftersales/ticket', 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: '退货申请', desc: '售后管理', path: '/aftersales/return', 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: '问题库', desc: '售后管理', path: '/aftersales/problem', icon: 'lucide:book-open', gradient: 'from-amber-500 to-yellow-400', shadow: 'shadow-amber-500/25', textColor: 'text-amber-600 dark:text-amber-400' },
];

/** 3D 倾斜 */
interface TiltState { x: number; y: number }
@@ -73,122 +52,29 @@
    transition: t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
  };
}

onMounted(() => {
  loadPurchase();
  loadSale();
  loadStock();
  loadBpmTodo();
});
</script>

<template>
  <Row :gutter="16">
    <!-- 采购订单 -->
    <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
    <Col v-for="c in cards" :key="c.id" :lg="8" :md="8" :sm="12" :xl="8" :xs="24" class="mb-4">
      <div
        class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
        :style="tiltStyle('purchase')"
        @mousemove="(e: MouseEvent) => onMouseMove(e, 'purchase')"
        @mouseleave="onMouseLeave('purchase')"
        @click="emit('navigate', 'ErpPurchaseOrder')"
        :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 from-cyan-500 to-teal-400 shadow-lg shadow-cyan-500/25 transition-transform duration-300 group-hover:scale-110">
            <IconifyIcon class="size-6 text-white" icon="lucide:shopping-cart" />
          <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">采购订单</div>
            <div class="flex items-baseline gap-1">
              <CountTo class="text-2xl font-bold leading-tight text-cyan-600 dark:text-cyan-400" :end-val="purchaseCount" :duration="1200" />
              <span class="text-xs text-gray-400">笔</span>
            </div>
            <div class="mt-1 text-xs text-gray-400">ERP 采购管理</div>
            <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.desc }}</div>
            <div class="text-2xl font-bold leading-tight" :class="c.textColor">{{ c.title }}</div>
            <div class="mt-1 text-xs text-gray-400">点击进入</div>
          </div>
        </div>
        <div class="absolute inset-0 -z-0 bg-gradient-to-br from-cyan-500/5 to-teal-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        <div class="absolute -right-6 -top-6 size-24 rounded-full bg-cyan-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
      </div>
    </Col>

    <!-- 销售订单 -->
    <Col :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('sale')"
        @mousemove="(e: MouseEvent) => onMouseMove(e, 'sale')"
        @mouseleave="onMouseLeave('sale')"
        @click="emit('navigate', 'ErpSaleOrder')"
      >
        <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 from-pink-500 to-rose-400 shadow-lg shadow-pink-500/25 transition-transform duration-300 group-hover:scale-110">
            <IconifyIcon class="size-6 text-white" icon="lucide:trending-up" />
          </div>
          <div class="min-w-0 flex-1">
            <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">销售订单</div>
            <div class="flex items-baseline gap-1">
              <CountTo class="text-2xl font-bold leading-tight text-pink-600 dark:text-pink-400" :end-val="saleCount" :duration="1200" />
              <span class="text-xs text-gray-400">笔</span>
            </div>
            <div class="mt-1 text-xs text-gray-400">ERP 销售管理</div>
          </div>
        </div>
        <div class="absolute inset-0 -z-0 bg-gradient-to-br from-pink-500/5 to-rose-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        <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>

    <!-- 物料库存 -->
    <Col :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('stock')"
        @mousemove="(e: MouseEvent) => onMouseMove(e, 'stock')"
        @mouseleave="onMouseLeave('stock')"
        @click="emit('navigate', 'MesWmMaterialStock')"
      >
        <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 from-amber-500 to-yellow-400 shadow-lg shadow-amber-500/25 transition-transform duration-300 group-hover:scale-110">
            <IconifyIcon class="size-6 text-white" icon="lucide:package-search" />
          </div>
          <div class="min-w-0 flex-1">
            <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">物料库存</div>
            <div class="flex items-baseline gap-1">
              <CountTo class="text-2xl font-bold leading-tight text-amber-600 dark:text-amber-400" :end-val="stockCount" :duration="1200" />
              <span class="text-xs text-gray-400">条</span>
            </div>
            <div class="mt-1 text-xs text-gray-400">MES 库存台账</div>
          </div>
        </div>
        <div class="absolute inset-0 -z-0 bg-gradient-to-br from-amber-500/5 to-yellow-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        <div class="absolute -right-6 -top-6 size-24 rounded-full bg-amber-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
      </div>
    </Col>

    <!-- BPM 待办 -->
    <Col :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('bpm')"
        @mousemove="(e: MouseEvent) => onMouseMove(e, 'bpm')"
        @mouseleave="onMouseLeave('bpm')"
        @click="emit('navigate', 'BpmTaskTodo')"
      >
        <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 from-red-500 to-rose-400 shadow-lg shadow-red-500/25 transition-transform duration-300 group-hover:scale-110">
            <IconifyIcon class="size-6 text-white" icon="lucide:clipboard-check" />
          </div>
          <div class="min-w-0 flex-1">
            <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">我的待办</div>
            <div class="flex items-baseline gap-1">
              <CountTo class="text-2xl font-bold leading-tight text-red-600 dark:text-red-400" :end-val="bpmTodoCount" :duration="1200" />
              <span class="text-xs text-gray-400">项</span>
            </div>
            <div class="mt-1 text-xs text-gray-400">BPM 待审批</div>
          </div>
        </div>
        <div class="absolute inset-0 -z-0 bg-gradient-to-br from-red-500/5 to-rose-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        <div class="absolute -right-6 -top-6 size-24 rounded-full bg-red-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
      </div>
    </Col>
  </Row>
@@ -213,6 +99,6 @@
  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);
    inset 0 1px 0 rgba(255,255,255,0.05);
}
</style>

 src/views/dashboard/analytics/modules/kpi-cards.vue

@@ -1,38 +1,37 @@
<script lang="ts" setup>
import type { MesHomeApi } from '#/api/mes/home';
import { ref } from 'vue';

import { computed, ref } from 'vue';

import { CountTo } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { Col, Row } from 'ant-design-vue';

defineOptions({ name: 'DashboardKpiCards' });

const props = defineProps<{
  summary: MesHomeApi.Summary;
}>();

const emit = defineEmits<{
  navigate: [name: string];
  navigate: [path: string];
}>();

const qualityRate = computed(() => {
  const total =
    props.summary.todayQualifiedQuantity +
    props.summary.todayUnqualifiedQuantity;
  return total === 0 ? 0 : (props.summary.todayQualifiedQuantity / total) * 100;
});
interface ModuleCard {
  id: string;
  title: string;
  desc: string;
  path: string;
  icon: string;
  gradient: string;
  shadow: string;
  textColor: string;
}

const equipmentRate = computed(() => {
  if (props.summary.machineryTotal === 0) return 0;
  return (props.summary.machineryProducing / props.summary.machineryTotal) * 100;
});
/** 人力资源模块入口 */
const cards: ModuleCard[] = [
  { id: 'employee', title: '员工管理', desc: '人力资源', path: '/hrm/employee', 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: '员工合同', desc: '人力资源', path: '/hrm/employee-contract', 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: '考勤管理', desc: '人力资源', path: '/hrm/attendance/rule', 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: '薪酬管理', desc: '人力资源', path: '/hrm/salary/calculation', icon: 'lucide:wallet', gradient: 'from-violet-500 to-purple-400', shadow: 'shadow-violet-500/25', textColor: 'text-violet-600 dark:text-violet-400' },
];

/** 3D 倾斜效果 */
interface TiltState { x: number; y: number }

const tilts = ref<Record<string, TiltState>>({});

function onMouseMove(e: MouseEvent, id: string) {
@@ -58,129 +57,25 @@

<template>
  <Row :gutter="16">
    <!-- 生产订单 -->
    <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
    <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('order')"
        @mousemove="(e: MouseEvent) => onMouseMove(e, 'order')"
        @mouseleave="onMouseLeave('order')"
        @click="emit('navigate', 'MesProWorkOrder')"
        :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 from-blue-500 to-cyan-400 shadow-lg shadow-blue-500/25 transition-transform duration-300 group-hover:scale-110">
            <IconifyIcon class="size-6 text-white" icon="lucide:clipboard-list" />
          <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">生产订单</div>
            <div class="flex items-baseline gap-1">
              <CountTo class="text-2xl font-bold leading-tight text-blue-600 dark:text-blue-400" :end-val="summary.workOrderActiveCount" :duration="1200" />
              <span class="text-xs text-gray-400">进行中</span>
            </div>
            <div class="mt-1 flex items-center gap-1 text-xs text-gray-400">
              <span class="inline-block size-1.5 rounded-full bg-amber-400" /> 待排产 {{ summary.workOrderPrepareCount }}
              <span class="mx-1">|</span>
              <span class="inline-block size-1.5 rounded-full bg-emerald-400" /> 已完成 {{ summary.workOrderFinishedCount }}
            <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.desc }}</div>
            <div class="text-2xl font-bold leading-tight" :class="c.textColor">{{ c.title }}</div>
            <div class="mt-1 text-xs text-gray-400">点击进入</div>
            </div>
          </div>
        </div>
        <div class="absolute inset-0 -z-0 bg-gradient-to-br from-blue-500/5 to-cyan-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        <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>

    <!-- 今日产量 -->
    <Col :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('output')"
        @mousemove="(e: MouseEvent) => onMouseMove(e, 'output')"
        @mouseleave="onMouseLeave('output')"
        @click="emit('navigate', 'MesProFeedback')"
      >
        <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 from-emerald-500 to-green-400 shadow-lg shadow-emerald-500/25 transition-transform duration-300 group-hover:scale-110">
            <IconifyIcon class="size-6 text-white" icon="lucide:trending-up" />
          </div>
          <div class="min-w-0 flex-1">
            <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">今日产量</div>
            <div class="flex items-baseline gap-1">
              <CountTo class="text-2xl font-bold leading-tight text-emerald-600 dark:text-emerald-400" :end-val="summary.todayOutput" :duration="1200" />
              <span class="text-xs text-gray-400">件</span>
            </div>
            <div class="mt-1 text-xs text-gray-400">
              昨日 {{ summary.yesterdayOutput }} 件
              <span v-if="summary.yesterdayOutput > 0 && summary.todayOutput >= summary.yesterdayOutput" class="text-emerald-500">↑</span>
              <span v-else-if="summary.yesterdayOutput > 0" class="text-red-500">↓</span>
            </div>
          </div>
        </div>
        <div class="absolute inset-0 -z-0 bg-gradient-to-br from-emerald-500/5 to-green-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        <div class="absolute -right-6 -top-6 size-24 rounded-full bg-emerald-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
      </div>
    </Col>

    <!-- 质量合格率 -->
    <Col :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('quality')"
        @mousemove="(e: MouseEvent) => onMouseMove(e, 'quality')"
        @mouseleave="onMouseLeave('quality')"
        @click="emit('navigate', 'MesQcRecord')"
      >
        <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 from-orange-500 to-amber-400 shadow-lg shadow-orange-500/25 transition-transform duration-300 group-hover:scale-110">
            <IconifyIcon class="size-6 text-white" icon="lucide:shield-check" />
          </div>
          <div class="min-w-0 flex-1">
            <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">质量合格率</div>
            <div class="flex items-baseline gap-1">
              <CountTo
                class="text-2xl font-bold leading-tight"
                :class="qualityRate >= 95 ? 'text-emerald-600 dark:text-emerald-400' : qualityRate >= 80 ? 'text-orange-600 dark:text-orange-400' : 'text-red-600 dark:text-red-400'"
                :decimals="1" :end-val="qualityRate" :duration="1200"
              />
              <span class="text-xs text-gray-400">%</span>
            </div>
            <div class="mt-1 text-xs text-gray-400">
              合格 {{ summary.todayQualifiedQuantity }} | 不良 {{ summary.todayUnqualifiedQuantity }}
            </div>
          </div>
        </div>
        <div class="absolute inset-0 -z-0 bg-gradient-to-br from-orange-500/5 to-amber-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        <div class="absolute -right-6 -top-6 size-24 rounded-full bg-orange-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
      </div>
    </Col>

    <!-- 设备运行率 -->
    <Col :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('equip')"
        @mousemove="(e: MouseEvent) => onMouseMove(e, 'equip')"
        @mouseleave="onMouseLeave('equip')"
        @click="emit('navigate', 'MesDvMachinery')"
      >
        <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 from-violet-500 to-purple-400 shadow-lg shadow-violet-500/25 transition-transform duration-300 group-hover:scale-110">
            <IconifyIcon class="size-6 text-white" icon="lucide:cpu" />
          </div>
          <div class="min-w-0 flex-1">
            <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">设备运行率</div>
            <div class="flex items-baseline gap-1">
              <CountTo class="text-2xl font-bold leading-tight text-violet-600 dark:text-violet-400" :decimals="1" :end-val="equipmentRate" :duration="1200" />
              <span class="text-xs text-gray-400">%</span>
            </div>
            <div class="mt-1 flex items-center gap-1 text-xs text-gray-400">
              <span class="text-red-400">停机 {{ summary.machineryStop }}</span>
              <span class="mx-1">|</span>
              <span class="text-amber-400">维护 {{ summary.machineryMaintenance }}</span>
            </div>
          </div>
        </div>
        <div class="absolute inset-0 -z-0 bg-gradient-to-br from-violet-500/5 to-purple-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        <div class="absolute -right-6 -top-6 size-24 rounded-full bg-violet-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
      </div>
    </Col>
  </Row>
@@ -205,6 +100,6 @@
  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);
    inset 0 1px 0 rgba(255,255,255,0.05);
}
</style>

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

@@ -4,26 +4,26 @@
defineOptions({ name: 'DashboardQuickActions' });

const emit = defineEmits<{
  navigate: [name: string];
  navigate: [path: string];
}>();

interface QuickAction {
  title: string;
  icon: string;
  route: string;
  path: 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: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>

@@ -33,9 +33,9 @@
    <div class="grid grid-cols-4 gap-3 sm:grid-cols-8">
      <div
        v-for="action in actions"
        :key="action.route"
        :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.route)"
        @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"