fix: correct operational statistics and form interactions
This commit is contained in:
hectorzhao
@@ -18,12 +18,7 @@ type SendDetailModalProps = {
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export function SendDetailModal({
|
||||
record,
|
||||
segmentAudits,
|
||||
segmentLoading,
|
||||
onClose,
|
||||
}: SendDetailModalProps) {
|
||||
export function SendDetailModal({ record, segmentAudits, segmentLoading, onClose }: SendDetailModalProps) {
|
||||
const routeRows = buildRouteRows(record, segmentAudits);
|
||||
const channelGroupNames = Array.from(new Set(routeRows.map((route) => route.channelGroup).filter(Boolean)));
|
||||
const orderedSegmentAudits = [...segmentAudits].sort((left, right) => {
|
||||
@@ -36,11 +31,20 @@ export function SendDetailModal({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
footer={<Button onClick={onClose} variant="ghost">关闭</Button>}
|
||||
footer={
|
||||
<Button onClick={onClose} variant="ghost">
|
||||
关闭
|
||||
</Button>
|
||||
}
|
||||
onClose={onClose}
|
||||
open
|
||||
size="xl"
|
||||
title={<div className="template-modal-title"><h2>发送详情</h2><p>{record.messageId}</p></div>}
|
||||
title={
|
||||
<div className="template-modal-title">
|
||||
<h2>发送详情</h2>
|
||||
<p>{record.messageId}</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="admin-sms-send-detail">
|
||||
<div className="admin-sms-detail-overview">
|
||||
@@ -48,16 +52,54 @@ export function SendDetailModal({
|
||||
<span>最终状态</span>
|
||||
<Tag tone={statusToneMap[displayStatus] ?? 'info'}>{getRecordStatusLabel(record)}</Tag>
|
||||
</div>
|
||||
<div><span>提交状态</span><strong>{record.submitStatus ?? '-'}</strong></div>
|
||||
<div><span>回执状态</span><strong>{record.receiptStatus ?? '-'}</strong></div>
|
||||
<div><span>最终回执时间</span><strong>{getTime(record.deliveredAt)}</strong></div>
|
||||
<div><span>引流信息</span><Tag tone={record.hasDrainageContent === true ? 'warning' : 'neutral'}>{record.hasDrainageContent === true ? '含引流' : record.hasDrainageContent === false ? '不含引流' : '未检测'}</Tag></div>
|
||||
<div><span>提交时间</span><strong>{getTime(record.queuedAt)}</strong></div>
|
||||
<div><span>发送号码</span><strong>{record.phoneNumber || '-'}</strong></div>
|
||||
<div><span>号码归属</span><strong>{record.province ?? '-'} / {record.carrier ? <CarrierTag carrier={record.carrier} /> : '-'}</strong></div>
|
||||
<div><span>通道组</span><strong>{channelGroupNames.join(' / ') || '-'}</strong></div>
|
||||
<div><span>收到的接入号</span><strong>{record.clientSrcId || '-'}</strong></div>
|
||||
<div><span>发送的接入号</span><strong>{sentAccessNumber || '-'}</strong></div>
|
||||
<div>
|
||||
<span>提交状态</span>
|
||||
<strong>{record.submitStatus ?? '-'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>回执状态</span>
|
||||
<strong>{record.receiptStatus ?? '-'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>最终回执时间</span>
|
||||
<strong>{getTime(record.deliveredAt)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>引流信息</span>
|
||||
<Tag tone={record.hasDrainageContent === true ? 'warning' : 'neutral'}>
|
||||
{record.hasDrainageContent === true
|
||||
? '含引流'
|
||||
: record.hasDrainageContent === false
|
||||
? '不含引流'
|
||||
: '未检测'}
|
||||
</Tag>
|
||||
</div>
|
||||
<div>
|
||||
<span>提交时间</span>
|
||||
<strong>{getTime(record.queuedAt)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>发送号码</span>
|
||||
<strong>{record.phoneNumber || '-'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>号码归属</span>
|
||||
<strong>
|
||||
{record.province ?? '-'} / {record.carrier ? <CarrierTag carrier={record.carrier} /> : '-'}
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>通道组</span>
|
||||
<strong>{channelGroupNames.join(' / ') || '-'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>收到的接入号</span>
|
||||
<strong>{record.clientSrcId || '-'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>发送的接入号</span>
|
||||
<strong>{sentAccessNumber || '-'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
{receiptNotice ? (
|
||||
<div className="admin-sms-detail-notice" role="status">
|
||||
@@ -66,8 +108,12 @@ export function SendDetailModal({
|
||||
</div>
|
||||
) : null}
|
||||
<section>
|
||||
<h3><MessageSquare size={18} /> 短信内容</h3>
|
||||
<p className="admin-sms-detail-content"><DrainageContent record={record} /></p>
|
||||
<h3>
|
||||
<MessageSquare size={18} /> 短信内容
|
||||
</h3>
|
||||
<p className="admin-sms-detail-content">
|
||||
<DrainageContent record={record} />
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
@@ -78,12 +124,23 @@ export function SendDetailModal({
|
||||
<span>{index + 1}</span>
|
||||
<div>
|
||||
<strong>{route.channel}</strong>
|
||||
<p className="muted">通道组：{route.channelGroup ?? '-'}</p>
|
||||
<dl>
|
||||
<div><dt>发送时间</dt><dd>{getTime(route.sentAt)}</dd></div>
|
||||
<div><dt>回执时间</dt><dd>{getTime(route.receiptAt)}</dd></div>
|
||||
<div><dt>回执码</dt><dd>{route.receiptCode ?? '-'}</dd></div>
|
||||
<div><dt>提交状态</dt><dd>{route.submitStatus ?? '-'}</dd></div>
|
||||
<div>
|
||||
<dt>发送时间</dt>
|
||||
<dd>{getTime(route.sentAt)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>回执时间</dt>
|
||||
<dd>{getTime(route.receiptAt)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>回执码</dt>
|
||||
<dd>{route.receiptCode ?? '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>提交状态</dt>
|
||||
<dd>{route.submitStatus ?? '-'}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</article>
|
||||
@@ -94,42 +151,104 @@ export function SendDetailModal({
|
||||
<section>
|
||||
<h3>状态信息</h3>
|
||||
<div className="admin-sms-detail-status-grid">
|
||||
<div><span>消息编号</span><strong>{record.messageId}</strong></div>
|
||||
<div><span>发送状态</span><strong>{getRecordStatusLabel(record)}</strong></div>
|
||||
<div><span>提交状态</span><strong>{record.submitStatus ?? '-'}</strong></div>
|
||||
<div><span>回执状态</span><strong>{record.receiptStatus ?? '-'}</strong></div>
|
||||
<div>
|
||||
<span>消息编号</span>
|
||||
<strong>{record.messageId}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>发送状态</span>
|
||||
<strong>{getRecordStatusLabel(record)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>提交状态</span>
|
||||
<strong>{record.submitStatus ?? '-'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>回执状态</span>
|
||||
<strong>{record.receiptStatus ?? '-'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
{['submit_failed', 'failed', 'rejected'].includes(displayStatus) ? (
|
||||
<div className="admin-sms-detail-failure" role="alert">
|
||||
<AlertTriangle size={20} />
|
||||
<div><span>失败原因</span><strong>{record.errorMessage ?? record.errorCode ?? '未返回明确失败原因'}</strong></div>
|
||||
<div>
|
||||
<span>失败原因</span>
|
||||
<strong>{record.errorMessage ?? record.errorCode ?? '未返回明确失败原因'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>分片补偿审计</h3>
|
||||
{segmentLoading ? <div className="ui-table__empty">加载中...</div> : segmentAudits.length === 0 ? (
|
||||
{segmentLoading ? (
|
||||
<div className="ui-table__empty">加载中...</div>
|
||||
) : segmentAudits.length === 0 ? (
|
||||
<div className="ui-table__empty">暂无分片审计</div>
|
||||
) : (
|
||||
<div className="admin-sms-segment-list">
|
||||
{orderedSegmentAudits.map((segment) => (
|
||||
<article className="admin-sms-segment-card" key={segment.id}>
|
||||
<header>
|
||||
<strong>分片 {segment.segmentIndex}/{segment.segmentTotal}</strong>
|
||||
<strong>
|
||||
分片 {segment.segmentIndex}/{segment.segmentTotal}
|
||||
</strong>
|
||||
<div>
|
||||
<Tag tone={segment.submitStatus === 'accepted' ? 'success' : segment.submitStatus === 'queued' ? 'info' : 'danger'}>{segment.submitStatus}</Tag>
|
||||
{segment.receiptStatus ? <Tag tone={segment.receiptStatus === 'delivered' ? 'success' : segment.receiptStatus === 'unknown' ? 'neutral' : 'danger'}>{segment.receiptStatus}</Tag> : null}
|
||||
<Tag
|
||||
tone={
|
||||
segment.submitStatus === 'accepted'
|
||||
? 'success'
|
||||
: segment.submitStatus === 'queued'
|
||||
? 'info'
|
||||
: 'danger'
|
||||
}
|
||||
>
|
||||
{segment.submitStatus}
|
||||
</Tag>
|
||||
{segment.receiptStatus ? (
|
||||
<Tag
|
||||
tone={
|
||||
segment.receiptStatus === 'delivered'
|
||||
? 'success'
|
||||
: segment.receiptStatus === 'unknown'
|
||||
? 'neutral'
|
||||
: 'danger'
|
||||
}
|
||||
>
|
||||
{segment.receiptStatus}
|
||||
</Tag>
|
||||
) : null}
|
||||
</div>
|
||||
</header>
|
||||
<dl>
|
||||
<div><dt>通道</dt><dd>{segment.channel?.name ?? segment.channelId ?? '-'}</dd></div>
|
||||
<div><dt>Sequence</dt><dd>{segment.sequenceId ?? '-'}</dd></div>
|
||||
<div><dt>提交 ID</dt><dd>{segment.submitId}</dd></div>
|
||||
<div><dt>网关 MsgId</dt><dd>{segment.gatewayMessageId ?? '-'}</dd></div>
|
||||
<div><dt>补偿方式</dt><dd>{segment.compensationType ?? '-'}</dd></div>
|
||||
<div><dt>审计时间</dt><dd>{getTime(segment.createdAt)}</dd></div>
|
||||
<div><dt>错误信息</dt><dd>{segment.errorMessage ?? segment.errorCode ?? '-'}</dd></div>
|
||||
<div>
|
||||
<dt>通道</dt>
|
||||
<dd>{segment.channel?.name ?? segment.channelId ?? '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Sequence</dt>
|
||||
<dd>{segment.sequenceId ?? '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>提交 ID</dt>
|
||||
<dd>{segment.submitId}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>网关 MsgId</dt>
|
||||
<dd>{segment.gatewayMessageId ?? '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>补偿方式</dt>
|
||||
<dd>{segment.compensationType ?? '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>审计时间</dt>
|
||||
<dd>{getTime(segment.createdAt)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>错误信息</dt>
|
||||
<dd>{segment.errorMessage ?? segment.errorCode ?? '-'}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</article>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user