优化
This commit is contained in:
@@ -144,24 +144,26 @@ async function selectScope(wrapper: VueWrapper) {
|
||||
enableAutoUnmount(afterEach)
|
||||
afterAll(() => vi.unstubAllGlobals())
|
||||
|
||||
const densitySource = readFileSync(resolve(process.cwd(), 'src/styles/adminDensity.css'), 'utf8')
|
||||
|
||||
describe('LocationsView', () => {
|
||||
it('uses bordered striped tables and explicit semantic row actions', () => {
|
||||
expect(locationsSource).toContain('border')
|
||||
expect(locationsSource).toContain('stripe')
|
||||
expect(locationsSource).toMatch(/size="small"\s+plain\s+type="primary"/)
|
||||
expect(locationsSource).toMatch(/size="small"\s+plain\s+:type=/)
|
||||
expect(locationsSource).toMatch(/size="small"\s+plain\s+type="danger"/)
|
||||
expect(locationsSource).toMatch(/size="small"\s+class="density-action"/)
|
||||
expect(locationsSource).toContain(':data-tone="(row as PlatformLocationResource).status === \'AVAILABLE\' ? \'danger\' : \'success\'"')
|
||||
expect(locationsSource).toContain('class="density-action" data-tone="danger"')
|
||||
expect(locationsSource).not.toContain('<Eye :size="15" />')
|
||||
expect(locationsSource).toContain('<Pencil :size="15" />')
|
||||
expect(locationsSource).toContain('<Power :size="15" />')
|
||||
expect(locationsSource).toContain('<Trash2 :size="15" />')
|
||||
expect(locationsSource).not.toContain('<Pencil :size="15" />')
|
||||
expect(locationsSource).not.toContain('<Power :size="15" />')
|
||||
expect(locationsSource).not.toContain('<Trash2 :size="15" />')
|
||||
expect(locationsSource).toContain('@media (max-width: 720px)')
|
||||
})
|
||||
it('uses the prototype-sized centered editor without a detail drawer or section cards', () => {
|
||||
expect(locationsSource).not.toContain('AppDrawer')
|
||||
expect(locationsSource).not.toContain('FormSection')
|
||||
expect(locationsSource).toContain('width="min(560px, calc(100vw - 28px))"')
|
||||
expect(locationsSource).toContain(':global(.location-editor-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; }')
|
||||
expect(densitySource).toContain('.admin-density-dialog.el-dialog .el-dialog__body { min-height: 0; overflow-y: auto;')
|
||||
expect(locationsSource).toContain('.editor-field-grid { grid-template-columns: minmax(0, 1fr); }')
|
||||
})
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import '@/styles/adminDensity.css'
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { MapPin, Pencil, Plus, Power, Save, Trash2 } from '@lucide/vue'
|
||||
import { MapPin, Plus, Save } from '@lucide/vue'
|
||||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||||
import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
|
||||
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
||||
@@ -530,32 +530,30 @@ onMounted(() => {
|
||||
>
|
||||
<template #toolbar-actions><el-button v-if="access.can('platform:location:create')" type="primary" @click="openCreate"><Plus :size="16" />新增库位</el-button></template>
|
||||
<template #actions="{ row }">
|
||||
<div class="table-actions location-actions">
|
||||
<div class="location-actions density-actions">
|
||||
<el-button
|
||||
v-if="canEdit(row as PlatformLocationResource)"
|
||||
size="small"
|
||||
plain
|
||||
type="primary"
|
||||
class="density-action"
|
||||
:loading="editorLoading"
|
||||
:disabled="loading || editorLoading"
|
||||
@click="openEdit(row as PlatformLocationResource)"
|
||||
><Pencil :size="15" />编辑</el-button>
|
||||
>编辑</el-button>
|
||||
<el-button
|
||||
v-if="canChangeStatus(row as PlatformLocationResource)"
|
||||
size="small"
|
||||
plain
|
||||
:type="(row as PlatformLocationResource).status === 'AVAILABLE' ? 'danger' : 'success'"
|
||||
class="density-action"
|
||||
:data-tone="(row as PlatformLocationResource).status === 'AVAILABLE' ? 'danger' : 'success'"
|
||||
:disabled="loading || actionLoadingIds.has(String((row as PlatformLocationResource).id))"
|
||||
@click="toggleStatus(row as PlatformLocationResource)"
|
||||
><Power :size="15" />{{ (row as PlatformLocationResource).status === 'AVAILABLE' ? '停用' : '启用' }}</el-button>
|
||||
>{{ (row as PlatformLocationResource).status === 'AVAILABLE' ? '停用' : '启用' }}</el-button>
|
||||
<el-button
|
||||
v-if="canDelete(row as PlatformLocationResource)"
|
||||
size="small"
|
||||
plain
|
||||
type="danger"
|
||||
class="density-action" data-tone="danger"
|
||||
:disabled="loading || actionLoadingIds.has(String((row as PlatformLocationResource).id))"
|
||||
@click="removeLocation(row as PlatformLocationResource)"
|
||||
><Trash2 :size="15" />删除</el-button>
|
||||
>删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #location="{ row }">
|
||||
@@ -678,29 +676,25 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.state-alert p { margin: 6px 0 0; line-height: 1.55; }
|
||||
.state-alert .el-button { margin-top: 10px; }
|
||||
.location-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
|
||||
.location-actions :deep(.el-button) { margin-left: 0; }
|
||||
.location-cell { display: flex; min-width: 0; align-items: center; gap: 10px; }
|
||||
.state-alert p { margin: var(--admin-space-2, 6px) 0 0; line-height: 1.55; }
|
||||
.state-alert .el-button { margin-top: var(--admin-space-4, 10px); }
|
||||
.location-actions { white-space: nowrap; }
|
||||
.location-cell { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-4, 10px); }
|
||||
.location-cell > span { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 7px; background: #eef3fa; color: var(--cc-primary); }
|
||||
.location-cell > div, .stacked-value { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
|
||||
.location-cell strong, .stacked-value strong { overflow-wrap: anywhere; }
|
||||
.location-cell small, .stacked-value small { color: var(--cc-muted); font-size: 12px; }
|
||||
.location-cell small, .stacked-value small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
||||
.remark-cell { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
||||
:global(.location-editor-dialog) { max-height: min(760px, calc(100vh - 32px)); display: flex; flex-direction: column; }
|
||||
:global(.location-editor-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; }
|
||||
:global(.location-editor-dialog .el-dialog__footer) { flex: 0 0 auto; }
|
||||
.editor-form { padding: 0; }
|
||||
.editor-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
|
||||
.editor-form :deep(.el-input-number), .editor-form :deep(.el-select) { width: 100%; }
|
||||
.editor-form :deep(.el-form-item) { margin-bottom: 14px; }
|
||||
.editor-form :deep(.el-form-item__label) { padding-bottom: 4px; color: #344054; font-size: 12px; font-weight: 650; line-height: 1.4; }
|
||||
.editor-form :deep(.el-form-item__label) { padding-bottom: var(--admin-space-1, 4px); color: #344054; font-size: var(--admin-font-caption, 12px); font-weight: 650; line-height: 1.4; }
|
||||
.editor-remark-field { margin-bottom: 0 !important; }
|
||||
.editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.editor-footer > span { color: var(--cc-muted); font-size: 12px; }
|
||||
.editor-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-3, 8px); }
|
||||
.editor-footer > span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
||||
.editor-footer > span i { color: var(--el-color-danger); font-style: normal; }
|
||||
.editor-footer > div { display: flex; gap: 8px; }
|
||||
.editor-footer > div { display: flex; gap: var(--admin-space-3, 8px); }
|
||||
.editor-footer :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
@@ -115,22 +115,24 @@ async function loadRows(wrapper: VueWrapper, warehouseId = '') {
|
||||
enableAutoUnmount(afterEach)
|
||||
afterAll(() => vi.unstubAllGlobals())
|
||||
|
||||
const densitySource = readFileSync(resolve(process.cwd(), 'src/styles/adminDensity.css'), 'utf8')
|
||||
|
||||
describe('PalletsView', () => {
|
||||
it('uses bordered striped tables and explicit semantic row actions', () => {
|
||||
expect(palletsSource).toContain('border')
|
||||
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('class="density-action" size="small" title="编辑托盘"')
|
||||
expect(palletsSource).toContain('class="density-action" data-tone="danger"')
|
||||
expect(palletsSource).not.toContain('<Eye :size="15" />')
|
||||
expect(palletsSource).toContain('<Pencil :size="15" />')
|
||||
expect(palletsSource).toContain('<Trash2 :size="15" />')
|
||||
expect(palletsSource).not.toContain('<Pencil :size="15" />')
|
||||
expect(palletsSource).not.toContain('<Trash2 :size="15" />')
|
||||
expect(palletsSource).toContain('@media (max-width: 720px)')
|
||||
})
|
||||
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; }')
|
||||
expect(densitySource).toContain('.admin-density-dialog.el-dialog .el-dialog__body { min-height: 0; overflow-y: auto;')
|
||||
expect(palletsSource).toContain('.editor-field-grid { grid-template-columns: minmax(0, 1fr); }')
|
||||
})
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import '@/styles/adminDensity.css'
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { Boxes, Pencil, Plus, Save, Trash2, Warehouse as WarehouseIcon } from '@lucide/vue'
|
||||
import { Boxes, Plus, Save, 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'
|
||||
@@ -397,17 +397,16 @@ 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 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>
|
||||
<div class="pallet-row-actions density-actions">
|
||||
<el-button v-if="access.can('platform:pallet:edit') && isDomesticWarehouse((row as PlatformPalletResource).warehouseId)" class="density-action" size="small" title="编辑托盘" @click="openEdit(row as PlatformPalletResource)">编辑</el-button>
|
||||
<el-button
|
||||
v-if="access.can('platform:pallet:delete')"
|
||||
size="small"
|
||||
plain
|
||||
type="danger"
|
||||
class="density-action" data-tone="danger"
|
||||
title="删除托盘"
|
||||
:loading="deletingIds.has(String((row as PlatformPalletResource).id))"
|
||||
@click="removePallet(row as PlatformPalletResource)"
|
||||
><Trash2 :size="15" />删除</el-button>
|
||||
>删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #pallet="{ row }">
|
||||
@@ -478,42 +477,38 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pallet-page { display: grid; min-width: 0; gap: 16px; }
|
||||
.summary-grid { display:flex; flex-wrap:wrap; gap:8px 28px; padding:8px 12px; border:1px solid var(--cc-border); background:#fff; }
|
||||
.summary-grid article { display:flex; align-items:baseline; gap:8px; }
|
||||
.summary-grid span { color:var(--cc-muted); font-size:12px; }.summary-grid strong { font-size:14px; }.summary-grid .idle { color:var(--el-color-success); }.summary-grid .occupied { color:var(--el-color-warning); }
|
||||
.surface-panel { overflow: hidden; border: 1px solid var(--cc-border); border-radius: 4px; background: #fff; }
|
||||
.pallet-page { display: grid; min-width: 0; gap: var(--admin-space-6, 16px); }
|
||||
.summary-grid { display:flex; flex-wrap:wrap; gap:var(--admin-space-3, 8px) 28px; padding:var(--admin-space-3, 8px) var(--admin-space-5, 12px); border:1px solid var(--cc-border); background:var(--admin-surface, #fff); }
|
||||
.summary-grid article { display:flex; align-items:baseline; gap:var(--admin-space-3, 8px); }
|
||||
.summary-grid span { color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); }.summary-grid strong { font-size:var(--admin-font-section, 14px); }.summary-grid .idle { color:var(--el-color-success); }.summary-grid .occupied { color:var(--el-color-warning); }
|
||||
.surface-panel { overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--admin-radius, 4px); background: var(--admin-surface, #fff); }
|
||||
.table-panel { min-width: 0; }
|
||||
.context-empty { padding: 16px; color: var(--cc-muted); text-align: center; }
|
||||
.pallet-row-actions { gap: 8px; white-space: nowrap; }
|
||||
.pallet-row-actions :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
.pallet-cell { display: flex; align-items: center; gap: 10px; }
|
||||
.context-empty { padding: var(--admin-space-6, 16px); color: var(--cc-muted); text-align: center; }
|
||||
.pallet-row-actions { white-space: nowrap; }
|
||||
.pallet-cell { display: flex; align-items: center; gap: var(--admin-space-4, 10px); }
|
||||
.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: 12px; }
|
||||
.stacked-value small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
||||
.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: 20px; height: 20px; }
|
||||
.remark-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.55; }
|
||||
: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: 0; }
|
||||
.editor-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
|
||||
.editor-form :deep(.el-input-number), .editor-form :deep(.el-select) { width: 100%; }
|
||||
.editor-form :deep(.el-form-item) { margin-bottom: 14px; }
|
||||
.editor-form :deep(.el-form-item__label) { padding-bottom: 4px; color: #344054; font-size: 12px; font-weight: 650; line-height: 1.4; }
|
||||
.editor-form :deep(.el-form-item__label) { padding-bottom: var(--admin-space-1, 4px); color: #344054; font-size: var(--admin-font-caption, 12px); font-weight: 650; line-height: 1.4; }
|
||||
@media (max-width: 720px) {
|
||||
.summary-grid { grid-template-columns:1fr; }
|
||||
.editor-field-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
}
|
||||
.editor-remark-field { margin-bottom: 0 !important; }
|
||||
.field-help { margin: 6px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
|
||||
.drawer-footer { display: flex; justify-content: flex-end; gap: 8px; }
|
||||
.field-help { margin: var(--admin-space-2, 6px) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); line-height: 1.5; }
|
||||
.drawer-footer { display: flex; justify-content: flex-end; gap: var(--admin-space-3, 8px); }
|
||||
.drawer-footer :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
.pallet-editor-footer { align-items: center; justify-content: space-between; }
|
||||
.pallet-editor-footer > span { color: var(--cc-muted); font-size: 12px; }
|
||||
.pallet-editor-footer > span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
||||
.pallet-editor-footer > span i { color: var(--el-color-danger); font-style: normal; }
|
||||
.pallet-editor-footer > div { display: flex; gap: 8px; }
|
||||
.pallet-editor-footer > div { display: flex; gap: var(--admin-space-3, 8px); }
|
||||
.pallet-editor-footer > div :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
Reference in New Issue
Block a user