fix: align appointment procurement and carpool workflows with agreed views

src/modules/appointment-calendar/AppointmentCalendarPanel.vue

@@ -27,18 +27,22 @@ const props = withDefaults(defineProps<{
   initialDate?: string
 }>(), { loading: false, incomplete: false, canCreate: false, initialDate: '' })
 const emit = defineEmits<{
+  layers: [layers: { arrivals: boolean; trips: boolean }]
   range: [range: { from: string; to: string }]
   create: [date: string]
   edit: [event: CalendarEvent]
   delete: [event: CalendarEvent]
   open: [event: CalendarEvent]
 }>()
+const showArrivals = ref(false), showTrips = ref(false)
+function updateLayers() { emit('layers', { arrivals: showArrivals.value, trips: showTrips.value }) }
+const visibleEvents = computed(() => props.events.filter(event => (event.type !== 'arrival' || showArrivals.value) && (event.type !== 'trip' || showTrips.value)))
 const selectedDate = ref(props.initialDate || dateKey(new Date()))
 const mode = ref<CalendarMode>('month')
 const dates = computed(() => calendarDates(selectedDate.value, mode.value))
 const grouped = computed(() => {
   const result = new Map<string, CalendarEvent[]>()
-  for (const event of props.events) {
+  for (const event of visibleEvents.value) {
     for (const date of dates.value) {
       if (!occursOnDate(event.date, event.endAt, date)) continue
       const group = result.get(date) || []
@@ -50,6 +54,7 @@ const grouped = computed(() => {
   return result
 })
 const selectedEvents = computed(() => grouped.value.get(selectedDate.value) || [])
+const appointmentCount = computed(() => selectedEvents.value.filter(event => event.type === 'delivery' || event.type === 'pickup').length)
 const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
 const eventTypeLabels = { arrival: '船舶到港', delivery: '预约送仓', pickup: '预约提柜', trip: '用车计划' }
 const heading = computed(() => mode.value === 'month'
@@ -72,11 +77,12 @@ 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 class="legend arrival">船舶到港</span><span class="legend delivery">预约送仓</span><span class="legend pickup">预约提柜</span><span class="legend trip">用车计划</span>
+          <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>
@@ -94,10 +100,10 @@ defineExpose({ selectedDate, mode })
       <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"
           :class="{ selected: selectedDate === date, outside: mode === 'month' && date.slice(0, 7) !== selectedDate.slice(0, 7) }"
-          :title="`${date}，${incomplete ? '已加载' : '共'} ${(grouped.get(date) || []).length} 条安排${incomplete ? '（部分来源未加载）' : ''}`" :aria-label="`${date}，${(grouped.get(date) || []).length} 项安排${incomplete ? '（部分来源未加载）' : ''}`" :aria-pressed="selectedDate === date" @click="select(date)">
+          :title="`${date}，${incomplete ? '已加载' : '共'} ${(grouped.get(date) || []).length} 条安排${incomplete ? '（当前范围不完整）' : ''}`" :aria-label="`${date}，${(grouped.get(date) || []).length} 项安排${incomplete ? '（当前范围不完整）' : ''}`" :aria-pressed="selectedDate === date" @click="select(date)">
           <span class="day-number">{{ mode === 'week' ? `${Number(date.slice(5, 7))}月` : '' }}{{ Number(date.slice(8)) }}</span>
           <span class="day-events">
-            <span v-for="event in (grouped.get(date) || []).slice(0, 3)" :key="event.key" class="event-chip" :class="event.type" :title="`${event.time} ${event.title} · 当天${incomplete ? '已加载' : '共'} ${(grouped.get(date) || []).length} 条安排${incomplete ? '（部分来源未加载）' : ''}`">
+            <span v-for="event in (grouped.get(date) || []).slice(0, 3)" :key="event.key" class="event-chip" :class="event.type" :title="`${event.time} ${event.title} · 当天${incomplete ? '已加载' : '共'} ${(grouped.get(date) || []).length} 条安排${incomplete ? '（当前范围不完整）' : ''}`">
               {{ event.title }}<small v-if="mode === 'week'">{{ event.time }}</small>
             </span>
             <span v-if="(grouped.get(date) || []).length > 3" class="event-more">还有 {{ (grouped.get(date) || []).length - 3 }} 条</span>
@@ -106,9 +112,9 @@ defineExpose({ selectedDate, mode })
       </div>
     </div>
     <aside class="calendar-detail" aria-label="当天安排">
-      <header><strong>{{ selectedDate }}</strong><p>{{ incomplete ? '当天已加载' : '当天共有' }} <b>{{ selectedEvents.length }}</b> 项安排<span v-if="incomplete">（部分来源未加载）</span></p></header>
+      <header><strong>{{ selectedDate }}</strong><p>{{ incomplete ? '当天已加载' : '当天共有' }} <b>{{ appointmentCount }}</b> 项预约<span v-if="selectedEvents.length > appointmentCount">，{{ selectedEvents.length - appointmentCount }} 条参考计划</span><span v-if="incomplete">（当前范围不完整）</span></p></header>
       <div class="detail-events" aria-live="polite">
-        <p v-if="!selectedEvents.length && !loading" class="empty-day">{{ incomplete ? '部分来源未加载，请重试后确认当天安排' : '当天暂无到港或送仓预约' }}</p>
+        <p v-if="!selectedEvents.length && !loading" class="empty-day">{{ incomplete ? '当前范围内暂无预约；请按上方提示核对缺失资料或失败来源' : '当天暂无预约' }}</p>
         <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>