diff --git a/frontend/README.md b/frontend/README.md
index 2ef7f88..9aa850c 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -188,15 +188,15 @@ E2E_ADMIN_PASSWORD=<开发库admin密码> python e2e/system_management.py
 | 页面 | 说明 |
 | --- | --- |
 | `/reports/personal-detail` 个人绩效明细（新组「报表统计」order19） | 人员/月份/客户类型/产品类别/岗位筛选；需规 2.4.1 全部列；行展开懒加载台账快照；页脚**全筛选合计**（注明非当前页）；导出/打印 |
-| `/reports/department-summary` 部门绩效汇总（order20） | 月份必填；全公司 5% 独立卡片；团队表（基数/12.5%/5%/占比/调整/净合计/月结冻结额）；展开成员 → 跨页下钻个人明细；未分配桶 |
+| `/reports/department-summary` 部门绩效汇总（order20） | 月份必填；全公司分成独立卡片；团队表（基数/团队分成/全公司分成/占比/调整/净合计/月结冻结额），比例列头随在线参数变化；展开成员 → 跨页下钻个人明细（人员与月份带入筛选）；未分配桶（按经理筛选时为空） |
 | `/reports/business-stats` 业务统计（order21） | 关键字/客户/归属人/状态/业务日期；发货额/回款额/绩效（累计口径提示）；展开下钻回款与台账明细 |
 | `/reports/payment-stats` 回款统计（order22） | 月份/回款日期/客户类型/产品类别；8 档区间表（空桶 0，档位由后端下发）；展开桶下钻分页明细；客户类型/产品类别对比表 |
-| `/reports/print/:code` 报表打印（顶层路由，`menu:false`） | 不挂 BasicLayout（打印不带侧栏/顶栏）；页眉公司信息走 public 端点；循环翻页取全量（上限 2000 行截断提示）；`@media print` A4 横版 + 每页表头；签字栏；PDF 由浏览器「另存为」覆盖 |
+| `/reports/print/:code` 报表打印（顶层路由，`menu:false`） | 不挂 BasicLayout（打印不带侧栏/顶栏）；页眉公司信息走 public 端点；循环翻页取全量（以接口 total 判定超过 2000 行并提示截断）；部门汇总按「团队分成 → 全公司 5% → 对账 → 成员明细 → 未分配」五块渲染；`@media print` A4 横版 + 每页表头；签字栏；PDF 由浏览器「另存为」覆盖 |
 
 - 路由组「报表统计」四页 `allowedRoles: [admin, finance, leader]`（前端菜单 + 后端 `require_roles` 双层；admin 须显式列入）。
 - api 封装 `src/api/reports.ts`（类型 + 查询 + `exportReport` 裸 axios blob；产品类别标签额外覆盖 `mixed`）。
 - 权限：营销后勤「授权范围内」待业务权限清单 #6，当前不开放报表。
-- type-check 与 build 通过（2026-10-19）。e2e `report_flow.py` 待补（需 `E2E_ADMIN_PASSWORD` 环境）。
+- type-check 与 build 通过（2026-10-19）。e2e `report_flow.py` 已补 12 步：登录 → API 造数 → 四表筛选/导出下载 → 部门下钻筛选生效 → 回款多桶同时展开互不串行 → 打印视图 → 打印截断提示 → 部门汇总打印五块结构；需 `E2E_ADMIN_PASSWORD` 且前后端在跑。
 
 ## 端到端测试（2026-10-19 追加 · M3 台账与月结）
 
@@ -210,3 +210,19 @@ E2E_ADMIN_PASSWORD=<开发库admin密码> python e2e/system_management.py
 ② 三页均无 `onMounted` 初始加载 → 进页不取数；补 `onMounted(() => void load())`。
 ③ 三页 `AppPagination` 用 `v-model:page-num` + `@change`（组件无该事件、也未实现 `update:*`）→ 翻页失效；统一为 `:page-num/:page-size` + `@page-change/@size-change`（usePagedList 的 onPageChange/onSizeChange）。
 **注意**：e2e 与 `pytest tests/integration` **不可并发**——conftest 每用例整体清空开发库，会清掉 e2e 造的数据造成假失败（本次排查耗时即源于此，两次假失败的报错均为「台账行消失 / 401 登录失效」）。
+
+## 前端页面（2026-10-19 追加 · M4 ⑧ 工作台）
+
+`/dashboard` 由 Bento 占位升级为工作台四区块（**一次聚合请求** `/api/v1/dashboard`）：
+
+| 区块 | 展示 |
+| --- | --- |
+| 经营绩效总览 | KPI 四卡（本月绩效/应付/核算人数/团队数 + 月结状态）；近 6 个月绩效折线 + 回款柱状（ECharts） |
+| 待办事项 | 待审批（跳审批管理）、回款未指定批次（跳回款管理）、T+ 同步失败（未启用显式占位） |
+| 风险预警 | 回款逾期（danger）/ 审批超时（warning），点击跳处理页；总开关关闭时显示参数提示 |
+| 最近动态 | 操作日志时间线，按模块本地筛选 |
+
+- **ECharts 5.6 按需引入**：`echarts/core` + `BarChart/LineChart/Grid/Tooltip` + `SVGRenderer`（与设计预览一致），只注册用到的模块。
+- **字体红线**：图表 `textStyle.fontFamily` 必须显式设为思源黑体栈——ECharts 在 Windows 默认微软雅黑（字体商用合规要求）。
+- 权限：路由 `allowedRoles: [admin, finance, leader]`，与后端 `require_roles` 双层；营销后勤待权限清单 #6。
+- `package.json` 新增依赖 `echarts@5.6.0`（MIT）；type-check 与 build 通过（2026-10-19）。
diff --git a/frontend/package.json b/frontend/package.json
index 0e6d432..5d1bc27 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@vue/devtools-api": "^8.1.5",
     "axios": "^1.20.0",
+    "echarts": "^5.6.0",
     "element-plus": "^2.14.7",
     "pinia": "^4.0.3",
     "vue": "^3.5.43",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 4e7a896..995c85e 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       axios:
         specifier: ^1.20.0
         version: 1.20.0(debug@4.4.3)
+      echarts:
+        specifier: ^5.6.0
+        version: 5.6.0
       element-plus:
         specifier: ^2.14.7
         version: 2.14.7(vue@3.5.43(typescript@5.9.3))
@@ -399,6 +402,9 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
+
   element-plus@2.14.7:
     resolution: {integrity: sha512-lrG7pZyCS+mpCNVpzxxyu5r35+T6V0hzkAeIwn7HA6to772XSTHKuYCZG51OfzlqaxGbNegLxs650zAF1j43gA==}
     peerDependencies:
@@ -693,6 +699,9 @@ packages:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
@@ -828,6 +837,9 @@ packages:
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
+  zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+
 snapshots:
 
   '@babel/helper-string-parser@7.29.7': {}
@@ -1155,6 +1167,11 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  echarts@5.6.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.6.1
+
   element-plus@2.14.7(vue@3.5.43(typescript@5.9.3)):
     dependencies:
       '@ctrl/tinycolor': 4.2.1
@@ -1435,6 +1452,8 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.7)
       picomatch: 4.0.7
 
+  tslib@2.3.0: {}
+
   typescript@5.9.3: {}
 
   ufo@1.6.4: {}
@@ -1521,3 +1540,7 @@ snapshots:
       typescript: 5.9.3
 
   webpack-virtual-modules@0.6.2: {}
+
+  zrender@5.6.1:
+    dependencies:
+      tslib: 2.3.0
diff --git a/frontend/src/api/dashboard.ts b/frontend/src/api/dashboard.ts
new file mode 100644
index 0000000..3dba29e
--- /dev/null
+++ b/frontend/src/api/dashboard.ts
@@ -0,0 +1,96 @@
+import { request } from './request'
+
+/** 近 6 个月趋势点（绩效按台账归属月，回款按到账月） */
+export interface TrendPoint {
+  month: string
+  performance_total: string | null
+  receipt_total: string | null
+}
+
+export interface SettlementBrief {
+  exists: boolean
+  status: number | null
+  total_performance: string | null
+  total_payable: string | null
+  locked_at: string | null
+}
+
+export interface OverviewBlock {
+  month: string
+  performance_total: string | null
+  payable_total: string | null
+  person_count: number
+  team_count: number
+  settlement: SettlementBrief
+  trend: TrendPoint[]
+  note: string
+}
+
+export interface ApprovalTodoItem {
+  order_id: number
+  order_no: string
+  order_type: number
+  submitter_name: string | null
+  create_time: string
+}
+
+export interface ReceiptTodoItem {
+  receipt_id: number
+  receipt_batch_no: string
+  business_id: number
+  business_no: string | null
+  amount: string
+  receipt_date: string
+}
+
+export interface TodoBlock {
+  pending_approval_total: number
+  pending_approvals: ApprovalTodoItem[]
+  unassigned_receipt_total: number
+  unassigned_receipts: ReceiptTodoItem[]
+  sync_available: boolean
+  sync_failure_total: number
+}
+
+export interface WarningItem {
+  code: string
+  level: 'warning' | 'danger'
+  object_type: string
+  object_id: number
+  title: string
+  detail: string
+  suggest: string
+  link: string | null
+}
+
+export interface WarningBlock {
+  enabled: boolean
+  receipt_overdue_days: number
+  approval_timeout_days: number
+  items: WarningItem[]
+  receipt_overdue_total: number
+  approval_timeout_total: number
+  sync_available: boolean
+}
+
+export interface ActivityItem {
+  id: number
+  module: string
+  action: string
+  summary: string
+  username: string | null
+  success: number
+  create_time: string
+}
+
+export interface DashboardData {
+  month: string
+  overview: OverviewBlock
+  todos: TodoBlock
+  warnings: WarningBlock
+  activities: ActivityItem[]
+}
+
+export function getDashboard(params: { month?: string }): Promise<DashboardData> {
+  return request({ url: '/v1/dashboard', method: 'get', params })
+}
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index ee8ea7c..8abf96e 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -38,10 +38,16 @@ const routes: RouteRecordRaw[] = [
     redirect: '/dashboard',
     children: [
       {
+        // 工作台（M4 ⑧）：与报表/审批接口同权限（admin/finance/leader），
+        // 前后端双层；营销后勤可见性待权限清单 #6 答复
         path: '/dashboard',
         name: 'dashboard',
         component: () => import('@/views/dashboard/index.vue'),
-        meta: { title: '首页', order: 1 },
+        meta: {
+          title: '首页',
+          order: 1,
+          allowedRoles: [ROLE_ADMIN, 'finance', 'leader'],
+        },
       },
       {
         path: '/system/users',
diff --git a/frontend/src/views/dashboard/index.vue b/frontend/src/views/dashboard/index.vue
index 07815ca..05a081a 100644
--- a/frontend/src/views/dashboard/index.vue
+++ b/frontend/src/views/dashboard/index.vue
@@ -1,133 +1,372 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import * as echarts from 'echarts/core'
+import { BarChart, LineChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import { SVGRenderer } from 'echarts/renderers'
+import type { ECharts, EChartsCoreOption } from 'echarts/core'
 
-import * as businessRoleApi from '@/api/businessRoles'
-import * as paramsApi from '@/api/params'
+import * as dashboardApi from '@/api/dashboard'
+import type { DashboardData, TrendPoint } from '@/api/dashboard'
 import { handledError } from '@/utils/error'
 
+echarts.use([BarChart, LineChart, GridComponent, TooltipComponent, SVGRenderer])
+
+/**
+ * 工作台（M4 ⑧）：经营绩效总览 / 待办事项 / 风险预警 / 最近动态。
+ *
+ * - 四区块由一次聚合请求返回（后端实时派生，见 dashboard_service 注释）
+ * - 总览图表严格按设计预览：SVG 渲染、无网格线、靛蓝渐变；
+ *   **必须显式设置 fontFamily**——ECharts 在 Windows 默认微软雅黑（字体合规红线）
+ * - ⑥ T+ 同步未建：同步失败待办/同步预警显示「模块未启用」，不显示 0 条
+ */
+
 const router = useRouter()
 
-/**
- * 首页仪表盘（Bento Grid，2026-10-12 视觉方向）。
- *
- * M1 阶段：计提参数与岗位配置已就绪（真实数据）；绩效/回款/待办等业务卡
- * 展示空态 —— 业务数据管理上线后接入真实统计（图表用 ECharts 渲染）。
- * 空态文案遵循全局规范：空态是邀请，说明「这里将出现什么、怎么让它出现」。
- */
-const roleCount = ref<number | null>(null)
-const paramCount = ref<number | null>(null)
-const latestVersion = ref<string | null>(null)
+const CHART_FONT =
+  "'Noto Sans SC','Source Han Sans SC','HarmonyOS Sans SC','PingFang SC',sans-serif"
+
+const SETTLEMENT_STATUS_LABELS: Record<number, string> = {
+  1: '草稿',
+  2: '待审批',
+  3: '已锁定',
+  4: '已驳回',
+}
+const ORDER_TYPE_LABELS: Record<number, string> = {
+  1: '二次分配方案',
+  2: '月度结算',
+  3: '调整单',
+}
+
+const month = ref(currentMonth())
+const data = ref<DashboardData | null>(null)
+const loading = ref(false)
+
+const perfChartRef = ref<HTMLDivElement | null>(null)
+const receiptChartRef = ref<HTMLDivElement | null>(null)
+let perfChart: ECharts | null = null
+let receiptChart: ECharts | null = null
+
+function currentMonth(): string {
+  const now = new Date()
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+}
+
+async function load(): Promise<void> {
+  loading.value = true
+  try {
+    data.value = await dashboardApi.getDashboard({ month: month.value })
+    await nextTick()
+    renderCharts()
+  } catch (error) {
+    handledError(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function renderCharts(): void {
+  const trend = data.value?.overview.trend ?? []
+  if (perfChartRef.value) {
+    perfChart ??= echarts.init(perfChartRef.value, undefined, { renderer: 'svg' })
+    perfChart.setOption(performanceOption(trend))
+  }
+  if (receiptChartRef.value) {
+    receiptChart ??= echarts.init(receiptChartRef.value, undefined, { renderer: 'svg' })
+    receiptChart.setOption(receiptOption(trend))
+  }
+}
+
+function performanceOption(trend: TrendPoint[]): EChartsCoreOption {
+  return {
+    textStyle: { fontFamily: CHART_FONT },
+    grid: { left: 8, right: 12, top: 18, bottom: 4, containLabel: true },
+    tooltip: { trigger: 'axis', valueFormatter: (value: unknown) => Number(value).toFixed(2) },
+    xAxis: {
+      type: 'category',
+      data: trend.map((item) => item.month.slice(5)),
+      axisLine: { lineStyle: { color: 'rgba(28,35,51,.15)' } },
+      axisTick: { show: false },
+      axisLabel: { fontFamily: CHART_FONT, color: '#9aa3b2' },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { show: false },
+      axisLabel: { fontFamily: CHART_FONT, color: '#9aa3b2' },
+    },
+    series: [
+      {
+        name: '绩效',
+        type: 'line',
+        smooth: 0.4,
+        symbol: 'none',
+        data: trend.map((item) => Number(item.performance_total ?? 0)),
+        lineStyle: { color: '#2e4ba8', width: 2 },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(46,75,168,.22)' },
+              { offset: 1, color: 'rgba(46,75,168,0)' },
+            ],
+          },
+        },
+      },
+    ],
+  }
+}
+
+function receiptOption(trend: TrendPoint[]): EChartsCoreOption {
+  return {
+    textStyle: { fontFamily: CHART_FONT },
+    grid: { left: 8, right: 12, top: 18, bottom: 4, containLabel: true },
+    tooltip: { trigger: 'axis', valueFormatter: (value: unknown) => Number(value).toFixed(2) },
+    xAxis: {
+      type: 'category',
+      data: trend.map((item) => item.month.slice(5)),
+      axisLine: { lineStyle: { color: 'rgba(28,35,51,.15)' } },
+      axisTick: { show: false },
+      axisLabel: { fontFamily: CHART_FONT, color: '#9aa3b2' },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { show: false },
+      axisLabel: { fontFamily: CHART_FONT, color: '#9aa3b2' },
+    },
+    series: [
+      {
+        name: '回款',
+        type: 'bar',
+        data: trend.map((item) => Number(item.receipt_total ?? 0)),
+        barMaxWidth: 22,
+        itemStyle: { color: '#2e4ba8', borderRadius: [4, 4, 0, 0] },
+      },
+    ],
+  }
+}
+
+function handleResize(): void {
+  perfChart?.resize()
+  receiptChart?.resize()
+}
 
 onMounted(() => {
-  // 三项统计各自容错：一张卡失败不影响其余卡片
-  void (async () => {
-    try {
-      const page = await businessRoleApi.listBusinessRoles({ pageNum: 1, pageSize: 1 })
-      roleCount.value = page.total
-    } catch (error) {
-      handledError(error)
-    }
-  })()
-  void (async () => {
-    try {
-      const catalog = await paramsApi.getCatalog()
-      paramCount.value = catalog.length
-    } catch (error) {
-      handledError(error)
-    }
-  })()
-  void (async () => {
-    try {
-      const page = await paramsApi.listBatches({ pageNum: 1, pageSize: 1 })
-      latestVersion.value = page.list[0]?.version_no ?? null
-    } catch (error) {
-      handledError(error)
-    }
-  })()
+  void load()
+  window.addEventListener('resize', handleResize)
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  perfChart?.dispose()
+  receiptChart?.dispose()
+})
+
+const activityModule = ref('')
+const activityModules = computed(() => {
+  const modules = new Set((data.value?.activities ?? []).map((item) => item.module))
+  return [...modules]
+})
+const filteredActivities = computed(() =>
+  (data.value?.activities ?? []).filter(
+    (item) => !activityModule.value || item.module === activityModule.value,
+  ),
+)
+
+function go(path: string | null): void {
+  if (path) void router.push(path)
+}
+
+function formatTime(value: string): string {
+  return value.replace('T', ' ').slice(0, 16)
+}
 </script>
 
 <template>
-  <div>
+  <div v-loading="loading">
     <div class="page-head">
-      <h1 class="page-title">仪表盘</h1>
-      <p class="page-desc">系统概览 · 计提参数与岗位配置就绪，业务数据管理上线后接入核算统计</p>
+      <h1 class="page-title">工作台</h1>
+      <p class="page-desc">经营绩效总览 · 待办与风险集中处置 · 最近动态</p>
       <span class="waterline"></span>
     </div>
 
+    <div class="toolbar">
+      <el-date-picker
+        v-model="month"
+        type="month"
+        value-format="YYYY-MM"
+        :clearable="false"
+        style="width: 140px"
+        @change="load"
+      />
+      <el-button type="primary" :loading="loading" @click="load">刷新</el-button>
+      <span class="toolbar-note">{{ data?.overview.note ?? '' }}</span>
+    </div>
+
     <div class="bento">
-      <!-- 绩效总额：业务上线前的空态 -->
-      <div class="bento-card b-2x2">
+      <!-- 经营绩效总览：KPI -->
+      <div class="bento-card">
         <div class="b-eyebrow">本月绩效总额</div>
-        <div class="b-empty">
-          <div class="b-empty-title">暂无核算数据</div>
-          <div class="b-empty-desc">回款录入并核算后，这里将显示本月绩效总额与趋势</div>
+        <div class="b-num">{{ data?.overview.performance_total ?? '—' }}</div>
+      </div>
+      <div class="bento-card">
+        <div class="b-eyebrow">本月应付绩效</div>
+        <div class="b-num">{{ data?.overview.payable_total ?? '—' }}</div>
+      </div>
+      <div class="bento-card">
+        <div class="b-eyebrow">核算人数</div>
+        <div class="b-num">{{ data?.overview.person_count ?? '—' }}<small>人</small></div>
+      </div>
+      <div class="bento-card">
+        <div class="b-eyebrow">营销团队</div>
+        <div class="b-num">{{ data?.overview.team_count ?? '—' }}<small>个</small></div>
+        <div class="b-sub">
+          月结：
+          {{
+            data?.overview.settlement.exists
+              ? SETTLEMENT_STATUS_LABELS[data.overview.settlement.status ?? 0] ?? '—'
+              : '未生成'
+          }}
         </div>
       </div>
 
-      <!-- 回款趋势：业务上线前的空态 -->
+      <!-- 经营绩效总览：图表 -->
+      <div class="bento-card b-2x2">
+        <div class="b-eyebrow">近 6 个月绩效</div>
+        <div ref="perfChartRef" class="chart"></div>
+      </div>
       <div class="bento-card b-2x2">
         <div class="b-eyebrow">近 6 个月回款</div>
-        <div class="b-empty">
-          <div class="b-empty-title">暂无回款数据</div>
-          <div class="b-empty-desc">业务数据管理上线后，此处展示按月回款趋势</div>
+        <div ref="receiptChartRef" class="chart"></div>
+      </div>
+
+      <!-- 待办事项 -->
+      <div class="bento-card b-2x2">
+        <div class="b-eyebrow">
+          待办事项
+          <span class="b-count">{{ data?.todos.pending_approval_total ?? 0 }}</span>
+        </div>
+        <div v-if="data?.todos.pending_approvals.length" class="todo-list">
+          <button
+            v-for="item in data.todos.pending_approvals"
+            :key="item.order_id"
+            class="todo-row"
+            type="button"
+            @click="go('/system/approvals')"
+          >
+            <span class="todo-title">
+              {{ ORDER_TYPE_LABELS[item.order_type] ?? '审批' }} · {{ item.order_no }}
+            </span>
+            <span class="todo-meta">{{ item.submitter_name ?? '—' }} · {{ formatTime(item.create_time) }}</span>
+          </button>
+        </div>
+        <div v-else class="b-empty-mini">无待审批事项</div>
+
+        <div class="b-eyebrow b-eyebrow-gap">
+          回款未指定批次
+          <span class="b-count">{{ data?.todos.unassigned_receipt_total ?? 0 }}</span>
+        </div>
+        <div v-if="data?.todos.unassigned_receipts.length" class="todo-list">
+          <button
+            v-for="item in data.todos.unassigned_receipts"
+            :key="item.receipt_id"
+            class="todo-row"
+            type="button"
+            @click="go('/business/receipts')"
+          >
+            <span class="todo-title">{{ item.receipt_batch_no }} · {{ item.amount }}</span>
+            <span class="todo-meta">业务 {{ item.business_no ?? item.business_id }} · {{ item.receipt_date }}</span>
+          </button>
+        </div>
+        <div v-else class="b-empty-mini">无未指定批次的回款</div>
+
+        <div class="b-eyebrow b-eyebrow-gap">T+ 同步失败</div>
+        <div class="b-empty-mini">
+          {{ data?.todos.sync_available ? `${data.todos.sync_failure_total} 条待处置` : '同步模块未启用（待 T+ 对接）' }}
         </div>
       </div>
 
-      <!-- 待办 -->
-      <div class="bento-card b-2x1">
-        <div class="b-eyebrow">待办</div>
-        <div class="b-empty-mini">业务数据管理上线后，待核算回款会出现在这里</div>
+      <!-- 风险预警 -->
+      <div class="bento-card b-2x2">
+        <div class="b-eyebrow">
+          风险预警
+          <span class="b-count">{{ data?.warnings.items.length ?? 0 }}</span>
+        </div>
+        <div v-if="data && !data.warnings.enabled" class="b-empty-mini">
+          预警已关闭（参数 warning.enabled=0）
+        </div>
+        <div v-else-if="data?.warnings.items.length" class="warning-list">
+          <button
+            v-for="item in data.warnings.items"
+            :key="`${item.code}-${item.object_id}`"
+            class="warning-row"
+            type="button"
+            @click="go(item.link)"
+          >
+            <el-tag
+              size="small"
+              :type="item.level === 'danger' ? 'danger' : 'warning'"
+              disable-transitions
+            >
+              {{ item.level === 'danger' ? '资金' : '时效' }}
+            </el-tag>
+            <span class="warning-title">{{ item.title }}</span>
+            <span class="warning-detail">{{ item.detail }}</span>
+          </button>
+        </div>
+        <div v-else class="b-empty-mini">
+          暂无预警（回款逾期 {{ data?.warnings.receipt_overdue_days ?? 90 }} 天 /
+          审批超时 {{ data?.warnings.approval_timeout_days ?? 3 }} 天）
+        </div>
+        <div class="b-eyebrow b-eyebrow-gap">同步异常预警</div>
+        <div class="b-empty-mini">
+          {{ data?.warnings.sync_available ? '已接入' : '同步模块未启用（待 T+ 对接）' }}
+        </div>
       </div>
 
-      <!-- 营销人员：人员管理上线后接入 -->
-      <div class="bento-card">
-        <div class="b-eyebrow">营销人员</div>
-        <div class="b-empty-mini">人员管理上线后同步</div>
-      </div>
-
-      <!-- 岗位角色：真实数据 -->
-      <div class="bento-card">
-        <div class="b-eyebrow">岗位角色</div>
-        <div class="b-num">{{ roleCount ?? '—' }}<small>个</small></div>
-        <button class="b-link" type="button" @click="router.push('/system/business-roles')">
-          管理 ›
-        </button>
-      </div>
-
-      <!-- 计提参数：真实数据 -->
-      <div class="bento-card">
-        <div class="b-eyebrow">计提参数</div>
-        <div class="b-num">{{ paramCount ?? '—' }}<small>项</small></div>
-        <button class="b-link" type="button" @click="router.push('/system/params')">
-          维护 ›
-        </button>
+      <!-- 最近动态 -->
+      <div class="bento-card b-full">
+        <div class="b-eyebrow">
+          最近动态
+          <el-select
+            v-model="activityModule"
+            size="small"
+            clearable
+            placeholder="全部模块"
+            style="width: 140px; margin-left: 12px"
+          >
+            <el-option v-for="item in activityModules" :key="item" :label="item" :value="item" />
+          </el-select>
+        </div>
+        <div v-if="filteredActivities.length" class="activity-list">
+          <div v-for="item in filteredActivities" :key="item.id" class="activity-row">
+            <span class="activity-time">{{ formatTime(item.create_time) }}</span>
+            <el-tag size="small" :type="item.success === 1 ? 'info' : 'danger'" disable-transitions>
+              {{ item.module }} · {{ item.action }}
+            </el-tag>
+            <span class="activity-summary">{{ item.summary }}</span>
+            <span class="activity-user">{{ item.username ?? '—' }}</span>
+          </div>
+        </div>
+        <div v-else class="b-empty-mini">暂无动态</div>
       </div>
 
       <!-- 常用操作 -->
-      <div class="bento-card b-2x1">
+      <div class="bento-card b-full">
         <div class="b-eyebrow">常用操作</div>
         <div class="b-links">
-          <button class="b-op" type="button" @click="router.push('/system/params')">
-            计提参数
+          <button class="b-op" type="button" @click="go('/business/receipts')">录入回款</button>
+          <button class="b-op" type="button" @click="go('/calc/ledger')">绩效台账</button>
+          <button class="b-op" type="button" @click="go('/settlements')">月度结算</button>
+          <button class="b-op" type="button" @click="go('/reports/personal-detail')">
+            报表统计
           </button>
-          <button class="b-op" type="button" @click="router.push('/system/business-roles')">
-            岗位角色
-          </button>
-          <button class="b-op" type="button" @click="router.push('/system/logs')">
-            操作日志
-          </button>
-          <span class="b-op b-op-disabled" title="业务数据管理上线后开放">录入回款</span>
         </div>
       </div>
-
-      <!-- T+ 同步 -->
-      <div class="bento-card">
-        <div class="b-eyebrow">T+ 同步</div>
-        <div class="b-state">待接入</div>
-        <div class="b-sub">每周一次 · 手动触发</div>
-      </div>
     </div>
   </div>
 </template>
@@ -139,56 +378,62 @@ onMounted(() => {
 
 .page-title {
   margin: 0;
-  font-size: 18px;
+  font-size: 22px;
   font-weight: 600;
-  letter-spacing: -0.01em;
   color: var(--ys-ink);
 }
 
 .page-desc {
-  margin: 4px 0 0;
-  font-size: 12px;
+  margin: 6px 0 0;
+  font-size: 13px;
   color: var(--ys-ink-3);
 }
 
 .waterline {
   display: block;
-  width: 56px;
+  width: 46px;
   height: 2px;
-  margin-top: 10px;
-  border-radius: 1px;
+  margin-top: 12px;
   background: linear-gradient(90deg, var(--ys-indigo), rgba(46, 75, 168, 0));
 }
 
-/* Bento Grid：4 列基格，卡片按重要性混排大小 */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.toolbar-note {
+  font-size: 12px;
+  color: var(--ys-ink-3);
+}
+
 .bento {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-auto-rows: 102px;
   gap: 14px;
 }
 
 .bento-card {
-  display: flex;
-  flex-direction: column;
-  padding: 17px 20px;
-  overflow: hidden;
+  position: relative;
+  padding: 16px 18px;
   background: linear-gradient(180deg, #ffffff, #fcfcfe);
   border: 1px solid var(--ys-line);
   border-radius: 10px;
   box-shadow:
     0 1px 2px rgba(28, 35, 51, 0.04),
-    0 3px 10px rgba(28, 35, 51, 0.03);
-  transition:
-    transform 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
-    box-shadow 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
+    0 10px 24px -18px rgba(28, 35, 51, 0.18);
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+  overflow: hidden;
 }
 
 .bento-card:hover {
   transform: translateY(-2px);
   box-shadow:
-    0 1px 2px rgba(28, 35, 51, 0.05),
-    0 6px 18px rgba(28, 35, 51, 0.07);
+    0 2px 4px rgba(28, 35, 51, 0.05),
+    0 16px 30px -18px rgba(28, 35, 51, 0.22);
 }
 
 .b-2x2 {
@@ -196,149 +441,190 @@ onMounted(() => {
   grid-row: span 2;
 }
 
-.b-2x1 {
-  grid-column: span 2;
+.b-full {
+  grid-column: span 4;
 }
 
 .b-eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   font-size: 12px;
-  font-weight: 500;
   letter-spacing: 0.04em;
-  color: var(--ys-ink-2);
+  color: var(--ys-ink-3);
+}
+
+.b-eyebrow-gap {
+  margin-top: 12px;
+}
+
+.b-count {
+  min-width: 20px;
+  padding: 0 6px;
+  font-size: 11px;
+  line-height: 18px;
+  text-align: center;
+  color: var(--ys-indigo);
+  background: var(--ys-indigo-wash);
+  border-radius: 9px;
 }
 
 .b-num {
-  margin-top: auto;
-  font-size: 24px;
+  margin-top: 10px;
+  font-size: 26px;
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.2;
-  letter-spacing: -0.01em;
   color: var(--ys-ink);
+  font-variant-numeric: tabular-nums;
 }
 
 .b-num small {
-  margin-left: 3px;
+  margin-left: 4px;
   font-size: 12px;
   font-weight: 400;
   color: var(--ys-ink-3);
 }
 
 .b-sub {
-  margin-top: 3px;
-  font-size: 11px;
-  color: var(--ys-ink-3);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.b-state {
-  margin-top: auto;
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--ys-ink-2);
-}
-
-.b-empty {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.b-empty-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ys-ink-2);
-}
-
-.b-empty-desc {
-  max-width: 260px;
-  margin-top: 6px;
+  margin-top: 4px;
   font-size: 12px;
   color: var(--ys-ink-3);
-  line-height: 1.7;
 }
 
 .b-empty-mini {
-  margin-top: auto;
-  margin-bottom: auto;
+  margin-top: 8px;
   font-size: 12px;
   color: var(--ys-ink-3);
-  line-height: 1.7;
+}
+
+.chart {
+  height: 150px;
+  margin-top: 6px;
+}
+
+.todo-list,
+.warning-list {
+  max-height: 178px;
+  margin-top: 8px;
+  overflow-y: auto;
+}
+
+.todo-row,
+.warning-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  padding: 6px 4px;
+  border: none;
+  border-bottom: 1px dashed var(--ys-line);
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.todo-row:hover,
+.warning-row:hover {
+  background: rgba(46, 75, 168, 0.04);
+}
+
+.todo-title {
+  font-size: 13px;
+  color: var(--ys-ink);
+}
+
+.todo-meta {
+  font-size: 11px;
+  color: var(--ys-ink-3);
+}
+
+.warning-row {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 8px;
+  align-items: center;
+}
+
+.warning-title {
+  font-size: 13px;
+  color: var(--ys-ink);
+}
+
+.warning-detail {
+  grid-column: 2;
+  font-size: 11px;
+  color: var(--ys-ink-3);
+}
+
+.activity-list {
+  max-height: 150px;
+  margin-top: 8px;
+  overflow-y: auto;
+}
+
+.activity-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 5px 0;
+  border-bottom: 1px dashed var(--ys-line);
+  font-size: 12px;
+}
+
+.activity-time {
+  width: 118px;
+  color: var(--ys-ink-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.activity-summary {
+  flex: 1;
+  color: var(--ys-ink-2);
+}
+
+.activity-user {
+  color: var(--ys-ink-3);
 }
 
 .b-links {
   display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-top: auto;
-}
-
-.b-link {
-  padding: 0;
-  margin-top: 6px;
-  font-size: 12px;
-  color: var(--ys-indigo);
-  text-align: left;
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-
-.b-link:hover {
-  color: var(--ys-indigo-deep);
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
 }
 
 .b-op {
-  height: 30px;
-  padding: 0 13px;
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--ys-ink);
-  cursor: pointer;
-  background: linear-gradient(180deg, #ffffff, #fbfcfe);
-  border: 1px solid var(--ys-line);
-  border-radius: 7px;
-  transition:
-    color 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
-    border-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
-}
-
-button.b-op:hover {
+  padding: 6px 14px;
+  font-size: 13px;
   color: var(--ys-indigo);
-  border-color: rgba(46, 75, 168, 0.45);
+  background: var(--ys-indigo-wash);
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
 }
 
-.b-op-disabled {
-  color: var(--ys-ink-3);
-  cursor: not-allowed;
+.b-op:hover {
+  border-color: var(--ys-indigo);
 }
 
 @media (max-width: 1024px) {
   .bento {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .b-full {
+    grid-column: span 2;
   }
 }
 
 @media (max-width: 640px) {
   .bento {
     grid-template-columns: 1fr;
-    grid-auto-rows: auto;
-  }
-
-  .bento-card {
-    min-height: 90px;
   }
 
   .b-2x2,
-  .b-2x1 {
+  .b-full {
     grid-column: span 1;
-    grid-row: span 1;
-    min-height: 130px;
   }
 }
 
@@ -346,5 +632,9 @@ button.b-op:hover {
   .bento-card {
     transition: none;
   }
+
+  .bento-card:hover {
+    transform: none;
+  }
 }
 </style>