From d060f89d303491f2de00db8e00f8d7291da6b1c3 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 09:43:36 +0800
Subject: [PATCH] style(dashboard): reuse shared loading overlay

---
 .../dashboard/RiskObservationDashboard.vue    | 19 +++++++++----------
 web/src/views/OverviewView.vue                | 10 ++++++++--
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/web/src/components/dashboard/RiskObservationDashboard.vue b/web/src/components/dashboard/RiskObservationDashboard.vue
index b4f582e..ff03e5a 100644
--- a/web/src/components/dashboard/RiskObservationDashboard.vue
+++ b/web/src/components/dashboard/RiskObservationDashboard.vue
@@ -1,8 +1,13 @@
 <template>
   <section class="risk-observation-dashboard" :class="{ 'is-loading': showBlockingLoading }">
     <div v-if="showBlockingLoading" class="risk-dashboard-loading-overlay" role="status" aria-live="polite">
-      <i class="mdi mdi-loading mdi-spin"></i>
-      <span>{{ loadingLabel }}</span>
+      <TableLoadingState
+        :title="loadingLabel"
+        message="正在同步风险观察、风险等级和近期高风险记录"
+        icon="mdi mdi-shield-search"
+        variant="overlay"
+        motion="loop"
+      />
     </div>
     <article class="panel dashboard-card risk-trend-panel">
       <div class="card-head">
@@ -180,6 +185,7 @@ import BarChart from '../charts/BarChart.vue'
 import DonutChart from '../charts/DonutChart.vue'
 import RiskDailyTrendChart from '../charts/RiskDailyTrendChart.vue'
 import EnterpriseSelect from '../shared/EnterpriseSelect.vue'
+import TableLoadingState from '../shared/TableLoadingState.vue'
 import {
   formatRiskDimensionLabel,
   formatRiskLevelLabel,
@@ -371,20 +377,13 @@ function openClaim(item) {
   place-content: center;
   justify-items: center;
   gap: 10px;
+  padding: 24px;
   border: 1px solid #e2e8f0;
   border-radius: 4px;
   background: rgba(248, 250, 252, .82);
-  color: #334155;
-  font-size: 13px;
-  font-weight: 800;
   backdrop-filter: blur(2px);
 }
 
-.risk-dashboard-loading-overlay i {
-  color: var(--theme-primary);
-  font-size: 26px;
-}
-
 .risk-observation-dashboard.is-loading .dashboard-card {
   pointer-events: none;
 }
diff --git a/web/src/views/OverviewView.vue b/web/src/views/OverviewView.vue
index 6bafc76..25a2754 100644
--- a/web/src/views/OverviewView.vue
+++ b/web/src/views/OverviewView.vue
@@ -1,8 +1,13 @@
 <template>
   <section class="dashboard" :class="[`dashboard-${activeDashboard}`, { 'is-loading': activeDashboardLoading }]">
     <div v-if="activeDashboardLoading" class="dashboard-loading-overlay" role="status" aria-live="polite">
-      <i class="mdi mdi-loading mdi-spin"></i>
-      <span>{{ activeDashboardLoadingText }}</span>
+      <TableLoadingState
+        :title="activeDashboardLoadingText"
+        message="正在同步当前看板数据"
+        icon="mdi mdi-view-dashboard-outline"
+        variant="overlay"
+        motion="loop"
+      />
     </div>
     <div class="kpi-grid">
       <article
@@ -361,6 +366,7 @@ import SystemUserTokenPie from '../components/charts/SystemUserTokenPie.vue'
 import DigitalEmployeeDashboard from '../components/dashboard/DigitalEmployeeDashboard.vue'
 import RiskObservationDashboard from '../components/dashboard/RiskObservationDashboard.vue'
 import EnterpriseSelect from '../components/shared/EnterpriseSelect.vue'
+import TableLoadingState from '../components/shared/TableLoadingState.vue'
 
 import { useOverviewView } from '../composables/useOverviewView.js'