+ {lastQueryResultRef.current ? (
+
+ );*/
+
+ // 计算按钮显示的文字
+ const displayText = isCounting ? `剩余: ${remainingTime} 秒` : '物流查询';
+
+ return (
+ {lastQueryResultRef.current}
+ ) : ( +暂无最新物流详情
+ )} +
+
+ 正在加载物流详情...
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ {error}
+
+ );
+ }
+
+ if (!detailData) {
+ return (
+
+ 鼠标悬停查看详情
+
+ );
+ }
+
+ return (
+
+ {/* 物流单号标题区域 */}
+
+ );
+ };
+
+ // ==================== 渲染主标签 ====================
+
+ /**
+ * 渲染状态标签
+ * @returns 状态标签JSX元素
+ */
+ const renderStatusTag = () => {
+ // 处理null值：显示为待发货
+ if (opCode === null || opCode === undefined || opCode === '') {
+ return (
+
+
+
+ {/* 物流轨迹详情 */}
+
+
+
+
+ {detailData.trackingNumber}
+
+
+
+
+
+
+ {detailData.lastUpdateTime}
+
+
+
+ {
+ // 获取状态信息
+ const statusInfo = SF_OPCODE_STATUS_MAP[route.opCode];
+ const isLatest = index === 0;
+
+ return {
+ color: isLatest ? (statusInfo?.color || '#1890ff') : '#d9d9d9',
+ dot: isLatest ? (
+
+ ) : undefined,
+ children: (
+
+
+ {/* 记录总数提示 */}
+ {detailData.routes.length > 0 && (
+
+ {/* 第一行：状态 地点 时间 最新标签 */}
+
+ ),
+ };
+ })}
+ />
+
+
+ {statusInfo?.status || `状态码: ${route.opCode}`}
+
+ {route.location && (
+
+ {/* 第二行：详细备注 */}
+
+
+ )}
+
+ {route.time}
+
+ {isLatest && (
+
+ 最新
+
+ )}
+
+ {route.remark}
+
+
+
+ 共 {detailData.routes.length} 条物流记录
+
+
+ )}
+
- 物流单号：{logisticsNumber}
-
- )
+ try {
+ JSON.parse(str);
+ return true;
+ } catch {
+ return false;
+ }
+ };
+
+ /**
+ * 解析物流详情JSON并格式化
+ */
+ const parseLogisticsDetails = () => {
+ if (!logisticsDetails) return { routes: [], hasValidData: false, lastUpdateTime: '' };
+
+ try {
+ let detailData;
+
+ if (typeof logisticsDetails === 'string') {
+ // 检查是否是有效的JSON字符串
+ if (!isValidJSON(logisticsDetails)) {
+ console.log('物流详情不是JSON格式:', logisticsDetails);
+ return { routes: [], hasValidData: false, lastUpdateTime: '' };
+ }
+ detailData = JSON.parse(logisticsDetails);
+ } else {
+ detailData = logisticsDetails;
}
- onMouseEnter={fetchLogisticsDetails}
- >
- {logisticsDetails || '暂无物流详情'}
-
+
+ 正在加载物流详情...
+
+
+ );
+ }
+
+ if (!logisticsDetails && !logisticsNumber) {
+ return (
+
+ 鼠标悬停查看详情
+
+ );
+ }
+
+ const { routes: routesData, hasValidData, isEmpty, lastUpdateTime } = parseLogisticsDetails();
+
+ return (
+
+ {/* 物流单号标题区域 */}
+
+ );
+ };
+
+ /**
+ * 渲染状态标签
+ */
+ const renderStatusTag = () => {
+ if (loading) {
+ return
+
+
+ {/* 物流轨迹详情 */}
+
+
+
+
+ {logisticsNumber || '未知单号'}
+
+
+ {lastUpdateTime && (
+
+
+
+
+ {lastUpdateTime}
+
+
+ )}
+
+ {routesData.length > 0 ? (
+ {
+ // 获取状态信息
+ const statusInfo = SF_OPCODE_STATUS_MAP[route.opCode];
+ const isLatest = index === 0;
+
+ return {
+ color: isLatest ? (statusInfo?.color || '#1890ff') : '#d9d9d9',
+ dot: isLatest ? (
+
+ ) : undefined,
+ children: (
+
+
+ {/* 记录总数提示 */}
+ {routesData.length > 0 && (
+
+ {/* 第一行：状态 地点 时间 最新标签 */}
+
+ ),
+ };
+ })}
+ />
+ ) : (
+
+
+ {statusInfo?.status || `${route.opCode}`}
+
+ {route.location && (
+
+ {/* 第二行：详细备注 */}
+
+
+ )}
+
+ {route.time}
+
+ {isLatest && (
+
+ 最新
+
+ )}
+
+ {route.remark}
+
+
+ {hasValidData && isEmpty ? (
+
+ 暂无物流详情
+
+ )}
+
+ )}
+
+
+ ) : (
+
+ 待发货
+
+
+ 暂无详细物流信息
+
+
+
+ 共 {routesData.length} 条物流记录
+
+
+ )}
+
+ 
+
+ );
+ },
+ },
+ {
+ title: '账号类型',
+ dataIndex: '账号类型',
+ filters: categoryFilters,
+ onFilter: (value: any, record: IAccount) => record.账号类型?.some((cat: ICategory) => cat.name === value) ?? false,
+ render: (categories: ICategory[]) => (
+ <>
+ {categories.map((category: ICategory) => (
+
+
+
+
+ {category.icon && (
+
+ {账号负责人?.姓名 ?? 账号负责人}
// 如果归属人是个对象，则显示realname，否则直接显示归属人（ID）
+ ),
+ },
+ {
+ title: '前端引流人员',
+ dataIndex: '前端引流人员',
+ align: 'center',
+ width: 120, // 定义列宽度
+ key: '前端引流人员',
+ //filters: frontendHandlersFilters,
+ //onFilter: (value, record) => record.前端引流人员?.realname === value,
+ render: (前端引流人员: any) => (
+ {前端引流人员?.姓名 ?? '未知'}
+ ),
+ },
+ //备注
+ {
+ title: '备注',
+ dataIndex: '备注',
+ key: 'remark',
+ },
+ {
+ title: '操作',
+ key: 'action',
+ /*render: (_: any, record: IAccount) => (
+
+ handleEdit(record)}>
+
+ handleDelete(record._id)}
+ okText="是"
+ cancelText="否"
+ placement="left"
+ >
+
+
+
+
+ ),
+ },
+ ], [accounts]);
+
+ return (
+
+
+ ),
+ };
+ });
+ };
+
+ return (
+
+
+
+
+ {route.remark}
+
+
+ {route.acceptAddress && (
+
+ 📍 {route.acceptAddress}
+
+ )}
+
+
+
+
+ {statusInfo.status}
+
+
+
+ opCode: {route.opCode}
+
+
+
+
+
+ {route.acceptTime}
+
+
+
+
+ );
+};
+
+export default SFExpressQueryPage;
diff --git a/src/pages/test/sfall.tsx b/src/pages/test/sfall.tsx
new file mode 100644
index 0000000..c588a9d
--- /dev/null
+++ b/src/pages/test/sfall.tsx
@@ -0,0 +1,402 @@
+/**
+ * 物流记录管理页面
+ * @author 阿瑞
+ * @version 1.0.0
+ * @description 显示所有物流记录的管理页面，包含物流单号、客户尾号、查询状态、物流状态等信息
+ */
+
+import { useState, useEffect } from 'react';
+import { Card, Table, Tag, Typography, Alert, Button, Progress, Modal, List } from 'antd';
+import { TruckOutlined, ReloadOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import StatusTag from '@/components/logistics/status-tag';
+import type { ColumnsType } from 'antd/es/table';
+
+const { Title, Text } = Typography;
+
+// ==================== 接口定义 ====================
+
+/**
+ * 物流记录数据接口
+ */
+interface LogisticsRecordData {
+ _id: string;
+ 物流单号: string;
+ 客户尾号: string;
+ 是否查询: boolean;
+ 物流状态: string;
+ 物流详情: any;
+ 更新时间: string;
+ 类型: string;
+ createdAt: string;
+}
+
+/**
+ * API响应数据接口
+ */
+interface ApiResponse {
+ success: boolean;
+ data?: LogisticsRecordData[];
+ total?: number;
+ message?: string;
+ error?: string;
+}
+
+// ==================== 主组件 ====================
+
+/**
+ * 物流记录管理页面组件
+ * @returns 物流记录管理页面JSX元素
+ */
+const LogisticsRecordsPage: React.FC = () => {
+ // ==================== 状态管理 ====================
+
+ const [loading, setLoading] = useState
+ {/* ==================== 页面标题 ==================== */}
+
+
+ )}
+
+ {/* 无查询结果 */}
+ {queryResult?.success && !queryResult.msgData?.msgData?.routeResps?.length && !loading && (
+
+
+ )}
+
+
+
+
+ {/* ==================== 上半部分：左1/3查询表单+运单信息，右2/3开发者数据 ==================== */}
+
+
+ <TruckOutlined className="mr-2 text-blue-600" />
+ SF快递物流查询
+
+
+ 输入运单号和手机号后4位查询物流信息
+
+
+
+ {/* 左侧1/3：查询表单和运单信息 */}
+
+
+ {/* ==================== 下半部分：物流轨迹 ==================== */}
+ {queryResult?.success && queryResult.msgData?.msgData?.routeResps?.length && queryResult.msgData.msgData.routeResps.length > 0 && !loading && (
+
+ {/* 查询表单 */}
+
+
+
+
+ {/* 运单信息和当前状态 */}
+ {queryResult?.success && queryResult.msgData?.msgData?.routeResps?.length && queryResult.msgData.msgData.routeResps.length > 0 && (
+
+ {queryResult.msgData?.msgData?.routeResps?.map((routeResp: any, index: number) => {
+ const overallStatus = getOverallStatus(routeResp.routes?.slice().reverse() || []);
+
+ return (
+
+ )}
+
+ {/* 错误信息显示 */}
+ {error && (
+
+
+ {/* 右侧2/3：开发者数据 */}
+
+
+ );
+ })}
+
+
+ {routeResp.mailNo}
+
+
+ SF快递运单
+
+
+
+
+ 当前状态
+
+ {overallStatus.status}
+
+
+
+
+
+
+
+ {routeResp.routes?.length || 0}
+
+
+ 物流节点
+
+
+
+ {queryResult && !loading && (
+
+
+ )}
+
+ {/* 加载状态 */}
+ {loading && (
+
+
+ )}
+
+ {/* 右侧占位内容 */}
+ {!queryResult && !loading && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ {JSON.stringify(queryResult, null, 2)}
+
+
+
+
+
+ 正在查询物流信息
+
+
+ 请稍等片刻...
+
+
+
+ 查询后将在此处显示开发者数据
+
+
+
+ {queryResult.msgData?.msgData?.routeResps?.map((routeResp: any, index: number) => (
+
+
+ )}
+
+ {/* 查询失败时的错误信息 */}
+ {queryResult && !loading && !queryResult.success && (
+
+ {routeResp.routes?.length > 0 ? (
+
+ ))}
+
+
+ );
+};
+
+export default LogisticsRecordsPage;
diff --git a/src/types/enum.ts b/src/types/enum.ts
index e204798..43e4c54 100644
--- a/src/types/enum.ts
+++ b/src/types/enum.ts
@@ -53,8 +53,90 @@ export enum BasicStatus {
}
export enum PermissionType {
- CATALOGUE,
- MENU,
- BUTTON,
- }
+ CATALOGUE,
+ MENU,
+ BUTTON,
+}
+
+// ==================== SF快递物流状态映射 ====================
+
+/**
+ * SF快递状态信息接口
+ * @author 阿瑞
+ * @version 1.0.0
+ */
+export interface SFExpressStatusInfo {
+ status: string;
+ color: string;
+ description: string;
+}
+
+/**
+ * SF快递opCode状态映射表
+ * @description 基于真实SF快递物流数据分析得出的opCode对应状态
+ * @author 阿瑞
+ * @version 1.0.0
+ */
+export const SF_OPCODE_STATUS_MAP: Record
+ {/* ==================== 页面标题 ==================== */}
+ setBatchModalVisible(false)}
+ footer={[
+
+ ]}
+ width={600}
+ >
+ {batchResults && (
+
+
+
+
+
+ {/* ==================== 主要内容区域 ==================== */}
+
+
+
+
+ <TruckOutlined className="mr-2 text-blue-600" />
+ 物流记录管理
+
+
+ 查看和管理所有物流记录信息
+
+
+ }
+ onClick={handleRefresh}
+ loading={loading}
+ >
+ 刷新数据
+
+
+ {/* 左侧2/3：物流记录列表 */}
+
+
+ {/* 批量查询结果弹窗 */}
+
+
+ {/* 错误信息显示 */}
+ {error && (
+
+ columns={columns}
+ dataSource={records}
+ rowKey="_id"
+ loading={loading}
+ pagination={{
+ current: pagination.current,
+ pageSize: pagination.pageSize,
+ total: total,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ showTotal: (total, range) =>
+ `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
+ onChange: handleTableChange,
+ onShowSizeChange: handleTableChange,
+ }}
+ scroll={{ x: 600 }}
+ size="middle"
+ />
+
+
+
+ {/* 右侧1/3：批量查询功能 */}
+
+
+
+ {/* 物流记录表格 */}
+
+
+ 共 {total} 条记录
+
+
+
+
+
+
+
+
+
+ 批量查询物流
+
+ 自动查询所有物流记录的最新状态
+
+
+
+
+
+
+ 查询规则：
+
+
+ }
+ loading={batchLoading}
+ onClick={handleBatchQuery}
+ block
+ >
+ {batchLoading ? '正在批量查询...' : '开始批量查询'}
+
+
+ {batchLoading && (
+
+
+ • 只查询有物流单号的记录
+ • 只查询有客户尾号的记录
+ • 只查询标记为"需要查询"的记录
+ • 逐个查询，避免并发请求
+
+
+ 正在查询中，请耐心等待...
+
+
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+ {batchResults.total}
+ 总数
+
+
+ {batchResults.successCount}
+ 成功
+
+
+ {batchResults.failedCount}
+ 失败
+
+ - (
+
+
+
+ {item.trackingNumber}
+
+ {item.message}
+
+ {item.newStatus && (
+ {item.newStatus}
+ )}
+
+ {item.status === 'success' ? '成功' : '失败'}
+
+
+