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

完成两个 Vite 应用的基础工程化配置、路由、状态管理及第一版业务页面，当前使用演示数据，尚未接入真实后端接口。
2026-08-27 11:27:16 +08:00
parent 01827bf304
commit 36fa15487c
28 changed files with 2089 additions and 37 deletions
@@ -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>