538 lines
28 KiB
TypeScript
538 lines
28 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
||
import './Developer.css';
|
||
|
||
const API_BASE = '/app/api';
|
||
|
||
interface Webhook {
|
||
id: string; name: string; url: string; events: string[];
|
||
has_secret: boolean; headers: Record<string, string>; status: string;
|
||
last_triggered_at: string | null; last_status: string | null;
|
||
total_deliveries: number; success_count: number; fail_count: number;
|
||
success_rate: number; created_at: string; updated_at: string;
|
||
}
|
||
|
||
interface WebhookEvent {
|
||
value: string; label: string; desc: string;
|
||
}
|
||
|
||
interface WebhookDelivery {
|
||
id: string; event: string; status: string; response_code: number | null;
|
||
response_time_ms: number | null; attempts: number; error_message: string | null;
|
||
payload: any; response_body: string; created_at: string;
|
||
}
|
||
|
||
interface SDKPackage {
|
||
language: string; name: string; version: string; description: string;
|
||
install_cmd: string; download_url: string; github_url: string;
|
||
min_version: string; features: string[]; code_example: string;
|
||
}
|
||
|
||
interface ApiDocSection {
|
||
section: string; icon: string; description: string;
|
||
endpoints: Array<{
|
||
method: string; path: string; title: string; description: string;
|
||
params: Array<{ name: string; type: string; required: boolean; desc: string }>;
|
||
example_request: string; example_response: string;
|
||
}>;
|
||
}
|
||
|
||
interface PageData<T> { total: number; page: number; page_size: number; items: T[] }
|
||
|
||
async function api(path: string, options?: RequestInit) {
|
||
const token = localStorage.getItem('token');
|
||
const res = await fetch(`${API_BASE}${path}`, {
|
||
...options,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${token}`,
|
||
...(options?.headers || {}),
|
||
},
|
||
});
|
||
if (res.status === 307) {
|
||
const location = res.headers.get('Location');
|
||
if (location) return api(location.replace(API_BASE, ''), options);
|
||
}
|
||
const data = await res.json();
|
||
if (!res.ok) throw new Error(data.detail || `HTTP ${res.status}`);
|
||
return data;
|
||
}
|
||
|
||
export default function AdminDeveloperTools() {
|
||
const [activeTab, setActiveTab] = useState<'webhooks' | 'sdk' | 'docs'>('webhooks');
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
// Webhooks state
|
||
const [webhooks, setWebhooks] = useState<PageData<Webhook>>({ total: 0, page: 1, page_size: 20, items: [] });
|
||
const [webhookEvents, setWebhookEvents] = useState<WebhookEvent[]>([]);
|
||
const [showWebhookModal, setShowWebhookModal] = useState(false);
|
||
const [webhookForm, setWebhookForm] = useState({ name: '', url: '', events: [] as string[] });
|
||
const [selectedWebhook, setSelectedWebhook] = useState<Webhook | null>(null);
|
||
const [deliveries, setDeliveries] = useState<PageData<WebhookDelivery>>({ total: 0, page: 1, page_size: 20, items: [] });
|
||
const [testResult, setTestResult] = useState<any>(null);
|
||
|
||
// SDK state
|
||
const [sdkPackages, setSdkPackages] = useState<SDKPackage[]>([]);
|
||
const [selectedSdk, setSelectedSdk] = useState<string>('python');
|
||
|
||
// API Docs state
|
||
const [docSections, setDocSections] = useState<ApiDocSection[]>([]);
|
||
const [expandedSection, setExpandedSection] = useState<string | null>(null);
|
||
const [expandedEndpoint, setExpandedEndpoint] = useState<string | null>(null);
|
||
|
||
const loadWebhooks = useCallback(async (page = 1) => {
|
||
setLoading(true);
|
||
try {
|
||
const res = await api(`/admin/developer-tools/webhooks?page=${page}&page_size=20`);
|
||
if (res.code === 0) setWebhooks(res.data);
|
||
} catch (e) { console.error('Webhooks error:', e); }
|
||
setLoading(false);
|
||
}, []);
|
||
|
||
const loadWebhookEvents = useCallback(async () => {
|
||
try {
|
||
const res = await api('/admin/developer-tools/webhooks/events');
|
||
if (res.code === 0) setWebhookEvents(res.data.events);
|
||
} catch (e) { console.error('Events error:', e); }
|
||
}, []);
|
||
|
||
const loadDeliveries = useCallback(async (webhookId: string, page = 1) => {
|
||
try {
|
||
const res = await api(`/admin/developer-tools/webhooks/${webhookId}/deliveries?page=${page}&page_size=20`);
|
||
if (res.code === 0) setDeliveries(res.data);
|
||
} catch (e) { console.error('Deliveries error:', e); }
|
||
}, []);
|
||
|
||
const loadSdkPackages = useCallback(async () => {
|
||
try {
|
||
const res = await api('/admin/developer-tools/sdk/packages');
|
||
if (res.code === 0) setSdkPackages(res.data.packages);
|
||
} catch (e) { console.error('SDK error:', e); }
|
||
}, []);
|
||
|
||
const loadApiDocs = useCallback(async () => {
|
||
try {
|
||
const res = await api('/admin/developer-tools/api-docs');
|
||
if (res.code === 0) setDocSections(res.data.sections);
|
||
} catch (e) { console.error('Docs error:', e); }
|
||
}, []);
|
||
|
||
useEffect(() => { if (activeTab === 'webhooks') { loadWebhooks(); loadWebhookEvents(); } }, [activeTab, loadWebhooks, loadWebhookEvents]);
|
||
useEffect(() => { if (activeTab === 'sdk') loadSdkPackages(); }, [activeTab, loadSdkPackages]);
|
||
useEffect(() => { if (activeTab === 'docs') loadApiDocs(); }, [activeTab, loadApiDocs]);
|
||
|
||
const handleCreateWebhook = async () => {
|
||
try {
|
||
const body = { name: webhookForm.name, url: webhookForm.url, events: webhookForm.events, headers: {} };
|
||
const res = await api('/admin/developer-tools/webhooks/', { method: 'POST', body: JSON.stringify(body) });
|
||
setShowWebhookModal(false);
|
||
setWebhookForm({ name: '', url: '', events: [] });
|
||
loadWebhooks();
|
||
if (res.data?.secret) {
|
||
alert(`Webhook created! Secret: ${res.data.secret}\nSave this secret for HMAC verification.`);
|
||
}
|
||
} catch (e: any) { alert(e.message); }
|
||
};
|
||
|
||
const handleDeleteWebhook = async (id: string) => {
|
||
if (!confirm('确定删除此 Webhook？')) return;
|
||
try {
|
||
await api(`/admin/developer-tools/webhooks/${id}`, { method: 'DELETE' });
|
||
loadWebhooks();
|
||
setSelectedWebhook(null);
|
||
} catch (e: any) { alert(e.message); }
|
||
};
|
||
|
||
const handleToggleWebhook = async (wh: Webhook) => {
|
||
const newStatus = wh.status === 'active' ? 'paused' : 'active';
|
||
try {
|
||
await api(`/admin/developer-tools/webhooks/${wh.id}`, { method: 'PUT', body: JSON.stringify({ status: newStatus }) });
|
||
loadWebhooks();
|
||
} catch (e: any) { alert(e.message); }
|
||
};
|
||
|
||
const handleTestWebhook = async (id: string) => {
|
||
setTestResult(null);
|
||
try {
|
||
const res = await api(`/admin/developer-tools/webhooks/${id}/test`, {
|
||
method: 'POST', body: JSON.stringify({ event: 'test', payload: { message: 'Test delivery from admin' } })
|
||
});
|
||
setTestResult(res.data);
|
||
loadWebhooks();
|
||
} catch (e: any) { alert(e.message); }
|
||
};
|
||
|
||
const handleViewDeliveries = (wh: Webhook) => {
|
||
setSelectedWebhook(wh);
|
||
setDeliveries({ total: 0, page: 1, page_size: 20, items: [] });
|
||
loadDeliveries(wh.id);
|
||
};
|
||
|
||
const fmtTime = (t: string | null) => {
|
||
if (!t) return '-';
|
||
try { return new Date(t).toLocaleString('zh-CN'); } catch { return t; }
|
||
};
|
||
|
||
const statusBadge = (status: string) => {
|
||
const cls = status === 'active' ? 'badge-active' : status === 'paused' ? 'badge-disabled' : status === 'success' ? 'badge-active' : 'badge-revoked';
|
||
return <span className={`dev-badge ${cls}`}>{status}</span>;
|
||
};
|
||
|
||
const methodBadge = (method: string) => {
|
||
const colors: Record<string, string> = { GET: 'method-get', POST: 'method-post', PUT: 'method-put', DELETE: 'method-delete' };
|
||
return <span className={`dev-method ${colors[method] || ''}`}>{method}</span>;
|
||
};
|
||
|
||
const copyToClipboard = (text: string) => {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
alert('Copied to clipboard');
|
||
}).catch(() => alert('Copy failed'));
|
||
};
|
||
|
||
return (
|
||
<div className="admin-developer">
|
||
<div className="dev-header">
|
||
<h2>开发者工具</h2>
|
||
<p>Webhook 配置、SDK 下载中心、交互式 API 文档</p>
|
||
</div>
|
||
|
||
{/* Tab Navigation */}
|
||
<div className="dev-tabs">
|
||
<button className={`dev-tab ${activeTab === 'webhooks' ? 'active' : ''}`} onClick={() => setActiveTab('webhooks')}>Webhook 配置</button>
|
||
<button className={`dev-tab ${activeTab === 'sdk' ? 'active' : ''}`} onClick={() => setActiveTab('sdk')}>SDK 下载中心</button>
|
||
<button className={`dev-tab ${activeTab === 'docs' ? 'active' : ''}`} onClick={() => setActiveTab('docs')}>API 文档</button>
|
||
</div>
|
||
|
||
{/* Tab Content */}
|
||
<div className="dev-tab-content">
|
||
{loading && <div className="dev-loading">加载中...</div>}
|
||
|
||
{/* ===== Webhooks Tab ===== */}
|
||
{activeTab === 'webhooks' && !loading && (
|
||
<div>
|
||
{selectedWebhook ? (
|
||
/* Webhook Detail / Deliveries View */
|
||
<div>
|
||
<div className="dev-toolbar">
|
||
<button className="dev-btn" onClick={() => { setSelectedWebhook(null); setDeliveries({ total: 0, page: 1, page_size: 20, items: [] }); }}>
|
||
← Back to list
|
||
</button>
|
||
<h3 style={{ margin: '0 16px' }}>{selectedWebhook.name} - Delivery History</h3>
|
||
<button className="dev-btn primary" onClick={() => handleTestWebhook(selectedWebhook.id)}>Send Test</button>
|
||
</div>
|
||
|
||
{testResult && (
|
||
<div className="dev-test-result" style={{ margin: '12px 0', padding: '12px', background: 'rgba(0,0,0,0.04)', borderRadius: '8px', border: `1px solid ${testResult.status === 'success' ? '#52c41a' : '#ff4d4f'}` }}>
|
||
<strong>Test Result: </strong>
|
||
<span style={{ color: testResult.status === 'success' ? '#52c41a' : '#ff4d4f' }}>{testResult.status}</span>
|
||
{testResult.response_code && <span> | HTTP {testResult.response_code}</span>}
|
||
{testResult.response_time_ms != null && <span> | {testResult.response_time_ms}ms</span>}
|
||
{testResult.error_message && <div style={{ color: '#ff4d4f', marginTop: '4px' }}>{testResult.error_message}</div>}
|
||
</div>
|
||
)}
|
||
|
||
<table className="dev-table">
|
||
<thead>
|
||
<tr><th>事件</th><th>状态</th><th>响应码</th><th>响应时间</th><th>尝试次数</th><th>时间</th><th>错误</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
{deliveries.items.map(d => (
|
||
<tr key={d.id}>
|
||
<td className="mono-text">{d.event}</td>
|
||
<td>{statusBadge(d.status)}</td>
|
||
<td>{d.response_code || '-'}</td>
|
||
<td>{d.response_time_ms != null ? `${d.response_time_ms}ms` : '-'}</td>
|
||
<td>{d.attempts}</td>
|
||
<td>{fmtTime(d.created_at)}</td>
|
||
<td style={{ maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.error_message || '-'}</td>
|
||
</tr>
|
||
))}
|
||
{deliveries.items.length === 0 && <tr><td colSpan={7} className="dev-empty">No delivery records</td></tr>}
|
||
</tbody>
|
||
</table>
|
||
{deliveries.total > 20 && (
|
||
<div className="dev-pagination">
|
||
<button disabled={deliveries.page <= 1} onClick={() => loadDeliveries(selectedWebhook.id, deliveries.page - 1)}>Prev</button>
|
||
<span>Page {deliveries.page} / {Math.ceil(deliveries.total / 20)}</span>
|
||
<button disabled={deliveries.page >= Math.ceil(deliveries.total / 20)} onClick={() => loadDeliveries(selectedWebhook.id, deliveries.page + 1)}>Next</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
/* Webhook List View */
|
||
<div>
|
||
<div className="dev-toolbar">
|
||
<button className="dev-btn primary" onClick={() => setShowWebhookModal(true)}>+ New Webhook</button>
|
||
</div>
|
||
<table className="dev-table">
|
||
<thead>
|
||
<tr><th>名称</th><th>地址</th><th>事件</th><th>状态</th><th>投递数</th><th>成功率</th><th>最后触发</th><th>操作</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
{webhooks.items.map(w => (
|
||
<tr key={w.id}>
|
||
<td>{w.name}</td>
|
||
<td className="mono-text" style={{ maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.url}</td>
|
||
<td>
|
||
{w.events.length > 0 ? (
|
||
<span>{w.events.length} events</span>
|
||
) : <span className="dev-muted">All events</span>}
|
||
</td>
|
||
<td>{statusBadge(w.status)}</td>
|
||
<td>{w.total_deliveries}</td>
|
||
<td>
|
||
<span style={{ color: w.success_rate >= 80 ? '#52c41a' : w.success_rate >= 50 ? '#faad14' : '#ff4d4f' }}>
|
||
{w.success_rate}%
|
||
</span>
|
||
<span className="dev-muted"> ({w.success_count}/{w.total_deliveries})</span>
|
||
</td>
|
||
<td>{fmtTime(w.last_triggered_at)}</td>
|
||
<td className="dev-actions">
|
||
<button className="dev-btn-sm" onClick={() => handleViewDeliveries(w)}>Deliveries</button>
|
||
<button className="dev-btn-sm" onClick={() => handleTestWebhook(w.id)}>测试</button>
|
||
<button className="dev-btn-sm" onClick={() => handleToggleWebhook(w)}>{w.status === 'active' ? 'Pause' : 'Resume'}</button>
|
||
<button className="dev-btn-sm danger" onClick={() => handleDeleteWebhook(w.id)}>删除</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{webhooks.items.length === 0 && <tr><td colSpan={8} className="dev-empty">No webhooks configured</td></tr>}
|
||
</tbody>
|
||
</table>
|
||
{webhooks.total > 20 && (
|
||
<div className="dev-pagination">
|
||
<button disabled={webhooks.page <= 1} onClick={() => loadWebhooks(webhooks.page - 1)}>Prev</button>
|
||
<span>Page {webhooks.page} / {Math.ceil(webhooks.total / 20)}</span>
|
||
<button disabled={webhooks.page >= Math.ceil(webhooks.total / 20)} onClick={() => loadWebhooks(webhooks.page + 1)}>Next</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 支持的事件 Info */}
|
||
{webhookEvents.length > 0 && (
|
||
<div style={{ marginTop: '20px', padding: '16px', background: 'rgba(0,0,0,0.02)', borderRadius: '8px' }}>
|
||
<h4 style={{ margin: '0 0 12px', color: '#1A1F36' }}>支持的事件</h4>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '8px' }}>
|
||
{webhookEvents.map(ev => (
|
||
<div key={ev.value} style={{ padding: '8px 12px', background: 'rgba(0,0,0,0.04)', borderRadius: '6px' }}>
|
||
<code style={{ color: '#69b1ff' }}>{ev.value}</code>
|
||
<div style={{ fontSize: '12px', color: '#8892B0', marginTop: '2px' }}>{ev.desc}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Create Webhook Modal */}
|
||
{showWebhookModal && (
|
||
<div className="dev-modal-overlay" onClick={() => setShowWebhookModal(false)}>
|
||
<div className="dev-modal" onClick={e => e.stopPropagation()}>
|
||
<h3>新建 Webhook</h3>
|
||
<div className="dev-form-group">
|
||
<label>名称</label>
|
||
<input className="dev-input" value={webhookForm.name} onChange={e => setWebhookForm({ ...webhookForm, name: e.target.value })} placeholder="My Webhook" />
|
||
</div>
|
||
<div className="dev-form-group">
|
||
<label>URL</label>
|
||
<input className="dev-input" value={webhookForm.url} onChange={e => setWebhookForm({ ...webhookForm, url: e.target.value })} placeholder="https://example.com/webhook" />
|
||
</div>
|
||
<div className="dev-form-group">
|
||
<label>Events (leave empty for all)</label>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginTop: '8px' }}>
|
||
{webhookEvents.map(ev => (
|
||
<label key={ev.value} style={{ display: 'flex', alignItems: 'center', gap: '4px', cursor: 'pointer', padding: '4px 10px', background: webhookForm.events.includes(ev.value) ? 'rgba(22,119,255,0.2)' : 'rgba(0,0,0,0.04)', borderRadius: '6px', fontSize: '13px' }}>
|
||
<input type="checkbox" checked={webhookForm.events.includes(ev.value)} onChange={e => {
|
||
if (e.target.checked) setWebhookForm({ ...webhookForm, events: [...webhookForm.events, ev.value] });
|
||
else setWebhookForm({ ...webhookForm, events: webhookForm.events.filter(x => x !== ev.value) });
|
||
}} />
|
||
{ev.label}
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="dev-modal-actions">
|
||
<button className="dev-btn" onClick={() => setShowWebhookModal(false)}>取消</button>
|
||
<button className="dev-btn primary" onClick={handleCreateWebhook} disabled={!webhookForm.name || !webhookForm.url}>创建</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ===== SDK Download Center Tab ===== */}
|
||
{activeTab === 'sdk' && !loading && (
|
||
<div>
|
||
{/* Language Selector */}
|
||
<div className="dev-toolbar">
|
||
{sdkPackages.map(pkg => (
|
||
<button key={pkg.language} className={`dev-tab ${selectedSdk === pkg.language ? 'active' : ''}`} onClick={() => setSelectedSdk(pkg.language)}>
|
||
{pkg.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{sdkPackages.filter(p => p.language === selectedSdk).map(pkg => (
|
||
<div key={pkg.language} style={{ padding: '20px', background: 'rgba(0,0,0,0.02)', borderRadius: '12px' }}>
|
||
{/* Package Info */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
|
||
<div>
|
||
<h3 style={{ margin: '0 0 4px' }}>{pkg.name} <span className="dev-badge badge-active">v{pkg.version}</span></h3>
|
||
<p style={{ margin: '0', color: '#5A6480' }}>{pkg.description}</p>
|
||
<p style={{ margin: '4px 0 0', fontSize: '13px', color: '#8892B0' }}>Requires: {pkg.min_version}</p>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: '8px' }}>
|
||
<a href={pkg.download_url} target="_blank" rel="noopener noreferrer" className="dev-btn primary">Download</a>
|
||
{pkg.github_url && <a href={pkg.github_url} target="_blank" rel="noopener noreferrer" className="dev-btn">GitHub</a>}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Install Command */}
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<label style={{ fontSize: '13px', color: '#5A6480', marginBottom: '4px', display: 'block' }}>安装方式</label>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||
<code style={{ flex: 1, padding: '10px 14px', background: 'rgba(0,0,0,0.3)', borderRadius: '8px', fontFamily: 'monospace', fontSize: '14px' }}>
|
||
{pkg.install_cmd}
|
||
</code>
|
||
<button className="dev-btn-sm" onClick={() => copyToClipboard(pkg.install_cmd)}>复制</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 功能特性 */}
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<label style={{ fontSize: '13px', color: '#5A6480', marginBottom: '8px', display: 'block' }}>功能特性</label>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
|
||
{pkg.features.map(f => (
|
||
<span key={f} style={{ padding: '4px 12px', background: 'rgba(82,196,26,0.15)', borderRadius: '16px', fontSize: '13px', color: '#52c41a', border: '1px solid rgba(82,196,26,0.3)' }}>
|
||
{f}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Code Example */}
|
||
<div>
|
||
<label style={{ fontSize: '13px', color: '#5A6480', marginBottom: '4px', display: 'block' }}>快速开始示例</label>
|
||
<div style={{ position: 'relative' }}>
|
||
<pre style={{ padding: '16px', background: 'rgba(0,0,0,0.4)', borderRadius: '8px', overflow: 'auto', fontSize: '13px', lineHeight: '1.6', maxHeight: '400px' }}>
|
||
<code>{pkg.code_example}</code>
|
||
</pre>
|
||
<button className="dev-btn-sm" style={{ position: 'absolute', top: '8px', right: '8px' }} onClick={() => copyToClipboard(pkg.code_example)}>复制</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{sdkPackages.length === 0 && <div className="dev-empty">正在加载 SDK 包...</div>}
|
||
</div>
|
||
)}
|
||
|
||
{/* ===== Interactive API Docs Tab ===== */}
|
||
{activeTab === 'docs' && !loading && (
|
||
<div>
|
||
<div style={{ marginBottom: '16px', padding: '12px 16px', background: 'rgba(22,119,255,0.1)', borderRadius: '8px', border: '1px solid rgba(22,119,255,0.3)' }}>
|
||
<strong style={{ color: '#69b1ff' }}>Base URL:</strong>
|
||
<code style={{ marginLeft: '8px', color: '#1A1F36' }}>http://210.16.161.218:18080</code>
|
||
<span style={{ marginLeft: '16px', color: '#8892B0' }}>API Version: v1</span>
|
||
</div>
|
||
|
||
{docSections.map(section => {
|
||
const isExpanded = expandedSection === section.section;
|
||
return (
|
||
<div key={section.section} style={{ marginBottom: '8px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(0,0,0,0.08)' }}>
|
||
{/* Section Header */}
|
||
<div
|
||
onClick={() => setExpandedSection(isExpanded ? null : section.section)}
|
||
style={{ padding: '14px 16px', background: 'rgba(0,0,0,0.04)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||
<span style={{ fontSize: '18px' }}>
|
||
{section.icon === 'lock' ? '🔒' : section.icon === 'chat' ? '💬' : section.icon === 'book' ? '📚' : section.icon === 'robot' ? '🤖' : section.icon === 'workflow' ? '🔄' : section.icon === 'storage' ? '💾' : section.icon === 'webhook' ? '🔗' : '📋'}
|
||
</span>
|
||
<strong style={{ color: '#1A1F36' }}>{section.section}</strong>
|
||
<span style={{ color: '#8892B0', fontSize: '13px' }}>{section.endpoints.length} endpoints</span>
|
||
</div>
|
||
<span style={{ color: '#8892B0' }}>{isExpanded ? '▼' : '▶'}</span>
|
||
</div>
|
||
|
||
{/* Section Content */}
|
||
{isExpanded && (
|
||
<div style={{ background: 'rgba(0,0,0,0.2)' }}>
|
||
<p style={{ padding: '8px 16px', margin: '0', color: '#5A6480', fontSize: '13px' }}>{section.description}</p>
|
||
{section.endpoints.map(ep => {
|
||
const epKey = `${section.section}-${ep.path}`;
|
||
const isEpExpanded = expandedEndpoint === epKey;
|
||
return (
|
||
<div key={epKey} style={{ borderTop: '1px solid rgba(0,0,0,0.04)' }}>
|
||
<div
|
||
onClick={() => setExpandedEndpoint(isEpExpanded ? null : epKey)}
|
||
style={{ padding: '10px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '12px' }}
|
||
>
|
||
{methodBadge(ep.method)}
|
||
<code style={{ color: '#5A6480', fontSize: '13px' }}>{ep.path}</code>
|
||
<span style={{ color: '#5A6480', fontSize: '13px' }}>{ep.title}</span>
|
||
<span style={{ marginLeft: 'auto', color: '#8892B0' }}>{isEpExpanded ? '▼' : '▶'}</span>
|
||
</div>
|
||
{isEpExpanded && (
|
||
<div style={{ padding: '0 16px 16px 16px' }}>
|
||
<p style={{ color: '#5A6480', margin: '4px 0 12px', fontSize: '13px' }}>{ep.description}</p>
|
||
|
||
{/* 参数 */}
|
||
{ep.params.length > 0 && (
|
||
<div style={{ marginBottom: '12px' }}>
|
||
<label style={{ fontSize: '12px', color: '#8892B0', display: 'block', marginBottom: '6px' }}>参数</label>
|
||
<table className="dev-table" style={{ fontSize: '13px' }}>
|
||
<thead>
|
||
<tr><th>名称</th><th>类型</th><th>必填</th><th>描述</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
{ep.params.map(p => (
|
||
<tr key={p.name}>
|
||
<td className="mono-text">{p.name}</td>
|
||
<td>{p.type}</td>
|
||
<td>{p.required ? <span style={{ color: '#ff4d4f' }}>是</span> : <span style={{ color: '#8892B0' }}>否</span>}</td>
|
||
<td>{p.desc}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
|
||
{/* 请求示例 */}
|
||
{ep.example_request && (
|
||
<div style={{ marginBottom: '12px' }}>
|
||
<label style={{ fontSize: '12px', color: '#8892B0', display: 'block', marginBottom: '4px' }}>请求示例</label>
|
||
<pre style={{ padding: '10px 14px', background: 'rgba(0,0,0,0.3)', borderRadius: '6px', fontSize: '12px', overflow: 'auto' }}>
|
||
<code>{ep.example_request}</code>
|
||
</pre>
|
||
</div>
|
||
)}
|
||
|
||
{/* 响应示例 */}
|
||
{ep.example_response && (
|
||
<div>
|
||
<label style={{ fontSize: '12px', color: '#8892B0', display: 'block', marginBottom: '4px' }}>响应示例</label>
|
||
<pre style={{ padding: '10px 14px', background: 'rgba(0,0,0,0.3)', borderRadius: '6px', fontSize: '12px', overflow: 'auto' }}>
|
||
<code>{ep.example_response}</code>
|
||
</pre>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
|
||
{docSections.length === 0 && <div className="dev-empty">正在加载 API 文档...</div>}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|