feat(dashboard): polish risk and digital employee boards

web/src/views/OverviewView.vue

@@ -1,5 +1,9 @@
 <template>
-  <section class="dashboard" :class="`dashboard-${activeDashboard}`">
+  <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>
+    </div>
     <div class="kpi-grid">
       <article
         v-for="metric in activeKpiMetrics"
@@ -383,15 +387,19 @@ const {
   digitalEmployeeCategoryRows,
   digitalEmployeeDashboard,
   digitalEmployeeDashboardError,
+  digitalEmployeeDashboardLoaded,
   digitalEmployeeDashboardLoading,
   digitalEmployeeDailyRows,
   digitalEmployeeKpiMetrics,
   digitalEmployeeTaskRanking,
+  financeDashboardLoading,
+  financeDashboardLoaded,
   kpiMetrics,
   rankedDepartments,
   rankedEmployees,
   riskDashboard,
   riskDashboardError,
+  riskDashboardLoaded,
   riskDashboardLastUpdatedAt,
   riskDashboardLoading,
   riskDailyTrendRows,
@@ -403,6 +411,8 @@ const {
   setRiskWindowDays,
   spendCenterValue,
   spendLegend,
+  systemDashboardLoading,
+  systemDashboardLoaded,
   systemAccuracyComparison,
   systemAgentDailyRatio,
   systemFeedbackSummary,
@@ -429,6 +439,24 @@ const activeKpiMetrics = computed(() => {
   if (activeDashboard.value === 'risk') return riskKpiMetrics.value
   return kpiMetrics.value
 })
+const activeDashboardLoading = computed(() => {
+  if (activeDashboard.value === 'system') {
+    return systemDashboardLoading.value && !systemDashboardLoaded.value
+  }
+  if (activeDashboard.value === 'digitalEmployee') {
+    return digitalEmployeeDashboardLoading.value && !digitalEmployeeDashboardLoaded.value
+  }
+  if (activeDashboard.value === 'risk') {
+    return riskDashboardLoading.value && !riskDashboardLoaded.value
+  }
+  return financeDashboardLoading.value && !financeDashboardLoaded.value
+})
+const activeDashboardLoadingText = computed(() => {
+  if (activeDashboard.value === 'system') return '正在加载系统看板数据'
+  if (activeDashboard.value === 'digitalEmployee') return '正在加载数字员工看板数据'
+  if (activeDashboard.value === 'risk') return '正在加载风险看板数据'
+  return '正在加载财务看板数据'
+})
 </script>
 
 <style scoped src="../assets/styles/views/overview-view.css"></style>