feat: 本次提交更新内容如下
场景获客列表搞定
This commit is contained in:
笔记本里的永平
413
Cunkebao/docs/api-guide.tsx
Normal file
413
Cunkebao/docs/api-guide.tsx
Normal file
@@ -0,0 +1,413 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user