refactor mobile branch dashboard experience

gaoluyang

2026-10-29 a7dcbf2d709475c4364b3ac5e8ba06a7bada4b88

 src/views/dashboard/analytics/index.vue

@@ -57,28 +57,29 @@

<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>
          系统运行中
    <!-- 工作台首页：聚焦今天要做的事 -->
    <section class="command-hero mb-6 rounded-[28px] p-6 sm:p-8">
      <div class="relative z-10 flex flex-col justify-between gap-8 lg:flex-row lg:items-end">
        <div>
          <div class="mb-5 flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.2em] text-indigo-200"><span class="live-dot"></span> FieldFlow / Command center</div>
          <h1 class="max-w-2xl text-3xl font-semibold leading-tight tracking-[-0.04em] text-white sm:text-5xl">{{ greeting }}，<br /><span class="text-indigo-200">今天的现场由你掌控。</span></h1>
          <p class="mt-5 text-sm text-indigo-100/70">{{ today }} · 这里汇总生产、质量和协同任务的最新状态</p>
        </div>
        <div class="grid grid-cols-3 gap-2 sm:gap-3">
          <div class="hero-stat"><strong>24</strong><span>待处理</span></div>
          <div class="hero-stat"><strong>08</strong><span>进行中</span></div>
          <div class="hero-stat"><strong>96%</strong><span>完成率</span></div>
        </div>
      </div>
    </div>
      <div class="hero-grid"></div>
      <div class="hero-glow"></div>
    </section>

    <div class="section-kicker mb-3"><span>01</span><strong>现场概览</strong><i></i><small>实时业务指标</small></div>
    <!-- MES 生产 KPI -->
    <KpiCards v-if="canViewHome" :summary="summary" @navigate="handleNavigate" />

    <div class="section-kicker mb-3 mt-6"><span>02</span><strong>业务脉搏</strong><i></i><small>跨模块经营状态</small></div>
    <!-- ERP/WMS/BPM 经营 KPI -->
    <BizCards @navigate="handleNavigate" />

@@ -89,6 +90,7 @@
      @navigate="handleNavigate"
    />

    <div class="section-kicker mb-3 mt-6"><span>03</span><strong>趋势与风险</strong><i></i><small>近 7 天动态</small></div>
    <!-- 生产趋势 + 预警面板 -->
    <Row v-if="canViewHome" :gutter="16" class="mb-4">
      <Col :lg="14" :md="24" :sm="24" :xl="14" :xs="24" class="mb-4">
@@ -128,6 +130,22 @@
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.command-hero { position: relative; overflow: hidden; min-height: 260px; background: #1d1a40; box-shadow: 0 20px 50px rgb(50 43 121 / 18%); }
.hero-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(#a6a0ff1c 1px, transparent 1px), linear-gradient(90deg, #a6a0ff1c 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(110deg, black, transparent 75%); }
.hero-glow { position: absolute; top: -120px; right: 5%; width: 380px; height: 380px; border-radius: 999px; background: #7870ef66; filter: blur(50px); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #b8f3dd; box-shadow: 0 0 0 6px #b8f3dd22; }
.hero-stat { position: relative; z-index: 1; min-width: 74px; border: 1px solid #ffffff20; border-radius: 14px; background: #ffffff0d; padding: 14px 12px; color: white; backdrop-filter: blur(10px); }
.hero-stat strong { display: block; font-size: 22px; letter-spacing: -.06em; }
.hero-stat span { display: block; margin-top: 5px; color: #c9c5ec; font-size: 11px; }
.section-kicker { display: flex; align-items: center; gap: 10px; color: #6f68b8; font-size: 12px; letter-spacing: .08em; }
.section-kicker span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: #e8e5ff; color: #675fcb; font-size: 10px; }
.section-kicker strong { color: #25233b; font-size: 14px; letter-spacing: 0; }
.section-kicker i { height: 1px; flex: 1; background: #dedcf0; }
.section-kicker small { color: #9b98b3; font-size: 11px; letter-spacing: 0; }
.dark .section-kicker strong { color: #f4f2ff; }
.dark .section-kicker i { background: #37334d; }
@media (max-width: 640px) { .command-hero { min-height: 340px; } .hero-stat { min-width: 0; padding: 11px 9px; } .section-kicker small { display: none; } }

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