优化

src/modules/appointment-calendar/AppointmentBatchForm.test.ts

@@ -1,3 +1,4 @@
+import { DatePickerStub, TimePickerStub } from './temporal-picker.test-support'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, expect, it, vi } from 'vitest'
 import AppointmentBatchForm from './AppointmentBatchForm.vue'
@@ -13,6 +14,7 @@ vi.mock('./batchApi', async original => ({ ...await original<typeof import('./ba
 vi.mock('./workApi', async original => ({ ...await original<typeof import('./workApi')>(), getWorkItems: vi.fn() }))
 let guard: LeaveGuard
 function render() { return mount(AppointmentBatchForm, { props: { batchKey: 'FBA_APPOINTMENT:1' }, global: { provide: { 'appointment-work-leave-guard': (value: LeaveGuard) => { guard = value; return () => undefined } }, stubs: {
+    ElDatePicker: DatePickerStub, ElTimePicker: TimePickerStub,
   ElButton: { props: ['nativeType', 'disabled'], template: '<button :type="nativeType || \'button\'" :disabled="disabled"><slot /></button>' },
   LoadErrorState: { props: ['message'], template: '<section role="alert">{{ message }}<button @click="$emit(\'retry\')">重试读取</button></section>' }, ApiErrorMeta: true, CargoVerificationForm: true,
 } } }) }
@@ -176,7 +178,7 @@ it('retries a new destination without exposing the prior batch or retaining its
   expect(wrapper.text()).not.toContain('AP-001'); expect(wrapper.find('form').exists()).toBe(false)
   await wrapper.get('[role="alert"] button').trigger('click'); await flushPromises()
   expect(wrapper.text()).toContain('AP-CURRENT')
-  expect((wrapper.findAll('input[type="date"]')[0]!.element as HTMLInputElement).value).toBe('2026-10-22')
+  expect((wrapper.findAll('input[data-picker-kind="date"]')[0]!.element as HTMLInputElement).value).toBe('2026-10-22')
   expect((wrapper.get('[aria-label="来源1分出箱数"]').element as HTMLInputElement).value).toBe('0')
   expect(getAppointmentBatch).toHaveBeenLastCalledWith('FBA_APPOINTMENT:2')
   expect(repartitionAppointments).not.toHaveBeenCalled(); wrapper.unmount()

src/modules/appointment-calendar/AppointmentBatchForm.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -121,13 +122,13 @@ 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 @submit.prevent="save"><fieldset :disabled="saving || !!pending || loading || !canWrite">
+        <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' ? '第一批目标日期（可不填）' : '合并后目标日期（可不填）' }}<input v-model="form.firstDate" type="date"></label><label v-if="mode === 'split'">第二批目标日期（可不填）<input v-model="form.nextDate" type="date"></label><label>调整原因<textarea v-model="form.reason" required maxlength="1000" /></label><label>批次备注<textarea v-model="form.remark" maxlength="1000" /></label>
+          <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>
       </template>
     </template>
   </section>
 </template>
-<style scoped>.allocation-row, .batch-result, .batch-candidate { padding: var(--admin-space-3) 0; border-bottom: 1px solid var(--cc-border); overflow-wrap: anywhere; }.batch-modes, .batch-result, .batch-candidate { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }.batch-candidate > span { flex: 1; }</style>
+<style scoped>.allocation-row, .batch-result, .batch-candidate { padding: var(--admin-space-3) 0; border-bottom: 1px solid var(--workbench-border); overflow-wrap: anywhere; }.batch-modes, .batch-result, .batch-candidate { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }.batch-candidate > span { flex: 1; }</style>

src/modules/appointment-calendar/AppointmentCalendarDialogs.native.test.ts

@@ -62,10 +62,13 @@ it('keeps the arrival context and typed local time across native fullscreen and
   expect(dialog.props('width')).toBe('520px')
   expect(dialog.get('[aria-label="到仓业务信息"]').text()).toContain('TEST-CONT 计划到仓')
   expect(dialog.text()).not.toContain(warehouse.sourceContainerBookingId)
-  await dialog.get('input[type="datetime-local"]').setValue('2026-10-22T09:30')
+  const picker = dialog.getComponent({ name: 'ElDatePicker' })
+  expect(picker.props()).toMatchObject({ type: 'datetime', valueFormat: 'YYYY-MM-DDTHH:mm', format: 'YYYY-MM-DD HH:mm' })
+  expect(dialog.getComponent({ name: 'ElForm' }).props('labelWidth')).toBe('150px')
+  picker.vm.$emit('update:modelValue', '2026-10-22T09:30'); await flushPromises()
   await dialog.get('button[aria-label="展开全屏"]').trigger('click'); await flushPromises()
   expect(dialog.findComponent({ name: 'ElDialog' }).props('fullscreen')).toBe(true)
-  expect((dialog.get('input').element as HTMLInputElement).value).toBe('2026-10-22T09:30')
+  expect(picker.props('modelValue')).toBe('2026-10-22T09:30')
   await dialog.get('.el-dialog__footer .el-button--primary').trigger('click'); await flushPromises()
   expect(saveWarehouseArrival).toHaveBeenCalledExactlyOnceWith(warehouse.sourceContainerBookingId, { estimatedWarehouseArrivalAt: '2026-10-22T09:30:00', expectedVersion: 3 }, expect.any(String))
 })
@@ -73,7 +76,7 @@ it('locks the real arrival input after an unknown outcome and reuses its immutab
   vi.mocked(saveWarehouseArrival).mockRejectedValueOnce(new Error('connection lost'))
   const wrapper = await open(); wrapper.getComponent({ name: 'AppointmentCalendarPanel' }).vm.$emit('edit', event); await flushPromises()
   const dialog = wrapper.findAllComponents(AppDialog).find(item => item.props('title') === '调整计划到仓')!
-  await dialog.get('input').setValue('2026-10-22T09:30')
+  dialog.getComponent({ name: 'ElDatePicker' }).vm.$emit('update:modelValue', '2026-10-22T09:30'); await flushPromises()
   await dialog.get('.el-dialog__footer .el-button--primary').trigger('click'); await flushPromises()
   expect(dialog.get('input').attributes('disabled')).toBeDefined()
   expect(dialog.text()).toContain('上次提交结果尚未确认')
@@ -81,6 +84,17 @@ it('locks the real arrival input after an unknown outcome and reuses its immutab
   await dialog.get('.el-dialog__footer .el-button--primary').trigger('click'); await flushPromises()
   expect(vi.mocked(saveWarehouseArrival).mock.calls[1]).toEqual(vi.mocked(saveWarehouseArrival).mock.calls[0])
 })
+it('clears the Element arrival picker without saving an empty required time', async () => {
+  const wrapper = await open(); wrapper.getComponent({ name: 'AppointmentCalendarPanel' }).vm.$emit('edit', event); await flushPromises()
+  const dialog = wrapper.findAllComponents(AppDialog).find(item => item.props('title') === '调整计划到仓')!
+  const picker = dialog.getComponent({ name: 'ElDatePicker' })
+  expect(dialog.find('input[type="datetime-local"]').exists()).toBe(false)
+  picker.vm.$emit('update:modelValue', '2026-10-22T09:30'); await flushPromises()
+  expect(dialog.props('confirmDisabled')).toBe(false)
+  picker.vm.$emit('update:modelValue', null); await flushPromises()
+  expect(dialog.props('confirmDisabled')).toBe(true)
+  expect(saveWarehouseArrival).not.toHaveBeenCalled()
+})
 it('keeps complete long cargo names accessible in the selectable table', async () => {
   const wrapper = await open()
   wrapper.getComponent({ name: 'AppointmentCalendarPanel' }).vm.$emit('create'); await vi.dynamicImportSettled(); await flushPromises()

src/modules/appointment-calendar/AppointmentCalendarPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, ref } from 'vue'
 import { Plus } from '@lucide/vue'
@@ -37,8 +38,8 @@ function changeMode(next: CalendarMode) {
 }
 </script>
 <template>
-  <section class="appointment-calendar admin-density" :aria-busy="loading">
-    <div class="calendar-main">
+  <section class="appointment-calendar admin-density admin-workbench" :aria-busy="loading">
+    <div class="calendar-main workbench-panel is-flush">
       <header class="calendar-toolbar">
         <div class="calendar-label">
           <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M8 3v4M16 3v4M3 10h18M8 15h3M14 15h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
@@ -46,7 +47,7 @@ function changeMode(next: CalendarMode) {
         </div>
         <div class="calendar-controls">
           <el-button v-if="canCreate" type="primary" @click="emit('create')"><Plus :size="16" aria-hidden="true" />新增预约</el-button>
-          <div class="view-toggle" role="group" aria-label="预约视图"><button type="button" :aria-pressed="mode === 'month'" @click="changeMode('month')">月</button><button type="button" :aria-pressed="mode === 'week'" @click="changeMode('week')">周</button></div>
+          <div class="view-toggle workbench-tabs" role="group" aria-label="预约视图"><button type="button" :aria-pressed="mode === 'month'" @click="changeMode('month')">月</button><button type="button" :aria-pressed="mode === 'week'" @click="changeMode('week')">周</button></div>
           <button class="nav-button" type="button" :aria-label="mode === 'month' ? '上个月' : '上一周'" @click="select(moveCalendar(selectedDate, mode, -1))">‹</button>
           <strong class="calendar-period">{{ heading }}</strong>
           <button class="nav-button" type="button" :aria-label="mode === 'month' ? '下个月' : '下一周'" @click="select(moveCalendar(selectedDate, mode, 1))">›</button>
@@ -55,7 +56,7 @@ function changeMode(next: CalendarMode) {
       </header>
       <div class="calendar-options">
         <div class="calendar-layers" role="group" aria-label="安排类型"><label v-for="type in scheduleTypes" :key="type" class="legend" :class="type"><input v-model="types" type="checkbox" :value="type">{{ scheduleLabels[type] }}</label></div>
-        <label class="calendar-search"><span class="sr-only">搜索当前日历</span><input v-model="keyword" type="search" maxlength="128" placeholder="柜号、车次号、仓库" aria-label="搜索当前日历"></label>
+        <label class="calendar-search"><span class="sr-only">搜索当前日历</span><input class="workbench-input" v-model="keyword" type="search" maxlength="128" placeholder="柜号、车次号、仓库" aria-label="搜索当前日历"></label>
         <button class="undated-button" type="button" :aria-pressed="undated" @click="undated = !undated">未定日期 {{ grouped.get('undated')?.length || 0 }}</button>
       </div>
       <div class="weekdays"><span v-for="day in ['周一', '周二', '周三', '周四', '周五', '周六', '周日']" :key="day">{{ day }}</span></div>
@@ -68,7 +69,7 @@ function changeMode(next: CalendarMode) {
         </button>
       </div>
     </div>
-    <aside class="calendar-detail" aria-label="当天安排">
+    <aside class="calendar-detail workbench-panel is-flush" aria-label="当天安排">
       <header><strong>{{ undated ? '未定日期' : selectedDate }}</strong><p v-if="loading">正在读取安排…</p><p v-else>{{ incomplete ? '当前已加载' : undated ? '共有' : '当天共有' }} <b>{{ selectedEvents.length }}</b> 项安排<span v-if="incomplete">（部分数据不可用）</span></p></header>
       <div class="detail-events" aria-live="polite">
         <p v-if="!selectedEvents.length && !loading" class="empty-day">{{ incomplete ? '已加载数据中没有安排，请先处理上方数据提示。' : undated ? '没有未定日期的安排' : '当天暂无安排' }}</p>
@@ -84,35 +85,35 @@ function changeMode(next: CalendarMode) {
 </template>
 <style scoped>
 .appointment-calendar { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--admin-space-5); color: var(--el-text-color-regular); }
-.calendar-main, .calendar-detail { background: var(--admin-surface); border: 1px solid #e4e9f2; border-radius: 10px; overflow: hidden; }
-.calendar-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--admin-space-3); padding: var(--admin-space-5); border-bottom: 1px solid #edf0f6; }
+.calendar-main, .calendar-detail {    overflow: hidden; }
+.calendar-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--admin-space-3); padding: var(--admin-space-5); border-bottom: 1px solid var(--workbench-border); }
 .calendar-label, .calendar-controls { display: flex; align-items: center; gap: var(--admin-space-3); }
-.calendar-label > svg { color: #617ce9; }.calendar-label > strong { font-size: var(--admin-font-section); }
+.calendar-label > svg { color: var(--workbench-primary); }.calendar-label > strong { font-size: var(--admin-font-section); }
 .calendar-options, .calendar-layers { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }
-.calendar-options { padding: var(--admin-space-3) var(--admin-space-5); border-bottom: 1px solid #edf0f6; }
+.calendar-options { padding: var(--admin-space-3) var(--admin-space-5); border-bottom: 1px solid var(--workbench-border); }
 .legend { display: inline-flex; align-items: center; gap: var(--admin-space-1); font-size: var(--admin-font-caption); cursor: pointer; color: var(--event-fg); }.legend input { accent-color: var(--event-fg); }
-.calendar-search { margin-left: auto; }.calendar-search input { box-sizing: border-box; width: 190px; min-height: var(--admin-control-height); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); padding: 0 var(--admin-space-3); font: inherit; }
-.view-toggle { display: flex; border: 1px solid #dbe3ee; border-radius: 6px; padding: 2px; background: #f7f9fc; }
-.view-toggle button, .nav-button, .undated-button { border: 0; border-radius: var(--admin-radius); background: transparent; cursor: pointer; color: var(--el-text-color-regular); min-width: var(--admin-control-height); min-height: var(--admin-control-height); font: inherit; }
-.view-toggle button[aria-pressed='true'], .undated-button[aria-pressed='true'] { background: #fff; color: #4167d8; font-weight: 600; }.nav-button { border: 1px solid #dbe3ee; font-size: 22px; }
+.calendar-search { margin-left: auto; }.calendar-search input {  width: 190px; }
+.view-toggle { display: flex; }
+.nav-button, .undated-button { border: 0; border-radius: var(--admin-radius); background: transparent; cursor: pointer; color: var(--el-text-color-regular); min-width: var(--admin-control-height); min-height: var(--admin-control-height); font: inherit; }
+.undated-button[aria-pressed='true'] { background: var(--workbench-surface); color: var(--workbench-primary); font-weight: 600; }.nav-button { border: 1px solid var(--workbench-border); font-size: 22px; }
 .calendar-period { font-size: var(--admin-font-section); white-space: nowrap; }
-.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.weekdays { text-align: center; color: #8491a5; background: #f8faff; padding: var(--admin-space-3); font-size: var(--admin-font-caption); }
-.calendar-grid { gap: var(--admin-space-2); padding: var(--admin-space-3); background: #fbfcff; }
-.calendar-day { display: flex; flex-direction: column; align-items: stretch; height: 146px; min-width: 0; padding: var(--admin-space-3); border: 1px solid #e5eaf2; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; color: inherit; font: inherit; }
-.calendar-day.outside { background: #f7f8fa; color: #98a2b3; }.calendar-day:hover { border-color: #bac8ed; }.calendar-day.selected { border-color: #617ce9; background: #f5f7ff; }
-button:focus-visible, input:focus-visible { outline: 2px solid #4167d8; outline-offset: 2px; }
+.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.weekdays { text-align: center; color: var(--workbench-muted); background: var(--workbench-surface-soft); padding: var(--admin-space-3); font-size: var(--admin-font-caption); }
+.calendar-grid { gap: var(--admin-space-2); padding: var(--admin-space-3); background: var(--workbench-surface-soft); }
+.calendar-day { display: flex; flex-direction: column; align-items: stretch; height: 146px; min-width: 0; padding: var(--admin-space-3); border: 1px solid var(--workbench-border); border-radius: 8px; background: var(--workbench-surface); text-align: left; cursor: pointer; color: inherit; font: inherit; }
+.calendar-day.outside { background: var(--workbench-surface-soft); color: var(--workbench-muted); }.calendar-day:hover { border-color: var(--workbench-accent-border); }.calendar-day.selected { border-color: var(--workbench-primary); background: var(--workbench-accent-soft); }
+button:focus-visible, input:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: 2px; }
 .day-number { font-size: var(--admin-font-caption); font-weight: 600; }.day-events { display: flex; flex-direction: column; gap: var(--admin-space-1); margin-top: var(--admin-space-2); }
 .event-chip { display: block; padding: 2px 6px; line-height: 18px; border-radius: var(--admin-radius); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--admin-font-caption); }
 .arrival { --event-bg: #edf3ff; --event-fg: #3765d4; }.warehouse { --event-bg: #e8f8f1; --event-fg: #18845f; }.return { --event-bg: #fff4e3; --event-fg: #995a10; }.dispatch { --event-bg: #f2edfa; --event-fg: #725199; }
 .event-chip, .event-type { background: var(--event-bg); color: var(--event-fg); }.event-more, .empty-day { color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); }
-.week-grid .calendar-day { height: 270px; }.calendar-detail > header { padding: var(--admin-space-5); border-bottom: 1px solid #edf0f6; }.calendar-detail > header > strong { font-size: var(--admin-font-title); }
-.calendar-detail header p { margin: var(--admin-space-2) 0 0; font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }.calendar-detail header b { color: #617ce9; }
+.week-grid .calendar-day { height: 270px; }.calendar-detail > header { padding: var(--admin-space-5); border-bottom: 1px solid var(--workbench-border); }.calendar-detail > header > strong { font-size: var(--admin-font-title); }
+.calendar-detail header p { margin: var(--admin-space-2) 0 0; font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }.calendar-detail header b { color: var(--workbench-primary); }
 .detail-events { padding: var(--admin-space-5); max-height: calc(100dvh - 260px); overflow-y: auto; }
-.detail-event + .detail-event { border-top: 1px solid #e4e9f2; margin-top: var(--admin-space-5); padding-top: var(--admin-space-5); }
+.detail-event + .detail-event { border-top: 1px solid var(--workbench-border); margin-top: var(--admin-space-5); padding-top: var(--admin-space-5); }
 .event-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--admin-space-3); font-size: var(--admin-font-caption); }.event-type { padding: var(--admin-space-2) var(--admin-space-3); border-radius: var(--admin-radius); }
 .detail-event h3 { font-size: var(--admin-font-section); margin: var(--admin-space-3) 0; overflow-wrap: anywhere; }.event-subtitle { color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); overflow-wrap: anywhere; }
 .detail-event dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-3) var(--admin-space-5); margin: var(--admin-space-3) 0; }.detail-event dt { font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }.detail-event dd { margin: var(--admin-space-1) 0 0; font-size: var(--admin-font-body); overflow-wrap: anywhere; }
-.detail-event footer { display: flex; justify-content: flex-end; gap: var(--admin-space-3); border-top: 1px solid #edf0f6; padding-top: var(--admin-space-3); }.detail-event footer :deep(.el-button + .el-button) { margin-left: 0; }
+.detail-event footer { display: flex; justify-content: flex-end; gap: var(--admin-space-3); border-top: 1px solid var(--workbench-border); padding-top: var(--admin-space-3); }.detail-event footer :deep(.el-button + .el-button) { margin-left: 0; }
 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 @media (max-width: 1100px) { .appointment-calendar { grid-template-columns: minmax(0, 1fr); } }
 </style>

src/modules/appointment-calendar/AppointmentCalendarView.test.ts

@@ -1,3 +1,4 @@
+import { DatePickerStub, TimePickerStub } from './temporal-picker.test-support'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { onBeforeRouteLeave } from 'vue-router'
@@ -17,6 +18,7 @@ const warehouse: WarehouseArrival = { sourceContainerBookingId: '1', containerNo
 const row: ScheduleEvent = { key: 'warehouse-1', type: 'warehouse', date: '2026-10-21', time: '', title: 'TEST-CONT 计划到仓', fields: [], warehouse, canEdit: true }
 export function renderSchedule() {
   return mount(AppointmentCalendarView, { global: { stubs: {
+    ElDatePicker: DatePickerStub, ElTimePicker: TimePickerStub,
     AdminPage: { template: '<main><slot /></main>' },
     AppointmentCalendarPanel: { name: 'AppointmentCalendarPanel', props: ['events', 'loading', 'incomplete', 'initialDate', 'initialMode', 'canCreate'], template: '<section data-calendar />' },
     AppDialog: { name: 'AppDialog', props: ['modelValue', 'beforeClose', 'confirmDisabled', 'confirmLoading'], emits: ['confirm'], template: '<section v-if="modelValue" data-dialog><slot /><button data-save :disabled="confirmDisabled" @click="$emit(\'confirm\')">保存</button><button data-close @click="beforeClose(() => {})">关闭</button></section>' },
@@ -109,7 +111,7 @@ describe('simplified appointment entry', () => {
     vi.mocked(saveWarehouseArrival).mockRejectedValueOnce(new Error('network interrupted')).mockResolvedValueOnce({})
     const wrapper = renderSchedule(); await flushPromises()
     wrapper.getComponent({ name: 'AppointmentCalendarPanel' }).vm.$emit('edit', row); await flushPromises()
-    await wrapper.get('input[type="datetime-local"]').setValue('2026-10-22T09:30')
+    await wrapper.get('input[data-temporal-picker]').setValue('2026-10-22T09:30')
     await wrapper.get('[data-save]').trigger('click'); await flushPromises()
     expect(wrapper.text()).toContain('提交结果尚未确认')
     expect(wrapper.get('input').attributes('disabled')).toBeDefined()

src/modules/appointment-calendar/AppointmentCalendarView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
 import { computed, defineAsyncComponent, onActivated, onDeactivated, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
@@ -128,7 +129,7 @@ async function canLeave() {
   if (saving.value || unknownResult.value) return false
   for (const guard of guards) if (!await guard()) return false
   if (editor.value && plannedAt.value !== originalAt.value) {
-    try { await ElMessageBox.confirm('计划到仓尚未保存，确定放弃本次修改？', '未保存修改', { type: 'warning', customClass: 'admin-density-confirm' }) }
+    try { await ElMessageBox.confirm('计划到仓尚未保存，确定放弃本次修改？', '未保存修改', { type: 'warning', customClass: 'admin-density-confirm admin-workbench is-dialog' }) }
     catch { return false }
   }
   return true
@@ -169,22 +170,22 @@ onDeactivated(() => { active.value = false; ++generation; controller?.abort() })
 onBeforeUnmount(() => { ++generation; controller?.abort() })
 </script>
 <template>
-  <AdminPage class="admin-density appointment-schedule" spacing="compact">
+  <AdminPage class="admin-density appointment-schedule admin-workbench" spacing="compact">
     <LoadErrorState v-for="error in errors" :key="error.title" :title="error.title" :message="error.details.message" :loading="loading" @retry="load()"><template #details><ApiErrorMeta :details="error.details" /></template></LoadErrorState>
     <p v-for="notice in notices" :key="notice" role="status" class="data-notice">{{ notice }}</p>
     <AppointmentCalendarPanel :events="events" :loading="loading" :incomplete="incomplete" :initial-date="selectedDate" :initial-mode="mode" :can-create="canCreate" @create="openCreate" @range="load" @select="select" @open="openSource" @edit="edit" />
-    <AppDialog v-if="active && creating" :model-value="true" title="新增FBA送仓预约" class="admin-density-dialog admin-density business-dialog" width="1080px" :show-footer="false" :before-close="closeCreate" :close-on-click-modal="true" append-to-body fullscreenable>
+    <AppDialog v-if="active && creating" :model-value="true" title="新增FBA送仓预约" class="admin-density-dialog admin-density business-dialog admin-workbench is-dialog" width="1080px" :show-footer="false" :before-close="closeCreate" :close-on-click-modal="true" append-to-body fullscreenable>
       <AppointmentCreatePanel :can-write="canCreate" :can-leave="canLeave" @created="load()" />
     </AppDialog>
-    <AppDialog v-if="active" :model-value="!!editor" title="调整计划到仓" class="admin-density-dialog" width="520px" fullscreenable :confirm-loading="saving" :confirm-disabled="!plannedAt || conflict" :before-close="closeEditor" :confirm-text="unknownResult ? '重试确认保存结果' : '保存'" @confirm="save">
+    <AppDialog v-if="active" :model-value="!!editor" title="调整计划到仓" class="admin-density-dialog admin-workbench is-dialog" width="520px" fullscreenable :confirm-loading="saving" :confirm-disabled="!plannedAt || conflict" :before-close="closeEditor" :confirm-text="unknownResult ? '重试确认保存结果' : '保存'" @confirm="save">
       <div v-if="editor" class="density-dialog-sections">
         <section class="density-dialog-section" data-tone="source" aria-label="到仓业务信息">
           <table class="density-table"><tbody><tr><th scope="row">业务</th><td>{{ editor.title }}</td></tr></tbody></table>
         </section>
 
         <section class="density-dialog-section" data-tone="work" aria-label="调整到仓时间">
-          <el-form class="density-form" label-position="left" label-width="110px" :disabled="saving || unknownResult">
-            <table class="density-table density-table--editable"><tbody><tr><td><el-form-item label="计划到仓时间" required><template #label><span>计划到仓时间<InlineHelp title="到仓时间说明"><p>自动计划为到港日期加2个自然日；人工保存后优先使用人工时间。填写接仓地点当地时间。</p></InlineHelp></span></template><el-input v-model="plannedAt" type="datetime-local" :disabled="saving || unknownResult" required aria-label="计划到仓时间" placeholder="接仓地点当地时间" /></el-form-item></td></tr></tbody></table>
+          <el-form class="density-form" label-position="left" label-width="150px" :disabled="saving || unknownResult">
+            <table class="density-table density-table--editable"><tbody><tr><td><el-form-item label="计划到仓时间" required><template #label>计划到仓时间<InlineHelp title="到仓时间说明"><p>自动计划为到港日期加2个自然日；人工保存后优先使用人工时间。填写接仓地点当地时间。</p></InlineHelp></template><el-date-picker v-model="plannedAt" type="datetime" :disabled="saving || unknownResult" required aria-label="计划到仓时间" placeholder="接仓地点当地时间" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DDTHH:mm" clearable /></el-form-item></td></tr></tbody></table>
           </el-form>
         </section>
         <p v-if="unknownResult" role="status">上次提交结果尚未确认，请使用原请求重试，避免重复修改。</p>
@@ -192,7 +193,7 @@ onBeforeUnmount(() => { ++generation; controller?.abort() })
         <p v-if="conflict" role="status">重试将重新读取当前资格和版本并保留输入，核对后再次点击保存。</p>
       </div>
     </AppDialog>
-    <AppDialog v-if="active && (workKey || sourceLink)" :model-value="true" title="原业务预约办理" class="admin-density-dialog admin-density business-dialog" width="min(1120px, calc(100vw - 48px))" fullscreenable append-to-body :show-footer="false" :before-close="closeBusiness" :close-on-click-modal="true">
+    <AppDialog v-if="active && (workKey || sourceLink)" :model-value="true" title="原业务预约办理" class="admin-density-dialog admin-density business-dialog admin-workbench is-dialog" width="min(1120px, calc(100vw - 48px))" fullscreenable append-to-body :show-footer="false" :before-close="closeBusiness" :close-on-click-modal="true">
       <el-button v-if="origins.length" link @click="backWork">返回原事项</el-button>
       <WorkDetailPanel v-if="workKey" :key="workKey" :item-key="workKey" :initial-action="initialAction" :can-leave="canLeave" @open="openWork" @external="external" @saved="load()" @updated="load()" @container="id => external(`/container-loading/overseas/${encodeURIComponent(id)}`)" />
       <SourceAppointmentPanel v-else-if="sourceLink" :key="JSON.stringify(sourceLink)" :source="sourceLink" :can-leave="canLeave" @updated="load()" />

src/modules/appointment-calendar/AppointmentCreatePanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
@@ -144,7 +145,7 @@ onBeforeUnmount(() => { ++generation; ++selectionGeneration; ++destinationsReque
     </template>
     <template v-else>
       <section class="density-dialog-section" data-tone="source" aria-label="选择预约货物">
-      <DataTable :data="rows" :columns="columns" :page="page" :page-size="20" :page-sizes="[20]" :total="total" :loading="loading" :results-visible="!error" :row-key="key" max-height="" empty-text="暂无可预约货物" @update:page="load($event)">
+      <div class="workbench-table"><DataTable :data="rows" :columns="columns" :page="page" :page-size="20" :page-sizes="[20]" :total="total" :loading="loading" :results-visible="!error" :row-key="key" max-height="" empty-text="暂无可预约货物" @update:page="load($event)">
         <template #filters><QueryToolbar v-model="query" ariaLabel="新增预约货物查询" :fields="fields" :loading="loading || resolving" @search="search" /></template>
         <template #toolbar-actions><InlineHelp title="选货说明"><p>选择需要送往FBA的已有货物；同一起运仓、同一目的仓可合并多个客户的货物。跨页选择会保留。</p></InlineHelp><el-button :disabled="!selectedRows.length || resolving" @click="selected = {}; selectionError = null">清空选择</el-button><el-button type="primary" :disabled="!canWrite || !selectedRows.length || loading || !!error" :loading="resolving" @click="prepare">下一步：填写预约（{{ selectedRows.length }}）</el-button></template>
         <template #pagination-left>已选 {{ selectedRows.length }}/100 票</template>
@@ -153,7 +154,7 @@ onBeforeUnmount(() => { ++generation; ++selectionGeneration; ++destinationsReque
         <template #eligibility="{ row }">{{ reason(row as PlanningCargo) || '可选择' }}</template>
         <template #customer="{ row }"><LineClampText :content="row.customerName" /></template>
         <template #origin="{ row }"><LineClampText :content="row.originWarehouseName" /></template>
-      </DataTable>
+      </DataTable></div>
       </section>
     </template>
   </section>

src/modules/appointment-calendar/PROTOTYPE_MATRIX.md

@@ -1,5 +1,45 @@
 # 预约工作日历逐操作矩阵
 
+## 2026-10-20 日期时间组件统一（当前确认）
+
+依据：用户截图 `codex-clipboard-ed442cca-1bd2-43d3-87e8-6671e5bcc508.png`，以及随后明确要求排查并优化同类原生日期输入。保留现有业务入口与承载方式，使用 Element Plus 日期/时间控件及已有公共表单样式。
+
+| 页面/组件 | 操作与承载 | 本次调整 | 验收 |
+|---|---|---|---|
+| AppointmentCalendarView | 调整计划到仓，原520px居中弹框及全屏能力 | 1处日期时间选择器；分钟精度沿用原请求格式；标签宽度150px，说明图标与标签并排，控件沿用公共满宽样式 | 自动检查通过；待人工1920×1080、100%截图确认 |
+| WorkReceivingPanel | 原业务深链中的客户计划、后送与跟进，原表单 | 5处日期/日期时间输入；日期与秒精度的当地时间分别保存；调整开始/结束时段后仍清除原时差依据 | 自动检查通过；待人工截图确认 |
+| WorkCommandForm | 跟进、收货要求，原表单 | 3处日期、2处时间输入；跨日结束日期显式保留；不推断次日、不转换地点时区 | 自动检查通过；待人工截图确认 |
+| AppointmentBatchForm | 原分批/合并表单 | 2处可空目标日期，保留跨批分配、版本、幂等与原写权限 | 自动检查通过；待人工截图确认 |
+
+共4组件13处。日期使用 `el-date-picker`，时间使用 `el-time-picker`；保留原权限、处理中及未知结果锁定、清空与未保存保护。新增控件显式接收原禁用条件，宽度复用 `density-form`，不新增全局日期控件外观规则。
+
+自动验证：受影响7个测试文件88项通过；类型检查与生产构建通过。全量回归执行464个文件4203项，4201项通过，两项旧公共样式断言（标签宽度、追加样式类）更新后，该样式文件65项全部复验通过。后台业务模板原生日期/时间控件残留检查通过。本轮未部署TEST，未进行真实HTTP或人工页面截图验收。
+
+## 2026-10-20 蓝白工作台续批（写权已协调）
+
+本次续批修改文件（相对本模块）：
+
+- `AppointmentBatchForm.vue`
+- `AppointmentCalendarPanel.vue`
+- `AppointmentCalendarView.vue`
+- `AppointmentCreatePanel.vue`
+- `ReceivingScope.vue`
+- `SourceAppointmentPanel.vue`
+- `TripAppointmentPanel.vue`
+- `WorkDetailPanel.vue`
+- `WorkReceivingPanel.vue`
+
+总控已核实预约交付及排车只读预审状态，本轮授权续接展示；逐文件按当前内容快照核对后写入。依据蓝白样板与本矩阵既有逐操作承载。
+
+| 实际入口 | 操作/承载与冻结结论 | 验收 |
+|---|---|---|
+| 预约日历主页面及原业务深链的实际表单、工作详情；保留四类、月周日期与原弹框承载 | 只接入主题、公共列表/面板和局部旧外观清理；尺寸、字段、事件、权限、请求及业务计算保留 | 续批定向回归通过；待人工1920×1080、100%截图确认 |
+
+
+续批验证：81个文件671项定向回归首轮669项通过，出车图表两项旧颜色期望按公共主题更新后，所属1文件5项复验通过；50个修改Vue模板与局部样式编译通过。写前、写后快照核对未发现外部漂移；所有事件/表单绑定、非图表业务脚本保留，图表仅接入配色/字体/tooltip主题。未改API、日期计算、driver、权限、状态与路由。类型检查、全量测试和构建由总控统一执行；截图均待人工确认。
+
+当前无正式入口引用的11个旧面板保留原样：AppointmentCancellationDialog、AppointmentCancellationHistory、AppointmentCancellationRecords、AppointmentCargoPanel、AppointmentCargoTabs、AppointmentContainerPanel、AppointmentExternalCandidates、AppointmentFollowupDialog、AppointmentImpactDialog、AppointmentInboundCodes、WorkCalendarPanel。不是新增或恢复入口；TripAppointmentPanel仍由正式车次详情引用，已纳入本次续批。
+
 ## 2026-10-20 排车入口收敛
 
 用户指出预约日历仍跳旧车次详情。排车标签改用服务端关联真实整车主单返回的排车单号，打开 `/overseas-warehouse/dispatches/:dispatchNo` 独立排车详情；返回按钮显示“返回预约日历”并保留原日期与月/周视图。无合法日历返回参数时继续走原列表或拼车登记返回逻辑，外部返回地址拒绝。读取权限与排车列表一致，不要求旧车次列表权限；独立旧车次、取消排车主单不进入活动日历，不按TR号猜DS号。原四类、地点日期和实际发车归属规则保持。自动检查与发布/真实HTTP分别记录，1920×1080、100%人工操作截图待确认。
@@ -221,3 +261,5 @@ V13 日历布局：按已确认定高要求，月日格固定 146px，周日格
 | 刷新后沿用已有FBA排车单 | 当前对话指定沿用原DS；`WorkExistingDispatchForm.vue` 的既有原排车列表和 `TripPreparationDialog` | 保留事项弹框，显示本批原排车单；继续用原安排车次弹框，不重复选托盘或创建 | `WorkDispatchForm.vue` 先读当前批次 `receiving.transport`，再按原排车单 `appointmentBatches` 校验批次/客户；已绑定车次直接查看，关系读取失败不显示创建入口；剩余实物仅显式选择后读取。待人工截图确认 |
 
 视觉目标：1920×1080、100%缩放，待人工截图确认。单元测试与类型检查单独报告，不代表真实接口或页面验收通过。原业务跳转缺少的业务号/客户范围在协作交接中列明，不由前端补造；工作 Slot 与原预约编辑均保留完整跨日时间。原业务页面返回入口只接受预约工作页，并保留原事项、前置事项、筛选及页码。
+
+2026-10-20 用户追加整页白底修正：整页主要列表外层workbench-table及整页详情workbench-panel显式增加is-page-surface，由公共样式移除最外圈border/radius/shadow。内部指标、图表、并列卡片、子表格线、弹框和日历左右独立面板保留；本批不改padding、脚本或承载。预约页面没有额外整页面板，当前双面板结构保持，不给左右面板增加该modifier。

src/modules/appointment-calendar/ReceivingScope.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import type { ReceivingMember, ReceivingTransport } from './receivingApi'
 defineProps<{ members: ReceivingMember[]; transport?: ReceivingTransport }>()
 </script>
@@ -12,4 +13,4 @@ defineProps<{ members: ReceivingMember[]; transport?: ReceivingTransport }>()
     <template v-if="transport"><p v-for="(vehicle, index) in transport.vehicles" :key="index">车辆：{{ vehicle.tripNo || '车次未关联' }} · 排车单 {{ vehicle.dispatchNo || '未关联' }} · {{ vehicle.packageCount }} 箱</p><p v-for="reason in transport.blockReasons" :key="reason" role="status">{{ reason }}</p><p v-if="!transport.vehicles.length">当前未关联车辆。</p></template>
   </div>
 </template>
-<style scoped>.receiving-member { border-bottom: 1px solid var(--cc-border); padding-block: var(--admin-space-3); }</style>
+<style scoped>.receiving-member { border-bottom: 1px solid var(--workbench-border); padding-block: var(--admin-space-3); }</style>

src/modules/appointment-calendar/SourceAppointmentPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, ref } from 'vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -38,4 +39,4 @@ onMounted(load)
     </template>
   </section>
 </template>
-<style scoped>.source-appointment { display: flex; flex-wrap: wrap; align-items: center; gap: var(--admin-space-3); padding-block: var(--admin-space-3); border-bottom: 1px solid var(--cc-border); }</style>
+<style scoped>.source-appointment { display: flex; flex-wrap: wrap; align-items: center; gap: var(--admin-space-3); padding-block: var(--admin-space-3); border-bottom: 1px solid var(--workbench-border); }</style>

src/modules/appointment-calendar/TripAppointmentPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, onBeforeUnmount, provide, ref, watch } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -90,7 +91,7 @@ onBeforeUnmount(() => { ++generation })
       </template>
     </article>
     <p v-if="readable && !loading && !cards.length">当前没有可读取的预约批次引用。</p>
-    <AppDialog :model-value="!!selected" title="客户预约与后送安排" width="min(1120px, calc(100vw - 48px))" class="admin-density-dialog admin-density" fullscreenable append-to-body :show-footer="false" :before-close="close" :close-on-click-modal="true" :close-on-press-escape="true" destroy-on-close>
+    <AppDialog :model-value="!!selected" title="客户预约与后送安排" width="min(1120px, calc(100vw - 48px))" class="admin-density-dialog admin-density admin-workbench is-dialog" fullscreenable append-to-body :show-footer="false" :before-close="close" :close-on-click-modal="true" :close-on-press-escape="true" destroy-on-close>
       <template v-if="selected">
         <WorkReceivingPanel v-if="mode === 'receiving'" :key="`${selected.batchKey}:${selected.customerId}`" :batch-key="selected.batchKey" :initial-customer-id="selected.customerId" :can-write="canWrite" @updated="updated" @appointment="openAppointment" @batch="key => open(key, selected!.customerId, 'batch')" @external="path => emit('external', path)" />
         <AppointmentBatchForm v-else-if="mode === 'batch'" :key="selected.batchKey" :batch-key="selected.batchKey" @updated="updated" @appointment="openAppointment" />
@@ -100,4 +101,4 @@ onBeforeUnmount(() => { ++generation })
     </AppDialog>
   </section>
 </template>
-<style scoped>.trip-customer-card { padding-block: var(--admin-space-4); border-bottom: 1px solid var(--cc-border); }</style>
+<style scoped>.trip-customer-card { padding-block: var(--admin-space-4); border-bottom: 1px solid var(--workbench-border); }</style>

src/modules/appointment-calendar/WorkCommandForm.test.ts

@@ -1,3 +1,4 @@
+import { DatePickerStub, TimePickerStub } from './temporal-picker.test-support'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, expect, it, vi } from 'vitest'
 import WorkCommandForm from './WorkCommandForm.vue'
@@ -13,6 +14,7 @@ vi.mock('./workApi', async original => ({ ...await original<typeof import('./wor
 let guard: LeaveGuard
 function render(action: WorkAction = followAction, detail = workDetail({ item: workItem({ allowedActions: [action], nextAction: action }) })) {
   return mount(WorkCommandForm, { props: { detail, action, refreshing: false }, global: { provide: { 'appointment-work-leave-guard': (value: LeaveGuard) => { guard = value; return () => undefined } }, stubs: {
+    ElDatePicker: DatePickerStub, ElTimePicker: TimePickerStub,
     ElButton: { props: ['nativeType', 'disabled'], template: '<button :type="nativeType" :disabled="disabled"><slot /></button>' },
     LoadErrorState: { props: ['message'], template: '<div role="alert">{{ message }}</div>' }, ApiErrorMeta: true,
   } } })
@@ -79,7 +81,7 @@ const requirementAction: WorkAction = { code: 'SAVE_REQUIREMENT', label: '登记
 it('preserves an explicit cross-day local interval in the requirement request', async () => {
   const wrapper = render(requirementAction)
   await wrapper.findAll('textarea')[1]!.setValue('跨日收货窗口')
-  const dates = wrapper.findAll('input[type=date]'), times = wrapper.findAll('input[type=time]')
+  const dates = wrapper.findAll('input[data-picker-kind=date]'), times = wrapper.findAll('input[data-picker-kind=time]')
   await dates[0]!.setValue('2026-10-15'); await times[0]!.setValue('23:00')
   await dates[1]!.setValue('2026-10-16'); await times[1]!.setValue('01:00')
   await wrapper.get('form').trigger('submit'); await flushPromises()
@@ -93,7 +95,7 @@ it.each([
 ])('rejects incomplete or non-increasing interval %s %s %s without inferring a next day', async (endDate, endTime, startTime) => {
   const wrapper = render(requirementAction)
   await wrapper.findAll('textarea')[1]!.setValue('核对时间')
-  const dates = wrapper.findAll('input[type=date]'), times = wrapper.findAll('input[type=time]')
+  const dates = wrapper.findAll('input[data-picker-kind=date]'), times = wrapper.findAll('input[data-picker-kind=time]')
   await dates[0]!.setValue('2026-10-15'); await times[0]!.setValue(startTime)
   await dates[1]!.setValue(endDate); await times[1]!.setValue(endTime)
   await wrapper.get('form').trigger('submit'); await flushPromises()
@@ -102,7 +104,7 @@ it.each([
 it('saves a date-only requirement with all time fields null', async () => {
   const wrapper = render(requirementAction)
   await wrapper.findAll('textarea')[1]!.setValue('具体时段待回复')
-  await wrapper.findAll('input[type=date]')[0]!.setValue('2026-10-15')
+  await wrapper.findAll('input[data-picker-kind=date]')[0]!.setValue('2026-10-15')
   await wrapper.get('form').trigger('submit'); await flushPromises()
   expect(submitWorkCommand).toHaveBeenCalledWith('work-delivery-1', expect.objectContaining({ payload: expect.objectContaining({ target: { date: '2026-10-15', startTime: null, endDate: null, endTime: null, timezone: 'America/Los_Angeles' } }) }))
   wrapper.unmount()

src/modules/appointment-calendar/WorkCommandForm.vue

@@ -92,9 +92,9 @@ async function save() {
     <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>下次跟进日期（可留空）<input v-model="form.followupDate" type="date"></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>目标日期（可暂不填）<input v-model="form.date" type="date"></label><div class="time-fields"><label>开始时段（可留空）<input v-model="form.startTime" type="time"></label><label>结束日期（可留空）<input v-model="form.endDate" type="date"></label><label>结束时段（可留空）<input v-model="form.endTime" type="time"></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 === '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>
     </fieldset>

src/modules/appointment-calendar/WorkDetailPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
@@ -180,19 +181,19 @@ onBeforeUnmount(() => { ++request; controller?.abort() })
 .container-links, .more-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }
 .container-links { margin-top: var(--admin-space-3); }
 .container-links > span { color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); }
-.attention-panel { margin-top: var(--admin-space-5); padding: var(--admin-space-3) var(--admin-space-5); border-left: 3px solid var(--el-color-warning); background: var(--el-color-warning-light-9); color: var(--el-color-warning-dark-2); }
+.attention-panel { margin-top: var(--admin-space-5); padding: var(--admin-space-3) var(--admin-space-5); border: 1px solid var(--el-color-warning-light-7); border-radius: var(--admin-dialog-section-radius); background: var(--el-color-warning-light-9); color: var(--el-color-warning-dark-2); }
 .attention-panel h4, .current-work > h4 { margin: 0 0 var(--admin-space-1); font-size: var(--admin-font-section); }
 .attention-panel ul { margin: 0; padding-left: var(--admin-space-6); font-size: var(--admin-font-caption); }
-.current-work { margin-top: var(--admin-space-5); padding-block: var(--admin-space-5); border-top: 1px solid var(--cc-border); }
+.current-work { margin-top: var(--admin-space-5); padding-block: var(--admin-space-5); border-top: 1px solid var(--workbench-border); }
 .current-work > p { margin: var(--admin-space-2) 0; }
 .completion-summary { color: var(--el-color-success-dark-2); }
-.detail-records { border-top: 1px solid var(--cc-border); }
-.detail-records > details { border-bottom: 1px solid var(--cc-border); }
+.detail-records { border-top: 1px solid var(--workbench-border); }
+.detail-records > details { border-bottom: 1px solid var(--workbench-border); }
 summary { cursor: pointer; padding-block: var(--admin-space-3); font-weight: 600; }
 summary:focus-visible { outline: 2px solid var(--el-color-primary); outline-offset: -2px; }
 .detail-records p { margin: var(--admin-space-1) 0; }
 .related-row, .history-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--admin-space-3); }
-.related-row, .history-entry { border-bottom: 1px solid var(--cc-border); padding-block: var(--admin-space-3); }
+.related-row, .history-entry { border-bottom: 1px solid var(--workbench-border); padding-block: var(--admin-space-3); }
 .related-row:last-child, .history-entry:last-child { border-bottom: 0; }
 .related-row p, .history-entry small, .history-heading time { font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }
 .work-warning { color: var(--el-color-warning-dark-2); }

src/modules/appointment-calendar/WorkReceivingPanel.test.ts

@@ -1,3 +1,4 @@
+import { DatePickerStub, TimePickerStub } from './temporal-picker.test-support'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, expect, it, vi } from 'vitest'
 import { ElMessageBox } from 'element-plus'
@@ -26,6 +27,7 @@ function agreement(status = 'ACTIVE'): api.ReceivingAgreement { return { agreeme
 function pendingChange(): api.ReceivingPending { return { changeKey: 'CHANGE-1', version: 1, status: 'WAITING', intent: { batchKey: 'FBA_APPOINTMENT:1', batchVersion: 3, customerId: 'customer-a', quantities: [{ sourceKey: 'ORDER:1', destinationKey: 'FBA:ONT8', retainedPackages: 0, expectedSourceVersion: 'source-v3', expectedVerificationVersion: 2 }], laterDate: null, ownerId: 'owner-related', nextFollowupDate: '2026-10-21', reason: '本客户后送', transportVersion: 'transport-v1' }, originalMembers: [members()[0]!], originalAgreements: [agreement()], followup: { ownerId: 'owner-related', ownerName: '已核实负责人', nextFollowupDate: '2026-10-21' } } }
 function result(status = 'APPLIED'): api.ReceivingResult { return { changeKey: null, status, batches: [context().batch], agreements: [], steps: [{ step: 'BOOK_RECEIVING', status: 'SUCCESS', targetKey: 'GROUP-1', message: '已保存真实预约' }], nextActions: ['REVIEW_TRANSPORT'] } }
 function render() { return mount(WorkReceivingPanel, { props: { batchKey: 'FBA_APPOINTMENT:1', canWrite: true, owners: [{ id: 'owner-related', name: '关联负责人' }] }, global: { provide: { 'appointment-work-leave-guard': (value: LeaveGuard) => { guard = value; return () => undefined } }, stubs: {
+    ElDatePicker: DatePickerStub, ElTimePicker: TimePickerStub,
   ElButton: { props: ['disabled', 'nativeType'], template: '<button :disabled="disabled" :type="nativeType || \'button\'"><slot /></button>' },
   FbaAppointmentFields: { name: 'FbaAppointmentFields', props: ['model', 'disabled'], template: '<div data-booking-fields />' },
   LoadErrorState: { props: ['message', 'showRetry'], template: '<section role="alert">{{ message }}<button v-if="showRetry !== false" @click="$emit(\'retry\')">重试读取</button></section>' }, ApiErrorMeta: true,

src/modules/appointment-calendar/WorkReceivingPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
@@ -221,7 +222,7 @@ async function save(decision: 'CONFIRM' | 'WITHDRAW' = 'CONFIRM') {
       const command = buildCommand(decision)
       if (command.kind === 'group' && command.request.action === 'CANCEL') {
         confirming.value = true
-        try { await ElMessageBox.confirm('确认取消当前展示的整份预约？货物需求与批次保留，车辆需重新核对。', '取消整份预约', { customClass: 'admin-density-confirm', confirmButtonText: '确认取消', cancelButtonText: '返回核对' }) } catch { return } finally { confirming.value = false }
+        try { await ElMessageBox.confirm('确认取消当前展示的整份预约？货物需求与批次保留，车辆需重新核对。', '取消整份预约', { customClass: 'admin-density-confirm admin-workbench is-dialog', confirmButtonText: '确认取消', cancelButtonText: '返回核对' }) } catch { return } finally { confirming.value = false }
       }
       pending.value = command
     } catch (cause) { saveError.value = { message: cause instanceof Error ? cause.message : '请核对本次范围' }; return }
@@ -264,7 +265,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 @submit.prevent="save()">
+      <form v-else class="density-form" @submit.prevent="save()">
         <fieldset :disabled="locked || !formWritable">
           <template v-if="mode === 'refresh'">
             <h4>{{ customerName(customer) || '—' }} · 核对本客户最新货物资料</h4><p>采用后仅更新本客户的资料快照，本批箱数和其他客户的确认保持不变；保存核实资料不会自动执行采用。</p>
@@ -279,15 +280,15 @@ onMounted(async () => { await load(); if (props.initialCustomerId && customers.v
             <p v-for="item in customerItems" :key="item.id">{{ item.inboundCode || '—' }} · {{ item.packageCount ?? '箱数待核实' }}</p>
             <p>{{ planTimezone || '目的仓时区待核实' }} · 只保存本客户计划，其他客户的确认保持不变。</p>
             <p v-if="!planEligible(customer)" role="status">本客户资格已变化，暂不能保存普通计划，请返回范围概览核对。</p>
-            <label>目标送仓日期<input v-model="planForm.plannedDate" type="date" aria-label="客户计划日期"></label>
-            <label>计划开始时段<input v-model="planForm.plannedAt" @change="planForm.startOffset = ''" type="datetime-local" step="1" aria-label="客户计划开始"></label>
-            <label>计划结束时段<input v-model="planForm.plannedEndAt" @change="planForm.endOffset = ''" type="datetime-local" step="1" aria-label="客户计划结束"></label>
+            <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>
 
           </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>后送目标日期<input v-model="adjustment.laterDate" type="date"></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>下一次跟进日期<input v-model="adjustment.followup" type="date"></label><label>调整原因<textarea v-model="adjustment.reason" maxlength="1000" aria-label="调整原因" /></label><p>保存仅登记待确认变化，原箱数与原确认仍保留，相关发车暂受阻。</p></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="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>

src/modules/appointment-calendar/scheduleApi.test.ts

@@ -0,0 +1,71 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { http } from '@/shared/api/http'
+import { projectContainerSchedule } from './schedule'
+import { getCalendarSources, getWarehouseArrivals } from './scheduleApi'
+
+vi.mock('@/shared/api/http', async original => ({
+  ...await original<typeof import('@/shared/api/http')>(),
+  http: { get: vi.fn(), post: vi.fn() },
+}))
+
+const range = { from: '2026-09-28', to: '2026-11-02' }
+const bookingId = '9007199254740993'
+// 使用真实接口的结构：Long 数量序列化为字符串，空时间字段不输出。
+const wire = {
+  sourceContainerBookingId: bookingId, containerNo: 'CALENDAR-CONT',
+  warehouseName: '接仓仓库', warehouseCode: 'US-W', version: 0, planCount: '0', canEdit: true,
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  vi.mocked(http.get).mockResolvedValue({ code: '200', message: 'OK', data: {
+    containers: [{ containerBookingId: bookingId, cabinetNo: 'D-CALENDAR', containerNo: 'CALENDAR-CONT',
+      vesselName: null, voyageNo: null, destinationPortName: null, destinationWarehouseCode: null,
+      arrivalAt: '2026-10-20T23:00:00', arrivalType: 'ESTIMATED' }],
+    emptyReturns: [], emptyReturnsReadable: true,
+  } })
+})
+
+async function readSchedule(overrides: Record<string, unknown> = {}) {
+  vi.mocked(http.post).mockResolvedValue({ code: '200', message: 'OK', data: [{ ...wire, ...overrides }] })
+  const sources = await getCalendarSources(range)
+  const warehouses = await getWarehouseArrivals(range, [bookingId])
+  return { warehouses, event: projectContainerSchedule(sources, warehouses, range, true).find(row => row.type === 'warehouse') }
+}
+
+describe('warehouse calendar response to schedule', () => {
+  it.each(['0', 0])('uses zero plan count %j to show arrival plus two days without inventing a time', async planCount => {
+    const { warehouses, event } = await readSchedule({ planCount })
+    expect(warehouses[0]).toMatchObject({ sourceContainerBookingId: bookingId, planCount: 0, plannedAt: null, actualAt: null })
+    expect(event).toMatchObject({ date: '2026-10-22', time: '', canEdit: true, subtitle: '到港日期＋2个自然日（默认）' })
+    expect(event?.fields).toContainEqual({ label: '计划到仓', value: '2026-10-22' })
+    expect(event?.fields).toContainEqual({ label: '实际到仓', value: '—' })
+  })
+
+  it('keeps the authoritative frozen plan instead of recalculating from arrival', async () => {
+    const { warehouses, event } = await readSchedule({ planCount: '2', plannedAt: '2026-10-25T09:30:00', canEdit: false })
+    expect(warehouses[0]?.planCount).toBe(2)
+    expect(event).toMatchObject({ date: '2026-10-25', time: '09:30', canEdit: false, subtitle: '已有入库计划，日期已冻结' })
+  })
+
+  it('keeps a manually maintained time when there is no inbound plan', async () => {
+    const { event } = await readSchedule({ version: 1, plannedAt: '2026-10-24T08:00:00' })
+    expect(event).toMatchObject({ date: '2026-10-24', time: '08:00', subtitle: '人工维护' })
+  })
+
+  it('does not calculate a default when existing plans have no unified time', async () => {
+    const { event } = await readSchedule({ planCount: '2', canEdit: false })
+    expect(event?.date).toBeNull()
+  })
+
+  it('keeps conflicting authoritative versions unresolved even with zero plans', async () => {
+    const { event } = await readSchedule({ version: -1, canEdit: false })
+    expect(event).toMatchObject({ date: null, canEdit: false, subtitle: '柜内计划时间不一致，待核实' })
+  })
+
+  it.each([undefined, null, '', 'invalid', '-1', '1.5', '9007199254740992', -1, Infinity])(
+    'rejects invalid or unsafe plan count %j rather than treating it as no plans', async planCount => {
+      await expect(readSchedule({ planCount })).rejects.toThrow('入库计划数量无效')
+    },
+  )
+})

src/modules/appointment-calendar/scheduleApi.ts

@@ -31,15 +31,35 @@ export interface WarehouseArrival {
   canEdit: boolean
 }
 export interface ScheduleRange { from: string; to: string }
+type WarehouseArrivalWire = Omit<WarehouseArrival, 'planCount' | 'plannedAt' | 'actualAt'> & {
+  planCount: string | number
+  plannedAt?: string | null
+  actualAt?: string | null
+}
+
+/** 在接口边界统一长整型数量，未知数量不能被当成零触发默认日期。 */
+function normalizeWarehouseArrival(row: WarehouseArrivalWire): WarehouseArrival {
+  const count = row.planCount
+  if (typeof count !== 'number' && (typeof count !== 'string' || !/^(0|[1-9]\d*)$/.test(count))) {
+    throw new Error('到仓记录的入库计划数量无效，请刷新后重试')
+  }
+  const planCount = Number(count)
+  if (!Number.isSafeInteger(planCount) || planCount < 0) {
+    throw new Error('到仓记录的入库计划数量无效，请刷新后重试')
+  }
+  return { ...row, planCount, plannedAt: row.plannedAt ?? null, actualAt: row.actualAt ?? null }
+}
+
 export async function getCalendarSources(range: ScheduleRange, signal?: AbortSignal) {
   return unwrapApiResponse(await http.get<ApiEnvelope<CalendarSources>, ApiEnvelope<CalendarSources>>(
     '/platform/v1/terminal-drayages/calendar-sources', { params: range, signal },
   ))
 }
 export async function getWarehouseArrivals(range: ScheduleRange, sourceContainerBookingIds: string[], signal?: AbortSignal) {
-  return unwrapApiResponse(await http.post<ApiEnvelope<WarehouseArrival[]>, ApiEnvelope<WarehouseArrival[]>>(
+  const rows = unwrapApiResponse(await http.post<ApiEnvelope<WarehouseArrivalWire[]>, ApiEnvelope<WarehouseArrivalWire[]>>(
     '/platform/v1/last-leg/appointment-calendar/warehouse-arrivals/query', { ...range, sourceContainerBookingIds }, { signal },
   ))
+  return rows.map(normalizeWarehouseArrival)
 }
 export interface WarehouseArrivalChange { estimatedWarehouseArrivalAt: string; expectedVersion: number }
 export async function saveWarehouseArrival(containerId: string, body: WarehouseArrivalChange, key: string) {

src/modules/appointment-calendar/temporal-picker.test-support.ts

@@ -0,0 +1,8 @@
+const input = {
+  props: ['modelValue', 'disabled', 'type', 'format', 'valueFormat'],
+  emits: ['update:modelValue', 'change'],
+  template: `<input data-temporal-picker :data-picker-kind="type || 'time'" :value="modelValue" :disabled="disabled" @input="$emit('update:modelValue', $event.target.value); $emit('change', $event.target.value)">`,
+}
+
+export const DatePickerStub = { name: 'ElDatePicker', ...input }
+export const TimePickerStub = { name: 'ElTimePicker', ...input }

src/modules/appointment-calendar/temporalControls.test.ts

@@ -0,0 +1,36 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { join, relative } from 'node:path'
+import { parse } from 'vue/compiler-sfc'
+import { expect, it } from 'vitest'
+
+/** 持续检查后台业务模板，避免再次用原生日期控件替代 Element 公共控件。 */
+it('uses Element date and time pickers throughout Admin business templates', () => {
+  const root = join(process.cwd(), 'src/modules')
+  const violations: string[] = []
+  function inspect(content: DocumentFragment, file: string) {
+    for (const input of content.querySelectorAll('input, el-input')) {
+      const type = input.getAttribute('type') || ''
+      if (/^(date|time|month|week|datetime-local)$/.test(type)) {
+        violations.push(`${relative(root, file)} ${input.tagName.toLowerCase()} type=${type}`)
+      }
+    }
+    // 条件和插槽模板的内容位于独立的 DocumentFragment 中。
+    for (const template of content.querySelectorAll('template')) inspect(template.content, file)
+  }
+  function visit(directory: string) {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+      const file = join(directory, entry.name)
+      if (entry.isDirectory()) visit(file)
+      else if (entry.name.endsWith('.vue')) {
+        const source = parse(readFileSync(file, 'utf8')).descriptor.template?.content
+        if (source) {
+          const template = document.createElement('template')
+          template.innerHTML = source
+          inspect(template.content, file)
+        }
+      }
+    }
+  }
+  visit(root)
+  expect(violations).toEqual([])
+})