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

liu

2026-09-29 982c97ab82f3beb1b4febcf014562eda34b9fc05

 src/views/dashboard/analytics/index.vue

@@ -1,25 +1,23 @@
<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 { 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';
import RecentApplications from './modules/recent-applications.vue';
import TodoPanel from './modules/todo-panel.vue';

defineOptions({ name: 'DashboardAnalytics' });

// vite.config.ts 注入的公司 Logo 路径
declare const __APP_LOGO__: string;
const brandLogo = __APP_LOGO__ || '/logos/JSSM.svg';

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

const greeting = computed(() => {
  const hour = new Date().getHours();
@@ -40,94 +38,103 @@
function handleNavigate(name: string) {
  router.push({ name });
}

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

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

<template>
  <Page auto-content-height>
    <!-- 欢迎栏 -->
    <div class="glass-card mb-6 flex items-center justify-between rounded-2xl p-6">
      <div>
        <h1 class="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-500 bg-clip-text text-2xl font-bold text-transparent dark:from-blue-400 dark:via-purple-400 dark:to-pink-400">
          {{ greeting }}，欢迎回来
        </h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ today }}</p>
      </div>
      <div class="hidden items-center gap-2 sm:flex">
        <div class="flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400">
          <span class="relative flex size-2">
            <span class="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
            <span class="relative inline-flex size-2 rounded-full bg-emerald-500" />
          </span>
    <!-- 欢迎栏：藏青底 + 金色描边 -->
    <div class="elite-hero mb-6">
      <img alt="" class="elite-hero-mark" :src="brandLogo" />
      <div class="relative z-10 flex flex-wrap items-center justify-between gap-4">
        <div>
          <h1 class="elite-hero-title">{{ greeting }}，欢迎回来</h1>
          <p class="elite-hero-date">{{ today }}</p>
        </div>
        <div class="elite-status">
          <span class="elite-status-dot"></span>
          系统运行中
        </div>
      </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>
        <TodoPanel @navigate="handleNavigate" />
      </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>

    <!-- 最近课题申报 -->
    <RecentApplications @navigate="handleNavigate" />
  </Page>
</template>

<style scoped>
.glass-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.5));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.04),
    0 2px 8px rgba(0,0,0,0.02),
    inset 0 1px 0 rgba(255,255,255,0.8);
/* ===== 欢迎栏 ===== */
.elite-hero {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 30px 34px;
  background:
    radial-gradient(circle at 88% 12%, rgba(212, 175, 55, 0.08), transparent 50%),
    linear-gradient(135deg, #123156 0%, #0f2440 58%, #0b1c33 100%);
  border: 1px solid rgba(212, 175, 55, 0.24);
  box-shadow: 0 4px 18px rgba(15, 36, 64, 0.12);
}

.dark .glass-card {
  background: linear-gradient(135deg, rgba(30,30,50,0.7), rgba(20,20,40,0.5));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.05);
/* 右侧淡淡的徽标水印 */
.elite-hero-mark {
  position: absolute;
  top: 50%;
  right: 168px;
  width: 118px;
  height: 118px;
  pointer-events: none;
  opacity: 0.05;
  transform: translateY(-50%);
}

.elite-hero-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #f5f0e4;
}

.elite-hero-date {
  margin: 8px 0 0;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(212, 175, 55, 0.85);
}

.elite-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 12.5px;
  letter-spacing: 1px;
  color: #f0e2b8;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 999px;
}

/* 静态状态点，不做脉冲动画 */
.elite-status-dot {
  display: inline-flex;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d4af37;
}
</style>