refactor: overhaul system navigation based on 5 HTML docs

Reorganize modules, add AI Agent smart interaction, include prompt settings, enhance data output with subscriptions, and separate system monitoring.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

app/data-output/api-market/page.tsx

@@ -0,0 +1,464 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { 
+  Server, Plus, Key, FileText, BarChart3, Settings,
+  Eye, Copy, Trash2, CheckCircle2, XCircle, Clock,
+  Activity, ExternalLink, Code, Shield
+} from "lucide-react"
+
+const apis = [
+  {
+    id: "1",
+    name: "用户画像查询API",
+    endpoint: "/api/v1/user/portrait",
+    method: "GET",
+    description: "根据用户ID查询完整画像信息",
+    status: "active",
+    callCount: 125680,
+    avgLatency: 45,
+    errorRate: 0.02,
+  },
+  {
+    id: "2",
+    name: "标签批量查询API",
+    endpoint: "/api/v1/tags/batch",
+    method: "POST",
+    description: "批量查询用户标签",
+    status: "active",
+    callCount: 89420,
+    avgLatency: 120,
+    errorRate: 0.05,
+  },
+  {
+    id: "3",
+    name: "CLV评分API",
+    endpoint: "/api/v1/clv/score",
+    method: "GET",
+    description: "获取用户CLV评分和预测值",
+    status: "maintenance",
+    callCount: 45230,
+    avgLatency: 85,
+    errorRate: 0.01,
+  },
+]
+
+const apiKeys = [
+  { id: "1", name: "生产环境密钥", key: "sk_prod_****8a9b", created: "2024-01-01", lastUsed: "2024-01-15", status: "active" },
+  { id: "2", name: "测试环境密钥", key: "sk_test_****3c2d", created: "2024-01-05", lastUsed: "2024-01-14", status: "active" },
+]
+
+export default function APIMarketPage() {
+  const [activeTab, setActiveTab] = useState("apis")
+  const [showDocDialog, setShowDocDialog] = useState(false)
+  const [showKeyDialog, setShowKeyDialog] = useState(false)
+  const [showMonitorDialog, setShowMonitorDialog] = useState(false)
+  const [selectedApi, setSelectedApi] = useState<typeof apis[0] | null>(null)
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "active":
+        return <Badge className="bg-green-100 text-green-700">运行中</Badge>
+      case "maintenance":
+        return <Badge className="bg-yellow-100 text-yellow-700">维护中</Badge>
+      case "disabled":
+        return <Badge className="bg-gray-100 text-gray-700">已停用</Badge>
+      default:
+        return <Badge variant="secondary">未知</Badge>
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">API市场</h1>
+          <p className="text-muted-foreground">管理和监控数据API服务</p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => setShowKeyDialog(true)}>
+            <Key className="mr-2 h-4 w-4" />
+            管理密钥
+          </Button>
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            发布API
+          </Button>
+        </div>
+      </div>
+
+      {/* 统计卡片 */}
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">API总数</p>
+                <p className="text-2xl font-bold">12</p>
+              </div>
+              <Server className="h-8 w-8 text-blue-500" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">今日调用</p>
+                <p className="text-2xl font-bold">45.2K</p>
+              </div>
+              <Activity className="h-8 w-8 text-green-500" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">平均延迟</p>
+                <p className="text-2xl font-bold">68ms</p>
+              </div>
+              <Clock className="h-8 w-8 text-purple-500" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">成功率</p>
+                <p className="text-2xl font-bold">99.8%</p>
+              </div>
+              <CheckCircle2 className="h-8 w-8 text-cyan-500" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 主内容区 */}
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="apis">API列表</TabsTrigger>
+          <TabsTrigger value="keys">API密钥</TabsTrigger>
+          <TabsTrigger value="logs">调用日志</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="apis" className="space-y-4">
+          <Card>
+            <CardContent className="pt-6">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>API名称</TableHead>
+                    <TableHead>端点</TableHead>
+                    <TableHead>方法</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead>调用量</TableHead>
+                    <TableHead>延迟</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {apis.map((api) => (
+                    <TableRow key={api.id}>
+                      <TableCell>
+                        <div>
+                          <p className="font-medium">{api.name}</p>
+                          <p className="text-sm text-muted-foreground">{api.description}</p>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <code className="text-sm bg-muted px-2 py-1 rounded">{api.endpoint}</code>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">{api.method}</Badge>
+                      </TableCell>
+                      <TableCell>{getStatusBadge(api.status)}</TableCell>
+                      <TableCell>{api.callCount.toLocaleString()}</TableCell>
+                      <TableCell>{api.avgLatency}ms</TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex items-center justify-end gap-1">
+                          <Button 
+                            variant="ghost" 
+                            size="sm"
+                            onClick={() => {
+                              setSelectedApi(api)
+                              setShowDocDialog(true)
+                            }}
+                          >
+                            <FileText className="h-4 w-4" />
+                          </Button>
+                          <Button 
+                            variant="ghost" 
+                            size="sm"
+                            onClick={() => {
+                              setSelectedApi(api)
+                              setShowMonitorDialog(true)
+                            }}
+                          >
+                            <BarChart3 className="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" size="sm">
+                            <Settings className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="keys" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle>API密钥</CardTitle>
+                  <CardDescription>管理API访问密钥</CardDescription>
+                </div>
+                <Button size="sm">
+                  <Plus className="h-4 w-4 mr-1" />
+                  创建密钥
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>名称</TableHead>
+                    <TableHead>密钥</TableHead>
+                    <TableHead>创建时间</TableHead>
+                    <TableHead>最后使用</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {apiKeys.map((key) => (
+                    <TableRow key={key.id}>
+                      <TableCell className="font-medium">{key.name}</TableCell>
+                      <TableCell>
+                        <code className="text-sm bg-muted px-2 py-1 rounded">{key.key}</code>
+                      </TableCell>
+                      <TableCell>{key.created}</TableCell>
+                      <TableCell>{key.lastUsed}</TableCell>
+                      <TableCell>
+                        <Badge className="bg-green-100 text-green-700">活跃</Badge>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex items-center justify-end gap-1">
+                          <Button variant="ghost" size="sm">
+                            <Eye className="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" size="sm">
+                            <Copy className="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" size="sm" className="text-red-600">
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="logs" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>调用日志</CardTitle>
+              <CardDescription>查看API调用历史记录</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>时间</TableHead>
+                    <TableHead>API</TableHead>
+                    <TableHead>方法</TableHead>
+                    <TableHead>状态码</TableHead>
+                    <TableHead>延迟</TableHead>
+                    <TableHead>IP</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell>2024-01-15 14:30:25</TableCell>
+                    <TableCell>/api/v1/user/portrait</TableCell>
+                    <TableCell><Badge variant="outline">GET</Badge></TableCell>
+                    <TableCell><Badge className="bg-green-100 text-green-700">200</Badge></TableCell>
+                    <TableCell>42ms</TableCell>
+                    <TableCell>192.168.1.***</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>2024-01-15 14:30:18</TableCell>
+                    <TableCell>/api/v1/tags/batch</TableCell>
+                    <TableCell><Badge variant="outline">POST</Badge></TableCell>
+                    <TableCell><Badge className="bg-green-100 text-green-700">200</Badge></TableCell>
+                    <TableCell>118ms</TableCell>
+                    <TableCell>192.168.1.***</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>2024-01-15 14:30:05</TableCell>
+                    <TableCell>/api/v1/clv/score</TableCell>
+                    <TableCell><Badge variant="outline">GET</Badge></TableCell>
+                    <TableCell><Badge className="bg-red-100 text-red-700">500</Badge></TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>192.168.2.***</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* API文档弹窗 */}
+      <Dialog open={showDocDialog} onOpenChange={setShowDocDialog}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>{selectedApi?.name} - 接口文档</DialogTitle>
+            <DialogDescription>{selectedApi?.description}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Badge variant="outline">{selectedApi?.method}</Badge>
+              <code className="flex-1 bg-muted px-3 py-2 rounded text-sm">{selectedApi?.endpoint}</code>
+              <Button variant="outline" size="sm">
+                <Copy className="h-4 w-4" />
+              </Button>
+            </div>
+            <div>
+              <Label className="text-sm font-medium">请求参数</Label>
+              <div className="mt-2 bg-muted rounded-lg p-4">
+                <pre className="text-sm">{`{
+  "user_id": "string (必填) - 用户唯一标识",
+  "fields": "array (可选) - 需要返回的字段列表"
+}`}</pre>
+              </div>
+            </div>
+            <div>
+              <Label className="text-sm font-medium">响应示例</Label>
+              <div className="mt-2 bg-muted rounded-lg p-4">
+                <pre className="text-sm">{`{
+  "code": 200,
+  "data": {
+    "user_id": "U12345",
+    "portrait": {
+      "basic": { "age": 28, "gender": "M" },
+      "tags": ["高价值", "活跃用户"],
+      "clv_score": 92
+    }
+  }
+}`}</pre>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowDocDialog(false)}>关闭</Button>
+            <Button>
+              <ExternalLink className="mr-2 h-4 w-4" />
+              在线调试
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 监控弹窗 */}
+      <Dialog open={showMonitorDialog} onOpenChange={setShowMonitorDialog}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>{selectedApi?.name} - 性能监控</DialogTitle>
+            <DialogDescription>查看API实时性能指标</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-3 gap-4">
+            <Card className="p-4">
+              <p className="text-sm text-muted-foreground">今日调用</p>
+              <p className="text-2xl font-bold">{selectedApi?.callCount.toLocaleString()}</p>
+            </Card>
+            <Card className="p-4">
+              <p className="text-sm text-muted-foreground">平均延迟</p>
+              <p className="text-2xl font-bold">{selectedApi?.avgLatency}ms</p>
+            </Card>
+            <Card className="p-4">
+              <p className="text-sm text-muted-foreground">错误率</p>
+              <p className="text-2xl font-bold">{((selectedApi?.errorRate || 0) * 100).toFixed(2)}%</p>
+            </Card>
+          </div>
+          <Card className="p-4">
+            <p className="text-sm font-medium mb-4">调用趋势 (最近24小时)</p>
+            <div className="h-48 flex items-end justify-between gap-1">
+              {Array.from({ length: 24 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="flex-1 bg-primary/20 rounded-t"
+                  style={{ height: `${Math.random() * 100}%` }}
+                />
+              ))}
+            </div>
+          </Card>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowMonitorDialog(false)}>关闭</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 密钥管理弹窗 */}
+      <Dialog open={showKeyDialog} onOpenChange={setShowKeyDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>创建API密钥</DialogTitle>
+            <DialogDescription>创建新的API访问密钥</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>密钥名称</Label>
+              <Input placeholder="输入密钥名称，如：生产环境密钥" />
+            </div>
+            <div className="space-y-2">
+              <Label>权限范围</Label>
+              <div className="grid grid-cols-2 gap-2">
+                <label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
+                  <input type="checkbox" defaultChecked />
+                  <span>用户画像API</span>
+                </label>
+                <label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
+                  <input type="checkbox" defaultChecked />
+                  <span>标签查询API</span>
+                </label>
+                <label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
+                  <input type="checkbox" />
+                  <span>CLV评分API</span>
+                </label>
+                <label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
+                  <input type="checkbox" />
+                  <span>流量包API</span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowKeyDialog(false)}>取消</Button>
+            <Button>创建密钥</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}