src/pages/Order/List/index.tsx

@@ -80,8 +80,7 @@ import {
   Tag,
 } from 'antd';
 import Item from 'antd/es/list/Item';
-import RelatedOrders from './RelatedOrders';
-import OrderDetailDrawer from './OrderDetailDrawer';
+import RelatedOrders from '../../Subscription/Orders/RelatedOrders';
 import React, { useMemo, useRef, useState } from 'react';
 import { printPDF } from '@/utils/util';
 
@@ -90,9 +89,6 @@ const ListPage: React.FC = () => {
   const [activeKey, setActiveKey] = useState<string>('all');
   const [count, setCount] = useState<any[]>([]);
   const [activeLine, setActiveLine] = useState<number>(-1);
-  const [detailOpen, setDetailOpen] = useState(false);
-  const [detailRecord, setDetailRecord] = useState<any | null>(null);
-  const [detailOrderId, setDetailOrderId] = useState<number | null>(null);
   const tabs: TabsProps['items'] = useMemo(() => {
     const total = count.reduce((acc, cur) => acc + Number(cur.count), 0);
     const tabs = [
@@ -316,31 +312,13 @@ const ListPage: React.FC = () => {
             ) : (
               <></>
             )}
-            <Button
+            <Detail
               key={record.id}
-              type="primary"
-              onClick={() => {
-                setDetailRecord(record);
-                setDetailOrderId(record.id as number);
-                setDetailOpen(true);
-                setActiveLine(record.id);
-              }}
-            >
-              <FileDoneOutlined />
-              详情
-            </Button>
-            {detailRecord && detailOrderId !== null && (
-              <OrderDetailDrawer
-                open={detailOpen}
-                onClose={() => setDetailOpen(false)}
-                tableRef={actionRef}
-                orderId={detailOrderId as number}
-                record={detailRecord as any}
-                setActiveLine={setActiveLine}
-                OrderNoteComponent={OrderNote}
-                SalesChangeComponent={SalesChange}
-              />
-            )}
+              record={record}
+              tableRef={actionRef}
+              orderId={record.id as number}
+              setActiveLine={setActiveLine}
+            />
             <Divider type="vertical" />
             <Dropdown
               menu={{

src/pages/Subscription/Orders/OrderDetailDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   App,
   Button,
@@ -10,8 +10,8 @@ import {
   Space,
   Tag,
 } from 'antd';
-import { ActionType } from '@ant-design/pro-components';
-import { CopyOutlined, DownOutlined, FileDoneOutlined } from '@ant-design/icons';
+import { ActionType, ProDescriptions } from '@ant-design/pro-components';
+import { CopyOutlined, DeleteFilled } from '@ant-design/icons';
 
 // 服务器 API 引用（保持与原 index.tsx 一致）
 import {
@@ -20,10 +20,12 @@ import {
   ordercontrollerSyncorderbyid,
 } from '@/servers/api/order';
 import { logisticscontrollerDelshipment } from '@/servers/api/logistics';
+import { sitecontrollerAll } from '@/servers/api/site';
 
 // 工具与子组件
 import { formatShipmentState, formatSource } from '@/utils/format';
 import RelatedOrders from './RelatedOrders';
+import { ORDER_STATUS_ENUM } from '@/constants';
 
 // 中文注释：为保持原文件结构简单，此处从 index.tsx 引入的子组件仍由原文件导出或保持原状
 // 若后续需要彻底解耦，可将 OrderNote / Shipping / SalesChange 也独立到文件
@@ -54,40 +56,25 @@ const OrderDetailDrawer: React.FC<OrderDetailDrawerProps> = ({
 }) => {
   const { message } = App.useApp();
   const ref = useRef<ActionType>();
-  const [detail, setDetail] = useState<any | null>(null);
 
   // 中文注释：加载详情数据（与 index.tsx 中完全保持一致）
   const initRequest = async () => {
-    const { data, success }: API.OrderDetailRes =
-      await ordercontrollerGetorderdetail({ orderId });
-    if (!success || !data) return null;
-    // 中文注释：销售项合并 SKU，展示数量汇总
-    data.sales = data.sales?.reduce(
-      (acc: API.OrderSale[], cur: API.OrderSale) => {
-        const idx = acc.findIndex((v: any) => v.productId === cur.productId);
-        if (idx === -1) acc.push(cur);
-        else acc[idx].quantity += cur.quantity;
-        return acc;
-      },
-      [],
-    );
-    return data;
+    const { data, success }: API.OrderDetailRes = await ordercontrollerGetorderdetail({ orderId });
+    if (!success || !data) return { data: {} } as any;
+    data.sales = data.sales?.reduce((acc: API.OrderSale[], cur: API.OrderSale) => {
+      const idx = acc.findIndex((v: any) => v.productId === cur.productId);
+      if (idx === -1) acc.push(cur);
+      else acc[idx].quantity += cur.quantity;
+      return acc;
+    }, []);
+    return { data } as any;
   };
 
   useEffect(() => {
-    (async () => {
-      if (open && orderId) {
-        try {
-          const data = await initRequest();
-          setDetail(data);
-        } catch (e) {
-          setDetail(null);
-        }
-      } else {
-        setDetail(null);
-      }
-    })();
-  }, [open, orderId]);
+    if (open && record?.id) {
+      setActiveLine(record.id as number);
+    }
+  }, [open, record?.id]);
 
   return (
     <Drawer
@@ -233,147 +220,106 @@ const OrderDetailDrawer: React.FC<OrderDetailDrawerProps> = ({
           : []),
       ]}
     >
-      {(() => { setActiveLine(record.id as number); return null; })()}
-      {/** 中文注释：优先使用详情数据，其次使用列表行数据 */}
-      {(() => {
-        const drec: any = detail || record;
-        {/* 中文注释：基本信息展示（保持原有格式） */}
-      return (<>
-      <div style={{ marginBottom: 12 }}>
-        <Space>
-          <Tag>{drec?.orderStatus}</Tag>
-          <Tag>{formatSource(drec.source_type, drec.utm_source)}</Tag>
-        </Space>
-      </div>
-
-      {/* 中文注释：原始订单行项目 */}
-      <div style={{ marginBottom: 12 }}>
-        <div style={{ fontWeight: 600, marginBottom: 6 }}>原始订单</div>
-        {Array.isArray((drec as any)?.items) && drec.items.length > 0 ? (
+      <ProDescriptions labelStyle={{ width: '100px' }} actionRef={ref} request={initRequest}>
+        <ProDescriptions.Item label="站点" dataIndex="siteId" valueType="select" request={async () => {
+          const { data = [] } = await sitecontrollerAll();
+          return data.map((item) => ({ label: item.siteName, value: item.id }));
+        }} />
+        <ProDescriptions.Item label="订单日期" dataIndex="date_created" valueType="dateTime" />
+        <ProDescriptions.Item label="订单状态" dataIndex="orderStatus" valueType="select" valueEnum={ORDER_STATUS_ENUM as any} />
+        <ProDescriptions.Item label="金额" dataIndex="total" />
+        <ProDescriptions.Item label="客户邮箱" dataIndex="customer_email" />
+        <ProDescriptions.Item label="联系电话" span={3} render={(_, r: any) => (
+          <div><span>{r?.shipping?.phone || r?.billing?.phone || '-'}</span></div>
+        )} />
+        <ProDescriptions.Item label="交易Id" dataIndex="transaction_id" />
+        <ProDescriptions.Item label="IP" dataIndex="customer_id_address" />
+        <ProDescriptions.Item label="设备" dataIndex="device_type" />
+        <ProDescriptions.Item label="来源" render={(_, r: any) => formatSource(r.source_type, r.utm_source)} />
+        <ProDescriptions.Item label="原订单状态" dataIndex="status" valueType="select" valueEnum={ORDER_STATUS_ENUM as any} />
+        <ProDescriptions.Item label="支付链接" dataIndex="payment_url" span={3} copyable />
+        <ProDescriptions.Item label="客户备注" dataIndex="customer_note" span={3} />
+        <ProDescriptions.Item label="发货信息" span={3} render={(_, r: any) => (
+          <div>
+            <div>company：<span>{r?.shipping?.company || r?.billing?.company || '-'}</span></div>
+            <div>first_name：<span>{r?.shipping?.first_name || r?.billing?.first_name || '-'}</span></div>
+            <div>last_name：<span>{r?.shipping?.last_name || r?.billing?.last_name || '-'}</span></div>
+            <div>country：<span>{r?.shipping?.country || r?.billing?.country || '-'}</span></div>
+            <div>state：<span>{r?.shipping?.state || r?.billing?.state || '-'}</span></div>
+            <div>city：<span>{r?.shipping?.city || r?.billing?.city || '-'}</span></div>
+            <div>postcode：<span>{r?.shipping?.postcode || r?.billing?.postcode || '-'}</span></div>
+            <div>phone：<span>{r?.shipping?.phone || r?.billing?.phone || '-'}</span></div>
+            <div>address_1：<span>{r?.shipping?.address_1 || r?.billing?.address_1 || '-'}</span></div>
+          </div>
+        )} />
+        <ProDescriptions.Item label="原始订单" span={3} render={(_, r: any) => (
           <ul>
-            {drec.items.map((item: any) => (
-              <li key={item.id}>
-                {item.name}：{item.quantity}
-              </li>
+            {(r?.items || []).map((item: any) => (
+              <li key={item.id}>{item.name}：{item.quantity}</li>
             ))}
           </ul>
-        ) : (
-          <Empty description="暂无数据" />
-        )}
-      </div>
-
-      {/* 中文注释：关联（订阅/订单），使用已存在的 RelatedOrders 组件 */}
-      <div style={{ marginBottom: 12 }}>
-        <div style={{ fontWeight: 600, marginBottom: 6 }}>关联</div>
-        <RelatedOrders data={(drec as any)?.related} />
-      </div>
-
-      {/* 中文注释：订单内容（销售项） */}
-      <div style={{ marginBottom: 12 }}>
-        <div style={{ fontWeight: 600, marginBottom: 6 }}>订单内容</div>
-        {Array.isArray((drec as any)?.sales) && drec.sales.length > 0 ? (
+        )} />
+        <ProDescriptions.Item label="关联" span={3} render={(_, r: any) => (
+          <RelatedOrders data={r?.related} />
+        )} />
+        <ProDescriptions.Item label="订单内容" span={3} render={(_, r: any) => (
           <ul>
-            {drec.sales.map((item: any) => (
-              <li key={item.id}>
-                {item.name}：{item.quantity}
-              </li>
+            {(r?.sales || []).map((item: any) => (
+              <li key={item.id}>{item.name}：{item.quantity}</li>
             ))}
           </ul>
-        ) : (
-          <Empty description="暂无数据" />
-        )}
-      </div>
-
-      {/* 中文注释：备注 */}
-      <div style={{ marginBottom: 12 }}>
-        <div style={{ fontWeight: 600, marginBottom: 6 }}>备注</div>
-        {Array.isArray((drec as any)?.notes) && drec.notes.length > 0 ? (
-          <div style={{ width: '100%' }}>
-            {drec.notes.map((note: any) => (
-              <div style={{ marginBottom: 10 }} key={note.id}>
-                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <span>{note.username}</span>
-                  <span>{note.createdAt}</span>
+        )} />
+        <ProDescriptions.Item label="换货" span={3} render={(_, r: any) => (
+          <SalesChangeComponent detailRef={ref} id={r.id as number} />
+        )} />
+        <ProDescriptions.Item label="备注" span={3} render={(_, r: any) => {
+          if (!r.notes || r.notes.length === 0) return (<Empty description="暂无备注" />);
+          return (
+            <div style={{ width: '100%' }}>
+              {r.notes.map((note: any) => (
+                <div style={{ marginBottom: 10 }} key={note.id}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <span>{note.username}</span>
+                    <span>{note.createdAt}</span>
+                  </div>
+                  <div>{note.content}</div>
                 </div>
-                <div>{note.content}</div>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <Empty description="暂无备注" />
-        )}
-      </div>
-
-      {/* 中文注释：物流信息 */}
-      <div style={{ marginBottom: 12 }}>
-        <div style={{ fontWeight: 600, marginBottom: 6 }}>物流信息</div>
-        {Array.isArray((drec as any)?.shipment) && drec.shipment.length > 0 ? (
-          <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
-            {(drec as any).shipment.map((v: any) => (
-              <Card
-                key={v.id}
-                style={{ marginBottom: '10px' }}
-                extra={formatShipmentState(v.state)}
-                title={
-                  <>
-                    {v.tracking_provider}
-                    {v.primary_tracking_number}
-                    <CopyOutlined
-                      onClick={async () => {
-                        try {
-                          await navigator.clipboard.writeText(v.tracking_url);
-                          message.success('复制成功！');
-                        } catch (err) {
-                          message.error('复制失败！');
-                        }
-                      }}
-                    />
-                  </>
-                }
-                actions={
-                  v.state === 'waiting-for-scheduling' || v.state === 'waiting-for-transit'
-                    ? [
-                        <Popconfirm
-                          key="action-cancel"
-                          title="取消运单"
-                          description="确认取消运单？"
-                          onConfirm={async () => {
-                            try {
-                              const { success, message: errMsg } = await logisticscontrollerDelshipment({ id: v.id });
-                              if (!success) throw new Error(errMsg);
-                              tableRef.current?.reload();
-                            } catch (error: any) {
-                              message.error(error.message);
-                            }
-                          }}
-                        >
-                          取消运单
-                        </Popconfirm>,
-                      ]
-                    : []
-                }
-              >
-                <div>订单号： {Array.isArray(v?.orderIds) ? v.orderIds.join(',') : '-'}</div>
-                {Array.isArray(v?.items) &&
-                  v.items.map((item: any) => (
-                    <div key={item.id}>
-                      {item.name}: {item.quantity}
-                    </div>
+              ))}
+            </div>
+          );
+        }} />
+        <ProDescriptions.Item label="物流信息" span={3} render={(_, r: any) => {
+          if (!r.shipment || r.shipment.length === 0) return (<Empty description="暂无物流信息" />);
+          return (
+            <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+              {r.shipment.map((v: any) => (
+                <Card key={v.id} style={{ marginBottom: '10px' }} extra={formatShipmentState(v.state)} title={<>
+                  {v.tracking_provider}
+                  {v.primary_tracking_number}
+                  <CopyOutlined onClick={async () => {
+                    try { await navigator.clipboard.writeText(v.tracking_url); message.success('复制成功！'); }
+                    catch { message.error('复制失败！'); }
+                  }} />
+                </>}
+                actions={ (v.state === 'waiting-for-scheduling' || v.state === 'waiting-for-transit') ? [
+                  <Popconfirm key="action-cancel" title="取消运单" description="确认取消运单？" onConfirm={async () => {
+                    try { const { success, message: errMsg } = await logisticscontrollerDelshipment({ id: v.id }); if (!success) throw new Error(errMsg); tableRef.current?.reload(); ref.current?.reload?.(); }
+                    catch (error: any) { message.error(error.message); }
+                  }}>
+                    <DeleteFilled />取消运单
+                  </Popconfirm>
+                ] : [] }
+                >
+                  <div>订单号： {Array.isArray(v?.orderIds) ? v.orderIds.join(',') : '-'}</div>
+                  {Array.isArray(v?.items) && v.items.map((item: any) => (
+                    <div key={item.id}>{item.name}: {item.quantity}</div>
                   ))}
-              </Card>
-            ))}
-          </div>
-        ) : (
-          <Empty description="暂无物流信息" />
-        )}
-      </div>
-
-      {/* 中文注释：换货（外部传入组件） */}
-      <div style={{ marginBottom: 12 }}>
-        <SalesChangeComponent detailRef={ref} id={drec.id as number} />
-      </div>
-      </>);
-      })()}
+                </Card>
+              ))}
+            </div>
+          );
+        }} />
+      </ProDescriptions>
     </Drawer>
   );
 };