280 lines
12 KiB
TypeScript
280 lines
12 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 Link from "next/link"
|
||
import {
|
||
Bot,
|
||
MessageSquare,
|
||
Webhook,
|
||
Sparkles,
|
||
Zap,
|
||
FileText,
|
||
ArrowRight,
|
||
CheckCircle2,
|
||
Activity,
|
||
Users,
|
||
Send,
|
||
Settings,
|
||
ExternalLink,
|
||
Copy,
|
||
} from "lucide-react"
|
||
|
||
interface ChannelStats {
|
||
name: string
|
||
icon: string
|
||
status: 'connected' | 'disconnected'
|
||
todayMessages: number
|
||
}
|
||
|
||
export default function AIAgentPage() {
|
||
const [aiStatus, setAiStatus] = useState<'online' | 'offline'>('online')
|
||
const [stats, setStats] = useState({
|
||
totalQueries: 156000,
|
||
todayQueries: 2340,
|
||
avgLatency: 380,
|
||
accuracy: 97.5,
|
||
})
|
||
|
||
const channels: ChannelStats[] = [
|
||
{ name: '飞书', icon: '🪶', status: 'connected', todayMessages: 156 },
|
||
{ name: '企业微信', icon: '💼', status: 'connected', todayMessages: 89 },
|
||
{ name: '微信(存客宝)', icon: '💬', status: 'connected', todayMessages: 320 },
|
||
{ name: 'API接口', icon: '🔌', status: 'connected', todayMessages: 2340 },
|
||
]
|
||
|
||
const API_BASE_URL = 'https://your-domain.com/api/shensheshou'
|
||
|
||
const modules = [
|
||
{
|
||
title: '智能对话',
|
||
description: '与AI助手对话，查询用户信息和执行数据分析',
|
||
icon: MessageSquare,
|
||
href: '/ai-agent/chat',
|
||
color: 'from-blue-500 to-cyan-500',
|
||
},
|
||
{
|
||
title: '渠道配置',
|
||
description: '配置飞书、企微、微信等渠道接入',
|
||
icon: Webhook,
|
||
href: '/ai-agent/channels',
|
||
color: 'from-green-500 to-emerald-500',
|
||
},
|
||
{
|
||
title: 'AI打标',
|
||
description: '使用AI自动为用户打标签',
|
||
icon: Sparkles,
|
||
href: '/ai-agent/smart-tag',
|
||
color: 'from-purple-500 to-pink-500',
|
||
},
|
||
{
|
||
title: 'AI清洗',
|
||
description: '智能数据清洗和格式化',
|
||
icon: Zap,
|
||
href: '/ai-agent/data-cleaning',
|
||
color: 'from-orange-500 to-red-500',
|
||
},
|
||
{
|
||
title: '智能报告',
|
||
description: '自动生成数据分析报告',
|
||
icon: FileText,
|
||
href: '/ai-agent/report',
|
||
color: 'from-indigo-500 to-purple-500',
|
||
},
|
||
]
|
||
|
||
const copyToClipboard = (text: string) => {
|
||
navigator.clipboard.writeText(text)
|
||
}
|
||
|
||
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">AI Agent</h1>
|
||
<p className="text-sm text-gray-500 mt-1">智能助手，对接飞书/企微/微信等多渠道</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Badge className={aiStatus === 'online' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}>
|
||
<div className={`w-2 h-2 rounded-full ${aiStatus === 'online' ? 'bg-green-500' : 'bg-red-500'} mr-1.5`}></div>
|
||
{aiStatus === 'online' ? 'AI在线' : 'AI离线'}
|
||
</Badge>
|
||
<Badge variant="outline">{stats.avgLatency}ms</Badge>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 统计卡片 */}
|
||
<div className="grid grid-cols-4 gap-4">
|
||
<Card className="border-0 shadow-sm bg-white/80">
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-500">今日查询</p>
|
||
<p className="text-2xl font-bold">{stats.todayQueries.toLocaleString()}</p>
|
||
</div>
|
||
<Send className="h-8 w-8 text-blue-500 opacity-50" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="border-0 shadow-sm bg-white/80">
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-500">累计查询</p>
|
||
<p className="text-2xl font-bold">{(stats.totalQueries / 1000).toFixed(0)}K</p>
|
||
</div>
|
||
<Activity className="h-8 w-8 text-green-500 opacity-50" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="border-0 shadow-sm bg-white/80">
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-500">接入渠道</p>
|
||
<p className="text-2xl font-bold">{channels.filter(c => c.status === 'connected').length}</p>
|
||
</div>
|
||
<Webhook className="h-8 w-8 text-purple-500 opacity-50" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="border-0 shadow-sm bg-white/80">
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-500">准确率</p>
|
||
<p className="text-2xl font-bold">{stats.accuracy}%</p>
|
||
</div>
|
||
<CheckCircle2 className="h-8 w-8 text-orange-500 opacity-50" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 渠道状态 */}
|
||
<Card className="border-0 shadow-sm bg-white/80">
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-sm font-medium flex items-center justify-between">
|
||
<span className="flex items-center gap-2">
|
||
<Webhook className="h-4 w-4 text-purple-500" />
|
||
接入渠道状态
|
||
</span>
|
||
<Link href="/ai-agent/channels">
|
||
<Button variant="ghost" size="sm">
|
||
管理渠道 <ArrowRight className="h-4 w-4 ml-1" />
|
||
</Button>
|
||
</Link>
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-4 gap-3">
|
||
{channels.map((channel, i) => (
|
||
<div key={i} className="p-3 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-2xl">{channel.icon}</span>
|
||
<Badge className={channel.status === 'connected' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}>
|
||
{channel.status === 'connected' ? '已连接' : '未连接'}
|
||
</Badge>
|
||
</div>
|
||
<h4 className="font-medium text-gray-900">{channel.name}</h4>
|
||
<p className="text-sm text-gray-500">今日 {channel.todayMessages} 条消息</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* API接入说明 */}
|
||
<Card className="border-0 shadow-sm bg-gradient-to-r from-blue-50 to-purple-50">
|
||
<CardContent className="p-4">
|
||
<div className="flex items-start justify-between">
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1 flex items-center gap-2">
|
||
<Bot className="h-5 w-5 text-purple-500" />
|
||
神射手 Skill API 接口
|
||
</h3>
|
||
<p className="text-sm text-gray-600 mb-3">任何系统都可通过以下接口与神射手Skill直接通信</p>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2">
|
||
<code className="bg-white px-3 py-1.5 rounded text-sm font-mono text-purple-600 flex-1">
|
||
POST {API_BASE_URL}/chat
|
||
</code>
|
||
<Button variant="ghost" size="sm" onClick={() => copyToClipboard(`${API_BASE_URL}/chat`)}>
|
||
<Copy className="h-3 w-3" />
|
||
</Button>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<code className="bg-white px-3 py-1.5 rounded text-sm font-mono text-purple-600 flex-1">
|
||
POST {API_BASE_URL}/query?phone=13800138000
|
||
</code>
|
||
<Button variant="ghost" size="sm" onClick={() => copyToClipboard(`${API_BASE_URL}/query`)}>
|
||
<Copy className="h-3 w-3" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Link href="/ai-agent/channels">
|
||
<Button variant="outline" size="sm">
|
||
<Settings className="h-4 w-4 mr-1" />
|
||
配置接入
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 功能模块 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{modules.map((module, i) => (
|
||
<Link key={i} href={module.href}>
|
||
<Card className="border-0 shadow-sm bg-white/80 hover:shadow-lg transition-all cursor-pointer group h-full">
|
||
<CardContent className="p-5">
|
||
<div className={`w-12 h-12 rounded-xl bg-gradient-to-r ${module.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
|
||
<module.icon className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h3 className="font-bold text-gray-900 text-lg mb-1">{module.title}</h3>
|
||
<p className="text-sm text-gray-500">{module.description}</p>
|
||
<div className="flex items-center gap-1 mt-4 text-sm text-blue-600">
|
||
<span>进入</span>
|
||
<ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
{/* 使用说明 */}
|
||
<Card className="border-0 shadow-sm bg-white/80">
|
||
<CardHeader>
|
||
<CardTitle className="text-sm font-medium">快速接入指南</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-3 gap-4">
|
||
<div className="p-4 rounded-xl bg-blue-50">
|
||
<div className="w-8 h-8 rounded-lg bg-blue-500 text-white flex items-center justify-center font-bold mb-2">1</div>
|
||
<h4 className="font-medium text-gray-900 mb-1">配置渠道</h4>
|
||
<p className="text-sm text-gray-600">在渠道配置中添加飞书/企微/微信等渠道</p>
|
||
</div>
|
||
<div className="p-4 rounded-xl bg-green-50">
|
||
<div className="w-8 h-8 rounded-lg bg-green-500 text-white flex items-center justify-center font-bold mb-2">2</div>
|
||
<h4 className="font-medium text-gray-900 mb-1">填写密钥</h4>
|
||
<p className="text-sm text-gray-600">填入对应平台的AppID和Secret</p>
|
||
</div>
|
||
<div className="p-4 rounded-xl bg-purple-50">
|
||
<div className="w-8 h-8 rounded-lg bg-purple-500 text-white flex items-center justify-center font-bold mb-2">3</div>
|
||
<h4 className="font-medium text-gray-900 mb-1">开始对话</h4>
|
||
<p className="text-sm text-gray-600">在对应平台@机器人即可与神射手对话</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|