From a61946b520575e5c3f9d01c7a6a3dfd018f9129f Mon Sep 17 00:00:00 2001
From: yelan <wzqf99@foxmail.com>
Date: Thu, 27 Aug 2026 17:08:51 +0800
Subject: [PATCH] feat(home): implement workbench dashboard

---
 clinical-web/src/api/workbench/home.ts        | 283 +++++++++++++--
 clinical-web/src/api/workbench/types.ts       |  47 ++-
 .../home/components/DocumentRankingPanel.vue  | 247 ++++++++++++++
 .../home/components/HomeMetricCard.vue        | 179 ++++++++++
 .../home/components/SigningTrendPanel.vue     | 195 +++++++++++
 .../workbench/home/components/TodoPanel.vue   | 215 ++++++++++++
 .../src/views/workbench/home/index.vue        | 323 +++++++++++++++++-
 .../src/views/workbench/home/types.ts         |  36 +-
 8 files changed, 1477 insertions(+), 48 deletions(-)
 create mode 100644 clinical-web/src/views/workbench/home/components/DocumentRankingPanel.vue
 create mode 100644 clinical-web/src/views/workbench/home/components/HomeMetricCard.vue
 create mode 100644 clinical-web/src/views/workbench/home/components/SigningTrendPanel.vue
 create mode 100644 clinical-web/src/views/workbench/home/components/TodoPanel.vue

diff --git a/clinical-web/src/api/workbench/home.ts b/clinical-web/src/api/workbench/home.ts
index 1c1a848..6a54ed5 100644
--- a/clinical-web/src/api/workbench/home.ts
+++ b/clinical-web/src/api/workbench/home.ts
@@ -1,42 +1,263 @@
 import { request } from '@/utils/request'
 
-import type { WorkbenchOverviewResponse } from './types'
+import type {
+  HomeRankingPeriod,
+  WorkbenchCampus,
+  WorkbenchDocumentRanking,
+  WorkbenchOverviewQuery,
+  WorkbenchOverviewResponse,
+  WorkbenchTodoTask,
+  WorkbenchTrendPoint,
+} from './types'
 
 const useMockData = import.meta.env.VITE_USE_MOCK !== 'false'
 
-const mockOverview: WorkbenchOverviewResponse = {
-  summary: {
-    pendingTasks: 18,
-    todaySigned: 36,
-    abnormalTasks: 2,
-    documentCount: 128,
-  },
-  recentTasks: [
-    {
-      id: 'task-001',
-      patientName: '李某某',
-      visitNo: 'ZY20260827001',
-      documentName: '住院患者知情同意书',
-      department: '消化内科',
-      status: 'pending',
-      updatedAt: '2026-08-27 09:30',
-    },
-    {
-      id: 'task-002',
-      patientName: '王某某',
-      visitNo: 'JZ20260827018',
-      documentName: '急诊留观知情同意书',
-      department: '儿科急诊',
-      status: 'signed',
-      updatedAt: '2026-08-27 09:12',
-    },
-  ],
+interface MockCampusOverview {
+  summary: WorkbenchOverviewResponse['summary']
+  trend: WorkbenchTrendPoint[]
+  todos: WorkbenchTodoTask[]
+  ranking: Array<Omit<WorkbenchDocumentRanking, 'signedCount'> & { baseCount: number }>
 }
 
-export function getWorkbenchOverview(): Promise<WorkbenchOverviewResponse> {
+const mockCampusOverviews: Record<WorkbenchCampus, MockCampusOverview> = {
+  本部院区: {
+    summary: {
+      todaySigned: 36,
+      pendingPatientSigning: 18,
+      todayOverdue: 2,
+      availableTemplates: 128,
+      coveredDepartments: 9,
+    },
+    trend: [
+      { label: '8/21', value: 24 },
+      { label: '8/22', value: 31 },
+      { label: '8/23', value: 28 },
+      { label: '8/24', value: 35 },
+      { label: '8/25', value: 32 },
+      { label: '8/26', value: 39 },
+      { label: '8/27', value: 36 },
+    ],
+    todos: [
+      {
+        id: 'T0818003',
+        patientId: 'P202610005',
+        patientName: '陈志强',
+        documentName: '住院须知及告知书',
+        department: '消化内科',
+        status: 'pending',
+        method: 'pad',
+        updatedAt: '2026-08-27 11:20',
+      },
+      {
+        id: 'T0818002',
+        patientId: 'P202610002',
+        patientName: '李淑芬',
+        documentName: 'MRI 磁共振检查知情同意书',
+        department: '放射科',
+        status: 'pending',
+        method: 'sms',
+        updatedAt: '2026-08-27 10:05',
+      },
+      {
+        id: 'T0815001',
+        patientId: 'P202610001',
+        patientName: '王建国',
+        documentName: '心包穿刺知情同意书',
+        department: '心内科',
+        status: 'overdue',
+        method: 'sms',
+        updatedAt: '2026-08-27 09:40',
+      },
+    ],
+    ranking: [
+      { id: 'doc-001', documentName: '住院患者知情同意书', department: '全院通用', baseCount: 58 },
+      { id: 'doc-002', documentName: '入院须知及告知书', department: '全院通用', baseCount: 51 },
+      {
+        id: 'doc-003',
+        documentName: 'MRI 磁共振检查知情同意书',
+        department: '放射科',
+        baseCount: 43,
+      },
+      { id: 'doc-004', documentName: '手术知情同意书', department: '普外科', baseCount: 39 },
+      { id: 'doc-005', documentName: '麻醉知情同意书', department: '麻醉科', baseCount: 35 },
+      { id: 'doc-006', documentName: '患者授权委托书', department: '医务处', baseCount: 31 },
+      { id: 'doc-007', documentName: '输血治疗知情同意书', department: '血液科', baseCount: 27 },
+      { id: 'doc-008', documentName: '内镜检查知情同意书', department: '消化内科', baseCount: 24 },
+      { id: 'doc-009', documentName: '介入治疗知情同意书', department: '心内科', baseCount: 21 },
+      { id: 'doc-010', documentName: '特殊检查风险告知书', department: '影像科', baseCount: 18 },
+    ],
+  },
+  东院区: {
+    summary: {
+      todaySigned: 22,
+      pendingPatientSigning: 11,
+      todayOverdue: 1,
+      availableTemplates: 76,
+      coveredDepartments: 6,
+    },
+    trend: [
+      { label: '8/21', value: 15 },
+      { label: '8/22', value: 18 },
+      { label: '8/23', value: 17 },
+      { label: '8/24', value: 23 },
+      { label: '8/25', value: 20 },
+      { label: '8/26', value: 25 },
+      { label: '8/27', value: 22 },
+    ],
+    todos: [
+      {
+        id: 'T0818001',
+        patientId: 'P202610004',
+        patientName: '赵美英',
+        documentName: '体检报告发放及知情同意书',
+        department: '健康管理中心',
+        status: 'pending',
+        method: 'pad',
+        updatedAt: '2026-08-27 09:12',
+      },
+      {
+        id: 'T0818011',
+        patientId: 'P202610011',
+        patientName: '周雅琴',
+        documentName: '检查前注意事项告知书',
+        department: '体检中心',
+        status: 'overdue',
+        method: 'sms',
+        updatedAt: '2026-08-27 08:30',
+      },
+    ],
+    ranking: [
+      {
+        id: 'doc-011',
+        documentName: '体检报告发放及知情同意书',
+        department: '健康管理中心',
+        baseCount: 46,
+      },
+      { id: 'doc-012', documentName: '检前告知书', department: '健康管理中心', baseCount: 39 },
+      {
+        id: 'doc-013',
+        documentName: '超声检查知情同意书',
+        department: '超声医学科',
+        baseCount: 32,
+      },
+      {
+        id: 'doc-014',
+        documentName: '胃肠镜检查知情同意书',
+        department: '消化内科',
+        baseCount: 28,
+      },
+      { id: 'doc-015', documentName: '采血及检验告知书', department: '检验科', baseCount: 25 },
+      { id: 'doc-016', documentName: '影像检查告知书', department: '影像科', baseCount: 21 },
+      { id: 'doc-017', documentName: '健康体检知情同意书', department: '体检中心', baseCount: 19 },
+      { id: 'doc-018', documentName: '隐私保护告知书', department: '健康管理中心', baseCount: 16 },
+      { id: 'doc-019', documentName: '麻醉检查知情同意书', department: '麻醉科', baseCount: 14 },
+      { id: 'doc-020', documentName: '报告领取授权书', department: '健康管理中心', baseCount: 12 },
+    ],
+  },
+  西院区: {
+    summary: {
+      todaySigned: 17,
+      pendingPatientSigning: 9,
+      todayOverdue: 2,
+      availableTemplates: 54,
+      coveredDepartments: 5,
+    },
+    trend: [
+      { label: '8/21', value: 11 },
+      { label: '8/22', value: 14 },
+      { label: '8/23', value: 13 },
+      { label: '8/24', value: 16 },
+      { label: '8/25', value: 15 },
+      { label: '8/26', value: 19 },
+      { label: '8/27', value: 17 },
+    ],
+    todos: [
+      {
+        id: 'T0818021',
+        patientId: 'P202610021',
+        patientName: '孙浩然',
+        documentName: '心脏介入手术知情同意书',
+        department: '心内科',
+        status: 'pending',
+        method: 'pad',
+        updatedAt: '2026-08-27 10:15',
+      },
+      {
+        id: 'T0818022',
+        patientId: 'P202610022',
+        patientName: '刘晓琴',
+        documentName: '骨科手术知情同意书',
+        department: '骨科',
+        status: 'pending',
+        method: 'sms',
+        updatedAt: '2026-08-27 09:52',
+      },
+      {
+        id: 'T0818023',
+        patientId: 'P202610023',
+        patientName: '何文博',
+        documentName: '术前麻醉访视告知书',
+        department: '麻醉科',
+        status: 'overdue',
+        method: 'pad',
+        updatedAt: '2026-08-27 08:05',
+      },
+    ],
+    ranking: [
+      {
+        id: 'doc-021',
+        documentName: '心脏介入手术知情同意书',
+        department: '心内科',
+        baseCount: 37,
+      },
+      { id: 'doc-022', documentName: '骨科手术知情同意书', department: '骨科', baseCount: 33 },
+      { id: 'doc-023', documentName: '术前麻醉访视告知书', department: '麻醉科', baseCount: 28 },
+      { id: 'doc-024', documentName: '住院患者知情同意书', department: '全院通用', baseCount: 25 },
+      { id: 'doc-025', documentName: '输血治疗知情同意书', department: '血液科', baseCount: 22 },
+      { id: 'doc-026', documentName: '介入治疗知情同意书', department: '心内科', baseCount: 20 },
+      { id: 'doc-027', documentName: '术后康复告知书', department: '骨科', baseCount: 18 },
+      { id: 'doc-028', documentName: '特殊检查风险告知书', department: '影像科', baseCount: 16 },
+      { id: 'doc-029', documentName: '患者授权委托书', department: '医务处', baseCount: 14 },
+      { id: 'doc-030', documentName: '手术部位标识确认书', department: '手术部', baseCount: 12 },
+    ],
+  },
+}
+
+function getPeriodFactor(period: HomeRankingPeriod) {
+  return period === 7 ? 1 : period === 14 ? 2 : 3.5
+}
+
+function createRanking(
+  rows: MockCampusOverview['ranking'],
+  period: HomeRankingPeriod,
+): WorkbenchDocumentRanking[] {
+  const factor = getPeriodFactor(period)
+
+  return rows
+    .map((row, index) => ({
+      id: row.id,
+      documentName: row.documentName,
+      department: row.department,
+      signedCount: Math.round(row.baseCount * factor + (index % 3)),
+    }))
+    .sort((left, right) => right.signedCount - left.signedCount)
+}
+
+export function getWorkbenchOverview(
+  query: WorkbenchOverviewQuery,
+): Promise<WorkbenchOverviewResponse> {
   if (useMockData) {
-    return Promise.resolve(mockOverview)
+    const overview = mockCampusOverviews[query.campus] ?? mockCampusOverviews['本部院区']
+
+    return Promise.resolve({
+      summary: { ...overview.summary },
+      trend: overview.trend.map((point) => ({ ...point })),
+      todos: overview.todos.map((task) => ({ ...task })),
+      documentRanking: createRanking(overview.ranking, query.rankingPeriod),
+    })
   }
 
-  return request.get<WorkbenchOverviewResponse>('/workbench/overview')
+  return request.get<WorkbenchOverviewResponse>('/workbench/overview', {
+    params: query,
+  })
 }
diff --git a/clinical-web/src/api/workbench/types.ts b/clinical-web/src/api/workbench/types.ts
index c5ef141..50e2791 100644
--- a/clinical-web/src/api/workbench/types.ts
+++ b/clinical-web/src/api/workbench/types.ts
@@ -1,12 +1,22 @@
 import type { PageQuery, PageResult } from '@/types/common'
 
+export type WorkbenchCampus = '本部院区' | '东院区' | '西院区'
+
+export type HomeRankingPeriod = 7 | 14 | 30
+
+export interface WorkbenchOverviewQuery {
+  campus: WorkbenchCampus
+  rankingPeriod: HomeRankingPeriod
+}
+
 export type SigningTaskStatus = 'pending' | 'signing' | 'signed' | 'rejected' | 'expired'
 
 export interface WorkbenchSummary {
-  pendingTasks: number
   todaySigned: number
-  abnormalTasks: number
-  documentCount: number
+  pendingPatientSigning: number
+  todayOverdue: number
+  availableTemplates: number
+  coveredDepartments: number
 }
 
 export interface WorkbenchTask {
@@ -19,9 +29,38 @@ export interface WorkbenchTask {
   updatedAt: string
 }
 
+export type WorkbenchTodoStatus = 'pending' | 'overdue'
+
+export type SigningMethod = 'pad' | 'sms'
+
+export interface WorkbenchTodoTask {
+  id: string
+  patientId: string
+  patientName: string
+  documentName: string
+  department: string
+  status: WorkbenchTodoStatus
+  method: SigningMethod
+  updatedAt: string
+}
+
+export interface WorkbenchTrendPoint {
+  label: string
+  value: number
+}
+
+export interface WorkbenchDocumentRanking {
+  id: string
+  documentName: string
+  department: string
+  signedCount: number
+}
+
 export interface WorkbenchOverviewResponse {
   summary: WorkbenchSummary
-  recentTasks: WorkbenchTask[]
+  trend: WorkbenchTrendPoint[]
+  todos: WorkbenchTodoTask[]
+  documentRanking: WorkbenchDocumentRanking[]
 }
 
 export interface SigningTaskQuery extends PageQuery {
diff --git a/clinical-web/src/views/workbench/home/components/DocumentRankingPanel.vue b/clinical-web/src/views/workbench/home/components/DocumentRankingPanel.vue
new file mode 100644
index 0000000..75e19fa
--- /dev/null
+++ b/clinical-web/src/views/workbench/home/components/DocumentRankingPanel.vue
@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { HomeDocumentRanking, HomeRankingPeriod } from '../types'
+
+const props = defineProps<{
+  rows: HomeDocumentRanking[]
+  period: HomeRankingPeriod
+}>()
+
+const emit = defineEmits<{
+  'update:period': [period: HomeRankingPeriod]
+  manage: []
+}>()
+
+const periodOptions: Array<{ label: string; value: HomeRankingPeriod }> = [
+  { label: '近7天', value: 7 },
+  { label: '近14天', value: 14 },
+  { label: '近30天', value: 30 },
+]
+
+const rankColors = ['#0e6e8c', '#18a0c0', '#0f9d6c', '#d9821f', '#7a4dbb', '#d0534f']
+
+const maxCount = computed(() => Math.max(...props.rows.map((row) => row.signedCount), 1))
+
+function getBarWidth(row: HomeDocumentRanking) {
+  return `${Math.max((row.signedCount / maxCount.value) * 100, 1.5)}%`
+}
+
+function getRankColor(index: number) {
+  return rankColors[index % rankColors.length]
+}
+</script>
+
+<template>
+  <section class="home-panel ranking-panel">
+    <div class="panel-heading">
+      <h2>Top10 文档签署排名</h2>
+      <span class="heading-spacer" />
+      <div class="period-switch" role="group" aria-label="排名时间范围">
+        <button
+          v-for="option in periodOptions"
+          :key="option.value"
+          type="button"
+          class="period-button"
+          :class="{ 'period-button--active': period === option.value }"
+          @click="emit('update:period', option.value)"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+      <button type="button" class="panel-more" @click="emit('manage')">管理 ›</button>
+    </div>
+
+    <div v-if="rows.length" class="ranking-chart" role="list" aria-label="文档签署排名">
+      <div
+        v-for="(row, index) in rows"
+        :key="row.id"
+        class="ranking-row"
+        role="listitem"
+        :title="`${row.documentName}：${row.signedCount} 次（${row.department}）`"
+      >
+        <span class="ranking-number" :style="{ color: getRankColor(index) }">{{ index + 1 }}</span>
+        <span class="ranking-name">{{ row.documentName }}</span>
+        <span class="ranking-bar-track">
+          <span
+            class="ranking-bar"
+            :style="{ width: getBarWidth(row), background: getRankColor(index) }"
+          />
+        </span>
+        <strong class="ranking-count" :style="{ color: getRankColor(index) }">
+          {{ row.signedCount }}
+        </strong>
+      </div>
+      <div class="ranking-axis" aria-hidden="true">
+        <span>0</span>
+        <span>{{ Math.ceil(maxCount / 4) }}</span>
+        <span>{{ Math.ceil(maxCount / 2) }}</span>
+        <span>{{ Math.ceil((maxCount * 3) / 4) }}</span>
+        <span>{{ maxCount }}</span>
+      </div>
+    </div>
+
+    <div v-else class="ranking-empty">暂无排名数据</div>
+  </section>
+</template>
+
+<style scoped>
+.home-panel {
+  min-width: 0;
+  padding: 16px 18px;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.panel-heading {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.panel-heading h2 {
+  margin: 0;
+  color: var(--ink);
+  font-size: 14.5px;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.heading-spacer {
+  flex: 1;
+}
+
+.panel-more {
+  flex-shrink: 0;
+  padding: 0;
+  color: var(--brand);
+  font-size: 12px;
+  background: transparent;
+}
+
+.panel-more:hover {
+  color: var(--brand-d);
+}
+
+.period-switch {
+  display: inline-flex;
+  flex-shrink: 0;
+  overflow: hidden;
+  border: 1px solid var(--brand-l);
+  border-radius: 7px;
+}
+
+.period-button {
+  padding: 5px 12px;
+  color: var(--mut);
+  font-size: 11.5px;
+  background: #fff;
+  border-right: 1px solid var(--brand-l);
+}
+
+.period-button:last-child {
+  border-right: 0;
+}
+
+.period-button:hover:not(.period-button--active) {
+  color: var(--brand);
+  background: var(--brand-l);
+}
+
+.period-button--active {
+  color: #fff;
+  background: var(--brand);
+}
+
+.ranking-chart {
+  display: flex;
+  min-width: 680px;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ranking-row {
+  display: grid;
+  grid-template-columns: 24px minmax(170px, 220px) minmax(160px, 1fr) 42px;
+  gap: 8px;
+  align-items: center;
+  min-height: 21px;
+}
+
+.ranking-number {
+  font-size: 11px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.ranking-name {
+  overflow: hidden;
+  color: var(--ink);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ranking-bar-track {
+  position: relative;
+  display: block;
+  height: 18px;
+  overflow: hidden;
+  background-color: #f7fafb;
+  background-image: linear-gradient(to right, transparent calc(25% - 1px), #eef4f6 25%);
+  background-size: 25% 100%;
+  border-radius: 4px;
+}
+
+.ranking-bar {
+  display: block;
+  height: 100%;
+  min-width: 2px;
+  border-radius: 4px;
+  opacity: 0.82;
+}
+
+.ranking-count {
+  font-size: 12px;
+  text-align: right;
+}
+
+.ranking-axis {
+  display: flex;
+  grid-column: 3;
+  justify-content: space-between;
+  margin-left: 32px;
+  padding-top: 1px;
+  color: var(--mut);
+  font-size: 10px;
+}
+
+.ranking-empty {
+  display: grid;
+  min-height: 210px;
+  color: var(--mut);
+  font-size: 13px;
+  place-items: center;
+}
+
+@media (max-width: 900px) {
+  .panel-heading {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .heading-spacer {
+    display: none;
+  }
+
+  .period-switch {
+    order: 3;
+  }
+
+  .panel-more {
+    margin-left: auto;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/home/components/HomeMetricCard.vue b/clinical-web/src/views/workbench/home/components/HomeMetricCard.vue
new file mode 100644
index 0000000..bf99e6e
--- /dev/null
+++ b/clinical-web/src/views/workbench/home/components/HomeMetricCard.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import type { HomeMetricCard as HomeMetricCardData } from '../types'
+
+defineProps<{
+  metric: HomeMetricCardData
+}>()
+
+const emit = defineEmits<{
+  click: [key: HomeMetricCardData['key']]
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="metric-card"
+    :aria-label="`${metric.label}：${metric.value}`"
+    @click="emit('click', metric.key)"
+  >
+    <span class="metric-icon" :class="`metric-icon--${metric.tone}`" aria-hidden="true">
+      <svg
+        v-if="metric.key === 'todaySigned'"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="m20 6-11 11-5-5"
+          stroke="currentColor"
+          stroke-width="2.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <svg
+        v-else-if="metric.key === 'pending'"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
+        <path d="M12 7v5l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+      </svg>
+      <svg
+        v-else-if="metric.key === 'overdue'"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path
+          d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+    <span class="metric-copy">
+      <strong class="metric-value">{{ metric.value }}</strong>
+      <span class="metric-label">{{ metric.label }}</span>
+      <span class="metric-detail" :class="`metric-detail--${metric.detailTone}`">
+        {{ metric.detail }}
+      </span>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.metric-card {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  gap: 14px;
+  align-items: center;
+  padding: 16px 18px;
+  color: var(--ink);
+  text-align: left;
+  background: var(--card);
+  border: 1px solid transparent;
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.metric-card:hover {
+  border-color: var(--brand);
+  box-shadow: var(--sh-hover);
+  transform: translateY(-2px);
+}
+
+.metric-card:active {
+  transform: translateY(0);
+}
+
+.metric-icon {
+  display: grid;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border-radius: 12px;
+}
+
+.metric-icon--success {
+  color: var(--ok);
+  background: var(--ok-l);
+}
+
+.metric-icon--brand {
+  color: var(--brand);
+  background: var(--brand-l);
+}
+
+.metric-icon--warning {
+  color: var(--warn);
+  background: var(--warn-l);
+}
+
+.metric-icon--danger {
+  color: var(--err);
+  background: var(--err-l);
+}
+
+.metric-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.metric-value {
+  font-size: 26px;
+  line-height: 1.1;
+}
+
+.metric-label {
+  margin-top: 3px;
+  overflow: hidden;
+  color: var(--mut);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric-detail {
+  margin-top: 2px;
+  overflow: hidden;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric-detail--up {
+  color: var(--ok);
+}
+
+.metric-detail--muted {
+  color: var(--mut);
+}
+
+.metric-detail--down {
+  color: var(--err);
+}
+</style>
diff --git a/clinical-web/src/views/workbench/home/components/SigningTrendPanel.vue b/clinical-web/src/views/workbench/home/components/SigningTrendPanel.vue
new file mode 100644
index 0000000..97a0d87
--- /dev/null
+++ b/clinical-web/src/views/workbench/home/components/SigningTrendPanel.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { HomeTrendPoint } from '../types'
+
+const props = defineProps<{
+  points: HomeTrendPoint[]
+}>()
+
+const chartWidth = 620
+const chartHeight = 210
+const chartPadding = {
+  top: 16,
+  right: 18,
+  bottom: 34,
+  left: 42,
+}
+
+const plotWidth = chartWidth - chartPadding.left - chartPadding.right
+const plotHeight = chartHeight - chartPadding.top - chartPadding.bottom
+
+const chartMax = computed(() => {
+  const highest = Math.max(...props.points.map((point) => point.value), 4)
+  return Math.ceil((highest * 1.2) / 4) * 4
+})
+
+const chartPoints = computed(() => {
+  const count = props.points.length
+
+  return props.points.map((point, index) => ({
+    ...point,
+    x: count > 1 ? chartPadding.left + (plotWidth * index) / (count - 1) : chartWidth / 2,
+    y: chartPadding.top + plotHeight - (point.value / chartMax.value) * plotHeight,
+  }))
+})
+
+const linePath = computed(() =>
+  chartPoints.value
+    .map((point, index) => `${index === 0 ? 'M' : 'L'}${point.x.toFixed(1)} ${point.y.toFixed(1)}`)
+    .join(' '),
+)
+
+const areaPath = computed(() => {
+  const points = chartPoints.value
+  const firstPoint = points[0]
+  const lastPoint = points[points.length - 1]
+
+  if (!firstPoint || !lastPoint) {
+    return ''
+  }
+
+  return `${linePath.value} L${lastPoint.x.toFixed(1)} ${chartPadding.top + plotHeight} L${firstPoint.x.toFixed(1)} ${chartPadding.top + plotHeight} Z`
+})
+
+const gridLines = computed(() =>
+  [0, 0.5, 1].map((ratio) => ({
+    y: chartPadding.top + plotHeight * ratio,
+    label: Math.round(chartMax.value * (1 - ratio)),
+  })),
+)
+</script>
+
+<template>
+  <section class="home-panel trend-panel">
+    <div class="panel-heading">
+      <h2>近一周签署客户趋势</h2>
+      <span>单位：人次</span>
+    </div>
+
+    <div v-if="points.length" class="trend-chart-wrap">
+      <svg class="trend-chart" viewBox="0 0 620 210" role="img" aria-label="近一周签署客户趋势图">
+        <defs>
+          <linearGradient id="home-trend-area" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stop-color="#0e6e8c" stop-opacity="0.22" />
+            <stop offset="1" stop-color="#0e6e8c" stop-opacity="0.02" />
+          </linearGradient>
+        </defs>
+
+        <g class="trend-grid">
+          <line
+            v-for="line in gridLines"
+            :key="line.y"
+            :x1="chartPadding.left"
+            :y1="line.y"
+            :x2="chartWidth - chartPadding.right"
+            :y2="line.y"
+          />
+          <text
+            v-for="line in gridLines"
+            :key="`label-${line.y}`"
+            :x="chartPadding.left - 10"
+            :y="line.y + 4"
+            text-anchor="end"
+          >
+            {{ line.label }}
+          </text>
+        </g>
+
+        <path class="trend-area" :d="areaPath" />
+        <path class="trend-line" :d="linePath" />
+
+        <g v-for="point in chartPoints" :key="point.label" class="trend-point">
+          <circle :cx="point.x" :cy="point.y" r="4" />
+          <title>{{ point.label }}：{{ point.value }} 人次</title>
+          <text :x="point.x" :y="chartHeight - 9" text-anchor="middle">{{ point.label }}</text>
+        </g>
+      </svg>
+    </div>
+
+    <div v-else class="trend-empty">暂无趋势数据</div>
+  </section>
+</template>
+
+<style scoped>
+.home-panel {
+  min-width: 0;
+  padding: 16px 18px;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.panel-heading {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.panel-heading h2 {
+  margin: 0;
+  color: var(--ink);
+  font-size: 14.5px;
+  line-height: 1.4;
+}
+
+.panel-heading span {
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.trend-chart-wrap {
+  width: 100%;
+  min-height: 190px;
+}
+
+.trend-chart {
+  display: block;
+  width: 100%;
+  height: 210px;
+  overflow: visible;
+}
+
+.trend-grid line {
+  stroke: #eef4f6;
+  stroke-dasharray: 3 4;
+}
+
+.trend-grid text,
+.trend-point text {
+  fill: var(--mut);
+  font-size: 10px;
+}
+
+.trend-area {
+  fill: url('#home-trend-area');
+}
+
+.trend-line {
+  fill: none;
+  stroke: var(--brand);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2.5;
+}
+
+.trend-point circle {
+  fill: #fff;
+  stroke: var(--brand);
+  stroke-width: 2;
+}
+
+.trend-point text {
+  dominant-baseline: auto;
+}
+
+.trend-empty {
+  display: grid;
+  min-height: 210px;
+  color: var(--mut);
+  font-size: 13px;
+  place-items: center;
+}
+</style>
diff --git a/clinical-web/src/views/workbench/home/components/TodoPanel.vue b/clinical-web/src/views/workbench/home/components/TodoPanel.vue
new file mode 100644
index 0000000..060c955
--- /dev/null
+++ b/clinical-web/src/views/workbench/home/components/TodoPanel.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import type { HomeTodoItem } from '../types'
+
+defineProps<{
+  items: HomeTodoItem[]
+}>()
+
+const emit = defineEmits<{
+  select: [item: HomeTodoItem]
+  viewAll: []
+}>()
+
+function getStatusLabel(item: HomeTodoItem) {
+  if (item.status === 'overdue') {
+    return '已超时'
+  }
+
+  return item.method === 'pad' ? '待签署·手写板' : '待签署·短信'
+}
+
+function getStatusClass(item: HomeTodoItem) {
+  if (item.status === 'overdue') {
+    return 'todo-status--overdue'
+  }
+
+  return item.method === 'pad' ? 'todo-status--pad' : 'todo-status--sms'
+}
+
+function getHint(item: HomeTodoItem) {
+  return item.status === 'overdue' ? '⚠ 已超时，需重新发起' : '⏳ 等待患者签署'
+}
+</script>
+
+<template>
+  <section class="home-panel todo-panel">
+    <div class="panel-heading">
+      <h2>我的待办</h2>
+      <button type="button" class="panel-more" @click="emit('viewAll')">全部 ›</button>
+    </div>
+
+    <div v-if="items.length" class="todo-list">
+      <button
+        v-for="item in items"
+        :key="item.id"
+        type="button"
+        class="todo-item"
+        @click="emit('select', item)"
+      >
+        <span class="todo-row">
+          <strong>{{ item.patientName }}</strong>
+          <span class="patient-id">{{ item.patientId }}</span>
+          <span class="todo-spacer" />
+          <span class="todo-status" :class="getStatusClass(item)">
+            {{ getStatusLabel(item) }}
+          </span>
+        </span>
+        <span class="todo-row todo-row--detail">
+          <span class="todo-document">📄 {{ item.documentName }}</span>
+          <span class="todo-hint">{{ getHint(item) }}</span>
+        </span>
+      </button>
+    </div>
+
+    <div v-else class="todo-empty">
+      <span aria-hidden="true">🎉</span>
+      <p>暂无待办</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.home-panel {
+  min-width: 0;
+  padding: 16px 18px;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.panel-heading {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.panel-heading h2 {
+  margin: 0;
+  color: var(--ink);
+  font-size: 14.5px;
+  line-height: 1.4;
+}
+
+.panel-more {
+  margin-left: auto;
+  padding: 0;
+  color: var(--brand);
+  font-size: 12px;
+  background: transparent;
+}
+
+.panel-more:hover {
+  color: var(--brand-d);
+}
+
+.todo-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.todo-item {
+  display: block;
+  width: 100%;
+  padding: 9px 11px;
+  color: var(--ink);
+  text-align: left;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.todo-item:hover {
+  background: #f8fcfd;
+  border-color: var(--brand);
+}
+
+.todo-row {
+  display: flex;
+  min-width: 0;
+  gap: 8px;
+  align-items: center;
+}
+
+.todo-row strong {
+  flex-shrink: 0;
+  font-size: 14px;
+}
+
+.patient-id {
+  overflow: hidden;
+  color: var(--mut);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.todo-spacer {
+  flex: 1;
+}
+
+.todo-status {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 20px;
+}
+
+.todo-status--pad {
+  color: var(--brand);
+  background: var(--brand-l);
+}
+
+.todo-status--sms {
+  color: #7a4dbb;
+  background: #f3ecfb;
+}
+
+.todo-status--overdue {
+  color: var(--err);
+  background: var(--err-l);
+}
+
+.todo-row--detail {
+  margin-top: 5px;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.todo-document {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.todo-hint {
+  flex-shrink: 0;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.todo-empty {
+  display: grid;
+  min-height: 202px;
+  color: var(--mut);
+  font-size: 13px;
+  place-items: center;
+  align-content: center;
+}
+
+.todo-empty span {
+  margin-bottom: 7px;
+  font-size: 34px;
+  opacity: 0.5;
+}
+
+.todo-empty p {
+  margin: 0;
+}
+</style>
diff --git a/clinical-web/src/views/workbench/home/index.vue b/clinical-web/src/views/workbench/home/index.vue
index fb93302..9b95822 100644
--- a/clinical-web/src/views/workbench/home/index.vue
+++ b/clinical-web/src/views/workbench/home/index.vue
@@ -1,12 +1,321 @@
 <script setup lang="ts">
-import PagePlaceholder from '@/components/PagePlaceholder.vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+import { getWorkbenchOverview } from '@/api/workbench/home'
+import type { WorkbenchCampus, WorkbenchOverviewResponse } from '@/api/workbench/types'
+import { useAppStore } from '@/stores/app'
+
+import DocumentRankingPanel from './components/DocumentRankingPanel.vue'
+import HomeMetricCard from './components/HomeMetricCard.vue'
+import SigningTrendPanel from './components/SigningTrendPanel.vue'
+import TodoPanel from './components/TodoPanel.vue'
+import type {
+  HomeDocumentRanking,
+  HomeMetricCard as HomeMetricCardData,
+  HomeMetricKey,
+  HomeRankingPeriod,
+  HomeTodoItem,
+  HomeTrendPoint,
+} from './types'
+
+const router = useRouter()
+const appStore = useAppStore()
+
+const loading = ref(true)
+const loadFailed = ref(false)
+const overview = ref<WorkbenchOverviewResponse | null>(null)
+const rankingPeriod = ref<HomeRankingPeriod>(14)
+
+const selectedCampus = computed<WorkbenchCampus>(() => appStore.selectedCampus)
+
+const metrics = computed<HomeMetricCardData[]>(() => {
+  const summary = overview.value?.summary
+
+  return [
+    {
+      key: 'todaySigned',
+      label: '今日已签署（单）',
+      value: summary?.todaySigned ?? 0,
+      tone: 'success',
+      detail: '▲ 较昨日 +2 · 点击查看',
+      detailTone: 'up',
+    },
+    {
+      key: 'pending',
+      label: '待患者签署',
+      value: summary?.pendingPatientSigning ?? 0,
+      tone: 'brand',
+      detail: '含手写板 / 短信 · 点击查看',
+      detailTone: 'muted',
+    },
+    {
+      key: 'overdue',
+      label: '今日已超时',
+      value: summary?.todayOverdue ?? 0,
+      tone: 'danger',
+      detail: '需重新发起 · 点击查看',
+      detailTone: 'down',
+    },
+    {
+      key: 'templates',
+      label: '可用文档模板（份）',
+      value: summary?.availableTemplates ?? 0,
+      tone: 'brand',
+      detail: `覆盖 ${summary?.coveredDepartments ?? 0} 个科室 · 点击查看`,
+      detailTone: 'muted',
+    },
+  ]
+})
+
+const trendPoints = computed<HomeTrendPoint[]>(() => overview.value?.trend ?? [])
+const todoItems = computed<HomeTodoItem[]>(() => overview.value?.todos ?? [])
+const rankingRows = computed<HomeDocumentRanking[]>(() => overview.value?.documentRanking ?? [])
+
+async function loadOverview() {
+  loading.value = true
+  loadFailed.value = false
+
+  try {
+    overview.value = await getWorkbenchOverview({
+      campus: selectedCampus.value,
+      rankingPeriod: rankingPeriod.value,
+    })
+  } catch {
+    loadFailed.value = true
+    ElMessage.error('首页数据加载失败，请稍后重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+function goToSigning(query: Record<string, string> = {}) {
+  void router.push({
+    name: 'workbench-signing',
+    query,
+  })
+}
+
+function handleMetricClick(key: HomeMetricKey) {
+  if (key === 'templates') {
+    void router.push({ name: 'management-documents' })
+    return
+  }
+
+  const statusMap: Record<Exclude<HomeMetricKey, 'templates'>, string> = {
+    todaySigned: 'signed',
+    pending: 'pending',
+    overdue: 'expired',
+  }
+
+  goToSigning({ status: statusMap[key], range: 'today' })
+}
+
+function handleTodoSelect(item: HomeTodoItem) {
+  goToSigning({ taskId: item.id })
+}
+
+function handlePeriodChange(period: HomeRankingPeriod) {
+  rankingPeriod.value = period
+}
+
+function retryLoad() {
+  void loadOverview()
+}
+
+watch([selectedCampus, rankingPeriod], () => {
+  void loadOverview()
+})
+
+onMounted(() => {
+  void loadOverview()
+})
 </script>
 
 <template>
-  <PagePlaceholder
-    group="工作台"
-    title="首页"
-    icon="⌂"
-    description="首页页面占位，待根据 Web 端需求实现。"
-  />
+  <section class="home-page">
+    <div v-if="loading" class="home-loading" aria-label="正在加载首页">
+      <div class="metric-loading-grid">
+        <span v-for="index in 4" :key="index" />
+      </div>
+      <div class="panel-loading-grid">
+        <span />
+        <span />
+      </div>
+      <span class="ranking-loading" />
+    </div>
+
+    <div v-else-if="loadFailed" class="home-error">
+      <div class="error-icon" aria-hidden="true">!</div>
+      <p>首页数据暂时无法加载</p>
+      <button type="button" class="retry-button" @click="retryLoad">重新加载</button>
+    </div>
+
+    <template v-else>
+      <div class="metric-grid">
+        <HomeMetricCard
+          v-for="metric in metrics"
+          :key="metric.key"
+          :metric="metric"
+          @click="handleMetricClick"
+        />
+      </div>
+
+      <div class="overview-grid">
+        <SigningTrendPanel :points="trendPoints" />
+        <TodoPanel :items="todoItems" @select="handleTodoSelect" @view-all="goToSigning()" />
+      </div>
+
+      <DocumentRankingPanel
+        :rows="rankingRows"
+        :period="rankingPeriod"
+        @update:period="handlePeriodChange"
+        @manage="router.push({ name: 'management-documents' })"
+      />
+    </template>
+  </section>
 </template>
+
+<style scoped>
+.home-page {
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.overview-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.overview-grid > * {
+  min-width: 0;
+}
+
+.ranking-panel {
+  margin-top: 16px;
+}
+
+.home-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.metric-loading-grid,
+.panel-loading-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.metric-loading-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.panel-loading-grid {
+  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
+}
+
+.metric-loading-grid span,
+.panel-loading-grid span,
+.ranking-loading {
+  display: block;
+  min-height: 82px;
+  background: linear-gradient(90deg, #edf3f5 25%, #f7fafb 37%, #edf3f5 63%);
+  background-size: 400% 100%;
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+  animation: skeleton-shimmer 1.4s ease infinite;
+}
+
+.panel-loading-grid span {
+  min-height: 274px;
+}
+
+.ranking-loading {
+  min-height: 286px;
+}
+
+.home-error {
+  display: flex;
+  min-height: 380px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: var(--mut);
+  text-align: center;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.error-icon {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  margin-bottom: 12px;
+  color: var(--err);
+  font-size: 24px;
+  font-weight: 700;
+  place-items: center;
+  background: var(--err-l);
+  border-radius: 50%;
+}
+
+.home-error p {
+  margin: 0;
+  font-size: 13px;
+}
+
+.retry-button {
+  margin-top: 14px;
+  padding: 7px 16px;
+  color: var(--brand);
+  font-size: 12px;
+  background: #fff;
+  border: 1px solid var(--brand);
+  border-radius: 6px;
+}
+
+.retry-button:hover {
+  background: var(--brand-l);
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+@media (max-width: 1200px) {
+  .metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .overview-grid,
+  .panel-loading-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 680px) {
+  .metric-grid,
+  .metric-loading-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/home/types.ts b/clinical-web/src/views/workbench/home/types.ts
index b17b1a2..91ce3b9 100644
--- a/clinical-web/src/views/workbench/home/types.ts
+++ b/clinical-web/src/views/workbench/home/types.ts
@@ -1,19 +1,43 @@
 export type HomeMetricTone = 'brand' | 'success' | 'warning' | 'danger'
 
+export type HomeMetricKey = 'todaySigned' | 'pending' | 'overdue' | 'templates'
+
+export type HomeMetricDetailTone = 'up' | 'muted' | 'down'
+
 export interface HomeMetricCard {
-  key: string
+  key: HomeMetricKey
   label: string
   value: number
-  unit: string
   tone: HomeMetricTone
-  description?: string
+  detail: string
+  detailTone: HomeMetricDetailTone
 }
 
-export interface HomeTaskItem {
+export interface HomeTrendPoint {
+  label: string
+  value: number
+}
+
+export type HomeTodoStatus = 'pending' | 'overdue'
+
+export type HomeSigningMethod = 'pad' | 'sms'
+
+export interface HomeTodoItem {
   id: string
-  title: string
+  patientId: string
   patientName: string
   documentName: string
-  status: string
+  department: string
+  method: HomeSigningMethod
+  status: HomeTodoStatus
   updatedAt: string
 }
+
+export interface HomeDocumentRanking {
+  id: string
+  documentName: string
+  department: string
+  signedCount: number
+}
+
+export type HomeRankingPeriod = 7 | 14 | 30