优化

src/modules/inbounds/pages/InboundOrderDetailView.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ArrowLeft } from '@lucide/vue'
+import { ArrowLeft, RefreshCw } from '@lucide/vue'
+import AdminPage from '@/shared/components/AdminPage.vue'
+import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
+import FormSection from '@/shared/components/FormSection.vue'
+import PageToolbar from '@/shared/components/PageToolbar.vue'
 import InboundWorkflowWorkspace from '../components/InboundWorkflowWorkspace.vue'
 
 const route = useRoute()
@@ -21,19 +25,17 @@ function backToList() {
 </script>
 
 <template>
-  <div class="business-page inbound-detail-page">
-    <section class="surface-panel detail-page">
-      <header class="detail-page-header">
-        <div class="detail-page-heading">
-          <h1>入库单详情</h1>
-          <p>查看基本信息、货品与测量、费用信息、状态历史及其他记录。</p>
-        </div>
-        <div class="detail-page-actions">
-          <el-button @click="backToList"><ArrowLeft :size="16" />返回入库单列表</el-button>
-        </div>
-      </header>
+  <AdminPage as="div" class="business-page inbound-detail-page">
+    <DetailPageLayout class="surface-panel detail-page" aria-label="入库单详情">
+      <template #header>
+        <PageToolbar title="入库单详情" description="查看基本信息、货品与测量、费用信息、状态历史及其他记录。">
+          <div class="detail-page-actions">
+            <el-button @click="backToList"><ArrowLeft :size="16" />返回入库单列表</el-button>
+          </div>
+        </PageToolbar>
+      </template>
 
-      <div class="detail-page-content">
+      <FormSection title="入库处理工作区" :bordered="false">
         <InboundWorkflowWorkspace
           v-if="inboundId && customerId"
           :customer-id="customerId"
@@ -43,23 +45,19 @@ function backToList() {
           v-else
           :description="inboundId ? '缺少所属企业信息，请从入库单列表重新打开' : '缺少有效的入库单标识'"
         />
-      </div>
-    </section>
-  </div>
+      </FormSection>
+    </DetailPageLayout>
+  </AdminPage>
 </template>
 
 <style scoped>
 .inbound-detail-page { min-width: 0; }
-.detail-page { overflow: hidden; }
-.detail-page-header { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--cc-border); }
-.detail-page-heading { min-width: 0; }
-.detail-page-heading h1 { margin: 0; color: var(--cc-text); font-size: 20px; line-height: 1.35; }
-.detail-page-heading p { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
+.detail-page { overflow: hidden; padding: 20px 24px; }
 .detail-page-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 12px; }
-.detail-page-content { min-width: 0; }
 @media (max-width: 720px) {
-  .detail-page-header { align-items: flex-start; flex-direction: column; padding: 16px; }
+  .detail-page { padding: 16px; }
   .detail-page-actions { width: 100%; align-items: stretch; flex-direction: column; }
   .detail-page-actions :deep(.el-button) { width: 100%; min-height: 44px; }
 }
+@media (max-width: 360px) { .detail-page { padding: 12px; } }
 </style>