fix(admin): 完善弹窗滚动与表单交互布局

src/modules/customers/pages/CustomersView.test.ts

@@ -1,4 +1,5 @@
-import ElementPlus, { ElMessageBox } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
+import { createRequire } from 'node:module'
 import { createPinia, setActivePinia } from 'pinia'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
@@ -31,6 +32,8 @@ import AppDialog from '@/shared/components/AppDialog.vue'
 import { showExportTaskCreatedDialog } from '@/shared/components/exportTaskCreatedDialog'
 import CustomersView from './CustomersView.vue'
 
+const { default: ElementPlus } = createRequire(import.meta.url)('element-plus') as typeof import('element-plus')
+
 const customersSource = readFileSync(resolve(process.cwd(), 'src/modules/customers/pages/CustomersView.vue'), 'utf8')
 
 const { routerPush, routerReplace, routeControl } = vi.hoisted(() => ({
@@ -194,6 +197,28 @@ describe('CustomersView', () => {
     expect(customersSource).not.toContain('<AppDrawer v-model="editorOpen"')
   })
 
+  it('keeps compact customer fields in three columns and leaves wide fields and validation readable', async () => {
+    mount(CustomersView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
+    await flushPromises()
+    tableButtonByText('编辑')!.click()
+    await flushPromises()
+    const tables = Array.from(document.querySelectorAll<HTMLTableElement>('.customer-editor-dialog .customer-editor-table'))
+    expect(tables).toHaveLength(2)
+    expect(Array.from(tables[0]!.rows, row => row.cells.length)).toEqual([3, 3, 1, 1])
+    expect(Array.from(tables[1]!.rows, row => row.cells.length)).toEqual([3, 3, 1])
+    expect(tables.flatMap(table => Array.from(table.querySelectorAll('td[colspan]'), cell => cell.getAttribute('colspan')))).toEqual(['3', '3', '3'])
+    expect(document.querySelector<HTMLElement>('.customer-editor-dialog .qualification-credit-code .el-form-item__label')?.style.width).toBe('144px')
+    const company = document.querySelector<HTMLInputElement>('.customer-editor-dialog input[placeholder="请输入工商登记公司名称"]')!
+    expect(company.closest('.el-form-item')?.querySelector<HTMLElement>('.el-form-item__label')?.style.width).toBe('120px')
+    company.value = ''
+    company.dispatchEvent(new Event('input', { bubbles: true }))
+    await flushPromises()
+    company.dispatchEvent(new FocusEvent('blur'))
+    await vi.waitFor(() => expect(company.closest('.el-form-item')?.querySelector('.el-form-item__error')?.textContent).toContain('请输入公司名称'))
+    expect(document.querySelector('.customer-editor-dialog .el-dialog__footer')?.textContent).toContain('保存资料和资质')
+    expect(updatePlatformTenant).not.toHaveBeenCalled()
+  })
+
   it('keeps qualification file controls usable when the editor dialog is narrow', () => {
     expect(customersSource).toContain('class="qualification-validity" role="cell"')
     expect(customersSource).toContain('grid-template-columns:170px minmax(0,1fr) 220px')