From 88632e6e4f3b25425b06f83a7d39981cc8ff000a Mon Sep 17 00:00:00 2001
From: liuyihe <2513762445@qq.com>
Date: Tue, 20 Oct 2026 17:59:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContainerSimulationCreate.test.ts         |  4 +-
 .../components/ContainerSimulationCreate.vue  | 58 ++++++++++++++++---
 src/styles/adminDensity.css                   | 12 ++++
 src/styles/adminDensity.test.ts               |  8 +++
 4 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/src/modules/container-loading/components/ContainerSimulationCreate.test.ts b/src/modules/container-loading/components/ContainerSimulationCreate.test.ts
index 63ad7007..be4dbf3f 100644
--- a/src/modules/container-loading/components/ContainerSimulationCreate.test.ts
+++ b/src/modules/container-loading/components/ContainerSimulationCreate.test.ts
@@ -27,14 +27,12 @@ describe('ContainerSimulationCreate opted-in form', () => {
     await flushPromises()
     expect(createContainerSimulation).not.toHaveBeenCalled()
     const fields = dialog.findAllComponents({ name: 'ElFormItem' })
-    expect(fields).toHaveLength(4)
+    expect(fields).toHaveLength(3)
     fields.find(field => field.props('prop') === 'warehouseId')!.findComponent({ name: 'ElSelect' }).vm.$emit('update:modelValue', '8')
     await flushPromises()
     expect(listWarehouseLogisticsChannels).toHaveBeenCalledExactlyOnceWith('8')
     fields.find(field => field.props('prop') === 'channelGroupCode')!.findComponent({ name: 'ElSelect' }).vm.$emit('update:modelValue', 'MATSON_CLX')
     await flushPromises()
-    const specification = fields.find(field => field.props('label') === '统一规格')!
-    expect(specification.find('input').exists()).toBe(!dense)
     dialog.vm.$emit('confirm')
     await flushPromises()
     expect(createContainerSimulation).toHaveBeenCalledExactlyOnceWith({ warehouseId: '8', channelGroupCode: 'MATSON_CLX', containerType: '40HQ', capacityCbm: 68, maxWeightKg: 19500 })
diff --git a/src/modules/container-loading/components/ContainerSimulationCreate.vue b/src/modules/container-loading/components/ContainerSimulationCreate.vue
index 14ef5f95..0566e828 100644
--- a/src/modules/container-loading/components/ContainerSimulationCreate.vue
+++ b/src/modules/container-loading/components/ContainerSimulationCreate.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
 import { computed, reactive, ref } from 'vue'
-import { Plus } from '@lucide/vue'
+import { Container, Plus } from '@lucide/vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { listAllPlatformWarehouses, type PlatformWarehouseSummaryResource } from '@/modules/warehouses'
 import { listWarehouseLogisticsChannels, type OceanLogisticsChannel } from '@/modules/ocean-bookings'
@@ -9,7 +9,7 @@ import AppDialog from '@/shared/components/AppDialog.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
-import { CONTAINER_SPECIFICATIONS, DEFAULT_CONTAINER_TYPE, applyContainerSpecification, containerSpecification } from '@/shared/domain/containerSpecifications'
+import { CONTAINER_SPECIFICATIONS, DEFAULT_CONTAINER_TYPE, applyContainerSpecification } from '@/shared/domain/containerSpecifications'
 import { createContainerSimulation } from '../api/platformContainerLoading'
 import type { ContainerSimulationCreateRequest } from '../types'
 import { SMART_LOADING_CHANNEL_GROUPS } from '../smartLoadingChannelGroups'
@@ -95,14 +95,54 @@ async function saveSimulation() {
 
 <template>
   <el-button type="primary" @click="openSimulation"><Plus :size="16" />新增模拟柜</el-button>
-    <AppDialog :class="{ 'admin-density-dialog': dense }" v-model="simulationOpen" title="新增模拟柜" width="min(560px, calc(100vw - 28px))" confirm-text="创建模拟柜" cancel-text="取消" :confirm-loading="simulationSaving" @confirm="saveSimulation">
-
-<section :class="{ 'density-dialog-section': dense }" data-tone="work">      <el-form ref="simulationFormRef" :model="simulationForm" :rules="simulationRules" :label-position="dense ? 'left' : 'top'" :label-width="dense ? '120px' : undefined" class="simulation-form" :class="{ 'density-form': dense }"><template v-if="dense"><table :class="{ 'density-table': dense, 'density-table--editable': dense }" aria-label="模拟柜资料"><tbody><tr><td><el-form-item label="装柜仓库" prop="warehouseId"><el-select :model-value="simulationForm.warehouseId" filterable placeholder="请选择国内装柜仓库" :loading="warehouseLoading" @update:model-value="selectSimulationWarehouse"><el-option v-for="warehouse in warehouses" :key="String(warehouse.id)" :label="warehouse.warehouseName" :value="String(warehouse.id)" /></el-select></el-form-item></td><td><el-form-item label="物流渠道" prop="channelGroupCode"><el-select v-model="simulationForm.channelGroupCode" filterable :disabled="!simulationForm.warehouseId || simulationChannelsLoading" :loading="simulationChannelsLoading" :placeholder="simulationForm.warehouseId ? '请选择物流渠道' : '请先选择装柜仓库'" no-data-text="当前仓库暂无有效渠道"><el-option v-for="group in simulationChannelGroups" :key="group.code" :label="group.name" :value="group.code" /></el-select></el-form-item></td></tr><tr><td><el-form-item label="柜型" prop="containerType"><el-select :model-value="simulationForm.containerType" @update:model-value="selectSimulationContainerType(String($event || ''))"><el-option v-for="item in CONTAINER_SPECIFICATIONS" :key="item.type" :label="item.type" :value="item.type" /></el-select></el-form-item></td><td><el-form-item label="统一规格"><span>{{ `${containerSpecification(simulationForm.containerType)?.recommendedMinCbm || '—'}–${containerSpecification(simulationForm.containerType)?.capacityCbm || '—'} m³ / 货重 ≤ ${containerSpecification(simulationForm.containerType)?.maxWeightKg || '—'} kg` }}</span><small :class="{ 'density-dialog-note': dense }">{{ containerSpecification(simulationForm.containerType)?.description }}</small></el-form-item></td></tr></tbody></table></template><template v-else><el-form-item label="装柜仓库" prop="warehouseId"><el-select :model-value="simulationForm.warehouseId" filterable placeholder="请选择国内装柜仓库" :loading="warehouseLoading" @update:model-value="selectSimulationWarehouse"><el-option v-for="warehouse in warehouses" :key="String(warehouse.id)" :label="warehouse.warehouseName" :value="String(warehouse.id)" /></el-select></el-form-item><el-form-item label="物流渠道" prop="channelGroupCode"><el-select v-model="simulationForm.channelGroupCode" filterable :disabled="!simulationForm.warehouseId || simulationChannelsLoading" :loading="simulationChannelsLoading" :placeholder="simulationForm.warehouseId ? '请选择物流渠道' : '请先选择装柜仓库'" no-data-text="当前仓库暂无有效渠道"><el-option v-for="group in simulationChannelGroups" :key="group.code" :label="group.name" :value="group.code" /></el-select></el-form-item><el-form-item label="柜型" prop="containerType"><el-select :model-value="simulationForm.containerType" @update:model-value="selectSimulationContainerType(String($event || ''))"><el-option v-for="item in CONTAINER_SPECIFICATIONS" :key="item.type" :label="item.type" :value="item.type" /></el-select></el-form-item><el-form-item label="统一规格"><el-input :model-value="`${containerSpecification(simulationForm.containerType)?.recommendedMinCbm || '—'}–${containerSpecification(simulationForm.containerType)?.capacityCbm || '—'} m³ / 货重 ≤ ${containerSpecification(simulationForm.containerType)?.maxWeightKg || '—'} kg`" disabled /><small>{{ containerSpecification(simulationForm.containerType)?.description }}</small></el-form-item></template></el-form></section>
-      <LoadErrorState v-if="simulationError" compact title="模拟柜创建失败" :message="simulationError.message" :show-retry="false"><template #details><ApiErrorMeta :details="simulationError" /></template></LoadErrorState>
-    </AppDialog>
-
+  <AppDialog
+    v-model="simulationOpen"
+    class="simulation-create-dialog"
+    :class="{ 'admin-density-dialog': dense, 'admin-density-dialog--comfortable': dense }"
+    title="新增模拟柜"
+    width="min(800px, calc(100vw - 32px))"
+    confirm-text="创建模拟柜"
+    cancel-text="取消"
+    :confirm-loading="simulationSaving"
+    :confirm-disabled="warehouseLoading || simulationChannelsLoading"
+    @confirm="saveSimulation"
+  >
+    <template #header>
+      <div class="simulation-heading"><span class="simulation-heading__icon"><Container :size="20" aria-hidden="true" /></span><span>新增模拟柜</span></div>
+    </template>
+    <el-form ref="simulationFormRef" :model="simulationForm" :rules="simulationRules" label-position="top" class="simulation-form">
+      <div class="simulation-fields">
+        <el-form-item label="装柜仓库" prop="warehouseId">
+          <el-select :model-value="simulationForm.warehouseId" filterable placeholder="请选择国内装柜仓库" :loading="warehouseLoading" @update:model-value="selectSimulationWarehouse">
+            <el-option v-for="warehouse in warehouses" :key="String(warehouse.id)" :label="warehouse.warehouseName" :value="String(warehouse.id)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="物流渠道" prop="channelGroupCode">
+          <el-select v-model="simulationForm.channelGroupCode" filterable :disabled="!simulationForm.warehouseId || simulationChannelsLoading" :loading="simulationChannelsLoading" :placeholder="simulationForm.warehouseId ? '请选择物流渠道' : '请先选择装柜仓库'" no-data-text="当前仓库暂无有效渠道">
+            <el-option v-for="group in simulationChannelGroups" :key="group.code" :label="group.name" :value="group.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="柜型" prop="containerType" class="simulation-type">
+          <el-select :model-value="simulationForm.containerType" @update:model-value="selectSimulationContainerType(String($event || ''))">
+            <el-option v-for="item in CONTAINER_SPECIFICATIONS" :key="item.type" :label="item.type" :value="item.type" />
+          </el-select>
+        </el-form-item>
+      </div>
+    </el-form>
+    <LoadErrorState v-if="simulationError" compact title="模拟柜创建失败" :message="simulationError.message" :show-retry="false"><template #details><ApiErrorMeta :details="simulationError" /></template></LoadErrorState>
+  </AppDialog>
 </template>
 
 <style scoped>
-.simulation-form :deep(.el-select), .simulation-form :deep(.el-input-number) { width: 100%; }
+.simulation-heading { display: flex; align-items: center; gap: 10px; font-size: 16px; }
+.simulation-heading__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--el-color-primary); background: var(--el-color-primary-light-9); }
+.simulation-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 8px; }
+.simulation-fields > * { min-width: 0; }
+.simulation-form :deep(.el-select) { width: 100%; }
+.simulation-type { grid-column: 1 / -1; }
+.simulation-type :deep(.el-select) { max-width: calc(50% - 12px); }
+@media (max-width: 600px) {
+  .simulation-fields { grid-template-columns: minmax(0, 1fr); gap: 4px; }
+  .simulation-type :deep(.el-select) { max-width: none; }
+}
 </style>
diff --git a/src/styles/adminDensity.css b/src/styles/adminDensity.css
index a045eef8..5a0edcda 100644
--- a/src/styles/adminDensity.css
+++ b/src/styles/adminDensity.css
@@ -67,6 +67,18 @@
 .admin-density-dialog.el-dialog .el-empty__image { display: none; }
 .admin-density-dialog.el-dialog .el-empty__description { margin-top: 0; }
 
+/* Opt-in comfortable editor frame for short forms that need room to breathe. */
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog { --el-component-size: 40px; border-radius: 12px; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog:not(.is-fullscreen) { margin-top: 10vh; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__header { padding: 18px 48px 18px 24px; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__headerbtn { top: 6px; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__body { padding: 24px; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__footer { padding: 16px 24px; background: var(--admin-label-bg); }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-form-item { margin-bottom: 20px; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-form-item__label { margin-bottom: 8px; font-weight: 500; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-select__wrapper { min-height: 40px; }
+.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .app-dialog__footer .el-button { min-width: 88px; height: 38px; }
+
 /* Opted-in detail and editor content reuse the existing compact drawer frame. */
 :is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-code-block { margin:0; padding:var(--admin-space-3); border:1px solid var(--admin-table-border); border-radius:var(--admin-radius); background:var(--admin-surface); color:var(--cc-text); font:var(--admin-font-caption)/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
 
diff --git a/src/styles/adminDensity.test.ts b/src/styles/adminDensity.test.ts
index 232e2740..a627c6e7 100644
--- a/src/styles/adminDensity.test.ts
+++ b/src/styles/adminDensity.test.ts
@@ -1034,6 +1034,14 @@ describe('approved Admin density ownership', () => {
     })
   })
 
+  it('gives simulation creation an opt-in comfortable editor frame', () => {
+    const source = read('modules/container-loading/components/ContainerSimulationCreate.vue')
+    expect(source).toContain("'admin-density-dialog--comfortable': dense")
+    expect(source).toContain('width="min(800px, calc(100vw - 32px))"')
+    expect(shared).toContain('.admin-density-dialog.admin-density-dialog--comfortable.el-dialog { --el-component-size: 40px; border-radius: 12px; }')
+    expect(shared).toContain('.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-select__wrapper { min-height: 40px; }')
+  })
+
   it('keeps conditional shared consumers opt-in instead of enabling other menus', () => {
     const actionWeights = new Map<string, string>()
     cssRoot(read('styles/adminTextActions.css')).walkRules(rule => {