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('Delete this 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">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(255,255,255,0.05)', 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>Event</th><th>Status</th><th>Response Code</th><th>Response Time</th><th>Attempts</th><th>Time</th><th>Error</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>Name</th><th>URL</th><th>Events</th><th>Status</th><th>Deliveries</th><th>Success Rate</th><th>Last Triggered</th><th>Actions</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)}>Test</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)}>Delete</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>
|
|
)}
|
|
|
|
{/* Supported Events Info */}
|
|
{webhookEvents.length > 0 && (
|
|
<div style={{ marginTop: '20px', padding: '16px', background: 'rgba(255,255,255,0.03)', borderRadius: '8px' }}>
|
|
<h4 style={{ margin: '0 0 12px', color: 'rgba(255,255,255,0.85)' }}>Supported Events</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(255,255,255,0.05)', borderRadius: '6px' }}>
|
|
<code style={{ color: '#69b1ff' }}>{ev.value}</code>
|
|
<div style={{ fontSize: '12px', color: 'rgba(255,255,255,0.45)', 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>New Webhook</h3>
|
|
<div className="dev-form-group">
|
|
<label>Name</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(255,255,255,0.05)', 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)}>Cancel</button>
|
|
<button className="dev-btn primary" onClick={handleCreateWebhook} disabled={!webhookForm.name || !webhookForm.url}>Create</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(255,255,255,0.03)', 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: 'rgba(255,255,255,0.55)' }}>{pkg.description}</p>
|
|
<p style={{ margin: '4px 0 0', fontSize: '13px', color: 'rgba(255,255,255,0.4)' }}>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: 'rgba(255,255,255,0.5)', marginBottom: '4px', display: 'block' }}>Installation</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)}>Copy</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<label style={{ fontSize: '13px', color: 'rgba(255,255,255,0.5)', marginBottom: '8px', display: 'block' }}>Features</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: 'rgba(255,255,255,0.5)', marginBottom: '4px', display: 'block' }}>Quick Start Example</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)}>Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{sdkPackages.length === 0 && <div className="dev-empty">Loading SDK packages...</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: 'rgba(255,255,255,0.8)' }}>http://210.16.161.218:18080</code>
|
|
<span style={{ marginLeft: '16px', color: 'rgba(255,255,255,0.4)' }}>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(255,255,255,0.1)' }}>
|
|
{/* Section Header */}
|
|
<div
|
|
onClick={() => setExpandedSection(isExpanded ? null : section.section)}
|
|
style={{ padding: '14px 16px', background: 'rgba(255,255,255,0.05)', 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: 'rgba(255,255,255,0.85)' }}>{section.section}</strong>
|
|
<span style={{ color: 'rgba(255,255,255,0.4)', fontSize: '13px' }}>{section.endpoints.length} endpoints</span>
|
|
</div>
|
|
<span style={{ color: 'rgba(255,255,255,0.4)' }}>{isExpanded ? '▼' : '▶'}</span>
|
|
</div>
|
|
|
|
{/* Section Content */}
|
|
{isExpanded && (
|
|
<div style={{ background: 'rgba(0,0,0,0.2)' }}>
|
|
<p style={{ padding: '8px 16px', margin: '0', color: 'rgba(255,255,255,0.5)', 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(255,255,255,0.05)' }}>
|
|
<div
|
|
onClick={() => setExpandedEndpoint(isEpExpanded ? null : epKey)}
|
|
style={{ padding: '10px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '12px' }}
|
|
>
|
|
{methodBadge(ep.method)}
|
|
<code style={{ color: 'rgba(255,255,255,0.7)', fontSize: '13px' }}>{ep.path}</code>
|
|
<span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '13px' }}>{ep.title}</span>
|
|
<span style={{ marginLeft: 'auto', color: 'rgba(255,255,255,0.3)' }}>{isEpExpanded ? '▼' : '▶'}</span>
|
|
</div>
|
|
{isEpExpanded && (
|
|
<div style={{ padding: '0 16px 16px 16px' }}>
|
|
<p style={{ color: 'rgba(255,255,255,0.55)', margin: '4px 0 12px', fontSize: '13px' }}>{ep.description}</p>
|
|
|
|
{/* Parameters */}
|
|
{ep.params.length > 0 && (
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<label style={{ fontSize: '12px', color: 'rgba(255,255,255,0.4)', display: 'block', marginBottom: '6px' }}>Parameters</label>
|
|
<table className="dev-table" style={{ fontSize: '13px' }}>
|
|
<thead>
|
|
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</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' }}>Yes</span> : <span style={{ color: 'rgba(255,255,255,0.4)' }}>No</span>}</td>
|
|
<td>{p.desc}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Example Request */}
|
|
{ep.example_request && (
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<label style={{ fontSize: '12px', color: 'rgba(255,255,255,0.4)', display: 'block', marginBottom: '4px' }}>Example Request</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>
|
|
)}
|
|
|
|
{/* Example Response */}
|
|
{ep.example_response && (
|
|
<div>
|
|
<label style={{ fontSize: '12px', color: 'rgba(255,255,255,0.4)', display: 'block', marginBottom: '4px' }}>Example Response</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">Loading API documentation...</div>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|