fix(appointments): unify calendar layout and cabinet numbers

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

@@ -7,15 +7,38 @@ vi.mock('./planningApi', () => ({ listPlanningCargo: vi.fn(), resolvePlanningSou
 vi.mock('vue-router', () => ({ onBeforeRouteLeave: vi.fn(), onBeforeRouteUpdate: vi.fn(), useRouter: () => ({ push: vi.fn() }) }))
 vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: () => true }) }))
 const empty = { records: [], page: 1, size: 20, total: 0, pages: 0 }
-function render() {
-  return mount(AppointmentCargoPanel, { global: { stubs: {
+function render(attach = false) {
+  return mount(AppointmentCargoPanel, { attachTo: attach ? document.body : undefined, global: { stubs: {
     DataTable: { name: 'DataTable', props: ['data', 'total', 'resultsVisible'], emits: ['update:page'], template: '<div><slot name="filters"/><slot name="notices"/><button data-next @click="$emit(\'update:page\',2)">下一页</button></div>' },
     QueryToolbar: { name: 'QueryToolbar', emits: ['search'], template: '<button data-search @click="$emit(\'search\')">查询</button>' },
-    LoadErrorState: true, ApiErrorMeta: true, RowActions: true,
+    LoadErrorState: true, ApiErrorMeta: true, RowActions: true, AppointmentExternalCandidates: { name: 'AppointmentExternalCandidates', template: '<section class="integrated-query-group"><slot name="query-tabs"/></section>' },
   } } })
 }
 describe('appointment planning cargo query', () => {
   beforeEach(() => { vi.resetAllMocks(); vi.mocked(listPlanningCargo).mockResolvedValue(empty) })
+  it('switches cargo tabs by click and keyboard without reloading first-leg cargo', async () => {
+    const wrapper = render(true); await flushPromises()
+    const tabs = () => wrapper.findAll('[role="tab"]')
+    expect(tabs().map(tab => tab.text())).toEqual(['头程货物', '外接货物'])
+    expect(wrapper.find('.integrated-query-group [role="tablist"]').exists()).toBe(true)
+    expect(tabs()[0]!.attributes('aria-selected')).toBe('true')
+    await tabs()[1]!.trigger('click')
+    expect(tabs()[1]!.attributes('aria-selected')).toBe('true')
+    expect(wrapper.findComponent({ name: 'AppointmentExternalCandidates' }).exists()).toBe(true)
+    await tabs()[1]!.trigger('keydown', { key: 'ArrowRight' })
+    await flushPromises()
+    expect(tabs()[0]!.attributes('aria-selected')).toBe('true')
+    expect(document.activeElement).toBe(tabs()[0]!.element)
+    expect(tabs()[1]!.attributes('tabindex')).toBe('-1')
+    await tabs()[0]!.trigger('keydown', { key: 'End' })
+    await flushPromises()
+    expect(tabs()[1]!.attributes('aria-selected')).toBe('true')
+    expect(document.activeElement).toBe(tabs()[1]!.element)
+    await tabs()[1]!.trigger('keydown', { key: 'Home' })
+    expect(tabs()[0]!.attributes('aria-selected')).toBe('true')
+    expect(listPlanningCargo).toHaveBeenCalledTimes(1)
+    wrapper.unmount()
+  })
   it('uses one server-page request per entry, page change and reset', async () => {
     const wrapper = render(); await flushPromises()
     expect(listPlanningCargo).toHaveBeenCalledTimes(1)