From 95a15c4560bc51ce31f23adc4ce15e0dbf5c8612 Mon Sep 17 00:00:00 2001
From: Mm <8828989+mao-guangde@user.noreply.gitee.com>
Date: Sat, 8 Nov 2025 11:40:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/router/routes/local.ts      |   31 +-
 .../views/dashboard/analytics/index-old.vue   |   90 +
 .../src/views/dashboard/analytics/index.vue   | 1803 ++++++++++++++++-
 apps/web-antd/vite.config.mts                 |    4 +-
 4 files changed, 1830 insertions(+), 98 deletions(-)
 create mode 100644 apps/web-antd/src/views/dashboard/analytics/index-old.vue

diff --git a/apps/web-antd/src/router/routes/local.ts b/apps/web-antd/src/router/routes/local.ts
index a6dcfe1..7bc22a7 100644
--- a/apps/web-antd/src/router/routes/local.ts
+++ b/apps/web-antd/src/router/routes/local.ts
@@ -1,3 +1,10 @@
+/*
+ * @Author: Mm
+ * @Date: 2025-02-20 09:55:11
+ * @LastEditors: Mm
+ * @LastEditTime: 2025-11-08 10:34:16
+ * 不写bug的程序员不是一个好程序员!
+ */
 import type { RouteRecordStringComponent } from '@vben/types';
 
 import { $t } from '@vben/locales';
@@ -49,7 +56,6 @@ const localRoutes: RouteRecordStringComponent[] = [
     name: 'RoleAssign',
     path: '/system/role-assign/:roleId',
   },
-  
 ];
 
 /**
@@ -60,9 +66,11 @@ export const localMenuList: RouteRecordStringComponent[] = [
     component: 'BasicLayout',
     meta: {
       order: -1,
-      title: 'page.dashboard.title',
+      title: '首页',
       // 不使用基础布局（仅在顶级生效）
       noBasicLayout: true,
+      hideChildrenInMenu: true,
+      icon: 'ic:baseline-house',
     },
     name: 'Dashboard',
     path: '/',
@@ -74,18 +82,19 @@ export const localMenuList: RouteRecordStringComponent[] = [
         component: '/dashboard/analytics/index',
         meta: {
           affixTab: true,
-          title: 'page.dashboard.analytics',
-        },
-      },
-      {
-        name: 'Workspace',
-        path: '/workspace',
-        component: '/dashboard/workspace/index',
-        meta: {
-          title: 'page.dashboard.workspace',
+          icon: 'ic:baseline-house',
+          title: '首页',
         },
       },
       // {
+      //   name: 'Workspace',
+      //   path: '/workspace',
+      //   component: '/dashboard/workspace/index',
+      //   meta: {
+      //     title: 'page.dashboard.workspace',
+      //   },
+      // },
+      // {
       //   name: 'VbenDocument',
       //   path: '/vben-admin/document',
       //   component: 'IFrameView',
diff --git a/apps/web-antd/src/views/dashboard/analytics/index-old.vue b/apps/web-antd/src/views/dashboard/analytics/index-old.vue
new file mode 100644
index 0000000..00b34df
--- /dev/null
+++ b/apps/web-antd/src/views/dashboard/analytics/index-old.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { AnalysisOverviewItem } from '@vben/common-ui';
+import type { TabOption } from '@vben/types';
+
+import {
+  AnalysisChartCard,
+  AnalysisChartsTabs,
+  AnalysisOverview,
+} from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+
+import AnalyticsTrends from './analytics-trends.vue';
+import AnalyticsVisits from './analytics-visits.vue';
+import AnalyticsVisitsData from './analytics-visits-data.vue';
+import AnalyticsVisitsSales from './analytics-visits-sales.vue';
+import AnalyticsVisitsSource from './analytics-visits-source.vue';
+
+const overviewItems: AnalysisOverviewItem[] = [
+  {
+    icon: SvgCardIcon,
+    title: '用户量',
+    totalTitle: '总用户量',
+    totalValue: 120_000,
+    value: 2000,
+  },
+  {
+    icon: SvgCakeIcon,
+    title: '访问量',
+    totalTitle: '总访问量',
+    totalValue: 500_000,
+    value: 20_000,
+  },
+  {
+    icon: SvgDownloadIcon,
+    title: '下载量',
+    totalTitle: '总下载量',
+    totalValue: 120_000,
+    value: 8000,
+  },
+  {
+    icon: SvgBellIcon,
+    title: '使用量',
+    totalTitle: '总使用量',
+    totalValue: 50_000,
+    value: 5000,
+  },
+];
+
+const chartTabs: TabOption[] = [
+  {
+    label: '流量趋势',
+    value: 'trends',
+  },
+  {
+    label: '月访问量',
+    value: 'visits',
+  },
+];
+</script>
+
+<template>
+  <div class="p-5">
+    <AnalysisOverview :items="overviewItems" />
+    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
+      <template #trends>
+        <AnalyticsTrends />
+      </template>
+      <template #visits>
+        <AnalyticsVisits />
+      </template>
+    </AnalysisChartsTabs>
+
+    <div class="mt-5 w-full md:flex">
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
+        <AnalyticsVisitsData />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
+        <AnalyticsVisitsSource />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
+        <AnalyticsVisitsSales />
+      </AnalysisChartCard>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/dashboard/analytics/index.vue b/apps/web-antd/src/views/dashboard/analytics/index.vue
index 00b34df..569763e 100644
--- a/apps/web-antd/src/views/dashboard/analytics/index.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/index.vue
@@ -1,90 +1,1723 @@
-<script lang="ts" setup>
-import type { AnalysisOverviewItem } from '@vben/common-ui';
-import type { TabOption } from '@vben/types';
-
-import {
-  AnalysisChartCard,
-  AnalysisChartsTabs,
-  AnalysisOverview,
-} from '@vben/common-ui';
-import {
-  SvgBellIcon,
-  SvgCakeIcon,
-  SvgCardIcon,
-  SvgDownloadIcon,
-} from '@vben/icons';
-
-import AnalyticsTrends from './analytics-trends.vue';
-import AnalyticsVisits from './analytics-visits.vue';
-import AnalyticsVisitsData from './analytics-visits-data.vue';
-import AnalyticsVisitsSales from './analytics-visits-sales.vue';
-import AnalyticsVisitsSource from './analytics-visits-source.vue';
-
-const overviewItems: AnalysisOverviewItem[] = [
-  {
-    icon: SvgCardIcon,
-    title: '用户量',
-    totalTitle: '总用户量',
-    totalValue: 120_000,
-    value: 2000,
-  },
-  {
-    icon: SvgCakeIcon,
-    title: '访问量',
-    totalTitle: '总访问量',
-    totalValue: 500_000,
-    value: 20_000,
-  },
-  {
-    icon: SvgDownloadIcon,
-    title: '下载量',
-    totalTitle: '总下载量',
-    totalValue: 120_000,
-    value: 8000,
-  },
-  {
-    icon: SvgBellIcon,
-    title: '使用量',
-    totalTitle: '总使用量',
-    totalValue: 50_000,
-    value: 5000,
-  },
-];
-
-const chartTabs: TabOption[] = [
-  {
-    label: '流量趋势',
-    value: 'trends',
-  },
-  {
-    label: '月访问量',
-    value: 'visits',
-  },
-];
-</script>
-
+<!--
+ * @Author: Mm
+ * @Date: 2025-11-08 09:41:36
+ * @LastEditors: Mm
+ * @LastEditTime: 2025-11-08 11:17:35
+ * 不写bug的程序员不是一个好程序员!
+-->
 <template>
-  <div class="p-5">
-    <AnalysisOverview :items="overviewItems" />
-    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
-      <template #trends>
-        <AnalyticsTrends />
-      </template>
-      <template #visits>
-        <AnalyticsVisits />
-      </template>
-    </AnalysisChartsTabs>
+  <div class="dashboard">
+    <div class="page-container">
+      <!-- 数据概览 -->
+      <div class="overview-section">
+       
+        
+        <div class="overview-cards">
+          <div class="data-card" v-for="item in overviewData" :key="item.key">
+            <div class="card-icon">
+              <component :is="item.icon" :style="{ fontSize: '32px' }" />
+            </div>
+            <div class="card-content">
+              <div class="card-value">{{ item.value }}</div>
+              <div class="card-label">{{ item.label }}</div>
+            </div>
+            <div class="card-trend" :class="item.trend">
+              <component :is="item.trendIcon" />
+              <span>{{ item.trendText }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
 
-    <div class="mt-5 w-full md:flex">
-      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
-        <AnalyticsVisitsData />
-      </AnalysisChartCard>
-      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
-        <AnalyticsVisitsSource />
-      </AnalysisChartCard>
-      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
-        <AnalyticsVisitsSales />
-      </AnalysisChartCard>
+      <!-- 图表区域 -->
+      <div class="charts-section">
+        <div class="chart-row">
+          <!-- 考核完成率 -->
+          <div class="chart-card">
+            <div class="card-header">
+              <h3>考核完成率</h3>
+              <a-select v-model:value="completionPeriod" size="small" style="width: 120px">
+                <a-select-option value="quarter">本季度</a-select-option>
+                <a-select-option value="year">本年度</a-select-option>
+              </a-select>
+            </div>
+            <div class="chart-container">
+              <EchartsUI ref="completionRateChartRef" style="height: 300px" />
+            </div>
+          </div>
+
+          <!-- 考核等次分布 -->
+          <div class="chart-card">
+            <div class="card-header">
+              <h3>考核等次分布</h3>
+              <a-button type="link" size="small">查看详情</a-button>
+            </div>
+            <div class="chart-container">
+              <EchartsUI ref="gradeDistributionChartRef" style="height: 300px" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 通知和任务区域 -->
+      <div class="content-section">
+        <div class="content-row">
+          <!-- 考核通知 -->
+          <div class="content-card">
+            <div class="card-header">
+              <h3>考核通知</h3>
+              <a-button type="link" @click="goToNotifications">查看全部</a-button>
+            </div>
+            <div class="notification-list">
+              <div 
+                v-for="notification in notifications" 
+                :key="notification.id"
+                class="notification-item list-item-card"
+                :class="{ important: notification.isImportant }"
+                @click="viewNotification(notification)"
+              >
+                <div class="notification-icon-wrapper">
+                  <WarningOutlined v-if="notification.isImportant" :style="{ fontSize: '24px', color: '#ff4d4f' }" />
+                  <BellOutlined v-else :style="{ fontSize: '24px', color: '#1890ff' }" />
+                </div>
+                <div class="notification-main">
+                  <div class="notification-title">{{ notification.title }}</div>
+                  <div class="notification-meta">
+                    <span class="meta-tag">{{ notification.department }}</span>
+                    <span class="meta-info">{{ notification.readCount }}人已读</span>
+                  </div>
+                </div>
+                <div class="notification-time-badge">
+                  {{ formatTime(notification.publishTime) }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 考核任务 -->
+          <div class="content-card">
+            <div class="card-header">
+              <h3>考核任务</h3>
+              <a-button type="link" @click="goToTasks">查看全部</a-button>
+            </div>
+            <div class="task-list">
+              <div 
+                v-for="task in tasks" 
+                :key="task.id"
+                class="task-item list-item-card"
+                @click="viewTask(task)"
+              >
+                <div class="task-status-icon" :class="task.status">
+                  <component :is="getStatusIcon(task.status)" />
+                </div>
+                <div class="task-main">
+                  <div class="task-title">{{ task.title }}</div>
+                  <div class="task-meta">
+                    <span class="meta-time">{{ formatTime(task.publishTime) }}</span>
+                    <span class="meta-info">截止：{{ formatTime(task.deadline) }}</span>
+                  </div>
+                </div>
+                <div class="task-action">
+                  <a-button 
+                    v-if="task.status === 'pending'"
+                    type="primary" 
+                    size="small"
+                    @click.stop="startTask(task)"
+                  >
+                    开始
+                  </a-button>
+                  <a-button 
+                    v-else-if="task.status === 'in_progress'"
+                    type="default"
+                    size="small"
+                    @click.stop="continueTask(task)"
+                  >
+                    继续
+                  </a-button>
+                  <a-tag v-else color="success" size="small">已完成</a-tag>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 待批事项和公示结果 -->
+        <div class="content-row">
+          <!-- 待批事项 -->
+          <div class="content-card" v-if="hasApprovalPermission">
+            <div class="card-header">
+              <h3>待批事项</h3>
+              <a-badge :count="pendingApprovals.length" :number-style="{ backgroundColor: '#52c41a' }">
+                <a-button type="link" @click="goToApprovals">查看全部</a-button>
+              </a-badge>
+            </div>
+            <div class="approval-list">
+              <div 
+                v-for="approval in pendingApprovals" 
+                :key="approval.id"
+                class="approval-item list-item-card"
+                @click="viewApproval(approval)"
+              >
+                <div class="approval-type-tag">{{ approval.type }}</div>
+                <div class="approval-main">
+                  <div class="approval-title">{{ approval.applicant }} - {{ approval.department }}</div>
+                  <div class="approval-meta">
+                    <span class="meta-time">{{ formatTime(approval.submitTime) }}</span>
+                  </div>
+                </div>
+                <div class="approval-action">
+                  <a-button type="primary" size="small" @click.stop="approve(approval)">
+                    审批
+                  </a-button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 考核结果公示 -->
+          <div class="content-card">
+            <div class="card-header">
+              <h3>考核结果公示</h3>
+              <a-button type="link" @click="goToResults">查看全部</a-button>
+            </div>
+            <div class="result-list">
+              <div 
+                v-for="result in resultAnnouncements" 
+                :key="result.id"
+                class="result-item list-item-card"
+                @click="viewResult(result)"
+              >
+                <div class="result-main">
+                  <div class="result-title">{{ result.title }}</div>
+                  <div class="result-meta">
+                    <span class="meta-tag">{{ result.department }}</span>
+                    <span class="meta-tag">{{ result.period }}</span>
+                    <span class="meta-info">{{ result.viewCount }}人查看</span>
+                  </div>
+                </div>
+                <div class="result-time-badge">
+                  {{ formatTime(result.publishTime) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 评优结果和先进经验 -->
+        <div class="content-row">
+          <!-- 评优结果 -->
+          <div class="content-card">
+            <div class="card-header">
+              <h3>评优结果</h3>
+              <a-button type="link" @click="goToExcellent">查看全部</a-button>
+            </div>
+            <div class="excellent-list">
+              <div 
+                v-for="excellent in excellentResults" 
+                :key="excellent.id"
+                class="excellent-item list-item-card"
+                @click="viewExcellent(excellent)"
+              >
+                <a-avatar :size="40" :src="excellent.photo" class="excellent-avatar">
+                  {{ excellent.name.charAt(0) }}
+                </a-avatar>
+                <div class="excellent-main">
+                  <div class="excellent-name">{{ excellent.name }}</div>
+                  <div class="excellent-meta">
+                    <span class="meta-tag">{{ excellent.department }}</span>
+                    <span class="meta-info">{{ excellent.period }}</span>
+                  </div>
+                </div>
+                <div class="excellent-badge">
+                  <a-tag color="success">{{ excellent.grade }}</a-tag>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 先进经验分享 -->
+          <div class="content-card">
+            <div class="card-header">
+              <h3>先进经验分享</h3>
+              <a-button type="link" @click="goToExperience">查看全部</a-button>
+            </div>
+            <div class="experience-list">
+              <div 
+                v-for="experience in experienceSharing" 
+                :key="experience.id"
+                class="experience-item list-item-card"
+                @click="viewExperience(experience)"
+              >
+                <div class="experience-main">
+                  <div class="experience-title">{{ experience.title }}</div>
+                  <div class="experience-meta">
+                    <span class="meta-tag">{{ experience.department }}</span>
+                    <span class="meta-info">{{ experience.viewCount }}人查看</span>
+                  </div>
+                </div>
+                <div class="experience-time-badge">
+                  {{ formatTime(experience.publishTime) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+
+    <!-- 通知详情弹窗 -->
+    <a-modal
+      v-model:open="notificationDialogVisible"
+      title="通知详情"
+      width="600px"
+      :footer="null"
+    >
+      <div v-if="notificationDetail" class="notification-detail">
+        <div class="detail-header">
+          <h3>{{ notificationDetail.title }}</h3>
+          <div class="detail-meta">
+            <span class="department">{{ notificationDetail.department }}</span>
+            <span class="time">{{ formatTime(notificationDetail.publishTime) }}</span>
+            <span class="read-count">{{ notificationDetail.readCount }}人已读</span>
+          </div>
+        </div>
+        <div class="detail-content">
+          <p>{{ notificationDetail.summary }}</p>
+          <div class="detail-actions">
+            <a-button type="primary" @click="markAsRead(notificationDetail)">
+              标记为已读
+            </a-button>
+            <a-button @click="notificationDialogVisible = false">关闭</a-button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 任务详情弹窗 -->
+    <a-modal
+      v-model:open="taskDialogVisible"
+      title="任务详情"
+      width="600px"
+      :footer="null"
+    >
+      <div v-if="taskDetail" class="task-detail">
+        <div class="detail-header">
+          <h3>{{ taskDetail.title }}</h3>
+          <div class="detail-meta">
+            <a-tag :color="getStatusTagType(taskDetail.status)">
+              {{ getStatusText(taskDetail.status) }}
+            </a-tag>
+            <span class="deadline">截止时间：{{ formatTime(taskDetail.deadline) }}</span>
+          </div>
+        </div>
+        <div class="detail-content">
+          <div class="task-info">
+            <p><strong>发布时间：</strong>{{ formatTime(taskDetail.publishTime) }}</p>
+            <p><strong>截止时间：</strong>{{ formatTime(taskDetail.deadline) }}</p>
+            <p><strong>任务状态：</strong>{{ getStatusText(taskDetail.status) }}</p>
+          </div>
+          <div class="detail-actions">
+            <a-button 
+              v-if="taskDetail.status === 'pending'"
+              type="primary" 
+              @click="startTask(taskDetail); taskDialogVisible = false"
+            >
+              开始任务
+            </a-button>
+            <a-button 
+              v-else-if="taskDetail.status === 'in_progress'"
+              type="default"
+              @click="continueTask(taskDetail)"
+            >
+              继续任务
+            </a-button>
+            <a-button @click="taskDialogVisible = false">关闭</a-button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 审批详情弹窗 -->
+    <a-modal
+      v-model:open="approvalDialogVisible"
+      title="审批详情"
+      width="600px"
+      :footer="null"
+    >
+      <div v-if="approvalDetail" class="approval-detail">
+        <div class="detail-header">
+          <h3>{{ approvalDetail.type }}</h3>
+          <div class="detail-meta">
+            <span class="applicant">{{ approvalDetail.applicant }}</span>
+            <span class="department">{{ approvalDetail.department }}</span>
+            <span class="time">{{ formatTime(approvalDetail.submitTime) }}</span>
+          </div>
+        </div>
+        <div class="detail-content">
+          <div class="approval-info">
+            <p><strong>申请人：</strong>{{ approvalDetail.applicant }}</p>
+            <p><strong>所属部门：</strong>{{ approvalDetail.department }}</p>
+            <p><strong>申请时间：</strong>{{ formatTime(approvalDetail.submitTime) }}</p>
+            <p><strong>申请内容：</strong>{{ approvalDetail.content }}</p>
+          </div>
+          <div class="detail-actions">
+            <a-button type="primary" @click="approveAction(approvalDetail); approvalDialogVisible = false">
+              审批通过
+            </a-button>
+            <a-button danger @click="rejectApproval(approvalDetail)">
+              审批拒绝
+            </a-button>
+            <a-button @click="approvalDialogVisible = false">关闭</a-button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 结果详情弹窗 -->
+    <a-modal
+      v-model:open="resultDialogVisible"
+      title="考核结果详情"
+      width="600px"
+      :footer="null"
+    >
+      <div v-if="resultDetail" class="result-detail">
+        <div class="detail-header">
+          <h3>{{ resultDetail.title }}</h3>
+          <div class="detail-meta">
+            <span class="department">{{ resultDetail.department }}</span>
+            <span class="period">{{ resultDetail.period }}</span>
+            <span class="view-count">{{ resultDetail.viewCount }}人查看</span>
+          </div>
+        </div>
+        <div class="detail-content">
+          <div class="result-info">
+            <p><strong>发布单位：</strong>{{ resultDetail.department }}</p>
+            <p><strong>考核周期：</strong>{{ resultDetail.period }}</p>
+            <p><strong>发布时间：</strong>{{ formatTime(resultDetail.publishTime) }}</p>
+            <p><strong>查看人数：</strong>{{ resultDetail.viewCount }}人</p>
+          </div>
+          <div class="detail-actions">
+            <a-button type="primary" @click="viewFullResult(resultDetail)">
+              查看完整结果
+            </a-button>
+            <a-button @click="resultDialogVisible = false">关闭</a-button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 评优详情弹窗 -->
+    <a-modal
+      v-model:open="excellentDialogVisible"
+      title="评优详情"
+      width="500px"
+      :footer="null"
+    >
+      <div v-if="excellentDetail" class="excellent-detail">
+        <div class="detail-header">
+          <div class="excellent-avatar">
+            <a-avatar :size="60" :src="excellentDetail.photo">
+              {{ excellentDetail.name.charAt(0) }}
+            </a-avatar>
+          </div>
+          <div class="excellent-info">
+            <h3>{{ excellentDetail.name }}</h3>
+            <p class="department">{{ excellentDetail.department }}</p>
+            <a-tag color="success" :style="{ fontSize: '14px' }">{{ excellentDetail.grade }}</a-tag>
+          </div>
+        </div>
+        <div class="detail-content">
+          <div class="excellent-details">
+            <p><strong>姓名：</strong>{{ excellentDetail.name }}</p>
+            <p><strong>部门：</strong>{{ excellentDetail.department }}</p>
+            <p><strong>考核等次：</strong>{{ excellentDetail.grade }}</p>
+            <p><strong>考核周期：</strong>{{ excellentDetail.period }}</p>
+          </div>
+          <div class="detail-actions">
+            <a-button type="primary" @click="viewFullExcellent(excellentDetail)">
+              查看详细资料
+            </a-button>
+            <a-button @click="excellentDialogVisible = false">关闭</a-button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 经验详情弹窗 -->
+    <a-modal
+      v-model:open="experienceDialogVisible"
+      title="经验分享详情"
+      width="600px"
+      :footer="null"
+    >
+      <div v-if="experienceDetail" class="experience-detail">
+        <div class="detail-header">
+          <h3>{{ experienceDetail.title }}</h3>
+          <div class="detail-meta">
+            <span class="department">{{ experienceDetail.department }}</span>
+            <span class="time">{{ formatTime(experienceDetail.publishTime) }}</span>
+            <span class="view-count">{{ experienceDetail.viewCount }}人查看</span>
+          </div>
+        </div>
+        <div class="detail-content">
+          <div class="experience-info">
+            <p><strong>发布单位：</strong>{{ experienceDetail.department }}</p>
+            <p><strong>发布时间：</strong>{{ formatTime(experienceDetail.publishTime) }}</p>
+            <p><strong>查看人数：</strong>{{ experienceDetail.viewCount }}人</p>
+            <div class="experience-summary">
+              <p><strong>经验摘要：</strong></p>
+              <p>{{ experienceDetail.summary }}</p>
+            </div>
+          </div>
+          <div class="detail-actions">
+            <a-button type="primary" @click="viewFullExperience(experienceDetail)">
+              查看完整内容
+            </a-button>
+            <a-button @click="experienceDialogVisible = false">关闭</a-button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { 
+  Button,
+  Select,
+  Tag,
+  Badge,
+  Avatar,
+  Modal
+} from 'ant-design-vue';
+
+export default defineComponent({
+  name: 'Analytics',
+  components: {
+    AButton: Button,
+    ASelect: Select,
+    ASelectOption: Select.Option,
+    ATag: Tag,
+    ABadge: Badge,
+    AAvatar: Avatar,
+    AModal: Modal
+  }
+});
+</script>
+
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { message } from 'ant-design-vue';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { 
+  ReloadOutlined,
+  BellOutlined,
+  WarningOutlined,
+  FileTextOutlined,
+  ClockCircleOutlined,
+  CheckCircleOutlined,
+  TrophyOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  EditOutlined
+} from '@ant-design/icons-vue';
+import dayjs from 'dayjs';
+
+const router = useRouter();
+
+// ECharts 引用
+const completionRateChartRef = ref<EchartsUIType>();
+const gradeDistributionChartRef = ref<EchartsUIType>();
+const { renderEcharts: renderCompletionRate } = useEcharts(completionRateChartRef);
+const { renderEcharts: renderGradeDistribution } = useEcharts(gradeDistributionChartRef);
+
+// 模拟数据
+const dashboardData = {
+  overview: {
+    totalTasks: 128,
+    pendingTasks: 23,
+    completedTasks: 95,
+    excellentCount: 34,
+  },
+  
+  completionRate: {
+    departments: [
+      { name: '办公室', rate: 95 },
+      { name: '人事处', rate: 88 },
+      { name: '财务处', rate: 92 },
+      { name: '行政科', rate: 85 },
+      { name: '综合科', rate: 90 },
+      { name: '业务科', rate: 87 },
+    ],
+  },
+  
+  gradeDistribution: [
+    { name: '优秀', value: 34 },
+    { name: '良好', value: 56 },
+    { name: '合格', value: 32 },
+    { name: '待改进', value: 6 },
+  ],
+  
+  notifications: [
+    {
+      id: 1,
+      title: '2024年度第四季度考核通知',
+      department: '人事处',
+      publishTime: '2024-11-01 09:00:00',
+      readCount: 156,
+      isImportant: true,
+      summary: '根据年度考核计划，现开展第四季度考核工作...',
+    },
+    {
+      id: 2,
+      title: '关于开展中层干部年度考核的通知',
+      department: '组织部',
+      publishTime: '2024-10-28 14:30:00',
+      readCount: 203,
+      isImportant: true,
+      summary: '为全面了解中层干部履职情况...',
+    },
+    {
+      id: 3,
+      title: '年度考核材料提交截止时间提醒',
+      department: '人事处',
+      publishTime: '2024-10-25 10:00:00',
+      readCount: 187,
+      isImportant: false,
+      summary: '请各部门于本月底前提交考核材料...',
+    },
+    {
+      id: 4,
+      title: '考核系统维护公告',
+      department: '信息中心',
+      publishTime: '2024-10-20 16:00:00',
+      readCount: 142,
+      isImportant: false,
+      summary: '系统将于本周六进行维护升级...',
+    },
+  ],
+  
+  tasks: [
+    {
+      id: 1,
+      title: '完成个人年度工作总结',
+      publishTime: '2024-11-01 09:00:00',
+      deadline: '2024-11-15 18:00:00',
+      status: 'pending',
+    },
+    {
+      id: 2,
+      title: '填写年度考核自评表',
+      publishTime: '2024-10-28 10:00:00',
+      deadline: '2024-11-10 18:00:00',
+      status: 'in_progress',
+    },
+    {
+      id: 3,
+      title: '提交部门业绩考核材料',
+      publishTime: '2024-10-25 14:00:00',
+      deadline: '2024-11-08 18:00:00',
+      status: 'in_progress',
+    },
+    {
+      id: 4,
+      title: '参加年度考核培训',
+      publishTime: '2024-10-20 09:00:00',
+      deadline: '2024-10-30 18:00:00',
+      status: 'completed',
+    },
+  ],
+  
+  pendingApprovals: [
+    {
+      id: 1,
+      type: '年度考核结果审批',
+      applicant: '张三',
+      department: '办公室',
+      submitTime: '2024-11-05 10:30:00',
+      content: '申请审批办公室2024年度考核结果，共涉及15人...',
+    },
+    {
+      id: 2,
+      type: '考核等次调整申请',
+      applicant: '李四',
+      department: '人事处',
+      submitTime: '2024-11-04 14:20:00',
+      content: '因特殊贡献，申请将考核等次由"良好"调整为"优秀"...',
+    },
+    {
+      id: 3,
+      type: '延期提交材料申请',
+      applicant: '王五',
+      department: '财务处',
+      submitTime: '2024-11-03 09:15:00',
+      content: '因工作原因，申请延期3天提交考核材料...',
+    },
+  ],
+  
+  resultAnnouncements: [
+    {
+      id: 1,
+      title: '2024年第三季度考核结果公示',
+      department: '人事处',
+      period: '2024年第三季度',
+      publishTime: '2024-10-15 10:00:00',
+      viewCount: 342,
+    },
+    {
+      id: 2,
+      title: '2024年上半年度考核结果公示',
+      department: '人事处',
+      period: '2024年上半年',
+      publishTime: '2024-07-10 10:00:00',
+      viewCount: 456,
+    },
+    {
+      id: 3,
+      title: '2024年第一季度考核结果公示',
+      department: '人事处',
+      period: '2024年第一季度',
+      publishTime: '2024-04-10 10:00:00',
+      viewCount: 389,
+    },
+  ],
+  
+  excellentResults: [
+    {
+      id: 1,
+      name: '张伟',
+      department: '办公室',
+      grade: '优秀',
+      period: '2024年第三季度',
+      photo: '',
+    },
+    {
+      id: 2,
+      name: '李娜',
+      department: '人事处',
+      grade: '优秀',
+      period: '2024年第三季度',
+      photo: '',
+    },
+    {
+      id: 3,
+      name: '王强',
+      department: '财务处',
+      grade: '优秀',
+      period: '2024年第三季度',
+      photo: '',
+    },
+    {
+      id: 4,
+      name: '刘敏',
+      department: '行政科',
+      grade: '优秀',
+      period: '2024年第三季度',
+      photo: '',
+    },
+  ],
+  
+  experienceSharing: [
+    {
+      id: 1,
+      title: '创新考核方式，提升工作效能',
+      department: '办公室',
+      publishTime: '2024-10-20 15:00:00',
+      viewCount: 234,
+      summary: '通过创新考核方式和方法，有效提升了部门整体工作效能...',
+    },
+    {
+      id: 2,
+      title: '数字化转型助力精准考核',
+      department: '信息中心',
+      publishTime: '2024-10-18 10:30:00',
+      viewCount: 198,
+      summary: '利用数字化手段，实现考核过程的精准化和科学化...',
+    },
+    {
+      id: 3,
+      title: '建立多维度考核指标体系经验分享',
+      department: '人事处',
+      publishTime: '2024-10-15 14:00:00',
+      viewCount: 267,
+      summary: '构建科学合理的多维度考核指标体系，全面评价工作绩效...',
+    },
+  ],
+};
+
+// 数据状态
+const completionPeriod = ref('quarter');
+const loading = ref(false);
+const hasApprovalPermission = ref(true); // 模拟权限
+
+// 详情弹窗状态
+const notificationDialogVisible = ref(false);
+const taskDialogVisible = ref(false);
+const approvalDialogVisible = ref(false);
+const resultDialogVisible = ref(false);
+const excellentDialogVisible = ref(false);
+const experienceDialogVisible = ref(false);
+
+// 详情数据
+const notificationDetail = ref<any>(null);
+const taskDetail = ref<any>(null);
+const approvalDetail = ref<any>(null);
+const resultDetail = ref<any>(null);
+const excellentDetail = ref<any>(null);
+const experienceDetail = ref<any>(null);
+
+// 概览数据
+const overviewData = computed(() => [
+  {
+    key: 'totalTasks',
+    label: '考核任务数',
+    value: dashboardData.overview.totalTasks,
+    icon: FileTextOutlined,
+    trend: 'up',
+    trendIcon: ArrowUpOutlined,
+    trendText: '+12%'
+  },
+  {
+    key: 'pendingTasks',
+    label: '待办任务数',
+    value: dashboardData.overview.pendingTasks,
+    icon: ClockCircleOutlined,
+    trend: 'down',
+    trendIcon: ArrowDownOutlined,
+    trendText: '-8%'
+  },
+  {
+    key: 'completedTasks',
+    label: '已完成任务数',
+    value: dashboardData.overview.completedTasks,
+    icon: CheckCircleOutlined,
+    trend: 'up',
+    trendIcon: ArrowUpOutlined,
+    trendText: '+15%'
+  },
+  {
+    key: 'excellentCount',
+    label: '评优数',
+    value: dashboardData.overview.excellentCount,
+    icon: TrophyOutlined,
+    trend: 'up',
+    trendIcon: ArrowUpOutlined,
+    trendText: '+5%'
+  }
+]);
+
+// 通知数据
+const notifications = computed(() => dashboardData.notifications);
+
+// 任务数据
+const tasks = ref([...dashboardData.tasks]);
+
+// 待批事项数据
+const pendingApprovals = ref([...dashboardData.pendingApprovals]);
+
+// 考核结果公示数据
+const resultAnnouncements = computed(() => dashboardData.resultAnnouncements);
+
+// 评优结果数据
+const excellentResults = computed(() => dashboardData.excellentResults);
+
+// 先进经验分享数据
+const experienceSharing = computed(() => dashboardData.experienceSharing);
+
+// 格式化时间
+const formatTime = (timeStr: string) => {
+  return dayjs(timeStr).format('MM-DD HH:mm');
+};
+
+// 获取状态图标
+const getStatusIcon = (status: string) => {
+  const iconMap: Record<string, any> = {
+    pending: ClockCircleOutlined,
+    in_progress: EditOutlined,
+    completed: CheckCircleOutlined
+  };
+  return iconMap[status] || FileTextOutlined;
+};
+
+// 获取状态标签类型
+const getStatusTagType = (status: string) => {
+  const typeMap: Record<string, string> = {
+    pending: 'default',
+    in_progress: 'warning',
+    completed: 'success'
+  };
+  return typeMap[status] || 'default';
+};
+
+// 获取状态文本
+const getStatusText = (status: string) => {
+  const textMap: Record<string, string> = {
+    pending: '待开始',
+    in_progress: '进行中',
+    completed: '已完成'
+  };
+  return textMap[status] || '未知';
+};
+
+// 标记通知为已读
+const markAsRead = (notification: any) => {
+  message.success('已标记为已读');
+  notificationDialogVisible.value = false;
+};
+
+// 拒绝审批
+const rejectApproval = (approval: any) => {
+  message.warning(`审批拒绝：${approval.type}`);
+  const index = pendingApprovals.value.findIndex(item => item.id === approval.id);
+  if (index > -1) {
+    pendingApprovals.value.splice(index, 1);
+  }
+  approvalDialogVisible.value = false;
+};
+
+// 查看完整结果
+const viewFullResult = (result: any) => {
+  message.info('跳转到完整结果页面');
+  resultDialogVisible.value = false;
+  router.push(`/results?resultId=${result.id}`);
+};
+
+// 查看详细评优资料
+const viewFullExcellent = (excellent: any) => {
+  message.info('跳转到详细资料页面');
+  excellentDialogVisible.value = false;
+  router.push(`/results?excellentId=${excellent.id}`);
+};
+
+// 查看完整经验内容
+const viewFullExperience = (experience: any) => {
+  message.info('跳转到完整内容页面');
+  experienceDialogVisible.value = false;
+  router.push(`/publish?experienceId=${experience.id}`);
+};
+
+
+
+// 查看通知详情
+const viewNotification = (notification: any) => {
+  console.log('查看通知详情', notification);
+  notificationDetail.value = notification;
+  notificationDialogVisible.value = true;
+  message.info('打开通知详情');
+};
+
+// 查看任务详情
+const viewTask = (task: any) => {
+  console.log('查看任务详情', task);
+  taskDetail.value = task;
+  taskDialogVisible.value = true;
+  message.info('打开任务详情');
+};
+
+// 开始任务
+const startTask = (task: any) => {
+  message.success(`开始任务：${task.title}`);
+  task.status = 'in_progress';
+};
+
+// 继续任务
+const continueTask = (task: any) => {
+  message.info(`继续任务：${task.title}`);
+  router.push(`/assessment?taskId=${task.id}`);
+};
+
+// 查看审批详情
+const viewApproval = (approval: any) => {
+  console.log('查看审批详情', approval);
+  approvalDetail.value = approval;
+  approvalDialogVisible.value = true;
+  message.info('打开审批详情');
+};
+
+// 审批通过
+const approve = (approval: any) => {
+  message.success(`审批通过：${approval.type}`);
+  const index = pendingApprovals.value.findIndex(item => item.id === approval.id);
+  if (index > -1) {
+    pendingApprovals.value.splice(index, 1);
+  }
+};
+
+// 审批操作
+const approveAction = (approval: any) => {
+  approve(approval);
+};
+
+// 查看结果详情
+const viewResult = (result: any) => {
+  console.log('查看结果详情', result);
+  resultDetail.value = result;
+  resultDialogVisible.value = true;
+  message.info('打开结果详情');
+};
+
+// 查看评优详情
+const viewExcellent = (excellent: any) => {
+  console.log('查看评优详情', excellent);
+  excellentDetail.value = excellent;
+  excellentDialogVisible.value = true;
+  message.info('打开评优详情');
+};
+
+// 查看经验详情
+const viewExperience = (experience: any) => {
+  console.log('查看经验详情', experience);
+  experienceDetail.value = experience;
+  experienceDialogVisible.value = true;
+  message.info('打开经验详情');
+};
+
+// 跳转到各个模块
+// const goToNotifications = () => router.push('/publish?tab=notifications');
+// const goToTasks = () => router.push('/assessment?tab=tasks');
+// const goToApprovals = () => router.push('/assessment?tab=approvals');
+// const goToResults = () => router.push('/results?tab=announcements');
+// const goToExcellent = () => router.push('/results?tab=excellent');
+// const goToExperience = () => router.push('/publish?tab=experience');
+const goToNotifications = () =>  message.success('跳转到通知模块');
+const goToTasks = () =>  message.success('跳转到任务模块');
+const goToApprovals = () =>  message.success('跳转到审批模块');
+const goToResults = () =>  message.success('跳转到结果模块');
+const goToExcellent = () =>  message.success('跳转到评优模块');
+const goToExperience = () =>  message.success('跳转到经验模块');
+
+// 初始化图表
+onMounted(() => {
+  // 渲染考核完成率图表
+  renderCompletionRate({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: dashboardData.completionRate.departments.map(d => d.name),
+      axisLabel: {
+        rotate: 45
+      }
+    },
+    yAxis: {
+      type: 'value',
+      max: 100,
+      axisLabel: {
+        formatter: '{value}%'
+      }
+    },
+    series: [{
+      name: '完成率',
+      type: 'bar',
+      data: dashboardData.completionRate.departments.map(d => d.rate),
+      itemStyle: {
+        color: '#667eea'
+      },
+      barWidth: '60%'
+    }]
+  });
+
+  // 渲染考核等次分布图表
+  renderGradeDistribution({
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+      data: dashboardData.gradeDistribution.map(item => item.name)
+    },
+    series: [{
+      name: '考核等次',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      center: ['60%', '50%'],
+      data: dashboardData.gradeDistribution,
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }]
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  .page-container {
+    padding: 16px;
+    background: #f5f7fa;
+    min-height: 100vh;
+  }
+}
+
+.overview-section {
+  margin-bottom: 16px;
+  
+  .section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    
+    h2 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #303133;
+      margin: 0;
+    }
+  }
+  
+  .overview-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
+  }
+}
+
+.data-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-radius: 16px;
+  padding: 10px 24px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
+  }
+  
+  .card-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    opacity: 0.3;
+  }
+  
+  .card-content {
+    margin-bottom: 10px;
+    
+    .card-value {
+      font-size: 32px;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+    
+    .card-label {
+      font-size: 14px;
+      opacity: 0.9;
+    }
+  }
+  
+  .card-trend {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+    opacity: 0.9;
+    
+    &.up {
+      color: #52c41a;
+    }
+    
+    &.down {
+      color: #ff4d4f;
+    }
+  }
+}
+
+.charts-section {
+  margin-bottom: 16px;
+  
+  .chart-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+  
+  .chart-card {
+    background: #fff;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    border: 1px solid #f0f0f0;
+    
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      
+      h3 {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.content-section {
+  .content-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  
+  .content-card {
+    background: #fff;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    border: 1px solid #f0f0f0;
+    min-height: 350px;
+    display: flex;
+    flex-direction: column;
+    
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      flex-shrink: 0;
+      
+      h3 {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.notification-list,
+.task-list,
+.approval-list,
+.result-list,
+.excellent-list,
+.experience-list {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 280px;
+  padding-right: 4px;
+  
+  // 自定义滚动条样式
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #bfbfbf;
+    border-radius: 3px;
+    
+    &:hover {
+      background: #999;
+    }
+  }
+}
+
+// 统一的列表项卡片样式
+.list-item-card {
+  display: flex;
+  align-items: center;
+  padding: 14px 16px;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1px solid #e8e8e8;
+  background: #fafafa;
+  min-height: 72px;
+  
+  &:hover {
+    background: #fff;
+    border-color: #1890ff;
+    transform: translateX(2px);
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.12);
+  }
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// 统一的元标签样式
+.meta-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #595959;
+  margin-right: 8px;
+}
+
+.meta-info {
+  font-size: 12px;
+  color: #8c8c8c;
+  margin-right: 8px;
+}
+
+.meta-time {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+// 考核通知样式
+.notification-item {
+  &.important {
+    border-left: 3px solid #ff4d4f !important;
+    
+    .notification-icon-wrapper {
+      position: relative;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        width: 8px;
+        height: 8px;
+        background: #ff4d4f;
+        border-radius: 50%;
+        border: 2px solid #fff;
+      }
+    }
+  }
+  
+  .notification-icon-wrapper {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #f0f5ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-right: 12px;
+  }
+  
+  .notification-main {
+    flex: 1;
+    min-width: 0;
+    
+    .notification-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #262626;
+      margin-bottom: 6px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .notification-meta {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .notification-time-badge {
+    flex-shrink: 0;
+    padding: 4px 8px;
+    background: #f0f0f0;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #595959;
+    margin-left: 12px;
+  }
+}
+
+// 考核任务样式
+.task-item {
+  .task-status-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    flex-shrink: 0;
+    margin-right: 12px;
+    
+    &.pending {
+      background: #e6f7ff;
+      color: #1890ff;
+    }
+    
+    &.in_progress {
+      background: #fff7e6;
+      color: #faad14;
+    }
+    
+    &.completed {
+      background: #f6ffed;
+      color: #52c41a;
+    }
+  }
+  
+  .task-main {
+    flex: 1;
+    min-width: 0;
+    
+    .task-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #262626;
+      margin-bottom: 6px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .task-meta {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .task-action {
+    flex-shrink: 0;
+    margin-left: 12px;
+  }
+}
+
+// 待批事项样式
+.approval-item {
+  .approval-type-tag {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    margin-right: 12px;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  
+  .approval-main {
+    flex: 1;
+    min-width: 0;
+    
+    .approval-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #262626;
+      margin-bottom: 6px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .approval-meta {
+      display: flex;
+      align-items: center;
+    }
+  }
+  
+  .approval-action {
+    flex-shrink: 0;
+    margin-left: 12px;
+  }
+}
+
+// 考核结果公示样式
+.result-item {
+  align-items: flex-start;
+  
+  .result-main {
+    flex: 1;
+    min-width: 0;
+    
+    .result-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #262626;
+      margin-bottom: 8px;
+      line-height: 1.5;
+    }
+    
+    .result-meta {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .result-time-badge {
+    flex-shrink: 0;
+    padding: 4px 8px;
+    background: #e6f7ff;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #1890ff;
+    margin-left: 12px;
+  }
+}
+
+// 评优结果样式
+.excellent-item {
+  .excellent-avatar {
+    flex-shrink: 0;
+  }
+  
+  .excellent-main {
+    flex: 1;
+    min-width: 0;
+    margin-left: 12px;
+    
+    .excellent-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #262626;
+      margin-bottom: 6px;
+    }
+    
+    .excellent-meta {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .excellent-badge {
+    flex-shrink: 0;
+    margin-left: 12px;
+  }
+}
+
+// 先进经验分享样式
+.experience-item {
+  align-items: flex-start;
+  
+  .experience-main {
+    flex: 1;
+    min-width: 0;
+    
+    .experience-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #262626;
+      margin-bottom: 8px;
+      line-height: 1.5;
+    }
+    
+    .experience-meta {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .experience-time-badge {
+    flex-shrink: 0;
+    padding: 4px 8px;
+    background: #f0f0f0;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #595959;
+    margin-left: 12px;
+  }
+}
+
+// 详情弹窗样式
+.notification-detail,
+.task-detail,
+.approval-detail,
+.result-detail,
+.excellent-detail,
+.experience-detail {
+  .detail-header {
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+    
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #303133;
+      margin: 0 0 12px 0;
+    }
+    
+    .detail-meta {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      font-size: 14px;
+      color: #8c8c8c;
+      
+      .department,
+      .applicant,
+      .time,
+      .deadline,
+      .period,
+      .read-count,
+      .view-count {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+    }
+  }
+  
+  .detail-content {
+    .task-info,
+    .approval-info,
+    .result-info,
+    .excellent-details,
+    .experience-info {
+      margin-bottom: 20px;
+      
+      p {
+        margin: 8px 0;
+        font-size: 14px;
+        color: #595959;
+        line-height: 1.6;
+        
+        strong {
+          color: #303133;
+          font-weight: 600;
+        }
+      }
+    }
+    
+    .experience-summary {
+      margin-top: 16px;
+      padding: 12px;
+      background: #f8f9fa;
+      border-radius: 6px;
+      border-left: 4px solid #1890ff;
+    }
+    
+    .detail-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      padding-top: 16px;
+      border-top: 1px solid #f0f0f0;
+    }
+  }
+}
+
+.excellent-detail {
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    
+    .excellent-avatar {
+      flex-shrink: 0;
+    }
+    
+    .excellent-info {
+      flex: 1;
+      
+      h3 {
+        margin: 0 0 8px 0;
+        font-size: 20px;
+        font-weight: 600;
+        color: #303133;
+      }
+      
+      .department {
+        margin: 0 0 12px 0;
+        font-size: 14px;
+        color: #8c8c8c;
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .charts-section .chart-row {
+    grid-template-columns: 1fr !important;
+  }
+  
+  .content-section .content-row {
+    grid-template-columns: 1fr !important;
+  }
+  
+  .content-card {
+    min-height: auto !important;
+  }
+  
+  .notification-list,
+  .task-list,
+  .approval-list,
+  .result-list,
+  .excellent-list,
+  .experience-list {
+    max-height: 250px;
+  }
+}
+
+@media (max-width: 768px) {
+  .dashboard .page-container {
+    padding: 12px;
+  }
+  
+  .overview-section .overview-cards {
+    grid-template-columns: 1fr !important;
+  }
+  
+  .data-card {
+    padding: 16px;
+    
+    .card-content .card-value {
+      font-size: 24px;
+    }
+  }
+  
+  .chart-card,
+  .content-card {
+    padding: 12px;
+    min-height: auto !important;
+  }
+  
+  .notification-list,
+  .task-list,
+  .approval-list,
+  .result-list,
+  .excellent-list,
+  .experience-list {
+    max-height: 200px;
+  }
+}
+</style>
diff --git a/apps/web-antd/vite.config.mts b/apps/web-antd/vite.config.mts
index 11195f7..e92f160 100644
--- a/apps/web-antd/vite.config.mts
+++ b/apps/web-antd/vite.config.mts
@@ -2,7 +2,7 @@
  * @Author: Mm
  * @Date: 2025-02-22 09:28:38
  * @LastEditors: Mm
- * @LastEditTime: 2025-03-13 17:23:32
+ * @LastEditTime: 2025-11-08 10:33:53
  * @remarker:
  */
 import { defineConfig } from '@vben/vite-config';
@@ -35,7 +35,7 @@ export default defineConfig(async () => {
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
             // target: 'http://192.168.0.10:8087',
-            target: 'http://192.168.0.61:8080',
+            target: 'http://192.168.0.58:8081',
             // target: 'http://localhost:8080',
             ws: true,
           },