diff --git a/clinical-web/src/api/workbench/signing.ts b/clinical-web/src/api/workbench/signing.ts
index eb383dc..05dec99 100644
--- a/clinical-web/src/api/workbench/signing.ts
+++ b/clinical-web/src/api/workbench/signing.ts
@@ -1,48 +1,334 @@
 import { request } from '@/utils/request'
 
-import type { SigningTaskListResponse, SigningTaskQuery, SigningTaskRecord } from './types'
+import type {
+  CreateSigningTaskRequest,
+  PatientProfile,
+  SigningMethod,
+  SigningTaskListResponse,
+  SigningTaskQuery,
+  SigningTaskRecord,
+  SigningTaskStatus,
+  SigningTemplate,
+  VisitType,
+} from './types'
 
 const useMockData = import.meta.env.VITE_USE_MOCK !== 'false'
 
+const mockPatients: PatientProfile[] = [
+  {
+    id: 'P202610001',
+    name: '李某某',
+    sex: '男',
+    age: 46,
+    idCard: '310***********1234',
+    phone: '13800005678',
+    visits: [
+      {
+        id: 'visit-001',
+        type: '住院',
+        visitNo: 'ZY20260827001',
+        department: '消化内科',
+        visitDate: '2026-08-27',
+        isCurrent: true,
+      },
+      {
+        id: 'visit-002',
+        type: '门诊',
+        visitNo: 'MZ20260812018',
+        department: '消化内科',
+        visitDate: '2026-08-12',
+      },
+    ],
+  },
+  {
+    id: 'P202610002',
+    name: '王某某',
+    sex: '女',
+    age: 37,
+    idCard: '310***********6721',
+    phone: '13900006789',
+    visits: [
+      {
+        id: 'visit-003',
+        type: '门诊',
+        visitNo: 'JZ20260827018',
+        department: '儿科急诊',
+        visitDate: '2026-08-27',
+        isCurrent: true,
+      },
+    ],
+  },
+  {
+    id: 'P202610003',
+    name: '赵某某',
+    sex: '男',
+    age: 52,
+    idCard: '310***********2846',
+    phone: '13700007890',
+    visits: [
+      {
+        id: 'visit-004',
+        type: '住院',
+        visitNo: 'ZY20260826027',
+        department: '消化内科',
+        visitDate: '2026-08-26',
+        isCurrent: true,
+      },
+    ],
+  },
+  {
+    id: 'P202610004',
+    name: '周雅琴',
+    sex: '女',
+    age: 29,
+    idCard: '310***********9152',
+    phone: '13600008901',
+    visits: [
+      {
+        id: 'visit-005',
+        type: '体检',
+        visitNo: 'TJ20260825006',
+        department: '健康管理中心',
+        visitDate: '2026-08-25',
+        isCurrent: true,
+      },
+    ],
+  },
+  {
+    id: 'P202610005',
+    name: '陈志强',
+    sex: '男',
+    age: 61,
+    idCard: '310***********3488',
+    phone: '13500009012',
+    visits: [
+      {
+        id: 'visit-006',
+        type: '住院',
+        visitNo: 'ZY20260826011',
+        department: '普外科',
+        visitDate: '2026-08-26',
+        isCurrent: true,
+      },
+    ],
+  },
+]
+
+const mockTemplates: SigningTemplate[] = [
+  {
+    id: 'tpl-001',
+    name: '住院患者知情同意书',
+    code: 'DOC-HOS-001',
+    department: '全院通用',
+    category: '住院告知',
+    description: '住院期间诊疗事项、风险与患者权利告知。',
+    supportedMethods: ['pad', 'sms'],
+  },
+  {
+    id: 'tpl-002',
+    name: '住院须知及告知书',
+    code: 'DOC-HOS-002',
+    department: '全院通用',
+    category: '住院告知',
+    description: '住院流程、陪护要求和患者须知确认。',
+    supportedMethods: ['pad', 'sms'],
+  },
+  {
+    id: 'tpl-003',
+    name: '内镜检查知情同意书',
+    code: 'DOC-DIG-001',
+    department: '消化内科',
+    category: '检查告知',
+    description: '内镜检查适应证、风险及替代方案告知。',
+    supportedMethods: ['pad', 'sms'],
+  },
+  {
+    id: 'tpl-004',
+    name: 'MRI 磁共振检查知情同意书',
+    code: 'DOC-RAD-001',
+    department: '放射科',
+    category: '检查告知',
+    description: '磁共振检查注意事项、禁忌证及风险告知。',
+    supportedMethods: ['pad', 'sms'],
+  },
+  {
+    id: 'tpl-005',
+    name: '心脏介入手术知情同意书',
+    code: 'DOC-CARD-001',
+    department: '心内科',
+    category: '手术告知',
+    description: '介入治疗方案、围术期风险及替代方案告知。',
+    supportedMethods: ['pad'],
+  },
+  {
+    id: 'tpl-006',
+    name: '体检报告发放及知情同意书',
+    code: 'DOC-PE-001',
+    department: '健康管理中心',
+    category: '体检告知',
+    description: '体检报告领取方式、隐私保护和异常结果随访告知。',
+    supportedMethods: ['pad', 'sms'],
+  },
+  {
+    id: 'tpl-007',
+    name: '患者授权委托书',
+    code: 'DOC-GEN-003',
+    department: '医务处',
+    category: '授权文书',
+    description: '患者授权家属或代理人办理相关医疗事项。',
+    supportedMethods: ['pad', 'sms'],
+  },
+]
+
 const mockRecords: SigningTaskRecord[] = [
   {
     id: 'task-001',
+    campus: '本部院区',
+    patientId: 'P202610001',
     patientName: '李某某',
+    sex: '男',
+    age: 46,
     visitNo: 'ZY20260827001',
+    visitType: '住院',
+    visitDate: '2026-08-27',
+    documentId: 'tpl-001',
     documentName: '住院患者知情同意书',
     department: '消化内科',
     status: 'pending',
     signerName: '李某某',
+    method: 'pad',
     source: '电子病历',
-    expiresAt: '2026-08-28 09:30',
+    expiresAt: '2026-08-30 09:30',
     updatedAt: '2026-08-27 09:30',
   },
   {
     id: 'task-002',
+    campus: '东院区',
+    patientId: 'P202610002',
     patientName: '王某某',
+    sex: '女',
+    age: 37,
     visitNo: 'JZ20260827018',
-    documentName: '急诊留观知情同意书',
-    department: '儿科急诊',
+    visitType: '门诊',
+    visitDate: '2026-08-27',
+    documentId: 'tpl-004',
+    documentName: 'MRI 磁共振检查知情同意书',
+    department: '放射科',
     status: 'signed',
     signerName: '王某某家属',
+    method: 'sms',
     source: '工作台发起',
-    expiresAt: '2026-08-27 18:00',
+    expiresAt: '2026-08-29 18:00',
     updatedAt: '2026-08-27 09:12',
+    signedAt: '2026-08-27 09:12',
   },
   {
     id: 'task-003',
+    campus: '本部院区',
+    patientId: 'P202610003',
     patientName: '赵某某',
+    sex: '男',
+    age: 52,
     visitNo: 'ZY20260826027',
+    visitType: '住院',
+    visitDate: '2026-08-26',
+    documentId: 'tpl-003',
     documentName: '内镜检查知情同意书',
     department: '消化内科',
-    status: 'rejected',
+    status: 'expired',
     signerName: '赵某某家属',
+    method: 'sms',
     source: '电子病历',
     expiresAt: '2026-08-27 16:00',
     updatedAt: '2026-08-27 08:45',
   },
+  {
+    id: 'task-004',
+    campus: '本部院区',
+    patientId: 'P202610005',
+    patientName: '陈志强',
+    sex: '男',
+    age: 61,
+    visitNo: 'ZY20260826011',
+    visitType: '住院',
+    visitDate: '2026-08-26',
+    documentId: 'tpl-002',
+    documentName: '住院须知及告知书',
+    department: '普外科',
+    status: 'void',
+    signerName: '陈志强',
+    method: 'pad',
+    source: '电子病历',
+    expiresAt: '2026-08-29 11:00',
+    updatedAt: '2026-08-26 11:20',
+    voidReason: '文档选择错误',
+  },
+  {
+    id: 'task-005',
+    campus: '东院区',
+    patientId: 'P202610004',
+    patientName: '周雅琴',
+    sex: '女',
+    age: 29,
+    visitNo: 'TJ20260825006',
+    visitType: '体检',
+    visitDate: '2026-08-25',
+    documentId: 'tpl-006',
+    documentName: '体检报告发放及知情同意书',
+    department: '健康管理中心',
+    status: 'signing',
+    signerName: '周雅琴',
+    method: 'pad',
+    source: '工作台发起',
+    expiresAt: '2026-08-30 14:20',
+    updatedAt: '2026-08-27 08:20',
+  },
 ]
 
+function clonePatient(patient: PatientProfile): PatientProfile {
+  return {
+    ...patient,
+    visits: patient.visits.map((visit) => ({ ...visit })),
+  }
+}
+
+function cloneTask(task: SigningTaskRecord): SigningTaskRecord {
+  return { ...task }
+}
+
+function getRangeStart(range: SigningTaskQuery['dateRange']) {
+  if (!range || range === 'all') {
+    return null
+  }
+
+  const date = new Date('2026-08-27T00:00:00')
+
+  if (range === 'yesterday') {
+    date.setDate(date.getDate() - 1)
+  } else if (range === '3d') {
+    date.setDate(date.getDate() - 2)
+  } else if (range === '7d') {
+    date.setDate(date.getDate() - 6)
+  }
+
+  return date
+}
+
+function parseMockDate(value: string) {
+  return new Date(value.replace(' ', 'T'))
+}
+
+function formatMockDate(date = new Date('2026-08-27T12:00:00')) {
+  const pad = (value: number) => String(value).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+function addHours(value: string, hours: number) {
+  const date = parseMockDate(value)
+  date.setHours(date.getHours() + hours)
+  return formatMockDate(date)
+}
+
 export function getSigningTasks(query: SigningTaskQuery): Promise<SigningTaskListResponse> {
   if (!useMockData) {
     return request.get<SigningTaskListResponse>('/workbench/signing/tasks', {
@@ -51,23 +337,49 @@ export function getSigningTasks(query: SigningTaskQuery): Promise<SigningTaskLis
   }
 
   const keyword = query.keyword?.trim().toLowerCase()
-  const filteredRecords = mockRecords.filter((record) => {
-    const matchesKeyword =
-      !keyword ||
-      [record.patientName, record.visitNo, record.documentName]
-        .join(' ')
-        .toLowerCase()
-        .includes(keyword)
-    const matchesStatus = !query.status || query.status === 'all' || record.status === query.status
+  const rangeStart = getRangeStart(query.dateRange)
+  const filteredRecords = mockRecords
+    .filter((record) => {
+      const matchesKeyword =
+        !keyword ||
+        [record.patientName, record.patientId, record.visitNo, record.documentName, record.id]
+          .join(' ')
+          .toLowerCase()
+          .includes(keyword)
+      const matchesStatus =
+        !query.status || query.status === 'all' || record.status === query.status
+      const matchesCampus =
+        !query.campus || query.campus === 'all' || record.campus === query.campus
+      const matchesMethod =
+        !query.method || query.method === 'all' || record.method === query.method
+      const matchesDepartment = !query.department || record.department === query.department
+      const matchesDocument = !query.documentId || record.documentId === query.documentId
+      const matchesVisitType =
+        !query.visitType || query.visitType === 'all' || record.visitType === query.visitType
+      const matchesDate = !rangeStart || parseMockDate(record.updatedAt) >= rangeStart
+
+      return (
+        matchesKeyword &&
+        matchesStatus &&
+        matchesCampus &&
+        matchesMethod &&
+        matchesDepartment &&
+        matchesDocument &&
+        matchesVisitType &&
+        matchesDate
+      )
+    })
+    .sort(
+      (left, right) =>
+        parseMockDate(right.updatedAt).getTime() - parseMockDate(left.updatedAt).getTime(),
+    )
 
-    return matchesKeyword && matchesStatus
-  })
   const page = Math.max(query.page, 1)
   const pageSize = Math.max(query.pageSize, 1)
   const start = (page - 1) * pageSize
 
   return Promise.resolve({
-    records: filteredRecords.slice(start, start + pageSize),
+    records: filteredRecords.slice(start, start + pageSize).map(cloneTask),
     total: filteredRecords.length,
     page,
     pageSize,
@@ -79,5 +391,175 @@ export function getSigningTaskDetail(id: string): Promise<SigningTaskRecord | nu
     return request.get<SigningTaskRecord>('/workbench/signing/tasks/' + id)
   }
 
-  return Promise.resolve(mockRecords.find((record) => record.id === id) ?? null)
+  return Promise.resolve(mockRecords.find((record) => record.id === id) ?? null).then((task) =>
+    task ? cloneTask(task) : null,
+  )
+}
+
+export function getPatientProfile(keyword: string): Promise<PatientProfile | null> {
+  if (!useMockData) {
+    return request.get<PatientProfile>('/patients/' + encodeURIComponent(keyword))
+  }
+
+  const normalizedKeyword = keyword.trim()
+  const patient = mockPatients.find(
+    (item) =>
+      item.id === normalizedKeyword ||
+      item.visits.some((visit) => visit.visitNo === normalizedKeyword),
+  )
+
+  return Promise.resolve(patient ? clonePatient(patient) : null)
+}
+
+export function getSigningTemplates(): Promise<SigningTemplate[]> {
+  if (!useMockData) {
+    return request.get<SigningTemplate[]>('/workbench/signing/templates')
+  }
+
+  return Promise.resolve(mockTemplates.map((template) => ({ ...template })))
+}
+
+export function createSigningTask(payload: CreateSigningTaskRequest): Promise<SigningTaskRecord> {
+  if (!useMockData) {
+    return request.post<SigningTaskRecord>('/workbench/signing/tasks', payload)
+  }
+
+  const patient = mockPatients.find((item) => item.id === payload.patientId)
+  const task: SigningTaskRecord = {
+    id: `task-${Date.now()}`,
+    campus: payload.campus,
+    patientId: payload.patientId,
+    patientName: patient?.name ?? '演示患者',
+    sex: patient?.sex ?? '男',
+    age: patient?.age ?? 40,
+    visitNo: payload.visitNo,
+    visitType: payload.visitType,
+    visitDate:
+      patient?.visits.find((visit) => visit.id === payload.visitId)?.visitDate ?? '2026-08-27',
+    documentId: payload.documentId,
+    documentName: payload.documentName,
+    department: payload.department,
+    signerName: patient?.name ?? '演示患者',
+    method: payload.method,
+    status: 'pending',
+    source: '工作台发起',
+    expiresAt: addHours('2026-08-27 12:00', 48),
+    updatedAt: formatMockDate(),
+  }
+
+  mockRecords.unshift(task)
+  return Promise.resolve(cloneTask(task))
+}
+
+export function updateSigningTaskMethod(
+  id: string,
+  method: SigningMethod,
+): Promise<SigningTaskRecord | null> {
+  if (!useMockData) {
+    return request.put<SigningTaskRecord>('/workbench/signing/tasks/' + id + '/method', { method })
+  }
+
+  const task = mockRecords.find((record) => record.id === id)
+
+  if (!task) {
+    return Promise.resolve(null)
+  }
+
+  task.method = method
+  task.updatedAt = formatMockDate()
+  return Promise.resolve(cloneTask(task))
+}
+
+export function completeSigningTask(
+  id: string,
+  signatureDataUrl: string,
+): Promise<SigningTaskRecord | null> {
+  if (!useMockData) {
+    return request.post<SigningTaskRecord>('/workbench/signing/tasks/' + id + '/complete', {
+      signatureDataUrl,
+    })
+  }
+
+  const task = mockRecords.find((record) => record.id === id)
+
+  if (!task) {
+    return Promise.resolve(null)
+  }
+
+  task.status = 'signed'
+  task.signatureDataUrl = signatureDataUrl
+  task.signedAt = formatMockDate()
+  task.updatedAt = task.signedAt
+  return Promise.resolve(cloneTask(task))
+}
+
+export function reopenSigningTask(id: string): Promise<SigningTaskRecord | null> {
+  if (!useMockData) {
+    return request.post<SigningTaskRecord>('/workbench/signing/tasks/' + id + '/reopen')
+  }
+
+  const task = mockRecords.find((record) => record.id === id)
+
+  if (!task) {
+    return Promise.resolve(null)
+  }
+
+  task.status = 'pending'
+  task.signatureDataUrl = undefined
+  task.signedAt = undefined
+  task.updatedAt = formatMockDate()
+  return Promise.resolve(cloneTask(task))
+}
+
+export function voidSigningTask(id: string, reason: string): Promise<SigningTaskRecord | null> {
+  if (!useMockData) {
+    return request.post<SigningTaskRecord>('/workbench/signing/tasks/' + id + '/void', { reason })
+  }
+
+  const task = mockRecords.find((record) => record.id === id)
+
+  if (!task) {
+    return Promise.resolve(null)
+  }
+
+  task.status = 'void'
+  task.voidReason = reason
+  task.signatureDataUrl = undefined
+  task.updatedAt = formatMockDate()
+  return Promise.resolve(cloneTask(task))
+}
+
+export function resendSigningSms(id: string): Promise<SigningTaskRecord | null> {
+  if (!useMockData) {
+    return request.post<SigningTaskRecord>('/workbench/signing/tasks/' + id + '/resend-sms')
+  }
+
+  const task = mockRecords.find((record) => record.id === id)
+
+  if (!task) {
+    return Promise.resolve(null)
+  }
+
+  task.method = 'sms'
+  task.status = 'pending'
+  task.expiresAt = addHours('2026-08-27 12:00', 48)
+  task.updatedAt = formatMockDate()
+  return Promise.resolve(cloneTask(task))
+}
+
+export function getSigningStatusLabel(status: SigningTaskStatus) {
+  const labels: Record<SigningTaskStatus, string> = {
+    pending: '待签署',
+    signing: '签署中',
+    signed: '已签署',
+    rejected: '已拒签',
+    expired: '已超时',
+    void: '已作废',
+  }
+
+  return labels[status]
+}
+
+export function getVisitTypeLabel(type: VisitType) {
+  return type
 }
diff --git a/clinical-web/src/api/workbench/types.ts b/clinical-web/src/api/workbench/types.ts
index 50e2791..2295f42 100644
--- a/clinical-web/src/api/workbench/types.ts
+++ b/clinical-web/src/api/workbench/types.ts
@@ -9,7 +9,38 @@ export interface WorkbenchOverviewQuery {
   rankingPeriod: HomeRankingPeriod
 }
 
-export type SigningTaskStatus = 'pending' | 'signing' | 'signed' | 'rejected' | 'expired'
+export type SigningTaskStatus = 'pending' | 'signing' | 'signed' | 'rejected' | 'expired' | 'void'
+
+export type VisitType = '门诊' | '住院' | '体检'
+
+export interface PatientVisit {
+  id: string
+  type: VisitType
+  visitNo: string
+  department: string
+  visitDate: string
+  isCurrent?: boolean
+}
+
+export interface PatientProfile {
+  id: string
+  name: string
+  sex: '男' | '女'
+  age: number
+  idCard: string
+  phone: string
+  visits: PatientVisit[]
+}
+
+export interface SigningTemplate {
+  id: string
+  name: string
+  code: string
+  department: string
+  category: string
+  description: string
+  supportedMethods: SigningMethod[]
+}
 
 export interface WorkbenchSummary {
   todaySigned: number
@@ -66,12 +97,44 @@ export interface WorkbenchOverviewResponse {
 export interface SigningTaskQuery extends PageQuery {
   keyword?: string
   status?: SigningTaskStatus | 'all'
+  dateRange?: SigningDateRange
+  campus?: WorkbenchCampus | 'all'
+  method?: SigningMethod | 'all'
+  department?: string
+  documentId?: string
+  visitType?: VisitType | 'all'
 }
 
+export type SigningDateRange = 'today' | 'yesterday' | '3d' | '7d' | 'all'
+
 export interface SigningTaskRecord extends WorkbenchTask {
+  campus: WorkbenchCampus
+  patientId: string
+  sex: '男' | '女'
+  age: number
+  documentId: string
   signerName: string
+  method: SigningMethod
   source: string
   expiresAt: string
+  visitType: VisitType
+  visitDate: string
+  signatureDataUrl?: string
+  signedAt?: string
+  voidReason?: string
 }
 
 export type SigningTaskListResponse = PageResult<SigningTaskRecord>
+
+export interface CreateSigningTaskRequest {
+  campus: WorkbenchCampus
+  patientId: string
+  visitId: string
+  documentId: string
+  documentName: string
+  method: SigningMethod
+  visitType: VisitType
+  visitNo: string
+  department: string
+  phone?: string
+}
diff --git a/clinical-web/src/views/workbench/signing/components/NewSigningTaskDialog.vue b/clinical-web/src/views/workbench/signing/components/NewSigningTaskDialog.vue
new file mode 100644
index 0000000..e5c3b53
--- /dev/null
+++ b/clinical-web/src/views/workbench/signing/components/NewSigningTaskDialog.vue
@@ -0,0 +1,1113 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+
+import { createSigningTask, getPatientProfile, getSigningTemplates } from '@/api/workbench/signing'
+import type {
+  PatientProfile,
+  PatientVisit,
+  SigningMethod,
+  SigningTaskRecord,
+  SigningTemplate,
+} from '@/api/workbench/types'
+import { useAppStore } from '@/stores/app'
+
+interface TemplateCategoryGroup {
+  name: string
+  templates: SigningTemplate[]
+}
+
+interface TemplateDepartmentGroup {
+  name: string
+  categories: TemplateCategoryGroup[]
+}
+
+const props = defineProps<{
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  created: [task: SigningTaskRecord]
+}>()
+
+const appStore = useAppStore()
+const patientInput = ref<HTMLInputElement | null>(null)
+const patientId = ref('')
+const patient = ref<PatientProfile | null>(null)
+const visits = ref<PatientVisit[]>([])
+const templates = ref<SigningTemplate[]>([])
+const documentSearch = ref('')
+const selectedTemplateId = ref('')
+const selectedVisitId = ref('')
+const method = ref<SigningMethod>('pad')
+const smsPhone = ref('')
+const patientPhoneRevealed = ref(false)
+const loadingTemplates = ref(false)
+const locating = ref(false)
+const submitting = ref(false)
+
+const errors = reactive({
+  patient: '',
+  visit: '',
+  document: '',
+  phone: '',
+})
+
+const selectedVisit = computed(
+  () => visits.value.find((visit) => visit.id === selectedVisitId.value) ?? null,
+)
+
+const selectedTemplate = computed(
+  () => templates.value.find((template) => template.id === selectedTemplateId.value) ?? null,
+)
+
+const filteredTemplateGroups = computed<TemplateDepartmentGroup[]>(() => {
+  const keyword = documentSearch.value.trim().toLowerCase()
+  const grouped = new Map<string, Map<string, SigningTemplate[]>>()
+
+  templates.value.forEach((template) => {
+    const matches =
+      !keyword ||
+      [template.name, template.code, template.department, template.category]
+        .join(' ')
+        .toLowerCase()
+        .includes(keyword)
+
+    if (!matches) {
+      return
+    }
+
+    const categories = grouped.get(template.department) ?? new Map<string, SigningTemplate[]>()
+    const categoryTemplates = categories.get(template.category) ?? []
+    categoryTemplates.push(template)
+    categories.set(template.category, categoryTemplates)
+    grouped.set(template.department, categories)
+  })
+
+  return [...grouped.entries()].map(([department, categories]) => ({
+    name: department,
+    categories: [...categories.entries()].map(([category, categoryTemplates]) => ({
+      name: category,
+      templates: categoryTemplates,
+    })),
+  }))
+})
+
+function clearErrors() {
+  errors.patient = ''
+  errors.visit = ''
+  errors.document = ''
+  errors.phone = ''
+}
+
+function resetForm() {
+  patientId.value = ''
+  patient.value = null
+  visits.value = []
+  documentSearch.value = ''
+  selectedTemplateId.value = ''
+  selectedVisitId.value = ''
+  method.value = 'pad'
+  smsPhone.value = ''
+  patientPhoneRevealed.value = false
+  clearErrors()
+}
+
+async function loadTemplates() {
+  if (templates.value.length) {
+    return
+  }
+
+  loadingTemplates.value = true
+
+  try {
+    templates.value = await getSigningTemplates()
+  } catch {
+    ElMessage.error('文档模板加载失败，请稍后重试')
+  } finally {
+    loadingTemplates.value = false
+  }
+}
+
+async function locatePatient() {
+  const keyword = patientId.value.trim()
+  errors.patient = ''
+  errors.visit = ''
+  patient.value = null
+  visits.value = []
+  selectedVisitId.value = ''
+  selectedTemplateId.value = ''
+
+  if (!keyword) {
+    errors.patient = '请输入患者 ID、门诊号或住院号'
+    return
+  }
+
+  locating.value = true
+
+  try {
+    const profile = await getPatientProfile(keyword)
+
+    if (!profile) {
+      errors.patient = '未找到该患者，请核对输入内容'
+      smsPhone.value = ''
+      return
+    }
+
+    patient.value = profile
+    visits.value = profile.visits
+    selectedVisitId.value =
+      profile.visits.find((visit) => visit.isCurrent)?.id ?? profile.visits[0]?.id ?? ''
+    smsPhone.value = profile.phone
+  } catch {
+    errors.patient = '患者信息查询失败，请稍后重试'
+  } finally {
+    locating.value = false
+  }
+}
+
+function selectVisit(visit: PatientVisit) {
+  selectedVisitId.value = visit.id
+  errors.visit = ''
+}
+
+function selectTemplate(template: SigningTemplate) {
+  selectedTemplateId.value = template.id
+  errors.document = ''
+
+  if (!template.supportedMethods.includes(method.value)) {
+    method.value = template.supportedMethods[0] ?? 'pad'
+  }
+}
+
+function selectMethod(nextMethod: SigningMethod) {
+  if (selectedTemplate.value && !selectedTemplate.value.supportedMethods.includes(nextMethod)) {
+    return
+  }
+
+  method.value = nextMethod
+  errors.phone = ''
+}
+
+function maskPhone(value: string) {
+  if (value.length < 7) {
+    return value
+  }
+
+  return `${value.slice(0, 3)}****${value.slice(-4)}`
+}
+
+function togglePhone() {
+  patientPhoneRevealed.value = !patientPhoneRevealed.value
+  ElMessage.info('明文查看已记录审计日志')
+}
+
+function validate() {
+  clearErrors()
+  let valid = true
+
+  if (!patient.value) {
+    errors.patient = '请先定位患者'
+    valid = false
+  }
+
+  if (!selectedVisit.value) {
+    errors.visit = '请选择关联就诊'
+    valid = false
+  }
+
+  if (!selectedTemplate.value) {
+    errors.document = '请至少选择一份文档'
+    valid = false
+  }
+
+  if (method.value === 'sms' && !smsPhone.value.trim()) {
+    errors.phone = '请确认短信接收手机号'
+    valid = false
+  }
+
+  return valid
+}
+
+async function submit(keepOpen: boolean) {
+  if (!validate() || !patient.value || !selectedVisit.value || !selectedTemplate.value) {
+    return
+  }
+
+  submitting.value = true
+
+  try {
+    const task = await createSigningTask({
+      campus: appStore.selectedCampus,
+      patientId: patient.value.id,
+      visitId: selectedVisit.value.id,
+      documentId: selectedTemplate.value.id,
+      documentName: selectedTemplate.value.name,
+      method: method.value,
+      visitType: selectedVisit.value.type,
+      visitNo: selectedVisit.value.visitNo,
+      department: selectedVisit.value.department,
+      phone: method.value === 'sms' ? smsPhone.value.trim() : undefined,
+    })
+
+    emit('created', task)
+    ElMessage.success(`已创建 1 个签署任务${method.value === 'sms' ? '，短信已发送' : ''}`)
+
+    if (keepOpen) {
+      selectedTemplateId.value = ''
+      documentSearch.value = ''
+      errors.document = ''
+      await nextTick()
+      patientInput.value?.focus()
+      return
+    }
+
+    emit('close')
+  } catch {
+    ElMessage.error('签署任务创建失败，请稍后重试')
+  } finally {
+    submitting.value = false
+  }
+}
+
+watch(
+  () => props.visible,
+  async (visible) => {
+    if (!visible) {
+      return
+    }
+
+    resetForm()
+    await loadTemplates()
+    await nextTick()
+    patientInput.value?.focus()
+  },
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="dialog-mask" @click.self="emit('close')">
+      <section
+        class="dialog-card new-task-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="new-task-title"
+      >
+        <header class="dialog-header">
+          <strong id="new-task-title">新增签署任务</strong>
+          <span>单页完成，无需分步</span>
+          <button type="button" class="dialog-close" aria-label="关闭" @click="emit('close')">
+            ×
+          </button>
+        </header>
+
+        <div class="dialog-body">
+          <section class="form-section">
+            <header class="section-header">
+              <span class="section-index">A</span>
+              <strong>患者定位</strong>
+              <span>输入患者 ID / 门诊号 / 住院号，回车定位</span>
+            </header>
+            <div class="section-body">
+              <div class="patient-search">
+                <input
+                  ref="patientInput"
+                  v-model="patientId"
+                  placeholder="如：P202610001"
+                  aria-label="患者 ID"
+                  @input="errors.patient = ''"
+                  @keydown.enter.prevent="locatePatient"
+                />
+                <button
+                  type="button"
+                  class="action-button"
+                  :disabled="locating"
+                  @click="locatePatient"
+                >
+                  {{ locating ? '定位中…' : '定位患者' }}
+                </button>
+              </div>
+              <div v-if="patient" class="patient-card">
+                <span class="patient-avatar" aria-hidden="true">人</span>
+                <strong>{{ patient.name }}</strong>
+                <span>{{ patient.sex }} · {{ patient.age }}岁</span>
+                <span class="patient-field"><small>身份证号</small>{{ patient.idCard }}</span>
+                <span class="patient-field">
+                  <small>手机号</small>
+                  {{ patientPhoneRevealed ? patient.phone : maskPhone(patient.phone) }}
+                  <button type="button" class="inline-button" @click="togglePhone">
+                    {{ patientPhoneRevealed ? '隐藏明文' : '显示明文' }}
+                  </button>
+                </span>
+                <span class="patient-field"><small>患者 ID</small>{{ patient.id }}</span>
+                <span v-if="selectedVisit?.isCurrent" class="in-hospital">在院</span>
+              </div>
+              <p v-if="errors.patient" class="field-error">{{ errors.patient }}</p>
+            </div>
+          </section>
+
+          <section class="form-section">
+            <header class="section-header">
+              <span class="section-index">B</span>
+              <strong>关联就诊</strong>
+              <span>默认最近一次，在院优先</span>
+            </header>
+            <div class="section-body">
+              <div v-if="visits.length" class="visit-list">
+                <button
+                  v-for="visit in visits"
+                  :key="visit.id"
+                  type="button"
+                  class="visit-option"
+                  :class="{ 'visit-option--active': visit.id === selectedVisitId }"
+                  @click="selectVisit(visit)"
+                >
+                  <span class="radio-mark" />
+                  <strong>{{ visit.type }} · {{ visit.department }}</strong>
+                  <span class="visit-number">{{ visit.visitNo }}</span>
+                  <span class="visit-date">{{ visit.visitDate }}</span>
+                  <span v-if="visit.isCurrent" class="visit-current">● 在院</span>
+                  <span v-else-if="visit === visits[0]" class="visit-current visit-current--recent"
+                    >最近一次</span
+                  >
+                </button>
+              </div>
+              <p v-else class="section-empty">请先定位患者…</p>
+              <p v-if="errors.visit" class="field-error">{{ errors.visit }}</p>
+            </div>
+          </section>
+
+          <div class="document-method-grid">
+            <section class="form-section document-section">
+              <header class="section-header">
+                <span class="section-index">C</span>
+                <strong>选择文档</strong>
+                <span>单选一份</span>
+                <input
+                  v-model="documentSearch"
+                  placeholder="⌕ 搜索文档名称…"
+                  aria-label="搜索文档"
+                />
+              </header>
+              <div class="section-body">
+                <div v-if="selectedTemplate" class="selected-template">
+                  <span>已选：</span>
+                  <strong>{{ selectedTemplate.name }}</strong>
+                  <button type="button" aria-label="移除已选文档" @click="selectedTemplateId = ''">
+                    ×
+                  </button>
+                </div>
+                <div v-if="loadingTemplates" class="tree-loading">正在加载文档模板…</div>
+                <div v-else-if="filteredTemplateGroups.length" class="template-tree">
+                  <div
+                    v-for="department in filteredTemplateGroups"
+                    :key="department.name"
+                    class="tree-department"
+                  >
+                    <div class="tree-label">
+                      <span>▾</span><strong>{{ department.name }}</strong>
+                    </div>
+                    <div
+                      v-for="category in department.categories"
+                      :key="category.name"
+                      class="tree-category"
+                    >
+                      <div class="tree-label tree-label--category">
+                        <span>▾</span>{{ category.name
+                        }}<small>{{ category.templates.length }}</small>
+                      </div>
+                      <button
+                        v-for="template in category.templates"
+                        :key="template.id"
+                        type="button"
+                        class="document-option"
+                        :class="{ 'document-option--active': selectedTemplateId === template.id }"
+                        @click="selectTemplate(template)"
+                      >
+                        <span class="radio-mark radio-mark--document">●</span>
+                        <span>{{ template.name }}</span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="tree-empty">没有匹配的文档模板</div>
+                <p v-if="errors.document" class="field-error">{{ errors.document }}</p>
+              </div>
+            </section>
+
+            <section class="form-section method-section">
+              <header class="section-header">
+                <span class="section-index">D</span>
+                <strong>签署方式</strong>
+                <span>二选一</span>
+              </header>
+              <div class="section-body">
+                <div class="method-list">
+                  <button
+                    type="button"
+                    class="method-option"
+                    :class="{ 'method-option--active': method === 'pad' }"
+                    :disabled="
+                      Boolean(
+                        selectedTemplate && !selectedTemplate.supportedMethods.includes('pad'),
+                      )
+                    "
+                    @click="selectMethod('pad')"
+                  >
+                    <span class="method-icon">✍</span>
+                    <span
+                      ><strong>手写板签署（现场）</strong
+                      ><small>护士站手写板签署，即签即得</small></span
+                    >
+                  </button>
+                  <button
+                    type="button"
+                    class="method-option"
+                    :class="{ 'method-option--active': method === 'sms' }"
+                    :disabled="
+                      Boolean(
+                        selectedTemplate && !selectedTemplate.supportedMethods.includes('sms'),
+                      )
+                    "
+                    @click="selectMethod('sms')"
+                  >
+                    <span class="method-icon">📱</span>
+                    <span
+                      ><strong>线上签署（短信链接）</strong
+                      ><small>短信发送链接，48 小时内有效</small></span
+                    >
+                  </button>
+                </div>
+                <div v-if="method === 'sms'" class="sms-confirm">
+                  <div class="sms-row">
+                    <span class="sms-icon">📱</span>
+                    <strong>短信将发送至</strong>
+                    <input
+                      v-model="smsPhone"
+                      placeholder="请确认手机号"
+                      aria-label="短信接收手机号"
+                      @input="errors.phone = ''"
+                    />
+                  </div>
+                  <p>可修改为患者其他号码，修改将记录留痕</p>
+                  <p v-if="errors.phone" class="field-error">{{ errors.phone }}</p>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+
+        <footer class="dialog-footer">
+          <span>患者手写签名图片将合成至文档签名域，PDF 原件与签名原图双留存</span>
+          <span class="footer-spacer" />
+          <button type="button" class="action-button action-button--ghost" @click="emit('close')">
+            取消
+          </button>
+          <button
+            type="button"
+            class="action-button action-button--ghost"
+            :disabled="submitting"
+            @click="submit(true)"
+          >
+            提交并继续新增
+          </button>
+          <button type="button" class="action-button" :disabled="submitting" @click="submit(false)">
+            {{ submitting ? '提交中…' : '提交任务' }}
+          </button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.dialog-mask {
+  position: fixed;
+  z-index: 50;
+  inset: 0;
+  display: flex;
+  padding: 16px;
+  overflow-y: auto;
+  background: rgb(9 40 52 / 45%);
+}
+
+.dialog-card {
+  width: 680px;
+  max-width: 96vw;
+  max-height: calc(100vh - 32px);
+  margin: auto;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: var(--sh-modal);
+  animation: dialog-pop 0.18s ease;
+}
+
+.new-task-dialog {
+  display: flex;
+  width: 1200px;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.dialog-header {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.dialog-header strong {
+  font-size: 15px;
+}
+
+.dialog-header > span {
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.dialog-close {
+  flex-shrink: 0;
+  padding: 0;
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 20px;
+  line-height: 1;
+  background: transparent;
+}
+
+.dialog-body {
+  min-height: 0;
+  padding: 12px 18px;
+  overflow-y: auto;
+}
+
+.form-section {
+  margin-bottom: 8px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.section-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 12px;
+  font-size: 12.5px;
+  background: #f5f9fa;
+}
+
+.section-header > span:not(.section-index) {
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.section-index {
+  display: grid;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: #fff;
+  font-size: 10.5px;
+  background: var(--brand);
+  border-radius: 50%;
+  place-items: center;
+}
+
+.section-body {
+  padding: 8px 12px;
+}
+
+.patient-search {
+  display: flex;
+  gap: 10px;
+}
+
+.patient-search input,
+.sms-row input {
+  min-width: 0;
+  padding: 7px 10px;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.patient-search input {
+  flex: 1;
+  font-size: 14px;
+  letter-spacing: 1px;
+}
+
+.patient-search input:focus,
+.sms-row input:focus,
+.section-header input:focus {
+  outline: none;
+  border-color: var(--brand);
+}
+
+.action-button {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  background: var(--brand);
+  border-radius: 7px;
+}
+
+.action-button:hover:not(:disabled) {
+  background: var(--brand-d);
+}
+
+.action-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.action-button--ghost {
+  color: var(--brand);
+  background: #fff;
+  border: 1px solid var(--brand);
+}
+
+.action-button--ghost:hover:not(:disabled) {
+  background: var(--brand-l);
+}
+
+.patient-card {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 7px 12px;
+  margin-top: 8px;
+  background: var(--brand-l);
+  border: 1px solid var(--brand);
+  border-radius: 8px;
+}
+
+.patient-avatar {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  color: #fff;
+  font-size: 13px;
+  background: var(--brand);
+  border-radius: 50%;
+  place-items: center;
+}
+
+.patient-card > strong {
+  color: var(--brand-d);
+  font-size: 15px;
+}
+
+.patient-card > span:not(.patient-field):not(.patient-avatar):not(.in-hospital) {
+  color: var(--ink);
+  font-size: 12px;
+}
+
+.patient-field {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  color: var(--ink);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.patient-field small {
+  color: var(--mut);
+  font-size: 11px;
+}
+
+.inline-button {
+  padding: 2px 5px;
+  color: var(--brand);
+  font-size: 11px;
+  background: transparent;
+  border: 1px solid var(--brand);
+  border-radius: 4px;
+}
+
+.in-hospital {
+  padding: 1px 7px;
+  color: #fff;
+  font-size: 10.5px;
+  background: var(--err);
+  border-radius: 20px;
+}
+
+.field-error {
+  margin: 6px 0 0;
+  color: var(--err);
+  font-size: 12px;
+}
+
+.visit-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.visit-option {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  padding: 5px 10px;
+  color: var(--ink);
+  text-align: left;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.visit-option:hover,
+.visit-option--active {
+  border-color: var(--brand);
+}
+
+.visit-option--active {
+  background: var(--brand-l);
+}
+
+.radio-mark {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  border: 2px solid #b8cbd4;
+  border-radius: 50%;
+}
+
+.visit-option--active .radio-mark {
+  background: radial-gradient(circle, var(--brand) 42%, transparent 46%);
+  border-color: var(--brand);
+}
+
+.visit-option strong {
+  font-size: 12px;
+}
+
+.visit-number,
+.visit-date {
+  color: var(--mut);
+  font-size: 11.5px;
+}
+
+.visit-current {
+  margin-left: auto;
+  color: var(--ok);
+  font-size: 10.5px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.visit-current--recent {
+  color: var(--brand);
+}
+
+.section-empty,
+.tree-empty,
+.tree-loading {
+  padding: 4px 0;
+  margin: 0;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.document-method-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 12px;
+  align-items: stretch;
+}
+
+.document-section,
+.method-section {
+  margin-bottom: 0;
+}
+
+.document-section .section-header input {
+  width: 240px;
+  padding: 4px 10px;
+  margin-left: auto;
+  color: var(--ink);
+  font-size: 12.5px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.document-section .section-header > span:not(.section-index) {
+  margin-left: 4px;
+}
+
+.selected-template {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  padding: 5px 8px;
+  margin-bottom: 6px;
+  color: var(--brand-d);
+  font-size: 12px;
+  background: var(--brand-l);
+  border-radius: 6px;
+}
+
+.selected-template strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selected-template button {
+  padding: 0 3px;
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 16px;
+  line-height: 1;
+  background: transparent;
+}
+
+.template-tree {
+  height: 252px;
+  padding: 6px;
+  overflow-y: auto;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.tree-label {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 5px 6px;
+  font-size: 13px;
+}
+
+.tree-label > span {
+  width: 12px;
+  color: var(--mut);
+  font-size: 10px;
+}
+
+.tree-category {
+  margin-left: 18px;
+}
+
+.tree-label--category {
+  color: var(--ink);
+  font-size: 12px;
+}
+
+.tree-label small {
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 11px;
+}
+
+.document-option {
+  display: flex;
+  width: calc(100% - 10px);
+  gap: 8px;
+  align-items: center;
+  padding: 5px 6px;
+  margin-left: 10px;
+  color: var(--ink);
+  font-size: 12.5px;
+  text-align: left;
+  background: transparent;
+  border-radius: 6px;
+}
+
+.document-option:hover,
+.document-option--active {
+  background: var(--brand-l);
+}
+
+.radio-mark--document {
+  display: grid;
+  width: 15px;
+  height: 15px;
+  color: transparent;
+  font-size: 10px;
+  border: 1.5px solid #b8cbd4;
+  place-items: center;
+}
+
+.document-option--active .radio-mark--document {
+  color: #fff;
+  background: var(--brand);
+  border-color: var(--brand);
+}
+
+.method-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.method-option {
+  display: flex;
+  width: 100%;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 8px 12px;
+  color: var(--ink);
+  text-align: left;
+  background: #fff;
+  border: 1.5px solid var(--line);
+  border-radius: 8px;
+}
+
+.method-option:hover:not(:disabled),
+.method-option--active {
+  border-color: var(--brand);
+}
+
+.method-option--active {
+  background: var(--brand-l);
+}
+
+.method-option:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.method-icon {
+  font-size: 19px;
+  line-height: 1.3;
+}
+
+.method-option strong,
+.method-option small {
+  display: block;
+}
+
+.method-option strong {
+  margin-bottom: 1px;
+  font-size: 13px;
+}
+
+.method-option small {
+  overflow: hidden;
+  color: var(--mut);
+  font-size: 11px;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sms-confirm {
+  padding: 9px 12px;
+  margin-top: 10px;
+  background: var(--brand-l);
+  border: 1px dashed var(--brand);
+  border-radius: 8px;
+}
+
+.sms-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.sms-row strong {
+  flex-shrink: 0;
+  color: var(--brand-d);
+  font-size: 12.5px;
+}
+
+.sms-icon {
+  font-size: 16px;
+}
+
+.sms-row input {
+  width: 170px;
+}
+
+.sms-confirm p {
+  padding-left: 28px;
+  margin: 6px 0 0;
+  color: var(--mut);
+  font-size: 11.5px;
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 10px 18px;
+  color: var(--mut);
+  font-size: 12px;
+  background: #f8fbfc;
+  border-top: 1px solid var(--line);
+  border-radius: 0 0 14px 14px;
+}
+
+.footer-spacer {
+  flex: 1;
+}
+
+@keyframes dialog-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (max-width: 1000px) {
+  .document-method-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .method-section {
+    margin-bottom: 8px;
+  }
+}
+
+@media (max-width: 680px) {
+  .patient-card {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .section-header {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .section-header > span:not(.section-index) {
+    margin-left: 0;
+  }
+
+  .document-section .section-header input {
+    width: 100%;
+    margin-left: 26px;
+  }
+
+  .dialog-footer {
+    align-items: flex-end;
+    flex-wrap: wrap;
+  }
+
+  .dialog-footer > span:first-child {
+    width: 100%;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/components/OnlineSigningDialog.vue b/clinical-web/src/views/workbench/signing/components/OnlineSigningDialog.vue
new file mode 100644
index 0000000..94b1cf3
--- /dev/null
+++ b/clinical-web/src/views/workbench/signing/components/OnlineSigningDialog.vue
@@ -0,0 +1,378 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import type { SigningTaskRecord } from '@/api/workbench/types'
+
+import SignatureCanvas from './SignatureCanvas.vue'
+
+type OnlineStage = 'message' | 'signing'
+
+const props = defineProps<{
+  visible: boolean
+  task: SigningTaskRecord | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  resend: []
+  complete: [signatureDataUrl: string]
+}>()
+
+const stage = ref<OnlineStage>('message')
+const signatureDataUrl = ref<string | null>(null)
+const signatureCanvas = ref<{ clear: () => void } | null>(null)
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      stage.value = 'message'
+      signatureDataUrl.value = null
+    }
+  },
+)
+
+function openLink() {
+  stage.value = 'signing'
+}
+
+function complete() {
+  if (signatureDataUrl.value) {
+    emit('complete', signatureDataUrl.value)
+  }
+}
+
+function clearSignature() {
+  signatureCanvas.value?.clear()
+  signatureDataUrl.value = null
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible && task" class="dialog-mask" @click.self="emit('close')">
+      <section
+        class="dialog-card online-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="online-title"
+      >
+        <header class="dialog-header">
+          <strong id="online-title">线上签署 · 患者手机模拟</strong>
+          <span>{{ task.patientName }} · {{ task.documentName }}</span>
+          <button type="button" class="dialog-close" aria-label="关闭" @click="emit('close')">
+            ×
+          </button>
+        </header>
+
+        <div class="dialog-body">
+          <div class="phone-frame">
+            <div class="phone-screen">
+              <div class="phone-status"><span>9:41</span><span>5G ▮▮▮</span></div>
+              <div class="phone-header">{{ stage === 'message' ? '短信' : '患者签署' }}</div>
+              <div class="phone-body">
+                <template v-if="stage === 'message'">
+                  <div class="message-bubble">
+                    <strong>【xx医院】</strong>
+                    <p>
+                      尊敬的{{ task.patientName }}，您有一份《{{
+                        task.documentName
+                      }}》待签署，请点击下方链接完成签署，链接 48 小时内有效。
+                    </p>
+                    <span class="sign-link">https://s.hosp.cn/s/{{ task.id }}</span>
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="mobile-document">
+                    <strong>{{ task.documentName }}</strong>
+                    <span>{{ task.patientName }} · {{ task.patientId }}</span>
+                    <p>
+                      本人已充分理解本检查/治疗的医疗风险、替代方案及可能的不良后果，自愿接受并签署确认。签名图片与文档原件一并存档。
+                    </p>
+                  </div>
+                  <div class="mobile-signature">
+                    <span>请手写签名：</span>
+                    <SignatureCanvas
+                      ref="signatureCanvas"
+                      :height="140"
+                      placeholder="请在此签名"
+                      @update:data-url="signatureDataUrl = $event"
+                    />
+                  </div>
+                </template>
+              </div>
+              <div v-if="stage === 'signing'" class="phone-footer">
+                <button
+                  type="button"
+                  class="phone-button phone-button--light"
+                  @click="clearSignature"
+                >
+                  清空
+                </button>
+                <button type="button" class="phone-button" @click="complete">确认签署</button>
+              </div>
+              <div v-else class="phone-footer phone-footer--hint">↑ 患者收到短信</div>
+            </div>
+          </div>
+        </div>
+
+        <footer class="dialog-footer">
+          <span>模拟患者收到短信 → 打开链接 → 查看文档 → 手写签署的全过程</span>
+          <span class="footer-spacer" />
+          <button type="button" class="action-button action-button--ghost" @click="emit('resend')">
+            重发短信
+          </button>
+          <button v-if="stage === 'message'" type="button" class="action-button" @click="openLink">
+            模拟打开链接
+          </button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.dialog-mask {
+  position: fixed;
+  z-index: 50;
+  inset: 0;
+  display: flex;
+  padding: 16px;
+  overflow-y: auto;
+  background: rgb(9 40 52 / 45%);
+}
+
+.dialog-card {
+  width: 680px;
+  max-width: 96vw;
+  max-height: calc(100vh - 32px);
+  margin: auto;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: var(--sh-modal);
+  animation: dialog-pop 0.18s ease;
+}
+
+.online-dialog {
+  width: 390px;
+}
+
+.dialog-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.dialog-header strong {
+  overflow: hidden;
+  font-size: 15px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dialog-header span {
+  display: none;
+}
+
+.dialog-close {
+  flex-shrink: 0;
+  padding: 0;
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 20px;
+  line-height: 1;
+  background: transparent;
+}
+
+.dialog-body {
+  padding: 12px;
+}
+
+.phone-frame {
+  width: 330px;
+  padding: 12px 10px;
+  margin: 0 auto;
+  background: var(--side);
+  border-radius: 34px;
+  box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
+}
+
+.phone-screen {
+  display: flex;
+  height: 540px;
+  flex-direction: column;
+  overflow: hidden;
+  background: #f4f7f9;
+  border-radius: 24px;
+}
+
+.phone-status {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 14px;
+  color: #fff;
+  font-size: 11px;
+  background: var(--brand);
+}
+
+.phone-header {
+  padding: 12px 14px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: center;
+  background: var(--brand);
+}
+
+.phone-body {
+  flex: 1;
+  padding: 12px;
+  overflow-y: auto;
+}
+
+.message-bubble,
+.mobile-document,
+.mobile-signature {
+  padding: 11px 13px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: var(--sh);
+}
+
+.message-bubble {
+  margin-top: 14px;
+  color: var(--ink);
+  font-size: 12.5px;
+  line-height: 1.7;
+}
+
+.message-bubble p {
+  margin: 3px 0;
+}
+
+.sign-link {
+  display: block;
+  color: var(--brand);
+  word-break: break-all;
+}
+
+.mobile-document {
+  color: var(--ink);
+  font-size: 12px;
+  line-height: 1.75;
+}
+
+.mobile-document strong,
+.mobile-document span {
+  display: block;
+}
+
+.mobile-document strong {
+  font-size: 13.5px;
+}
+
+.mobile-document span {
+  margin: 6px 0;
+  color: var(--mut);
+  font-size: 11.5px;
+}
+
+.mobile-document p {
+  margin: 0;
+}
+
+.mobile-signature {
+  padding: 10px;
+  margin-top: 10px;
+}
+
+.mobile-signature > span {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.mobile-signature :deep(.signature-canvas) {
+  border-style: dashed;
+}
+
+.phone-footer {
+  display: flex;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #fff;
+  border-top: 1px solid var(--line);
+}
+
+.phone-footer--hint {
+  justify-content: center;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.phone-button {
+  flex: 1;
+  padding: 9px 0;
+  color: #fff;
+  font-size: 13.5px;
+  font-weight: 700;
+  background: var(--brand);
+  border-radius: 22px;
+}
+
+.phone-button--light {
+  color: var(--mut);
+  background: #eef2f4;
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 18px;
+  color: var(--mut);
+  font-size: 12px;
+  background: #f8fbfc;
+  border-top: 1px solid var(--line);
+  border-radius: 0 0 14px 14px;
+}
+
+.footer-spacer {
+  flex: 1;
+}
+
+.action-button {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  background: var(--brand);
+  border-radius: 7px;
+}
+
+.action-button--ghost {
+  color: var(--brand);
+  background: #fff;
+  border: 1px solid var(--brand);
+}
+
+.action-button--ghost:hover {
+  background: var(--brand-l);
+}
+
+@keyframes dialog-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/components/SignatureCanvas.vue b/clinical-web/src/views/workbench/signing/components/SignatureCanvas.vue
new file mode 100644
index 0000000..43ca89a
--- /dev/null
+++ b/clinical-web/src/views/workbench/signing/components/SignatureCanvas.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    height?: number
+    placeholder?: string
+  }>(),
+  {
+    height: 300,
+    placeholder: '请 在 此 签 名',
+  },
+)
+
+const emit = defineEmits<{
+  'update:dataUrl': [value: string | null]
+}>()
+
+const canvas = ref<HTMLCanvasElement | null>(null)
+const hasInk = ref(false)
+
+let context: CanvasRenderingContext2D | null = null
+let pixelRatio = 1
+let drawing = false
+let resizeObserver: ResizeObserver | null = null
+
+function setupCanvas() {
+  const element = canvas.value
+
+  if (!element) {
+    return
+  }
+
+  const rect = element.getBoundingClientRect()
+  pixelRatio = Math.min(window.devicePixelRatio || 1, 2)
+  element.width = Math.max(Math.round(rect.width * pixelRatio), 1)
+  element.height = Math.max(Math.round(props.height * pixelRatio), 1)
+
+  context = element.getContext('2d')
+
+  if (!context) {
+    return
+  }
+
+  context.scale(pixelRatio, pixelRatio)
+  context.lineWidth = 4.2
+  context.lineCap = 'round'
+  context.lineJoin = 'round'
+  context.strokeStyle = '#123a5a'
+  hasInk.value = false
+  emit('update:dataUrl', null)
+}
+
+function getPoint(event: PointerEvent) {
+  const element = canvas.value
+
+  if (!element) {
+    return { x: 0, y: 0 }
+  }
+
+  const rect = element.getBoundingClientRect()
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top,
+  }
+}
+
+function startDrawing(event: PointerEvent) {
+  if (!context || !canvas.value) {
+    return
+  }
+
+  const point = getPoint(event)
+  drawing = true
+  hasInk.value = true
+  context.beginPath()
+  context.moveTo(point.x, point.y)
+  canvas.value.setPointerCapture(event.pointerId)
+  event.preventDefault()
+}
+
+function draw(event: PointerEvent) {
+  if (!drawing || !context) {
+    return
+  }
+
+  const point = getPoint(event)
+  context.lineTo(point.x, point.y)
+  context.stroke()
+  event.preventDefault()
+}
+
+function stopDrawing() {
+  if (!drawing) {
+    return
+  }
+
+  drawing = false
+  emit('update:dataUrl', getDataUrl())
+}
+
+function clear() {
+  const element = canvas.value
+
+  if (!element || !context) {
+    return
+  }
+
+  context.clearRect(0, 0, element.width / pixelRatio, element.height / pixelRatio)
+  hasInk.value = false
+  emit('update:dataUrl', null)
+}
+
+function getDataUrl() {
+  return canvas.value?.toDataURL('image/png') ?? null
+}
+
+defineExpose({
+  clear,
+  getDataUrl,
+})
+
+onMounted(async () => {
+  await nextTick()
+  setupCanvas()
+
+  if (typeof ResizeObserver !== 'undefined' && canvas.value) {
+    resizeObserver = new ResizeObserver(() => {
+      if (!hasInk.value) {
+        setupCanvas()
+      }
+    })
+    resizeObserver.observe(canvas.value)
+  }
+})
+
+watch(
+  () => props.height,
+  () => {
+    void nextTick(setupCanvas)
+  },
+)
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+})
+</script>
+
+<template>
+  <div class="signature-canvas" :style="{ height: `${height}px` }">
+    <canvas
+      ref="canvas"
+      @pointercancel="stopDrawing"
+      @pointerdown="startDrawing"
+      @pointerleave="stopDrawing"
+      @pointermove="draw"
+      @pointerup="stopDrawing"
+    />
+    <span v-if="!hasInk" class="signature-placeholder">{{ placeholder }}</span>
+  </div>
+</template>
+
+<style scoped>
+.signature-canvas {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+}
+
+.signature-canvas canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  cursor: crosshair;
+}
+
+.signature-placeholder {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  color: #c9d8de;
+  font-size: 15px;
+  letter-spacing: 2px;
+  pointer-events: none;
+  place-items: center;
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/components/SignaturePadDialog.vue b/clinical-web/src/views/workbench/signing/components/SignaturePadDialog.vue
new file mode 100644
index 0000000..e376663
--- /dev/null
+++ b/clinical-web/src/views/workbench/signing/components/SignaturePadDialog.vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+
+import type { SigningTaskRecord } from '@/api/workbench/types'
+
+import SignatureCanvas from './SignatureCanvas.vue'
+
+const props = defineProps<{
+  visible: boolean
+  task: SigningTaskRecord | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  confirm: [signatureDataUrl: string]
+}>()
+
+const signatureDataUrl = ref<string | null>(null)
+const signatureCanvas = ref<{ clear: () => void } | null>(null)
+
+watch(
+  () => props.visible,
+  async (visible) => {
+    if (visible) {
+      signatureDataUrl.value = null
+      await nextTick()
+      signatureCanvas.value?.clear()
+    }
+  },
+)
+
+function clearSignature() {
+  signatureCanvas.value?.clear()
+  signatureDataUrl.value = null
+}
+
+function confirmSignature() {
+  if (!signatureDataUrl.value) {
+    ElMessage.warning('请先完成患者签名')
+    return
+  }
+
+  emit('confirm', signatureDataUrl.value)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible && task" class="dialog-mask" @click.self="emit('close')">
+      <section
+        class="dialog-card signature-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="pad-title"
+      >
+        <header class="dialog-header">
+          <strong id="pad-title">手写板签署</strong>
+          <span>{{ task.patientName }} · {{ task.documentName }}</span>
+          <button type="button" class="dialog-close" aria-label="关闭" @click="emit('close')">
+            ×
+          </button>
+        </header>
+        <div class="dialog-body">
+          <p class="dialog-hint">
+            请患者在下框内签名（当前为 Canvas 演示，真实手写板接入走设备适配器）：
+          </p>
+          <SignatureCanvas
+            ref="signatureCanvas"
+            :height="300"
+            @update:data-url="signatureDataUrl = $event"
+          />
+        </div>
+        <footer class="dialog-footer">
+          <span>签名将实时合成到文档签名域</span>
+          <span class="footer-spacer" />
+          <button type="button" class="action-button action-button--ghost" @click="clearSignature">
+            清空重写
+          </button>
+          <button type="button" class="action-button" @click="confirmSignature">确认签署</button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.dialog-mask {
+  position: fixed;
+  z-index: 50;
+  inset: 0;
+  display: flex;
+  padding: 16px;
+  overflow-y: auto;
+  background: rgb(9 40 52 / 45%);
+}
+
+.dialog-card {
+  width: 680px;
+  max-width: 96vw;
+  max-height: calc(100vh - 32px);
+  margin: auto;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: var(--sh-modal);
+  animation: dialog-pop 0.18s ease;
+}
+
+.signature-dialog {
+  width: 760px;
+}
+
+.dialog-header {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.dialog-header strong {
+  font-size: 15px;
+}
+
+.dialog-header span {
+  overflow: hidden;
+  color: var(--mut);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dialog-close {
+  flex-shrink: 0;
+  padding: 0;
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 20px;
+  line-height: 1;
+  background: transparent;
+}
+
+.dialog-body {
+  padding: 12px 18px;
+}
+
+.dialog-hint {
+  margin: 0 0 8px;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 18px;
+  color: var(--mut);
+  font-size: 12px;
+  background: #f8fbfc;
+  border-top: 1px solid var(--line);
+  border-radius: 0 0 14px 14px;
+}
+
+.footer-spacer {
+  flex: 1;
+}
+
+.action-button {
+  padding: 8px 16px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  background: var(--brand);
+  border-radius: 7px;
+}
+
+.action-button:hover {
+  background: var(--brand-d);
+}
+
+.action-button--ghost {
+  color: var(--brand);
+  background: #fff;
+  border: 1px solid var(--brand);
+}
+
+.action-button--ghost:hover {
+  background: var(--brand-l);
+}
+
+@keyframes dialog-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/components/SigningDocumentPreview.vue b/clinical-web/src/views/workbench/signing/components/SigningDocumentPreview.vue
new file mode 100644
index 0000000..8bef87c
--- /dev/null
+++ b/clinical-web/src/views/workbench/signing/components/SigningDocumentPreview.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import type { SigningTaskRecord } from '@/api/workbench/types'
+
+defineProps<{
+  task: SigningTaskRecord
+}>()
+</script>
+
+<template>
+  <article class="paper-preview">
+    <div v-if="task.status === 'void'" class="void-stamp">已 作 废</div>
+    <h2>{{ task.documentName }}</h2>
+    <p class="paper-number">编号：{{ task.id }} · 就诊号：{{ task.visitNo }}</p>
+
+    <p class="paper-meta">
+      患者：<strong>{{ task.patientName }}</strong
+      >（{{ task.sex }}，{{ task.age }}岁） · 患者 ID：{{ task.patientId }}
+    </p>
+    <p class="paper-meta">
+      就诊信息：{{ task.visitType }} · {{ task.department }} · {{ task.visitDate }}
+      <span v-if="task.visitType === '住院'" class="current-badge">在院</span>
+    </p>
+
+    <p>
+      医务人员已就本项检查/治疗的适应证、禁忌证、医疗风险、替代方案及可能出现的不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容。
+    </p>
+    <p>
+      本人自愿接受上述检查/治疗，并同意在相关医疗文书中签署确认。所签署文件将作为医疗过程留痕依据，签署过程采用电子方式完成，签名图片与文档原件一并存档。
+    </p>
+
+    <div class="notice-block">
+      <strong>签署须知：</strong>
+      请仔细阅读全部内容后签名；签名图片将合成至本文档签名域；文档与签名原图双留存，可随时查验；如对内容有疑问，请先向医务人员咨询。
+    </div>
+
+    <div class="signature-grid">
+      <div class="signature-field">
+        <span>患者 / 授权委托人签名：</span>
+        <div class="signature-box">
+          <img v-if="task.signatureDataUrl" :src="task.signatureDataUrl" alt="患者签名" />
+          <span v-else>{{ task.status === 'void' ? '—' : '未签署' }}</span>
+        </div>
+      </div>
+      <div class="signature-field">
+        <span>日期：</span>
+        <div class="signature-box signature-box--date">
+          <span>{{ task.signedAt ?? '—' }}</span>
+        </div>
+      </div>
+      <div class="signature-field">
+        <span>经治医师：</span>
+        <div class="signature-box signature-box--doctor">
+          <span>刘明辉</span>
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.paper-preview {
+  position: relative;
+  min-height: 560px;
+  padding: 34px 44px;
+  color: var(--ink);
+  font-size: 13.5px;
+  line-height: 1.9;
+  background: #fff;
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.paper-preview h2 {
+  margin: 0 0 6px;
+  font-size: 19px;
+  letter-spacing: 2px;
+  text-align: center;
+}
+
+.paper-number {
+  margin: 0 0 18px;
+  color: var(--mut);
+  font-size: 12px;
+  text-align: center;
+}
+
+.paper-preview p {
+  margin: 0 0 6px;
+  text-align: justify;
+  text-indent: 2em;
+}
+
+.paper-preview .paper-meta {
+  color: var(--mut);
+  text-indent: 0;
+}
+
+.paper-meta strong {
+  color: var(--ink);
+}
+
+.current-badge {
+  display: inline-block;
+  padding: 1px 7px;
+  margin-left: 4px;
+  color: var(--err);
+  font-size: 10px;
+  line-height: 1.5;
+  background: var(--err-l);
+  border-radius: 4px;
+}
+
+.notice-block {
+  padding: 10px 14px;
+  margin: 10px 0;
+  font-size: 12.5px;
+  background: #fafcfd;
+  border: 1px dashed var(--line);
+  border-radius: 8px;
+}
+
+.notice-block strong {
+  font-size: 12.5px;
+}
+
+.signature-grid {
+  display: flex;
+  gap: 40px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  margin-top: 22px;
+}
+
+.signature-field > span {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--mut);
+  font-size: 12.5px;
+}
+
+.signature-box {
+  display: flex;
+  min-width: 200px;
+  min-height: 64px;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 2px solid var(--ink);
+}
+
+.signature-box img {
+  max-width: 190px;
+  max-height: 60px;
+}
+
+.signature-box span {
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.signature-box--date {
+  min-width: 150px;
+}
+
+.signature-box--doctor {
+  min-width: 120px;
+}
+
+.void-stamp {
+  position: absolute;
+  top: 34px;
+  right: 44px;
+  padding: 4px 12px;
+  color: rgb(208 83 79 / 70%);
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 4px;
+  border: 2.5px solid rgb(208 83 79 / 55%);
+  border-radius: 8px;
+  transform: rotate(-14deg);
+}
+
+@media (max-width: 700px) {
+  .paper-preview {
+    padding: 26px 24px;
+  }
+
+  .void-stamp {
+    top: 24px;
+    right: 24px;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/components/SigningFilterBar.vue b/clinical-web/src/views/workbench/signing/components/SigningFilterBar.vue
new file mode 100644
index 0000000..8b7840b
--- /dev/null
+++ b/clinical-web/src/views/workbench/signing/components/SigningFilterBar.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+
+import type { WorkbenchCampus, VisitType } from '@/api/workbench/types'
+
+import type { SigningFilterForm, SigningFilterOption } from '../types'
+
+const props = defineProps<{
+  filter: SigningFilterForm
+  campuses: SigningFilterOption<WorkbenchCampus | 'all'>[]
+  statuses: SigningFilterOption<SigningFilterForm['status']>[]
+  methods: SigningFilterOption<SigningFilterForm['method']>[]
+  departments: SigningFilterOption[]
+  documents: SigningFilterOption[]
+  visitTypes: SigningFilterOption<VisitType | 'all'>[]
+}>()
+
+const emit = defineEmits<{
+  search: [filter: SigningFilterForm]
+  add: []
+}>()
+
+const draft = reactive<SigningFilterForm>({ ...props.filter })
+
+watch(
+  () => props.filter,
+  (value) => {
+    Object.assign(draft, value)
+  },
+  { deep: true },
+)
+
+function submit() {
+  emit('search', { ...draft })
+}
+</script>
+
+<template>
+  <form class="filter-card" @submit.prevent="submit">
+    <label class="filter-field">
+      <span>日期</span>
+      <select v-model="draft.dateRange" aria-label="筛选日期">
+        <option value="today">今日</option>
+        <option value="yesterday">昨日</option>
+        <option value="3d">近3天</option>
+        <option value="7d">近7天</option>
+        <option value="all">全部</option>
+      </select>
+    </label>
+
+    <label class="filter-field">
+      <span>状态</span>
+      <select v-model="draft.status" aria-label="筛选状态">
+        <option v-for="option in statuses" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </label>
+
+    <label class="filter-field">
+      <span>院区</span>
+      <select v-model="draft.campus" aria-label="筛选院区">
+        <option v-for="option in campuses" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </label>
+
+    <label class="filter-field">
+      <span>方式</span>
+      <select v-model="draft.method" aria-label="筛选签署方式">
+        <option v-for="option in methods" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </label>
+
+    <label class="filter-field">
+      <span>科室</span>
+      <select v-model="draft.department" aria-label="筛选科室">
+        <option v-for="option in departments" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </label>
+
+    <label class="filter-field">
+      <span>就诊类型</span>
+      <select v-model="draft.visitType" aria-label="筛选就诊类型">
+        <option v-for="option in visitTypes" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </label>
+
+    <label class="filter-field filter-field--document">
+      <span>文档</span>
+      <select v-model="draft.documentId" aria-label="筛选文档">
+        <option v-for="option in documents" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </label>
+
+    <label class="filter-field filter-field--keyword">
+      <span>关键词</span>
+      <input v-model="draft.keyword" placeholder="患者姓名 / ID / 文档名" aria-label="关键词" />
+    </label>
+
+    <span class="filter-spacer" />
+    <button type="submit" class="action-button action-button--ghost">查询</button>
+    <button type="button" class="action-button" @click="emit('add')">＋ 新增签署任务</button>
+  </form>
+</template>
+
+<style scoped>
+.filter-card {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 14px 18px;
+  margin-bottom: 14px;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.filter-field {
+  display: flex;
+  min-width: 104px;
+  gap: 6px;
+  align-items: center;
+  color: var(--mut);
+  font-size: 12.5px;
+}
+
+.filter-field select,
+.filter-field input {
+  width: auto;
+  min-width: 82px;
+  padding: 7px 9px;
+  color: var(--ink);
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.filter-field select:focus,
+.filter-field input:focus {
+  outline: none;
+  border-color: var(--brand);
+}
+
+.filter-field--document select {
+  max-width: 150px;
+}
+
+.filter-field--keyword input {
+  width: 190px;
+}
+
+.filter-spacer {
+  flex: 1;
+  min-width: 12px;
+}
+
+.action-button {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  background: var(--brand);
+  border-radius: 7px;
+  transition: background 0.15s ease;
+}
+
+.action-button:hover {
+  background: var(--brand-d);
+}
+
+.action-button--ghost {
+  color: var(--brand);
+  background: #fff;
+  border: 1px solid var(--brand);
+}
+
+.action-button--ghost:hover {
+  background: var(--brand-l);
+}
+
+@media (max-width: 1200px) {
+  .filter-spacer {
+    display: none;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/components/SigningTaskDetail.vue b/clinical-web/src/views/workbench/signing/components/SigningTaskDetail.vue
new file mode 100644
index 0000000..067343b
--- /dev/null
+++ b/clinical-web/src/views/workbench/signing/components/SigningTaskDetail.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import type { SigningTaskRecord } from '@/api/workbench/types'
+
+import SigningDocumentPreview from './SigningDocumentPreview.vue'
+import TaskAuditTimeline from './TaskAuditTimeline.vue'
+import type { SigningTaskAction } from '../types'
+
+defineProps<{
+  task: SigningTaskRecord | null
+  loading: boolean
+}>()
+
+const emit = defineEmits<{
+  action: [action: SigningTaskAction]
+}>()
+</script>
+
+<template>
+  <section class="detail-panel">
+    <div v-if="loading" class="detail-loading" aria-label="正在加载任务详情">
+      <span class="detail-loading__actions" />
+      <span class="detail-loading__paper" />
+    </div>
+
+    <template v-else-if="task">
+      <div class="task-actions">
+        <span class="task-action-meta">任务 {{ task.id }} · {{ task.patientName }}</span>
+
+        <template v-if="task.status === 'pending' && task.method === 'pad'">
+          <button type="button" class="action-button" @click="emit('action', 'pad-sign')">
+            ✍ 手写板签署
+          </button>
+          <button
+            type="button"
+            class="action-button action-button--ghost"
+            @click="emit('action', 'switch-method')"
+          >
+            转为短信发送
+          </button>
+        </template>
+
+        <template v-else-if="task.status === 'pending' && task.method === 'sms'">
+          <button type="button" class="action-button" @click="emit('action', 'online-sign')">
+            📱 查看线上签署
+          </button>
+          <button
+            type="button"
+            class="action-button action-button--ghost"
+            @click="emit('action', 'switch-method')"
+          >
+            转手写板签署
+          </button>
+          <button
+            type="button"
+            class="action-button action-button--ghost"
+            @click="emit('action', 'resend-sms')"
+          >
+            重发短信
+          </button>
+        </template>
+
+        <template v-else-if="task.status === 'expired'">
+          <button type="button" class="action-button" @click="emit('action', 'reopen')">
+            ↻ 重新发起
+          </button>
+        </template>
+
+        <template v-else-if="task.status === 'signed'">
+          <button
+            type="button"
+            class="action-button action-button--ghost"
+            @click="emit('action', 'download-pdf')"
+          >
+            下载 PDF 原件
+          </button>
+          <button
+            type="button"
+            class="action-button action-button--ghost"
+            @click="emit('action', 'download-signature')"
+          >
+            签名原图
+          </button>
+          <button
+            type="button"
+            class="action-button action-button--ghost"
+            @click="emit('action', 'print')"
+          >
+            打印
+          </button>
+        </template>
+
+        <button
+          v-if="task.status === 'pending' || task.status === 'expired' || task.status === 'signing'"
+          type="button"
+          class="action-button action-button--danger"
+          @click="emit('action', 'void')"
+        >
+          作废
+        </button>
+      </div>
+
+      <SigningDocumentPreview :task="task" />
+      <TaskAuditTimeline :task="task" />
+    </template>
+
+    <div v-else class="detail-empty">
+      <span aria-hidden="true">📋</span>
+      <p>请从左侧列表选择一个签署任务</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.detail-panel {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+
+.task-action-meta {
+  align-self: center;
+  margin-right: auto;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.action-button {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  background: var(--brand);
+  border-radius: 7px;
+  transition: background 0.15s ease;
+}
+
+.action-button:hover {
+  background: var(--brand-d);
+}
+
+.action-button--ghost {
+  color: var(--brand);
+  background: #fff;
+  border: 1px solid var(--brand);
+}
+
+.action-button--ghost:hover {
+  background: var(--brand-l);
+}
+
+.action-button--danger {
+  color: var(--err);
+  background: #fff;
+  border: 1px solid var(--err);
+}
+
+.action-button--danger:hover {
+  background: var(--err-l);
+}
+
+.detail-empty {
+  display: grid;
+  min-height: 560px;
+  padding: 40px 24px;
+  color: var(--mut);
+  text-align: center;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+  place-items: center;
+  align-content: center;
+}
+
+.detail-empty span {
+  margin-bottom: 8px;
+  font-size: 34px;
+  opacity: 0.5;
+}
+
+.detail-empty p {
+  margin: 0;
+  font-size: 13px;
+}
+
+.detail-loading {
+  display: flex;
+  min-height: 680px;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.detail-loading span {
+  display: block;
+  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;
+}
+
+.detail-loading__actions {
+  height: 38px;
+}
+
+.detail-loading__paper {
+  flex: 1;
+  min-height: 560px;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+@media (max-width: 700px) {
+  .task-action-meta {
+    width: 100%;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/components/SigningTaskList.vue b/clinical-web/src/views/workbench/signing/components/SigningTaskList.vue
new file mode 100644
index 0000000..196ecce
--- /dev/null
+++ b/clinical-web/src/views/workbench/signing/components/SigningTaskList.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import type { SigningTaskRecord } from '@/api/workbench/types'
+
+defineProps<{
+  tasks: SigningTaskRecord[]
+  selectedId: string | null
+  total: number
+  loading: boolean
+}>()
+
+const emit = defineEmits<{
+  select: [id: string]
+}>()
+
+const statusLabels: Record<SigningTaskRecord['status'], string> = {
+  pending: '待签署',
+  signing: '签署中',
+  signed: '已签署',
+  rejected: '已拒签',
+  expired: '已超时',
+  void: '已作废',
+}
+
+function getStatusClass(task: SigningTaskRecord) {
+  if (task.status === 'pending') {
+    return task.method === 'pad' ? 'task-status--pad' : 'task-status--sms'
+  }
+
+  return `task-status--${task.status}`
+}
+
+function getMethodLabel(task: SigningTaskRecord) {
+  return task.method === 'pad' ? '✍ 手写板' : '📱 短信'
+}
+
+function getVisitClass(type: SigningTaskRecord['visitType']) {
+  return type === '住院'
+    ? 'visit-tag--hospital'
+    : type === '体检'
+      ? 'visit-tag--check'
+      : 'visit-tag--outpatient'
+}
+</script>
+
+<template>
+  <section class="task-list-panel">
+    <div class="task-list-heading">
+      <strong>签署任务列表</strong>
+      <span>共 {{ total }} 条</span>
+    </div>
+
+    <div v-if="loading" class="task-items task-items--loading" aria-label="正在加载任务">
+      <div v-for="index in 4" :key="index" class="task-skeleton">
+        <span class="task-skeleton__title" />
+        <span />
+        <span />
+        <span class="task-skeleton__short" />
+      </div>
+    </div>
+
+    <div v-else-if="tasks.length" class="task-items">
+      <button
+        v-for="task in tasks"
+        :key="task.id"
+        type="button"
+        class="task-item"
+        :class="{ 'task-item--active': selectedId === task.id }"
+        @click="emit('select', task.id)"
+      >
+        <span class="task-row">
+          <strong>{{ task.patientName }}</strong>
+          <span class="task-basic">{{ task.sex }} · {{ task.age }}岁</span>
+          <span class="task-spacer" />
+          <span class="task-status" :class="getStatusClass(task)">
+            {{
+              task.status === 'pending'
+                ? task.method === 'pad'
+                  ? '待签署·手写板'
+                  : '待签署·短信'
+                : statusLabels[task.status]
+            }}
+          </span>
+        </span>
+        <span class="task-row task-row--document">📄 {{ task.documentName }}</span>
+        <span class="task-row task-row--meta">
+          <span>{{ task.patientId }}</span>
+          <span>{{ task.updatedAt }}</span>
+          <span>{{ getMethodLabel(task) }}</span>
+        </span>
+        <span class="task-row task-row--visit">
+          <span class="visit-tag" :class="getVisitClass(task.visitType)">{{ task.visitType }}</span>
+          <span>{{ task.department }}</span>
+          <span>（{{ task.visitNo }}）</span>
+        </span>
+      </button>
+    </div>
+
+    <div v-else class="task-empty">
+      <span aria-hidden="true">🔍</span>
+      <p>没有符合条件的任务</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.task-list-panel {
+  width: 400px;
+  flex-shrink: 0;
+}
+
+.task-list-heading {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  margin-bottom: 12px;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.task-list-heading strong {
+  font-size: 13.5px;
+}
+
+.task-list-heading span {
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.task-items {
+  max-height: calc(100vh - 270px);
+  padding-right: 3px;
+  overflow-y: auto;
+}
+
+.task-item {
+  display: block;
+  width: 100%;
+  padding: 11px 13px;
+  margin-bottom: 10px;
+  color: var(--ink);
+  text-align: left;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.task-item:hover {
+  border-color: var(--brand);
+}
+
+.task-item--active {
+  background: var(--brand-l);
+  border-color: var(--brand);
+  box-shadow: 0 0 0 1px var(--brand);
+}
+
+.task-row {
+  display: flex;
+  min-width: 0;
+  gap: 8px;
+  align-items: center;
+}
+
+.task-row strong {
+  flex-shrink: 0;
+  font-size: 14px;
+}
+
+.task-basic,
+.task-row--meta,
+.task-row--visit {
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.task-spacer {
+  flex: 1;
+}
+
+.task-status {
+  flex-shrink: 0;
+  padding: 2px 9px;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 20px;
+}
+
+.task-status--pad {
+  color: var(--brand);
+  background: var(--brand-l);
+}
+
+.task-status--sms {
+  color: #7a4dbb;
+  background: #f3ecfb;
+}
+
+.task-status--signing {
+  color: var(--info);
+  background: var(--info-l);
+}
+
+.task-status--signed {
+  color: var(--ok);
+  background: var(--ok-l);
+}
+
+.task-status--rejected,
+.task-status--expired {
+  color: var(--err);
+  background: var(--err-l);
+}
+
+.task-status--void {
+  color: #8a9aa3;
+  background: #eceef0;
+}
+
+.task-row--document {
+  margin-top: 5px;
+  overflow: hidden;
+  color: var(--ink);
+  font-size: 12.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-row--meta {
+  flex-wrap: wrap;
+  margin-top: 5px;
+}
+
+.task-row--visit {
+  flex-wrap: wrap;
+  margin-top: 5px;
+}
+
+.visit-tag {
+  display: inline-block;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.5;
+  border-radius: 4px;
+}
+
+.visit-tag--outpatient {
+  color: var(--ok);
+  background: var(--ok-l);
+}
+
+.visit-tag--hospital {
+  color: var(--err);
+  background: var(--err-l);
+}
+
+.visit-tag--check {
+  color: var(--warn);
+  background: var(--warn-l);
+}
+
+.task-empty {
+  padding: 40px 0;
+  color: var(--mut);
+  text-align: center;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.task-empty span {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 34px;
+  opacity: 0.5;
+}
+
+.task-empty p {
+  margin: 0;
+  font-size: 13px;
+}
+
+.task-items--loading {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.task-skeleton {
+  display: flex;
+  min-height: 144px;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.task-skeleton span {
+  display: block;
+  width: 88%;
+  height: 11px;
+  background: linear-gradient(90deg, #edf3f5 25%, #f7fafb 37%, #edf3f5 63%);
+  background-size: 400% 100%;
+  border-radius: 4px;
+  animation: skeleton-shimmer 1.4s ease infinite;
+}
+
+.task-skeleton__title {
+  width: 65% !important;
+  height: 16px !important;
+}
+
+.task-skeleton__short {
+  width: 48% !important;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+@media (max-width: 1200px) {
+  .task-list-panel {
+    width: 100%;
+  }
+
+  .task-items {
+    max-height: 420px;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/components/TaskAuditTimeline.vue b/clinical-web/src/views/workbench/signing/components/TaskAuditTimeline.vue
new file mode 100644
index 0000000..e25de2f
--- /dev/null
+++ b/clinical-web/src/views/workbench/signing/components/TaskAuditTimeline.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { SigningTaskRecord } from '@/api/workbench/types'
+
+const props = defineProps<{
+  task: SigningTaskRecord
+}>()
+
+const events = computed(() => {
+  const result = [
+    {
+      time: props.task.updatedAt,
+      text: `张文静发起签署任务（${props.task.method === 'pad' ? '手写板' : '线上短信'}）`,
+    },
+  ]
+
+  if (props.task.status === 'signing') {
+    result.push({ time: props.task.updatedAt, text: '已打开签名采集，等待患者完成签名' })
+  }
+
+  if (props.task.signedAt) {
+    result.push({
+      time: props.task.signedAt,
+      text: `患者 ${props.task.patientName} 完成签名，系统自动合成并双留存`,
+    })
+  }
+
+  if (props.task.status === 'void') {
+    result.push({
+      time: props.task.updatedAt,
+      text: `任务已作废${props.task.voidReason ? `，原因：${props.task.voidReason}` : ''}，全程可审计`,
+    })
+  }
+
+  return result
+})
+</script>
+
+<template>
+  <section class="audit-card">
+    <strong>操作留痕</strong>
+    <ol class="audit-list">
+      <li v-for="event in events" :key="`${event.time}-${event.text}`">
+        <time>{{ event.time }}</time>
+        <span>{{ event.text }}</span>
+      </li>
+    </ol>
+  </section>
+</template>
+
+<style scoped>
+.audit-card {
+  padding: 12px 16px;
+  margin-top: 14px;
+  background: var(--card);
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.audit-card > strong {
+  font-size: 12px;
+}
+
+.audit-list {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 0;
+  margin: 6px 0 0;
+  color: var(--mut);
+  font-size: 12px;
+  line-height: 1.65;
+  list-style: none;
+}
+
+.audit-list li {
+  display: flex;
+  gap: 10px;
+}
+
+.audit-list time {
+  flex-shrink: 0;
+  color: var(--mut);
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/components/VoidTaskDialog.vue b/clinical-web/src/views/workbench/signing/components/VoidTaskDialog.vue
new file mode 100644
index 0000000..fa3a5e7
--- /dev/null
+++ b/clinical-web/src/views/workbench/signing/components/VoidTaskDialog.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import type { SigningTaskRecord } from '@/api/workbench/types'
+
+const props = defineProps<{
+  visible: boolean
+  task: SigningTaskRecord | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  confirm: [reason: string]
+}>()
+
+const reason = ref('患者信息录入有误')
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      reason.value = '患者信息录入有误'
+    }
+  },
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible && task" class="dialog-mask" @click.self="emit('close')">
+      <section
+        class="dialog-card void-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="void-title"
+      >
+        <header class="dialog-header">
+          <strong id="void-title">作废确认</strong>
+          <button type="button" class="dialog-close" aria-label="关闭" @click="emit('close')">
+            ×
+          </button>
+        </header>
+        <div class="dialog-body">
+          <div class="void-summary">
+            <span class="void-icon" aria-hidden="true">⚠</span>
+            <div>
+              <p>
+                确定作废任务 <strong>{{ task.id }}</strong
+                >（{{ task.documentName }}）吗？
+              </p>
+              <span>作废后不可恢复，将记录操作人、时间与原因，全程留痕。</span>
+            </div>
+          </div>
+          <label class="reason-field">
+            <span>作废原因（必填）</span>
+            <select v-model="reason" aria-label="作废原因">
+              <option>患者信息录入有误</option>
+              <option>文档选择错误</option>
+              <option>患者拒绝签署</option>
+              <option>重复发起</option>
+              <option>其他</option>
+            </select>
+          </label>
+        </div>
+        <footer class="dialog-footer">
+          <span class="footer-spacer" />
+          <button type="button" class="action-button action-button--ghost" @click="emit('close')">
+            取消
+          </button>
+          <button
+            type="button"
+            class="action-button action-button--danger"
+            @click="emit('confirm', reason)"
+          >
+            确认作废
+          </button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.dialog-mask {
+  position: fixed;
+  z-index: 50;
+  inset: 0;
+  display: flex;
+  padding: 16px;
+  overflow-y: auto;
+  background: rgb(9 40 52 / 45%);
+}
+
+.dialog-card {
+  width: 440px;
+  max-width: 96vw;
+  margin: auto;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: var(--sh-modal);
+  animation: dialog-pop 0.18s ease;
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.dialog-header strong {
+  font-size: 15px;
+}
+
+.dialog-close {
+  padding: 0;
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 20px;
+  line-height: 1;
+  background: transparent;
+}
+
+.dialog-body {
+  padding: 16px 18px 12px;
+}
+
+.void-summary {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.void-icon {
+  font-size: 30px;
+  line-height: 1;
+}
+
+.void-summary p {
+  margin: 0;
+  color: var(--ink);
+  line-height: 1.6;
+}
+
+.void-summary > div > span {
+  display: block;
+  margin-top: 6px;
+  color: var(--mut);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.reason-field {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  margin-top: 14px;
+}
+
+.reason-field span {
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.reason-field select {
+  width: 100%;
+  padding: 7px 10px;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 18px;
+  background: #f8fbfc;
+  border-top: 1px solid var(--line);
+  border-radius: 0 0 14px 14px;
+}
+
+.footer-spacer {
+  flex: 1;
+}
+
+.action-button {
+  padding: 8px 16px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  background: var(--brand);
+  border-radius: 7px;
+}
+
+.action-button--ghost {
+  color: var(--brand);
+  background: #fff;
+  border: 1px solid var(--brand);
+}
+
+.action-button--ghost:hover {
+  background: var(--brand-l);
+}
+
+.action-button--danger {
+  color: var(--err);
+  background: #fff;
+  border: 1px solid var(--err);
+}
+
+.action-button--danger:hover {
+  background: var(--err-l);
+}
+
+@keyframes dialog-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/index.vue b/clinical-web/src/views/workbench/signing/index.vue
index d233180..099d5cf 100644
--- a/clinical-web/src/views/workbench/signing/index.vue
+++ b/clinical-web/src/views/workbench/signing/index.vue
@@ -1,12 +1,520 @@
 <script setup lang="ts">
-import PagePlaceholder from '@/components/PagePlaceholder.vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRoute } from 'vue-router'
+
+import {
+  completeSigningTask,
+  getSigningTaskDetail,
+  getSigningTasks,
+  getSigningTemplates,
+  reopenSigningTask,
+  resendSigningSms,
+  updateSigningTaskMethod,
+  voidSigningTask,
+} from '@/api/workbench/signing'
+import type {
+  SigningDateRange,
+  SigningMethod,
+  SigningTaskRecord,
+  SigningTaskStatus,
+  SigningTemplate,
+  VisitType,
+  WorkbenchCampus,
+} from '@/api/workbench/types'
+import { useAppStore } from '@/stores/app'
+
+import NewSigningTaskDialog from './components/NewSigningTaskDialog.vue'
+import OnlineSigningDialog from './components/OnlineSigningDialog.vue'
+import SignaturePadDialog from './components/SignaturePadDialog.vue'
+import SigningFilterBar from './components/SigningFilterBar.vue'
+import SigningTaskDetail from './components/SigningTaskDetail.vue'
+import SigningTaskList from './components/SigningTaskList.vue'
+import VoidTaskDialog from './components/VoidTaskDialog.vue'
+import type { SigningFilterForm, SigningFilterOption, SigningTaskAction } from './types'
+
+const route = useRoute()
+const appStore = useAppStore()
+
+const STATUS_VALUES: SigningTaskStatus[] = [
+  'pending',
+  'signing',
+  'signed',
+  'rejected',
+  'expired',
+  'void',
+]
+const DATE_RANGE_VALUES: SigningDateRange[] = ['today', 'yesterday', '3d', '7d', 'all']
+
+const statusLabels: Record<SigningTaskStatus, string> = {
+  pending: '待签署',
+  signing: '签署中',
+  signed: '已签署',
+  rejected: '已拒签',
+  expired: '已超时',
+  void: '已作废',
+}
+
+const filter = reactive<SigningFilterForm>({
+  keyword: '',
+  status: 'all',
+  dateRange: 'all',
+  campus: 'all',
+  method: 'all',
+  department: '',
+  documentId: '',
+  visitType: 'all',
+})
+
+const tasks = ref<SigningTaskRecord[]>([])
+const total = ref(0)
+const selectedTaskId = ref<string | null>(null)
+const selectedTask = ref<SigningTaskRecord | null>(null)
+const templates = ref<SigningTemplate[]>([])
+const loading = ref(true)
+const detailLoading = ref(false)
+const newDialogVisible = ref(false)
+const signatureDialogVisible = ref(false)
+const onlineDialogVisible = ref(false)
+const voidDialogVisible = ref(false)
+
+let listRequestId = 0
+let detailRequestId = 0
+
+const campusOptions = computed<SigningFilterOption<WorkbenchCampus | 'all'>[]>(() => [
+  { label: '全部院区', value: 'all' },
+  ...appStore.campuses.map((campus) => ({ label: campus, value: campus })),
+])
+
+const statusOptions: SigningFilterOption<SigningFilterForm['status']>[] = [
+  { label: '全部状态', value: 'all' },
+  ...STATUS_VALUES.map((status) => ({ label: statusLabels[status], value: status })),
+]
+
+const methodOptions: SigningFilterOption<SigningFilterForm['method']>[] = [
+  { label: '全部方式', value: 'all' },
+  { label: '手写板', value: 'pad' },
+  { label: '短信线上', value: 'sms' },
+]
+
+const visitTypeOptions: SigningFilterOption<VisitType | 'all'>[] = [
+  { label: '全部类型', value: 'all' },
+  { label: '门诊', value: '门诊' },
+  { label: '住院', value: '住院' },
+  { label: '体检', value: '体检' },
+]
+
+const departmentOptions = computed<SigningFilterOption[]>(() => {
+  const departments = new Set([
+    ...templates.value.map((template) => template.department),
+    ...tasks.value.map((task) => task.department),
+  ])
+
+  return [
+    { label: '全部科室', value: '' },
+    ...[...departments].sort().map((department) => ({ label: department, value: department })),
+  ]
+})
+
+const documentOptions = computed<SigningFilterOption[]>(() => [
+  { label: '全部文档', value: '' },
+  ...templates.value.map((template) => ({ label: template.name, value: template.id })),
+])
+
+function getQueryString(value: unknown) {
+  return typeof value === 'string' ? value : ''
+}
+
+function isSigningStatus(value: string): value is SigningTaskStatus {
+  return STATUS_VALUES.includes(value as SigningTaskStatus)
+}
+
+function isSigningDateRange(value: string): value is SigningDateRange {
+  return DATE_RANGE_VALUES.includes(value as SigningDateRange)
+}
+
+function syncFilterFromRoute() {
+  const status = getQueryString(route.query.status)
+  const range = getQueryString(route.query.range)
+
+  filter.status = status === 'all' || isSigningStatus(status) ? status : 'all'
+  filter.dateRange = isSigningDateRange(range) ? range : 'all'
+}
+
+async function loadTemplates() {
+  try {
+    templates.value = await getSigningTemplates()
+  } catch {
+    ElMessage.error('文档模板加载失败，请稍后重试')
+  }
+}
+
+async function loadTaskDetail(id: string | null) {
+  const requestId = ++detailRequestId
+
+  if (!id) {
+    selectedTask.value = null
+    detailLoading.value = false
+    return
+  }
+
+  detailLoading.value = true
+
+  try {
+    const detail = await getSigningTaskDetail(id)
+
+    if (requestId === detailRequestId) {
+      selectedTask.value = detail
+    }
+  } catch {
+    if (requestId === detailRequestId) {
+      selectedTask.value = null
+      ElMessage.error('签署任务详情加载失败，请稍后重试')
+    }
+  } finally {
+    if (requestId === detailRequestId) {
+      detailLoading.value = false
+    }
+  }
+}
+
+async function loadTasks(preferredTaskId?: string) {
+  const requestId = ++listRequestId
+  loading.value = true
+
+  try {
+    const response = await getSigningTasks({
+      ...filter,
+      page: 1,
+      pageSize: 50,
+    })
+
+    if (requestId !== listRequestId) {
+      return
+    }
+
+    tasks.value = response.records
+    total.value = response.total
+
+    const taskIds = new Set(response.records.map((task) => task.id))
+    const routeTaskId = getQueryString(route.query.taskId)
+    const nextTaskId =
+      [preferredTaskId, selectedTaskId.value, routeTaskId].find((id) => id && taskIds.has(id)) ??
+      response.records[0]?.id ??
+      null
+
+    selectedTaskId.value = nextTaskId
+    await loadTaskDetail(nextTaskId)
+  } catch {
+    if (requestId === listRequestId) {
+      tasks.value = []
+      total.value = 0
+      selectedTaskId.value = null
+      selectedTask.value = null
+      ElMessage.error('签署任务加载失败，请稍后重试')
+    }
+  } finally {
+    if (requestId === listRequestId) {
+      loading.value = false
+    }
+  }
+}
+
+function handleSearch(nextFilter: SigningFilterForm) {
+  Object.assign(filter, nextFilter)
+  selectedTaskId.value = null
+  void loadTasks()
+}
+
+function selectTask(id: string) {
+  selectedTaskId.value = id
+  void loadTaskDetail(id)
+}
+
+async function refreshTask(updatedTask: SigningTaskRecord | null, successMessage: string) {
+  if (!updatedTask) {
+    ElMessage.error('签署任务不存在或已被删除')
+    return
+  }
+
+  await loadTasks(updatedTask.id)
+  ElMessage.success(successMessage)
+}
+
+async function handleTaskAction(action: SigningTaskAction) {
+  const task = selectedTask.value
+
+  if (!task) {
+    return
+  }
+
+  if (action === 'pad-sign') {
+    signatureDialogVisible.value = true
+    return
+  }
+
+  if (action === 'online-sign') {
+    onlineDialogVisible.value = true
+    return
+  }
+
+  if (action === 'void') {
+    voidDialogVisible.value = true
+    return
+  }
+
+  if (action === 'download-pdf') {
+    ElMessage.info('原型演示：PDF 原件下载接口待接入')
+    return
+  }
+
+  if (action === 'download-signature') {
+    ElMessage.info('原型演示：签名原图下载接口待接入')
+    return
+  }
+
+  if (action === 'print') {
+    ElMessage.info('原型演示：打印服务待接入')
+    return
+  }
+
+  try {
+    if (action === 'switch-method') {
+      const method: SigningMethod = task.method === 'pad' ? 'sms' : 'pad'
+      await refreshTask(
+        await updateSigningTaskMethod(task.id, method),
+        method === 'sms' ? '已切换为短信线上签署' : '已切换为手写板签署',
+      )
+      return
+    }
+
+    if (action === 'resend-sms') {
+      await refreshTask(await resendSigningSms(task.id), '短信已重新发送')
+      return
+    }
+
+    if (action === 'reopen') {
+      await refreshTask(await reopenSigningTask(task.id), '签署任务已重新发起')
+    }
+  } catch {
+    ElMessage.error('任务操作失败，请稍后重试')
+  }
+}
+
+async function confirmPadSignature(signatureDataUrl: string) {
+  const task = selectedTask.value
+
+  if (!task) {
+    return
+  }
+
+  try {
+    await refreshTask(await completeSigningTask(task.id, signatureDataUrl), '手写签署已完成')
+    signatureDialogVisible.value = false
+  } catch {
+    ElMessage.error('手写签署失败，请稍后重试')
+  }
+}
+
+async function completeOnlineSignature(signatureDataUrl: string) {
+  const task = selectedTask.value
+
+  if (!task) {
+    return
+  }
+
+  try {
+    await refreshTask(await completeSigningTask(task.id, signatureDataUrl), '线上签署已完成')
+    onlineDialogVisible.value = false
+  } catch {
+    ElMessage.error('线上签署失败，请稍后重试')
+  }
+}
+
+async function confirmVoidTask(reason: string) {
+  const task = selectedTask.value
+
+  if (!task) {
+    return
+  }
+
+  try {
+    await refreshTask(await voidSigningTask(task.id, reason), '签署任务已作废')
+    voidDialogVisible.value = false
+  } catch {
+    ElMessage.error('任务作废失败，请稍后重试')
+  }
+}
+
+async function handleOnlineResend() {
+  await handleTaskAction('resend-sms')
+}
+
+async function handleTaskCreated(task: SigningTaskRecord) {
+  await loadTasks(task.id)
+}
+
+watch(
+  () => [route.query.status, route.query.range, route.query.taskId],
+  () => {
+    syncFilterFromRoute()
+    selectedTaskId.value = null
+    void loadTasks()
+  },
+)
+
+watch(
+  () => appStore.selectedCampus,
+  (campus) => {
+    if (filter.campus !== 'all') {
+      filter.campus = campus
+    }
+    void loadTasks()
+  },
+)
+
+onMounted(() => {
+  syncFilterFromRoute()
+  void Promise.all([loadTemplates(), loadTasks()])
+})
 </script>
 
 <template>
-  <PagePlaceholder
-    group="工作台"
-    title="签署工作台"
-    icon="✍"
-    description="签署工作台页面占位，待根据 Web 端需求实现。"
-  />
+  <section class="signing-page">
+    <div class="page-intro">
+      <div>
+        <h1>签署任务</h1>
+        <p>集中处理患者知情同意文书的发起、签署与全过程留痕。</p>
+      </div>
+      <div class="page-intro__meta">
+        <span>当前院区：{{ appStore.selectedCampus }}</span>
+        <span>共 {{ total }} 条任务</span>
+      </div>
+    </div>
+
+    <SigningFilterBar
+      :filter="filter"
+      :campuses="campusOptions"
+      :statuses="statusOptions"
+      :methods="methodOptions"
+      :departments="departmentOptions"
+      :documents="documentOptions"
+      :visit-types="visitTypeOptions"
+      @add="newDialogVisible = true"
+      @search="handleSearch"
+    />
+
+    <div class="task-workspace">
+      <SigningTaskList
+        :tasks="tasks"
+        :selected-id="selectedTaskId"
+        :total="total"
+        :loading="loading"
+        @select="selectTask"
+      />
+      <SigningTaskDetail :task="selectedTask" :loading="detailLoading" @action="handleTaskAction" />
+    </div>
+
+    <NewSigningTaskDialog
+      :visible="newDialogVisible"
+      @close="newDialogVisible = false"
+      @created="handleTaskCreated"
+    />
+    <SignaturePadDialog
+      :visible="signatureDialogVisible"
+      :task="selectedTask"
+      @close="signatureDialogVisible = false"
+      @confirm="confirmPadSignature"
+    />
+    <OnlineSigningDialog
+      :visible="onlineDialogVisible"
+      :task="selectedTask"
+      @close="onlineDialogVisible = false"
+      @complete="completeOnlineSignature"
+      @resend="handleOnlineResend"
+    />
+    <VoidTaskDialog
+      :visible="voidDialogVisible"
+      :task="selectedTask"
+      @close="voidDialogVisible = false"
+      @confirm="confirmVoidTask"
+    />
+  </section>
 </template>
+
+<style scoped>
+.signing-page {
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+.page-intro {
+  display: flex;
+  gap: 20px;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+.page-intro h1 {
+  margin: 0;
+  color: var(--ink);
+  font-size: 19px;
+  letter-spacing: 0.5px;
+}
+
+.page-intro p {
+  margin: 4px 0 0;
+  color: var(--mut);
+  font-size: 12.5px;
+}
+
+.page-intro__meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--mut);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.page-intro__meta span {
+  padding: 5px 9px;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.task-workspace {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.task-workspace > * {
+  min-width: 0;
+}
+
+@media (max-width: 1200px) {
+  .task-workspace {
+    flex-direction: column;
+  }
+
+  .task-workspace > * {
+    width: 100%;
+  }
+}
+
+@media (max-width: 680px) {
+  .page-intro {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .page-intro__meta {
+    white-space: normal;
+  }
+}
+</style>
diff --git a/clinical-web/src/views/workbench/signing/types.ts b/clinical-web/src/views/workbench/signing/types.ts
index 83d8da2..3b10aa1 100644
--- a/clinical-web/src/views/workbench/signing/types.ts
+++ b/clinical-web/src/views/workbench/signing/types.ts
@@ -1,18 +1,50 @@
-export type SigningFilterStatus = 'all' | 'pending' | 'signing' | 'signed' | 'rejected' | 'expired'
+import type {
+  PatientProfile,
+  PatientVisit,
+  SigningDateRange,
+  SigningMethod,
+  SigningTaskRecord,
+  SigningTaskStatus,
+  SigningTemplate,
+  VisitType,
+  WorkbenchCampus,
+} from '@/api/workbench/types'
+
+export type SigningFilterStatus = 'all' | SigningTaskStatus
 
 export interface SigningFilterForm {
   keyword: string
   status: SigningFilterStatus
-  dateRange: [string, string] | null
+  dateRange: SigningDateRange
+  campus: WorkbenchCampus | 'all'
+  method: SigningMethod | 'all'
+  department: string
+  documentId: string
+  visitType: VisitType | 'all'
 }
 
-export interface SigningTableRow {
-  id: string
-  patientName: string
-  visitNo: string
-  documentName: string
-  department: string
-  signerName: string
-  status: SigningFilterStatus
-  updatedAt: string
+export type SigningTableRow = SigningTaskRecord
+
+export interface SigningFilterOption<T extends string = string> {
+  label: string
+  value: T
 }
+
+export interface NewSigningTaskState {
+  patient: PatientProfile | null
+  selectedVisit: PatientVisit | null
+  selectedTemplate: SigningTemplate | null
+  method: SigningMethod
+  phone: string
+}
+
+export type SigningTaskAction =
+  | 'pad-sign'
+  | 'online-sign'
+  | 'resend-sms'
+  | 'switch-method'
+  | 'reopen'
+  | 'void'
+  | 'download-pdf'
+  | 'download-signature'
+  | 'print'