优化

src/modules/warehouses/pages/WarehousesView.test.ts

@@ -1,4 +1,6 @@
 import ElementPlus from 'element-plus'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 import { createPinia, setActivePinia } from 'pinia'
 import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
 import { afterAll, afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -19,6 +21,8 @@ import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { useAuthStore } from '@/core/auth/auth'
 import WarehousesView from './WarehousesView.vue'
 
+const warehousesSource = readFileSync(resolve(process.cwd(), 'src/modules/warehouses/pages/WarehousesView.vue'), 'utf8')
+
 vi.mock('@/modules/warehouses/api/platformWarehouses', () => ({
   listPlatformWarehouses: vi.fn(),
   getPlatformWarehouse: vi.fn(),
@@ -171,6 +175,12 @@ enableAutoUnmount(afterEach)
 afterAll(() => vi.unstubAllGlobals())
 
 describe('WarehousesView', () => {
+  it('uses the prototype-sized centered warehouse editor with a fixed footer', () => {
+    expect(warehousesSource).toContain('<AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))"')
+    expect(warehousesSource).not.toContain('<AppDrawer v-model="editorOpen"')
+    expect(warehousesSource).toContain(':global(.warehouse-editor-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; }')
+    expect(warehousesSource).toContain('.drawer-form :deep(.form-grid.two-cols) { grid-template-columns: minmax(0, 1fr); }')
+  })
   beforeEach(() => {
     vi.stubGlobal('ResizeObserver', ResizeObserverStub)
     document.body.innerHTML = ''
@@ -263,12 +273,12 @@ describe('WarehousesView', () => {
     wrapper.findComponent({ name: 'ElDropdown' }).vm.$emit('command', 'FBA')
     await flushPromises()
 
-    const drawerText = document.querySelector('.el-drawer')?.textContent || ''
-    expect(drawerText).toContain('新增FBA 地址')
-    expect(drawerText).toContain('国家或地区')
-    expect(drawerText).not.toContain('时区覆盖')
-    expect(drawerText).not.toContain('联系人')
-    expect(drawerText).not.toContain('收货时间')
+    const dialogText = document.querySelector('.warehouse-editor-dialog')?.textContent || ''
+    expect(dialogText).toContain('新增FBA 地址')
+    expect(dialogText).toContain('国家或地区')
+    expect(dialogText).not.toContain('时区覆盖')
+    expect(dialogText).not.toContain('联系人')
+    expect(dialogText).not.toContain('收货时间')
     const countrySelect = wrapper.findAllComponents({ name: 'ElSelect' })
       .find((select) => select.props('placeholder') === '美国 US')
     expect(countrySelect).toBeDefined()
@@ -309,10 +319,10 @@ describe('WarehousesView', () => {
     wrapper.findComponent({ name: 'ElDropdown' }).vm.$emit('command', 'DOMESTIC')
     await flushPromises()
 
-    const drawerText = document.querySelector('.el-drawer')?.textContent || ''
-    expect(drawerText).not.toContain('国家或地区')
-    expect(drawerText).not.toContain('时区')
-    expect(drawerText).not.toContain('仓库类型')
+    const dialogText = document.querySelector('.warehouse-editor-dialog')?.textContent || ''
+    expect(dialogText).not.toContain('国家或地区')
+    expect(dialogText).not.toContain('时区')
+    expect(dialogText).not.toContain('仓库类型')
 
     setField('input[placeholder="请输入仓库名称"]', '义乌新仓')
     setField('input[placeholder="例如 浙江省"]', '浙江省')
@@ -384,10 +394,10 @@ describe('WarehousesView', () => {
     await editButton.trigger('click')
     await flushPromises()
 
-    const drawerText = document.querySelector('.el-drawer')?.textContent || ''
-    expect(drawerText).toContain('编辑FBA 地址')
-    expect(drawerText).not.toContain('例如 US')
-    expect(drawerText).not.toContain('例如 UTC-8')
+    const dialogText = document.querySelector('.warehouse-editor-dialog')?.textContent || ''
+    expect(dialogText).toContain('编辑FBA 地址')
+    expect(dialogText).not.toContain('例如 US')
+    expect(dialogText).not.toContain('例如 UTC-8')
 
     const countrySelect = wrapper.findAllComponents({ name: 'ElSelect' })
       .find((select) => select.props('placeholder') === '请选择国家或地区')

src/modules/warehouses/pages/WarehousesView.vue

@@ -3,7 +3,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
 import { ChevronDown, Download, FileSpreadsheet, FileUp, MapPin, Pencil, Plus, Power, Save, Warehouse as WarehouseIcon } from '@lucide/vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
-import AppDrawer from '@/shared/components/AppDrawer.vue'
+import AppDialog from '@/shared/components/AppDialog.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
 import FormSection from '@/shared/components/FormSection.vue'
 import ListPageLayout from '@/shared/components/ListPageLayout.vue'
@@ -733,7 +733,7 @@ onMounted(() => void loadWarehouses())
       </section>
     </ListPageLayout>
 
-    <AppDrawer v-model="editorOpen" :title="editorLabel" size="min(620px, 94vw)" class="editor-drawer" :close-on-click-modal="false" :confirm-loading="saving" :show-confirm="false">
+    <AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))" class="warehouse-editor-dialog" :close-on-click-modal="false" :confirm-loading="saving" :show-confirm="false" destroy-on-close>
       <el-form :model="form" label-position="top" class="drawer-form" :disabled="saving">
         <FormSection title="基础信息">
           <div class="form-grid two-cols">
@@ -790,7 +790,7 @@ onMounted(() => void loadWarehouses())
         </FormSection>
       </el-form>
       <template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveWarehouse"><Save :size="16" />{{ editorMode === 'EDIT' ? '保存修改' : '确认新增' }}</el-button></div></template>
-    </AppDrawer>
+    </AppDialog>
 
     <el-dialog v-model="importOpen" title="导入公共仓库" width="min(760px, calc(100vw - 32px))" :close-on-click-modal="!importing" :close-on-press-escape="!importing">
       <div class="import-content">
@@ -839,7 +839,13 @@ onMounted(() => void loadWarehouses())
 .warehouse-address span { min-width: 0; }
 .field-error { width: 100%; margin: 6px 0 0; color: var(--el-color-danger); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
 .compact-grid { row-gap: 10px; }
+:global(.warehouse-editor-dialog) { max-height: min(800px, calc(100vh - 32px)); display: flex; flex-direction: column; }
+:global(.warehouse-editor-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; }
+:global(.warehouse-editor-dialog .el-dialog__footer) { flex: 0 0 auto; }
 .warehouse-status-toggle :deep(.el-radio-button__inner) { min-width: 74px; }
+@media (max-width: 720px) {
+  .drawer-form :deep(.form-grid.two-cols) { grid-template-columns: minmax(0, 1fr); }
+}
 .import-content { display: grid; gap: 20px; }
 .import-toolbar { justify-content: space-between; }
 .import-result { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--cc-border); }