From 453549ece1c002bb24b57050caa18758ad6697ee Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Sat, 10 Oct 2026 15:38:44 +0800
Subject: [PATCH] style(appointments): simplify calendar toolbar and remove
 redundant heading

---
 .../AppointmentCalendarPanel.vue              | 45 +++++++++++--------
 .../AppointmentCalendarView.test.ts           |  2 +-
 .../AppointmentCalendarView.vue               |  8 ++--
 .../appointment-calendar/PROTOTYPE_MATRIX.md  |  2 +
 4 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/modules/appointment-calendar/AppointmentCalendarPanel.vue b/src/modules/appointment-calendar/AppointmentCalendarPanel.vue
index 493ec391..ba3eeff9 100644
--- a/src/modules/appointment-calendar/AppointmentCalendarPanel.vue
+++ b/src/modules/appointment-calendar/AppointmentCalendarPanel.vue
@@ -77,12 +77,10 @@ defineExpose({ selectedDate, mode })
 <template>
   <section class="appointment-calendar admin-density" :aria-busy="loading">
     <div class="calendar-main">
-      <div class="calendar-controls" role="group" aria-label="参考图层"><label><input v-model="showArrivals" type="checkbox" @change="updateLayers">显示到港参考</label><label><input v-model="showTrips" type="checkbox" @change="updateLayers">显示用车计划</label></div>
       <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>
           <strong>预约日历</strong>
-          <span v-if="showArrivals" class="legend arrival">船舶到港</span><span class="legend delivery">预约送仓</span><span class="legend pickup">预约提柜</span><span v-if="showTrips" class="legend trip">用车计划</span>
         </div>
         <div class="calendar-controls">
           <el-button v-if="canCreate" type="primary" :disabled="loading" @click="emit('create', selectedDate)">＋ 新增预约</el-button>
@@ -96,6 +94,10 @@ defineExpose({ selectedDate, mode })
           <el-button @click="select(dateKey(new Date()))">今天</el-button>
         </div>
       </header>
+      <div class="calendar-options">
+        <div class="calendar-legend"><span v-if="showArrivals" class="legend arrival">船舶到港</span><span class="legend delivery">预约送仓</span><span class="legend pickup">预约提柜</span><span v-if="showTrips" class="legend trip">用车计划</span></div>
+      <div class="calendar-layers" role="group" aria-label="参考图层"><label><input v-model="showArrivals" type="checkbox" @change="updateLayers">显示到港参考</label><label><input v-model="showTrips" type="checkbox" @change="updateLayers">显示用车计划</label></div>
+      </div>
       <div class="weekdays"><span v-for="day in weekdays" :key="day">{{ day }}</span></div>
       <div v-loading="loading" class="calendar-grid" :class="{ 'week-grid': mode === 'week' }">
         <button v-for="date in dates" :key="date" type="button" class="calendar-day"
@@ -118,7 +120,7 @@ defineExpose({ selectedDate, mode })
         <article v-for="event in selectedEvents" :key="event.key" class="detail-event">
           <div class="event-heading"><span class="event-type" :class="event.type">{{ eventTypeLabels[event.type] }}</span><span>{{ event.time || '—' }}</span></div>
           <h3>{{ event.title }}</h3><p v-if="event.subtitle" class="event-subtitle">{{ event.subtitle }}</p>
-          <dl><div v-for="field in event.fields" :key="field.label"><dt>{{ field.label }}</dt><dd>{{ field.value || '—' }}</dd></div></dl>
+          <dl><div v-for="field in event.fields" :key="field.label" :class="{ 'wide-field': ['系统单号', '完整时段', '预约备注'].includes(field.label) }"><dt>{{ field.label }}</dt><dd>{{ field.value || '—' }}</dd></div></dl>
           <AppointmentInboundCodes v-if="event.inboundCodes" :codes="event.inboundCodes" />
           <footer v-if="event.canEdit || event.canDelete || event.sourcePath" class="density-actions">
             <el-button v-if="event.sourcePath" class="density-action" :disabled="loading" @click="emit('open', event)">查看来源</el-button>
@@ -132,12 +134,16 @@ defineExpose({ selectedDate, mode })
 </template>
 
 <style scoped>
-.appointment-calendar { display: grid; align-items: start; grid-template-columns: minmax(0, 2.5fr) minmax(320px, 1fr); gap: 16px; color: #344054; }
+.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: 12px; padding: 16px; border-bottom: 1px solid #edf0f6; }
+.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-label, .calendar-controls { display: flex; align-items: center; gap: 10px; }
 .calendar-label > svg { color: #617ce9; }
-.calendar-label > strong { font-size: 16px; }
+.calendar-label > strong { font-size: var(--admin-font-section); }
+.calendar-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--admin-space-3); padding: var(--admin-space-3) var(--admin-space-5); border-bottom: 1px solid var(--admin-table-border); }
+.calendar-legend, .calendar-layers { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-5); }
+.calendar-layers label { display: inline-flex; align-items: center; gap: var(--admin-space-1); cursor: pointer; font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }
+.calendar-layers input { margin: 0; accent-color: var(--el-color-primary); }
 .legend { font-size: 12px; white-space: nowrap; }
 .legend::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: #4b78e8; }
 .legend.delivery::before { background: #27a87a; }
@@ -149,16 +155,16 @@ defineExpose({ selectedDate, mode })
 .nav-button { border: 1px solid #dbe3ee; font-size: 22px; }
 .calendar-period { font-size: 14px; 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: 12px 14px; font-size: 13px; }
-.calendar-grid { gap: 7px; padding: 12px; background: #fbfcff; }
-.calendar-day { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: 128px; min-width: 0; padding: 8px; border: 1px solid #e5eaf2; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; color: inherit; font: inherit; overflow: hidden; }
+.weekdays { text-align: center; color: #8491a5; background: #f8faff; padding: var(--admin-space-3) var(--admin-space-5); 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; justify-content: flex-start; height: 112px; min-width: 0; padding: var(--admin-space-2); border: 1px solid #e5eaf2; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; color: inherit; font: inherit; overflow: hidden; }
 .calendar-day.outside { background: #f7f8fa; color: #98a2b3; }
 .calendar-day:hover { border-color: #bac8ed; background: #f8faff; }
 .calendar-day.selected { border-color: #617ce9; background: #f5f7ff; }
 .calendar-day:focus-visible, .nav-button:focus-visible, .view-toggle button:focus-visible { outline: 2px solid #4167d8; outline-offset: 2px; }
 .day-number { display: block; font-size: 12px; font-weight: 600; }
-.day-events { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
-.event-chip { display: block; padding: 3px 6px; line-height: 16px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+.day-events { display: flex; flex-direction: column; gap: 2px; margin-top: var(--admin-space-1); }
+.event-chip { display: block; padding: 1px 6px; line-height: 16px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
 .arrival { --event-bg: #edf3ff; --event-fg: #3765d4; }
 .delivery { --event-bg: #e8f8f1; --event-fg: #18845f; }
 .pickup { --event-bg: #fff4e3; --event-fg: #995a10; }
@@ -169,17 +175,18 @@ defineExpose({ selectedDate, mode })
 .event-more, .empty-day { color: #667085; font-size: 12px; }
 .week-grid .calendar-day { height: 220px; }
 .calendar-detail { align-self: start; }
-.calendar-detail > header { padding: 18px; border-bottom: 1px solid #edf0f6; }
-.calendar-detail > header > strong { font-size: 17px; }
-.calendar-detail header p { margin: 10px 0 0; font-size: 13px; color: #8491a5; }
-.calendar-detail header b { color: #617ce9; font-size: 17px; }
-.detail-events { padding: 14px; max-height: 650px; overflow-y: auto; }
-.detail-event + .detail-event { border-top: 1px solid #e4e9f2; margin-top: 16px; padding-top: 16px; }
+.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-1) 0 0; font-size: var(--admin-font-caption); color: #8491a5; }
+.calendar-detail header b { color: #617ce9; font-size: var(--admin-font-title); }
+.detail-events { padding: var(--admin-space-5); max-height: 660px; overflow-y: auto; }
+.detail-event + .detail-event { border-top: 1px solid #e4e9f2; margin-top: var(--admin-space-5); padding-top: var(--admin-space-5); }
 .event-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
 .event-type { padding: 5px 8px; border-radius: 4px; font-weight: 600; }
-.detail-event h3 { font-size: 15px; margin: 14px 0 8px; overflow-wrap: anywhere; }
+.detail-event h3 { font-size: var(--admin-font-section); margin: var(--admin-space-3) 0; overflow-wrap: anywhere; }
 .event-subtitle { color: #667085; font-size: 13px; overflow-wrap: anywhere; }
-.detail-event dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
+.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 .wide-field { grid-column: 1 / -1; }
 .detail-event dt { font-size: 12px; color: #8491a5; }
 .detail-event dd { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
 .detail-event footer { display: flex; justify-content: flex-end; border-top: 1px solid #edf0f6; padding-top: 10px; }
diff --git a/src/modules/appointment-calendar/AppointmentCalendarView.test.ts b/src/modules/appointment-calendar/AppointmentCalendarView.test.ts
index a7e0d4f6..b94ee0ba 100644
--- a/src/modules/appointment-calendar/AppointmentCalendarView.test.ts
+++ b/src/modules/appointment-calendar/AppointmentCalendarView.test.ts
@@ -66,7 +66,7 @@ describe('appointment calendar data integration', () => {
     const tabs = wrapper.get('[aria-label="预约工作视图"]').findAll('button')
     expect(tabs.map(button => button.text())).toEqual(['提柜与到仓', '送仓与排车', '预约日历'])
     expect(tabs[0]!.attributes('aria-pressed')).toBe('true')
-    expect(wrapper.text()).toContain('美国预约总览')
+    expect(wrapper.text()).not.toContain('美国预约总览')
     expect(listFbaAppointmentCalendar).not.toHaveBeenCalled()
     expect(listArrivalCalendar).not.toHaveBeenCalled()
     await tabs[2]!.trigger('click'); await flushPromises()
diff --git a/src/modules/appointment-calendar/AppointmentCalendarView.vue b/src/modules/appointment-calendar/AppointmentCalendarView.vue
index ff7679f2..2aaafe8d 100644
--- a/src/modules/appointment-calendar/AppointmentCalendarView.vue
+++ b/src/modules/appointment-calendar/AppointmentCalendarView.vue
@@ -379,7 +379,6 @@ onBeforeUnmount(() => { ++unscheduledRequest; ++calendarRequest; ++candidateRequ
     <LoadErrorState v-if="linkError" title="预约货源核对失败" :message="linkError.message" :loading="linkLoading" @retry="resolveLink" />
     <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">
-    <h2 class="density-detail-title">美国预约总览</h2>
     <div class="density-status-tabs" role="group" aria-label="预约工作视图">
       <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>
@@ -393,8 +392,8 @@ 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>
-    <p v-if="pickupNotice" role="status">{{ pickupNotice }}</p>
-    <p v-if="showTripLayer && tripNotice" role="status">{{ tripNotice }}</p>
+    <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>
@@ -437,6 +436,9 @@ 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 ded07831..db9f29c8 100644
--- a/src/modules/appointment-calendar/PROTOTYPE_MATRIX.md
+++ b/src/modules/appointment-calendar/PROTOTYPE_MATRIX.md
@@ -34,3 +34,5 @@
 按用户确认收敛：主视图仅提柜与到仓、送仓与排车、预约日历，默认有权限的列表视图；日历首次进入才加载。到港参考、用车计划默认隐藏，可独立开关，不计入预约数量；缺国家资料与查询超限分开提示。送仓与排车目前仍以选货合批为主，目的仓货量汇总及7/14/30天窗口尚未完成，不因标题调整宣称完成。
 
 用户截图密度修正：业务标题复用density-detail-title并与三视图同行，不独占大标题区；船期操作并入查询栏，不单独占空白工具栏。常驻业务解释改为默认折叠“说明”；错误保留重试，诊断信息默认折叠。基础货柜与船期状态独立读取，后者失败不阻断货柜列表、不展示假的零待办。
+
+用户最新截图确认：移除“美国预约总览”文字，仅保留三视图导航；日历图例和图层开关归入有内边距的辅助栏，长范围提示默认折叠，月格112px仍容纳3条摘要及剩余数；右侧固定360px，系统单号/完整时段/备注跨整行。该项以当前用户要求覆盖原标题建议，待1920×1080实际页面确认。