refactor: overhaul UI for streamlined user experience

Redesign navigation, home overview, user portrait, and valuation pages
with improved functionality and responsive design.

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

app/api-interface/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/api-interface/page.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { ArrowLeft } from "lucide-react"
+import { toast } from "@/components/ui/use-toast"
+import { useRouter } from "next/navigation"
+
+interface ApiInterface {
+  id: string
+  name: string
+  endpoint: string
+  method: string
+  status: "active" | "inactive" | "deprecated"
+  stats: {
+    totalCalls: number
+    successCalls: number
+    errorCalls: number
+    successRate: number
+    avgResponseTime: number
+  }
+  lastUpdated: string
+  trend: { date: string; calls: number; success: number; responseTime: number }[]
+  description: string
+  authentication: string
+}
+
+export default function ApiInterfacePage() {
+  const router = useRouter()
+  const [apis, setApis] = useState<ApiInterface[]>([
+    {
+      id: "1",
+      name: "用户数据查询接口",
+      endpoint: "/api/users/query",
+      method: "GET",
+      status: "active",
+      stats: {
+        totalCalls: 1245632,
+        successCalls: 1220578,
+        errorCalls: 25054,
+        successRate: 98,
+        avgResponseTime: 120,
+      },
+      lastUpdated: "2023-07-15 14:30",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
+        calls: Math.floor(Math.random() * 20000) + 150000,
+        success: Math.floor(Math.random() * 18000) + 145000,
+        responseTime: Math.floor(Math.random() * 50) + 100,
+      })),
+      description: "查询用户基本信息、标签和行为数据",
+      authentication: "API Key",
+    },
+    {
+      id: "2",
+      name: "用户标签更新接口",
+      endpoint: "/api/users/tags/update",
+      method: "POST",
+      status: "active",
+      stats: {
+        totalCalls: 856421,
+        successCalls: 845789,
+        errorCalls: 10632,
+        successRate: 99,
+        avgResponseTime: 150,
+      },
+      lastUpdated: "2023-07-15 13:45",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
+        calls: Math.floor(Math.random() * 15000) + 100000,
+        success: Math.floor(Math.random() * 14000) + 98000,
+        responseTime: Math.floor(Math.random() * 40) + 130,
+      })),
+      description: "更新用户标签信息",
+      authentication: "OAuth 2.0",
+    },
+    {
+      id: "3",
+      name: "用户行为分析接口",
+      endpoint: "/api/analytics/user-behavior",
+      method: "GET",
+      status: "active",
+      stats: {
+        totalCalls: 542367,
+        successCalls: 538945,
+        errorCalls: 3422,
+        successRate: 99.5,
+        avgResponseTime: 180,
+      },
+      lastUpdated: "2023-07-15 12:20",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
+        calls: Math.floor(Math.random() * 10000) + 70000,
+        success: Math.floor(Math.random() * 9800) + 69000,
+        responseTime: Math.floor(Math.random() * 30) + 170,
+      })),
+      description: "获取用户行为分析数据",
+      authentication: "API Key",
+    },
+  ])
+
+  const [isApiDocsOpen, setIsApiDocsOpen] = useState(false)
+  const [selectedApiId, setSelectedApiId] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const handleViewDocs = (apiId: string) => {
+    setSelectedApiId(apiId)
+    setIsApiDocsOpen(true)
+  }
+
+  const copyApi = (apiId: string) => {
+    const apiToCopy = apis.find((api) => api.id === apiId)
+    if (apiToCopy) {
+      const newApi = {
+        ...apiToCopy,
+        id: `${Date.now()}`,
+        name: `${apiToCopy.name} (副本)`,
+        status: "inactive" as const,
+        lastUpdated: new Date().toLocaleString(),
+      }
+      setApis([...apis, newApi])
+      toast({
+        title: "复制成功",
+        description: "已创建接口副本",
+      })
+    }
+  }
+
+  const selectedApi = apis.find((api) => api.id === selectedApiId)
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="icon" onClick={() => router.push("/data-platform")}>
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <h1 className="text-3xl font-bold">API接口已整合</h1>
+      </div>
+
+      <Card className="border shadow-md">
+        <CardHeader>
+          <CardTitle>API接口已整合到数据中台</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="mb-4">API接口功能已经整合到数据中台中，请前往数据中台页面查看和管理API接口。</p>
+          <Button onClick={() => router.push("/data-platform")}>前往数据中台</Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}