From e404fe10496bce285bd84b87d5048c1a0b7e2f48 Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Sat, 10 Oct 2026 16:08:25 +0800
Subject: [PATCH] fix(appointments): prioritize calendar and collapse data
 notices

---
 .../AppointmentCalendarPanel.vue              | 10 ++++++-
 .../AppointmentCalendarView.test.ts           | 27 ++++++++++--------
 .../AppointmentCalendarView.vue               | 28 +++++++++----------
 .../appointment-calendar/PROTOTYPE_MATRIX.md  |  4 +++
 4 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/src/modules/appointment-calendar/AppointmentCalendarPanel.vue b/src/modules/appointment-calendar/AppointmentCalendarPanel.vue
index ba3eeff9..6e88fc04 100644
--- a/src/modules/appointment-calendar/AppointmentCalendarPanel.vue
+++ b/src/modules/appointment-calendar/AppointmentCalendarPanel.vue
@@ -20,12 +20,13 @@ export interface CalendarEvent {
 }
 
 const props = withDefaults(defineProps<{
+  notices?: string[]
   events: CalendarEvent[]
   loading?: boolean
   incomplete?: boolean
   canCreate?: boolean
   initialDate?: string
-}>(), { loading: false, incomplete: false, canCreate: false, initialDate: '' })
+}>(), { notices: () => [], loading: false, incomplete: false, canCreate: false, initialDate: '' })
 const emit = defineEmits<{
   layers: [layers: { arrivals: boolean; trips: boolean }]
   range: [range: { from: string; to: string }]
@@ -83,6 +84,7 @@ defineExpose({ selectedDate, mode })
           <strong>预约日历</strong>
         </div>
         <div class="calendar-controls">
+          <details v-if="notices.length" class="calendar-data-notices"><summary>数据提示 · {{ notices.length }}</summary><div class="calendar-notice-content" role="status"><p v-for="notice in notices" :key="notice">{{ notice }}</p><slot name="notice-actions" /></div></details>
           <el-button v-if="canCreate" type="primary" :disabled="loading" @click="emit('create', selectedDate)">＋ 新增预约</el-button>
           <div class="view-toggle" role="group" aria-label="预约视图">
             <button type="button" :aria-pressed="mode === 'month'" @click="changeMode('month')">月</button>
@@ -134,6 +136,12 @@ defineExpose({ selectedDate, mode })
 </template>
 
 <style scoped>
+.calendar-data-notices { position: relative; font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }
+.calendar-data-notices summary { cursor: pointer; padding: var(--admin-space-2) var(--admin-space-3); }
+.calendar-notice-content { position: absolute; top: 100%; right: 0; z-index: 5; width: 320px; padding: var(--admin-space-5); border: 1px solid var(--admin-table-border); border-radius: var(--admin-radius); background: var(--admin-surface); box-shadow: var(--el-box-shadow-light); }
+.calendar-notice-content p { margin: 0; line-height: 1.6; }
+.calendar-notice-content p + p { margin-top: var(--admin-space-3); }
+
 .appointment-calendar { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--admin-space-5); color: #344054; }
 .calendar-main, .calendar-detail { background: #fff; 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; }
diff --git a/src/modules/appointment-calendar/AppointmentCalendarView.test.ts b/src/modules/appointment-calendar/AppointmentCalendarView.test.ts
index b94ee0ba..8c85a47c 100644
--- a/src/modules/appointment-calendar/AppointmentCalendarView.test.ts
+++ b/src/modules/appointment-calendar/AppointmentCalendarView.test.ts
@@ -31,7 +31,7 @@ function render(openCalendar = true) {
   const wrapper = mount(AppointmentCalendarView, { global: { directives: { loading: {} }, stubs: {
     AdminPage: { template: '<main><slot /></main>' },
     AppointmentContainerPanel: true,
-    AppointmentCalendarPanel: { name: 'AppointmentCalendarPanel', mounted() { this.$emit('layers', { arrivals: true, trips: true }) }, props: ['events', 'incomplete'], template: '<button data-create @click="$emit(\'create\', \'2026-10-09\')">新增预约</button>' },
+    AppointmentCalendarPanel: { name: 'AppointmentCalendarPanel', mounted() { this.$emit('layers', { arrivals: true, trips: true }) }, props: ['events', 'incomplete', 'notices'], template: '<div><button data-create @click="$emit(\'create\', \'2026-10-09\')">新增预约</button><slot name="notice-actions" /></div>' },
     AppDialog: { props: ['modelValue'], template: '<div v-if="modelValue"><slot /><button data-save @click="$emit(\'confirm\')">保存</button></div>' },
     ElForm: { template: '<form><slot /></form>' },
     ElFormItem: { template: '<label><slot /></label>' },
@@ -61,23 +61,23 @@ describe('appointment calendar data integration', () => {
     vi.mocked(createFbaAppointment).mockResolvedValue({ version: 0, id: '1', appointmentNo: 'APT-AB', plannedDate: '2026-10-09', appointmentAt: null, originWarehouseId: '100', appointmentStatus: 'PENDING', selectedCount: 2, fbaWarehouseCode: 'ONT8', items: [] })
   })
 
-  it('keeps exactly the documented three work views and defaults to the container list without calendar requests', async () => {
+  it('puts calendar first and opens it by default without reloading when switching back', async () => {
     const wrapper = render(false); await flushPromises()
     const tabs = wrapper.get('[aria-label="预约工作视图"]').findAll('button')
-    expect(tabs.map(button => button.text())).toEqual(['提柜与到仓', '送仓与排车', '预约日历'])
+    expect(tabs.map(button => button.text())).toEqual(['预约日历', '提柜与到仓', '送仓与排车'])
     expect(tabs[0]!.attributes('aria-pressed')).toBe('true')
     expect(wrapper.text()).not.toContain('美国预约总览')
-    expect(listFbaAppointmentCalendar).not.toHaveBeenCalled()
-    expect(listArrivalCalendar).not.toHaveBeenCalled()
-    await tabs[2]!.trigger('click'); await flushPromises()
     expect(listFbaAppointmentCalendar).toHaveBeenCalledTimes(1)
-    await tabs[0]!.trigger('click'); await tabs[2]!.trigger('click'); await flushPromises()
+    expect(listArrivalCalendar).toHaveBeenCalledTimes(1)
+    await tabs[1]!.trigger('click'); await flushPromises()
+    expect(listFbaAppointmentCalendar).toHaveBeenCalledTimes(1)
+    await tabs[0]!.trigger('click'); await flushPromises()
     expect(listFbaAppointmentCalendar).toHaveBeenCalledTimes(1)
   })
   it('distinguishes missing country data from truncation instead of suggesting a narrower date range', async () => {
     vi.mocked(listPickupCalendar).mockResolvedValueOnce({ records: [], truncated: false, unclassifiedCount: 74, scopeBasis: 'US_DESTINATION_WAREHOUSE', timeBasis: 'SOURCE_LOCAL_UNSPECIFIED' })
     const wrapper = render(); await flushPromises()
-    expect(wrapper.text()).toContain('74 条提柜记录')
+    expect(wrapper.findComponent({ name: 'AppointmentCalendarPanel' }).props('notices').join(' ')).toContain('74 条提柜记录')
     expect(wrapper.text()).not.toContain('缩小日期范围')
   })
   it('shows the original pickup time once without claiming a port time zone and retains partial-source warnings', async () => {
@@ -86,14 +86,14 @@ describe('appointment calendar data integration', () => {
     const panel=wrapper.findComponent({name:'AppointmentCalendarPanel'})
     expect(panel.props('events')).toEqual([expect.objectContaining({type:'pickup',date:'2026-10-09',time:'11:00',sourcePath:'/container-loading/overseas/123'})])
     expect(panel.props('incomplete')).toBe(true)
-    expect(wrapper.text()).toContain('目的仓国家待核实')
+    expect(wrapper.findComponent({ name: 'AppointmentCalendarPanel' }).props('notices').join(' ')).toContain('目的仓国家待核实')
     expect(listPickupCalendar).toHaveBeenCalledTimes(1)
   })
   it('does not request pickup records without pickup list permission and discloses the omitted source', async () => {
     routing.canPickup=false
     const wrapper=render(); await flushPromises()
     expect(listPickupCalendar).not.toHaveBeenCalled()
-    expect(wrapper.text()).toContain('无提柜查看权限')
+    expect(wrapper.findComponent({ name: 'AppointmentCalendarPanel' }).props('notices').join(' ')).toContain('无提柜查看权限')
     expect(wrapper.findComponent({name:'AppointmentCalendarPanel'}).props('incomplete')).toBe(true)
   })
   it('keeps successful arrival data visible when the pickup source fails', async () => {
@@ -108,13 +108,16 @@ describe('appointment calendar data integration', () => {
     routing.canTrips=false
     const wrapper=render();await flushPromises()
     expect(listTripCalendar).not.toHaveBeenCalled();expect(listArrivalCalendar).toHaveBeenCalledTimes(1)
-    expect(wrapper.text()).toContain('无车次查看权限')
+    expect(wrapper.findComponent({ name: 'AppointmentCalendarPanel' }).props('notices').join(' ')).toContain('无车次查看权限')
   })
   it('keeps unresolved trip origins outside daily slots and clearly labels their UTC source time', async () => {
     vi.mocked(listTripCalendar).mockResolvedValueOnce({records:[],unresolvedRecords:[{sourceType:'TRIP_PLAN',tripNo:'TR-UNKNOWN',status:'PLANNED',originWarehouseId:null,originWarehouseCode:null,originWarehouseName:null,originCountryCode:null,originTimezone:null,originWarehouseStatus:null,plannedDepartureAt:'2026-10-10T12:00:00Z',expectedDriverEndAt:null,departedAt:null,completedAt:null,stops:[],incompleteReasons:['ORIGIN_WAREHOUSE_UNKNOWN']}]})
     const wrapper=render();await flushPromises()
     expect(wrapper.findComponent({name:'AppointmentCalendarPanel'}).props('events')).toEqual([])
-    expect(wrapper.text()).toContain('待核实地点的车次（1）');expect(wrapper.text()).toContain('原计划时间保留 UTC')
+    expect(wrapper.find('.appointment-extra').exists()).toBe(false)
+    expect(wrapper.text()).not.toContain('原计划时间保留 UTC')
+    await wrapper.findAll('button').find(button => button.text() === '查看待核实车次（1）')!.trigger('click')
+    expect(wrapper.text()).toContain('原计划时间保留 UTC')
     expect(listTripCalendar).toHaveBeenCalledTimes(1)
   })
   it('creates one shared appointment for two customers without sending a fabricated header customer', async () => {
diff --git a/src/modules/appointment-calendar/AppointmentCalendarView.vue b/src/modules/appointment-calendar/AppointmentCalendarView.vue
index 2aaafe8d..cb846659 100644
--- a/src/modules/appointment-calendar/AppointmentCalendarView.vue
+++ b/src/modules/appointment-calendar/AppointmentCalendarView.vue
@@ -35,8 +35,8 @@ const selectedSource = ref<PlanningSource | null>(null)
 const linkError = ref<ApiErrorDetails | null>(null)
 const linkLoading = ref(false)
 let linkRequest = 0
-const workView = ref<'calendar' | 'cargo' | 'containers'>('containers')
-const calendarVisited = ref(false)
+const workView = ref<'calendar' | 'cargo' | 'containers'>('calendar')
+const calendarVisited = ref(true)
 const showTripLayer = ref(false)
 const cargoVisited = ref(false)
 watch(workView, value => {
@@ -50,6 +50,7 @@ const pickupNotice = ref('')
 const tripEvents = ref<CalendarEvent[]>([])
 const unresolvedTrips = ref<TripCalendarEntry[]>([])
 const tripNotice = ref('')
+const unresolvedDialogOpen = ref(false)
 const unresolvedPage = ref(1), unresolvedSize = ref(10)
 const unresolvedRows = computed(() => unresolvedTrips.value.slice((unresolvedPage.value - 1) * unresolvedSize.value, unresolvedPage.value * unresolvedSize.value))
 const unresolvedColumns: DataTableColumn[] = [
@@ -155,6 +156,7 @@ const events = computed<CalendarEvent[]>(() => [...arrivals.value.map(arrival =>
 })), ...tripEvents.value])
 
 async function load(nextRange = range.value) {
+  unresolvedDialogOpen.value = false
   range.value = nextRange
   const request = ++calendarRequest
   calendarController?.abort()
@@ -369,7 +371,7 @@ function arrangeLinkedSource() {
 }
 watch(() => [route.query.sourceKey, route.query.customerId, route.query.destinationKey], resolveLink, { immediate: true })
 
-onMounted(() => { if (!access.can(permission.lastMileOrderList)) workView.value = 'calendar' })
+onMounted(() => { void load(); void loadUnscheduled() })
 onBeforeUnmount(() => { ++unscheduledRequest; ++calendarRequest; ++candidateRequest; ++detailRequest; ++warehouseRequest; ++linkRequest; calendarController?.abort() })
 </script>
 
@@ -380,9 +382,9 @@ onBeforeUnmount(() => { ++unscheduledRequest; ++calendarRequest; ++candidateRequ
     <AppointmentFollowupDialog v-if="linkedSource" :source="linkedSource.source" :coverage="linkedSource.coverage" :can-write="access.can('platform:appointment:followup')" :can-arrange="access.can(permission.inboundOrderAppointment)" @arrange="arrangeLinkedSource" @close="linkedSource = null" />
     <div class="appointment-heading">
     <div class="density-status-tabs" role="group" aria-label="预约工作视图">
+      <button type="button" :class="{ 'is-active': workView === 'calendar' }" :aria-pressed="workView === 'calendar'" @click="workView = 'calendar'">预约日历</button>
       <button v-if="access.can(permission.lastMileOrderList)" type="button" :class="{ 'is-active': workView === 'containers' }" :aria-pressed="workView === 'containers'" @click="workView = 'containers'">提柜与到仓</button>
       <button v-if="access.can(permission.lastMileOrderList)" type="button" :class="{ 'is-active': workView === 'cargo' }" :aria-pressed="workView === 'cargo'" @click="workView = 'cargo'">送仓与排车</button>
-      <button type="button" :class="{ 'is-active': workView === 'calendar' }" :aria-pressed="workView === 'calendar'" @click="workView = 'calendar'">预约日历</button>
     </div>
     </div>
     <div v-if="cargoVisited" v-show="workView === 'cargo'"><AppointmentCargoPanel :external-source="selectedSource" @source-accepted="selectedSource = null" @created="load(); loadUnscheduled()" /></div>
@@ -392,18 +394,17 @@ onBeforeUnmount(() => { ++unscheduledRequest; ++calendarRequest; ++candidateRequ
     <LoadErrorState v-for="error in sourceErrors" :key="error.title" :title="error.title" :message="error.details.message" :loading="loading" @retry="load()"><template #details><ApiErrorMeta :details="error.details" /></template></LoadErrorState>
     <LoadErrorState v-if="unscheduledError" title="未定时安排加载失败" :message="unscheduledError.message" @retry="loadUnscheduled" />
     <details v-if="unscheduledTotal" class="appointment-extra"><summary>未定时安排（{{ unscheduledTotal }}）</summary><DataTable v-model:page="unscheduledPage" v-model:page-size="unscheduledSize" :data="unscheduled" :columns="unscheduledColumns" :total="unscheduledTotal" row-key="appointmentNo" @update:page="loadUnscheduled" @update:page-size="unscheduledPage = 1; loadUnscheduled()"><template #actions="{ row }"><el-button @click="openEdit({key: row.appointmentNo})">查看 / 继续</el-button></template></DataTable></details>
-    <details v-if="pickupNotice" class="calendar-notice"><summary>部分提柜记录待核实</summary><p>{{ pickupNotice }}</p></details>
-    <details v-if="showTripLayer && tripNotice" class="calendar-notice"><summary>部分用车计划待核实</summary><p>{{ tripNotice }}</p></details>
-    <details v-if="showTripLayer && unresolvedTrips.length" class="appointment-extra">
-      <summary>待核实地点的车次（{{ unresolvedTrips.length }}）</summary>
-      <p>检索窗口内的车次，尚无法确定当地日期。原计划时间保留 UTC，不用浏览器时区换算。</p>
+    <AppointmentCalendarPanel :notices="[pickupNotice, showTripLayer ? tripNotice : ''].filter(Boolean)" :events="events" :loading="loading" :incomplete="sourceErrors.length > 0 || !!pickupNotice || (showTripLayer && !!tripNotice)" :can-create="access.can(permission.inboundOrderAppointment)" @layers="showTripLayer = $event.trips" @range="load" @create="openCreate" @edit="openEdit" @delete="remove" @open="openSource">
+      <template #notice-actions><el-button v-if="showTripLayer && unresolvedTrips.length" link type="primary" @click="unresolvedDialogOpen = true">查看待核实车次（{{ unresolvedTrips.length }}）</el-button></template>
+    </AppointmentCalendarPanel>
+    </div>
+    <AppDialog v-if="unresolvedDialogOpen" v-model="unresolvedDialogOpen" :title="`待核实车次（${unresolvedTrips.length}）`" width="min(1000px, calc(100vw - 48px))" :show-confirm="false" class="admin-density-dialog">
+      <p>这些车次缺少地点或时区，暂未计入日历。原计划时间保留 UTC。</p>
       <DataTable v-model:page="unresolvedPage" v-model:page-size="unresolvedSize" :data="unresolvedRows" :columns="unresolvedColumns" :total="unresolvedTrips.length" row-key="tripNo" @update:page-size="unresolvedPage = 1">
         <template #actions="{ row }"><el-button class="density-action" @click="router.push(`/overseas-master-data/trips/${encodeURIComponent(row.tripNo)}`)">查看来源</el-button></template>
         <template #issues="{ row }">{{ tripIssues(row as TripCalendarEntry) }}</template>
       </DataTable>
-    </details>
-    <AppointmentCalendarPanel :events="events" :loading="loading" :incomplete="sourceErrors.length > 0 || !!pickupNotice || (showTripLayer && !!tripNotice)" :can-create="access.can(permission.inboundOrderAppointment)" @layers="showTripLayer = $event.trips" @range="load" @create="openCreate" @edit="openEdit" @delete="remove" @open="openSource" />
-    </div>
+    </AppDialog>
     <AppDialog v-model="dialogOpen" class="admin-density-dialog" :title="editing ? '编辑预约' : '新增预约'" width="min(1080px, calc(100vw - 48px))" :confirm-text="pendingSave ? '重试本次保存' : '保存'" :confirm-loading="saving" :confirm-disabled="detailLoading || !detailReady || (!editing && (!warehouse || !selected.length || candidateLoading || !!candidateError))" @confirm="save">
       <LoadErrorState v-if="dialogError" title="预约操作失败" :message="dialogError.message" :show-retry="false"><template #details><ApiErrorMeta :details="dialogError" /></template></LoadErrorState>
       <div v-loading="detailLoading">
@@ -436,9 +437,6 @@ onBeforeUnmount(() => { ++unscheduledRequest; ++calendarRequest; ++candidateRequ
 </template>
 
 <style scoped>
-.calendar-notice { margin: var(--admin-space-2) 0; font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }
-.calendar-notice summary { cursor: pointer; }
-.calendar-notice p { margin: var(--admin-space-2) 0; }
 .appointment-heading { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-5); }
 .appointment-heading .density-status-tabs { flex: 1; margin: 0; }
 .calendar-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--admin-space-6); }
diff --git a/src/modules/appointment-calendar/PROTOTYPE_MATRIX.md b/src/modules/appointment-calendar/PROTOTYPE_MATRIX.md
index db9f29c8..67ba78d0 100644
--- a/src/modules/appointment-calendar/PROTOTYPE_MATRIX.md
+++ b/src/modules/appointment-calendar/PROTOTYPE_MATRIX.md
@@ -36,3 +36,7 @@
 用户截图密度修正：业务标题复用density-detail-title并与三视图同行，不独占大标题区；船期操作并入查询栏，不单独占空白工具栏。常驻业务解释改为默认折叠“说明”；错误保留重试，诊断信息默认折叠。基础货柜与船期状态独立读取，后者失败不阻断货柜列表、不展示假的零待办。
 
 用户最新截图确认：移除“美国预约总览”文字，仅保留三视图导航；日历图例和图层开关归入有内边距的辅助栏，长范围提示默认折叠，月格112px仍容纳3条摘要及剩余数；右侧固定360px，系统单号/完整时段/备注跨整行。该项以当前用户要求覆盖原标题建议，待1920×1080实际页面确认。
+
+用户最新确认覆盖默认列表建议：预约日历排第一并默认打开，之后为提柜与到仓、送仓与排车；范围资料提示移入日历工具栏“数据提示”，点击展开浮层，不在日历上方占行。真实接口错误仍保留错误与重试入口。
+
+用户确认待核实车次不占日历顶部：入口并入“数据提示”，显式点击后打开1000px居中分页明细；保留原UTC、缺项及查看来源操作，未打开不渲染明细，不增加查询；日期范围变化关闭旧明细。