fix(admin): 完善弹窗滚动与表单交互布局

2026-10-21 07:40:08 +08:00
parent 2f9a3330e5
commit 0a1968a134
41 changed files with 614 additions and 131 deletions
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
 import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -122,11 +123,11 @@ onMounted(() => load())
        <p v-for="reason in context.blockReasons" :key="reason" role="status">{{ reason }}</p>
        <div v-if="!context.sources.length" aria-label="原批次货物快照"><p>当前批次无分批资格，以下为原预约保留的货物资料。</p><div v-for="(item, index) in context.appointment.items" :key="item.id" class="allocation-row"><b>来源 {{ index + 1 }} · {{ item.inboundCode || '原票业务号未提供' }}</b><p>{{ item.fbaWarehouseCode }} · {{ item.packageCount ?? '箱数待核实' }}<span v-if="item.packageCount != null"> 箱</span></p><p>货件：{{ item.shipmentReferences?.join('、') || '待核实' }}</p></div></div>
        <div class="batch-modes"><el-button :disabled="saving || !!pending || !context.allowedActions.includes('SPLIT')" @click="changeMode('split')">分成两次送仓</el-button><el-button :disabled="saving || !!pending || !context.allowedActions.includes('MERGE')" @click="changeMode('merge')">同仓合并安排</el-button></div>
-        <form class="density-form" @submit.prevent="save"><fieldset :disabled="saving || !!pending || loading || !canWrite">
-          <div v-for="(source, index) in context.sources" :key="allocationKey(source)" class="allocation-row"><b>来源 {{ index + 1 }} · {{ sourceLabel(source) }}</b><p>本批 {{ source.packageCount ?? '待核实' }} 箱 · 原箱数 {{ source.originalPackages ?? '未知' }}</p><p>货件：{{ source.shipmentReferences.join('、') || '待核实' }}</p><label v-if="mode === 'split'">分到第二批的箱数<input v-model="form.moved[allocationKey(source)]" type="number" min="0" :max="source.packageCount ?? undefined" step="1" :aria-label="`来源${index + 1}分出箱数`"></label><el-button v-if="context.allowedActions.includes('VERIFY_CARGO')" @click="verify(source)">核实本票资料</el-button></div>
-          <template v-if="mode === 'merge'"><label>查找另一批工作事项<input v-model="keyword" placeholder="预约号、批次号、柜号" maxlength="80" @keydown.enter.prevent="searchCandidates()"></label><el-button :loading="candidateLoading" @click="searchCandidates()">查询批次</el-button><LoadErrorState v-if="candidateError" title="合并候选不可用" :message="candidateError.message" @retry="searchCandidates(candidatePage)" /><div v-for="candidate in candidates?.records.filter(item => item.batchKey && item.batchKey !== activeKey)" :key="candidate.workItemKey" class="batch-candidate"><span>{{ candidate.title }} · {{ candidate.destinationName || '目的仓待核实' }}</span><el-button :disabled="candidateLoading" @click="chooseOther(candidate.batchKey!)">核对并选择</el-button></div><p v-if="candidates && !candidates.records.length">本页未查询到工作事项。</p><div v-if="candidates && candidates.total > 8" class="batch-modes"><el-button :disabled="candidatePage === 1 || candidateLoading" @click="searchCandidates(candidatePage - 1)">上一页</el-button><span>第 {{ candidatePage }} 页</span><el-button :disabled="candidatePage * 8 >= candidates.total || candidateLoading" @click="searchCandidates(candidatePage + 1)">下一页</el-button></div><p v-if="other">已核对：{{ other.appointment.appointmentNo }}，{{ other.sources.length }} 条来源；提交时再次逐来源校验。</p></template>
-          <label>{{ mode === 'split' ? '第一批目标日期（可不填）' : '合并后目标日期（可不填）' }}<el-date-picker v-model="form.firstDate" type="date" :disabled="saving || !!pending || loading || !canWrite" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label v-if="mode === 'split'">第二批目标日期（可不填）<el-date-picker v-model="form.nextDate" type="date" :disabled="saving || !!pending || loading || !canWrite" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>调整原因<textarea v-model="form.reason" required maxlength="1000" /></label><label>批次备注<textarea v-model="form.remark" maxlength="1000" /></label>
-        </fieldset><LoadErrorState v-if="saveError" title="批次调整未完成" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState><el-button type="primary" native-type="submit" :loading="saving" :disabled="!canSubmit || !!result">{{ pending ? '重试本次调整' : mode === 'split' ? '拆分为两批预约安排' : '合并为一批继续预约' }}</el-button></form>
+        <form class="density-form appointment-native-form" @submit.prevent="save"><fieldset :disabled="saving || !!pending || loading || !canWrite">
+          <div v-for="(source, index) in context.sources" :key="allocationKey(source)" class="allocation-row"><b>来源 {{ index + 1 }} · {{ sourceLabel(source) }}</b><p>本批 {{ source.packageCount ?? '待核实' }} 箱 · 原箱数 {{ source.originalPackages ?? '未知' }}</p><p>货件：{{ source.shipmentReferences.join('、') || '待核实' }}</p><label v-if="mode === 'split'">分到第二批的箱数<input v-model="form.moved[allocationKey(source)]" type="number" min="0" :max="source.packageCount ?? undefined" step="1" :aria-label="`来源${index + 1}分出箱数`" class="workbench-input"></label><el-button v-if="context.allowedActions.includes('VERIFY_CARGO')" @click="verify(source)">核实本票资料</el-button></div>
+          <template v-if="mode === 'merge'"><label>查找另一批工作事项<input v-model="keyword" placeholder="预约号、批次号、柜号" maxlength="80" @keydown.enter.prevent="searchCandidates()" class="workbench-input"></label><el-button :loading="candidateLoading" @click="searchCandidates()">查询批次</el-button><LoadErrorState v-if="candidateError" title="合并候选不可用" :message="candidateError.message" @retry="searchCandidates(candidatePage)" /><div v-for="candidate in candidates?.records.filter(item => item.batchKey && item.batchKey !== activeKey)" :key="candidate.workItemKey" class="batch-candidate"><span>{{ candidate.title }} · {{ candidate.destinationName || '目的仓待核实' }}</span><el-button :disabled="candidateLoading" @click="chooseOther(candidate.batchKey!)">核对并选择</el-button></div><p v-if="candidates && !candidates.records.length">本页未查询到工作事项。</p><div v-if="candidates && candidates.total > 8" class="batch-modes"><el-button :disabled="candidatePage === 1 || candidateLoading" @click="searchCandidates(candidatePage - 1)">上一页</el-button><span>第 {{ candidatePage }} 页</span><el-button :disabled="candidatePage * 8 >= candidates.total || candidateLoading" @click="searchCandidates(candidatePage + 1)">下一页</el-button></div><p v-if="other">已核对：{{ other.appointment.appointmentNo }}，{{ other.sources.length }} 条来源；提交时再次逐来源校验。</p></template>
+          <label>{{ mode === 'split' ? '第一批目标日期（可不填）' : '合并后目标日期（可不填）' }}<el-date-picker v-model="form.firstDate" type="date" :disabled="saving || !!pending || loading || !canWrite" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label v-if="mode === 'split'">第二批目标日期（可不填）<el-date-picker v-model="form.nextDate" type="date" :disabled="saving || !!pending || loading || !canWrite" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>调整原因<textarea v-model="form.reason" required maxlength="1000" class="workbench-input" /></label><label>批次备注<textarea v-model="form.remark" maxlength="1000" class="workbench-input" /></label>
+        </fieldset><LoadErrorState v-if="saveError" title="批次调整未完成" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState><div class="density-actions density-actions--footer appointment-form-actions"><el-button type="primary" native-type="submit" :loading="saving" :disabled="!canSubmit || !!result">{{ pending ? '重试本次调整' : mode === 'split' ? '拆分为两批预约安排' : '合并为一批继续预约' }}</el-button></div></form>
      </template>
    </template>
  </section>
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -60,13 +62,13 @@ onMounted(() => load())
    <template v-if="context">
      <dl class="cargo-facts"><dt>原票</dt><dd>{{ context.source.inboundCode || context.source.bookingNo || '—' }}</dd><dt>目的仓</dt><dd>{{ context.source.destinationWarehouseCode || '—' }}</dd><dt>原箱数</dt><dd>{{ context.source.packages ?? '待核实' }}</dd><dt>已分配</dt><dd>{{ context.allocatedPackages }} 箱<span v-if="context.unknownAllocationCount">；另有 {{ context.unknownAllocationCount }} 项数量未知</span></dd><dt>可分配</dt><dd>{{ context.availablePackages ?? '待核实' }}</dd></dl>
      <p v-if="context.sourceChanged" role="alert">原货源已变化，请核对当前原票和已分配量后重新保存。</p><p v-for="reason in context.blockReasons" :key="reason" role="status">{{ reason }}</p>
-      <form class="density-form work-form" @submit.prevent="save"><fieldset :disabled="!canWrite || loading || !!error || saving || !!pending">
-        <label>核实箱数（可暂不填）<input v-model="form.packages" type="number" min="1" step="1" aria-label="核实箱数"></label>
-        <label>本票货件号 / 追踪号（每行一个）<textarea v-model="form.references" rows="4" aria-label="本票货件号" /></label>
-        <label>核实说明<textarea v-model="form.remark" maxlength="1000" rows="2" /></label>
+      <form class="density-form work-form appointment-native-form" @submit.prevent="save"><fieldset :disabled="!canWrite || loading || !!error || saving || !!pending">
+        <label>核实箱数（可暂不填）<input v-model="form.packages" type="number" min="1" step="1" aria-label="核实箱数" class="workbench-input"></label>
+        <label>本票货件号 / 追踪号（每行一个）<textarea v-model="form.references" rows="4" aria-label="本票货件号" class="workbench-input" /></label>
+        <label>核实说明<textarea v-model="form.remark" maxlength="1000" rows="2" class="workbench-input" /></label>
      </fieldset><p v-if="!canWrite">当前仅可查看核实资料；需核实权限及有效货源资格才能保存。</p>
      <LoadErrorState v-if="saveError" title="核实资料未保存" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState>
-      <el-button type="primary" native-type="submit" :loading="saving" :disabled="!canWrite || loading || !!error">{{ pending ? '重试本次保存' : '保存核实资料' }}</el-button></form>
+      <div class="density-actions density-actions--footer appointment-form-actions"><el-button type="primary" native-type="submit" :loading="saving" :disabled="!canWrite || loading || !!error">{{ pending ? '重试本次保存' : '保存核实资料' }}</el-button></div></form>
    </template>
  </section>
 </template>
@@ -271,3 +271,15 @@ V13 日历布局：按已确认定高要求，月日格固定 146px，周日格
 视觉目标：1920×1080、100%缩放，待人工截图确认。单元测试与类型检查单独报告，不代表真实接口或页面验收通过。原业务跳转缺少的业务号/客户范围在协作交接中列明，不由前端补造；工作 Slot 与原预约编辑均保留完整跨日时间。原业务页面返回入口只接受预约工作页，并保留原事项、前置事项、筛选及页码。

 2026-10-20 用户追加整页白底修正：整页主要列表外层workbench-table及整页详情workbench-panel显式增加is-page-surface，由公共样式移除最外圈border/radius/shadow。内部指标、图表、并列卡片、子表格线、弹框和日历左右独立面板保留；本批不改padding、脚本或承载。预约页面没有额外整页面板，当前双面板结构保持，不给左右面板增加该modifier。
+
+
+### 2026-10-21 弹框表单可用性修复
+
+依据：本轮弹框可用性反馈；沿用本文件原有逐操作承载，不调整业务字段与提交逻辑。
+
+| 页面/文件 | 操作与承载 | 结构问题与修复 | 验收 |
+|---|---|---|---|
+| WorkCommandForm、AppointmentBatchForm、WorkReceivingPanel、CargoVerificationForm | 预约工作弹框中的命令、批次、收货范围与货物核实 | 原生控件未命中 Element 表单样式；显式复用 workbench-input，并通过 appointmentNativeForms.css 补齐标签/控件排列、fieldset 间距及底部提交区 | 定向回归通过；待人工1920×1080、100%截图确认 |
+| WorkAppointmentForm、WorkDispatchForm | 预约取消、按预约批次排车 | 取消原因与计划托位原生控件接入同一局部表单样式；复选框与既有候选分页保留 | 定向回归通过；待人工截图确认 |
+
+本次6个Vue仅变更样式导入、class与操作区容器；与修改前快照逐项核对，业务脚本、v-model、事件、权限/禁用条件均一致。类型检查、全量回归与构建由总控统一收口。
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -57,7 +59,7 @@ async function save() {
 onMounted(() => load())
 </script>
 <template>
-  <section class="work-form" aria-label="预约安排">
+  <section class="work-form appointment-native-form" aria-label="预约安排">
    <h3>{{ cancel ? '取消本次预约' : rebooking ? '沿原批次重新预约' : '登记预约安排' }}</h3>
    <LoadErrorState v-if="error" title="预约详情读取失败" :message="error.message" :loading="loading" @retry="load(true)"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
    <p v-if="loading">正在读取原预约…</p>
@@ -67,7 +69,7 @@ onMounted(() => load())
      <p v-if="replaced">原预约已被替代，保留历史只读。当前批次：{{ detail.replacementAppointmentNos?.join('、') || '—' }}。{{ detail.repartitionReason }}</p>
      <el-button v-if="detail.batchKey && !saving && !pending" @click="emit('batch', detail.batchKey)">{{ replaced ? '查看替代批次' : '分批 / 合并与货物来源' }}</el-button>
      <el-button v-if="detail.batchKey && !replaced && !saving && !pending" :disabled="loading || !!error" @click="emit('receiving', detail.batchKey)">客户调整 / 共同预约范围</el-button>
-      <template v-if="cancel"><p>取消原预约并保留历史；工作需求与后续跟进仍保留。已有运输安排须满足原业务取消条件。</p><label>取消原因<textarea v-model="reason" :disabled="!writable || saving || !!pending" maxlength="1000" /></label></template>
+      <template v-if="cancel"><p>取消原预约并保留历史；工作需求与后续跟进仍保留。已有运输安排须满足原业务取消条件。</p><label>取消原因<textarea v-model="reason" :disabled="!writable || saving || !!pending" maxlength="1000" class="workbench-input" /></label></template>
      <FbaAppointmentFields v-else :model="form" :appointment-no="detail.appointmentNo" :timezone="detail.timezone" :disabled="!writable || loading || !!error || saving || !!pending" />
      <p v-if="!writable">当前预约仅可查看。</p>
      <LoadErrorState v-if="saveError" title="预约未保存" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState>
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -86,20 +88,20 @@ async function save() {
 }
 </script>
 <template>
-  <form class="density-form work-form" @submit.prevent="save">
+  <form class="density-form work-form appointment-native-form" @submit.prevent="save">
    <h3>{{ action.label }}<InlineHelp v-if="command === 'SAVE_FOLLOWUP'" title="跟进日期说明"><p>跟进日期不代替作业日期；未完成事项仍保留在待办中。</p></InlineHelp><InlineHelp v-if="command === 'RESOLVE_REVIEW'" title="核对结果说明"><p>原安排需要改期时，请先处理原安排，再记录核对结果。</p></InlineHelp></h3>
    <p v-if="!allowed">当前仅可查看。此操作需要有效的服务端资格和对应操作权限。</p>
    <p v-if="missingContext" role="alert">{{ missingContext }}</p>
    <fieldset :disabled="!allowed || refreshing || saving || !!pending">
-      <template v-if="command === 'CONFIRM_ROUTE'"><label>运输方式<select v-model="form.flow"><option value="TRANSFER">先入海外仓，再分批送仓</option><option value="DIRECT">整柜直接送目的仓</option></select></label><label>路线说明<textarea v-model="form.reason" maxlength="1000" /></label></template>
-      <template v-else-if="command === 'SAVE_FOLLOWUP'"><label>跟进负责人<select v-model="form.ownerId" required><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>本次回复<textarea v-model="form.note" required maxlength="1000" /></label><label>下次跟进日期（可留空）<el-date-picker v-model="form.followupDate" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label></template>
-      <template v-else-if="command === 'RESOLVE_REVIEW'"><p v-for="reason in detail.review?.reasons" :key="reason">{{ reason }}</p><label>本次核对结果<textarea v-model="form.note" required maxlength="1000" /></label></template>
-      <template v-else-if="command === 'SAVE_REQUIREMENT'"><label>目标日期（可暂不填）<el-date-picker v-model="form.date" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><div class="time-fields"><label>开始时段（可留空）<el-time-picker v-model="form.startTime" :disabled="!allowed || refreshing || saving || !!pending" format="HH:mm" value-format="HH:mm" clearable /></label><label>结束日期（可留空）<el-date-picker v-model="form.endDate" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>结束时段（可留空）<el-time-picker v-model="form.endTime" :disabled="!allowed || refreshing || saving || !!pending" format="HH:mm" value-format="HH:mm" clearable /></label></div><p>{{ item.timezone || '地点时区待核实' }}</p><label v-if="item.type === 'DELIVERY'"><input v-model="form.bookingRequired" type="checkbox">需要收货方预约</label><label>收货要求<textarea v-model="form.receivingRequirements" :required="!form.bookingRequired" maxlength="1000" /></label><label>处理说明<textarea v-model="form.reason" required maxlength="1000" /></label></template>
-      <template v-else-if="command === 'HANDOFF_RETURN'"><p>转交保留原预约和责任记录；接手方确认前持续跟进。</p><label>接手方类型<select v-model="form.recipientKind" @change="changeRecipient"><option value="EXTERNAL">外部车队 / 联系人</option><option value="SUPPLIER">已登记海外车队</option><option value="USER">当前关联负责人</option></select></label><label v-if="form.recipientKind === 'EXTERNAL'">接手方名称<input v-model="form.recipientName" required maxlength="200"></label><template v-else-if="form.recipientKind === 'SUPPLIER'"><label>查找海外车队<input v-model="supplierKeyword" maxlength="80" @keydown.enter.prevent="searchSuppliers"></label><el-button :loading="supplierLoading" @click="searchSuppliers">查询车队</el-button><LoadErrorState v-if="supplierError" title="还空车队不可用" :message="supplierError.message" @retry="searchSuppliers" /><label>接手车队<select v-model="form.recipientId" required :disabled="supplierLoading || !!supplierError"><option value="" disabled>请选择已登记海外车队</option><option v-for="supplier in suppliers" :key="supplier.id" :value="supplier.id">{{ supplier.name }}</option></select></label><p v-if="supplierTotal > suppliers.length">请输入更完整名称缩小查询范围。</p></template><label v-else>接手负责人<select v-model="form.recipientId" required><option value="" disabled>请选择</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>转交原因<textarea v-model="form.reason" required maxlength="1000" /></label></template>
-      <template v-else-if="command === 'ACCEPT_RETURN'"><p>原责任方：{{ detail.returnHandoff?.from.name || '—' }} → 接手方：{{ detail.returnHandoff?.to.name || '—' }}</p><label>接手反馈依据<textarea v-model="form.note" :required="detail.returnHandoff?.to.kind !== 'USER'" maxlength="1000" /></label><p>确认接手只记录责任，实际还空仍按原业务操作。</p></template>
+      <template v-if="command === 'CONFIRM_ROUTE'"><label>运输方式<select v-model="form.flow" class="workbench-input"><option value="TRANSFER">先入海外仓，再分批送仓</option><option value="DIRECT">整柜直接送目的仓</option></select></label><label>路线说明<textarea v-model="form.reason" maxlength="1000" class="workbench-input" /></label></template>
+      <template v-else-if="command === 'SAVE_FOLLOWUP'"><label>跟进负责人<select v-model="form.ownerId" required class="workbench-input"><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>本次回复<textarea v-model="form.note" required maxlength="1000" class="workbench-input" /></label><label>下次跟进日期（可留空）<el-date-picker v-model="form.followupDate" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label></template>
+      <template v-else-if="command === 'RESOLVE_REVIEW'"><p v-for="reason in detail.review?.reasons" :key="reason">{{ reason }}</p><label>本次核对结果<textarea v-model="form.note" required maxlength="1000" class="workbench-input" /></label></template>
+      <template v-else-if="command === 'SAVE_REQUIREMENT'"><label>目标日期（可暂不填）<el-date-picker v-model="form.date" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><div class="time-fields"><label>开始时段（可留空）<el-time-picker v-model="form.startTime" :disabled="!allowed || refreshing || saving || !!pending" format="HH:mm" value-format="HH:mm" clearable /></label><label>结束日期（可留空）<el-date-picker v-model="form.endDate" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>结束时段（可留空）<el-time-picker v-model="form.endTime" :disabled="!allowed || refreshing || saving || !!pending" format="HH:mm" value-format="HH:mm" clearable /></label></div><p>{{ item.timezone || '地点时区待核实' }}</p><label v-if="item.type === 'DELIVERY'"><input v-model="form.bookingRequired" type="checkbox">需要收货方预约</label><label>收货要求<textarea v-model="form.receivingRequirements" :required="!form.bookingRequired" maxlength="1000" class="workbench-input" /></label><label>处理说明<textarea v-model="form.reason" required maxlength="1000" class="workbench-input" /></label></template>
+      <template v-else-if="command === 'HANDOFF_RETURN'"><p>转交保留原预约和责任记录；接手方确认前持续跟进。</p><label>接手方类型<select v-model="form.recipientKind" @change="changeRecipient" class="workbench-input"><option value="EXTERNAL">外部车队 / 联系人</option><option value="SUPPLIER">已登记海外车队</option><option value="USER">当前关联负责人</option></select></label><label v-if="form.recipientKind === 'EXTERNAL'">接手方名称<input v-model="form.recipientName" required maxlength="200" class="workbench-input"></label><template v-else-if="form.recipientKind === 'SUPPLIER'"><label>查找海外车队<input v-model="supplierKeyword" maxlength="80" @keydown.enter.prevent="searchSuppliers" class="workbench-input"></label><el-button :loading="supplierLoading" @click="searchSuppliers">查询车队</el-button><LoadErrorState v-if="supplierError" title="还空车队不可用" :message="supplierError.message" @retry="searchSuppliers" /><label>接手车队<select v-model="form.recipientId" required :disabled="supplierLoading || !!supplierError" class="workbench-input"><option value="" disabled>请选择已登记海外车队</option><option v-for="supplier in suppliers" :key="supplier.id" :value="supplier.id">{{ supplier.name }}</option></select></label><p v-if="supplierTotal > suppliers.length">请输入更完整名称缩小查询范围。</p></template><label v-else>接手负责人<select v-model="form.recipientId" required class="workbench-input"><option value="" disabled>请选择</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>转交原因<textarea v-model="form.reason" required maxlength="1000" class="workbench-input" /></label></template>
+      <template v-else-if="command === 'ACCEPT_RETURN'"><p>原责任方：{{ detail.returnHandoff?.from.name || '—' }} → 接手方：{{ detail.returnHandoff?.to.name || '—' }}</p><label>接手反馈依据<textarea v-model="form.note" :required="detail.returnHandoff?.to.kind !== 'USER'" maxlength="1000" class="workbench-input" /></label><p>确认接手只记录责任，实际还空仍按原业务操作。</p></template>
    </fieldset>
    <LoadErrorState v-if="error" title="工作操作未保存" :message="error.message" :show-retry="false"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
-    <el-button type="primary" native-type="submit" :disabled="!allowed || refreshing || !!missingContext" :loading="saving">{{ pending ? '重试本次保存' : command === 'CONFIRM_ROUTE' ? '确认路线，继续本柜工作' : '保存并更新待办' }}</el-button>
+    <div class="density-actions density-actions--footer appointment-form-actions"><el-button type="primary" native-type="submit" :disabled="!allowed || refreshing || !!missingContext" :loading="saving">{{ pending ? '重试本次保存' : command === 'CONFIRM_ROUTE' ? '确认路线，继续本柜工作' : '保存并更新待办' }}</el-button></div>
  </form>
 </template>
 <style scoped>.time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-3); }</style>
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -223,7 +225,7 @@ onMounted(load)
 onBeforeUnmount(() => { generation++; nativeGeneration++; candidatePage.reset() })
 </script>
 <template>
-  <section class="work-form" aria-label="按预约批次创建整车排车">
+  <section class="work-form appointment-native-form" aria-label="按预约批次创建整车排车">
    <h3>{{ existing.length ? '沿用本批已有排车单' : '按批次选择同仓真实货物' }} <InlineHelp title="排车说明"><p>同一张排车单可装同仓多个客户与目的仓，客户和预约归属逐来源保留。</p></InlineHelp></h3>
    <p v-if="!readable">读取批次实物需要预约、尾程订单、入仓单和排车列表权限。</p>
    <LoadErrorState v-if="error" title="批次可排实物读取失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
@@ -236,7 +238,7 @@ onBeforeUnmount(() => { generation++; nativeGeneration++; candidatePage.reset()
    <template v-else-if="!pending && !corrupted && readable && !loading && !error && (!existing.length || arrangingRemaining && existingReady)">
      <p v-for="reason in [...new Set(contexts.flatMap(context => context.blockReasons))]" :key="reason" role="alert">{{ reason }}</p>
      <el-button v-if="batchKeys.length === 1" :disabled="!writable || unresolved" @click="emit('batch', batchKeys[0]!)">按当前批次箱数分批</el-button><p>部分箱数先按本批逐来源数量分批；不对应完整实物时，先在原库存作业拆托。</p>
-      <label>本组计划托位<select v-model.number="capacity" :disabled="!writable || unresolved"><option v-for="spec in dispatchVehicleSpecs" :key="spec.value" :value="spec.capacity">{{ spec.label }}</option></select></label>
+      <label>本组计划托位<select v-model.number="capacity" :disabled="!writable || unresolved" class="workbench-input"><option v-for="spec in dispatchVehicleSpecs" :key="spec.value" :value="spec.capacity">{{ spec.label }}</option></select></label>
      <table class="density-table"><thead><tr><th>选择</th><th>客户</th><th>托盘码</th><th>入库单号</th><th>来源</th><th>箱数</th><th>不可选择原因</th></tr></thead><tbody><tr v-for="(row, index) in rows" :key="`${row.key}:${index}`"><td><input type="checkbox" :checked="selected.includes(row.key)" :disabled="!writable || unresolved || reasons(row).length > 0" @change="select(row, $event)"></td><td>{{ row.native?.customerName || '客户待核实' }}</td><td>{{ row.palletNo || '—' }}</td><td>{{ row.planNo || '—' }}</td><td>{{ row.sourceStage === 'RECEIVED' ? '已收货实物' : '计划托盘' }}</td><td>{{ row.packageCount ?? '待核实' }}</td><td>{{ reasons(row).join('；') || '可选' }}</td></tr></tbody></table><p v-if="!rows.length">当前批次尚无可排实物。</p>
      <el-pagination aria-label="批次关联候选分页" :current-page="candidatePageNumber" :page-size="candidatePageSize" :page-sizes="[10, 20, 50]" :total="candidateTotal" :disabled="unresolved || loading" layout="total, sizes, prev, pager, next" @update:current-page="changeCandidatePage" @update:page-size="changeCandidateSize" />
      <p>上方总数为关联计划的候选数；当前页展示其中属于本批次的实物。已选 {{ chosen.length }} 条（含其他页）。</p>
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
 import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
@@ -265,7 +266,7 @@ onMounted(async () => { await load(); if (props.initialCustomerId && customers.v
        <ReceivingScope :members="[]" :transport="context.transport" />
        <el-button :disabled="locked || !edit || !context.allowedActions.includes('BOOK_RECEIVING')" @click="newBooking">登记当前未覆盖货物的正式预约</el-button>
      </template>
-      <form v-else class="density-form" @submit.prevent="save()">
+      <form v-else class="density-form appointment-native-form" @submit.prevent="save()">
        <fieldset :disabled="locked || !formWritable">
          <template v-if="mode === 'refresh'">
            <h4>{{ customerName(customer) || '—' }} · 核对本客户最新货物资料</h4><p>采用后仅更新本客户的资料快照，本批箱数和其他客户的确认保持不变；保存核实资料不会自动执行采用。</p>
@@ -283,19 +284,19 @@ onMounted(async () => { await load(); if (props.initialCustomerId && customers.v
            <label>目标送仓日期<el-date-picker v-model="planForm.plannedDate" type="date" aria-label="客户计划日期" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label>
            <label>计划开始时段<el-date-picker v-model="planForm.plannedAt" @change="planForm.startOffset = ''" type="datetime" aria-label="客户计划开始" :disabled="locked || !formWritable" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DDTHH:mm:ss" clearable /></label>
            <label>计划结束时段<el-date-picker v-model="planForm.plannedEndAt" @change="planForm.endOffset = ''" type="datetime" aria-label="客户计划结束" :disabled="locked || !formWritable" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DDTHH:mm:ss" clearable /></label>
-            <details><summary>计划时段的夏令时信息</summary><p>当地时钟回拨导致时刻重复时，请按仓库确认填写对应时差。跳时期间不存在的当地时刻不可用，请选择有效时间。</p><label>计划开始时差<input v-model="planForm.startOffset" aria-label="客户计划开始时差" placeholder="如 -07:00"></label><label>计划结束时差<input v-model="planForm.endOffset" aria-label="客户计划结束时差" placeholder="如 -08:00"></label></details>
-            <label>本次联系结果<select v-model="planForm.appointmentStatus" aria-label="客户计划状态"><option value="PENDING">等待对方确认</option><option value="FAILED">未约成</option></select></label>
-            <label>{{ planForm.appointmentStatus === 'FAILED' ? '未约成原因' : '联系备注' }}<textarea v-model="planForm.appointmentRemark" maxlength="1000" aria-label="客户计划备注" /></label>
+            <details><summary>计划时段的夏令时信息</summary><p>当地时钟回拨导致时刻重复时，请按仓库确认填写对应时差。跳时期间不存在的当地时刻不可用，请选择有效时间。</p><label>计划开始时差<input v-model="planForm.startOffset" aria-label="客户计划开始时差" placeholder="如 -07:00" class="workbench-input"></label><label>计划结束时差<input v-model="planForm.endOffset" aria-label="客户计划结束时差" placeholder="如 -08:00" class="workbench-input"></label></details>
+            <label>本次联系结果<select v-model="planForm.appointmentStatus" aria-label="客户计划状态" class="workbench-input"><option value="PENDING">等待对方确认</option><option value="FAILED">未约成</option></select></label>
+            <label>{{ planForm.appointmentStatus === 'FAILED' ? '未约成原因' : '联系备注' }}<textarea v-model="planForm.appointmentRemark" maxlength="1000" aria-label="客户计划备注" class="workbench-input" /></label>

          </template>
-          <template v-if="mode === 'customer'"><h4>仅本客户调整，其他客户保持原安排</h4><div v-for="item in customerItems" :key="item.id"><p>{{ item.inboundCode || '原票业务号未提供' }} · 当前 {{ item.packageCount ?? '待核实' }} 箱</p><label v-if="item.destinationKey">本次先送箱数<input v-model="adjustment.retained[sourceKey({ sourceKey: item.sourceKey, destinationKey: item.destinationKey })]" type="number" min="0" :max="item.packageCount ?? undefined" step="1" aria-label="本次先送箱数"></label></div><label>后送目标日期<el-date-picker v-model="adjustment.laterDate" type="date" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>负责人<select v-model="adjustment.ownerId" required aria-label="调整负责人"><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>下一次跟进日期<el-date-picker v-model="adjustment.followup" type="date" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>调整原因<textarea v-model="adjustment.reason" maxlength="1000" aria-label="调整原因" /></label><p>保存仅登记待确认变化，原箱数与原确认仍保留，相关发车暂受阻。</p></template>
-          <template v-if="mode === 'resolve' && change"><h4>仓库回复：本次客户调整</h4><ReceivingScope :members="change.originalMembers" :transport="context.transport" /><p v-for="(quantity, index) in change.intent.quantities" :key="sourceKey(quantity)">货物 {{ index + 1 }} · 本次先送 {{ quantity.retainedPackages }} 箱</p><p>负责人 {{ change.followup.ownerName || '—' }} · 跟进 {{ change.followup.nextFollowupDate || '待安排' }}</p><p>后送日期 {{ change.intent.laterDate || '未定' }} · {{ change.intent.reason }}</p><p v-for="agreement in change.originalAgreements" :key="agreement.agreementKey">原约号 {{ agreement.details.confirmationNo || '—' }} · {{ agreement.details.appointmentAt || '时段未定' }} · {{ agreement.timezone || '时区待核实' }}</p><label>仓库同意保留量和移出量的回复依据<textarea v-model="evidence" maxlength="1000" aria-label="仓库回复依据" /></label></template>
+          <template v-if="mode === 'customer'"><h4>仅本客户调整，其他客户保持原安排</h4><div v-for="item in customerItems" :key="item.id"><p>{{ item.inboundCode || '原票业务号未提供' }} · 当前 {{ item.packageCount ?? '待核实' }} 箱</p><label v-if="item.destinationKey">本次先送箱数<input v-model="adjustment.retained[sourceKey({ sourceKey: item.sourceKey, destinationKey: item.destinationKey })]" type="number" min="0" :max="item.packageCount ?? undefined" step="1" aria-label="本次先送箱数" class="workbench-input"></label></div><label>后送目标日期<el-date-picker v-model="adjustment.laterDate" type="date" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>负责人<select v-model="adjustment.ownerId" required aria-label="调整负责人" class="workbench-input"><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>下一次跟进日期<el-date-picker v-model="adjustment.followup" type="date" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>调整原因<textarea v-model="adjustment.reason" maxlength="1000" aria-label="调整原因" class="workbench-input" /></label><p>保存仅登记待确认变化，原箱数与原确认仍保留，相关发车暂受阻。</p></template>
+          <template v-if="mode === 'resolve' && change"><h4>仓库回复：本次客户调整</h4><ReceivingScope :members="change.originalMembers" :transport="context.transport" /><p v-for="(quantity, index) in change.intent.quantities" :key="sourceKey(quantity)">货物 {{ index + 1 }} · 本次先送 {{ quantity.retainedPackages }} 箱</p><p>负责人 {{ change.followup.ownerName || '—' }} · 跟进 {{ change.followup.nextFollowupDate || '待安排' }}</p><p>后送日期 {{ change.intent.laterDate || '未定' }} · {{ change.intent.reason }}</p><p v-for="agreement in change.originalAgreements" :key="agreement.agreementKey">原约号 {{ agreement.details.confirmationNo || '—' }} · {{ agreement.details.appointmentAt || '时段未定' }} · {{ agreement.timezone || '时区待核实' }}</p><label>仓库同意保留量和移出量的回复依据<textarea v-model="evidence" maxlength="1000" aria-label="仓库回复依据" class="workbench-input" /></label></template>
          <template v-if="group"><h4>{{ mode === 'book' ? '整组重约当前范围' : '整份预约当前范围' }}</h4><ReceivingScope :members="mode === 'book' ? selectedBookMembers : group.agreement.members" :transport="group.transport" /><div v-for="(excluded, index) in group.excludedMembers" :key="`${excluded.member.batchKey}:${excluded.member.customerId}`" role="status">排除范围 {{ index + 1 }} · {{ excluded.member.appointmentNo }}：{{ excluded.reason }}</div></template>
-          <template v-if="mode === 'book'"><p>未取得确认时，可先按客户保存目标或未约成原因。</p><el-button v-for="member in bookMembers.filter(row => row.batchKey === batchKey && planEligible(row.customerId))" :key="member.customerId" :disabled="locked || !edit" @click="openPlan(member.customerId)">{{ member.customerName || member.sources.map(source => source.inboundCode || '—').join('、') }} · 保存目标 / 未约成</el-button><p v-if="!group && cargoIncomplete" role="status">货物数量或来源资料待核实，当前不能登记正式预约。</p><p v-if="bookingScopeChanged" role="status">当前成员范围已变化，请核对上方范围后重新填写预约，原输入不会自动套用给其他客户。<el-button :disabled="locked" @click="resetBookingScope">按当前范围重新填写</el-button></p><template v-if="!group"><p v-for="(excluded, index) in context.executionScope.members.filter(row => row.completed || !row.canRebook)" :key="`${excluded.member.batchKey}:${excluded.member.customerId}`" role="status">排除客户范围 {{ index + 1 }}：{{ excluded.reason || (excluded.completed ? '已完成' : '当前不可重新预约') }}</p></template><ReceivingScope v-if="!group" :members="selectedBookMembers" :transport="context.transport" /><LoadErrorState v-if="scopeError" title="所选客户执行资格读取失败" :message="scopeError.message" :loading="scopeLoading" @retry="refreshSelectedScope" /><p v-if="scopeLoading">正在核对所选客户执行资格…</p><p v-if="!scopeLoading && !scopeError && selectedBookMembers.length && !selectedExecutionAllowed" role="status">所选客户执行资格不完整或不可办理，请核对后重新选择。</p><p v-for="(eligibility, index) in selectedExecution?.members.filter(row => row.completed || !row.canRebook) || []" :key="index" role="status">所选范围 {{ index + 1 }}：{{ eligibility.reason || '当前不可重新预约' }}</p><div aria-label="本次预约客户"><h4>选择本次取得确认的客户</h4><label v-for="(member, index) in bookMembers" :key="memberKey(member)"><input v-model="selectedMemberKeys" @change="refreshSelectedScope" :value="memberKey(member)" type="checkbox" :aria-label="`选择预约客户 ${index + 1}`">{{ member.appointmentNo }} · {{ member.customerName || member.sources.map(source => source.inboundCode || '—').join('、') }}</label><p v-if="!selectedBookMembers.length">请至少选择一个客户。</p></div><label><input v-model="separate" type="checkbox">所选客户分别登记预约</label><p>共同预约须由仓库明确确认覆盖当前全部所选客户和货量；重复填写同一约号不能代替共同预约。</p><template v-for="(row, index) in (bookingScopeChanged ? [] : bookingRows)" :key="index"><h4>{{ separate ? `${row.member?.appointmentNo} · ${row.member?.customerName || '—'} · 客户范围 ${index + 1}` : '一份共同预约' }}</h4><FbaAppointmentFields :model="bookingForms[row.index]!" :timezone="group?.agreement.timezone || context.batch.timezone" :disabled="locked || !edit" /><label>仓库确认覆盖依据<textarea v-model="bookingEvidence[row.index]" maxlength="1000" aria-label="预约覆盖依据" /></label></template></template>
-          <template v-if="mode === 'reschedule' || mode === 'cancel'"><FbaAppointmentFields v-if="mode === 'reschedule'" :model="groupForm" :timezone="group?.agreement.timezone" :disabled="locked || !edit" /><p v-else>整份取消会清除活动确认及失效目标，保留历史、批次数量和车辆关系；后续仍须重新约仓并核对车辆。</p><label>仓库回复依据<textarea v-model="evidence" maxlength="1000" aria-label="整份回复依据" /></label></template>
+          <template v-if="mode === 'book'"><p>未取得确认时，可先按客户保存目标或未约成原因。</p><el-button v-for="member in bookMembers.filter(row => row.batchKey === batchKey && planEligible(row.customerId))" :key="member.customerId" :disabled="locked || !edit" @click="openPlan(member.customerId)">{{ member.customerName || member.sources.map(source => source.inboundCode || '—').join('、') }} · 保存目标 / 未约成</el-button><p v-if="!group && cargoIncomplete" role="status">货物数量或来源资料待核实，当前不能登记正式预约。</p><p v-if="bookingScopeChanged" role="status">当前成员范围已变化，请核对上方范围后重新填写预约，原输入不会自动套用给其他客户。<el-button :disabled="locked" @click="resetBookingScope">按当前范围重新填写</el-button></p><template v-if="!group"><p v-for="(excluded, index) in context.executionScope.members.filter(row => row.completed || !row.canRebook)" :key="`${excluded.member.batchKey}:${excluded.member.customerId}`" role="status">排除客户范围 {{ index + 1 }}：{{ excluded.reason || (excluded.completed ? '已完成' : '当前不可重新预约') }}</p></template><ReceivingScope v-if="!group" :members="selectedBookMembers" :transport="context.transport" /><LoadErrorState v-if="scopeError" title="所选客户执行资格读取失败" :message="scopeError.message" :loading="scopeLoading" @retry="refreshSelectedScope" /><p v-if="scopeLoading">正在核对所选客户执行资格…</p><p v-if="!scopeLoading && !scopeError && selectedBookMembers.length && !selectedExecutionAllowed" role="status">所选客户执行资格不完整或不可办理，请核对后重新选择。</p><p v-for="(eligibility, index) in selectedExecution?.members.filter(row => row.completed || !row.canRebook) || []" :key="index" role="status">所选范围 {{ index + 1 }}：{{ eligibility.reason || '当前不可重新预约' }}</p><div aria-label="本次预约客户"><h4>选择本次取得确认的客户</h4><label v-for="(member, index) in bookMembers" :key="memberKey(member)"><input v-model="selectedMemberKeys" @change="refreshSelectedScope" :value="memberKey(member)" type="checkbox" :aria-label="`选择预约客户 ${index + 1}`">{{ member.appointmentNo }} · {{ member.customerName || member.sources.map(source => source.inboundCode || '—').join('、') }}</label><p v-if="!selectedBookMembers.length">请至少选择一个客户。</p></div><label><input v-model="separate" type="checkbox">所选客户分别登记预约</label><p>共同预约须由仓库明确确认覆盖当前全部所选客户和货量；重复填写同一约号不能代替共同预约。</p><template v-for="(row, index) in (bookingScopeChanged ? [] : bookingRows)" :key="index"><h4>{{ separate ? `${row.member?.appointmentNo} · ${row.member?.customerName || '—'} · 客户范围 ${index + 1}` : '一份共同预约' }}</h4><FbaAppointmentFields :model="bookingForms[row.index]!" :timezone="group?.agreement.timezone || context.batch.timezone" :disabled="locked || !edit" /><label>仓库确认覆盖依据<textarea v-model="bookingEvidence[row.index]" maxlength="1000" aria-label="预约覆盖依据" class="workbench-input" /></label></template></template>
+          <template v-if="mode === 'reschedule' || mode === 'cancel'"><FbaAppointmentFields v-if="mode === 'reschedule'" :model="groupForm" :timezone="group?.agreement.timezone" :disabled="locked || !edit" /><p v-else>整份取消会清除活动确认及失效目标，保留历史、批次数量和车辆关系；后续仍须重新约仓并核对车辆。</p><label>仓库回复依据<textarea v-model="evidence" maxlength="1000" aria-label="整份回复依据" class="workbench-input" /></label></template>
          <label><input v-model="confirmedScope" type="checkbox" :disabled="mode === 'book' && (scopeLoading || !!scopeError || !selectedExecutionAllowed) || mode === 'refresh' && (cargoLoading || !!cargoError || !!cargoProblems.length)" aria-label="确认当前范围">已核对上述客户货物、当前预约与车辆范围</label>
        </fieldset>
-        <el-button type="primary" native-type="submit" :disabled="!canSubmit" :loading="saving">{{ pending ? '重试本次提交' : mode === 'refresh' ? '确认采用本客户最新资料' : mode === 'plan' ? '保存本客户计划' : mode === 'customer' ? '保存待仓库确认' : mode === 'resolve' ? '确认回复并应用本次调整' : mode === 'cancel' ? '确认整份取消' : mode === 'reschedule' ? '保存整份改期' : '保存本次正式预约' }}</el-button>
+        <div class="density-actions density-actions--footer appointment-form-actions"><el-button type="primary" native-type="submit" :disabled="!canSubmit" :loading="saving">{{ pending ? '重试本次提交' : mode === 'refresh' ? '确认采用本客户最新资料' : mode === 'plan' ? '保存本客户计划' : mode === 'customer' ? '保存待仓库确认' : mode === 'resolve' ? '确认回复并应用本次调整' : mode === 'cancel' ? '确认整份取消' : mode === 'reschedule' ? '保存整份改期' : '保存本次正式预约' }}</el-button></div>
        <el-button v-if="mode === 'resolve' && !pending" :disabled="!canSubmit" @click="save('WITHDRAW')">撤回变化并保留原安排</el-button>
      </form>
      <LoadErrorState v-if="saveError" title="本次提交尚未完成" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState>
@@ -0,0 +1,45 @@
+/* Native work-command fields share the existing input theme, with local form layout. */
+.appointment-native-form {
+  min-width: 0;
+}
+
+.appointment-native-form > fieldset {
+  display: grid;
+  min-width: 0;
+  gap: var(--admin-space-5);
+  margin: var(--admin-space-3) 0;
+  padding: 0;
+  border: 0;
+}
+
+.appointment-native-form label:has(> :is(input, select, textarea, .el-date-editor)) {
+  display: grid;
+  min-width: 0;
+  gap: var(--admin-space-2);
+  overflow-wrap: anywhere;
+}
+
+.appointment-native-form label > :is(.workbench-input, .el-date-editor) {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.appointment-native-form label > textarea {
+  resize: vertical;
+}
+
+.appointment-native-form label:has(> input[type='checkbox']) {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.appointment-native-form .appointment-form-actions {
+  position: sticky;
+  z-index: 1;
+  bottom: 0;
+  padding-block: var(--admin-space-3);
+  border-top: 1px solid var(--workbench-border);
+  background: var(--workbench-surface);
+}
@@ -1,14 +1,15 @@
 import ElementPlus, { ElCheckboxButton, ElInputNumber, ElMessage, ElMessageBox, ElOption, ElSelect } from 'element-plus'
 import { AxiosError } from 'axios'
 import { createPinia, setActivePinia } from 'pinia'
-import { flushPromises, mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { DOMWrapper, enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import QueryToolbar from '@/shared/components/QueryToolbar.vue'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import GlobalSmartLoadingView from './GlobalSmartLoadingView.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
+import SmartLoadingDialog from '../components/SmartLoadingDialog.vue'
 import type { ContainerBookingResource } from '../types'
 import {
  assignPendingReviewSmartLoadingOrder,
@@ -27,6 +28,8 @@ import {
  removeSmartLoadingPallet,
 } from '../api/platformContainerLoading'

+enableAutoUnmount(afterEach)
+
 const { routerPush } = vi.hoisted(() => ({ routerPush: vi.fn() }))

 vi.mock('vue-router', () => ({
@@ -120,7 +123,50 @@ function mockContainerSearch(records: ContainerBookingResource[]) {
  ))))
 }

+function assignmentDialog() {
+  const root = document.body.querySelector<HTMLElement>('.smart-loading-assignment-dialog')
+  if (!root) throw new Error('assignment dialog is missing')
+  return new DOMWrapper(root)
+}
+
 describe('GlobalSmartLoadingView', () => {
+  it('mounts assignment outside the parent workbench and keeps fullscreen and reopen states independent', async () => {
+    const wrapper = mount(SmartLoadingDialog, { attachTo: document.body, props: { modelValue: true }, global: { plugins: [ElementPlus] } })
+    try {
+      await flushPromises()
+      const workbench = wrapper.getComponent(GlobalSmartLoadingView)
+      const openAssignment = async () => {
+        await workbench.get('.candidate-pane .el-table__body-wrapper').findAll('button').find(button => button.text() === '加入')!.trigger('click')
+        await flushPromises()
+      }
+      await openAssignment()
+      const popup = workbench.getComponent(AppDialog)
+      const outer = document.querySelector('.smart-loading-dialog')!
+      const child = assignmentDialog()
+      expect(document.body.contains(child.element)).toBe(true)
+      expect(outer.contains(child.element)).toBe(false)
+      expect(child.element.closest('.global-loading-page')).toBeNull()
+      expect(child.classes()).toEqual(expect.arrayContaining(['admin-density-dialog', 'admin-workbench', 'is-dialog']))
+      popup.getComponent(ElInputNumber).vm.$emit('update:modelValue', 4)
+      await child.get('[aria-label="展开全屏"]').trigger('click')
+      expect(child.classes()).toContain('is-fullscreen')
+      expect(outer.classList.contains('is-fullscreen')).toBe(true)
+      await child.findAll('button').find(button => button.text() === '取消')!.trigger('click')
+      await flushPromises()
+      expect(popup.props('modelValue')).toBe(false)
+      expect(wrapper.getComponent(AppDialog).props('modelValue')).toBe(true)
+      expect(workbench.get('.container-option.selected').attributes('aria-pressed')).toBe('true')
+      await openAssignment()
+      expect(popup.props('modelValue')).toBe(true)
+      expect(assignmentDialog().classes()).not.toContain('is-fullscreen')
+      expect(popup.getComponent(ElInputNumber).props('modelValue')).toBe(candidate.availablePackageCount)
+      expect(outer.classList.contains('is-fullscreen')).toBe(true)
+      expect(assignSmartLoadingItem).not.toHaveBeenCalled()
+    } finally {
+      wrapper.unmount()
+    }
+  })
+
  it.each(['PACKAGE', 'SEALED_PALLET'] as const)('分配窗口全屏保留来源及输入，按%s原接口提交', async (unitType) => {
    if (unitType === 'SEALED_PALLET') {
      vi.mocked(listSmartLoadingCandidates).mockResolvedValue(candidatePage([{
@@ -138,7 +184,7 @@ describe('GlobalSmartLoadingView', () => {
    await wrapper.get('.candidate-pane .el-table__body-wrapper').findAll('button').find(button => button.text() === '加入')!.trigger('click')
    await flushPromises()
    const popup = wrapper.getComponent(AppDialog)
-    expect(popup.get('table[aria-label="全局装柜分配来源"]').text()).toContain('CB-1')
+    expect(assignmentDialog().get('table[aria-label="全局装柜分配来源"]').text()).toContain('CB-1')
    if (unitType === 'PACKAGE') {
      const input = popup.getComponent(ElInputNumber)
      expect(input.props('modelValue')).toBe(candidate.availablePackageCount)
@@ -146,11 +192,11 @@ describe('GlobalSmartLoadingView', () => {
      input.vm.$emit('update:modelValue', 4)
    } else {
      expect(popup.findComponent(ElInputNumber).exists()).toBe(false)
-      expect(popup.get('details').text()).toContain('I181：9 箱')
+      expect(assignmentDialog().get('details').text()).toContain('I181：9 箱')
      expect(popup.props('title')).toBe('整托加入当前柜次 · DP-TEST-1')
    }
-    await popup.get('[aria-label="展开全屏"]').trigger('click')
-    expect(popup.find('.el-dialog.is-fullscreen').exists()).toBe(true)
+    await assignmentDialog().get('[aria-label="展开全屏"]').trigger('click')
+    expect(assignmentDialog().classes()).toContain('is-fullscreen')
    if (unitType === 'PACKAGE') expect(popup.getComponent(ElInputNumber).props('modelValue')).toBe(4)
    popup.vm.$emit('confirm'); await flushPromises()
    if (unitType === 'PACKAGE') {
@@ -572,11 +618,11 @@ describe('GlobalSmartLoadingView', () => {
    expect(document.body.textContent).toContain('不能部分输入、单独分配或单独移除')
    const popup = wrapper.getComponent(AppDialog)
    expect(popup.props('title')).toBe('整组加入当前柜次 · CLG-2093539779795795969')
-    const contextRows = popup.findAll('table[aria-label="全局装柜分配来源"] tr')
+    const contextRows = assignmentDialog().findAll('table[aria-label="全局装柜分配来源"] tr')
    expect(contextRows[0]!.findAll('td').map(cell => cell.text())).toEqual(['CB-1', 'MSCU-1'])
    expect(contextRows[1]!.findAll('td').map(cell => cell.text())).toEqual(['义乌仓', '美森正班'])
-    await popup.get('[aria-label="展开全屏"]').trigger('click')
-    expect(popup.get('table[aria-label="全局装柜同柜组成员"]').text()).toContain('NYEXX2608290051-B')
+    await assignmentDialog().get('[aria-label="展开全屏"]').trigger('click')
+    expect(assignmentDialog().get('table[aria-label="全局装柜同柜组成员"]').text()).toContain('NYEXX2608290051-B')
    expect(document.body.textContent).not.toContain('本次分配箱数')
    ;([...document.body.querySelectorAll('button')].find((button) => button.textContent?.includes('确认整组分配')) as HTMLButtonElement).click()
    await flushPromises()
@@ -612,9 +658,9 @@ describe('GlobalSmartLoadingView', () => {
    await flushPromises()
    const popup = wrapper.getComponent(AppDialog)
    expect(popup.props('title')).toBe('加入当前柜次 · EXXHK2609020361')
-    const measurements = popup.findAll('table[aria-label="全局装柜分配填写"] tr').find(row => row.text().includes('平均单箱毛重'))!
+    const measurements = assignmentDialog().findAll('table[aria-label="全局装柜分配填写"] tr').find(row => row.text().includes('平均单箱毛重'))!
    expect(measurements.findAll('td').map(cell => cell.text())).toEqual(['待测量', '待测量'])
-    const channel = popup.findAll('table[aria-label="全局装柜分配来源"] tr').find(row => row.text().includes('订单渠道'))!
+    const channel = assignmentDialog().findAll('table[aria-label="全局装柜分配来源"] tr').find(row => row.text().includes('订单渠道'))!
    expect(channel.findAll('td')[0]!.text()).toBe('合德海卡')
    expect(document.body.textContent).toContain('这是人工装柜分配，确认后仍会加入')
    expect(document.body.textContent).toContain('智能推荐不会跨渠道')
@@ -907,10 +953,10 @@ describe('GlobalSmartLoadingView', () => {
    await flushPromises()

    // 箱数与上方资料使用同一标签列，保留输入名称与原范围。
-    const label = popup.get('label[for="global-loading-assignment-count"]')
+    const label = assignmentDialog().get('label[for="global-loading-assignment-count"]')
    expect(label.element.parentElement?.tagName).toBe('TH')
    expect(label.element.parentElement?.nextElementSibling?.getAttribute('colspan')).toBe('3')
-    expect(popup.find('input#global-loading-assignment-count').exists()).toBe(true)
+    expect(assignmentDialog().find('input#global-loading-assignment-count').exists()).toBe(true)
    expect(input.props('max')).toBe(candidate.availablePackageCount)
    popup.vm.$emit('confirm')
    await flushPromises()
@@ -918,11 +964,12 @@ describe('GlobalSmartLoadingView', () => {
    expect(assignSmartLoadingItem).toHaveBeenCalledWith(plan.id, { inboundId: candidate.inboundId, packageCount: 7, expectedVersion: plan.version })
    expect(popup.props('modelValue')).toBe(true)
    expect(input.props('modelValue')).toBe(7)
-    expect(popup.text()).toContain('加入当前柜次失败')
-    expect(popup.text()).toContain('当前账号无权访问该数据')
-    expect(popup.text()).toContain('assign-request')
-    expect(popup.text()).toContain('assign-trace')
-    expect(wrapper.get('.global-loading-page').findAll('.load-error-state')).toHaveLength(1)
+    expect(assignmentDialog().text()).toContain('加入当前柜次失败')
+    expect(assignmentDialog().text()).toContain('当前账号无权访问该数据')
+    expect(assignmentDialog().text()).toContain('assign-request')
+    expect(assignmentDialog().text()).toContain('assign-trace')
+    expect(assignmentDialog().findAll('.load-error-state')).toHaveLength(1)
+    expect(wrapper.get('.global-loading-page').findAll('.load-error-state')).toHaveLength(0)
    wrapper.unmount()
  })

@@ -839,7 +839,7 @@ onMounted(() => { void load(); void loadCustomers() })
          </section>
        </section>

-        <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="assignOpen" :title="assignmentTitle" width="min(920px, calc(100vw - 28px))" fullscreenable :confirm-loading="mutating" :confirm-disabled="Boolean(selectedCandidate?.blockReason || selectedCandidate?.locked)" :confirm-text="selectedCandidate?.unitType === 'SEALED_PALLET' ? '确认整托分配' : selectedCandidate?.coLoadGroupId ? '确认整组分配' : '确认加入'" @confirm="assign">
+        <AppDialog class="smart-loading-assignment-dialog admin-density-dialog admin-workbench is-dialog" v-model="assignOpen" :title="assignmentTitle" width="min(920px, calc(100vw - 28px))" append-to-body fullscreenable :confirm-loading="mutating" :confirm-disabled="Boolean(selectedCandidate?.blockReason || selectedCandidate?.locked)" :confirm-text="selectedCandidate?.unitType === 'SEALED_PALLET' ? '确认整托分配' : selectedCandidate?.coLoadGroupId ? '确认整组分配' : '确认加入'" @confirm="assign">
          <LoadErrorState v-if="mutationError" title="加入当前柜次失败" :message="mutationError.message" compact :show-retry="false">
            <template #details><ApiErrorMeta :details="mutationError" /></template>
          </LoadErrorState>
@@ -3,13 +3,15 @@ import { AxiosError } from 'axios'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import { createPinia, setActivePinia } from 'pinia'
 import { createMemoryHistory, createRouter } from 'vue-router'
-import { flushPromises, mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import SmartLoadingWorkbenchView from './SmartLoadingWorkbenchView.vue'
 import { assignSmartLoadingGroup, assignSmartLoadingItem, assignSmartLoadingPallet, getContainer, getSmartLoadingPlanByBooking, listSmartLoadingCandidates, recommendSmartLoading, removeSmartLoadingGroup } from '../api/platformContainerLoading'

+enableAutoUnmount(afterEach)
+
 vi.mock('../api/platformContainerLoading', () => ({
  getContainer: vi.fn(), getSmartLoadingPlanByBooking: vi.fn(), listSmartLoadingCandidates: vi.fn(),
  createSmartLoadingPlan: vi.fn(), assignSmartLoadingItem: vi.fn(), assignSmartLoadingPallet: vi.fn(), assignSmartLoadingGroup: vi.fn(), recommendSmartLoading: vi.fn(),
@@ -233,6 +235,11 @@ describe('SmartLoadingWorkbenchView', () => {
    const dialog = wrapper.getComponent(AppDialog)
    expect(dialog.props('title')).toBe('按入仓码分配箱数 · IN-1')
    const count = dialog.getComponent({ name: 'ElInputNumber' })
+    const label = dialog.get('label[for="cabinet-loading-assignment-count"]')
+    expect(label.element.parentElement?.tagName).toBe('TH')
+    expect(label.element.parentElement?.nextElementSibling?.getAttribute('colspan')).toBe('3')
+    expect(dialog.get('input#cabinet-loading-assignment-count').attributes('aria-label')).toBe('本次计划装柜箱数')
+    expect(count.attributes('aria-required')).toBe('true')
    expect(count.props('max')).toBe(12)
    count.vm.$emit('update:modelValue', 5)
    ;([...document.body.querySelectorAll('button')].find((button) => button.textContent?.trim() === '确认分配') as HTMLButtonElement).click()
@@ -427,7 +427,8 @@ onMounted(load)
              <tr v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'"><th>整托箱数</th><td colspan="3">整托 {{ selectedCandidate.availablePackageCount }} 箱</td></tr>
              <template v-else>
                <tr><th>货物摘要</th><td colspan="3"><LineClampText :content="selectedCandidate.goodsSummary || '货物摘要暂缺'" /></td></tr>
-                <tr><th>可用箱数</th><td>{{ selectedCandidate.availablePackageCount }} 箱</td><td colspan="2"><el-form-item label="本次计划装柜箱数" label-position="left" label-width="140px" required><el-input-number v-model="assignForm.packageCount" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></td></tr>
+                <tr><th>可用箱数</th><td colspan="3">{{ selectedCandidate.availablePackageCount }} 箱</td></tr>
+                <tr><th><label for="cabinet-loading-assignment-count"><span class="assignment-required" aria-hidden="true">*</span>本次计划装柜箱数</label></th><td colspan="3"><el-form-item><el-input-number id="cabinet-loading-assignment-count" v-model="assignForm.packageCount" aria-label="本次计划装柜箱数" aria-required="true" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></td></tr>
              </template>
            </tbody></table></div>
          </el-form>
@@ -451,6 +452,9 @@ onMounted(load)
 </template>

 <style scoped>
+.assignment-table { table-layout: fixed; }
+.assignment-table th { width: 128px; }
+.assignment-required { margin-right: var(--admin-space-1); color: var(--el-color-danger); }
 .workbench { display: grid; gap: var(--admin-space-5); min-width: 0; }
 .workbench-command-bar,.header-actions,.row-actions,.meter-title { display: flex; align-items: center; }
 .workbench-command-bar { justify-content: space-between; gap: var(--admin-space-5);  }
@@ -60,7 +60,7 @@

 /* Customer dialog business geometry; common appearance stays in adminDensity.css. */
 .customer-editor-dialog .customer-editor-table { table-layout: fixed; }
-.customer-editor-dialog .customer-editor-table td { width: 50%; }
+.customer-editor-dialog .customer-editor-table td:not([colspan]) { width: calc(100% / 3); }
 .customer-review-table th { width: 120px; }
 .customer-review-documents th:first-child { width: 150px; }
 .customer-review-documents th:last-child { width: 150px; }
@@ -1,4 +1,5 @@
-import ElementPlus, { ElMessageBox } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
+import { createRequire } from 'node:module'
 import { createPinia, setActivePinia } from 'pinia'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
@@ -31,6 +32,8 @@ import AppDialog from '@/shared/components/AppDialog.vue'
 import { showExportTaskCreatedDialog } from '@/shared/components/exportTaskCreatedDialog'
 import CustomersView from './CustomersView.vue'

+const { default: ElementPlus } = createRequire(import.meta.url)('element-plus') as typeof import('element-plus')
+
 const customersSource = readFileSync(resolve(process.cwd(), 'src/modules/customers/pages/CustomersView.vue'), 'utf8')

 const { routerPush, routerReplace, routeControl } = vi.hoisted(() => ({
@@ -194,6 +197,28 @@ describe('CustomersView', () => {
    expect(customersSource).not.toContain('<AppDrawer v-model="editorOpen"')
  })

+  it('keeps compact customer fields in three columns and leaves wide fields and validation readable', async () => {
+    mount(CustomersView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
+    await flushPromises()
+    tableButtonByText('编辑')!.click()
+    await flushPromises()
+    const tables = Array.from(document.querySelectorAll<HTMLTableElement>('.customer-editor-dialog .customer-editor-table'))
+    expect(tables).toHaveLength(2)
+    expect(Array.from(tables[0]!.rows, row => row.cells.length)).toEqual([3, 3, 1, 1])
+    expect(Array.from(tables[1]!.rows, row => row.cells.length)).toEqual([3, 3, 1])
+    expect(tables.flatMap(table => Array.from(table.querySelectorAll('td[colspan]'), cell => cell.getAttribute('colspan')))).toEqual(['3', '3', '3'])
+    expect(document.querySelector<HTMLElement>('.customer-editor-dialog .qualification-credit-code .el-form-item__label')?.style.width).toBe('144px')
+    const company = document.querySelector<HTMLInputElement>('.customer-editor-dialog input[placeholder="请输入工商登记公司名称"]')!
+    expect(company.closest('.el-form-item')?.querySelector<HTMLElement>('.el-form-item__label')?.style.width).toBe('120px')
+    company.value = ''
+    company.dispatchEvent(new Event('input', { bubbles: true }))
+    await flushPromises()
+    company.dispatchEvent(new FocusEvent('blur'))
+    await vi.waitFor(() => expect(company.closest('.el-form-item')?.querySelector('.el-form-item__error')?.textContent).toContain('请输入公司名称'))
+    expect(document.querySelector('.customer-editor-dialog .el-dialog__footer')?.textContent).toContain('保存资料和资质')
+    expect(updatePlatformTenant).not.toHaveBeenCalled()
+  })
+
  it('keeps qualification file controls usable when the editor dialog is narrow', () => {
    expect(customersSource).toContain('class="qualification-validity" role="cell"')
    expect(customersSource).toContain('grid-template-columns:170px minmax(0,1fr) 220px')
@@ -1085,28 +1085,26 @@ onMounted(() => { void loadCustomers() })
    </ListPageLayout>

    <AppDialog v-model="editorOpen" :title="editorTitle" :width="editorDialogWidth" class="admin-density-dialog customer-density-dialog customer-editor-dialog admin-workbench is-dialog" :loading="editorLoading" :confirm-loading="saving" fullscreenable destroy-on-close>
-      <el-form ref="formRef" v-loading="editorLoading" :model="form" :rules="rules" label-position="left" label-width="144px" class="density-form density-dialog-sections" :disabled="editorLoading || saving || submitting || uploadingQualifications">
+      <el-form ref="formRef" v-loading="editorLoading" :model="form" :rules="rules" label-position="left" label-width="120px" class="density-form density-dialog-sections" :disabled="editorLoading || saving || submitting || uploadingQualifications">
        <section class="density-dialog-section workbench-evidence" data-tone="work"><h3 class="density-dialog-section__title">基础资料</h3>
          <table class="density-table density-table--editable customer-editor-table" aria-label="基础资料"><tbody>
-            <tr><td><el-form-item label="公司名称" prop="tenantName" required><el-input v-model="form.tenantName" placeholder="请输入工商登记公司名称" maxlength="128" /></el-form-item></td><td><el-form-item label="客户昵称" prop="customerNickname"><el-input v-model="form.customerNickname" placeholder="不填默认生成中文拼音大写首字母，如 SZWL" maxlength="32" /></el-form-item></td></tr>
-            <tr><td><el-form-item label="营业执照企业名称" prop="legalName" required><el-input v-model="form.legalName" placeholder="请输入营业执照上的企业名称" maxlength="128" /></el-form-item></td><td><el-form-item label="法定代表人" prop="legalRepresentative"><el-input v-model="form.legalRepresentative" placeholder="请输入法定代表人姓名（选填）" maxlength="64" /></el-form-item></td></tr>
-            <tr><td><el-form-item label="企业类型" prop="enterpriseType"><el-input v-model="form.enterpriseType" placeholder="如：有限责任公司" maxlength="64" /></el-form-item></td><td><el-form-item label="成立日期" prop="establishedDate"><el-date-picker style="width: 100%;" v-model="form.establishedDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择成立日期" :disabled-date="(date: Date) => date.getTime() > Date.now()" /></el-form-item></td></tr>
-            <tr><td colspan="2"><el-form-item label="注册资本" prop="registeredCapital"><div class="capital-input"><el-input-number v-model="form.registeredCapital" :min="0" :precision="2" controls-position="right" placeholder="请输入注册资本（选填）" /><el-select v-model="form.registeredCapitalCurrency" aria-label="注册资本币种"><el-option label="人民币 CNY" value="CNY" /><el-option label="美元 USD" value="USD" /><el-option label="港币 HKD" value="HKD" /></el-select></div></el-form-item></td></tr>
-            <tr><td colspan="2"><el-form-item label="注册地址" prop="registeredAddress"><el-input v-model="form.registeredAddress" placeholder="请输入省市区、街道及门牌信息" maxlength="500" /></el-form-item></td></tr>
+            <tr><td><el-form-item label="公司名称" prop="tenantName" required><el-input v-model="form.tenantName" placeholder="请输入工商登记公司名称" maxlength="128" /></el-form-item></td><td><el-form-item label="客户昵称" prop="customerNickname"><el-input v-model="form.customerNickname" placeholder="不填默认生成中文拼音大写首字母，如 SZWL" maxlength="32" /></el-form-item></td><td><el-form-item label="营业执照企业名称" prop="legalName" required><el-input v-model="form.legalName" placeholder="请输入营业执照上的企业名称" maxlength="128" /></el-form-item></td></tr>
+            <tr><td><el-form-item label="法定代表人" prop="legalRepresentative"><el-input v-model="form.legalRepresentative" placeholder="请输入法定代表人姓名（选填）" maxlength="64" /></el-form-item></td><td><el-form-item label="企业类型" prop="enterpriseType"><el-input v-model="form.enterpriseType" placeholder="如：有限责任公司" maxlength="64" /></el-form-item></td><td><el-form-item label="成立日期" prop="establishedDate"><el-date-picker style="width: 100%;" v-model="form.establishedDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择成立日期" :disabled-date="(date: Date) => date.getTime() > Date.now()" /></el-form-item></td></tr>
+            <tr><td colspan="3"><el-form-item label="注册资本" prop="registeredCapital"><div class="capital-input"><el-input-number v-model="form.registeredCapital" :min="0" :precision="2" controls-position="right" placeholder="请输入注册资本（选填）" /><el-select v-model="form.registeredCapitalCurrency" aria-label="注册资本币种"><el-option label="人民币 CNY" value="CNY" /><el-option label="美元 USD" value="USD" /><el-option label="港币 HKD" value="HKD" /></el-select></div></el-form-item></td></tr>
+            <tr><td colspan="3"><el-form-item label="注册地址" prop="registeredAddress"><el-input v-model="form.registeredAddress" placeholder="请输入省市区、街道及门牌信息" maxlength="500" /></el-form-item></td></tr>
          </tbody></table>
        </section>

        <section class="density-dialog-section workbench-evidence" data-tone="work"><h3 class="density-dialog-section__title">联系与商务<InlineHelp title="企业联系信息说明"><p>仅用于企业业务联系，不会修改企业管理员登录手机号；登录手机号请在成员/账号管理中单独维护，修改会影响登录。</p></InlineHelp></h3>
          <table class="density-table density-table--editable customer-editor-table" aria-label="联系与商务"><tbody>
-            <tr><td><el-form-item label="联系人" prop="contactName" required><el-input v-model="form.contactName" placeholder="请输入主要联系人姓名" maxlength="64" /></el-form-item></td><td><el-form-item label="公司联系电话" prop="contactPhone" required><el-input v-model="form.contactPhone" placeholder="请输入公司联系电话" maxlength="32" /></el-form-item></td></tr>
-            <tr><td><el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" placeholder="如：contact@example.com" maxlength="128" /></el-form-item></td><td><el-form-item label="联系微信" prop="contactWechat"><el-input v-model="form.contactWechat" placeholder="请输入联系人微信号" maxlength="64" /></el-form-item></td></tr>
-            <tr><td><el-form-item label="销售人员" prop="salesOwnerName"><el-input v-model="form.salesOwnerName" placeholder="请输入负责销售人员" maxlength="64" /></el-form-item></td><td><el-form-item label="账期(天)" prop="paymentTermDays" required><el-input-number v-model="form.paymentTermDays" :min="0" :max="365" controls-position="right" placeholder="请输入账期天数" /></el-form-item></td></tr>
-            <tr><td colspan="2"><el-form-item label="内部备注" prop="internalRemark"><el-input v-model="form.internalRemark" type="textarea" :rows="3" placeholder="请输入仅平台人员可见的客户备注" maxlength="1000" show-word-limit /></el-form-item></td></tr>
+            <tr><td><el-form-item label="联系人" prop="contactName" required><el-input v-model="form.contactName" placeholder="请输入主要联系人姓名" maxlength="64" /></el-form-item></td><td><el-form-item label="公司联系电话" prop="contactPhone" required><el-input v-model="form.contactPhone" placeholder="请输入公司联系电话" maxlength="32" /></el-form-item></td><td><el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" placeholder="如：contact@example.com" maxlength="128" /></el-form-item></td></tr>
+            <tr><td><el-form-item label="联系微信" prop="contactWechat"><el-input v-model="form.contactWechat" placeholder="请输入联系人微信号" maxlength="64" /></el-form-item></td><td><el-form-item label="销售人员" prop="salesOwnerName"><el-input v-model="form.salesOwnerName" placeholder="请输入负责销售人员" maxlength="64" /></el-form-item></td><td><el-form-item label="账期(天)" prop="paymentTermDays" required><el-input-number v-model="form.paymentTermDays" :min="0" :max="365" controls-position="right" placeholder="请输入账期天数" /></el-form-item></td></tr>
+            <tr><td colspan="3"><el-form-item label="内部备注" prop="internalRemark"><el-input v-model="form.internalRemark" type="textarea" :rows="3" placeholder="请输入仅平台人员可见的客户备注" maxlength="1000" show-word-limit /></el-form-item></td></tr>
          </tbody></table>
        </section>

        <section class="density-dialog-section qualification-section workbench-evidence" data-tone="work"><h3 class="density-dialog-section__title">企业认证资料<InlineHelp title="资质提交规则"><p>营业执照和18位统一社会信用代码为必填业务项；法人身份证、货代资质证书和银行开户许可证均为选填。</p><p>支持 PDF、JPG、PNG，单个文件不超过 5MB；<span>*</span> 为提交审核必填项。</p></InlineHelp></h3><div v-if="editorStatus" class="qualification-heading"><el-tag :type="statusMeta(editorStatus).type" effect="light">{{ statusMeta(editorStatus).label }}</el-tag></div>
-          <table class="density-table density-table--editable" aria-label="企业信用代码"><tbody><tr><td><el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode" required class="qualification-credit-code"><span v-if="creditCodeEstablished">{{ form.unifiedSocialCreditCode }}</span><el-input v-else v-model="form.unifiedSocialCreditCode" placeholder="请输入18位大写字母或数字" maxlength="18" @input="form.unifiedSocialCreditCode = String($event).toUpperCase()" /><small>{{ creditCodeEstablished ? '已登记的统一社会信用代码不可直接修改。' : '必须与营业执照一致，并随营业执照共同保存；法人身份证为选填。' }}</small></el-form-item></td></tr></tbody></table>
+          <table class="density-table density-table--editable" aria-label="企业信用代码"><tbody><tr><td><el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode" label-width="144px" required class="qualification-credit-code"><span v-if="creditCodeEstablished">{{ form.unifiedSocialCreditCode }}</span><el-input v-else v-model="form.unifiedSocialCreditCode" placeholder="请输入18位大写字母或数字" maxlength="18" @input="form.unifiedSocialCreditCode = String($event).toUpperCase()" /><small>{{ creditCodeEstablished ? '已登记的统一社会信用代码不可直接修改。' : '必须与营业执照一致，并随营业执照共同保存；法人身份证为选填。' }}</small></el-form-item></td></tr></tbody></table>
          <div v-if="qualificationLoadError" class="qualification-load-error" role="alert">{{ qualificationLoadError }}<el-button v-if="editingId" link type="primary" @click="loadEditorQualifications(editingId)">重试</el-button></div>
          <div class="qualification-table" role="table" aria-label="客户资质文件">
            <div class="qualification-row qualification-header" role="row"><span role="columnheader">文件类型</span><span role="columnheader">上传文件</span><span role="columnheader">有效期</span></div>
@@ -427,8 +427,9 @@ onMounted(() => {
 .issue-counts { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 .issue-counts .is-blocking, .is-danger { color: var(--el-color-danger); font-weight: 700; }
 .visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
-.upload-file-control { display: flex; align-items: center; gap: var(--admin-space-5); }
-.upload-file-name { min-width: 0; overflow-wrap: anywhere; }
+.upload-file-control { display: flex; width: 100%; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--admin-space-5); }
+.upload-file-control > :deep(.el-button) { flex: 0 0 auto; }
+.upload-file-name { min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .table-actions :deep(.el-button) { min-height: 40px; }
  .upload-file-control { align-items: stretch; flex-direction: column; }
@@ -16,7 +16,7 @@ describe('InboundMeasurementDialog', () => {
    expect(source).toContain('class="inbound-measurement-workspace-dialog admin-density-dialog admin-density-workspace inbound-density admin-workbench is-dialog"')
    expect(source).toContain('width="min(1560px, calc(100vw - 48px))"')
    expect(source).toContain('height: 92vh')
-    expect(densitySource).toContain('.admin-density-dialog.el-dialog .el-dialog__header')
+    expect(densitySource).toContain('.admin-density-dialog.el-dialog > .el-dialog__header')
    expect(densitySource).toContain('padding: var(--admin-space-4, 10px) 48px var(--admin-space-4, 10px) var(--admin-space-6, 16px)')
    expect(source).toContain('<WeightOcrPanel')
    expect(source).toContain('<InboundMeasurementPanel')
@@ -143,19 +143,19 @@ function handleSubmitted() {
 </style>

 <style>
-.inbound-measurement-workspace-dialog.el-dialog { display: flex; max-width: calc(100vw - 32px); height: 92vh; max-height: 92vh; margin-bottom: 0; flex-direction: column; overflow: hidden; }
-.inbound-measurement-workspace-dialog .el-dialog__body { flex: 1 1 auto; }
+.inbound-measurement-workspace-dialog.el-dialog:not(.is-fullscreen) { display: flex; max-width: calc(100vw - 32px); height: 92vh; max-height: 92vh; margin-bottom: 0; flex-direction: column; overflow: hidden; }
+.inbound-measurement-workspace-dialog > .el-dialog__body { flex: 1 1 auto; }
 .inbound-measurement-workspace-dialog .measurement-panel { border: 0; border-radius: 0; box-shadow: none; }
 .inbound-measurement-workspace-dialog .measurement-panel__heading .measurement-panel__actions,
 .inbound-measurement-workspace-dialog .measurement-panel__footer { display: none; }
@media (max-width: 720px) {
-  .inbound-measurement-workspace-dialog.el-dialog { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px); }
-  .inbound-measurement-workspace-dialog .el-dialog__header { padding: 16px; }
-  .inbound-measurement-workspace-dialog .el-dialog__body { padding: 14px; }
+  .inbound-measurement-workspace-dialog.el-dialog:not(.is-fullscreen) { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px); }
+  .inbound-measurement-workspace-dialog > .el-dialog__header { padding: 16px; }
+  .inbound-measurement-workspace-dialog > .el-dialog__body { padding: 14px; }
 }
@media (max-width: 360px) {
-  .inbound-measurement-workspace-dialog.el-dialog { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px); }
-  .inbound-measurement-workspace-dialog .el-dialog__header { padding: 14px 12px; }
-  .inbound-measurement-workspace-dialog .el-dialog__body { padding: 10px; }
+  .inbound-measurement-workspace-dialog.el-dialog:not(.is-fullscreen) { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px); }
+  .inbound-measurement-workspace-dialog > .el-dialog__header { padding: 14px 12px; }
+  .inbound-measurement-workspace-dialog > .el-dialog__body { padding: 10px; }
 }
 </style>
@@ -21,6 +21,7 @@ import {
 } from '../api/weightOcr'
 import type { WeightResultResource, WeightWorkspaceResource } from '../types'
 import WeightOcrPanel from './WeightOcrPanel.vue'
+import InboundMeasurementDialog from '../../measurement/InboundMeasurementDialog.vue'

 vi.mock('../api/weightOcr', async () => {
  const actual = await vi.importActual<typeof import('../api/weightOcr')>('../api/weightOcr')
@@ -151,6 +152,46 @@ function dialogConfirmButton(text = '确认重量') {
 }

 describe('WeightOcrPanel confirmation behavior', () => {
+  it('keeps the weight confirmation outside its measurement parent with independent fullscreen and cancel state', async () => {
+    const pinia = createPinia()
+    setActivePinia(pinia)
+    const auth = useAuthStore()
+    auth.token = 'token'
+    auth.permissions = allWeightPermissions
+    useAccessPreviewStore().initializeAfterLogin()
+    const wrapper = mount(InboundMeasurementDialog, {
+      attachTo: document.body,
+      props: { modelValue: true, customerId: '10001', inboundId: '20001', inboundCode: 'RK-20001' },
+      global: {
+        plugins: [pinia, ElementPlus],
+        stubs: { InboundMeasurementPanel: { template: '<section class="measurement-panel" />' } },
+      },
+    })
+    await flushPromises()
+    const panel = wrapper.getComponent(WeightOcrPanel)
+    await openWeightDialog(panel)
+    const popup = panel.getComponent(AppDialog)
+    const parent = document.querySelector('.inbound-measurement-workspace-dialog')!
+    const child = document.querySelector('input[aria-label="当前图片确认重量"]')!.closest('.el-dialog')!
+    expect(document.body.contains(child)).toBe(true)
+    expect(parent.contains(child)).toBe(false)
+    expect(child.classList.contains('admin-workbench')).toBe(true)
+    await dialogWeightInput().setValue('286.125')
+    await new DOMWrapper(child).get('button[aria-label="展开全屏"]').trigger('click')
+    expect(child.classList.contains('is-fullscreen')).toBe(true)
+    expect(parent.classList.contains('is-fullscreen')).toBe(false)
+    expect(dialogWeightInput().element.value).toBe('286.125')
+    await new DOMWrapper(child).findAll('button').find(button => button.text() === '取消')!.trigger('click')
+    await flushPromises()
+    expect(popup.props('modelValue')).toBe(false)
+    expect(wrapper.getComponent(AppDialog).props('modelValue')).toBe(true)
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    await openWeightDialog(panel)
+    expect(popup.props('modelValue')).toBe(true)
+    expect(child.classList.contains('is-fullscreen')).toBe(false)
+    expect(confirmWeightResult).not.toHaveBeenCalled()
+  })
+
  beforeEach(() => {
    vi.clearAllMocks()
    document.body.innerHTML = ''
@@ -658,6 +658,7 @@ defineExpose({ reload: loadWorkspace })
      :confirm-text="previewConfirmText"
      confirm-type="success"
      width="min(1080px, calc(100vw - 28px))"
+      append-to-body
      fullscreenable
      @confirm="previewResult && confirmResult(previewResult, true)"
    >
@@ -127,6 +127,18 @@ describe('notification native dialogs and drawers', () => {
    await click(wrapper, '确认定时发送')
    expect(api.createNotification).toHaveBeenCalledWith(expect.objectContaining({ tenantId: '9223372036854775100', recipientType: 'TENANT_ALL', variables: { order_no: 'NYEXX2610200001' }, scheduledAt: expect.stringMatching(/^\d{4}-\d{2}-\d{2}T/) }))
  })
+  it('keeps long template variable labels above their editable values', async () => {
+    const variable = 'customer_delivery_appointment_reference_number'
+    const wrapper = await composer([variable])
+    const field = wrapper.get('.message-variable-field')
+    expect(field.classes()).toContain('el-form-item--label-top')
+    expect(field.get('label').text()).toContain(variable)
+    expect((field.get('label').element as HTMLElement).style.width).not.toBe('100px')
+    await field.get('input[placeholder="请输入变量值"]').setValue('REFERENCE-20261021')
+    await wrapper.get('input[placeholder="请输入服务端角色编码"]').setValue('TEST_OPERATOR')
+    await click(wrapper, '立即发送')
+    expect(api.createNotification).toHaveBeenCalledWith(expect.objectContaining({ variables: { [variable]: 'REFERENCE-20261021' } }))
+  })
  it('locks composer close paths and retains the draft after a rejected send', async () => {
    const pending = deferred<NotificationTask>()
    vi.mocked(api.createNotification).mockReturnValue(pending.promise)
@@ -82,7 +82,7 @@ async function submit() {
      </section>
      <section v-if="selectedTemplate?.variableWhitelist.length" class="density-dialog-section workbench-evidence" data-tone="work" aria-label="模板变量">
        <h3 class="density-dialog-section__title">模板变量</h3>
-        <table class="density-table density-table--editable"><tbody><tr v-for="key in selectedTemplate.variableWhitelist" :key="key"><td><el-form-item :label="key" required><el-input v-model="variables[key]" maxlength="2000" placeholder="请输入变量值" /></el-form-item></td></tr></tbody></table>
+        <table class="density-table density-table--editable"><tbody><tr v-for="key in selectedTemplate.variableWhitelist" :key="key"><td><el-form-item :label="key" label-position="top" label-width="auto" class="message-variable-field" required><el-input v-model="variables[key]" maxlength="2000" placeholder="请输入变量值" /></el-form-item></td></tr></tbody></table>
      </section>
    </el-form>
    <template #footer="{ close }"><div class="density-actions density-actions--footer"><el-button :disabled="submitting" @click="close">取消</el-button><el-button type="primary" :loading="submitting" @click="submit">{{ scheduled ? '确认定时发送' : '立即发送' }}</el-button></div></template>
@@ -90,6 +90,7 @@ async function submit() {
 </template>

 <style scoped>
+.message-variable-field :deep(.el-form-item__label) { max-width: 100%; overflow-wrap: anywhere; }
 .schedule-row { display: grid; width: 100%; grid-template-columns: auto auto minmax(180px, 1fr); align-items: center; gap: var(--admin-space-3); }
 .schedule-row :deep(.el-date-editor) { width: 100%; }
@media(max-width:560px) { .schedule-row { grid-template-columns: auto 1fr; } .schedule-row :deep(.el-date-editor) { grid-column: 1 / -1; } }
@@ -104,3 +104,12 @@
 2026-10-20 独立样式审查收尾：采购详情删除局部.purchase-detail的旧border/radius/background，外框由workbench-panel统一维护，业务布局保留。4个页面文件的模板/样式编译及公共外观归属检查通过，相关4文件58项回归通过，差异检查通过；人工截图仍待确认。

 2026-10-20 用户追加整页白底修正：整页主要列表外层workbench-table及整页详情workbench-panel显式增加is-page-surface，由公共样式移除最外圈border/radius/shadow。内部指标、图表、并列卡片、子表格线、弹框和日历左右独立面板保留；本批不改padding、脚本或承载。
+
+
+### 2026-10-21 采购节点弹框可用性修复
+
+| 页面/文件 | 操作与既有承载 | 结构问题与修复 | 验收 |
+|---|---|---|---|
+| ProcurementNodeActions | 采购详情中的节点命令居中弹框 | 自定义footer绕过AppDialog默认操作区容器；三项操作加入density-actions底部容器，允许换行并保持间距 | 定向回归通过；待人工1920×1080、100%截图确认 |
+
+保持既有命令、草稿、未知结果核对、权限与提交条件；只新增操作区容器。公共AppDialog的直接按钮footer修复由公共样式写者维护，本域未修改公共组件。
@@ -235,7 +235,7 @@ async function upload(event: Event) {
          <el-form-item v-if="needsAmount || needsEvidence" label="本单凭证" required><el-select v-model="form.voucherFileId" placeholder="选择已上传凭证"><el-option v-for="file in files" :key="file.fileId" :value="file.fileId" :label="file.fileName" /></el-select><input aria-label="上传本单凭证" type="file" accept="application/pdf,image/jpeg,image/png" :disabled="uploading || (!!pending && !editingDraft) || saving" @change="upload" /></el-form-item>
          <el-form-item label="操作说明" required><el-input v-model="form.reason" type="textarea" :rows="3" maxlength="1000" show-word-limit /></el-form-item>
        </el-form><el-alert v-if="error" :title="error.message" type="error" :closable="false" /><ApiErrorMeta v-if="error" :details="error" /></template>
-      <template #footer><el-button :disabled="saving || uploading" @click="opened = false">关闭</el-button><el-button v-if="editingDraft" :disabled="!!pending || !!storageError || saving || uploading" @click="useCorrectionDraft">核对并继续确认</el-button><el-button type="primary" :loading="saving" :disabled="uploading || warehouseLoading || (!editingDraft && !!storageError) || !key" @click="submit">{{ editingDraft ? '保存本地草稿' : pending ? '重试原请求' : '确认提交' }}</el-button></template>
+      <template #footer><div class="density-actions density-actions--footer"><el-button :disabled="saving || uploading" @click="opened = false">关闭</el-button><el-button v-if="editingDraft" :disabled="!!pending || !!storageError || saving || uploading" @click="useCorrectionDraft">核对并继续确认</el-button><el-button type="primary" :loading="saving" :disabled="uploading || warehouseLoading || (!editingDraft && !!storageError) || !key" @click="submit">{{ editingDraft ? '保存本地草稿' : pending ? '重试原请求' : '确认提交' }}</el-button></div></template>
    </AppDialog>
  </section>
 </template>
@@ -329,3 +329,12 @@ S05补充源码核对：实际自有/外配API均经公共解包检查业务码
 2026-10-20 独立样式审查收尾：同类复核删除出车统计面板的旧padding/background/border/radius，以及自有/外配汇总的重复background/border；仅保留网格与字段布局。4个页面文件的模板/样式编译及公共外观归属检查通过，相关4文件58项回归通过，差异检查通过；人工截图仍待确认。

 2026-10-20 用户追加整页白底修正：整页主要列表外层workbench-table及整页详情workbench-panel显式增加is-page-surface，由公共样式移除最外圈border/radius/shadow。内部指标、图表、并列卡片、子表格线、弹框和日历左右独立面板保留；本批不改padding、脚本或承载。散板需求“我的登记”通过CapacityInquiryTable单根透传class，仅列表调用去整页外圈；详情中的同组件保留内部边框。
+
+
+### 2026-10-21 运营登记弹框可用性修复
+
+| 页面/文件 | 操作与既有承载 | 结构问题与修复 | 验收 |
+|---|---|---|---|
+| OwnedBusinessOperationsEditor、OutsourcedBusinessOperationsEditor | 自有/外配业务详情的居中运营登记弹框 | 表单补齐公共密度控件宽度；目的仓及预约号允许换行，实际到达时间列以受约束宽度占位，防止长业务编号撑宽 | 定向回归通过；待人工1920×1080、100%截图确认 |
+
+依据本轮可用性反馈与本文件原操作矩阵；金额、日期时区、版本及未知结果重试逻辑均未修改。司机、车辆和运维编辑表单已有多列布局与公共底部确认入口，源码复查未据此扩大修改；真实可用性仍需截图确认。
@@ -80,13 +80,17 @@ async function discardRejected() {
 <template>
  <OutsourcedBusinessOperationsDialog v-model="open" :dispatch-no="detail?.row.dispatchNo" :busy="busy" :pending="Boolean(pending)" :save-disabled="!writable" :before-close="beforeClose" @save="save">
    <template #state><LoadErrorState v-if="error" title="运营登记未完成" :message="error.message" :show-retry="false"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState><p v-if="pending">原请求已保留，字段锁定；核对结果前不会建立新请求。</p><el-button v-if="pending?.rejected" :disabled="busy" @click="discardRejected">按明确拒绝结果重新编辑</el-button><p v-if="!writable">{{ detail?.row.actions.edit.blockReason || '没有运营登记权限' }}</p></template>
-    <template #amount><el-form label-position="top" class="outsourced-business-form"><el-form-item label="币种"><el-select v-model="form.currency" clearable :disabled="locked"><el-option label="CNY" value="CNY" /><el-option label="USD" value="USD" /></el-select></el-form-item><el-form-item label="整车承运金额"><el-input v-model="form.amount" :disabled="locked" placeholder="未登记；允许明确填写0" /></el-form-item><el-form-item label="更正说明"><el-input v-model="form.reason" :disabled="locked" maxlength="1000" /></el-form-item></el-form></template>
+    <template #amount><el-form label-position="top" class="density-form outsourced-business-form"><el-form-item label="币种"><el-select v-model="form.currency" clearable :disabled="locked"><el-option label="CNY" value="CNY" /><el-option label="USD" value="USD" /></el-select></el-form-item><el-form-item label="整车承运金额"><el-input v-model="form.amount" :disabled="locked" placeholder="未登记；允许明确填写0" /></el-form-item><el-form-item label="更正说明"><el-input v-model="form.reason" :disabled="locked" maxlength="1000" /></el-form-item></el-form></template>
    <template #arrivals><div v-for="destination in detail?.row.destinations || []" :key="destination.destinationKey" class="outsourced-business-arrival"><span>{{ destination.warehouseCode || destination.warehouseName || destination.address || '目的地资料缺失' }}<small v-for="appointment in destination.appointments" :key="appointment.appointmentNo">{{ appointment.appointmentNo }}</small></span><el-date-picker v-model="form.arrivals[destination.destinationKey]" type="datetime" value-format="YYYY-MM-DDTHH:mm:ssZ" :disabled="locked" placeholder="实际到达时间，未登记留空" /></div><p>时间按浏览器本地时区输入，提交时保留时区。</p></template>
  </OutsourcedBusinessOperationsDialog>
 </template>

 <style scoped>
 .outsourced-business-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 var(--admin-space-4); }
-.outsourced-business-arrival { display: grid; grid-template-columns: minmax(0,1fr) 280px; align-items: center; gap: var(--admin-space-4); margin-bottom: var(--admin-space-3); }
+.outsourced-business-arrival { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,320px); align-items: center; gap: var(--admin-space-4); margin-bottom: var(--admin-space-3); }
 .outsourced-business-arrival small { display: block; }
+
+.outsourced-business-form :deep(.el-form-item) { min-width: 0; }
+.outsourced-business-form :deep(.el-select), .outsourced-business-arrival :deep(.el-date-editor) { width: 100%; min-width: 0; }
+.outsourced-business-arrival > span { min-width: 0; overflow-wrap: anywhere; }
 </style>
@@ -80,14 +80,18 @@ async function discardRejected() {
 <template>
  <OwnedBusinessOperationsDialog v-model="open" :dispatch-no="detail?.row.dispatchNo" :busy="busy" :pending="Boolean(pending)" :save-disabled="!writable" :before-close="beforeClose" @save="save">
    <template #state><LoadErrorState v-if="error" title="运营登记未完成" :message="error.message" :show-retry="false"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState><p v-if="pending">原请求已保留，字段锁定；核对结果前不会建立新请求。</p><el-button v-if="pending?.rejected" :disabled="busy" @click="discardRejected">按明确拒绝结果重新编辑</el-button><p v-if="!writable">{{ detail?.row.actions.edit.blockReason || '没有运营登记权限' }}</p></template>
-    <template #amount><el-form label-position="top" class="owned-business-form"><el-form-item label="币种"><el-select v-model="form.currency" clearable :disabled="locked"><el-option label="CNY" value="CNY" /><el-option label="USD" value="USD" /></el-select></el-form-item><el-form-item label="整车总金额"><el-input v-model="form.amount" :disabled="locked" placeholder="未登记；允许明确填写0" /></el-form-item><el-form-item label="更正说明"><el-input v-model="form.reason" :disabled="locked" maxlength="1000" /></el-form-item></el-form></template>
+    <template #amount><el-form label-position="top" class="density-form owned-business-form"><el-form-item label="币种"><el-select v-model="form.currency" clearable :disabled="locked"><el-option label="CNY" value="CNY" /><el-option label="USD" value="USD" /></el-select></el-form-item><el-form-item label="整车总金额"><el-input v-model="form.amount" :disabled="locked" placeholder="未登记；允许明确填写0" /></el-form-item><el-form-item label="更正说明"><el-input v-model="form.reason" :disabled="locked" maxlength="1000" /></el-form-item></el-form></template>
    <template #arrivals><div v-for="destination in detail?.row.destinations || []" :key="destination.destinationKey" class="owned-business-arrival"><span>{{ destination.warehouseCode || destination.warehouseName || destination.address || '目的地资料缺失' }}<small v-for="appointment in destination.appointments" :key="appointment.appointmentNo">{{ appointment.appointmentNo }}</small></span><el-date-picker v-model="form.arrivals[destination.destinationKey]" type="datetime" value-format="YYYY-MM-DDTHH:mm:ssZ" :disabled="locked" placeholder="实际到达时间，未登记留空" /></div><p>时间按浏览器本地时区输入，提交时保留时区。</p></template>
-    <template #measurements><el-form label-position="top" class="owned-business-form"><el-form-item label="实际里程（mile）"><el-input v-model="form.actualDistanceMiles" :disabled="locked" placeholder="未登记" /></el-form-item><el-form-item label="油耗（L/100km）"><el-input v-model="form.fuelConsumptionLitresPer100Km" :disabled="locked" placeholder="手填耗油率，未登记留空" /></el-form-item></el-form></template>
+    <template #measurements><el-form label-position="top" class="density-form owned-business-form"><el-form-item label="实际里程（mile）"><el-input v-model="form.actualDistanceMiles" :disabled="locked" placeholder="未登记" /></el-form-item><el-form-item label="油耗（L/100km）"><el-input v-model="form.fuelConsumptionLitresPer100Km" :disabled="locked" placeholder="手填耗油率，未登记留空" /></el-form-item></el-form></template>
  </OwnedBusinessOperationsDialog>
 </template>

 <style scoped>
 .owned-business-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 var(--admin-space-4); }
-.owned-business-arrival { display: grid; grid-template-columns: minmax(0,1fr) 280px; align-items: center; gap: var(--admin-space-4); margin-bottom: var(--admin-space-3); }
+.owned-business-arrival { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,320px); align-items: center; gap: var(--admin-space-4); margin-bottom: var(--admin-space-3); }
 .owned-business-arrival small { display: block; }
+
+.owned-business-form :deep(.el-form-item) { min-width: 0; }
+.owned-business-form :deep(.el-select), .owned-business-arrival :deep(.el-date-editor) { width: 100%; min-width: 0; }
+.owned-business-arrival > span { min-width: 0; overflow-wrap: anywhere; }
 </style>
@@ -247,3 +247,15 @@
 2026-10-20 用户追加整页白底修正：整页主要列表外层workbench-table及整页详情workbench-panel显式增加is-page-surface，由公共样式移除最外圈border/radius/shadow。内部指标、图表、并列卡片、子表格线、弹框和日历左右独立面板保留；本批不改padding、脚本或承载。layoutAcceptance.test.ts仅将旧页头分隔线颜色期望改为当前workbench-border，托盘先于预约及字段列数等布局断言保留。

 本次整页面层收口：40个Vue文件仅新增class modifier，逐文件内容对照与差异检查通过；layoutAcceptance.test.ts定向6项通过。文件已固定，公共样式及全量门禁由总控收口，人工视觉仍待截图确认。
+
+
+### 2026-10-21 附件预览与尾程列表核对
+
+| 页面/文件 | 操作与既有承载 | 结构问题与修复 | 验收 |
+|---|---|---|---|
+| DispatchEvidenceFiles | DispatchWorkflowDialog内附件预览居中二级弹框 | 原预览挂载在父弹框DOM内；显式append-to-body，隔离父级布局与滚动容器 | 定向回归通过；待人工1920×1080、100%截图确认 |
+| LastMileOrdersView | 尾程订单筛选区 | 用户要求隐藏仓储转运与退货两段长汇总；本批确认两段模板及专用样式未恢复，保留行数据仍使用的统计响应 | 定向回归通过；待人工截图确认 |
+
+本批未修改SmartDispatchDialog及其候选分页、入库计划、换标与退货出库业务逻辑。源码复查这些入口的既有承载与表单/表格布局，未凭推测批量改宽度或删除必要横向滚动。
+
+公共缺口复核：此前AppDialog后代选择器可能连带命中二级弹框；当前公共写者已将header/body/footer改为直接子级选择器，代码层已收口，本域未修改公共样式；真实嵌套预览仍待人工截图确认。
@@ -80,7 +80,7 @@ onBeforeUnmount(() => { generation++; closePreview(); for (const url of urls) UR
    <table v-if="ids.length" class="density-table dispatch-evidence-table"><thead><tr><th class="dispatch-evidence__actions">操作</th><th>附件名称</th></tr></thead><tbody><tr v-for="id in ids" :key="id"><td class="dispatch-evidence__actions"><div class="density-actions"><el-button link :disabled="!metadata[id] || previewLoading" @click="preview(id)">预览</el-button><template v-if="!readonly"><el-button link :disabled="disabled || uploading" @click="choose(id)">替换</el-button><el-button link :disabled="disabled || uploading" @click="remove(id)">移除引用</el-button></template></div></td><td><LineClampText :content="metadata[id]?.fileName || '附件资料待核实'" /></td></tr></tbody></table>
    <p v-else class="density-dialog-note">暂无本趟附件。</p>
    <template v-if="!readonly"><input ref="input" class="evidence-input" type="file" accept="application/pdf,image/jpeg,image/png" :aria-label="'上传' + label" :disabled="disabled || uploading || !dispatchNo" @change="upload"><el-button :disabled="disabled || uploading || !dispatchNo" :loading="uploading" @click="choose()">上传{{ label }}</el-button></template>
-    <AppDialog class="admin-density-dialog admin-workbench is-dialog" :model-value="imageOpen" :title="imageName || '附件预览'" width="min(900px, calc(100vw - 28px))" fullscreenable :loading="previewLoading" :show-confirm="false" cancel-text="关闭" @update:model-value="closePreview">
+    <AppDialog append-to-body class="admin-density-dialog admin-workbench is-dialog" :model-value="imageOpen" :title="imageName || '附件预览'" width="min(900px, calc(100vw - 28px))" fullscreenable :loading="previewLoading" :show-confirm="false" cancel-text="关闭" @update:model-value="closePreview">
      <div class="density-dialog-sections"><section class="density-dialog-section" data-tone="source" aria-label="本车附件预览信息"><h3 class="density-dialog-section__title">附件信息</h3><table class="density-table"><tbody><tr><th scope="row">排车单号</th><td>{{ dispatchNo || '—' }}</td></tr><tr><th scope="row">附件名称</th><td>{{ imageName || '—' }}</td></tr></tbody></table></section><p v-if="previewLoading" class="density-dialog-note" role="status">正在读取本车附件…</p><img v-if="imageUrl" class="evidence-image" :src="imageUrl" :alt="imageName"></div>
    </AppDialog>
  </section>
@@ -1,5 +1,5 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
 import ElementPlus from 'element-plus'
 import { createPinia, setActivePinia } from 'pinia'
 import CarrierScheduleQueryPanel from './CarrierScheduleQueryPanel.vue'
@@ -8,6 +8,10 @@ import { appendContainerShippingNode, getContainerShippingNodes } from '../api/p
 import { getPortSchedule } from '../api/platformPortSchedules'
 import { useAuthStore } from '@/core/auth/auth'
 import { ApiResponseError } from '@/shared/api/http'
+import { h } from 'vue'
+import AppDialog from '@/shared/components/AppDialog.vue'
+
+enableAutoUnmount(afterEach)

 vi.mock('../api/platformCarrierScheduleQueries', () => ({
  listCarrierScheduleQueries: vi.fn(),
@@ -91,6 +95,49 @@ describe('CarrierScheduleQueryPanel loading states', () => {
    wrapper.unmount()
  })

+  it.each([false, true])('isolates nested manual entry from its parent and reopens in ordinary mode (dense=%s)', async (dense) => {
+    vi.mocked(listCarrierScheduleQueries).mockResolvedValue({ records: [], page: 1, size: 200, total: 0, pages: 0 })
+    const host = mount(AppDialog, {
+      props: { modelValue: true, title: '船期详情', showConfirm: false },
+      attrs: { class: 'parent-schedule-dialog admin-density-dialog admin-workbench is-dialog' },
+      slots: { default: () => h(CarrierScheduleQueryPanel, { oceanBookingId: '2', containerBookingId: '3', dense }) },
+      global: { plugins: [ElementPlus, pinia] },
+      attachTo: document.body,
+    })
+    try {
+      await flushPromises()
+      const panel = host.findComponent(CarrierScheduleQueryPanel)
+      const open = async () => {
+        await panel.findAll('button').find(button => button.text().includes('人工补录节点'))!.trigger('click')
+        await flushPromises()
+      }
+      await open()
+      const child = panel.findComponent(AppDialog)
+      const dialog = document.body.querySelector<HTMLElement>('.el-dialog:not(.parent-schedule-dialog)')!
+      expect(dialog).not.toBeNull()
+      expect(dialog.parentElement?.closest('.parent-schedule-dialog')).toBeNull()
+      expect(document.body.contains(dialog)).toBe(true)
+      expect(dialog.querySelector(':scope > .el-dialog__body .app-dialog__body')).not.toBeNull()
+      expect(dialog.querySelector(':scope > .el-dialog__footer')).not.toBeNull()
+      expect(child.props('width')).toContain(dense ? '780px' : '620px')
+      if (dense) {
+        dialog.querySelector<HTMLButtonElement>('[aria-label="展开全屏"]')!.click()
+        await flushPromises()
+        expect(dialog.classList.contains('is-fullscreen')).toBe(true)
+      }
+      Array.from(dialog.querySelectorAll<HTMLButtonElement>('.el-dialog__footer button')).find(button => button.textContent?.trim() === '取消')!.click()
+      await flushPromises()
+      expect(child.props('modelValue')).toBe(false)
+      expect(host.props('modelValue')).toBe(true)
+      await open()
+      expect(child.props('modelValue')).toBe(true)
+      expect(dialog.classList.contains('is-fullscreen')).toBe(false)
+      expect(appendContainerShippingNode).not.toHaveBeenCalled()
+    } finally {
+      host.unmount()
+    }
+  })
+
  it('shows manual entry without creating a tracking task', async () => {
    vi.mocked(listCarrierScheduleQueries).mockResolvedValue({ records: [], page: 1, size: 200, total: 0, pages: 0 })
    const wrapper = mount(CarrierScheduleQueryPanel, { props: { oceanBookingId: '2', containerBookingId: '3' }, global: { plugins: [ElementPlus, pinia] } })
@@ -291,14 +338,15 @@ describe('CarrierScheduleQueryPanel loading states', () => {
    inputs.find((input) => String(input.props('maxlength')) === '128')!.vm.$emit('update:modelValue', 'Pacific Ocean')
    inputs.find((input) => input.props('type') === 'textarea')!.vm.$emit('update:modelValue', '船司官网人工核验')
    await wrapper.findComponent({ name: 'AppDialog' }).vm.$emit('confirm'); await flushPromises()
-    expect(wrapper.text()).toContain('补录未成功，已保留当前填写内容')
-    expect(wrapper.text()).toContain('req-409'); expect(wrapper.text()).toContain('trace-409')
+    expect(document.body.querySelector('.el-dialog')?.textContent).toContain('补录未成功，已保留当前填写内容')
+    expect(document.body.querySelector('.el-dialog')?.textContent).toContain('req-409'); expect(document.body.querySelector('.el-dialog')?.textContent).toContain('trace-409')
    const dialog = wrapper.findComponent({ name: 'AppDialog' })
    expect(dialog.props('title')).toBe('人工补录船节点 · CAB-3')
    if (dense) {
-      await dialog.get('[aria-label="展开全屏"]').trigger('click')
-      expect(dialog.find('.el-dialog.is-fullscreen').exists()).toBe(true)
-      expect(dialog.find('textarea').element.value).toBe('船司官网人工核验')
+      document.body.querySelector<HTMLButtonElement>('[aria-label="展开全屏"]')!.click()
+      await flushPromises()
+      expect(document.body.querySelector('.el-dialog.is-fullscreen')).not.toBeNull()
+      expect(document.body.querySelector<HTMLTextAreaElement>('.el-dialog textarea')!.value).toBe('船司官网人工核验')
    }
    await wrapper.findComponent({ name: 'AppDialog' }).vm.$emit('confirm'); await flushPromises()

@@ -323,7 +371,7 @@ describe('CarrierScheduleQueryPanel loading states', () => {
    wrapper.findAllComponents({ name: 'ElInput' }).find((input) => input.props('type') === 'textarea')!.vm.$emit('update:modelValue', '人工核验可提柜')
    await wrapper.findComponent({ name: 'AppDialog' }).vm.$emit('confirm'); await flushPromises()

-    expect(wrapper.text()).toContain('预计时间和实际时间至少填写一项')
+    expect(document.body.querySelector('.el-dialog')?.textContent).toContain('预计时间和实际时间至少填写一项')
    expect(appendContainerShippingNode).not.toHaveBeenCalled()
  })
 })
@@ -282,7 +282,7 @@ watch(manualDialogOpen, (open) => { if (!open && !manualSaving.value) { manualId
      <details v-if="supersededActualNodes.length" class="technical-details duplicate-node-history"><summary>历史重复实际节点（{{ supersededActualNodes.length }}）</summary><ol class="technical-history"><li v-for="item in supersededActualNodes" :key="item.id"><span>{{ nodeTimeText(item) }}</span><strong>{{ nodeText(item.standardNode) }}</strong><small>{{ nodeLocation(item) }} · {{ item.providerCode }}<template v-if="item.sourceReference"> · {{ item.sourceReference }}</template></small></li></ol></details>
      <details v-if="query" class="technical-details"><summary>查询任务摘要、异常与变更历史</summary><dl class="query-facts" :class="{ 'density-fields': dense }"><div><dt>查询任务</dt><dd>{{ query.queryNo || '—' }}</dd></div><div><dt>跟踪标识</dt><dd>{{ trackingTypeText(query.trackingType) }} · {{ query.trackingNo || '—' }}</dd></div><div><dt>任务状态</dt><dd>{{ statusText }}</dd></div><div><dt>建立来源</dt><dd>{{ triggerSourceText(query.triggerSource) }}</dd></div><div><dt>最新实际节点</dt><dd>{{ nodeText(query.latestActualNode) }}</dd></div><div><dt>实际发生时间</dt><dd>{{ formatTime(query.latestActualAt) }}</dd></div><div><dt>最新来源</dt><dd>{{ latestSource }}</dd></div><div><dt>来源参考</dt><dd class="break-value">{{ sourceReference }}</dd></div><div><dt>观测时间</dt><dd>{{ formatTime(latestObservation) }}</dd></div><div><dt>最近成功</dt><dd>{{ formatTime(query.lastSuccessAt) }}</dd></div><div><dt>结果有效性</dt><dd>{{ queryView?.expired ? '结果已过期' : '结果有效' }}</dd></div><div v-if="query.lastErrorCode"><dt>最近错误码</dt><dd>{{ query.lastErrorCode }}</dd></div></dl><h3>任务变更历史</h3><p v-if="!histories.length" class="empty-line">暂无变更历史</p><ol v-else class="technical-history"><li v-for="item in histories" :key="item.id"><span>{{ formatTime(item.createdAt) }}</span><strong>{{ historyText(item.action) }}</strong><small>{{ item.operatorName || '系统' }}<template v-if="item.reason"> · {{ item.reason }}</template></small></li></ol></details>
    </template>
-    <AppDialog class="admin-workbench is-dialog" :class="{ 'admin-density-dialog': dense }" v-model="manualDialogOpen" :title="manualDialogTitle" :width="dense ? 'min(780px, calc(100vw - 28px))' : 'min(620px, calc(100vw - 28px))'" :fullscreenable="dense" confirm-text="确认补录" :confirm-loading="manualSaving" @confirm="submitManualNode">
+    <AppDialog class="admin-workbench is-dialog" :class="{ 'admin-density-dialog': dense }" v-model="manualDialogOpen" :title="manualDialogTitle" :width="dense ? 'min(780px, calc(100vw - 28px))' : 'min(620px, calc(100vw - 28px))'" :fullscreenable="dense" append-to-body confirm-text="确认补录" :confirm-loading="manualSaving" @confirm="submitManualNode">
      <el-alert v-if="manualError" type="error" :closable="false" show-icon title="补录未成功，已保留当前填写内容"><template #default><ApiErrorMeta :details="manualError" /></template></el-alert>
      <el-alert v-if="manualValidationError" type="warning" :closable="false" show-icon :title="manualValidationError" />
      <el-alert type="info" :closable="false" title="观测时间按提交时刻记录；预计事实不推进实际进度，既有事实不可编辑或删除。" />
@@ -53,6 +53,42 @@ const attachment: TruckAttachmentReference = { id: 'attachment-1', fileId: 'file
 beforeEach(() => { vi.clearAllMocks() })
 afterEach(() => { vi.restoreAllMocks(); document.body.innerHTML = '' })
 describe('TruckAttachmentDialog workflows', () => {
+  it('keeps a long file selection and attachment actions usable across fullscreen and reopening', async () => {
+    const fileName = '司机证件与车辆资料'.repeat(20) + '.pdf'
+    const longAttachment = { ...attachment, fileName }
+    vi.mocked(uploadTruckAppointmentAttachment).mockResolvedValue(longAttachment)
+    const wrapper = mount(TruckAttachmentDialog, { props: { modelValue: true, appointmentId: 'appointment-internal', attachments: [longAttachment], canManage: true }, global: { plugins: [ElementPlus] }, attachTo: document.body })
+    try {
+      await flushPromises()
+      const input = wrapper.get<HTMLInputElement>('.attachment-picker input[type="file"]')
+      const file = new File(['data'], fileName, { type: 'application/pdf' })
+      Object.defineProperty(input.element, 'files', { configurable: true, value: [file] })
+      await input.trigger('change')
+      await flushPromises()
+      expect(wrapper.get('.attachment-picker .el-upload-list__item-name').text()).toContain(fileName)
+      expect(wrapper.get('.attachment-row strong').text()).toBe(fileName)
+      expect(wrapper.get('.attachment-row button').text()).toBe('删除')
+      document.querySelector<HTMLButtonElement>('[aria-label="展开全屏"]')!.click()
+      await flushPromises()
+      expect(wrapper.get('.attachment-picker .el-upload-list__item-name').text()).toContain(fileName)
+      document.querySelector<HTMLButtonElement>('[aria-label="退出全屏"]')!.click()
+      await flushPromises()
+      const upload = Array.from(document.querySelectorAll<HTMLButtonElement>('button')).find(button => button.textContent?.trim() === '上传并关联')!
+      expect(upload.disabled).toBe(false)
+      upload.click()
+      await flushPromises()
+      expect(uploadTruckAppointmentAttachment).toHaveBeenCalledExactlyOnceWith('appointment-internal', file, 'OTHER')
+      await wrapper.setProps({ modelValue: false })
+      await wrapper.setProps({ modelValue: true })
+      await flushPromises()
+      expect(document.querySelector('.el-dialog.is-fullscreen')).toBeNull()
+      expect(wrapper.get('.attachment-row strong').text()).toBe(fileName)
+      expect(deleteTruckAppointmentAttachment).not.toHaveBeenCalled()
+    } finally {
+      wrapper.unmount()
+    }
+  })
+
  it('keeps attachment names readable through fullscreen and protects read-only access', async () => {
    const wrapper = mount(TruckAttachmentDialog, { props: { modelValue: true, appointmentId: 'appointment-internal', appointmentNo: 'TA-123', attachments: [attachment], canManage: false }, global: { plugins: [ElementPlus] }, attachTo: document.body })
    await flushPromises()
@@ -26,7 +26,7 @@ async function remove(item: TruckAttachmentReference) { if (busy.value || !props
  <AppDialog class="admin-density-dialog admin-workbench is-dialog" :model-value="props.modelValue" :title="attachmentDialogTitle('预约附件')" width="min(640px, 94vw)" fullscreenable :show-confirm="false" :close-on-click-modal="true" @update:model-value="emit('update:modelValue', $event)">
    <el-alert v-if="error" type="error" :closable="true" show-icon @close="error = null"><template #title>{{ error.message }}</template><ApiErrorMeta :details="error" /></el-alert>
    <div class="density-dialog-sections">
-    <section v-if="props.canManage" class="density-dialog-section" data-tone="work"><h3 class="density-dialog-section__title">上传附件</h3><div class="upload-panel"><el-select v-model="selectedType" aria-label="附件类型" class="attachment-type"><el-option v-for="(label, type) in attachmentTypeLabels" :key="type" :label="label" :value="type" /></el-select><el-upload :auto-upload="false" :limit="1" :show-file-list="true" :on-change="selectFile" :on-remove="() => { selectedFile = null }"><el-button><FileUp :size="15" />选择附件</el-button></el-upload><el-button type="primary" :loading="busy" :disabled="!selectedFile" @click="upload">上传并关联</el-button></div></section>
+    <section v-if="props.canManage" class="density-dialog-section" data-tone="work"><h3 class="density-dialog-section__title">上传附件</h3><div class="upload-panel"><el-select v-model="selectedType" aria-label="附件类型" class="attachment-type"><el-option v-for="(label, type) in attachmentTypeLabels" :key="type" :label="label" :value="type" /></el-select><el-upload class="attachment-picker" :auto-upload="false" :limit="1" :show-file-list="true" :on-change="selectFile" :on-remove="() => { selectedFile = null }"><el-button><FileUp :size="15" />选择附件</el-button></el-upload><el-button type="primary" :loading="busy" :disabled="!selectedFile" @click="upload">上传并关联</el-button></div></section>
    <section class="density-dialog-section" data-tone="source"><h3 class="density-dialog-section__title">现有附件 <small>共 {{ attachments.length }} 份</small></h3>
    <el-empty v-if="attachments.length === 0" description="暂无预约附件" :image-size="72" />
    <div v-for="item in attachments" :key="item.fileId" class="attachment-row">
@@ -41,6 +41,8 @@ async function remove(item: TruckAttachmentReference) { if (busy.value || !props
 <style scoped>
 .upload-panel { display:flex; align-items:center; flex-wrap:wrap; gap:var(--admin-space-3); }
 .attachment-type { width:160px; }
+.attachment-picker { flex:1 1 220px; min-width:0; max-width:100%; }
+.upload-panel > .el-button, .attachment-row > .el-button { flex-shrink:0; }
 .attachment-row { display:flex; justify-content:space-between; gap:var(--admin-space-5); overflow-wrap:anywhere; margin:0; padding:var(--admin-space-3) 0; border:0; border-bottom:1px solid var(--workbench-border); border-radius:0; }.attachment-row small { display:block; margin-top:var(--admin-space-1); color:var(--el-text-color-secondary); }
 .attachment-row>div{min-width:0}.attachment-row strong{overflow-wrap:anywhere}
@media (max-width: 560px) { .attachment-row { flex-direction:column; margin:0; padding:var(--admin-space-3) 0; border:0; border-bottom:1px solid var(--workbench-border); border-radius:0; } }
@@ -0,0 +1,149 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, ref } from 'vue'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import ElementPlus from 'element-plus'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { compileStyle, parse } from 'vue/compiler-sfc'
+import AppDialog from './AppDialog.vue'
+import AppDrawer from './AppDrawer.vue'
+
+let wrapper: VueWrapper | undefined
+const styles: HTMLStyleElement[] = []
+
+function installStyles() {
+  const add = (css: string) => {
+    const style = document.createElement('style')
+    style.textContent = css.replace(/@import[^;]+;/g, '')
+    document.head.append(style)
+    styles.push(style)
+  }
+  for (const name of ['base', 'el-dialog', 'el-drawer', 'el-form', 'el-form-item', 'el-button']) {
+    add(readFileSync(resolve(process.cwd(), `node_modules/element-plus/theme-chalk/${name}.css`), 'utf8'))
+  }
+  for (const [name, component] of [['AppDialog', AppDialog], ['AppDrawer', AppDrawer]] as const) {
+    const source = readFileSync(resolve(process.cwd(), `src/shared/components/${name}.vue`), 'utf8')
+    for (const style of parse(source).descriptor.styles) {
+      const compiled = compileStyle({ source: style.content, filename: `${name}.vue`, scoped: style.scoped, id: component.__scopeId || 'data-v-layout' })
+      expect(compiled.errors).toEqual([])
+      add(compiled.code)
+    }
+  }
+  for (const name of ['adminDensityTokens', 'adminDensity', 'adminWorkbenchTokens', 'adminWorkbench']) {
+    add(readFileSync(resolve(process.cwd(), `src/styles/${name}.css`), 'utf8'))
+  }
+}
+
+async function render(template: string) {
+  installStyles()
+  wrapper = mount(defineComponent({
+    components: { AppDialog, AppDrawer },
+    setup: () => ({ open: ref(true), childOpen: ref(true), name: ref(''), valid: ref(false) }),
+    template,
+  }), { attachTo: document.body, global: { plugins: [ElementPlus] } })
+  await flushPromises()
+  return wrapper
+}
+
+function element(selector: string) {
+  const result = document.querySelector<HTMLElement>(selector)
+  expect(result, selector).not.toBeNull()
+  return result!
+}
+const computed = (selector: string) => getComputedStyle(element(selector))
+
+afterEach(() => {
+  wrapper?.unmount()
+  wrapper = undefined
+  styles.splice(0).forEach(style => style.remove())
+  document.body.innerHTML = ''
+})
+
+describe('real Element floating frame boundaries', () => {
+  it('keeps a comfortable parent from changing nested dense and native dialog chrome', async () => {
+    await render(`
+      <AppDialog v-model="open" title="父窗口" class="outer admin-density-dialog admin-density-dialog--comfortable admin-workbench is-dialog" fullscreenable>
+        <AppDialog v-model="childOpen" title="子窗口" class="inner admin-density-dialog admin-workbench is-dialog"><p>子窗口正文</p></AppDialog>
+        <el-dialog :model-value="true" title="原生预览" class="nested-native"><p>预览内容</p></el-dialog>
+      </AppDialog>
+      <AppDialog :model-value="true" title="独立窗口" class="reference admin-density-dialog admin-workbench is-dialog"><p>独立正文</p></AppDialog>
+      <el-dialog :model-value="true" title="独立预览" class="reference-native"><p>预览内容</p></el-dialog>
+    `)
+    expect(element('.inner').closest('.outer')).not.toBeNull()
+    expect(element('.outer').classList.contains('el-dialog')).toBe(true)
+    for (const part of ['header', 'body', 'footer']) {
+      expect(computed(`.inner > .el-dialog__${part}`).padding).toBe(computed(`.reference > .el-dialog__${part}`).padding)
+    }
+    expect(computed('.nested-native > .el-dialog__header').padding).toBe(computed('.reference-native > .el-dialog__header').padding)
+    expect(computed('.nested-native > .el-dialog__body').overflowY).toBe(computed('.reference-native > .el-dialog__body').overflowY)
+    expect(computed('.inner > .el-dialog__header > .el-dialog__title').paddingRight).toBe(computed('.reference > .el-dialog__header > .el-dialog__title').paddingRight)
+  })
+
+  it('isolates drawer chrome and honors an explicitly teleported nested dialog', async () => {
+    await render(`
+      <AppDrawer v-model="open" title="详情" class="outer-drawer admin-density-drawer admin-workbench is-drawer" size="900px">
+        <el-drawer :model-value="true" title="原生抽屉" class="nested-drawer"><p>详情</p></el-drawer>
+        <AppDialog v-model="childOpen" title="编辑" append-to-body class="portal admin-density-dialog admin-workbench is-dialog"><p>编辑内容</p></AppDialog>
+      </AppDrawer>
+      <el-drawer :model-value="true" title="独立抽屉" class="reference-drawer"><p>详情</p></el-drawer>
+    `)
+    expect(element('.outer-drawer').classList.contains('el-drawer')).toBe(true)
+    expect(element('.nested-drawer').closest('.outer-drawer')).not.toBeNull()
+    expect(element('.portal').closest('.outer-drawer')).toBeNull()
+    expect(element('.portal').classList.contains('admin-workbench')).toBe(true)
+    for (const part of ['header', 'body']) {
+      expect(computed(`.nested-drawer > .el-drawer__${part}`).padding).toBe(computed(`.reference-drawer > .el-drawer__${part}`).padding)
+    }
+  })
+
+  it('keeps the native header and footer around a flexible body through fullscreen and reopen', async () => {
+    const view = await render(`
+      <AppDialog v-model="open" title="船期表单" fullscreenable width="760px" class="editor admin-density-dialog admin-workbench is-dialog">
+        <el-input v-model="name" aria-label="船名" />
+        <template #footer><el-button>取消</el-button><el-button>保存模板</el-button><el-button>预览生成</el-button><el-button type="primary">生成船期</el-button></template>
+      </AppDialog>
+    `)
+    expect(element('.editor > .el-dialog__header > .el-dialog__title').textContent).toBe('船期表单')
+    expect(computed('.editor > .el-dialog__body').flexGrow).toBe('1')
+    expect(computed('.editor > .el-dialog__body').minHeight).toBe('0px')
+    expect(computed('.editor > .el-dialog__body').overflowY).toBe('auto')
+    expect(computed('.editor > .el-dialog__footer').flexShrink).toBe('0')
+    expect(computed('.editor > .el-dialog__footer').flexWrap).toBe('wrap')
+    await view.get('input[aria-label="船名"]').setValue('已填写船名')
+    element('.editor button[aria-label="展开全屏"]').click()
+    await flushPromises()
+    expect(element('.editor').classList.contains('is-fullscreen')).toBe(true)
+    expect(computed('.editor > .el-dialog__body').flexGrow).toBe('1')
+    expect((element('.editor input') as HTMLInputElement).value).toBe('已填写船名')
+    const dialog = view.findComponent(AppDialog)
+    dialog.vm.$emit('update:modelValue', false)
+    await flushPromises()
+    dialog.vm.$emit('update:modelValue', true)
+    await flushPromises()
+    expect(element('.editor').classList.contains('is-fullscreen')).toBe(false)
+    expect((element('.editor input') as HTMLInputElement).value).toBe('已填写船名')
+    expect(element('.editor > .el-dialog__footer').querySelectorAll('button')).toHaveLength(4)
+  })
+
+  it('preserves workspace dimensions and lets multiline cell errors occupy space inside long forms', async () => {
+    await render(`
+      <AppDialog v-model="open" title="长表单" width="1560px" fullscreenable class="workspace admin-density-dialog admin-density-workspace admin-workbench is-dialog">
+        <el-form class="density-form">
+          <table class="density-table density-table--editable"><tbody>
+            <tr><td><el-form-item label="必填说明" required error="请补充完整的说明，长错误文字应在当前单元格内换行，并为下一行字段留出空间。"><el-input v-model="name" /></el-form-item></td></tr>
+            <tr v-for="index in 30" :key="index"><td>明细 {{ index }}</td></tr>
+          </tbody></table>
+        </el-form>
+      </AppDialog>
+    `)
+    expect(computed('.workspace').height).toBe('92vh')
+    expect(computed('.workspace').maxHeight).toBe('92vh')
+    expect(element('.workspace .el-form-item.is-required')).toBeDefined()
+    await vi.waitFor(() => expect(document.querySelector('.workspace .el-form-item__error')).not.toBeNull())
+    expect(element('.workspace .el-form-item__error').textContent).toContain('下一行字段')
+    expect(computed('.workspace .el-form-item__error').position).toBe('static')
+    expect(computed('.workspace .el-form-item__error').flexBasis).toBe('100%')
+    expect(element('.workspace table').querySelectorAll('tr')).toHaveLength(31)
+    expect(element('.workspace > .el-dialog__footer').closest('.el-dialog__body')).toBeNull()
+  })
+})
@@ -104,7 +104,7 @@ describe('AppDialog', () => {

    expect(source).toContain(':global(.app-dialog.el-dialog) { position: relative; display: flex;')
    expect(source).toContain('width: 100%; max-width: 100%; height: 100vh;')
-    expect(source).toContain(':global(.app-dialog .el-dialog__body) { min-height: 0; overflow-y: auto;')
+    expect(source).toContain(':global(.app-dialog > .el-dialog__body) { flex: 1 1 auto; min-height: 0; overflow-y: auto;')
    expect(source).toContain('max-height: calc(100svh - 20px)')
  })

@@ -136,9 +136,11 @@ function closeDialog() {
 <style scoped>
 :global(.app-dialog.el-dialog) { position: relative; display: flex; max-height: min(90vh, 900px); flex-direction: column; overflow: hidden; }
 :global(.app-dialog.el-dialog.is-fullscreen) { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; margin: 0 !important; border-radius: 0; }
-:global(.app-dialog .el-dialog__header), :global(.app-dialog .el-dialog__footer) { flex: 0 0 auto; }
-:global(.app-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
-:global(.app-dialog.has-native-fullscreen-control .el-dialog__title) { display: block; padding-right: 44px; }
+:global(.app-dialog > .el-dialog__header), :global(.app-dialog > .el-dialog__footer) { flex: 0 0 auto; }
+:global(.app-dialog > .el-dialog__body) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+:global(.app-dialog > .el-dialog__footer:has(> .el-button)) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
+:global(.app-dialog > .el-dialog__footer > .el-button) { margin-left: 0; }
+:global(.app-dialog.has-native-fullscreen-control > .el-dialog__header > .el-dialog__title) { display: block; padding-right: 44px; }
 .app-dialog__header { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; color: var(--cc-text); font-size: 18px; font-weight: 600; line-height: 24px; }
 .app-dialog__header-content { min-width: 0; flex: 1; }
 .app-dialog__header > :deep(.el-button) { flex: 0 0 auto; margin-right: 24px; color: var(--cc-muted); }
@@ -146,6 +148,6 @@ function closeDialog() {
 .app-dialog__native-fullscreen-control.is-without-close { right: 12px; }
 .app-dialog__body { min-height: 0; }
 .app-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
-.app-dialog__footer :deep(.el-button) { margin-left: 0; }
-@media (max-width: 720px) { :global(.app-dialog.el-dialog) { max-height: calc(100svh - 20px); margin-block: 10px !important; } .app-dialog__footer :deep(.el-button) { min-height: 44px; } }
+.app-dialog__footer > :deep(.el-button) { margin-left: 0; }
+@media (max-width: 720px) { :global(.app-dialog.el-dialog) { max-height: calc(100svh - 20px); margin-block: 10px !important; } .app-dialog__footer > :deep(.el-button) { min-height: 44px; } }
 </style>
@@ -60,7 +60,7 @@ describe('AppDrawer', () => {
  it('keeps the drawer chrome fixed while long content scrolls in the body', () => {
    const source = readFileSync(resolve(process.cwd(), 'src/shared/components/AppDrawer.vue'), 'utf8')

-    expect(source).toContain(':global(.app-drawer .el-drawer__body) { min-height: 0; overflow-y: auto;')
+    expect(source).toContain(':global(.app-drawer > .el-drawer__body) { min-height: 0; overflow-y: auto;')
    expect(source).toContain('max-width: 94vw')
  })
 })
@@ -88,10 +88,12 @@ function closeDrawer() {

 <style scoped>
 :global(.app-drawer) { max-width: calc(100vw - 20px); }
-:global(.app-drawer .el-drawer__header), :global(.app-drawer .el-drawer__footer) { flex: 0 0 auto; }
-:global(.app-drawer .el-drawer__body) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+:global(.app-drawer > .el-drawer__header), :global(.app-drawer > .el-drawer__footer) { flex: 0 0 auto; }
+:global(.app-drawer > .el-drawer__body) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+:global(.app-drawer > .el-drawer__footer:has(> .el-button)) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
+:global(.app-drawer > .el-drawer__footer > .el-button) { margin-left: 0; }
 .app-drawer__body { min-height: 0; }
 .app-drawer__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
-.app-drawer__footer :deep(.el-button) { margin-left: 0; }
-@media (max-width: 720px) { :global(.app-drawer) { max-width: 94vw; } .app-drawer__footer :deep(.el-button) { min-height: 44px; } }
+.app-drawer__footer > :deep(.el-button) { margin-left: 0; }
+@media (max-width: 720px) { :global(.app-drawer) { max-width: 94vw; } .app-drawer__footer > :deep(.el-button) { min-height: 44px; } }
 </style>
@@ -35,8 +35,8 @@
 .admin-density-dialog.el-dialog.is-fullscreen { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
 .admin-density-dialog.el-dialog.admin-density-workspace:not(.is-fullscreen) { height: 92vh; max-height: 92vh; margin: 4vh auto; }
 .admin-density-dialog.el-dialog.admin-density-workspace > .el-dialog__body { flex: 1 1 auto; }
-.admin-density-dialog .el-dialog__headerbtn { top: 0; }
-.admin-density-dialog .app-dialog__native-fullscreen-control { top: 6px; }
+.admin-density-dialog > .el-dialog__header > .el-dialog__headerbtn { top: 0; }
+.admin-density-dialog > .el-dialog__body > .app-dialog__native-fullscreen-control { top: 6px; }
 .admin-density-confirm.el-message-box { --el-font-size-base: var(--admin-font-body); border-radius: var(--admin-radius, 4px); padding: var(--admin-space-5, 12px) var(--admin-space-6, 16px); }
 .admin-density-confirm .el-message-box__title { font-size: var(--admin-font-title, 16px); }

@@ -51,14 +51,14 @@
  border-radius: var(--admin-radius, 4px);
 }
 .admin-density-dialog.el-dialog:not(.is-fullscreen) { margin-top: 6vh; max-height: 88vh; }
-.admin-density-dialog.el-dialog .el-dialog__header { flex: 0 0 auto; margin: 0; padding: var(--admin-space-4, 10px) 48px var(--admin-space-4, 10px) var(--admin-space-6, 16px); border-bottom: 1px solid var(--cc-border); }
-.admin-density-dialog.el-dialog .el-dialog__title { font-size: var(--admin-font-title, 16px); line-height: 24px; font-weight: 600; }
-.admin-density-dialog.el-dialog .el-dialog__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--admin-space-5, 12px) var(--admin-space-6, 16px); }
-.admin-density-dialog.el-dialog .el-dialog__footer { flex: 0 0 auto; padding: var(--admin-space-3, 8px) var(--admin-space-6, 16px); border-top: 1px solid var(--cc-border); }
+.admin-density-dialog.el-dialog > .el-dialog__header { flex: 0 0 auto; margin: 0; padding: var(--admin-space-4, 10px) 48px var(--admin-space-4, 10px) var(--admin-space-6, 16px); border-bottom: 1px solid var(--cc-border); }
+.admin-density-dialog.el-dialog > .el-dialog__header > .el-dialog__title { font-size: var(--admin-font-title, 16px); line-height: 24px; font-weight: 600; }
+.admin-density-dialog.el-dialog > .el-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--admin-space-5, 12px) var(--admin-space-6, 16px); }
+.admin-density-dialog.el-dialog > .el-dialog__footer { flex: 0 0 auto; padding: var(--admin-space-3, 8px) var(--admin-space-6, 16px); border-top: 1px solid var(--cc-border); }
 /* Compact confirmations keep one message and right-aligned actions without section dividers. */
 .admin-density-dialog.density-confirm-dialog.el-dialog:not(.is-fullscreen) { margin: auto; }
-.admin-density-dialog.density-confirm-dialog.el-dialog .el-dialog__header { border-bottom: 0; }
-.admin-density-dialog.density-confirm-dialog.el-dialog .el-dialog__footer { border-top: 0; padding-bottom: var(--admin-space-5, 12px); }
+.admin-density-dialog.density-confirm-dialog.el-dialog > .el-dialog__header { border-bottom: 0; }
+.admin-density-dialog.density-confirm-dialog.el-dialog > .el-dialog__footer { border-top: 0; padding-bottom: var(--admin-space-5, 12px); }
 .admin-density-dialog.el-dialog .el-table { font-size: var(--admin-font-body, 13px); }
 .admin-density-dialog.el-dialog .el-table__cell { height: var(--admin-row-height, 36px); padding: var(--admin-space-1, 4px) 0; }
 .admin-density-dialog.el-dialog .el-table .cell { line-height: 22px; }
@@ -72,14 +72,14 @@
 /* Opt-in comfortable editor frame for short forms that need room to breathe. */
 .admin-density-dialog.admin-density-dialog--comfortable.el-dialog { --el-component-size: 40px; border-radius: 12px; }
 .admin-density-dialog.admin-density-dialog--comfortable.el-dialog:not(.is-fullscreen) { margin-top: 10vh; }
-.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__header { padding: 18px 48px 18px 24px; }
-.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__headerbtn { top: 6px; }
-.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__body { padding: 24px; }
-.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__footer { padding: 16px 24px; background: var(--admin-label-bg); }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog > .el-dialog__header { padding: 18px 48px 18px 24px; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog > .el-dialog__header > .el-dialog__headerbtn { top: 6px; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog > .el-dialog__body { padding: 24px; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog > .el-dialog__footer { padding: 16px 24px; background: var(--admin-label-bg); }
 .admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-form-item { margin-bottom: 20px; }
 .admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-form-item__label { margin-bottom: 8px; font-weight: 500; }
 .admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-select__wrapper { min-height: 40px; }
-.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .app-dialog__footer .el-button { min-width: 88px; height: 38px; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog > .el-dialog__footer > .app-dialog__footer > .el-button { min-width: 88px; height: 38px; }

 /* Opted-in detail and editor content reuse the existing compact drawer frame. */
 :is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-code-block { margin:0; padding:var(--admin-space-3); border:1px solid var(--admin-table-border); border-radius:var(--admin-radius); background:var(--admin-surface); color:var(--cc-text); font:var(--admin-font-caption)/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
@@ -187,10 +187,10 @@
 .admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
 .admin-density .density-tab-icon { display: inline-flex; width: var(--admin-tab-icon-slot); height: var(--admin-tab-icon-slot); flex: 0 0 var(--admin-tab-icon-slot); align-items: center; justify-content: center; font: var(--admin-tab-icon-size)/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

-.admin-density-drawer .el-drawer__header { margin-bottom: 0; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--cc-border); }
-.admin-density-drawer .el-drawer__title { font-size: var(--admin-font-title); }
-.admin-density-drawer .el-drawer__body { padding: var(--admin-space-5) var(--admin-space-6); }
-.admin-density-drawer .el-drawer__footer { padding: var(--admin-space-5) var(--admin-space-6); border-top: 1px solid var(--cc-border); }
+.admin-density-drawer > .el-drawer__header { margin-bottom: 0; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--cc-border); }
+.admin-density-drawer > .el-drawer__header > .el-drawer__title { font-size: var(--admin-font-title); }
+.admin-density-drawer > .el-drawer__body { padding: var(--admin-space-5) var(--admin-space-6); }
+.admin-density-drawer > .el-drawer__footer { padding: var(--admin-space-5) var(--admin-space-6); border-top: 1px solid var(--cc-border); }

 /* Reusable row action group; no business action names in the shared layer. */
 .admin-density .data-table .density-actions { --cc-list-action-sibling-margin: 0px; display: flex; align-items: center; gap: var(--cc-row-action-gap, var(--admin-space-2)); }
@@ -276,6 +276,8 @@
 :is(.admin-density, .admin-density-dialog) .density-table--editable .el-input__inner { text-align: left; }
 :is(.admin-density, .admin-density-dialog) .density-table--editable .el-form-item { margin-bottom: 0; }
 :is(.admin-density, .admin-density-dialog) .density-table--editable .el-form-item.is-error { margin-bottom: var(--admin-space-5); }
+/* Cell validation must increase row height instead of covering the next row. */
+:is(.admin-density, .admin-density-dialog) .density-table--editable .el-form-item__error:not(.el-form-item__error--inline) { position: static; flex-basis: 100%; white-space: normal; }
 :is(.admin-density, .admin-density-dialog) .density-table--editable :is(.el-input-number, .el-segmented, .el-date-editor) { width: 100%; min-width: 0; }
 :is(.admin-density, .admin-density-dialog) .density-table-editor > span { flex: 0 0 auto; color: var(--cc-muted); white-space: nowrap; }

@@ -423,8 +423,8 @@ describe('approved Admin density ownership', () => {
    expect(classesOf(frame!)).toContain('density-confirm-dialog')
    expect(dialog).toContain('align-center')
    expect(css).toContain('.admin-density-dialog.density-confirm-dialog.el-dialog:not(.is-fullscreen) { margin: auto; }')
-    expect(css).toContain('.admin-density-dialog.density-confirm-dialog.el-dialog .el-dialog__header { border-bottom: 0; }')
-    expect(css).toContain('.admin-density-dialog.density-confirm-dialog.el-dialog .el-dialog__footer { border-top: 0;')
+    expect(css).toContain('.admin-density-dialog.density-confirm-dialog.el-dialog > .el-dialog__header { border-bottom: 0; }')
+    expect(css).toContain('.admin-density-dialog.density-confirm-dialog.el-dialog > .el-dialog__footer { border-top: 0;')
  })
  it('keeps the simplified calendar in two columns with bounded previews and scrollable daily details', () => {
    const view = parse(read('modules/appointment-calendar/AppointmentCalendarView.vue')).descriptor
@@ -600,13 +600,13 @@
  border-radius: var(--workbench-radius);
 }

-.admin-workbench.is-dialog.el-dialog .el-dialog__header,
-.admin-workbench.is-dialog.el-dialog .el-dialog__footer {
+.admin-workbench.is-dialog.el-dialog > .el-dialog__header,
+.admin-workbench.is-dialog.el-dialog > .el-dialog__footer {
  border-color: var(--workbench-border);
  background: var(--workbench-surface);
 }

-.admin-workbench.is-dialog.el-dialog .el-dialog__title {
+.admin-workbench.is-dialog.el-dialog > .el-dialog__header > .el-dialog__title {
  color: var(--workbench-text);
 }

@@ -616,13 +616,13 @@
  color: var(--workbench-text);
 }

-.admin-workbench.is-drawer.el-drawer .el-drawer__header,
-.admin-workbench.is-drawer.el-drawer .el-drawer__footer {
+.admin-workbench.is-drawer.el-drawer > .el-drawer__header,
+.admin-workbench.is-drawer.el-drawer > .el-drawer__footer {
  border-color: var(--workbench-border);
  background: var(--workbench-surface);
 }

-.admin-workbench.is-drawer.el-drawer .el-drawer__title {
+.admin-workbench.is-drawer.el-drawer > .el-drawer__header > .el-drawer__title {
  color: var(--workbench-text);
 }