修复订单详情抽屉内容溢出

This commit is contained in:
yml2213
2026-08-19 18:49:15 +08:00
parent 1bea34367b
commit ca34187b0b
3 changed files with 36 additions and 0 deletions
@@ -1071,6 +1071,7 @@ export default function WorkOrdersPanel() {
/>
</Card>
<Drawer
className="worker-order-detail-drawer"
title={
detailOrder
? `${detailOrder.productName || '工单详情'} · ${getDisplayOrderNo(detailOrder)}`
@@ -1081,6 +1081,7 @@ export default function WorkerOrdersPage() {
)}
<Drawer
className="worker-order-detail-drawer"
title={
detailOrder
? `${detailOrder.productName || '订单详情'} · ${getDisplayOrderNo(detailOrder)}`
+34
View File
@@ -173,6 +173,40 @@
.worker-order-detail-stack {
display: grid;
gap: 16px;
min-width: 0;
width: 100%;
}
/* 详情抽屉内的描述表格必须服从抽屉宽度,长订单号等内容在单元格内换行。 */
.worker-order-detail-drawer .ant-drawer-body {
min-width: 0;
overflow-x: hidden;
}
.worker-order-detail-stack > .ant-card,
.worker-order-detail-stack > .ant-card .ant-card-body,
.worker-order-detail-stack .ant-descriptions {
min-width: 0;
max-width: 100%;
width: 100%;
}
.worker-order-detail-stack .ant-descriptions-view {
width: 100%;
max-width: 100%;
overflow-x: auto;
}
.worker-order-detail-stack .ant-descriptions-view table {
width: 100%;
table-layout: fixed;
}
.worker-order-detail-stack .ant-descriptions-item-label,
.worker-order-detail-stack .ant-descriptions-item-content {
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* ===== 工单流转记录时间线 ===== */