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/data-platform/loading.tsx

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

app/data-platform/page.tsx

@@ -0,0 +1,433 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Database, Server, Link, RefreshCw, Download, Mail, FileText } from "lucide-react"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import { DataSourceList } from "@/components/data-integration/data-source-list"
+import { DataFieldMapping } from "@/components/data-integration/data-field-mapping"
+import { DataCollectionSettings } from "@/components/data-integration/data-collection-settings"
+import { ApiDocumentation } from "@/components/data-integration/api-documentation"
+
+interface DataSource {
+  id: string
+  name: string
+  type: "mysql" | "postgresql" | "mongodb" | "oracle" | "sqlserver" | "api" | "file"
+  status: "connected" | "disconnected" | "error"
+  lastSync: string
+  tables: number
+  records: number
+}
+
+export default function DataPlatformPage() {
+  const [activeTab, setActiveTab] = useState("data-integration")
+  const [selectedUserSegment, setSelectedUserSegment] = useState("")
+  const [analysisPrompt, setAnalysisPrompt] = useState("")
+  const [selectedEmail, setSelectedEmail] = useState("")
+  const [isAddingDataSource, setIsAddingDataSource] = useState(false)
+
+  // 数据源列表
+  const dataSources: DataSource[] = [
+    {
+      id: "1",
+      name: "用户数据库",
+      type: "mysql",
+      status: "connected",
+      lastSync: "2023-07-21 15:30",
+      tables: 12,
+      records: 1250000,
+    },
+    {
+      id: "2",
+      name: "交易系统",
+      type: "postgresql",
+      status: "connected",
+      lastSync: "2023-07-21 14:45",
+      tables: 8,
+      records: 3450000,
+    },
+    {
+      id: "3",
+      name: "用户行为数据",
+      type: "mongodb",
+      status: "connected",
+      lastSync: "2023-07-21 13:20",
+      tables: 5,
+      records: 7800000,
+    },
+    {
+      id: "4",
+      name: "CRM系统",
+      type: "oracle",
+      status: "error",
+      lastSync: "2023-07-20 09:15",
+      tables: 15,
+      records: 2100000,
+    },
+  ]
+
+  // 用户画像分群列表
+  const userSegments = [
+    { id: "high-value", name: "高价值用户", count: 12500 },
+    { id: "new-users", name: "新注册用户", count: 45600 },
+    { id: "inactive", name: "非活跃用户", count: 28900 },
+    { id: "potential", name: "潜在高转化用户", count: 18700 },
+    { id: "loyal", name: "忠诚用户", count: 9800 },
+    { id: "risk", name: "流失风险用户", count: 15400 },
+  ]
+
+  // 邮箱列表
+  const emailList = [
+    { id: "1", email: "marketing@company.com", name: "营销团队" },
+    { id: "2", email: "sales@company.com", name: "销售团队" },
+    { id: "3", email: "product@company.com", name: "产品团队" },
+    { id: "4", email: "executive@company.com", name: "管理层" },
+  ]
+
+  const getDataSourceIcon = (type: DataSource["type"]) => {
+    switch (type) {
+      case "mysql":
+      case "postgresql":
+      case "oracle":
+      case "sqlserver":
+        return <Database className="h-8 w-8 text-blue-500" />
+      case "mongodb":
+        return <Server className="h-8 w-8 text-green-500" />
+      case "api":
+      case "file":
+        return <Link className="h-8 w-8 text-purple-500" />
+    }
+  }
+
+  const getDataSourceTypeName = (type: DataSource["type"]) => {
+    switch (type) {
+      case "mysql":
+        return "MySQL"
+      case "postgresql":
+        return "PostgreSQL"
+      case "mongodb":
+        return "MongoDB"
+      case "oracle":
+        return "Oracle"
+      case "sqlserver":
+        return "SQL Server"
+      case "api":
+        return "API"
+      case "file":
+        return "文件"
+    }
+  }
+
+  const getStatusBadge = (status: DataSource["status"]) => {
+    switch (status) {
+      case "connected":
+        return <Badge className="bg-green-100 text-green-800">已连接</Badge>
+      case "disconnected":
+        return <Badge className="bg-gray-100 text-gray-800">未连接</Badge>
+      case "error":
+        return <Badge className="bg-red-100 text-red-800">错误</Badge>
+    }
+  }
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold">数据中台</h1>
+          <p className="text-muted-foreground mt-1">数据集成、API管理与数据采集</p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" size="icon">
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            导出数据
+          </Button>
+        </div>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+        <TabsList className="grid grid-cols-4 w-full max-w-2xl">
+          <TabsTrigger value="data-integration">数据集成</TabsTrigger>
+          <TabsTrigger value="data-collection">数据采集</TabsTrigger>
+          <TabsTrigger value="data-mapping">数据映射</TabsTrigger>
+          <TabsTrigger value="api-management">API管理</TabsTrigger>
+        </TabsList>
+
+        {/* 数据集成标签页 */}
+        <TabsContent value="data-integration" className="space-y-4">
+          <Card className="border shadow-md">
+            <CardHeader>
+              <CardTitle>数据源管理</CardTitle>
+              <CardDescription>管理和查看已连接的数据源</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <DataSourceList />
+            </CardContent>
+          </Card>
+
+          <Card className="border shadow-md">
+            <CardHeader>
+              <CardTitle>数据整合概览</CardTitle>
+              <CardDescription>基于ID、手机号、身份证号和IMEI设备号的数据整合</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                  <Card className="border shadow-sm">
+                    <CardContent className="p-4 flex flex-col items-center justify-center">
+                      <div className="bg-blue-100 p-3 rounded-full mb-2">
+                        <Database className="h-6 w-6 text-blue-600" />
+                      </div>
+                      <h3 className="font-medium text-center">用户ID</h3>
+                      <p className="text-sm text-muted-foreground text-center">1,245,678 条记录</p>
+                    </CardContent>
+                  </Card>
+                  <Card className="border shadow-sm">
+                    <CardContent className="p-4 flex flex-col items-center justify-center">
+                      <div className="bg-green-100 p-3 rounded-full mb-2">
+                        <FileText className="h-6 w-6 text-green-600" />
+                      </div>
+                      <h3 className="font-medium text-center">手机号</h3>
+                      <p className="text-sm text-muted-foreground text-center">987,543 条记录</p>
+                    </CardContent>
+                  </Card>
+                  <Card className="border shadow-sm">
+                    <CardContent className="p-4 flex flex-col items-center justify-center">
+                      <div className="bg-purple-100 p-3 rounded-full mb-2">
+                        <FileText className="h-6 w-6 text-purple-600" />
+                      </div>
+                      <h3 className="font-medium text-center">身份证号</h3>
+                      <p className="text-sm text-muted-foreground text-center">654,321 条记录</p>
+                    </CardContent>
+                  </Card>
+                  <Card className="border shadow-sm">
+                    <CardContent className="p-4 flex flex-col items-center justify-center">
+                      <div className="bg-orange-100 p-3 rounded-full mb-2">
+                        <Server className="h-6 w-6 text-orange-600" />
+                      </div>
+                      <h3 className="font-medium text-center">IMEI设备号</h3>
+                      <p className="text-sm text-muted-foreground text-center">789,456 条记录</p>
+                    </CardContent>
+                  </Card>
+                </div>
+
+                <div className="flex justify-between items-center">
+                  <div>
+                    <h3 className="font-medium">数据整合状态</h3>
+                    <p className="text-sm text-muted-foreground">最后更新: 2023-07-21 16:30</p>
+                  </div>
+                  <Button>
+                    <RefreshCw className="mr-2 h-4 w-4" />
+                    刷新数据
+                  </Button>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">用户数据整合率</span>
+                    <span className="text-green-600 font-medium">87%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-green-600 h-2.5 rounded-full" style={{ width: "87%" }}></div>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">数据质量评分</span>
+                    <span className="text-blue-600 font-medium">92/100</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: "92%" }}></div>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">数据重复率</span>
+                    <span className="text-yellow-600 font-medium">5.2%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-yellow-600 h-2.5 rounded-full" style={{ width: "5.2%" }}></div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 数据采集标签页 */}
+        <TabsContent value="data-collection" className="space-y-4">
+          <DataCollectionSettings />
+        </TabsContent>
+
+        {/* 数据映射标签页 */}
+        <TabsContent value="data-mapping" className="space-y-4">
+          <DataFieldMapping />
+        </TabsContent>
+
+        {/* API管理标签页 */}
+        <TabsContent value="api-management" className="space-y-4">
+          <ApiDocumentation />
+        </TabsContent>
+      </Tabs>
+
+      {/* 添加数据源对话框 */}
+      <Dialog open={isAddingDataSource} onOpenChange={setIsAddingDataSource}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>添加新数据源</DialogTitle>
+            <DialogDescription>选择数据源类型并填写连接信息</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="datasource-type" className="text-right">
+                数据源类型
+              </Label>
+              <Select>
+                <SelectTrigger className="col-span-3">
+                  <SelectValue placeholder="选择数据源类型" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="mysql">MySQL</SelectItem>
+                  <SelectItem value="postgresql">PostgreSQL</SelectItem>
+                  <SelectItem value="mongodb">MongoDB</SelectItem>
+                  <SelectItem value="oracle">Oracle</SelectItem>
+                  <SelectItem value="sqlserver">SQL Server</SelectItem>
+                  <SelectItem value="api">API</SelectItem>
+                  <SelectItem value="file">文件</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="name" className="text-right">
+                数据源名称
+              </Label>
+              <Input id="name" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="host" className="text-right">
+                主机地址
+              </Label>
+              <Input id="host" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="port" className="text-right">
+                端口
+              </Label>
+              <Input id="port" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="username" className="text-right">
+                用户名
+              </Label>
+              <Input id="username" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="password" className="text-right">
+                密码
+              </Label>
+              <Input id="password" type="password" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="database" className="text-right">
+                数据库名
+              </Label>
+              <Input id="database" className="col-span-3" />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsAddingDataSource(false)}>
+              取消
+            </Button>
+            <Button onClick={() => setIsAddingDataSource(false)}>测试连接</Button>
+            <Button onClick={() => setIsAddingDataSource(false)}>保存</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* AI数据分析对话框 */}
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button className="hidden">打开AI数据分析</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>AI数据分析</DialogTitle>
+            <DialogDescription>选择用户分群并输入分析需求</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="space-y-2">
+              <Label>选择用户分群</Label>
+              <Select value={selectedUserSegment} onValueChange={setSelectedUserSegment}>
+                <SelectTrigger>
+                  <SelectValue placeholder="选择用户分群" />
+                </SelectTrigger>
+                <SelectContent>
+                  {userSegments.map((segment) => (
+                    <SelectItem key={segment.id} value={segment.id}>
+                      {segment.name} ({segment.count.toLocaleString()}人)
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>分析需求</Label>
+              <Textarea
+                placeholder="例如：分析该用户群体的消费习惯和偏好"
+                value={analysisPrompt}
+                onChange={(e) => setAnalysisPrompt(e.target.value)}
+                rows={3}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>发送分析报告至</Label>
+              <Select value={selectedEmail} onValueChange={setSelectedEmail}>
+                <SelectTrigger>
+                  <SelectValue placeholder="选择接收邮箱" />
+                </SelectTrigger>
+                <SelectContent>
+                  {emailList.map((item) => (
+                    <SelectItem key={item.id} value={item.id}>
+                      {item.name} ({item.email})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="schedule" />
+              <Label htmlFor="schedule">定期发送分析报告</Label>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline">取消</Button>
+            <Button>
+              <Mail className="mr-2 h-4 w-4" />
+              生成分析并发送
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}