fix(签署文书): 按字段分配页眉取值下划线宽度

clinical-web/src/utils/signing-document.ts

@@ -464,7 +464,7 @@ function buildDocumentHeader(doc: Document, answers: SigningAnswers): HTMLElemen
   const header = doc.createElement('header')
   header.className = 'sign-doc-header'
 
-  SIGNING_DOCUMENT_HEADER.forEach(({ id, label }) => {
+  SIGNING_DOCUMENT_HEADER.forEach(({ id, label, valueWidthEm }) => {
     const item = doc.createElement('span')
     item.className = 'sign-doc-header__item'
 
@@ -476,6 +476,9 @@ function buildDocumentHeader(doc: Document, answers: SigningAnswers): HTMLElemen
     const valueElement = doc.createElement('span')
     valueElement.className = 'sign-doc-header__value'
     valueElement.textContent = typeof value === 'string' ? value : ''
+    // 宽度随字段走（而不是写死在样式里）：页眉四项要挤在一行，
+    // 各字段需要的下划线长度差别很大，样式里只能给一个统一值，容易撑到换行
+    valueElement.style.minWidth = `${valueWidthEm}em`
 
     item.appendChild(labelElement)
     item.appendChild(valueElement)

clinical-web/src/utils/signing-fields.ts

@@ -44,6 +44,19 @@ export const SIGNING_FIELD_PRESETS: SigningFieldDef[] = [
   { id: 'doctor', label: '医师签名', kind: 'signature', required: false, options: [] },
 ]
 
+/**
+ * 固定页眉的一项。
+ * valueWidthEm 是取值下划线的宽度（em）：页眉要在一行内放下四项，
+ * 按内容长度分配比统一宽度更省地方——性别、年龄只有一个字/两位数字，
+ * 用和「住院号/门诊号」一样的长度就会把整行挤到换行。
+ */
+export interface SigningHeaderField {
+  /** 字段键，与 SIGNING_FIELD_PRESETS 对应 */
+  id: string
+  label: string
+  valueWidthEm: number
+}
+
 /**
  * 文书固定页眉。
  *
@@ -54,12 +67,15 @@ export const SIGNING_FIELD_PRESETS: SigningFieldDef[] = [
  * 因为页眉是系统渲染的只读展示（不挂 data-sign-field），
  * 它既不会出现在"填写项"统计里，也不会被写进签署证据——
  * 患者信息以任务快照为准，页眉只是把快照展示出来。
+ *
+ * 宽度预算：A4 版心约 680px，四项标签合计约 250px、项间距约 54px，
+ * 取值下划线合计控制在约 290px 以内，留出余量保证一行放得下。
  */
-export const SIGNING_DOCUMENT_HEADER: Array<{ id: string; label: string }> = [
-  { id: 'patient', label: '患者姓名' },
-  { id: 'sex', label: '性别' },
-  { id: 'age', label: '年龄' },
-  { id: 'visit', label: '住院号/门诊号' },
+export const SIGNING_DOCUMENT_HEADER: SigningHeaderField[] = [
+  { id: 'patient', label: '患者姓名', valueWidthEm: 5.5 },
+  { id: 'sex', label: '性别', valueWidthEm: 2.8 },
+  { id: 'age', label: '年龄', valueWidthEm: 3.2 },
+  { id: 'visit', label: '住院号/门诊号', valueWidthEm: 9 },
 ]
 
 /**

clinical-web/src/views/management/documents/components/DocumentPreviewDialog.vue

@@ -455,11 +455,12 @@ function syncPreviewFields() {
   max-width: 100%;
 }
 
-/* 固定页眉：患者基本信息由 HIS 自动带出，与正文之间用一条横线分隔 */
+/* 固定页眉：患者基本信息由 HIS 自动带出，与正文之间用一条横线分隔。
+   四项要在一行内放下，取值下划线的宽度由字段定义给出（内联 min-width），样式里不再写死 */
 .signing-preview :deep(.sign-doc-header) {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px 26px;
+  gap: 10px 18px;
   padding-bottom: 10px;
   margin-bottom: 16px;
   border-bottom: 1.5px solid #52646e;
@@ -467,7 +468,7 @@ function syncPreviewFields() {
 
 .signing-preview :deep(.sign-doc-header__item) {
   display: inline-flex;
-  gap: 4px;
+  gap: 3px;
   align-items: baseline;
 }
 
@@ -478,8 +479,7 @@ function syncPreviewFields() {
 }
 
 .signing-preview :deep(.sign-doc-header__value) {
-  min-width: 6.5em;
-  padding: 0 6px 1px;
+  padding: 0 5px 1px;
   color: #1c2b33;
   font-size: 12.5px;
   text-align: center;

clinical-web/src/views/workbench/signing/components/SigningDocumentInteractive.vue

@@ -333,11 +333,12 @@ defineExpose({ getDocumentElement })
   max-width: 100%;
 }
 
-/* 固定页眉：患者基本信息由 HIS 自动带出，与正文之间用一条横线分隔 */
+/* 固定页眉：患者基本信息由 HIS 自动带出，与正文之间用一条横线分隔。
+   四项要在一行内放下，取值下划线的宽度由字段定义给出（内联 min-width），样式里不再写死 */
 .sign-doc-body :deep(.sign-doc-header) {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px 26px;
+  gap: 10px 18px;
   padding-bottom: 10px;
   margin-bottom: 16px;
   border-bottom: 1.5px solid #52646e;
@@ -345,7 +346,7 @@ defineExpose({ getDocumentElement })
 
 .sign-doc-body :deep(.sign-doc-header__item) {
   display: inline-flex;
-  gap: 4px;
+  gap: 3px;
   align-items: baseline;
 }
 
@@ -356,8 +357,7 @@ defineExpose({ getDocumentElement })
 }
 
 .sign-doc-body :deep(.sign-doc-header__value) {
-  min-width: 6.5em;
-  padding: 0 6px 1px;
+  padding: 0 5px 1px;
   color: #1c2b33;
   font-size: 12.5px;
   text-align: center;