453 lines
15 KiB
TypeScript
453 lines
15 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog"
|
||
import { Label } from "@/components/ui/label"
|
||
import {
|
||
Server,
|
||
Copy,
|
||
CheckCircle2,
|
||
Key,
|
||
RefreshCw,
|
||
ExternalLink,
|
||
Code,
|
||
Zap,
|
||
Users,
|
||
Search,
|
||
Tags,
|
||
Brain,
|
||
Database,
|
||
FileText,
|
||
Package,
|
||
Activity,
|
||
} from "lucide-react"
|
||
|
||
// API端点接口
|
||
interface APIEndpoint {
|
||
id: string
|
||
method: 'GET' | 'POST' | 'PUT' | 'DELETE'
|
||
path: string
|
||
name: string
|
||
description: string
|
||
category: string
|
||
auth: boolean
|
||
params?: { name: string; type: string; required: boolean; desc: string }[]
|
||
response?: string
|
||
}
|
||
|
||
// API分类
|
||
const API_CATEGORIES = [
|
||
{ id: 'query', name: '用户查询', icon: Search },
|
||
{ id: 'tag', name: '标签服务', icon: Tags },
|
||
{ id: 'ai', name: 'AI服务', icon: Brain },
|
||
{ id: 'data', name: '数据服务', icon: Database },
|
||
{ id: 'report', name: '报告服务', icon: FileText },
|
||
{ id: 'package', name: '流量包', icon: Package },
|
||
]
|
||
|
||
// 预定义API端点
|
||
const API_ENDPOINTS: APIEndpoint[] = [
|
||
// 用户查询
|
||
{
|
||
id: 'api_1',
|
||
method: 'GET',
|
||
path: '/api/shensheshou/user',
|
||
name: '用户画像查询',
|
||
description: '根据手机号或QQ查询完整用户画像',
|
||
category: 'query',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'phone', type: 'string', required: false, desc: '11位手机号' },
|
||
{ name: 'qq', type: 'string', required: false, desc: 'QQ号码' },
|
||
],
|
||
response: '{ "user": { "phone": "138xxx", "rfm": 85, "level": "A", "tags": [...] } }',
|
||
},
|
||
{
|
||
id: 'api_2',
|
||
method: 'POST',
|
||
path: '/api/shensheshou/users/batch',
|
||
name: '批量用户查询',
|
||
description: '批量查询多个用户的画像信息',
|
||
category: 'query',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'phones', type: 'array', required: false, desc: '手机号数组' },
|
||
{ name: 'qqs', type: 'array', required: false, desc: 'QQ号数组' },
|
||
],
|
||
},
|
||
// 标签服务
|
||
{
|
||
id: 'api_3',
|
||
method: 'GET',
|
||
path: '/api/shensheshou/tags',
|
||
name: '标签列表',
|
||
description: '获取所有可用标签',
|
||
category: 'tag',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'category', type: 'string', required: false, desc: '标签分类' },
|
||
],
|
||
},
|
||
{
|
||
id: 'api_4',
|
||
method: 'POST',
|
||
path: '/api/shensheshou/tags/apply',
|
||
name: '应用标签',
|
||
description: '为用户应用指定标签',
|
||
category: 'tag',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'userId', type: 'string', required: true, desc: '用户ID' },
|
||
{ name: 'tags', type: 'array', required: true, desc: '标签ID数组' },
|
||
],
|
||
},
|
||
// AI服务
|
||
{
|
||
id: 'api_5',
|
||
method: 'POST',
|
||
path: '/api/shensheshou/chat',
|
||
name: 'AI对话',
|
||
description: '与神射手AI进行对话，支持自然语言查询',
|
||
category: 'ai',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'message', type: 'string', required: true, desc: '对话内容' },
|
||
],
|
||
response: '{ "success": true, "response": { "content": "查询结果...", "data": {...} } }',
|
||
},
|
||
{
|
||
id: 'api_6',
|
||
method: 'POST',
|
||
path: '/api/shensheshou/ai/analyze',
|
||
name: 'AI数据分析',
|
||
description: 'AI自动分析数据并生成洞察',
|
||
category: 'ai',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'type', type: 'string', required: true, desc: '分析类型: rfm/behavior/preference' },
|
||
{ name: 'filters', type: 'object', required: false, desc: '筛选条件' },
|
||
],
|
||
},
|
||
{
|
||
id: 'api_7',
|
||
method: 'POST',
|
||
path: '/api/shensheshou/ai/tag',
|
||
name: 'AI智能打标',
|
||
description: 'AI自动为用户打标签',
|
||
category: 'ai',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'source', type: 'string', required: true, desc: '数据源' },
|
||
{ name: 'model', type: 'string', required: false, desc: 'AI模型: qwen/deepseek' },
|
||
],
|
||
},
|
||
// 数据服务
|
||
{
|
||
id: 'api_8',
|
||
method: 'GET',
|
||
path: '/api/shensheshou/sources',
|
||
name: '数据源列表',
|
||
description: '获取所有数据源连接状态',
|
||
category: 'data',
|
||
auth: true,
|
||
},
|
||
{
|
||
id: 'api_9',
|
||
method: 'POST',
|
||
path: '/api/shensheshou/ingest',
|
||
name: '数据导入',
|
||
description: '导入外部数据并通过AI标签引擎处理',
|
||
category: 'data',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'source', type: 'string', required: true, desc: '数据源标识' },
|
||
{ name: 'target', type: 'string', required: true, desc: '目标表' },
|
||
],
|
||
},
|
||
// 报告服务
|
||
{
|
||
id: 'api_10',
|
||
method: 'POST',
|
||
path: '/api/shensheshou/report/generate',
|
||
name: '生成报告',
|
||
description: 'AI自动生成数据分析报告',
|
||
category: 'report',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'template', type: 'string', required: true, desc: '报告模板ID' },
|
||
{ name: 'dateRange', type: 'string', required: false, desc: '日期范围' },
|
||
],
|
||
},
|
||
// 流量包
|
||
{
|
||
id: 'api_11',
|
||
method: 'GET',
|
||
path: '/api/shensheshou/packages',
|
||
name: '流量包列表',
|
||
description: '获取所有流量包',
|
||
category: 'package',
|
||
auth: true,
|
||
},
|
||
{
|
||
id: 'api_12',
|
||
method: 'POST',
|
||
path: '/api/shensheshou/packages/create',
|
||
name: '创建流量包',
|
||
description: '根据筛选条件创建流量包',
|
||
category: 'package',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'name', type: 'string', required: true, desc: '流量包名称' },
|
||
{ name: 'criteria', type: 'object', required: true, desc: '筛选条件' },
|
||
],
|
||
},
|
||
{
|
||
id: 'api_13',
|
||
method: 'POST',
|
||
path: '/api/shensheshou/packages/send',
|
||
name: '发送流量包',
|
||
description: '发送流量包到邮箱/飞书/微信',
|
||
category: 'package',
|
||
auth: true,
|
||
params: [
|
||
{ name: 'packageId', type: 'string', required: true, desc: '流量包ID' },
|
||
{ name: 'targets', type: 'array', required: true, desc: '发送目标' },
|
||
],
|
||
},
|
||
]
|
||
|
||
export default function APIServicePage() {
|
||
const [activeCategory, setActiveCategory] = useState('all')
|
||
const [apiBaseUrl, setApiBaseUrl] = useState('')
|
||
const [showKeyDialog, setShowKeyDialog] = useState(false)
|
||
const [copiedId, setCopiedId] = useState<string | null>(null)
|
||
|
||
useEffect(() => {
|
||
const host = typeof window !== 'undefined' ? window.location.origin : ''
|
||
setApiBaseUrl(host)
|
||
}, [])
|
||
|
||
const copyToClipboard = (text: string, id: string) => {
|
||
navigator.clipboard.writeText(text)
|
||
setCopiedId(id)
|
||
setTimeout(() => setCopiedId(null), 2000)
|
||
}
|
||
|
||
const getMethodColor = (method: string) => {
|
||
switch (method) {
|
||
case 'GET': return 'bg-green-100 text-green-700'
|
||
case 'POST': return 'bg-blue-100 text-blue-700'
|
||
case 'PUT': return 'bg-yellow-100 text-yellow-700'
|
||
case 'DELETE': return 'bg-red-100 text-red-700'
|
||
default: return 'bg-gray-100 text-gray-700'
|
||
}
|
||
}
|
||
|
||
const filteredEndpoints = activeCategory === 'all'
|
||
? API_ENDPOINTS
|
||
: API_ENDPOINTS.filter(e => e.category === activeCategory)
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/20">
|
||
<div className="p-6 space-y-6">
|
||
{/* 顶部标题 */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900">API服务</h1>
|
||
<p className="text-sm text-gray-500 mt-1">神射手开放API，支持第三方系统集成</p>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<Button variant="outline" onClick={() => setShowKeyDialog(true)}>
|
||
<Key className="h-4 w-4 mr-2" />
|
||
API密钥
|
||
</Button>
|
||
<Button variant="outline">
|
||
<ExternalLink className="h-4 w-4 mr-2" />
|
||
API文档
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* API基础信息 */}
|
||
<Card className="border-0 shadow-sm bg-gradient-to-r from-purple-50 to-blue-50">
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1">API基础地址</h3>
|
||
<div className="flex items-center gap-2">
|
||
<code className="bg-white px-4 py-2 rounded-lg text-purple-600 font-mono">
|
||
{apiBaseUrl || 'https://your-domain.com'}
|
||
</code>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => copyToClipboard(apiBaseUrl, 'base')}
|
||
>
|
||
{copiedId === 'base' ? <CheckCircle2 className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-sm text-gray-500">API版本</div>
|
||
<Badge>v1.0</Badge>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 认证说明 */}
|
||
<Card className="border-0 shadow-sm bg-white/80">
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-sm font-medium">认证方式</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="p-4 rounded-lg bg-gray-50">
|
||
<p className="text-sm text-gray-600 mb-3">所有API请求需要在Header中携带API密钥：</p>
|
||
<pre className="bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto">
|
||
{`curl -X GET "${apiBaseUrl}/api/shensheshou/user?phone=13800138000" \\
|
||
-H "Authorization: Bearer YOUR_API_KEY" \\
|
||
-H "Content-Type: application/json"`}
|
||
</pre>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* API分类筛选 */}
|
||
<div className="flex items-center gap-2 overflow-x-auto pb-2">
|
||
<Button
|
||
variant={activeCategory === 'all' ? 'default' : 'outline'}
|
||
size="sm"
|
||
onClick={() => setActiveCategory('all')}
|
||
>
|
||
全部 ({API_ENDPOINTS.length})
|
||
</Button>
|
||
{API_CATEGORIES.map(cat => {
|
||
const count = API_ENDPOINTS.filter(e => e.category === cat.id).length
|
||
const Icon = cat.icon
|
||
return (
|
||
<Button
|
||
key={cat.id}
|
||
variant={activeCategory === cat.id ? 'default' : 'outline'}
|
||
size="sm"
|
||
onClick={() => setActiveCategory(cat.id)}
|
||
>
|
||
<Icon className="h-4 w-4 mr-1" />
|
||
{cat.name} ({count})
|
||
</Button>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* API端点列表 */}
|
||
<div className="space-y-3">
|
||
{filteredEndpoints.map(endpoint => (
|
||
<Card key={endpoint.id} className="border-0 shadow-sm bg-white/80">
|
||
<CardContent className="p-4">
|
||
<div className="flex items-start justify-between mb-3">
|
||
<div className="flex items-center gap-3">
|
||
<Badge className={`${getMethodColor(endpoint.method)} font-mono`}>
|
||
{endpoint.method}
|
||
</Badge>
|
||
<code className="text-sm font-mono text-gray-700">{endpoint.path}</code>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => copyToClipboard(`${apiBaseUrl}${endpoint.path}`, endpoint.id)}
|
||
>
|
||
{copiedId === endpoint.id ? (
|
||
<CheckCircle2 className="h-3 w-3 text-green-500" />
|
||
) : (
|
||
<Copy className="h-3 w-3" />
|
||
)}
|
||
</Button>
|
||
</div>
|
||
{endpoint.auth && (
|
||
<Badge variant="outline" className="text-xs">
|
||
<Key className="h-3 w-3 mr-1" />
|
||
需认证
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
|
||
<h3 className="font-semibold text-gray-900 mb-1">{endpoint.name}</h3>
|
||
<p className="text-sm text-gray-500 mb-3">{endpoint.description}</p>
|
||
|
||
{/* 参数 */}
|
||
{endpoint.params && endpoint.params.length > 0 && (
|
||
<div className="mb-3">
|
||
<h4 className="text-xs font-medium text-gray-500 mb-2">参数</h4>
|
||
<div className="space-y-1">
|
||
{endpoint.params.map((param, i) => (
|
||
<div key={i} className="flex items-center gap-2 text-sm">
|
||
<code className="bg-gray-100 px-2 py-0.5 rounded text-purple-600">{param.name}</code>
|
||
<Badge variant="outline" className="text-xs">{param.type}</Badge>
|
||
{param.required && <Badge className="bg-red-100 text-red-700 text-xs">必填</Badge>}
|
||
<span className="text-gray-500">{param.desc}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 响应示例 */}
|
||
{endpoint.response && (
|
||
<div>
|
||
<h4 className="text-xs font-medium text-gray-500 mb-2">响应示例</h4>
|
||
<pre className="bg-gray-100 p-2 rounded text-xs font-mono text-gray-700 overflow-x-auto">
|
||
{endpoint.response}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
{/* API密钥弹窗 */}
|
||
<Dialog open={showKeyDialog} onOpenChange={setShowKeyDialog}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>API密钥管理</DialogTitle>
|
||
<DialogDescription>用于第三方系统调用神射手API</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<Label>当前API密钥</Label>
|
||
<div className="flex items-center gap-2">
|
||
<Input value="sk-archer-xxxxxxxxxxxxx" readOnly className="font-mono" />
|
||
<Button variant="outline" size="icon">
|
||
<Copy className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
<p className="text-xs text-gray-500">密钥创建于 2024-01-15，永不过期</p>
|
||
</div>
|
||
<div className="p-3 rounded-lg bg-yellow-50 text-sm text-yellow-700">
|
||
⚠️ 请妥善保管API密钥，不要在客户端代码中暴露
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setShowKeyDialog(false)}>关闭</Button>
|
||
<Button variant="destructive">
|
||
<RefreshCw className="h-4 w-4 mr-2" />
|
||
重新生成
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|