优化

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

@@ -38,7 +38,13 @@ describe('SmartLoadingDialog', () => {
 
   it('keeps the outer dialog fixed so only workbench data panes scroll', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/modules/container-loading/components/SmartLoadingDialog.vue'), 'utf8')
+    expect(source).toContain('fullscreenable')
+    expect(source).toContain('default-fullscreen')
+    expect(source).not.toContain('Maximize2')
+    expect(source).not.toContain('const fullscreen')
+    expect(source).toContain('.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)')
     expect(source).toContain('height: 94vh; max-height: 94vh;')
+    expect(source).not.toContain('.smart-loading-dialog.app-dialog.el-dialog) { width: min(1600px, 98vw)')
     expect(source).toContain('flex: 1; padding: 0; overflow: hidden;')
     expect(source).toContain('min-height: 0; flex: 1; overflow: hidden;')
   })

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

@@ -1,15 +1,8 @@
 <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'
 
 const open = defineModel<boolean>({ default: false })
-const fullscreen = ref(true)
-
-watch(open, (value) => {
-  if (value) fullscreen.value = true
-})
 </script>
 
 <template>
@@ -18,38 +11,21 @@ watch(open, (value) => {
     class="smart-loading-dialog"
     title="智能装柜"
     width="min(1600px, 98vw)"
-    :fullscreen="fullscreen"
+    fullscreenable
+    default-fullscreen
     cancel-text="关闭"
     :show-confirm="false"
     destroy-on-close
   >
-    <template #header>
-      <div class="smart-loading-dialog__header">
-        <div class="smart-loading-dialog__heading">
-          <span>智能装柜</span>
-        </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 embedded />
   </AppDialog>
 </template>
 
 <style scoped>
-:global(.smart-loading-dialog.app-dialog.el-dialog) { width: min(1600px, 98vw); height: 94vh; max-height: 94vh; margin-block: 3vh !important; }
+:global(.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)) { width: min(1600px, 98vw); height: 94vh; 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) { display: flex; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
 :global(.smart-loading-dialog .app-dialog__body) { display: flex; min-width: 0; min-height: 0; flex: 1; overflow: hidden; }
-.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__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); height: calc(100svh - 12px); max-height: calc(100svh - 12px); margin-block: 6px !important; }
+  :global(.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)) { width: calc(100vw - 12px); height: calc(100svh - 12px); max-height: calc(100svh - 12px); margin-block: 6px !important; }
 }
 </style>

src/modules/container-loading/pages/GlobalSmartLoadingView.vue

@@ -588,6 +588,7 @@ async function mutate(
   fallback: string,
   recovery: { preserveDrafts?: Record<string, number>; preserveAssign?: boolean; pickingConflict?: boolean } = {},
 ) {
+  if (mutating.value) return
   mutating.value = true
   mutationError.value = null
   try {
@@ -680,7 +681,7 @@ onMounted(() => { void load(); void loadCustomers() })
                   size="small"
                   type="text"
                   plain
-                  :disabled="candidateBlocked(row as SmartLoadingCandidateRow)"
+                  :disabled="mutating || candidateBlocked(row as SmartLoadingCandidateRow)"
                   @click="openAssign(row)"
                 ><Plus :size="15" />{{ row.coLoadGroupId ? '整组分配' : '加入' }}</el-button>
               </template>
@@ -756,7 +757,7 @@ onMounted(() => { void load(); void loadCustomers() })
                 <div><div class="meter-title"><span>重量</span><strong>{{ formatNumber(totalWeight, 1) }} / {{ formatNumber(weightLimit, 1) }} kg</strong></div><el-progress :percentage="Math.min(displayedWeightPercent, 100)" :status="weightPercent > 100 ? 'exception' : undefined" /></div>
               </div>
               <DataTable :data="displayedPlanItems" :columns="itemColumns" :loading="selectionLoading || mutating" stripe preference-key="global-smart-loading-items" column-settings-mode="hide" empty-text="当前柜次暂无装柜明细">
-                <template #actions="{ row }"><div class="row-actions"><el-button v-if="canDelete && editable && row.canRemove" size="small" type="danger" text @click="remove(row)"><Trash2 :size="15" />删除</el-button></div></template>
+                <template #actions="{ row }"><div class="row-actions"><el-button v-if="canDelete && editable && row.canRemove" size="small" type="danger" text :disabled="mutating" @click="remove(row)"><Trash2 :size="15" />删除</el-button></div></template>
                 <template #customerName="{ row }"><LineClampText :content="row.customerName" /></template>
                 <template #coLoadGroup="{ row }"><div v-if="row.coLoadGroup" class="candidate-group"><el-tag size="small" type="warning"><LineClampText :content="`${row.coLoadGroup.groupNo} · ${groupMemberLabel(row.coLoadGroup)}`" /></el-tag><LineClampText :content="row.memberOrderSummaries.join('；')" /><LineClampText :content="`固定 ${row.coLoadGroup.fullPackageCount} 箱 · ${row.coLoadGroup.lockedPlanId ? '已锁定' : '未锁定'}`" /></div><LineClampText v-else content="普通单票" /></template>
                 <template #packageCount="{ row }"><LineClampText v-if="row.coLoadGroup" :content="`${row.packageCount} 箱（整组固定）`" /><div v-else class="package-count-editor"><el-input-number v-model="quantityDrafts[row.id]" :min="row.minPackageCount" :max="adjustmentMax(row)" :step="1" :disabled="mutating || !canAssign || !editable || !row.canAdjust" controls-position="right" @change="adjust(row)" /><LineClampText v-if="row.detailCount > 1 && editable" content="多规格，需删除后重加" /><LineClampText v-if="row.pickedPackageCount > 0" :content="`已拣 ${row.pickedPackageCount} 箱`" /></div></template>

src/modules/inbounds/measurement/InboundMeasurementDialog.test.ts

@@ -9,6 +9,8 @@ const orderListSource = readFileSync(resolve(process.cwd(), 'src/modules/unified
 
 describe('InboundMeasurementDialog', () => {
   it('owns the complete measurement workspace behind one centered dialog', () => {
+    expect(source).toContain("import AppDialog from '@/shared/components/AppDialog.vue'")
+    expect(source).toContain('<AppDialog')
     expect(source).toContain('class="inbound-measurement-workspace-dialog"')
     expect(source).toContain('width="min(1240px, calc(100vw - 32px))"')
     expect(source).toContain('height: 92vh')
@@ -21,6 +23,12 @@ describe('InboundMeasurementDialog', () => {
     expect(source).toContain('measurementPanelRef.value?.updateActualWeights(actualGrossWeightKg, actualNetWeightKg)')
   })
 
+  it('offers the shared fullscreen control without forcing fullscreen on open', () => {
+    expect(source).toContain('fullscreenable')
+    expect(source).not.toContain('default-fullscreen')
+    expect(source).not.toContain('<el-dialog')
+  })
+
   it('shows the inbound code once in the dialog title and not as a second body heading', () => {
     expect(source).toContain("`测量 · ${props.inboundCode?.trim() || '入仓码待补充'}`")
     expect(source).not.toContain('props.inboundCode?.trim() || props.inboundId')

src/modules/inbounds/measurement/InboundMeasurementDialog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
+import AppDialog from '@/shared/components/AppDialog.vue'
 import InboundMeasurementPanel from './InboundMeasurementPanel.vue'
 import WeightOcrPanel from '../weight/components/WeightOcrPanel.vue'
 
@@ -59,12 +60,13 @@ function handleSubmitted() {
 </script>
 
 <template>
-  <el-dialog
+  <AppDialog
     :model-value="modelValue"
     class="inbound-measurement-workspace-dialog"
     :title="title"
     width="min(1240px, calc(100vw - 32px))"
     top="4vh"
+    fullscreenable
     destroy-on-close
     append-to-body
     :close-on-click-modal="false"
@@ -111,7 +113,7 @@ function handleSubmitted() {
         >提交审核</el-button>
       </div>
     </template>
-  </el-dialog>
+  </AppDialog>
 </template>
 
 <style scoped>

src/shared/components/AppDialog.test.ts

@@ -11,6 +11,7 @@ const ElDialogStub = defineComponent({
     showClose: Boolean,
     closeOnClickModal: Boolean,
     closeOnPressEscape: Boolean,
+    fullscreen: Boolean,
   },
   template: '<section data-testid="dialog"><slot name="header" /><slot /><slot name="footer" /></section>',
 })
@@ -65,10 +66,25 @@ describe('AppDialog', () => {
     expect(wrapper.findAll('button')).toHaveLength(0)
   })
 
+  it('provides opt-in fullscreen controls without changing ordinary dialogs', async () => {
+    const ordinary = mountDialog()
+    expect(ordinary.getComponent(ElDialogStub).props('fullscreen')).toBe(false)
+    expect(ordinary.find('button[aria-label="展开全屏"]').exists()).toBe(false)
+
+    const wrapper = mountDialog({ fullscreenable: true, defaultFullscreen: true })
+    expect(wrapper.getComponent(ElDialogStub).props('fullscreen')).toBe(true)
+    expect(wrapper.find('button[aria-label="退出全屏"]').exists()).toBe(true)
+
+    await wrapper.get('button[aria-label="退出全屏"]').trigger('click')
+    expect(wrapper.getComponent(ElDialogStub).props('fullscreen')).toBe(false)
+    expect(wrapper.find('button[aria-label="展开全屏"]').exists()).toBe(true)
+  })
+
   it('keeps the dialog chrome fixed while long content scrolls in the body', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/shared/components/AppDialog.vue'), 'utf8')
 
     expect(source).toContain(':global(.app-dialog.el-dialog) { display: flex;')
+    expect(source).toContain('width: 100%; max-width: 100%; height: 100vh;')
     expect(source).toContain(':global(.app-dialog .el-dialog__body) { min-height: 0; overflow-y: auto;')
     expect(source).toContain('max-height: calc(100svh - 20px)')
   })

src/shared/components/AppDialog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { Maximize2, Minimize2 } from '@lucide/vue'
+import { computed, ref, watch } from 'vue'
 
 export type DialogConfirmType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
 
@@ -22,6 +23,8 @@ const props = withDefaults(defineProps<{
   closeOnPressEscape?: boolean
   destroyOnClose?: boolean
   lockWhileSubmitting?: boolean
+  fullscreenable?: boolean
+  defaultFullscreen?: boolean
 }>(), {
   width: 'min(560px, calc(100vw - 28px))',
   loading: false,
@@ -38,15 +41,26 @@ const props = withDefaults(defineProps<{
   closeOnPressEscape: true,
   destroyOnClose: false,
   lockWhileSubmitting: true,
+  fullscreenable: false,
+  defaultFullscreen: false,
 })
 
 const open = defineModel<boolean>({ default: false })
+const fullscreen = ref(props.defaultFullscreen)
 const emit = defineEmits<{
   confirm: []
   cancel: []
 }>()
 const submittingLocked = computed(() => props.lockWhileSubmitting && props.confirmLoading)
 
+watch(open, (value) => {
+  if (value) fullscreen.value = props.defaultFullscreen
+})
+
+function toggleFullscreen() {
+  fullscreen.value = !fullscreen.value
+}
+
 function closeDialog() {
   if (submittingLocked.value) return
   open.value = false
@@ -65,8 +79,23 @@ function closeDialog() {
     :close-on-click-modal="closeOnClickModal && !submittingLocked"
     :close-on-press-escape="closeOnPressEscape && !submittingLocked"
     :destroy-on-close="destroyOnClose"
+    :fullscreen="fullscreenable && fullscreen"
   >
-    <template v-if="$slots.header" #header><slot name="header" /></template>
+    <template v-if="$slots.header || fullscreenable" #header>
+      <div v-if="fullscreenable" class="app-dialog__header">
+        <div class="app-dialog__header-content">
+          <slot v-if="$slots.header" name="header" :fullscreen="fullscreen" :toggle-fullscreen="toggleFullscreen" />
+          <span v-else>{{ title }}</span>
+        </div>
+        <el-tooltip :content="fullscreen ? '退出全屏' : '展开全屏'" placement="bottom">
+          <el-button text :aria-label="fullscreen ? '退出全屏' : '展开全屏'" @click="toggleFullscreen">
+            <Minimize2 v-if="fullscreen" :size="18" />
+            <Maximize2 v-else :size="18" />
+          </el-button>
+        </el-tooltip>
+      </div>
+      <slot v-else name="header" />
+    </template>
     <div v-loading="loading" class="app-dialog__body" :aria-busy="loading || confirmLoading">
       <slot />
     </div>
@@ -89,8 +118,12 @@ function closeDialog() {
 
 <style scoped>
 :global(.app-dialog.el-dialog) { display: flex; max-height: min(90vh, 900px); flex-direction: column; overflow: hidden; }
+:global(.app-dialog.el-dialog.is-fullscreen) { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; margin: 0 !important; border-radius: 0; }
 :global(.app-dialog .el-dialog__header), :global(.app-dialog .el-dialog__footer) { flex: 0 0 auto; }
 :global(.app-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+.app-dialog__header { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; color: var(--cc-text); font-size: 18px; font-weight: 600; line-height: 24px; }
+.app-dialog__header-content { min-width: 0; flex: 1; }
+.app-dialog__header > :deep(.el-button) { flex: 0 0 auto; margin-right: 24px; color: var(--cc-muted); }
 .app-dialog__body { min-height: 0; }
 .app-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
 .app-dialog__footer :deep(.el-button) { margin-left: 0; }