优化纸质单据抬头日期间距

frontend/src/components/documentForms/DocumentFormShell.vue

@@ -8,10 +8,14 @@
       :signature-labels="signatureLabels"
     >
       <div class="document-form-meta" :aria-label="metaAriaLabel">
-        <span>{{ metaLabel }}</span>
-        <strong>{{ companyName }}</strong>
-        <span>{{ dateLabel }}</span>
-        <strong>{{ displayBusinessDate }}</strong>
+        <span class="document-form-meta-pair">
+          <span>{{ metaLabel }}</span>
+          <strong>{{ companyName }}</strong>
+        </span>
+        <span class="document-form-meta-pair document-form-meta-date">
+          <span>{{ dateLabel }}</span>
+          <strong>{{ displayBusinessDate }}</strong>
+        </span>
       </div>
 
       <main class="document-form-body">

frontend/src/components/documentForms/documentForms.test.js

@@ -50,6 +50,20 @@ describe("document form foundation", () => {
     assert.match(mainCss, /\.warehouse-paper-control-grid/);
   });
 
+  it("keeps document header labels close to their values instead of stretching business date apart", () => {
+    const shell = readComponent("DocumentFormShell.vue");
+
+    assert.match(shell, /class="document-form-meta-pair"/);
+    assert.match(shell, /class="document-form-meta-pair document-form-meta-date"/);
+    assert.match(mainCss, /\.document-form-meta\s*\{[\s\S]*display:\s*flex;/);
+    assert.match(mainCss, /\.document-form-meta-date\s*\{[\s\S]*margin-left:\s*auto;/);
+    assert.doesNotMatch(
+      mainCss.match(/\.document-form-meta\s*\{[\s\S]*?\}/)?.[0] || "",
+      /grid-template-columns:[^;]*1fr/,
+      "document form meta should not use a flexible spacer that separates 业务日期 from its date value"
+    );
+  });
+
   it("keeps the final paper layout contract after legacy warehouse grid rules", () => {
     const legacyWarehouseGrid = mainCss.lastIndexOf(".warehouse-document-section-grid {");
     const finalContract = mainCss.lastIndexOf("Final paper document layout contract");

frontend/src/styles/main.css

@@ -16536,10 +16536,11 @@ body .login-production-layout .login-security-foot p {
 }
 
 .document-form-meta {
-  display: grid;
-  grid-template-columns: auto auto minmax(0, 1fr) auto;
-  gap: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 18px;
   align-items: center;
+  justify-content: flex-start;
   padding: 9px 12px;
   color: rgba(23, 18, 10, 0.72);
   border: 2px solid rgba(20, 14, 6, 0.82);
@@ -16552,11 +16553,29 @@ body .login-production-layout .login-security-foot p {
   letter-spacing: 0.08em;
 }
 
+.document-form-meta-pair {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.document-form-meta-date {
+  margin-left: auto;
+}
+
+.document-form-meta-pair > span {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
 .document-form-meta strong {
   display: inline-flex;
   align-items: center;
+  flex: 0 0 auto;
   min-height: 26px;
   padding: 0 10px;
+  white-space: nowrap;
   color: #145c39;
   border: 1.5px solid rgba(31, 122, 74, 0.64);
   background: rgba(232, 246, 232, 0.62);
@@ -16842,7 +16861,6 @@ body .login-production-layout .login-security-foot p {
 }
 
 @media (max-width: 960px) {
-  .document-form-meta,
   .document-section-grid,
   .document-control-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -16858,12 +16876,21 @@ body .login-production-layout .login-security-foot p {
     padding-inline: 0;
   }
 
-  .document-form-meta,
   .document-section-grid,
   .document-control-grid {
     grid-template-columns: 1fr;
   }
 
+  .document-form-meta {
+    align-items: stretch;
+  }
+
+  .document-form-meta-pair,
+  .document-form-meta-date {
+    width: 100%;
+    margin-left: 0;
+  }
+
   .document-paper-field,
   .document-paper-field-wide,
   .document-paper-field-full {