From 22ecfba0e506a14a8793eb48a300e5b3a19f5abe 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          | 40 +++++++++---------
 src/pages/Subscription/Orders/index.tsx |  1 -
 3 files changed, 76 insertions(+), 20 deletions(-)
 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 4561f65..b4c513c 100644
--- a/src/pages/Order/List/index.tsx
+++ b/src/pages/Order/List/index.tsx
@@ -77,9 +77,10 @@ import {
   Space,
   Tabs,
   TabsProps,
+  Tag,
 } from 'antd';
 import Item from 'antd/es/list/Item';
-import dayjs from 'dayjs';
+import RelatedOrders from './RelatedOrders';
 import React, { useMemo, useRef, useState } from 'react';
 import { printPDF } from '@/utils/util';
 
@@ -172,9 +173,16 @@ const ListPage: React.FC = () => {
       hideInTable: true,
       valueType: 'dateRange',
     },
+    
     {
-      title: '订单号',
-      dataIndex: 'externalOrderId',
+      title: '订阅',
+      dataIndex: 'isSubscription',
+      hideInSearch: true,
+      render: (_, record) => {
+        const related = Array.isArray((record as any)?.related) ? (record as any).related : [];
+        const isSub = related.some((it) => it?.externalSubscriptionId || it?.billing_period || it?.line_items);
+        return <Tag color={isSub ? 'green' : 'default'}>{isSub ? '是' : '否'}</Tag>;
+      },
     },
     {
       title: '站点',
@@ -885,6 +893,7 @@ const Detail: React.FC<{
               );
             }}
           />
+          {/* 原始订单 */}
           <ProDescriptions.Item
             label="原始订单"
             span={3}
@@ -900,22 +909,15 @@ const Detail: React.FC<{
               );
             }}
           />
-          {/* TODO 显示 related order */}
-          <ProDescriptions.Item
-            label="关联订单"
-            span={3}
-            render={(_, record) => {
-              return (
-                <ul>
-                  {record?.related?.map((item: any) => (
-                    <li key={item.id}>
-                       {JSON.stringify(item)}
-                    </li>
-                  ))}
-                </ul>
-              );
-            }}
-          />
+          {/* 显示 related order */}
+<ProDescriptions.Item
+  label="关联"
+  span={3}
+  render={(_, record) => {
+    return <RelatedOrders data={record?.related} />;
+  }}
+/>
+          {/* 订单内容 */}
           <ProDescriptions.Item
             label="订单内容"
             span={3}
diff --git a/src/pages/Subscription/Orders/index.tsx b/src/pages/Subscription/Orders/index.tsx
index e940239..71dd731 100644
--- a/src/pages/Subscription/Orders/index.tsx
+++ b/src/pages/Subscription/Orders/index.tsx
@@ -6,7 +6,6 @@ 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';
 
 interface OrderItemRow {
   id: number;