414 lines
11 KiB
TypeScript
414 lines
11 KiB
TypeScript
import type { ReactNode } from "react"
|
||
|
||
interface ApiGuide {
|
||
title: string
|
||
description: string
|
||
endpoint: string
|
||
method: "GET" | "POST" | "PUT" | "DELETE"
|
||
parameters: {
|
||
name: string
|
||
type: string
|
||
required: boolean
|
||
description: string
|
||
}[]
|
||
requestExample: string
|
||
responseExample: string
|
||
notes?: string
|
||
}
|
||
|
||
interface ScenarioApiGuides {
|
||
[key: string]: ApiGuide[]
|
||
}
|
||
|
||
// API指南数据
|
||
const apiGuides: ScenarioApiGuides = {
|
||
phone: [
|
||
{
|
||
title: "获取电话获客列表",
|
||
description: "获取所有电话获客场景的列表",
|
||
endpoint: "/api/scenarios/phone",
|
||
method: "GET",
|
||
parameters: [
|
||
{
|
||
name: "page",
|
||
type: "number",
|
||
required: false,
|
||
description: "页码，默认为1",
|
||
},
|
||
{
|
||
name: "limit",
|
||
type: "number",
|
||
required: false,
|
||
description: "每页数量，默认为10",
|
||
},
|
||
{
|
||
name: "status",
|
||
type: "string",
|
||
required: false,
|
||
description: "状态筛选，可选值：active, inactive",
|
||
},
|
||
],
|
||
requestExample: `
|
||
GET /api/scenarios/phone?page=1&limit=10&status=active
|
||
`,
|
||
responseExample: `
|
||
{
|
||
"success": true,
|
||
"data": {
|
||
"total": 25,
|
||
"page": 1,
|
||
"limit": 10,
|
||
"items": [
|
||
{
|
||
"id": "phone-1",
|
||
"name": "电话获客计划1",
|
||
"status": "active",
|
||
"createdAt": "2023-05-20T10:30:00Z",
|
||
"deviceCount": 3,
|
||
"acquisitionCount": 120
|
||
},
|
||
// ...更多数据
|
||
]
|
||
}
|
||
}
|
||
`,
|
||
},
|
||
{
|
||
title: "创建电话获客场景",
|
||
description: "创建新的电话获客场景",
|
||
endpoint: "/api/scenarios/phone",
|
||
method: "POST",
|
||
parameters: [
|
||
{
|
||
name: "name",
|
||
type: "string",
|
||
required: true,
|
||
description: "场景名称",
|
||
},
|
||
{
|
||
name: "devices",
|
||
type: "array",
|
||
required: true,
|
||
description: "设备ID数组",
|
||
},
|
||
{
|
||
name: "tags",
|
||
type: "array",
|
||
required: false,
|
||
description: "标签数组",
|
||
},
|
||
{
|
||
name: "settings",
|
||
type: "object",
|
||
required: false,
|
||
description: "场景设置",
|
||
},
|
||
],
|
||
requestExample: `
|
||
POST /api/scenarios/phone
|
||
Content-Type: application/json
|
||
|
||
{
|
||
"name": "新电话获客计划",
|
||
"devices": ["device-1", "device-2"],
|
||
"tags": ["高意向", "新客户"],
|
||
"settings": {
|
||
"autoAdd": true,
|
||
"speechToText": true,
|
||
"callType": "both"
|
||
}
|
||
}
|
||
`,
|
||
responseExample: `
|
||
{
|
||
"success": true,
|
||
"data": {
|
||
"id": "phone-26",
|
||
"name": "新电话获客计划",
|
||
"status": "active",
|
||
"createdAt": "2023-06-01T08:15:00Z"
|
||
}
|
||
}
|
||
`,
|
||
},
|
||
],
|
||
haibao: [
|
||
{
|
||
title: "获取海报获客列表",
|
||
description: "获取所有海报获客场景的列表",
|
||
endpoint: "/api/scenarios/haibao",
|
||
method: "GET",
|
||
parameters: [
|
||
{
|
||
name: "page",
|
||
type: "number",
|
||
required: false,
|
||
description: "页码，默认为1",
|
||
},
|
||
{
|
||
name: "limit",
|
||
type: "number",
|
||
required: false,
|
||
description: "每页数量，默认为10",
|
||
},
|
||
],
|
||
requestExample: `
|
||
GET /api/scenarios/haibao?page=1&limit=10
|
||
`,
|
||
responseExample: `
|
||
{
|
||
"success": true,
|
||
"data": {
|
||
"total": 15,
|
||
"page": 1,
|
||
"limit": 10,
|
||
"items": [
|
||
{
|
||
"id": "haibao-1",
|
||
"name": "618促销海报",
|
||
"status": "active",
|
||
"createdAt": "2023-05-15T09:20:00Z",
|
||
"posterUrl": "https://example.com/posters/618.jpg",
|
||
"scanCount": 230,
|
||
"conversionCount": 45
|
||
},
|
||
// ...更多数据
|
||
]
|
||
}
|
||
}
|
||
`,
|
||
},
|
||
],
|
||
api: [
|
||
{
|
||
title: "API获客回调接口",
|
||
description: "接收第三方系统推送的获客数据",
|
||
endpoint: "/api/scenarios/api/callback",
|
||
method: "POST",
|
||
parameters: [
|
||
{
|
||
name: "token",
|
||
type: "string",
|
||
required: true,
|
||
description: "API认证令牌",
|
||
},
|
||
{
|
||
name: "data",
|
||
type: "array",
|
||
required: true,
|
||
description: "获客数据数组",
|
||
},
|
||
],
|
||
requestExample: `
|
||
POST /api/scenarios/api/callback
|
||
Content-Type: application/json
|
||
|
||
{
|
||
"token": "your_api_token",
|
||
"data": [
|
||
{
|
||
"phone": "13800138000",
|
||
"name": "张三",
|
||
"source": "官网表单",
|
||
"tags": ["高意向", "产品A"],
|
||
"remark": "对产品A很感兴趣"
|
||
},
|
||
{
|
||
"phone": "13900139000",
|
||
"name": "李四",
|
||
"source": "线下活动",
|
||
"tags": ["中意向"],
|
||
"remark": "参加了6月15日的产品发布会"
|
||
}
|
||
]
|
||
}
|
||
`,
|
||
responseExample: `
|
||
{
|
||
"success": true,
|
||
"message": "数据接收成功",
|
||
"data": {
|
||
"received": 2,
|
||
"processed": 2,
|
||
"failed": 0
|
||
}
|
||
}
|
||
`,
|
||
notes: "API令牌可在API获客场景详情页获取，请妥善保管",
|
||
},
|
||
{
|
||
title: "获取API获客统计数据",
|
||
description: "获取API获客场景的统计数据",
|
||
endpoint: "/api/scenarios/api/{id}/stats",
|
||
method: "GET",
|
||
parameters: [
|
||
{
|
||
name: "id",
|
||
type: "string",
|
||
required: true,
|
||
description: "API获客场景ID",
|
||
},
|
||
{
|
||
name: "startDate",
|
||
type: "string",
|
||
required: false,
|
||
description: "开始日期，格式：YYYY-MM-DD",
|
||
},
|
||
{
|
||
name: "endDate",
|
||
type: "string",
|
||
required: false,
|
||
description: "结束日期，格式：YYYY-MM-DD",
|
||
},
|
||
],
|
||
requestExample: `
|
||
GET /api/scenarios/api/api-1/stats?startDate=2023-05-01&endDate=2023-05-31
|
||
`,
|
||
responseExample: `
|
||
{
|
||
"success": true,
|
||
"data": {
|
||
"total": 156,
|
||
"daily": [
|
||
{
|
||
"date": "2023-05-01",
|
||
"count": 12
|
||
},
|
||
{
|
||
"date": "2023-05-02",
|
||
"count": 8
|
||
},
|
||
// ...更多数据
|
||
],
|
||
"sources": [
|
||
{
|
||
"name": "官网表单",
|
||
"count": 78
|
||
},
|
||
{
|
||
"name": "线下活动",
|
||
"count": 45
|
||
},
|
||
{
|
||
"name": "合作伙伴",
|
||
"count": 33
|
||
}
|
||
]
|
||
}
|
||
}
|
||
`,
|
||
},
|
||
],
|
||
}
|
||
|
||
// 获取特定场景的API指南
|
||
export function getApiGuideForScenario(scenarioType: string): ApiGuide[] {
|
||
return apiGuides[scenarioType] || []
|
||
}
|
||
|
||
// 渲染API指南组件
|
||
export function ApiGuideComponent({
|
||
scenarioType,
|
||
children,
|
||
}: {
|
||
scenarioType: string
|
||
children?: ReactNode
|
||
}): JSX.Element {
|
||
const guides = getApiGuideForScenario(scenarioType)
|
||
|
||
if (guides.length === 0) {
|
||
return (
|
||
<div className="p-6 bg-gray-50 rounded-lg">
|
||
<h3 className="text-lg font-medium">暂无API文档</h3>
|
||
<p className="text-gray-500 mt-2">该场景类型暂未提供API接口文档</p>
|
||
{children}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-8">
|
||
{guides.map((guide, index) => (
|
||
<div key={index} className="border rounded-lg overflow-hidden">
|
||
<div className="bg-gray-50 p-4 border-b">
|
||
<h3 className="text-lg font-medium">{guide.title}</h3>
|
||
<p className="text-gray-500 mt-1">{guide.description}</p>
|
||
</div>
|
||
<div className="p-4 space-y-4">
|
||
<div>
|
||
<h4 className="font-medium text-sm text-gray-500">接口地址</h4>
|
||
<div className="flex items-center mt-1">
|
||
<span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm font-mono">{guide.method}</span>
|
||
<span className="ml-2 font-mono">{guide.endpoint}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="font-medium text-sm text-gray-500">参数说明</h4>
|
||
<div className="mt-1 border rounded-lg overflow-hidden">
|
||
<table className="min-w-full divide-y divide-gray-200">
|
||
<thead className="bg-gray-50">
|
||
<tr>
|
||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
参数名
|
||
</th>
|
||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
类型
|
||
</th>
|
||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
必填
|
||
</th>
|
||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
说明
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="bg-white divide-y divide-gray-200">
|
||
{guide.parameters.map((param, paramIndex) => (
|
||
<tr key={paramIndex}>
|
||
<td className="px-4 py-2 text-sm font-mono">{param.name}</td>
|
||
<td className="px-4 py-2 text-sm">{param.type}</td>
|
||
<td className="px-4 py-2 text-sm">
|
||
{param.required ? (
|
||
<span className="text-red-500">是</span>
|
||
) : (
|
||
<span className="text-gray-500">否</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-2 text-sm">{param.description}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<h4 className="font-medium text-sm text-gray-500">请求示例</h4>
|
||
<pre className="mt-1 p-3 bg-gray-800 text-gray-100 rounded-lg overflow-auto text-xs font-mono">
|
||
{guide.requestExample}
|
||
</pre>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-sm text-gray-500">响应示例</h4>
|
||
<pre className="mt-1 p-3 bg-gray-800 text-gray-100 rounded-lg overflow-auto text-xs font-mono">
|
||
{guide.responseExample}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
|
||
{guide.notes && (
|
||
<div className="bg-yellow-50 border border-yellow-100 rounded-lg p-3">
|
||
<h4 className="font-medium text-sm text-yellow-800">注意事项</h4>
|
||
<p className="mt-1 text-sm text-yellow-700">{guide.notes}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
{children}
|
||
</div>
|
||
)
|
||
}
|