update order items

frontend/src/pages/order-items/__tests__/index.spec.ts

@@ -305,6 +305,7 @@ describe('OrderItemsPage', () => {
           SearchOutlined: { template: '<span />' },
           ReloadOutlined: { template: '<span />' },
           EyeOutlined: { template: '<span />' },
+          CopyOutlined: { template: '<span class="copy-icon-stub" />' },
           CascadeFilter: { template: '<div class="cascade-filter-stub" />' },
         },
       },
@@ -317,7 +318,7 @@ describe('OrderItemsPage', () => {
   it('renders page title and action buttons', async () => {
     await mountPage()
 
-    expect(wrapper.text()).toContain('订单子项')
+    expect(wrapper.text()).toContain('订单项管理')
     const buttons = wrapper.findAll('.ant-btn')
     const buttonTexts = buttons.map((b) => b.text())
     expect(buttonTexts.some((t) => t.includes('搜索'))).toBe(true)
@@ -446,7 +447,7 @@ describe('OrderItemsPage', () => {
     await nextTick()
 
     const drawerHtml = document.body.querySelector('.ant-drawer')?.innerHTML || ''
-    expect(drawerHtml).toContain('父订单摘要')
+    expect(drawerHtml).toContain('所属订单')
     expect(drawerHtml).toContain('ORD-20260101-001')
     expect(drawerHtml).toContain('199.99')
     expect(drawerHtml).toContain('189.99')
@@ -486,6 +487,20 @@ describe('OrderItemsPage', () => {
     expect(drawerHtml).toContain('暂无数据')
   })
 
+  it('shows placeholder when parent_order is null', async () => {
+    const { api } = await mountPage()
+    vi.mocked(api.get).mockResolvedValueOnce({ ...mockItemDetail, parent_order: null })
+
+    const buttons = Array.from(document.body.querySelectorAll('.ant-btn'))
+    const viewBtn = buttons.find((b) => b.textContent?.trim() === '查看')
+    viewBtn?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await flushPromises()
+    await nextTick()
+
+    const drawerHtml = document.body.querySelector('.ant-drawer')?.innerHTML || ''
+    expect(drawerHtml).toContain('无关联订单')
+  })
+
   it('shows error message when detail request fails', async () => {
     const { api } = await mountPage()
     const { message } = await import('ant-design-vue')

frontend/src/pages/order-items/index.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
 import { api } from '@/utils/request'
-import {
+import { useOrderItemStore, type OrderItemRecord } from '@/stores/order-item'
-  useOrderItemStore,
+import type { OrderItemDetail } from '@/types/api'
-  type OrderItemDetail,
-} from '@/stores/order-item'
-import type { OrderItemRecord } from '@/stores/order'
 import CascadeFilter from '@/components/CascadeFilter.vue'
 import {
   SearchOutlined,
   ReloadOutlined,
   EyeOutlined,
+  CopyOutlined,
 } from '@ant-design/icons-vue'
 
+const router = useRouter()
 const store = useOrderItemStore()
 
 // Detail drawer
@@ -21,23 +20,6 @@ const drawerLoading = ref(false)
 const itemDetail = ref<OrderItemDetail | null>(null)
 let detailRequestId = 0
 
-const columns = [
-  { title: 'ID', dataIndex: 'id', width: 80, fixed: 'left' as const },
-  { title: '公司', key: 'company', width: 100 },
-  { title: '平台', key: 'platform', width: 100 },
-  { title: '店铺', key: 'store', width: 120 },
-  { title: '平台订单ID', key: 'platform_order_id', width: 160, ellipsis: true },
-  { title: '子订单ID', dataIndex: 'sub_order_id', width: 140 },
-  { title: '平台商品ID', key: 'platform_product_id', width: 140, ellipsis: true },
-  { title: 'SKU', dataIndex: 'product_sku', width: 120 },
-  { title: '单价', key: 'unit_price', width: 100 },
-  { title: '数量', dataIndex: 'quantity', width: 80 },
-  { title: '优惠', key: 'discount', width: 100 },
-  { title: '小计', key: 'total', width: 100 },
-  { title: '创建时间', key: 'created_date', width: 140 },
-  { title: '操作', key: 'action', width: 100, fixed: 'right' as const },
-]
-
 const orderStatusMap: Record<number, { text: string; color: string }> = {
   1: { text: '待付款', color: 'orange' },
   2: { text: '支付失败', color: 'red' },
@@ -50,6 +32,23 @@ const orderStatusMap: Record<number, { text: string; color: string }> = {
   9: { text: '发货前取消', color: 'default' },
 }
 
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80, fixed: 'left' as const },
+  { title: '公司', key: 'company', width: 100 },
+  { title: '平台', key: 'platform', width: 100 },
+  { title: '店铺', key: 'store', width: 120 },
+  { title: '平台订单ID', key: 'platform_order_id', width: 160, ellipsis: true },
+  { title: '子订单ID', key: 'sub_order_id', width: 140, ellipsis: true },
+  { title: '平台商品ID', key: 'platform_product_id', width: 140, ellipsis: true },
+  { title: 'SKU', key: 'product_sku', width: 120, ellipsis: true },
+  { title: '单价', key: 'unit_price', width: 100 },
+  { title: '数量', dataIndex: 'quantity', width: 80 },
+  { title: '优惠', key: 'discount', width: 100 },
+  { title: '小计', key: 'total', width: 100 },
+  { title: '创建时间', key: 'created_date', width: 140 },
+  { title: '操作', key: 'action', width: 100, fixed: 'right' as const },
+]
+
 // RangePicker dayjs 桥接
 const createdDateRange = computed({
   get: () => {
@@ -97,6 +96,19 @@ function formatTime(time: string | null) {
   return time.replace('T', ' ').substring(0, 16)
 }
 
+async function handleCopyOrderId(platformOrderId: string) {
+  try {
+    await navigator.clipboard.writeText(platformOrderId)
+    message.success('已复制平台订单ID')
+  } catch {
+    message.error('复制失败')
+  }
+}
+
+function handleGoToOrder(platformOrderId: string) {
+  router.push({ path: '/orders', query: { platform_order_id: platformOrderId } })
+}
+
 async function handleViewDetail(record: { id: number }) {
   const currentRequestId = ++detailRequestId
   drawerVisible.value = true
@@ -121,7 +133,7 @@ async function handleViewDetail(record: { id: number }) {
 
 <template>
   <div>
-    <h2 class="text-xl font-semibold mb-4">订单子项</h2>
+    <h2 class="text-xl font-semibold mb-4">订单项管理</h2>
 
     <!-- Filter area -->
     <a-card class="mb-4">
@@ -181,7 +193,7 @@ async function handleViewDetail(record: { id: number }) {
         :data-source="store.orderItems"
         :loading="store.loading"
         :pagination="false"
-        :scroll="{ x: 1500 }"
+        :scroll="{ x: 1680 }"
         row-key="id"
       >
         <template #bodyCell="{ column, record }">
@@ -195,11 +207,26 @@ async function handleViewDetail(record: { id: number }) {
             {{ store.storeMap.get(record.store_id) || record.store_id }}
           </template>
           <template v-else-if="column.key === 'platform_order_id'">
-            {{ record.platform_order_id }}
+            <a
+              class="text-blue-500 cursor-pointer"
+              @click="handleGoToOrder(record.platform_order_id)"
+            >
+              {{ record.platform_order_id }}
+            </a>
+            <CopyOutlined
+              class="ml-1 cursor-pointer text-gray-400 hover:text-blue-500"
+              @click.stop="handleCopyOrderId(record.platform_order_id)"
+            />
+          </template>
+          <template v-else-if="column.key === 'sub_order_id'">
+            {{ record.sub_order_id || '-' }}
           </template>
           <template v-else-if="column.key === 'platform_product_id'">
             {{ record.platform_product_id }}
           </template>
+          <template v-else-if="column.key === 'product_sku'">
+            {{ record.product_sku || '-' }}
+          </template>
           <template v-else-if="column.key === 'unit_price'">
             {{ formatAmount(record.unit_price) }}
           </template>
@@ -247,66 +274,16 @@ async function handleViewDetail(record: { id: number }) {
     >
       <a-spin :spinning="drawerLoading">
         <template v-if="itemDetail">
-          <!-- 父订单摘要 -->
+          <!-- 订单项信息 -->
-          <a-descriptions title="父订单摘要" :column="2" bordered class="mb-4">
-            <a-descriptions-item label="平台订单ID">
-              {{ itemDetail.parent_order.platform_order_id }}
-            </a-descriptions-item>
-            <a-descriptions-item label="订单状态">
-              <a-tag
-                :color="orderStatusMap[itemDetail.parent_order.order_status_id]?.color || 'default'"
-              >
-                {{
-                  orderStatusMap[itemDetail.parent_order.order_status_id]?.text
-                    || `状态 ${itemDetail.parent_order.order_status_id}`
-                }}
-              </a-tag>
-            </a-descriptions-item>
-            <a-descriptions-item label="总金额">
-              {{ formatAmount(itemDetail.parent_order.total_amount) }}
-            </a-descriptions-item>
-            <a-descriptions-item label="实付金额">
-              {{ formatAmount(itemDetail.parent_order.total_paid) }}
-            </a-descriptions-item>
-            <a-descriptions-item label="创建时间">
-              {{ formatTime(itemDetail.parent_order.created_date) }}
-            </a-descriptions-item>
-            <a-descriptions-item label="支付时间">
-              {{ formatTime(itemDetail.parent_order.paid_date) }}
-            </a-descriptions-item>
-          </a-descriptions>
-
-          <!-- 订单项基本信息 -->
           <a-descriptions title="订单项信息" :column="2" bordered class="mb-4">
             <a-descriptions-item label="ID">{{ itemDetail.id }}</a-descriptions-item>
-            <a-descriptions-item label="公司">
-              {{ store.companyMap.get(itemDetail.company_id) || itemDetail.company_id }}
-            </a-descriptions-item>
-            <a-descriptions-item label="平台">
-              {{ store.platformMap.get(itemDetail.platform_id) || itemDetail.platform_id }}
-            </a-descriptions-item>
-            <a-descriptions-item label="店铺">
-              {{ store.storeMap.get(itemDetail.store_id) || itemDetail.store_id }}
-            </a-descriptions-item>
-            <a-descriptions-item label="平台订单ID">
-              {{ itemDetail.platform_order_id }}
-            </a-descriptions-item>
-            <a-descriptions-item label="子订单ID">
-              {{ itemDetail.sub_order_id || '-' }}
-            </a-descriptions-item>
-            <a-descriptions-item label="子订单类型">
-              {{ itemDetail.sub_order_type_id }}
-            </a-descriptions-item>
             <a-descriptions-item label="平台商品ID">
               {{ itemDetail.platform_product_id }}
             </a-descriptions-item>
-            <a-descriptions-item label="商品ID">
-              {{ itemDetail.product_id }}
-            </a-descriptions-item>
             <a-descriptions-item label="SKU">
               {{ itemDetail.product_sku || '-' }}
             </a-descriptions-item>
-            <a-descriptions-item label="条码">
+            <a-descriptions-item label="条形码">
               {{ itemDetail.product_barcode || '-' }}
             </a-descriptions-item>
             <a-descriptions-item label="单价">
@@ -321,12 +298,58 @@ async function handleViewDetail(record: { id: number }) {
             <a-descriptions-item label="小计">
               {{ formatAmount(itemDetail.total) }}
             </a-descriptions-item>
+            <a-descriptions-item label="子订单ID">
+              {{ itemDetail.sub_order_id || '-' }}
+            </a-descriptions-item>
             <a-descriptions-item label="创建时间">
               {{ formatTime(itemDetail.created_date) }}
             </a-descriptions-item>
-            <a-descriptions-item label="更新时间">
+          </a-descriptions>
-              {{ formatTime(itemDetail.updated_at) }}
+
-            </a-descriptions-item>
+          <!-- 所属订单 -->
+          <a-descriptions title="所属订单" :column="2" bordered class="mb-4">
+            <template v-if="itemDetail.parent_order">
+              <a-descriptions-item label="平台订单ID" :span="2">
+                <a
+                  class="text-blue-500 cursor-pointer"
+                  @click="handleGoToOrder(itemDetail.parent_order.platform_order_id)"
+                >
+                  {{ itemDetail.parent_order.platform_order_id }}
+                </a>
+                <CopyOutlined
+                  class="ml-2 cursor-pointer text-blue-500"
+                  @click="handleCopyOrderId(itemDetail.parent_order.platform_order_id)"
+                />
+              </a-descriptions-item>
+              <a-descriptions-item label="订单状态">
+                <a-tag
+                  :color="orderStatusMap[itemDetail.parent_order.order_status_id]?.color
+                    || 'default'"
+                >
+                  {{
+                    orderStatusMap[itemDetail.parent_order.order_status_id]?.text
+                      || `状态 ${itemDetail.parent_order.order_status_id}`
+                  }}
+                </a-tag>
+              </a-descriptions-item>
+              <a-descriptions-item label="订单金额">
+                {{ formatAmount(itemDetail.parent_order.total_amount) }}
+              </a-descriptions-item>
+              <a-descriptions-item label="已支付">
+                {{ formatAmount(itemDetail.parent_order.total_paid) }}
+              </a-descriptions-item>
+              <a-descriptions-item label="创建时间">
+                {{ formatTime(itemDetail.parent_order.created_date) }}
+              </a-descriptions-item>
+              <a-descriptions-item label="付款时间">
+                {{ formatTime(itemDetail.parent_order.paid_date) }}
+              </a-descriptions-item>
+            </template>
+            <template v-else>
+              <a-descriptions-item :span="2">
+                <span class="text-gray-400">无关联订单</span>
+              </a-descriptions-item>
+            </template>
           </a-descriptions>
 
           <!-- ext JSON -->

frontend/src/stores/order-item.ts

@@ -1,29 +1,8 @@
 import { api } from '@/utils/request'
-import type { PaginatedData } from '@/types/api'
+import type { PaginatedData, OrderItemFilters } from '@/types/api'
 import type { OrderItemRecord } from '@/stores/order'
 
-/** 父订单摘要（详情接口嵌套返回） */
+export type { OrderItemRecord }
-export interface ParentOrderSummary {
-  id: number
-  platform_order_id: string
-  order_status_id: number
-  total_amount: string
-  total_paid: string
-  created_date: string | null
-  paid_date: string | null
-}
-
-/** 订单项详情（含父订单摘要） */
-export interface OrderItemDetail extends OrderItemRecord {
-  parent_order: ParentOrderSummary
-}
-
-export interface OrderItemFilters {
-  platform_order_id: string
-  platform_product_id: string
-  product_sku: string
-  created_date_range: [string, string] | null
-}
 
 /** 名称映射用的查找表 */
 interface LookupItem {
@@ -32,7 +11,7 @@ interface LookupItem {
   label?: string
 }
 
-export const useOrderItemStore = defineStore('order-item', () => {
+export const useOrderItemStore = defineStore('orderItem', () => {
   const orderItems = ref<OrderItemRecord[]>([])
   const loading = ref(false)
   const pagination = reactive({

frontend/src/types/api.ts

@@ -19,6 +19,50 @@ export interface PaginationParams {
   per_page?: number
 }
 
+/** 父订单摘要（订单项详情接口返回） */
+export interface ParentOrderSummary {
+  id: number
+  platform_order_id: string
+  order_status_id: number
+  total_amount: string
+  total_paid: string
+  created_date: string | null
+  paid_date: string | null
+}
+
+/** 订单项详情（含父订单摘要） */
+export interface OrderItemDetail {
+  id: number
+  company_id: number
+  platform_id: number
+  store_id: number
+  order_id: number
+  platform_order_id: string
+  sub_order_id: string | null
+  sub_order_type_id: number
+  product_id: number
+  platform_product_id: string
+  product_sku: string | null
+  product_barcode: string | null
+  unit_price: string
+  quantity: number
+  discount: string
+  total: string
+  created_date: string | null
+  ext: Record<string, unknown> | null
+  created_at: string
+  updated_at: string
+  parent_order: ParentOrderSummary | null
+}
+
+/** 订单项筛选参数 */
+export interface OrderItemFilters {
+  platform_order_id: string
+  platform_product_id: string
+  product_sku: string
+  created_date_range: [string, string] | null
+}
+
 /** 业务异常 */
 export class ApiError extends Error {
   code: number