feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面

feat(订阅): 增加订阅订单关联功能及详情查看
feat(商品): 新增订单商品概览页面
style(订单): 优化订单详情显示格式

src/pages/Order/Items/index.tsx

@@ -7,6 +7,7 @@ import dayjs from 'dayjs';
 import { ordercontrollerGetordersales } from '@/servers/api/order';
 import { sitecontrollerAll } from '@/servers/api/site';
 
+<<<<<<< HEAD
 // 列表行数据结构(订单商品聚合)
 interface OrderItemAggRow {
   externalProductId: number; // 商品ID(来自 WooCommerce 产品ID)
@@ -18,13 +19,30 @@ interface OrderItemAggRow {
   secondOrderCount: number; // 客户第二次购买次数(该商品)
   thirdOrderCount: number; // 客户第三次购买次数(该商品)
   moreThirdOrderCount: number; // 客户超过三次购买次数(该商品)
+=======
+// 列表行数据结构（订单商品聚合）
+interface OrderItemAggRow {
+  externalProductId: number; // 商品ID（来自 WooCommerce 产品ID）
+  externalVariationId: number; // 变体ID（来自 WooCommerce 变体ID）
+  name: string; // 商品名称
+  totalQuantity: number; // 总售出数量（时间范围内）
+  totalOrders: number; // 涉及订单数（去重）
+  firstOrderCount: number; // 客户首单次数（该商品）
+  secondOrderCount: number; // 客户第二次购买次数（该商品）
+  thirdOrderCount: number; // 客户第三次购买次数（该商品）
+  moreThirdOrderCount: number; // 客户超过三次购买次数（该商品）
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
 }
 
 const OrderItemsPage: React.FC = () => {
   const actionRef = useRef<ActionType>();
   const { message } = App.useApp();
 
+<<<<<<< HEAD
   // 列配置(中文标题，符合当前项目风格；显示英文默认语言可后续走国际化)
+=======
+  // 列配置（中文标题，符合当前项目风格；显示英文默认语言可后续走国际化）
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
   const columns: ProColumns<OrderItemAggRow>[] = [
     {
       title: '商品名称',
@@ -85,7 +103,11 @@ const OrderItemsPage: React.FC = () => {
       dataIndex: 'siteId',
       valueType: 'select',
       request: async () => {
+<<<<<<< HEAD
         // 拉取站点列表(后台 /site/all)
+=======
+        // 拉取站点列表（后台 /site/all）
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
         const { data = [] } = await sitecontrollerAll();
         return (data || []).map((item: any) => ({ label: item.siteName, value: item.id }));
       },
@@ -103,12 +125,20 @@ const OrderItemsPage: React.FC = () => {
     },
   ];
 
+<<<<<<< HEAD
   // 表格请求方法:调用 /order/getOrderSales 接口并设置 isSource=true 获取订单项聚合
+=======
+  // 表格请求方法：调用 /order/getOrderSales 接口并设置 isSource=true 获取订单项聚合
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
   const request: ProTableProps<OrderItemAggRow>['request'] = async (params:any) => {
     try {
       const { current = 1, pageSize = 10, siteId, name } = params as any;
       const [startDate, endDate] = (params as any).dateRange || [];
+<<<<<<< HEAD
       // 调用后端接口(isSource=true 表示按订单项聚合)
+=======
+      // 调用后端接口（isSource=true 表示按订单项聚合）
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
       const resp = await ordercontrollerGetordersales({
         current,
         pageSize,

src/pages/Order/List/index.tsx

@@ -902,7 +902,27 @@ const Detail: React.FC<{
                 <ul>
                   {record?.items?.map((item: any) => (
                     <li key={item.id}>
+<<<<<<< HEAD
                       {item.name}:{item.quantity} 
+=======
+                      {item.name}：{item.quantity} 
+                    </li>
+                  ))}
+                </ul>
+              );
+            }}
+          />
+          {/* TODO 显示 related order */}
+          <ProDescriptions.Item
+            label="关联订单"
+            span={3}
+            render={(_, record) => {
+              return (
+                <ul>
+                  {record?.related?.map((item: any) => (
+                    <li key={item.id}>
+                       {JSON.stringify(item)}
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
                     </li>
                   ))}
                 </ul>

src/pages/Subscription/List/index.tsx

@@ -35,6 +35,14 @@ const ListPage: React.FC = () => {
   // 表格操作引用:用于在同步后触发表格刷新
   const actionRef = useRef<ActionType>();
   const { message } = App.useApp();
+<<<<<<< HEAD
+=======
+
+  // 关联订单抽屉状态
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerTitle, setDrawerTitle] = useState('详情');
+  const [relatedOrders, setRelatedOrders] = useState<any[]>([]);
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
 
   // 关联订单抽屉状态
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -144,14 +152,22 @@ const ListPage: React.FC = () => {
                 message.warning('该订阅缺少父订单号');
                 return;
               }
+<<<<<<< HEAD
               // 通过父订单号查询关联订单(模糊匹配)
+=======
+              // 通过父订单号查询关联订单（模糊匹配）
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
               const resp = await request('/order/getOrderByNumber', {
                 method: 'POST',
                 data: { number: parentNumber },
               });
               const { success, data, message: errMsg } = resp as any;
               if (!success) throw new Error(errMsg || '获取失败');
+<<<<<<< HEAD
               // 仅保留与父订单号完全一致的订单(避免模糊匹配误入)
+=======
+              // 仅保留与父订单号完全一致的订单（避免模糊匹配误入）
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
               const candidates: any[] = (Array.isArray(data) ? data : []).filter(
                 (c: any) => String(c?.externalOrderId) === parentNumber
               );
@@ -216,7 +232,11 @@ const ListPage: React.FC = () => {
         // 工具栏:订阅同步入口
         toolBarRender={() => [<SyncForm key="sync" tableRef={actionRef} />]}
       />
+<<<<<<< HEAD
       {/* 关联订单抽屉:展示订单号、关系、时间、状态与金额 */}
+=======
+      {/* 关联订单抽屉：展示订单号、关系、时间、状态与金额 */}
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
       <Drawer
         open={drawerOpen}
         title={drawerTitle}
@@ -230,7 +250,11 @@ const ListPage: React.FC = () => {
             <List.Item>
               <List.Item.Meta
                 title={`#${item?.externalOrderId || '-'}`}
+<<<<<<< HEAD
                 description={`关系:${item?.relationship || '-'}，站点:${item?.siteName || '-'}`}
+=======
+                description={`关系：${item?.relationship || '-'}，站点：${item?.siteName || '-'}`}
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
               />
               <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                 <span>{item?.date_created ? dayjs(item.date_created).format('YYYY-MM-DD HH:mm') : '-'}</span>

src/pages/Subscription/Orders/index.tsx

@@ -2,11 +2,19 @@ import React, { useRef, useState } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import type { ProColumns, ActionType, ProTableProps } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
+<<<<<<< HEAD
 import { App, Tag, Button } from 'antd';
 import dayjs from 'dayjs';
 import { ordercontrollerGetorders } from '@/servers/api/order';
 import OrderDetailDrawer from './OrderDetailDrawer';
 import { sitecontrollerAll } from '@/servers/api/site';
+=======
+import { App, Tag, Button, Drawer, List } from 'antd';
+import dayjs from 'dayjs';
+import { ordercontrollerGetorders } from '@/servers/api/order';
+import { sitecontrollerAll } from '@/servers/api/site';
+import { request } from 'umi';
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
 
 interface OrderItemRow {
   id: number;
@@ -22,11 +30,20 @@ interface OrderItemRow {
 const OrdersPage: React.FC = () => {
   const actionRef = useRef<ActionType>();
   const { message } = App.useApp();
+<<<<<<< HEAD
   // 抽屉状态:改为复用订单详情抽屉组件
   const [detailOpen, setDetailOpen] = useState(false);
   const [detailRecord, setDetailRecord] = useState<any | null>(null);
   const [detailOrderId, setDetailOrderId] = useState<number | null>(null);
   const Noop: React.FC<any> = () => null;
+=======
+  // 抽屉状态：用于展示与订阅相关的订单详情（含行项目meta）
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerTitle, setDrawerTitle] = useState<string>('订阅关联');
+  const [drawerItems, setDrawerItems] = useState<any[]>([]);
+  const [drawerMeta, setDrawerMeta] = useState<any[]>([]);
+  const [isSubscription, setIsSubscription] = useState<boolean>(false);
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
 
   const columns: ProColumns<OrderItemRow>[] = [
     {
@@ -84,10 +101,48 @@ const OrdersPage: React.FC = () => {
       render: (_, row) => (
         <Button
           size="small"
+<<<<<<< HEAD
           onClick={() => {
             setDetailRecord(row as any);
             setDetailOrderId(row.id as number);
             setDetailOpen(true);
+=======
+          onClick={async () => {
+            try {
+              // 拉取订单详情（包含 items 与 meta_data），用于判断是否为订阅订单
+              const resp = await request(`/order/${row.id}`, { method: 'GET' });
+              const { success, data, message: errMsg } = resp as any;
+              if (!success) throw new Error(errMsg || '获取失败');
+              const items: any[] = data?.items || [];
+              const orderMeta: any[] = data?.meta_data || [];
+              // 订阅识别：检查行项目 meta_data 中的关键键
+              const keys = [
+                'is_subscription',
+                '_wcs_bought_as_subscription',
+                'subscription_product_type',
+                'subscription_period',
+                'subscription_interval',
+                '_subscription',
+                '_subscription_period',
+                '_subscription_interval',
+              ];
+              let detected = false;
+              for (const it of items) {
+                const md = Array.isArray(it?.meta_data) ? it.meta_data : [];
+                if (md.some((m: any) => keys.includes(String(m?.key)))) {
+                  detected = true;
+                  break;
+                }
+              }
+              setIsSubscription(detected);
+              setDrawerItems(items);
+              setDrawerMeta(orderMeta);
+              setDrawerTitle(`订阅关联（订单号：${row.externalOrderId}）`);
+              setDrawerOpen(true);
+            } catch (e: any) {
+              message.error(e?.message || '获取失败');
+            }
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
           }}
         >
           查看
@@ -149,6 +204,7 @@ const OrdersPage: React.FC = () => {
         }}
         toolBarRender={false}
       />
+<<<<<<< HEAD
       {/* 订阅关联:直接使用订单详情抽屉组件 */}
       {detailRecord && detailOrderId !== null && (
         <OrderDetailDrawer
@@ -162,6 +218,50 @@ const OrdersPage: React.FC = () => {
           SalesChangeComponent={Noop}
         />
       )}
+=======
+      {/* 订阅关联抽屉：展示行项目与订单元数据，标注是否订阅 */}
+      <Drawer
+        open={drawerOpen}
+        title={drawerTitle}
+        width={720}
+        onClose={() => setDrawerOpen(false)}
+      >
+        <div style={{ marginBottom: 12 }}>
+          <Tag color={isSubscription ? 'green' : 'default'}>
+            {isSubscription ? '订阅订单' : '非订阅订单'}
+          </Tag>
+        </div>
+        {/* 行项目列表，展示 meta_data 关键键值 */}
+        <List
+          header={<div>订单行项目</div>}
+          dataSource={drawerItems}
+          renderItem={(item: any) => (
+            <List.Item>
+              <List.Item.Meta
+                title={`${item?.name || '-'}（数量：${item?.quantity || 0}）`}
+                description={`SKU：${item?.sku || '-'}，产品ID：${item?.externalProductId || '-'}，变体ID：${item?.externalVariationId || '-'}`}
+              />
+              <div style={{ maxWidth: 420 }}>
+                {(Array.isArray(item?.meta_data) ? item.meta_data : []).map((m: any) => (
+                  <Tag key={`${m?.key}-${m?.id}`}>{`${m?.key}: ${m?.value}`}</Tag>
+                ))}
+              </div>
+            </List.Item>
+          )}
+        />
+        {/* 订单级元数据 */}
+        <List
+          style={{ marginTop: 16 }}
+          header={<div>订单元数据</div>}
+          dataSource={drawerMeta}
+          renderItem={(m: any) => (
+            <List.Item>
+              <Tag>{`${m?.key}: ${m?.value}`}</Tag>
+            </List.Item>
+          )}
+        />
+      </Drawer>
+>>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
     </PageContainer>
   );
 };