From 66ba46e4d008261d88235a1737d0abbbea76dd1b Mon Sep 17 00:00:00 2001
From: tikkhun <tikkhun@163.com>
Date: Fri, 21 Nov 2025 11:27:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=85=B3=E8=81=94=E8=AE=A2=E5=8D=95=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96=E8=AE=A2=E9=98=85=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加 RelatedOrders 组件用于统一展示关联订单和订阅信息
在订单列表中增加订阅标签显示
移除未使用的 request 导入
---
 src/pages/Order/List/RelatedOrders.tsx  | 55 +++++++++++++++++++++++++
 src/pages/Order/List/index.tsx          |  7 ++++
 src/pages/Subscription/Orders/index.tsx |  3 ++
 3 files changed, 65 insertions(+)
 create mode 100644 src/pages/Order/List/RelatedOrders.tsx

diff --git a/src/pages/Order/List/RelatedOrders.tsx b/src/pages/Order/List/RelatedOrders.tsx
new file mode 100644
index 0000000..ed94eb7
--- /dev/null
+++ b/src/pages/Order/List/RelatedOrders.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Empty, Tag } from 'antd';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+
+/**
+ * RelatedOrders 表格组件
+ * 用于展示订单详情中的关联数据（订阅/订单），按统一表格样式渲染
+ * 中文注释：本组件将订阅与订单统一归一化为五列展示，便于快速浏览
+ */
+const RelatedOrders: React.FC<{ data?: any[] }> = ({ data = [] }) => {
+  const rows = (Array.isArray(data) ? data : []).map((it: any) => {
+    const isSubscription = !!it?.externalSubscriptionId || !!it?.billing_period || !!it?.line_items;
+    const number = isSubscription ? `#${it?.externalSubscriptionId || it?.id}` : `#${it?.externalOrderId || it?.id}`;
+    const relationship = isSubscription ? 'Subscription' : 'Order';
+    const dateRaw = it?.start_date || it?.date_created || it?.createdAt || it?.updatedAt;
+    const dateText = dateRaw ? dayjs(dateRaw).fromNow() : '-';
+    const status = (isSubscription ? it?.status : it?.orderStatus) || '-';
+    const statusLower = String(status).toLowerCase();
+    const color = statusLower === 'active' ? 'green' : statusLower === 'cancelled' ? 'red' : 'default';
+    const totalNum = Number(it?.total || 0);
+    const totalText = isSubscription ? `$${totalNum.toFixed(2)} / ${it?.billing_period || 'period'}` : `$${totalNum.toFixed(2)}`;
+    return { key: `${isSubscription ? 'sub' : 'order'}-${it?.id}`, number, relationship, dateText, status, color, totalText };
+  });
+
+  if (rows.length === 0) return <Empty description="暂无关联" />;
+
+  return (
+    <div style={{ width: '100%' }}>
+      {/* 表头（英文文案，符合国际化默认英文的要求） */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', padding: '8px 0', fontWeight: 600 }}>
+        <div>订单编号</div>
+        <div>关系</div>
+        <div>日期</div>
+        <div>状态</div>
+        <div>金额</div>
+      </div>
+      <div>
+        {rows.map((r) => (
+          <div key={r.key} style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', padding: '6px 0', borderTop: '1px solid #f0f0f0' }}>
+            <div><a>{r.number}</a></div>
+            <div>{r.relationship}</div>
+            <div style={{ color: '#1677ff' }}>{r.dateText}</div>
+            <div><Tag color={r.color}>{r.status}</Tag></div>
+            <div>{r.totalText}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RelatedOrders;
diff --git a/src/pages/Order/List/index.tsx b/src/pages/Order/List/index.tsx
index fd10a92..8319353 100644
--- a/src/pages/Order/List/index.tsx
+++ b/src/pages/Order/List/index.tsx
@@ -80,7 +80,11 @@ import {
   Tag,
 } from 'antd';
 import Item from 'antd/es/list/Item';
+<<<<<<< HEAD
 import RelatedOrders from '../../Subscription/Orders/RelatedOrders';
+=======
+import RelatedOrders from './RelatedOrders';
+>>>>>>> 43be89b (feat(订单列表): 添加关联订单组件并优化订阅显示)
 import React, { useMemo, useRef, useState } from 'react';
 import { printPDF } from '@/utils/util';
 
@@ -912,6 +916,7 @@ const Detail: React.FC<{
               );
             }}
           />
+<<<<<<< HEAD
           {/* TODO 显示 related order */}
           <ProDescriptions.Item
             label="关联订单"
@@ -929,6 +934,8 @@ const Detail: React.FC<{
               );
             }}
           />
+=======
+>>>>>>> 43be89b (feat(订单列表): 添加关联订单组件并优化订阅显示)
           {/* 显示 related order */}
 <ProDescriptions.Item
   label="关联"
diff --git a/src/pages/Subscription/Orders/index.tsx b/src/pages/Subscription/Orders/index.tsx
index 6086b4a..787e3f0 100644
--- a/src/pages/Subscription/Orders/index.tsx
+++ b/src/pages/Subscription/Orders/index.tsx
@@ -13,8 +13,11 @@ import { App, Tag, Button, Drawer, List } from 'antd';
 import dayjs from 'dayjs';
 import { ordercontrollerGetorders } from '@/servers/api/order';
 import { sitecontrollerAll } from '@/servers/api/site';
+<<<<<<< HEAD
 import { request } from 'umi';
 >>>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面)
+=======
+>>>>>>> 43be89b (feat(订单列表): 添加关联订单组件并优化订阅显示)
 
 interface OrderItemRow {
   id: number;