优化

src/modules/container-loading/components/SmartLoadingDialog.test.ts

@@ -0,0 +1,30 @@
+import ElementPlus from 'element-plus'
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import SmartLoadingDialog from './SmartLoadingDialog.vue'
+
+describe('SmartLoadingDialog', () => {
+  afterEach(() => { document.body.innerHTML = '' })
+
+  it('expands to the viewport and can return to the normal dialog size', async () => {
+    const wrapper = mount(SmartLoadingDialog, {
+      attachTo: document.body,
+      props: { modelValue: true },
+      global: {
+        plugins: [ElementPlus],
+        stubs: { GlobalSmartLoadingView: { template: '<div>智能装柜工作台</div>' } },
+      },
+    })
+    await flushPromises()
+
+    expect(wrapper.findAll('.smart-loading-dialog__warehouses [role="tab"]').map((tab) => tab.text())).toEqual(['义乌仓', '东莞仓'])
+    const expand = wrapper.get('button[aria-label="展开全屏"]')
+    await expand.trigger('click')
+    expect(document.querySelector('.smart-loading-dialog.is-fullscreen')).not.toBeNull()
+    expect(wrapper.find('button[aria-label="退出全屏"]').exists()).toBe(true)
+
+    await wrapper.get('button[aria-label="退出全屏"]').trigger('click')
+    expect(document.querySelector('.smart-loading-dialog.is-fullscreen')).toBeNull()
+    expect(wrapper.find('button[aria-label="展开全屏"]').exists()).toBe(true)
+  })
+})

src/modules/container-loading/components/SmartLoadingDialog.vue

@@ -1,8 +1,25 @@
 <script setup lang="ts">
+import { Maximize2, Minimize2 } from '@lucide/vue'
+import { ref, watch } from 'vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import GlobalSmartLoadingView from '../pages/GlobalSmartLoadingView.vue'
+import { SMART_LOADING_WAREHOUSE_GROUPS } from '../smartLoadingChannelGroups'
 
 const open = defineModel<boolean>({ default: false })
+const fullscreen = ref(false)
+const warehouseCode = ref('')
+const workbench = ref<InstanceType<typeof GlobalSmartLoadingView> | null>(null)
+
+watch(open, (value) => {
+  if (!value) {
+    fullscreen.value = false
+    warehouseCode.value = ''
+  }
+})
+
+function selectWarehouse(code: string) {
+  void workbench.value?.selectWarehouse(code)
+}
 </script>
 
 <template>
@@ -11,18 +28,44 @@ const open = defineModel<boolean>({ default: false })
     class="smart-loading-dialog"
     title="智能装柜"
     width="min(1600px, 98vw)"
+    :fullscreen="fullscreen"
     cancel-text="关闭"
     :show-confirm="false"
     destroy-on-close
   >
-    <GlobalSmartLoadingView embedded />
+    <template #header>
+      <div class="smart-loading-dialog__header">
+        <div class="smart-loading-dialog__heading">
+          <span>智能装柜</span>
+          <el-tabs :model-value="warehouseCode" class="smart-loading-dialog__warehouses" aria-label="装柜仓库" @tab-change="selectWarehouse(String($event))">
+            <el-tab-pane v-for="warehouse in SMART_LOADING_WAREHOUSE_GROUPS" :key="warehouse.code" :label="warehouse.name" :name="warehouse.code" />
+          </el-tabs>
+        </div>
+        <el-tooltip :content="fullscreen ? '退出全屏' : '展开全屏'" placement="bottom">
+          <el-button text :aria-label="fullscreen ? '退出全屏' : '展开全屏'" @click="fullscreen = !fullscreen">
+            <Minimize2 v-if="fullscreen" :size="18" />
+            <Maximize2 v-else :size="18" />
+          </el-button>
+        </el-tooltip>
+      </div>
+    </template>
+    <GlobalSmartLoadingView ref="workbench" v-model:warehouse-code="warehouseCode" embedded />
   </AppDialog>
 </template>
 
 <style scoped>
 :global(.smart-loading-dialog.app-dialog.el-dialog) { width: min(1600px, 98vw); max-height: 94vh; margin-block: 3vh !important; }
+:global(.smart-loading-dialog.app-dialog.el-dialog.is-fullscreen) { width: 100%; height: 100vh; max-height: 100vh; margin: 0 !important; border-radius: 0; }
 :global(.smart-loading-dialog .el-dialog__body) { padding: 0 16px 16px; }
 :global(.smart-loading-dialog .app-dialog__body) { min-width: 0; }
+.smart-loading-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; color: var(--cc-text); font-size: 18px; font-weight: 600; line-height: 24px; }
+.smart-loading-dialog__heading { display: flex; min-width: 0; align-items: center; gap: 24px; }
+.smart-loading-dialog__heading > span { flex: 0 0 auto; }
+.smart-loading-dialog__warehouses { min-width: 0; }
+.smart-loading-dialog__warehouses :deep(.el-tabs__header) { margin: 0; }
+.smart-loading-dialog__warehouses :deep(.el-tabs__nav-wrap::after), .smart-loading-dialog__warehouses :deep(.el-tabs__content) { display: none; }
+.smart-loading-dialog__warehouses :deep(.el-tabs__item) { height: 38px; padding-inline: 16px; font-size: 14px; font-weight: 600; }
+.smart-loading-dialog__header :deep(.el-button) { flex: 0 0 auto; margin-right: 24px; color: var(--cc-muted); }
 @media (max-width: 720px) {
   :global(.smart-loading-dialog.app-dialog.el-dialog) { width: calc(100vw - 12px); max-height: calc(100svh - 12px); margin-block: 6px !important; }
   :global(.smart-loading-dialog .el-dialog__body) { padding: 0 8px 8px; }