优化

src/modules/warehouse-resources/pallets/pages/PalletsView.test.ts

@@ -117,13 +117,13 @@ describe('PalletsView', () => {
     expect(palletsSource).toContain('stripe')
     expect(palletsSource).toContain('size="small" plain type="primary"')
     expect(palletsSource).toMatch(/size="small"\s+plain\s+type="danger"/)
-    expect(palletsSource).toContain('<Eye :size="15" />')
+    expect(palletsSource).not.toContain('<Eye :size="15" />')
     expect(palletsSource).toContain('<Pencil :size="15" />')
     expect(palletsSource).toContain('<Trash2 :size="15" />')
     expect(palletsSource).toContain('@media (max-width: 720px)')
   })
-  it('uses the prototype-sized centered editor while retaining the detail drawer', () => {
-    expect(palletsSource).toContain('<AppDrawer v-model="detailOpen"')
+  it('uses the prototype-sized centered editor without an extra detail drawer', () => {
+    expect(palletsSource).not.toContain('<AppDrawer')
     expect(palletsSource).toContain('<AppDialog v-model="editorOpen" :title="editorTitle" width="min(560px, calc(100vw - 28px))"')
     expect(palletsSource).not.toContain('<el-drawer v-model="editorOpen"')
     expect(palletsSource).toContain(':global(.pallet-editor-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; }')
@@ -243,7 +243,6 @@ describe('PalletsView', () => {
     const wrapper = await mountView()
 
     const bodyRows = wrapper.findAll('.el-table__body-wrapper tbody tr')
-    expect(bodyRows[0]?.text()).toContain('查看')
     expect(bodyRows[0]?.text()).not.toContain('编辑')
     expect(bodyRows[1]?.text()).toContain('编辑')
   })
@@ -277,7 +276,7 @@ describe('PalletsView', () => {
     inputNumbers[0]?.vm.$emit('update:modelValue', 1.5)
     inputNumbers[1]?.vm.$emit('update:modelValue', 10)
     await wrapper.find('input[placeholder="例如 黄色"]').setValue('黑色')
-    await wrapper.find('textarea[placeholder="可填写其他说明"]').setValue('标准托盘')
+    await wrapper.find('input[placeholder="选填"]').setValue('标准托盘')
     const saveButton = wrapper.findAll('button').find((button) => button.text().trim() === '保存托盘')
     await saveButton?.trigger('click')
     await flushPromises()
@@ -287,7 +286,7 @@ describe('PalletsView', () => {
     })
   })
 
-  it('groups the pallet editor into clear ownership and specification sections', async () => {
+  it('uses a compact three-row two-column editor', async () => {
     const wrapper = await mountView()
     const createButton = wrapper.findAll('button').find((button) => button.text().trim() === '新增托盘')
     await createButton?.trigger('click')
@@ -296,9 +295,9 @@ describe('PalletsView', () => {
     const editorDialog = document.body.querySelector('.pallet-editor-dialog')
     expect(editorDialog?.textContent).toContain('新增托盘')
     expect(editorDialog?.querySelector('.el-dialog__title')?.textContent).toBe('新增托盘')
-    expect(document.body.querySelectorAll('.editor-section')).toHaveLength(2)
-    expect(document.body.querySelector('#pallet-ownership-heading')?.textContent).toBe('归属仓库')
-    expect(document.body.querySelector('#pallet-spec-heading')?.textContent).toBe('托盘规格')
+    expect(document.body.querySelectorAll('.editor-field-grid')).toHaveLength(3)
+    expect(document.body.querySelector('.editor-section')).toBeNull()
+    expect(document.body.querySelector('.editor-context')).toBeNull()
     expect(document.body.querySelector('.pallet-editor-footer')?.textContent).toContain('为必填项')
   })
 
@@ -309,7 +308,7 @@ describe('PalletsView', () => {
     const actions = wrapper.find('.pallet-row-actions').text()
     expect(actions).not.toContain('编辑')
     expect(actions).not.toContain('删除')
-    expect(actions).toContain('查看')
+    expect(actions).not.toContain('查看')
   })
 
   it('shows a recoverable list failure instead of demo data', async () => {
@@ -333,59 +332,22 @@ describe('PalletsView', () => {
     })
   })
 
-  it('shows only the pallet fields exposed by the backend contract', async () => {
+  it('keeps the list limited to fields exposed by the backend contract', async () => {
     const publicPallet = { ...pallet, tenantId: '0' }
     vi.mocked(listPlatformPallets).mockResolvedValue({ records: [publicPallet], page: 1, size: 20, total: 1, pages: 1 })
     vi.mocked(getPlatformPallet).mockResolvedValue(publicPallet)
     const wrapper = await mountView()
     await loadRows(wrapper)
     expect(wrapper.findComponent(DataTable).props('data')).toEqual([publicPallet])
-    const tableBody = wrapper.find('.el-table__body-wrapper')
-    const viewButton = tableBody.findAll('.pallet-row-actions button').find((button) => button.text().trim() === '查看')
-    await viewButton?.trigger('click')
-    await flushPromises()
-
-    expect(getPlatformPallet).toHaveBeenCalledWith(19001, '20001')
-    expect(document.body.textContent).toContain('资源作用域')
-    expect(document.body.textContent).toContain('平台公共资源')
-    expect(document.body.textContent).not.toContain('所属企业')
-    expect(document.body.textContent).toContain('托盘编码')
-    expect(document.body.textContent).toContain('托盘类型')
-    expect(document.body.textContent).toContain('托盘容积')
-    expect(document.body.textContent).toContain('归属信息')
-    expect(document.body.textContent).toContain('托盘规格')
-    expect(document.body.textContent).toContain('记录信息')
-    expect(document.body.textContent).not.toContain('企业 ID')
-    expect(document.body.textContent).not.toContain('租户')
-    expect(document.body.textContent).not.toContain('托盘状态')
-    expect(document.body.textContent).not.toContain('最大承重')
-  })
-
-  it('keeps the latest detail when an older pallet request finishes last', async () => {
-    const secondPallet = { ...pallet, id: '20002', palletCode: 'TP-002' }
-    let resolveFirst!: (value: PlatformPalletResource) => void
-    let resolveSecond!: (value: PlatformPalletResource) => void
-    vi.mocked(getPlatformPallet).mockImplementation((_warehouseId, palletId) => new Promise((resolve) => {
-      if (String(palletId) === String(pallet.id)) resolveFirst = resolve
-      else resolveSecond = resolve
-    }))
-    const wrapper = await mountView()
-    const vm = wrapper.vm as unknown as {
-      detailOpen: boolean
-      detail: PlatformPalletResource | null
-      openDetail(row: PlatformPalletResource): Promise<void>
-    }
-
-    void vm.openDetail(pallet)
-    vm.detailOpen = false
-    await wrapper.vm.$nextTick()
-    void vm.openDetail(secondPallet)
-    resolveSecond(secondPallet)
-    await flushPromises()
-    resolveFirst(pallet)
-    await flushPromises()
-
-    expect(vm.detail?.palletCode).toBe('TP-002')
+    const tableText = wrapper.find('.data-table').text()
+    expect(tableText).toContain('托盘编码')
+    expect(tableText).toContain('托盘类型')
+    expect(tableText).toContain('托盘容积')
+    expect(tableText).not.toContain('所属企业')
+    expect(tableText).not.toContain('企业 ID')
+    expect(tableText).not.toContain('租户')
+    expect(tableText).not.toContain('托盘状态')
+    expect(tableText).not.toContain('最大承重')
   })
 
   it('keeps the latest pallet selected for editing', async () => {

src/modules/warehouse-resources/pallets/pages/PalletsView.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { Boxes, Eye, Pencil, Plus, Save, Trash2, Warehouse as WarehouseIcon } from '@lucide/vue'
+import { Boxes, Pencil, Plus, Save, Trash2, Warehouse as WarehouseIcon } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
 import { listAllPlatformWarehouses, type PlatformWarehouseResource } from '@/modules/warehouses'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
-import AppDrawer from '@/shared/components/AppDrawer.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
-import FormSection from '@/shared/components/FormSection.vue'
 import ListPageLayout from '@/shared/components/ListPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
@@ -35,15 +33,11 @@ const page = ref(1)
 const pageSize = ref(20)
 const total = ref(0)
 const editorOpen = ref(false)
-const detailOpen = ref(false)
-const detail = ref<PlatformPalletResource | null>(null)
-const detailLoading = ref(false)
 const saving = ref(false)
 const deletingIds = ref(new Set<string>())
 const formRef = ref<FormInstance>()
 let warehouseSequence = 0
 let palletSequence = 0
-let detailSequence = 0
 let editorSequence = 0
 
 type PalletFilters = QueryModel & { warehouseId: string; palletCode: string; palletType: string }
@@ -115,7 +109,7 @@ const domesticWarehouses = computed(() => warehouses.value.filter((warehouse) =>
 )))
 const editorTitle = computed(() => form.id ? '编辑托盘' : '新增托盘')
 const editorPermission = computed(() => form.id ? 'platform:pallet:edit' : 'platform:pallet:create')
-const contextLocked = computed(() => editorOpen.value || detailOpen.value || saving.value || deletingIds.value.size > 0)
+const contextLocked = computed(() => editorOpen.value || saving.value || deletingIds.value.size > 0)
 const filtered = computed(() => Object.values(appliedFilters.value).some((value) => String(value || '').trim()))
 
 const { captureBaseline } = useUnsavedWorkRegistration({
@@ -127,7 +121,7 @@ const { captureBaseline } = useUnsavedWorkRegistration({
 })
 
 const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', minWidth: 224, fixed: 'left', slotName: 'actions' },
+  { key: 'actions', label: '操作', minWidth: 160, fixed: 'left', slotName: 'actions' },
   { key: 'pallet', label: '托盘编码', minWidth: 190, slotName: 'pallet' },
   { key: 'warehouse', label: '所属仓库', minWidth: 210, slotName: 'warehouse' },
   { key: 'palletType', prop: 'palletType', label: '托盘类型', minWidth: 140 },
@@ -142,10 +136,6 @@ function apiId(value: string) {
   return Number.isSafeInteger(numeric) ? numeric : value
 }
 
-function formatDateTime(value?: string | null) {
-  return value?.replace('T', ' ').slice(0, 16) || '—'
-}
-
 function formatCapacity(value: number | string) {
   const numeric = Number(value)
   if (!Number.isFinite(numeric)) return String(value)
@@ -262,24 +252,6 @@ async function fetchDetail(row: PlatformPalletResource) {
   return getPlatformPallet(apiId(String(row.warehouseId)), row.id)
 }
 
-async function openDetail(row: PlatformPalletResource) {
-  const sequence = ++detailSequence
-  detailLoading.value = true
-  detailOpen.value = true
-  detail.value = null
-  try {
-    const result = await fetchDetail(row)
-    if (sequence !== detailSequence || !detailOpen.value) return
-    detail.value = result
-  } catch (error) {
-    if (sequence !== detailSequence) return
-    detailOpen.value = false
-    ElMessage.error(errorMessage(getApiErrorDetails(error, '托盘详情加载失败，请稍后重试')))
-  } finally {
-    if (sequence === detailSequence) detailLoading.value = false
-  }
-}
-
 async function openEdit(row: PlatformPalletResource) {
   if (!isDomesticWarehouse(row.warehouseId)) {
     ElMessage.warning('仅支持编辑国内仓托盘')
@@ -358,12 +330,6 @@ watch([page, pageSize], ([nextPage, nextSize], [previousPage, previousSize]) =>
   if (nextPage === previousPage && nextSize === previousSize) return
   void loadPallets()
 })
-watch(detailOpen, (open) => {
-  if (open) return
-  detailSequence += 1
-  detailLoading.value = false
-  detail.value = null
-})
 watch(() => access.can(editorPermission.value), (canWrite) => {
   if (!canWrite && editorOpen.value) editorOpen.value = false
 }, { flush: 'sync' })
@@ -423,7 +389,6 @@ onMounted(() => {
         <template #toolbar-actions><el-button v-if="access.can('platform:pallet:create')" type="primary" @click="openCreate"><Plus :size="16" />新增托盘</el-button></template>
         <template #actions="{ row }">
           <div class="table-actions pallet-row-actions">
-            <el-button size="small" plain type="primary" title="查看托盘" @click="openDetail(row as PlatformPalletResource)"><Eye :size="15" />查看</el-button>
             <el-button v-if="access.can('platform:pallet:edit') && isDomesticWarehouse((row as PlatformPalletResource).warehouseId)" size="small" plain type="primary" title="编辑托盘" @click="openEdit(row as PlatformPalletResource)"><Pencil :size="15" />编辑</el-button>
             <el-button
               v-if="access.can('platform:pallet:delete')"
@@ -450,42 +415,10 @@ onMounted(() => {
       </section>
     </ListPageLayout>
 
-    <AppDrawer v-model="detailOpen" title="托盘详情" size="min(520px, 94vw)" :loading="detailLoading" :show-confirm="false">
-      <div class="detail-body">
-        <template v-if="detail">
-          <div class="detail-hero"><span><Boxes :size="22" /></span><div><h2>{{ detail.palletCode }}</h2><p>{{ detail.palletType }}</p></div></div>
-          <h3 class="detail-section-title">归属信息</h3>
-          <el-descriptions :column="1" border>
-            <el-descriptions-item label="资源作用域">平台公共资源</el-descriptions-item>
-            <el-descriptions-item label="所属仓库">{{ warehouseFor(detail.warehouseId)?.warehouseName || '—' }}（{{ warehouseFor(detail.warehouseId)?.warehouseCode || '—' }}）</el-descriptions-item>
-          </el-descriptions>
-          <h3 class="detail-section-title">托盘规格</h3>
-          <el-descriptions :column="1" border>
-            <el-descriptions-item label="托盘编码">{{ detail.palletCode }}</el-descriptions-item>
-            <el-descriptions-item label="托盘类型">{{ detail.palletType }}</el-descriptions-item>
-            <el-descriptions-item label="托盘容积">{{ formatCapacity(detail.capacityCbm) }}</el-descriptions-item>
-            <el-descriptions-item label="托盘重量">{{ formatWeight(detail.weightKg) }}</el-descriptions-item>
-            <el-descriptions-item label="颜色">{{ detail.color || '—' }}</el-descriptions-item>
-            <el-descriptions-item label="备注">{{ detail.remark || '—' }}</el-descriptions-item>
-          </el-descriptions>
-          <h3 class="detail-section-title">记录信息</h3>
-          <el-descriptions :column="1" border>
-            <el-descriptions-item label="创建时间">{{ formatDateTime(detail.createdAt) }}</el-descriptions-item>
-            <el-descriptions-item label="更新时间">{{ formatDateTime(detail.updatedAt) }}</el-descriptions-item>
-          </el-descriptions>
-        </template>
-      </div>
-      <template #footer><el-button @click="detailOpen = false">关闭</el-button></template>
-    </AppDrawer>
-
     <AppDialog v-model="editorOpen" :title="editorTitle" width="min(560px, calc(100vw - 28px))" class="pallet-editor-dialog" :close-on-click-modal="false" :confirm-loading="saving" :show-confirm="false" destroy-on-close>
       <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="editor-form">
-        <FormSection class="editor-section" title="归属仓库" description="托盘创建后固定归属于所选仓库，不支持跨仓移动。" aria-labelledby="pallet-ownership-heading">
-          <span id="pallet-ownership-heading" class="sr-only">归属仓库</span>
-          <div v-if="form.id" class="editor-context">
-            <div><strong>{{ editorWarehouse?.warehouseName || '当前仓库' }}</strong><span>{{ editorWarehouse?.warehouseCode || form.warehouseId }} · 平台公共资源</span></div>
-          </div>
-          <el-form-item v-else label="所属仓库" prop="warehouseId" required>
+        <div class="editor-field-grid">
+          <el-form-item label="所属仓库" prop="warehouseId" required>
             <el-select v-model="form.warehouseId" filterable placeholder="请选择国内仓" :loading="warehouseLoading">
               <el-option
                 v-for="warehouse in domesticWarehouses"
@@ -495,15 +428,7 @@ onMounted(() => {
               />
             </el-select>
           </el-form-item>
-        </FormSection>
-
-        <FormSection class="editor-section" title="托盘规格" description="编码由系统自动生成，请维护类型、容积、重量和颜色。" aria-labelledby="pallet-spec-heading">
-          <span id="pallet-spec-heading" class="sr-only">托盘规格</span>
-          <div class="editor-field-grid">
-            <el-form-item label="托盘编码">
-              <el-input :model-value="form.palletCode || '保存后自动生成'" disabled aria-label="托盘编码（系统生成）" />
-            </el-form-item>
-            <el-form-item label="托盘类型" prop="palletType" required>
+          <el-form-item label="托盘类型" prop="palletType" required>
               <el-select
                 v-model="form.palletType"
                 filterable
@@ -514,23 +439,24 @@ onMounted(() => {
               >
                 <el-option v-for="type in palletTypeOptions" :key="type" :label="type" :value="type" />
               </el-select>
-            </el-form-item>
-          </div>
-          <div class="editor-field-grid">
-            <el-form-item label="托盘容积（m³）" prop="capacityCbm" required>
+          </el-form-item>
+        </div>
+        <div class="editor-field-grid">
+          <el-form-item label="托盘容积（m³）" prop="capacityCbm" required>
               <el-input-number v-model="form.capacityCbm" :min="0.000001" :max="999999999999.999999" :precision="6" :step="0.1" controls-position="right" aria-label="托盘容积" />
-            </el-form-item>
-            <el-form-item label="托盘重量（kg）" prop="weightKg" required>
+          </el-form-item>
+          <el-form-item label="托盘重量（kg）" prop="weightKg" required>
               <el-input-number v-model="form.weightKg" :min="0.001" :max="999999999999999.999" :precision="3" :step="0.5" controls-position="right" aria-label="托盘重量" />
-            </el-form-item>
-          </div>
+          </el-form-item>
+        </div>
+        <div class="editor-field-grid">
           <el-form-item label="颜色" prop="color" required>
             <el-input v-model="form.color" maxlength="32" show-word-limit placeholder="例如 黄色" />
           </el-form-item>
           <el-form-item label="备注" prop="remark" class="editor-remark-field">
-            <el-input v-model="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="可填写其他说明" />
+            <el-input v-model="form.remark" maxlength="500" show-word-limit placeholder="选填" />
           </el-form-item>
-        </FormSection>
+        </div>
       </el-form>
       <template #footer>
         <div class="drawer-footer pallet-editor-footer">
@@ -553,32 +479,14 @@ onMounted(() => {
 .stacked-value { display: grid; min-width: 0; gap: 3px; }
 .stacked-value strong, .stacked-value small { overflow-wrap: anywhere; }
 .stacked-value small { color: var(--cc-muted); font-size: 11px; }
-.pallet-cell > span, .detail-hero > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 8px; background: var(--el-color-primary-light-9); color: var(--cc-primary); }
+.pallet-cell > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 8px; background: var(--el-color-primary-light-9); color: var(--cc-primary); }
 .pallet-cell > span { width: 34px; height: 34px; }
 .remark-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.55; }
-.detail-body { min-height: 180px; padding: 24px; box-sizing: border-box; overflow-x: hidden; }
-.detail-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
-.detail-hero > span { width: 46px; height: 46px; }
-.detail-hero h2, .detail-hero p { margin: 0; }
-.detail-hero h2 { font-size: 18px; }
-.detail-hero p { margin-top: 4px; color: var(--cc-muted); font-size: 13px; }
-.detail-section-title { margin: 20px 0 8px; color: var(--cc-text); font-size: 14px; }
-.detail-section-title:first-of-type { margin-top: 0; }
 :global(.pallet-editor-dialog) { max-height: min(760px, calc(100vh - 32px)); display: flex; flex-direction: column; }
 :global(.pallet-editor-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; }
 :global(.pallet-editor-dialog .el-dialog__footer) { flex: 0 0 auto; }
-.editor-form { padding: 4px 24px 28px; }
-.editor-section { padding: 20px 0 4px; border-bottom: 1px solid var(--cc-border); }
-.editor-section:last-child { padding-bottom: 0; border-bottom: 0; }
-.editor-section-heading { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 18px; }
-.editor-section-heading > svg { margin-top: 1px; flex: 0 0 auto; color: var(--cc-primary); }
-.editor-section-heading h3 { margin: 0; color: #172033; font-size: 14px; line-height: 1.4; }
-.editor-section-heading p { margin: 3px 0 0; color: var(--cc-muted); font-size: 11px; line-height: 1.5; }
+.editor-form { padding: 8px 24px 12px; }
 .editor-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
-.editor-context { margin-bottom: 18px; padding: 12px 14px; border-radius: 6px; background: #f8fafc; }
-.editor-context div { display: grid; gap: 3px; }
-.editor-context strong { color: #172033; font-size: 13px; }
-.editor-context span { color: var(--cc-muted); font-size: 11px; }
 .editor-form :deep(.el-input-number), .editor-form :deep(.el-select) { width: 100%; }
 .editor-form :deep(.el-form-item) { margin-bottom: 18px; }
 .editor-form :deep(.el-form-item__label) { padding-bottom: 7px; color: #344054; font-size: 12px; font-weight: 650; line-height: 1.4; }
@@ -596,7 +504,6 @@ onMounted(() => {
 .pallet-editor-footer > div :deep(.el-button + .el-button) { margin-left: 0; }
 
 @media (max-width: 720px) {
-  .detail-body { padding: 16px; }
   .pallet-row-actions :deep(.el-button) { min-height: 36px; padding-inline: 5px; }
   .editor-form { padding-right: 16px; padding-left: 16px; }
   .editor-field-grid { grid-template-columns: 1fr; }