feat: 初始化医护端与患者端页面骨架

完成两个 Vite 应用的基础工程化配置、路由、状态管理及第一版业务页面，当前使用演示数据，尚未接入真实后端接口。

patient-h5/README.md

@@ -40,21 +40,18 @@ patient-h5 只服务于一次或一组知情同意签署，不是完整的移动
 - 所有最终状态以服务端结果为准；
 - 需要兼容微信、手机浏览器和常见 iOS/Android 浏览器。
 
-## 技术栈规划(不一定全用到)
+## 当前技术栈
 
 ```text
 Vue 3
 TypeScript
 Vite
 Vue Router
-Vant
-Zod
-pdfjs-dist
-signature_pad
-Vitest
-Playwright
+Axios
 ```
 
+Vant、Zod、PDF 预览、第三方签名组件和自动化测试暂不接入；当前签名区域使用原生 Canvas，先验证业务流程和交互。
+
 患者端应采用移动优先设计，按钮、文字和签名区域需要适合老年患者使用。
 
 ## 与医护端的关系
@@ -70,4 +67,4 @@ patient-h5 不直接访问医院完整电子病历。
 
 ## 当前状态
 
-当前仅完成目录和说明文档，尚未初始化 Vite。
+已完成 Vite 基础初始化、路由、签署流程状态管理和第一版移动端页面骨架。当前流程使用演示数据，尚未接入真实 Token 校验、文书接口和签署提交接口。

patient-h5/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <HelloWorld />
+  <RouterView />
 </template>

patient-h5/src/api/index.ts

@@ -0,0 +1,6 @@
+import axios from 'axios'
+
+export const apiClient = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
+  timeout: 10_000,
+})

patient-h5/src/components/SignatureCanvas.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const hasSignature = ref(false)
+
+let drawingContext: CanvasRenderingContext2D | null = null
+let drawing = false
+
+function resizeCanvas() {
+  const canvas = canvasRef.value
+  if (!canvas) {
+    return
+  }
+
+  const rect = canvas.getBoundingClientRect()
+  const ratio = Math.max(window.devicePixelRatio || 1, 1)
+  canvas.width = Math.floor(rect.width * ratio)
+  canvas.height = Math.floor(rect.height * ratio)
+
+  const context = canvas.getContext('2d')
+  if (!context) {
+    return
+  }
+
+  context.setTransform(ratio, 0, 0, ratio, 0, 0)
+  context.lineCap = 'round'
+  context.lineJoin = 'round'
+  context.lineWidth = 2.4
+  context.strokeStyle = '#173b56'
+  drawingContext = context
+  hasSignature.value = false
+}
+
+function getPoint(event: PointerEvent) {
+  const canvas = canvasRef.value
+  if (!canvas) {
+    return null
+  }
+
+  const rect = canvas.getBoundingClientRect()
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top,
+  }
+}
+
+function startDrawing(event: PointerEvent) {
+  const point = getPoint(event)
+  if (!drawingContext || !point) {
+    return
+  }
+
+  const canvas = canvasRef.value
+  canvas?.setPointerCapture(event.pointerId)
+  drawing = true
+  drawingContext.beginPath()
+  drawingContext.moveTo(point.x, point.y)
+  event.preventDefault()
+}
+
+function draw(event: PointerEvent) {
+  if (!drawing || !drawingContext) {
+    return
+  }
+
+  const point = getPoint(event)
+  if (!point) {
+    return
+  }
+
+  drawingContext.lineTo(point.x, point.y)
+  drawingContext.stroke()
+  hasSignature.value = true
+  event.preventDefault()
+}
+
+function stopDrawing(event: PointerEvent) {
+  const canvas = canvasRef.value
+  if (drawing && canvas?.hasPointerCapture(event.pointerId)) {
+    canvas.releasePointerCapture(event.pointerId)
+  }
+  drawing = false
+}
+
+function clearSignature() {
+  const canvas = canvasRef.value
+  if (!canvas || !drawingContext) {
+    return
+  }
+
+  drawingContext.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight)
+  hasSignature.value = false
+}
+
+function isEmpty() {
+  return !hasSignature.value
+}
+
+onMounted(() => {
+  resizeCanvas()
+  window.addEventListener('resize', resizeCanvas)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resizeCanvas)
+})
+
+defineExpose({ clearSignature, isEmpty })
+</script>
+
+<template>
+  <div class="signature-pad">
+    <div class="signature-pad-heading">
+      <span>请在框内手写签名</span>
+      <span class="signature-hint">签名需清晰完整</span>
+    </div>
+    <canvas
+      ref="canvasRef"
+      class="signature-canvas"
+      aria-label="手写签名区域"
+      @pointerdown="startDrawing"
+      @pointermove="draw"
+      @pointerup="stopDrawing"
+      @pointercancel="stopDrawing"
+      @pointerleave="stopDrawing"
+    />
+    <button class="clear-button" type="button" @click="clearSignature">清除重签</button>
+  </div>
+</template>

patient-h5/src/composables/useSignFlow.ts

@@ -0,0 +1,21 @@
+import { reactive } from 'vue'
+
+import type { SignFlowState } from '@/types/signing'
+
+const initialState: SignFlowState = {
+  patientName: '张*',
+  visitNo: 'MZ20260827018',
+  documentTitle: '儿科急诊特殊检查知情同意书',
+  taskNo: 'CT-20260827-001',
+  consentAccepted: false,
+  signerName: '',
+  relation: '',
+  signatureCaptured: false,
+  submittedAt: '',
+}
+
+export const signingState = reactive<SignFlowState>({ ...initialState })
+
+export function resetSignFlow() {
+  Object.assign(signingState, initialState)
+}

patient-h5/src/main.ts

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
 
-createApp(App).mount('#app')
+import App from './App.vue'
+import router from './router'
+import './styles/index.css'
+
+createApp(App).use(router).mount('#app')

patient-h5/src/router/index.ts

@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import ConsentView from '@/views/consent/ConsentView.vue'
+import EntryView from '@/views/entry/EntryView.vue'
+import ResultView from '@/views/result/ResultView.vue'
+import SignerView from '@/views/signer/SignerView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    { path: '/', redirect: '/entry' },
+    { path: '/entry', component: EntryView, meta: { title: '签署入口' } },
+    { path: '/consent', component: ConsentView, meta: { title: '阅读文书' } },
+    { path: '/signer', component: SignerView, meta: { title: '确认并签署' } },
+    { path: '/result', component: ResultView, meta: { title: '签署结果' } },
+    { path: '/:pathMatch(.*)*', redirect: '/entry' },
+  ],
+})
+
+export default router

patient-h5/src/styles/index.css

@@ -0,0 +1,481 @@
+:root {
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  color: #173b56;
+  background: #f3f8f8;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  background: radial-gradient(circle at 10% 0%, rgb(170 226 215 / 28%), transparent 30%), #f3f8f8;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.mobile-shell {
+  width: min(100%, 560px);
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 30px 20px 42px;
+}
+
+.mobile-brand {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 44px;
+}
+
+.mobile-brand-mark,
+.result-icon {
+  display: grid;
+  place-items: center;
+  color: #17425b;
+  font-weight: 800;
+  border-radius: 14px;
+  background: #9dded1;
+}
+
+.mobile-brand-mark {
+  width: 38px;
+  height: 38px;
+  font-size: 20px;
+}
+
+.mobile-brand strong,
+.mobile-brand span {
+  display: block;
+}
+
+.mobile-brand strong {
+  color: #173b56;
+  font-size: 17px;
+  letter-spacing: 1px;
+}
+
+.mobile-brand span {
+  margin-top: 2px;
+  color: #8497a5;
+  font-size: 10px;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: #4d988d;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 1.4px;
+  text-transform: uppercase;
+}
+
+.mobile-hero,
+.mobile-heading {
+  margin-bottom: 24px;
+}
+
+.mobile-hero h1,
+.mobile-heading h1,
+.result-shell h1 {
+  margin: 0;
+  color: #173b56;
+  font-size: 28px;
+  line-height: 1.25;
+}
+
+.mobile-hero p:not(.eyebrow),
+.mobile-heading p:not(.eyebrow),
+.result-copy {
+  margin: 12px 0 0;
+  color: #788f9d;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.mobile-card,
+.document-card,
+.signature-pad {
+  border: 1px solid #e0eceb;
+  border-radius: 18px;
+  background: rgb(255 255 255 / 86%);
+  box-shadow: 0 12px 30px rgb(33 79 92 / 5%);
+}
+
+.patient-card {
+  padding: 20px;
+}
+
+.card-label {
+  margin-bottom: 16px;
+  color: #8196a3;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+
+.patient-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.patient-avatar {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  color: #1c736b;
+  font-size: 18px;
+  font-weight: 700;
+  place-items: center;
+  border-radius: 14px;
+  background: #dff3ee;
+}
+
+.patient-row strong,
+.patient-row span {
+  display: block;
+}
+
+.patient-row strong {
+  color: #294d64;
+  font-size: 16px;
+}
+
+.patient-row span {
+  margin-top: 5px;
+  color: #8aa0aa;
+  font-size: 12px;
+}
+
+.task-number {
+  margin-top: 18px;
+  padding-top: 14px;
+  color: #8aa0aa;
+  font-size: 11px;
+  border-top: 1px solid #edf3f2;
+}
+
+.notice-card {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  margin-top: 14px;
+  padding: 16px;
+}
+
+.notice-icon {
+  display: grid;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  color: #2a8176;
+  font-size: 13px;
+  font-weight: 800;
+  place-items: center;
+  border-radius: 50%;
+  background: #dff3ee;
+}
+
+.notice-card strong,
+.notice-card p {
+  display: block;
+}
+
+.notice-card strong {
+  color: #31576c;
+  font-size: 13px;
+}
+
+.notice-card p {
+  margin: 6px 0 0;
+  color: #8298a3;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.mobile-primary-button {
+  width: 100%;
+  min-height: 50px;
+  margin-top: 24px;
+  padding: 0 20px;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+  border: 0;
+  border-radius: 13px;
+  background: #277d78;
+  box-shadow: 0 10px 20px rgb(39 125 120 / 18%);
+}
+
+.mobile-primary-button:hover {
+  background: #216c68;
+}
+
+.mobile-text-button {
+  display: block;
+  margin: 14px auto 0;
+  padding: 6px 12px;
+  color: #4d988d;
+  font-size: 13px;
+  border: 0;
+  background: transparent;
+}
+
+.secure-note {
+  margin: 18px 0 0;
+  color: #9aabb3;
+  font-size: 11px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.mobile-stepper {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  margin-bottom: 30px;
+  color: #a4b4bb;
+  font-size: 11px;
+}
+
+.mobile-stepper span.is-active {
+  color: #267d77;
+  font-weight: 700;
+}
+
+.mobile-stepper i {
+  width: 18px;
+  height: 1px;
+  background: #d3e3e1;
+}
+
+.document-card {
+  max-height: 48vh;
+  margin-bottom: 18px;
+  padding: 20px;
+  overflow: auto;
+}
+
+.document-meta {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 22px;
+  color: #90a4ad;
+  font-size: 11px;
+}
+
+.document-card h2 {
+  margin: 20px 0 8px;
+  color: #31566c;
+  font-size: 15px;
+}
+
+.document-card h2:first-of-type {
+  margin-top: 0;
+}
+
+.document-card p {
+  margin: 0;
+  color: #718995;
+  font-size: 13px;
+  line-height: 1.8;
+}
+
+.document-placeholder {
+  margin-top: 20px;
+  padding: 13px;
+  color: #7c9997;
+  font-size: 11px;
+  text-align: center;
+  border: 1px dashed #b8d8d1;
+  border-radius: 10px;
+  background: #f3fbf9;
+}
+
+.check-row {
+  display: flex;
+  gap: 9px;
+  align-items: flex-start;
+  color: #5d7885;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.check-row input {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  margin: 2px 0 0;
+  accent-color: #277d78;
+}
+
+.form-error {
+  margin: 10px 0 0;
+  color: #c65d5d;
+  font-size: 12px;
+}
+
+.signer-form {
+  margin-bottom: 18px;
+  padding: 20px;
+}
+
+.field-label {
+  display: block;
+  margin-bottom: 8px;
+  color: #567281;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.field-label + .field-label {
+  margin-top: 18px;
+}
+
+.mobile-input {
+  width: 100%;
+  min-height: 46px;
+  padding: 0 13px;
+  color: #31566c;
+  font-size: 14px;
+  border: 1px solid #d8e8e6;
+  border-radius: 10px;
+  outline: 0;
+  background: #fbfefd;
+}
+
+.mobile-input:focus {
+  border-color: #69b5aa;
+  box-shadow: 0 0 0 3px rgb(105 181 170 / 14%);
+}
+
+.signature-pad {
+  padding: 16px;
+}
+
+.signature-pad-heading {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  color: #567281;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.signature-hint {
+  color: #9aabb3;
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.signature-canvas {
+  display: block;
+  width: 100%;
+  height: 180px;
+  touch-action: none;
+  border: 1px dashed #b9d8d2;
+  border-radius: 10px;
+  background:
+    linear-gradient(#fff, #fff),
+    repeating-linear-gradient(
+      to bottom,
+      transparent 0,
+      transparent 43px,
+      rgb(185 216 210 / 28%) 44px,
+      transparent 45px
+    );
+  background-blend-mode: multiply;
+}
+
+.clear-button {
+  margin-top: 9px;
+  padding: 5px 0;
+  color: #4d988d;
+  font-size: 11px;
+  border: 0;
+  background: transparent;
+}
+
+.result-shell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 100px;
+  text-align: center;
+}
+
+.result-icon {
+  width: 68px;
+  height: 68px;
+  margin-bottom: 22px;
+  color: #1f776f;
+  font-size: 32px;
+  border-radius: 22px;
+}
+
+.result-copy {
+  max-width: 370px;
+}
+
+.result-card {
+  width: 100%;
+  margin-top: 28px;
+  padding: 6px 20px;
+  text-align: left;
+}
+
+.result-card > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 15px 0;
+  border-bottom: 1px solid #edf3f2;
+}
+
+.result-card > div:last-child {
+  border-bottom: 0;
+}
+
+.result-card span {
+  color: #91a4ad;
+  font-size: 12px;
+}
+
+.result-card strong {
+  color: #31566c;
+  font-size: 12px;
+}
+
+@media (max-width: 380px) {
+  .mobile-shell {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .mobile-hero h1,
+  .mobile-heading h1,
+  .result-shell h1 {
+    font-size: 25px;
+  }
+}

patient-h5/src/types/signing.ts

@@ -0,0 +1,21 @@
+export type SignerRelation = '本人' | '父亲' | '母亲' | '其他监护人' | '其他'
+
+export interface SignFlowState {
+  patientName: string
+  visitNo: string
+  documentTitle: string
+  taskNo: string
+  consentAccepted: boolean
+  signerName: string
+  relation: SignerRelation | ''
+  signatureCaptured: boolean
+  submittedAt: string
+}
+
+export const relationOptions: Array<{ value: SignerRelation; label: string }> = [
+  { value: '本人', label: '本人' },
+  { value: '父亲', label: '父亲' },
+  { value: '母亲', label: '母亲' },
+  { value: '其他监护人', label: '其他监护人' },
+  { value: '其他', label: '其他' },
+]

patient-h5/src/views/consent/ConsentView.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { signingState } from '@/composables/useSignFlow'
+
+const router = useRouter()
+const hasRead = ref(false)
+const errorMessage = ref('')
+
+function continueToSigner() {
+  if (!hasRead.value) {
+    errorMessage.value = '请先确认已阅读文书内容。'
+    return
+  }
+
+  signingState.consentAccepted = true
+  void router.push('/signer')
+}
+</script>
+
+<template>
+  <main class="mobile-shell">
+    <div class="mobile-stepper">
+      <span class="is-active">1 阅读</span>
+      <i />
+      <span>2 确认</span>
+      <i />
+      <span>3 完成</span>
+    </div>
+
+    <section class="mobile-heading">
+      <p class="eyebrow">知情同意书</p>
+      <h1>{{ signingState.documentTitle }}</h1>
+      <p>请完整阅读以下内容。如有疑问，请联系为您说明情况的医生。</p>
+    </section>
+
+    <article class="document-card">
+      <div class="document-meta">
+        <span>患者：{{ signingState.patientName }}</span>
+        <span>版本：V1.0</span>
+      </div>
+      <h2>一、检查/治疗说明</h2>
+      <p>
+        医生已向患者或监护人说明拟实施的检查、治疗目的、操作过程、可能风险及替代方案。患者或监护人可以就相关内容向医务人员提出问题。
+      </p>
+      <h2>二、可能风险</h2>
+      <p>
+        具体风险因患者病情、检查方式和治疗方案而异。请在充分了解相关情况后，结合医生建议决定是否同意。
+      </p>
+      <h2>三、患者权利</h2>
+      <p>
+        患者或监护人有权选择同意或拒绝本次检查/治疗。拒绝可能影响后续诊疗安排，相关情况将按医院流程记录。
+      </p>
+      <div class="document-placeholder">正式文书 PDF 将在接入后端后展示</div>
+    </article>
+
+    <label class="check-row">
+      <input v-model="hasRead" type="checkbox" />
+      <span>我已阅读并理解上述内容，愿意继续确认签署人信息。</span>
+    </label>
+    <p v-if="errorMessage" class="form-error">{{ errorMessage }}</p>
+
+    <button class="mobile-primary-button" type="button" @click="continueToSigner">下一步</button>
+    <button class="mobile-text-button" type="button" @click="router.back()">返回</button>
+  </main>
+</template>

patient-h5/src/views/entry/EntryView.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+import { resetSignFlow, signingState } from '@/composables/useSignFlow'
+
+const router = useRouter()
+
+function startSigning() {
+  resetSignFlow()
+  void router.push('/consent')
+}
+</script>
+
+<template>
+  <main class="mobile-shell">
+    <header class="mobile-brand">
+      <div class="mobile-brand-mark">签</div>
+      <div>
+        <strong>医签通</strong>
+        <span>医疗知情同意签署</span>
+      </div>
+    </header>
+
+    <section class="mobile-hero">
+      <p class="eyebrow">待签署文书</p>
+      <h1>{{ signingState.documentTitle }}</h1>
+      <p>请确认以下任务信息，并在阅读文书后完成签署。</p>
+    </section>
+
+    <section class="mobile-card patient-card">
+      <div class="card-label">患者信息</div>
+      <div class="patient-row">
+        <div class="patient-avatar">{{ signingState.patientName.slice(0, 1) }}</div>
+        <div>
+          <strong>{{ signingState.patientName }}</strong>
+          <span>{{ signingState.visitNo }}</span>
+        </div>
+      </div>
+      <div class="task-number">任务编号：{{ signingState.taskNo }}</div>
+    </section>
+
+    <section class="mobile-card notice-card">
+      <div class="notice-icon">i</div>
+      <div>
+        <strong>请使用实际签署人的信息</strong>
+        <p>如果由家属或监护人代签，请在下一步选择与患者的关系。</p>
+      </div>
+    </section>
+
+    <button class="mobile-primary-button" type="button" @click="startSigning">
+      开始阅读并签署
+    </button>
+
+    <p class="secure-note">本页面仅用于本次知情同意签署，请勿转发签署链接。</p>
+  </main>
+</template>

patient-h5/src/views/result/ResultView.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+import { resetSignFlow, signingState } from '@/composables/useSignFlow'
+
+const router = useRouter()
+
+function returnToEntry() {
+  resetSignFlow()
+  void router.replace('/entry')
+}
+</script>
+
+<template>
+  <main class="mobile-shell result-shell">
+    <div class="result-icon">✓</div>
+    <p class="eyebrow">签署完成</p>
+    <h1>知情同意书已提交</h1>
+    <p class="result-copy">本次签署结果已提交至医签通。请按照医务人员指引完成后续诊疗安排。</p>
+
+    <section class="mobile-card result-card">
+      <div>
+        <span>患者</span>
+        <strong>{{ signingState.patientName }}</strong>
+      </div>
+      <div>
+        <span>签署人</span>
+        <strong>{{ signingState.signerName }}（{{ signingState.relation }}）</strong>
+      </div>
+      <div>
+        <span>提交时间</span>
+        <strong>{{ signingState.submittedAt }}</strong>
+      </div>
+    </section>
+
+    <p class="secure-note">请不要重复提交。如需修改，请联系现场医务人员。</p>
+    <button class="mobile-text-button" type="button" @click="returnToEntry">返回首页</button>
+  </main>
+</template>

patient-h5/src/views/signer/SignerView.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import SignatureCanvas from '@/components/SignatureCanvas.vue'
+import { signingState } from '@/composables/useSignFlow'
+import { relationOptions, type SignerRelation } from '@/types/signing'
+
+interface SignatureCanvasExpose {
+  clearSignature: () => void
+  isEmpty: () => boolean
+}
+
+const router = useRouter()
+const signerName = ref('')
+const relation = ref<SignerRelation | ''>('')
+const errorMessage = ref('')
+const signatureCanvas = ref<SignatureCanvasExpose | null>(null)
+
+function submitSigning() {
+  const trimmedName = signerName.value.trim()
+  if (!trimmedName) {
+    errorMessage.value = '请输入实际签署人姓名。'
+    return
+  }
+  if (!relation.value) {
+    errorMessage.value = '请选择签署人与患者的关系。'
+    return
+  }
+  if (signatureCanvas.value?.isEmpty()) {
+    errorMessage.value = '请完成手写签名。'
+    return
+  }
+
+  signingState.signerName = trimmedName
+  signingState.relation = relation.value
+  signingState.signatureCaptured = true
+  signingState.submittedAt = new Date().toLocaleString('zh-CN')
+  void router.push('/result')
+}
+</script>
+
+<template>
+  <main class="mobile-shell">
+    <div class="mobile-stepper">
+      <span>1 阅读</span>
+      <i />
+      <span class="is-active">2 确认</span>
+      <i />
+      <span>3 完成</span>
+    </div>
+
+    <section class="mobile-heading">
+      <p class="eyebrow">签署人确认</p>
+      <h1>请确认实际签署人</h1>
+      <p>签署人信息将与本次知情同意记录一并保存。</p>
+    </section>
+
+    <section class="mobile-card signer-form">
+      <label class="field-label" for="signer-name">签署人姓名</label>
+      <input id="signer-name" v-model="signerName" class="mobile-input" placeholder="请输入姓名" />
+
+      <label class="field-label" for="signer-relation">与患者关系</label>
+      <select id="signer-relation" v-model="relation" class="mobile-input">
+        <option value="" disabled>请选择关系</option>
+        <option v-for="option in relationOptions" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </section>
+
+    <SignatureCanvas ref="signatureCanvas" />
+
+    <p v-if="errorMessage" class="form-error">{{ errorMessage }}</p>
+    <button class="mobile-primary-button" type="button" @click="submitSigning">确认提交签署</button>
+    <button class="mobile-text-button" type="button" @click="router.back()">返回修改</button>
+  </main>
+</template>