优化

src/modules/inbounds/pages/InboundOrderDetailView.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ArrowLeft } from '@lucide/vue'
+import InboundWorkflowWorkspace from '../components/InboundWorkflowWorkspace.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+function routeValue(value: unknown) {
+  if (Array.isArray(value)) return String(value[0] || '')
+  return value === null || value === undefined ? '' : String(value)
+}
+
+const inboundId = computed(() => routeValue(route.params.inboundId))
+const customerId = computed(() => routeValue(route.query.tenantId))
+
+function backToList() {
+  void router.push({ name: 'inbound-orders', query: customerId.value ? { tenantId: customerId.value } : undefined })
+}
+</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>
+
+      <div class="detail-page-content">
+        <InboundWorkflowWorkspace
+          v-if="inboundId && customerId"
+          :customer-id="customerId"
+          :inbound-id="inboundId"
+        />
+        <el-empty
+          v-else
+          :description="inboundId ? '缺少所属企业信息，请从入库单列表重新打开' : '缺少有效的入库单标识'"
+        />
+      </div>
+    </section>
+  </div>
+</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-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-actions { width: 100%; align-items: stretch; flex-direction: column; }
+  .detail-page-actions :deep(.el-button) { width: 100%; min-height: 44px; }
+}
+</style>