From 7981c8b76ea5708bfb75b59fcd65252e72ed72f3 Mon Sep 17 00:00:00 2001
From: liu <2021943741@qq.com>
Date: 星期二, 20 十月 2026 14:09:55 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_江苏商贸供销社' into dev_江苏商贸供销社

---
 src/views/dashboard/analytics/index.vue |  260 +++++++++++++++++++++++++++++----------------------
 1 files changed, 148 insertions(+), 112 deletions(-)

diff --git a/src/views/dashboard/analytics/index.vue b/src/views/dashboard/analytics/index.vue
index 3714991..4a3a653 100644
--- a/src/views/dashboard/analytics/index.vue
+++ b/src/views/dashboard/analytics/index.vue
@@ -1,134 +1,170 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import type { MenuRecordRaw } from '@vben/types';
 
-import { Page } from '@vben/common-ui';
+import { computed, ref } from 'vue';
 
-import { Card, Col, Row } from 'ant-design-vue';
+import { IconifyIcon } from '@vben/icons';
+import { preferences } from '@vben/preferences';
 
-import { getHomeSummary } from '#/api/mes/home';
+import PortalFooter from '#/components/portal/portal-footer.vue';
+import { portalCategory, usePortalMenus } from '#/components/portal/use-portal-menus';
 
-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 NoticePanel from './modules/notice-panel.vue';
 import QuickActions from './modules/quick-actions.vue';
+import ResearchHighlights from './modules/research-highlights.vue';
+import TodoPanel from './modules/todo-panel.vue';
 
 defineOptions({ name: 'DashboardAnalytics' });
 
-const router = useRouter();
-const summary = ref(defaultSummary);
+const { menus, leaves, features, goMenu } = usePortalMenus();
+const appName = computed(() => preferences.copyright.companyName);
+const slideIndex = ref(0);
+const slides = [
+  { title: '鏈嶅姟渚涢攢鍚堜綔銆�鍔╁姏涔℃潙鎸叴', motto: '寮�鏀惧崗浣� 路 瀛︽湳鐮旂┒ 路 鏈嶅姟鍙戝睍', description: '鎺ㄥ姩渚涢攢鍚堜綔缁忔祹鐮旂┒锛屾湇鍔¤涓氶珮璐ㄩ噺鍙戝睍' },
+  { title: '鍑濊仛瀛︽湳鍔涢噺銆�娣卞寲璇鹃鐮旂┒', motto: '璇鹃鎸囧崡 路 鍦ㄧ嚎鐢虫姤 路 杩涘害璺熻釜', description: '鍥寸粫鐮旂┒璇鹃锛岃繛鎺ョ敵鎶ャ�佸鎵逛笌鍗忎綔鏈嶅姟' },
+  { title: '鍗忓悓楂樻晥鍔炲叕銆�鍏变韩鍙戝睍鎴愭灉', motto: '娴佺▼鍗忓悓 路 閫氱煡浜掗�� 路 渚挎嵎鍔炵悊', description: '姹囪仛鏃ュ父涓氬姟鏈嶅姟锛岃鍚勯」宸ヤ綔鏈夊簭鎺ㄨ繘' },
+];
+const currentSlide = computed(() => slides[slideIndex.value] ?? slides[0]!);
+const showWork = computed(() => Boolean(features.value.todo || features.value.application || features.value.reimbursement || features.value.guideline));
+const topicMenus = computed(() => menus.value.slice(0, 4));
+const serviceLinks = computed(() => leaves.value.slice(0, 6));
 
-const greeting = computed(() => {
-  const hour = new Date().getHours();
-  if (hour < 6) return '澶滄繁浜�';
-  if (hour < 9) return '鏃╀笂濂�';
-  if (hour < 12) return '涓婂崍濂�';
-  if (hour < 14) return '涓崍濂�';
-  if (hour < 18) return '涓嬪崍濂�';
-  return '鏅氫笂濂�';
-});
-
-const today = computed(() => {
-  const d = new Date();
-  const weekNames = ['鏃�', '涓�', '浜�', '涓�', '鍥�', '浜�', '鍏�'];
-  return `${d.getFullYear()}骞�${d.getMonth() + 1}鏈�${d.getDate()}鏃� 鏄熸湡${weekNames[d.getDay()]}`;
-});
-
-function handleNavigate(name: string) {
-  router.push({ name });
+function description(menu: MenuRecordRaw) {
+  switch (portalCategory(menu)) {
+    case 'research': return '鑱氱劍瀛︽湳鐮旂┒锛屾眹闆嗚棰樻湇鍔�';
+    case 'office': return '鍗忓悓鍔炵悊娴佺▼锛屾彁鍗囧姙鍏晥鐜�';
+    case 'finance': return '瑙勮寖璐圭敤鍔炵悊锛屼究鎹疯储鍔℃湇鍔�';
+    default: return '姹囪仛涓氬姟淇℃伅锛屾彁渚涘崗鍚屾湇鍔�';
+  }
 }
-
-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 class="portal-home">
+    <section class="portal-hero" aria-labelledby="portal-hero-title">
+      <div class="portal-hero-copy">
+        <h1 id="portal-hero-title"><span v-for="part in currentSlide.title.split('銆�')" :key="part">{{ part }}</span></h1>
+        <div class="portal-hero-organization"><span></span><strong>{{ appName }}</strong><span></span></div>
+        <p class="portal-hero-motto">{{ currentSlide.motto }}</p>
+        <p class="portal-hero-description">{{ currentSlide.description }}</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>
+      <div class="portal-hero-pages" aria-label="棣栭〉涓婚鍒囨崲">
+        <button v-for="(slide, index) in slides" :key="slide.title" type="button" :aria-label="`鏌ョ湅涓婚锛�${slide.title}`" :aria-pressed="slideIndex === index" :class="{ active: slideIndex === index }" @click="slideIndex = index"></button>
       </div>
+    </section>
+
+    <div class="portal-content">
+      <QuickActions />
+
+      <section v-if="features.application || features.todo || features.notice" class="portal-news-grid" aria-label="涓氬姟鍔ㄦ�佷笌閫氱煡">
+        <ResearchHighlights v-if="features.application" :menu="features.application" />
+        <TodoPanel v-else-if="features.todo" />
+        <NoticePanel v-if="features.notice" :menu-path="features.notice.path" />
+      </section>
+
+      <section v-if="menus.length" class="portal-columns" aria-label="涓氬姟鏍忕洰">
+        <article v-for="menu in menus" :key="menu.path" class="portal-column" :class="`category-${portalCategory(menu)}`">
+          <div class="portal-column-heading"><span><IconifyIcon :icon="typeof menu.icon === 'string' ? menu.icon : 'lucide:layers'" /></span><div><h2>{{ menu.name }}</h2><p>{{ description(menu) }}</p></div></div>
+          <div class="portal-column-body">
+            <div class="portal-column-links">
+              <button v-for="link in (menu.children ?? []).slice(0, 4)" :key="link.path" type="button" @click="goMenu(link)"><IconifyIcon icon="lucide:chevron-right" /><span>{{ link.name }}</span></button>
+              <p v-if="!menu.children?.length">{{ menu.name }}鐩稿叧涓氬姟鍔炵悊</p>
+            </div>
+            <div class="portal-column-photo portal-photo" :class="`photo-${portalCategory(menu)}`" aria-hidden="true"></div>
+          </div>
+          <button class="portal-column-enter" type="button" @click="goMenu(menu)">杩涘叆鏍忕洰 <IconifyIcon icon="lucide:chevron-right" /></button>
+        </article>
+      </section>
+
+      <section v-if="topicMenus.length" class="portal-topic-strip" aria-label="涓氬姟鐩磋揪">
+        <div class="portal-topic-label"><h2>涓氬姟鐩磋揪</h2><p>姹囪仛鏈嶅姟璧勬簮<br />娣卞寲涓氬姟鍗忓悓</p></div>
+        <button v-for="menu in topicMenus" :key="menu.path" type="button" class="portal-topic portal-photo" :class="`photo-${portalCategory(menu)}`" @click="goMenu(menu)"><span>{{ menu.name }}</span><IconifyIcon icon="lucide:arrow-up-right" /></button>
+      </section>
+
+      <section v-if="showWork" class="portal-work-section" aria-labelledby="work-title">
+        <div class="portal-panel-heading"><h2 id="work-title"><IconifyIcon icon="lucide:briefcase-business" />鎴戠殑宸ヤ綔</h2><span>涓氬姟鏁版嵁姒傝</span></div>
+        <KpiCards />
+      </section>
+
+      <section class="portal-service-grid">
+        <article class="portal-service-intro">
+          <div class="portal-panel-heading"><h2><IconifyIcon icon="lucide:landmark" />骞冲彴鏈嶅姟</h2></div>
+          <div class="portal-service-intro-body"><div class="portal-service-photo" aria-hidden="true"></div><div><h3>{{ appName }}</h3><p>鍥寸粫璇鹃鐮旂┒銆佹祦绋嬪崗鍚屼笌鏃ュ父涓氬姟锛屾眹鑱氭湇鍔″叆鍙ｏ紝杩炴帴淇℃伅涓庤祫婧愶紝涓哄悇椤瑰伐浣滅殑鏈夊簭寮�灞曟彁渚涗究鎹锋敮鎸併��</p><button v-if="features.todo" type="button" @click="goMenu(features.todo)">鏌ョ湅鎴戠殑寰呭姙 <IconifyIcon icon="lucide:chevron-right" /></button></div></div>
+        </article>
+        <article v-if="serviceLinks.length" class="portal-service-links">
+          <div class="portal-panel-heading"><h2><IconifyIcon icon="lucide:link" />甯哥敤鍔熻兘</h2><span>涓�绔欏紡涓氬姟鏈嶅姟</span></div>
+          <div class="portal-service-link-grid"><button v-for="menu in serviceLinks" :key="menu.path" type="button" @click="goMenu(menu)"><IconifyIcon :icon="typeof menu.icon === 'string' ? menu.icon : 'lucide:arrow-up-right'" /><span>{{ menu.name }}</span></button></div>
+        </article>
+      </section>
     </div>
-
-    <!-- MES 鐢熶骇 KPI -->
-    <KpiCards :summary="summary" @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
-          :andon-active-count="summary.andonActiveCount"
-          :repair-active-count="summary.repairActiveCount"
-          @navigate="handleNavigate"
-        />
-      </Col>
-    </Row>
-
-    <!-- 蹇嵎鎿嶄綔 -->
-    <Row :gutter="16" class="mb-4">
-      <Col :span="24">
-        <QuickActions @navigate="handleNavigate" />
-      </Col>
-    </Row>
-  </Page>
+    <PortalFooter />
+  </div>
 </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);
-}
-
-.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);
-}
+.portal-home { --ink: #153a62; --muted: #5c7187; color: var(--ink); background: #f2f7fc; }
+.portal-hero { position: relative; display: grid; min-height: 350px; place-items: center; overflow: hidden; background: url('/static/imgs/portal-hero-v2.png') center 59% / cover; }
+.portal-hero::before { position: absolute; inset: 0; background: radial-gradient(ellipse at 52% 37%, rgb(255 255 255 / 86%) 0%, rgb(255 255 255 / 64%) 25%, rgb(255 255 255 / 5%) 67%); content: ''; }
+.portal-hero-copy { position: relative; z-index: 1; width: min(1180px, 90%); padding: 24px 0 42px; text-align: center; }
+.portal-hero h1 span { display: inline-block; white-space: nowrap; }.portal-hero h1 span + span { margin-left: .7em; }
+.portal-hero h1 { margin: 0 0 12px; color: #ac131b; font-family: 'KaiTi', 'STKaiti', 'Noto Serif SC', serif; font-size: clamp(32px, 4vw, 54px); font-weight: 800; letter-spacing: .055em; line-height: 1.45; text-shadow: 0 2px 0 rgb(255 255 255 / 75%); }
+.portal-hero-organization { display: flex; align-items: center; justify-content: center; gap: 16px; color: #103965; }
+.portal-hero-organization strong { font-size: 23px; font-weight: 650; letter-spacing: .14em; }
+.portal-hero-organization span { width: 58px; height: 1px; background: #527ba4; }
+.portal-hero-motto { margin: 18px 0 5px; color: #153b67; font-family: 'KaiTi', 'STKaiti', serif; font-size: 23px; font-weight: 600; letter-spacing: .18em; }
+.portal-hero-description { margin: 0; color: #234f78; font-size: 14px; letter-spacing: .12em; }
+.portal-hero-pages { position: absolute; bottom: 13px; z-index: 2; display: flex; gap: 0; }
+.portal-hero-pages button { display: grid; width: 28px; height: 28px; place-items: center; }
+.portal-hero-pages button::before { width: 10px; height: 10px; border: 1px solid rgb(21 58 98 / 16%); border-radius: 50%; background: #fff; content: ''; }
+.portal-hero-pages button.active::before { width: 19px; border-color: #bb2029; border-radius: 7px; background: #bb2029; }
+.portal-content { width: min(1280px, calc(100% - 80px)); margin: 0 auto; padding-top: 22px; }
+.portal-news-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; }
+.portal-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 18px; }
+.portal-column { display: flex; min-width: 0; min-height: 278px; flex-direction: column; padding: 19px 18px 16px; border: 1px solid #e0eaf4; border-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgb(24 66 106 / 4%); }
+.portal-column-heading { display: flex; align-items: center; gap: 11px; }
+.portal-column-heading > span { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border-radius: 50%; color: #216dc1; background: #eaf3ff; font-size: 25px; }
+.category-office .portal-column-heading > span { color: #c42a22; background: #fff0ed; }
+.category-finance .portal-column-heading > span { color: #1d5277; background: #edf3f7; }
+.portal-column-heading h2 { margin: 0; color: #153a62; font-size: 17px; font-weight: 700; }
+.portal-column-heading p { margin: 5px 0 0; color: #5c7187; font-size: 11px; }
+.portal-column-body { display: flex; min-height: 132px; justify-content: space-between; gap: 12px; margin: 18px 0 14px; }
+.portal-column-links { display: flex; min-width: 0; flex: 1; flex-direction: column; }
+.portal-column-links button { display: flex; min-height: 31px; align-items: center; gap: 5px; color: #315273; font-size: 12px; text-align: left; }
+.portal-column-links button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.portal-column-links :deep(svg) { width: 11px; flex: none; color: #8ca7c0; }
+.portal-column-links p { color: #5c7187; font-size: 12px; line-height: 1.7; }
+.portal-photo { background-image: url('/static/imgs/portal-modules-v2.png'); background-size: 200% auto; }
+.photo-research { background-position: left top; }.photo-office { background-position: right top; }.photo-finance { background-position: left bottom; }.photo-archive { background-position: right bottom; }
+.portal-column-photo { width: 43%; min-width: 100px; flex: none; border-radius: 4px; }
+.portal-column-enter { display: inline-flex; min-height: 28px; align-self: flex-start; align-items: center; gap: 5px; margin-top: auto; padding: 3px 11px; border: 1px solid #d9e7f5; border-radius: 4px; color: #315f90; background: #f8fbff; font-size: 11px; }
+.portal-topic-strip { display: grid; grid-template-columns: 190px repeat(auto-fit, minmax(170px, 1fr)); align-items: stretch; gap: 12px; margin-top: 18px; padding: 12px; border: 1px solid #e1ebf4; border-radius: 6px; background: #fff; }
+.portal-topic-label { margin: -12px 0 -12px -12px; padding: 25px 24px; border-radius: 6px 0 0 6px; color: #fff; background: linear-gradient(110deg, #204d7b, #6499c0); }
+.portal-topic-label h2 { margin: 0 0 7px; font-size: 23px; font-weight: 650; }
+.portal-topic-label p { margin: 0; color: #edf6ff; font-size: 12px; line-height: 1.7; }
+.portal-topic { position: relative; display: flex; min-height: 108px; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 4px; color: #fff; background-size: 200% 200%; }
+.portal-topic::before { position: absolute; inset: 0; background: linear-gradient(transparent 25%, rgb(9 36 60 / 82%)); content: ''; }
+.portal-topic span { position: relative; padding: 10px; font-size: 15px; font-weight: 650; }
+.portal-topic :deep(svg) { position: absolute; top: 10px; right: 10px; width: 16px; }
+.portal-work-section { margin-top: 18px; padding: 18px; border: 1px solid #e1ebf4; border-radius: 6px; background: #fff; }
+.portal-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
+.portal-panel-heading h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 700; }
+.portal-panel-heading h2 :deep(svg) { width: 18px; color: #bb212b; }
+.portal-panel-heading > span { color: #5c7187; font-size: 11px; }
+.portal-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; padding: 20px; border: 1px solid #e1ebf4; border-radius: 6px; background: #fff; }
+.portal-service-intro-body { display: flex; gap: 18px; }
+.portal-service-photo { width: 155px; min-height: 130px; flex: none; border-radius: 4px; background: url('/static/imgs/portal-hero-v2.png') 90% 72% / 310%; }
+.portal-service-intro h3 { margin: 0 0 7px; font-size: 13px; font-weight: 650; }
+.portal-service-intro p { margin: 0; color: #5c7187; font-size: 12px; line-height: 1.9; }
+.portal-service-intro button { display: inline-flex; min-height: 27px; align-items: center; gap: 4px; margin-top: 10px; padding: 2px 9px; border-radius: 4px; color: #fff; background: #b7242d; font-size: 11px; }
+.portal-service-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.portal-service-link-grid button { display: flex; min-height: 45px; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 4px; color: #315273; background: #f3f7fc; font-size: 11px; text-align: left; }
+.portal-service-link-grid :deep(svg) { width: 21px; height: 21px; flex: none; color: #16803f; }
+.portal-home button { cursor: pointer; }
+.portal-home button:focus-visible { outline: 2px solid #2c70b2; outline-offset: 3px; }
+.portal-column-links button:hover, .portal-column-enter:hover { color: #b7242d; }
+@media (max-width: 1050px) { .portal-content { width: calc(100% - 48px); } .portal-topic-strip { grid-template-columns: 150px repeat(auto-fit, minmax(135px, 1fr)); } .portal-service-photo { width: 105px; } .portal-service-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-hero-organization strong { font-size: 20px; } }
+@media (max-width: 767px) { .portal-hero { min-height: 280px; background-position: 62% 58%; } .portal-hero h1 { font-size: 32px; letter-spacing: .015em; } .portal-hero-organization { gap: 8px; } .portal-hero-organization strong { font-size: 17px; letter-spacing: .03em; } .portal-hero-organization span { width: 22px; } .portal-hero-motto { font-size: 18px; letter-spacing: .03em; } .portal-hero-description { font-size: 12px; letter-spacing: 0; } .portal-content { width: calc(100% - 28px); padding-top: 16px; } .portal-news-grid, .portal-service-grid { grid-template-columns: 1fr; } .portal-topic-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-topic-label { grid-column: 1 / -1; margin: -12px -12px 0; padding: 14px 18px; border-radius: 6px 6px 0 0; } .portal-topic-label h2 { font-size: 19px; } .portal-topic-label p { display: none; } .portal-service-grid { padding: 16px; } .portal-service-photo { width: 105px; } }
+@media (max-width: 767px) { .portal-hero h1 span { display: block; }.portal-hero h1 span + span { margin-left: 0; }.portal-hero::before { background: radial-gradient(ellipse at 52% 40%, rgb(255 255 255 / 92%) 0%, rgb(255 255 255 / 75%) 42%, rgb(255 255 255 / 8%) 90%); } }
+@media (max-width: 420px) { .portal-hero h1 { font-size: 29px; } .portal-hero-organization strong { font-size: 15px; } .portal-hero-organization span { width: 16px; } .portal-column { min-height: 260px; } }
 </style>

--
Gitblit v1.9.3