优化手机端

apps/frontend/src/pages/worker/WorkerOrdersPage.tsx

@@ -1178,18 +1178,15 @@ export default function WorkerOrdersPage() {
 
       <Drawer
         className="worker-order-detail-drawer"
-        title={
+        title="订单详情"
-          detailOrder
-            ? `${detailOrder.productName || '订单详情'} · ${getDisplayOrderNo(detailOrder)}`
-            : '订单详情'
-        }
         width={isMobile ? '100%' : 820}
         open={Boolean(detailOrder)}
         destroyOnHidden
         onClose={() => setDetailOrder(null)}
-        extra={
+      >
-          detailOrder ? (
+        {detailOrder ? (
-            <Space>
+          <div className="worker-order-detail-stack">
+            <div className="worker-order-detail-actions">
               <Tag color={resolveStatusColor(detailOrder.status)}>
                 {formatStatus(detailOrder.status)}
               </Tag>
@@ -1212,12 +1209,7 @@ export default function WorkerOrdersPage() {
                   问题反馈
                 </Button>
               ) : null}
-            </Space>
+            </div>
-          ) : null
-        }
-      >
-        {detailOrder ? (
-          <div className="worker-order-detail-stack">
             <Card title="基础信息" size="small">
               <Descriptions column={{ xs: 1, md: 2 }} bordered size="small">
                 <Descriptions.Item label="商品">{detailOrder.productName || '-'}</Descriptions.Item>

apps/frontend/src/styles/worker.css

@@ -241,6 +241,10 @@
   overflow-x: hidden;
 }
 
+.worker-order-detail-drawer .ant-drawer-content {
+  max-width: 100vw;
+}
+
 .worker-order-detail-stack > .ant-card,
 .worker-order-detail-stack > .ant-card .ant-card-body,
 .worker-order-detail-stack .ant-descriptions {
@@ -252,7 +256,7 @@
 .worker-order-detail-stack .ant-descriptions-view {
   width: 100%;
   max-width: 100%;
-  overflow-x: auto;
+  overflow-x: hidden;
 }
 
 .worker-order-detail-stack .ant-descriptions-view table {
@@ -267,6 +271,14 @@
   word-break: break-word;
 }
 
+.worker-order-detail-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
 /* ===== 工单流转记录时间线 ===== */
 .work-order-event-timeline {
   margin-top: 4px;
@@ -1285,9 +1297,9 @@ body {
 
 /* 底部操作与备注行 */
 .worker-order-mobile-footer-row {
-  display: flex;
+  display: grid;
-  align-items: center;
+  grid-template-columns: max-content minmax(0, 1fr);
-  justify-content: space-between;
+  align-items: start;
   gap: 8px;
   border-top: 1px dashed #f1f5f9;
   padding-top: 10px;
@@ -1295,8 +1307,8 @@ body {
 }
 
 .worker-order-mobile-note-block {
-  min-width: 0;
+  min-width: 104px;
-  flex: 1;
+  max-width: 140px;
 }
 
 .worker-order-mobile-add-note-btn {
@@ -1309,14 +1321,19 @@ body {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 4px;
+  min-width: 104px;
+  white-space: nowrap;
 }
 
 .worker-order-mobile-btn-group {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
   gap: 6px;
-  flex-shrink: 0;
+  min-width: 0;
 }
 
 .worker-order-mobile-action-submit {