143 lines
13 KiB
TypeScript
143 lines
13 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { BookOpen, Copy, KeyRound, RefreshCw, Webhook } from 'lucide-react';
|
||
import { clientApi, type ClientSmsApplication, type HttpApiConfigResponse, type HttpApiCredential, type HttpApiRequestLog, type HttpWebhookDelivery, type HttpWebhookEndpoint } from '@/api/adminApi';
|
||
import { Button, Input, Select, Tabs, Tag } from '@/components/ui';
|
||
import { copyText } from '@/utils/clipboard';
|
||
import { formatHttpApiParams, httpApiPublicOrigin } from '@/utils/interfaceParams';
|
||
|
||
export function ClientHttpApiPage() {
|
||
const [applications, setApplications] = useState<ClientSmsApplication[]>([]);
|
||
const [applicationId, setApplicationId] = useState('');
|
||
const [config, setConfig] = useState<HttpApiConfigResponse | null>(null);
|
||
const [credentials, setCredentials] = useState<HttpApiCredential[]>([]);
|
||
const [webhooks, setWebhooks] = useState<HttpWebhookEndpoint[]>([]);
|
||
const [requests, setRequests] = useState<HttpApiRequestLog[]>([]);
|
||
const [deliveries, setDeliveries] = useState<HttpWebhookDelivery[]>([]);
|
||
const [receiptUrl, setReceiptUrl] = useState('');
|
||
const [uplinkUrl, setUplinkUrl] = useState('');
|
||
const [revealedSecret, setRevealedSecret] = useState<{ title: string; accessKey?: string; secret: string } | null>(null);
|
||
const [error, setError] = useState('');
|
||
const [loading, setLoading] = useState(true);
|
||
const [paramsCopied, setParamsCopied] = useState(false);
|
||
|
||
async function copyHttpParams() {
|
||
if (!config) return;
|
||
try {
|
||
await copyText(formatHttpApiParams(config, window.location.origin));
|
||
setParamsCopied(true);
|
||
setError('');
|
||
window.setTimeout(() => setParamsCopied(false), 1600);
|
||
} catch (failure) {
|
||
setError(failure instanceof Error ? failure.message : 'HTTP接口参数复制失败');
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
clientApi.listApplications().then((items) => {
|
||
const active = items.filter((item) => item.status !== 'deleted');
|
||
setApplications(active);
|
||
setApplicationId((current) => current || active[0]?.id || '');
|
||
}).catch((failure: Error) => setError(failure.message)).finally(() => setLoading(false));
|
||
}, []);
|
||
|
||
async function loadApplication(id: string) {
|
||
if (!id) return;
|
||
setLoading(true);
|
||
setError('');
|
||
try {
|
||
setConfig(null);
|
||
setCredentials([]);
|
||
setWebhooks([]);
|
||
setRequests([]);
|
||
setDeliveries([]);
|
||
const results = await Promise.allSettled([
|
||
clientApi.getApplicationHttpApiConfig(id), clientApi.listHttpApiCredentials(id), clientApi.listHttpWebhooks(id),
|
||
clientApi.listHttpApiRequests(id), clientApi.listHttpWebhookDeliveries(id),
|
||
]);
|
||
const [configResult, credentialsResult, webhooksResult, requestsResult, deliveriesResult] = results;
|
||
if (configResult.status === 'rejected') throw configResult.reason;
|
||
const nextConfig = configResult.value;
|
||
const nextCredentials = credentialsResult.status === 'fulfilled' ? credentialsResult.value : [];
|
||
const nextWebhooks = webhooksResult.status === 'fulfilled' ? webhooksResult.value : [];
|
||
const nextRequests = requestsResult.status === 'fulfilled' ? requestsResult.value : [];
|
||
const nextDeliveries = deliveriesResult.status === 'fulfilled' ? deliveriesResult.value : [];
|
||
setConfig(nextConfig);
|
||
setCredentials(nextCredentials);
|
||
setWebhooks(nextWebhooks);
|
||
setRequests(nextRequests);
|
||
setDeliveries(nextDeliveries);
|
||
setReceiptUrl(nextWebhooks.find((item) => item.eventType === 'receipt')?.url ?? '');
|
||
setUplinkUrl(nextWebhooks.find((item) => item.eventType === 'uplink')?.url ?? '');
|
||
if (results.some((result) => result.status === 'rejected')) setError('部分接口记录暂时无法加载，请稍后刷新；接口概览仍可正常使用。');
|
||
} catch (failure) {
|
||
const message = failure instanceof Error ? failure.message : '';
|
||
setError(message.toLowerCase().includes('internal server error') ? '接口资料暂时加载失败，请稍后重试。' : message || 'HTTP接口资料加载失败');
|
||
}
|
||
finally { setLoading(false); }
|
||
}
|
||
|
||
useEffect(() => { void loadApplication(applicationId); }, [applicationId]);
|
||
|
||
async function createCredential() {
|
||
try {
|
||
const created = await clientApi.createHttpApiCredential(applicationId, { name: `客户端凭据 ${credentials.length + 1}` });
|
||
setRevealedSecret({ title: '访问凭据仅展示一次，请立即保存', accessKey: created.accessKey, secret: created.secret ?? '' });
|
||
await loadApplication(applicationId);
|
||
} catch (failure) { setError(failure instanceof Error ? failure.message : '创建凭据失败'); }
|
||
}
|
||
|
||
async function saveWebhook(eventType: 'receipt' | 'uplink', rotateSecret = false) {
|
||
const url = eventType === 'receipt' ? receiptUrl : uplinkUrl;
|
||
try {
|
||
const saved = await clientApi.saveHttpWebhook(applicationId, eventType, { url, rotateSecret });
|
||
if (saved.secret) setRevealedSecret({ title: `${eventType === 'receipt' ? '回执' : '上行'}回调签名密钥仅展示一次`, secret: saved.secret });
|
||
await loadApplication(applicationId);
|
||
} catch (failure) { setError(failure instanceof Error ? failure.message : '保存Webhook失败'); }
|
||
}
|
||
|
||
const api = config?.config;
|
||
const publicApiOrigin = httpApiPublicOrigin(config, window.location.origin);
|
||
const overview = <div className="page-stack">
|
||
{!api?.enabled ? <p className="form-error">当前应用尚未由运营端开通 HTTP 接口。</p> : null}
|
||
<div className="surface" style={{ padding: 18 }}><div className="section-heading"><div><h3>{config?.applicationName ?? '企业应用'}</h3><p className="muted">基础地址：{publicApiOrigin}/api/openapi/v1</p></div><Button disabled={!api?.enabled} icon={<Copy size={14} />} onClick={() => void copyHttpParams()} size="sm">{paramsCopied ? '已复制' : '复制HTTP参数'}</Button></div><div className="table-actions">
|
||
<Tag tone={api?.sendEnabled ? 'success' : 'info'}>单条发送 {api?.sendEnabled ? '已开通' : '未开通'}</Tag>
|
||
<Tag tone={api?.messageQueryEnabled ? 'success' : 'info'}>状态查询 {api?.messageQueryEnabled ? '已开通' : '未开通'}</Tag>
|
||
<Tag tone={api?.uplinkQueryEnabled ? 'success' : 'info'}>上行查询 {api?.uplinkQueryEnabled ? '已开通' : '未开通'}</Tag>
|
||
<Tag tone={api?.receiptWebhookEnabled ? 'success' : 'info'}>回执回调 {api?.receiptWebhookEnabled ? '已开通' : '未开通'}</Tag>
|
||
<Tag tone={api?.uplinkWebhookEnabled ? 'success' : 'info'}>上行回调 {api?.uplinkWebhookEnabled ? '已开通' : '未开通'}</Tag>
|
||
</div></div>
|
||
<div className="surface" style={{ padding: 18 }}><h3>调用限制</h3><p>QPS：{api?.qpsLimit ?? '-'} · 签名时间容差：{api?.timestampToleranceSeconds ?? '-'} 秒 · 上行单次查询跨度：{api?.maxQueryRangeDays ?? '-'} 天 · 最大分页：{api?.maxPageSize ?? '-'}</p><p className="muted">HTTP IP 白名单：{config?.ipAllowlist.join('、') || '未限制'}</p></div>
|
||
</div>;
|
||
|
||
const credentialPanel = <div className="page-stack"><div className="section-heading"><div><h3><KeyRound size={17} />访问凭据</h3><p className="muted">密钥只在创建时展示一次；建议轮换时先创建新凭据，完成切换后再吊销旧凭据。</p></div><Button disabled={!api?.credentialSelfServiceEnabled} onClick={() => void createCredential()}>创建凭据</Button></div>
|
||
{credentials.map((item) => <div className="surface client-http-credential-row" key={item.id}><strong>{item.name}</strong><code>{item.accessKey}</code><span>****{item.secretLast4}</span><span className="muted">最近使用：{item.lastUsedAt ? new Date(item.lastUsedAt).toLocaleString('zh-CN') : '从未'}</span>{item.status === 'active' ? <Button disabled={!api?.credentialSelfServiceEnabled} onClick={() => void clientApi.revokeHttpApiCredential(applicationId, item.id).then(() => loadApplication(applicationId))} size="sm" variant="danger">吊销</Button> : <Tag tone="info">已吊销</Tag>}</div>)}
|
||
{credentials.length === 0 ? <p className="muted">暂无访问凭据。</p> : null}
|
||
</div>;
|
||
|
||
const callbackPanel = <div className="page-stack"><div className="surface" style={{ padding: 18 }}><h3><Webhook size={17} /> 回执回调</h3><Input label="回调 URL" onChange={(event) => setReceiptUrl(event.target.value)} placeholder="https://example.com/webhooks/sms/receipt" value={receiptUrl} /><div className="table-actions" style={{ marginTop: 12 }}><Button onClick={() => void saveWebhook('receipt')}>保存</Button>{webhooks.some((item) => item.eventType === 'receipt') ? <Button onClick={() => void saveWebhook('receipt', true)} variant="ghost">轮换签名密钥</Button> : null}</div></div>
|
||
<div className="surface" style={{ padding: 18 }}><h3><Webhook size={17} /> 上行回调</h3><Input label="回调 URL" onChange={(event) => setUplinkUrl(event.target.value)} placeholder="https://example.com/webhooks/sms/uplink" value={uplinkUrl} /><div className="table-actions" style={{ marginTop: 12 }}><Button onClick={() => void saveWebhook('uplink')}>保存</Button>{webhooks.some((item) => item.eventType === 'uplink') ? <Button onClick={() => void saveWebhook('uplink', true)} variant="ghost">轮换签名密钥</Button> : null}</div></div></div>;
|
||
|
||
const docsPanel = <div className="page-stack"><div className="surface" style={{ padding: 18 }}><h3><BookOpen size={17} /> 鉴权规则</h3><p>每次请求携带 <code>X-App-Key</code>、<code>X-Timestamp</code>、<code>X-Nonce</code>、<code>X-Signature</code>。签名原文为：</p><pre>{`METHOD
|
||
/api/openapi/v1/...
|
||
TIMESTAMP
|
||
NONCE
|
||
SHA256(rawBody)`}</pre><p>使用访问密钥执行 HMAC-SHA256，输出小写十六进制。单发还必须携带 <code>Idempotency-Key</code>。</p></div>
|
||
<div className="surface" style={{ padding: 18 }}><h3>接口清单</h3><pre>{`POST /api/openapi/v1/sms/messages\nGET /api/openapi/v1/sms/messages/{messageId}\nGET /api/openapi/v1/sms/uplinks\nGET /api/openapi/v1/sms/uplinks/{uplinkId}`}</pre><p className="muted">完整 OpenAPI 文档：<a href={`${publicApiOrigin}/api/client-docs`} rel="noreferrer" target="_blank">{publicApiOrigin}/api/client-docs</a></p></div>
|
||
<div className="surface" style={{ padding: 18 }}><h3>回调验签</h3><p>回调请求头包含 X-Event-Id、X-Event-Type、X-Timestamp、X-Signature。签名原文为 <code>TIMESTAMP + '\\n' + rawBody</code>，同样使用 HMAC-SHA256。客户系统必须按 X-Event-Id 幂等。</p></div></div>;
|
||
|
||
const logsPanel = <div className="page-stack"><div className="surface" style={{ padding: 16 }}><h3>最近调用</h3>{requests.map((item) => <p key={item.id}><code>{item.requestId}</code> · {item.businessCode ?? item.status} · {item.sourceIp ?? '-'} · {item.durationMs ?? '-'}ms · {new Date(item.createdAt).toLocaleString('zh-CN')}</p>)}{requests.length === 0 ? <p className="muted">暂无调用记录。</p> : null}</div>
|
||
<div className="surface" style={{ padding: 16 }}><h3>最近回调投递</h3>{deliveries.map((item) => <div className="section-heading" key={item.id}><p><code>{item.event.eventId}</code> · {item.endpoint.eventType} · {item.status} · 尝试 {item.attemptCount} 次{item.lastError ? ` · ${item.lastError}` : ''}</p>{item.status !== 'delivered' && api?.allowClientManualRetry ? <Button icon={<RefreshCw size={14} />} onClick={() => void clientApi.retryHttpWebhookDelivery(applicationId, item.id).then(() => loadApplication(applicationId))} size="sm" variant="ghost">重投</Button> : null}</div>)}{deliveries.length === 0 ? <p className="muted">暂无回调投递记录。</p> : null}</div></div>;
|
||
|
||
const tabs = [
|
||
{ label: '接口概览', value: 'overview', content: overview }, { label: '访问凭据', value: 'credentials', content: credentialPanel },
|
||
{ label: '回调配置', value: 'callbacks', content: callbackPanel }, { label: '接口文档', value: 'docs', content: docsPanel },
|
||
{ label: '调用与回调记录', value: 'logs', content: logsPanel },
|
||
];
|
||
|
||
return <section className="page-stack"><div className="page-heading"><div><h1>接口对接</h1><p>管理 HTTP 访问凭据、回调地址、接口文档及真实投递记录。</p></div><Select label="企业应用" onChange={(event) => setApplicationId(event.target.value)} options={applications.map((item) => ({ label: item.name, value: item.id }))} value={applicationId} /></div>
|
||
{loading ? <p className="muted">正在加载接口配置...</p> : null}{error ? <p className="form-error">{error}</p> : null}
|
||
{revealedSecret ? <div className="surface" style={{ border: '1px solid #f59e0b', padding: 16 }}><strong>{revealedSecret.title}</strong>{revealedSecret.accessKey ? <p>Access Key：<code>{revealedSecret.accessKey}</code></p> : null}<p>Secret：<code>{revealedSecret.secret}</code></p><Button icon={<Copy size={14} />} onClick={() => void copyText([revealedSecret.accessKey, revealedSecret.secret].filter(Boolean).join('\n')).catch((failure: Error) => setError(failure.message))} size="sm">复制</Button></div> : null}
|
||
{!loading && applicationId ? <Tabs items={tabs} /> : null}
|
||
</section>;
|
||
}
|