fix: resolve deployment errors and add missing files
Fix CSS issue and create missing documentation files Add new data platform and mobile optimization features Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
@@ -1,3 +1,61 @@
|
||||
export default function Loading() {
|
||||
return null
|
||||
export default function DataPlatformLoading() {
|
||||
return (
|
||||
<div className="container mx-auto py-4 md:py-6 space-y-4 md:space-y-6">
|
||||
{/* 页面标题骨架 */}
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<div>
|
||||
<div className="h-8 bg-gray-200 rounded w-32 mb-2 animate-pulse"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-48 animate-pulse"></div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="h-9 w-24 bg-gray-200 rounded animate-pulse"></div>
|
||||
<div className="h-9 w-9 bg-gray-200 rounded animate-pulse"></div>
|
||||
<div className="h-9 w-9 bg-gray-200 rounded animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 概览卡片骨架 */}
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<div className="h-6 bg-gray-200 rounded w-32 mb-4 animate-pulse"></div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="bg-gray-50 p-3 rounded-lg">
|
||||
<div className="h-8 bg-gray-200 rounded w-12 mb-2 animate-pulse"></div>
|
||||
<div className="h-3 bg-gray-200 rounded w-16 animate-pulse"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 数据源卡片骨架 */}
|
||||
<div className="bg-white rounded-lg shadow-md p-4">
|
||||
<div className="h-6 bg-gray-200 rounded w-40 mb-4 animate-pulse"></div>
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="bg-gray-50 border rounded-lg p-3">
|
||||
<div className="h-5 bg-gray-200 rounded w-48 mb-2 animate-pulse"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-full mb-2 animate-pulse"></div>
|
||||
<div className="h-3 bg-gray-200 rounded w-32 animate-pulse"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 其他内容骨架 */}
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-lg shadow-md p-4">
|
||||
<div className="h-6 bg-gray-200 rounded w-40 mb-4 animate-pulse"></div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{Array.from({ length: 3 }).map((_, j) => (
|
||||
<div key={j} className="bg-gray-50 p-4 rounded-lg">
|
||||
<div className="h-4 bg-gray-200 rounded w-24 mb-2 animate-pulse"></div>
|
||||
<div className="h-6 bg-gray-200 rounded w-16 mb-2 animate-pulse"></div>
|
||||
<div className="h-2 bg-gray-200 rounded w-full animate-pulse"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,433 +1,490 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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 { Badge } from "@/components/ui/badge"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
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
|
||||
}
|
||||
Database,
|
||||
Upload,
|
||||
Download,
|
||||
RefreshCw,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
Clock,
|
||||
FileText,
|
||||
Settings,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
} from "lucide-react"
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
||||
|
||||
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 [timeRange, setTimeRange] = useState("today")
|
||||
const [expandedSections, setExpandedSections] = useState({
|
||||
overview: true,
|
||||
sources: true,
|
||||
integration: false,
|
||||
quality: false,
|
||||
})
|
||||
|
||||
// 数据源列表
|
||||
const dataSources: DataSource[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "用户数据库",
|
||||
type: "mysql",
|
||||
status: "connected",
|
||||
lastSync: "2023-07-21 15:30",
|
||||
tables: 12,
|
||||
records: 1250000,
|
||||
// 数据中台数据
|
||||
const platformData = {
|
||||
overview: {
|
||||
totalRecords: 1245678,
|
||||
dataSources: 8,
|
||||
syncStatus: "正常",
|
||||
lastUpdate: "2分钟前",
|
||||
dataQuality: 94.6,
|
||||
storageUsed: 2.3,
|
||||
storageTotal: 10.0,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "交易系统",
|
||||
type: "postgresql",
|
||||
status: "connected",
|
||||
lastSync: "2023-07-21 14:45",
|
||||
tables: 8,
|
||||
records: 3450000,
|
||||
dataSources: [
|
||||
{
|
||||
name: "用户行为数据库",
|
||||
type: "MySQL",
|
||||
status: "connected",
|
||||
records: 456789,
|
||||
lastSync: "1分钟前",
|
||||
quality: 96.8,
|
||||
description: "用户行为轨迹数据",
|
||||
},
|
||||
{
|
||||
name: "CRM系统",
|
||||
type: "API",
|
||||
status: "connected",
|
||||
records: 125678,
|
||||
lastSync: "3分钟前",
|
||||
quality: 94.2,
|
||||
description: "客户关系管理数据",
|
||||
},
|
||||
{
|
||||
name: "内容平台数据",
|
||||
type: "API",
|
||||
status: "syncing",
|
||||
records: 234567,
|
||||
lastSync: "正在同步",
|
||||
quality: 92.5,
|
||||
description: "抖音、小红书等平台数据",
|
||||
},
|
||||
{
|
||||
name: "触客宝后台",
|
||||
type: "API",
|
||||
status: "connected",
|
||||
records: 89234,
|
||||
lastSync: "5分钟前",
|
||||
quality: 95.1,
|
||||
description: "呼入电话信息数据",
|
||||
},
|
||||
{
|
||||
name: "飞书妙记",
|
||||
type: "API",
|
||||
status: "connected",
|
||||
records: 12345,
|
||||
lastSync: "10分钟前",
|
||||
quality: 91.3,
|
||||
description: "会议记录和内容摘要",
|
||||
},
|
||||
{
|
||||
name: "表单提交数据",
|
||||
type: "Webhook",
|
||||
status: "connected",
|
||||
records: 67890,
|
||||
lastSync: "2分钟前",
|
||||
quality: 97.2,
|
||||
description: "在线表单提交数据",
|
||||
},
|
||||
],
|
||||
integrationStats: {
|
||||
totalIntegrations: 8,
|
||||
activeIntegrations: 7,
|
||||
failedIntegrations: 0,
|
||||
pendingIntegrations: 1,
|
||||
avgSyncTime: "2.3分钟",
|
||||
successRate: 98.7,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "用户行为数据",
|
||||
type: "mongodb",
|
||||
status: "connected",
|
||||
lastSync: "2023-07-21 13:20",
|
||||
tables: 5,
|
||||
records: 7800000,
|
||||
dataQuality: {
|
||||
completeness: 94.6,
|
||||
accuracy: 96.2,
|
||||
consistency: 92.8,
|
||||
timeliness: 95.4,
|
||||
validity: 93.7,
|
||||
uniqueness: 97.1,
|
||||
},
|
||||
{
|
||||
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 toggleSection = (section: string) => {
|
||||
setExpandedSections((prev) => ({
|
||||
...prev,
|
||||
[section]: !prev[section],
|
||||
}))
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: DataSource["status"]) => {
|
||||
const getStatusColor = (status: string) => {
|
||||
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>
|
||||
return "bg-green-100 text-green-800"
|
||||
case "syncing":
|
||||
return "bg-yellow-100 text-yellow-800"
|
||||
case "error":
|
||||
return <Badge className="bg-red-100 text-red-800">错误</Badge>
|
||||
return "bg-red-100 text-red-800"
|
||||
case "disconnected":
|
||||
return "bg-gray-100 text-gray-800"
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800"
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case "connected":
|
||||
return <CheckCircle className="h-4 w-4 text-green-600" />
|
||||
case "syncing":
|
||||
return <Clock className="h-4 w-4 text-yellow-600 animate-spin" />
|
||||
case "error":
|
||||
return <AlertCircle className="h-4 w-4 text-red-600" />
|
||||
default:
|
||||
return <AlertCircle className="h-4 w-4 text-gray-600" />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="container mx-auto py-4 md:py-6 space-y-4 md: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>
|
||||
<h1 className="text-2xl md:text-3xl font-bold">数据中台</h1>
|
||||
<p className="text-sm md:text-base text-muted-foreground mt-1">多源数据整合与管理中心</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="icon">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Select value={timeRange} onValueChange={setTimeRange}>
|
||||
<SelectTrigger className="w-[120px] text-sm">
|
||||
<SelectValue placeholder="时间范围" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="today">今日</SelectItem>
|
||||
<SelectItem value="week">本周</SelectItem>
|
||||
<SelectItem value="month">本月</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
|
||||
<Upload className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline">
|
||||
<Button variant="outline" size="sm" className="hidden md:flex bg-transparent">
|
||||
<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>
|
||||
{/* 数据中台概览 */}
|
||||
<Collapsible
|
||||
open={expandedSections.overview}
|
||||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, overview: open }))}
|
||||
>
|
||||
<Card className="border-none shadow-md">
|
||||
<CollapsibleTrigger className="w-full">
|
||||
<CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b hover:from-blue-100 hover:to-indigo-100 transition-colors cursor-pointer py-3 md:py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<Database className="h-4 w-4 md:h-5 md:w-5 text-blue-600" />
|
||||
<div className="text-left">
|
||||
<CardTitle className="text-base md:text-lg">平台概览</CardTitle>
|
||||
<CardDescription className="text-xs md:text-sm">数据中台整体运行状况</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
{expandedSections.overview ? (
|
||||
<ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DataSourceList />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CardContent className="p-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
|
||||
<div className="bg-blue-50 p-3 rounded-lg text-center">
|
||||
<div className="text-lg md:text-2xl font-bold text-blue-600">
|
||||
{platformData.overview.totalRecords.toLocaleString()}
|
||||
</div>
|
||||
<div className="text-xs text-blue-700">总数据量</div>
|
||||
</div>
|
||||
<div className="bg-green-50 p-3 rounded-lg text-center">
|
||||
<div className="text-lg md:text-2xl font-bold text-green-600">
|
||||
{platformData.overview.dataSources}
|
||||
</div>
|
||||
<div className="text-xs text-green-700">数据源</div>
|
||||
</div>
|
||||
<div className="bg-purple-50 p-3 rounded-lg text-center">
|
||||
<div className="text-lg md:text-2xl font-bold text-purple-600">
|
||||
{platformData.overview.dataQuality}%
|
||||
</div>
|
||||
<div className="text-xs text-purple-700">数据质量</div>
|
||||
</div>
|
||||
<div className="bg-orange-50 p-3 rounded-lg text-center">
|
||||
<div className="text-lg md:text-2xl font-bold text-orange-600">
|
||||
{platformData.overview.storageUsed}GB
|
||||
</div>
|
||||
<div className="text-xs text-orange-700">存储使用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-3">
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span>存储使用率</span>
|
||||
<span>
|
||||
{platformData.overview.storageUsed}GB / {platformData.overview.storageTotal}GB
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={(platformData.overview.storageUsed / platformData.overview.storageTotal) * 100} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span>数据质量</span>
|
||||
<span>{platformData.overview.dataQuality}%</span>
|
||||
</div>
|
||||
<Progress value={platformData.overview.dataQuality} />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
|
||||
<Card className="border shadow-md">
|
||||
<CardHeader>
|
||||
<CardTitle>数据整合概览</CardTitle>
|
||||
<CardDescription>基于ID、手机号、身份证号和IMEI设备号的数据整合</CardDescription>
|
||||
{/* 数据源管理 */}
|
||||
<Collapsible
|
||||
open={expandedSections.sources}
|
||||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, sources: open }))}
|
||||
>
|
||||
<Card className="border-none shadow-md">
|
||||
<CollapsibleTrigger className="w-full">
|
||||
<CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b hover:from-green-100 hover:to-emerald-100 transition-colors cursor-pointer py-3 md:py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<FileText className="h-4 w-4 md:h-5 md:w-5 text-green-600" />
|
||||
<div className="text-left">
|
||||
<CardTitle className="text-base md:text-lg">数据源管理</CardTitle>
|
||||
<CardDescription className="text-xs md:text-sm">
|
||||
数据源连接状态 ({platformData.dataSources.length})
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
{expandedSections.sources ? (
|
||||
<ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
|
||||
)}
|
||||
</div>
|
||||
</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" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CardContent className="p-4">
|
||||
<div className="space-y-3">
|
||||
{platformData.dataSources.map((source, index) => (
|
||||
<div key={index} className="bg-white border rounded-lg p-3 md:p-4">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
{getStatusIcon(source.status)}
|
||||
<h3 className="font-medium text-sm md:text-base">{source.name}</h3>
|
||||
<Badge className={getStatusColor(source.status)}>{source.status}</Badge>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{source.type}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs md:text-sm text-gray-600 mb-2">{source.description}</p>
|
||||
<div className="flex flex-wrap gap-4 text-xs">
|
||||
<span>数据量: {source.records.toLocaleString()}</span>
|
||||
<span>最后同步: {source.lastSync}</span>
|
||||
<span>质量评分: {source.quality}%</span>
|
||||
</div>
|
||||
</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 className="flex flex-col md:items-end gap-2">
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-bold text-green-600">{source.quality}%</div>
|
||||
<div className="text-xs text-gray-500">数据质量</div>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" className="bg-transparent">
|
||||
<Settings className="h-3 w-3 mr-1" />
|
||||
配置
|
||||
</Button>
|
||||
</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>
|
||||
<div className="mt-3">
|
||||
<Progress value={source.quality} className="h-1.5" />
|
||||
</div>
|
||||
</div>
|
||||
<Button>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
刷新数据
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
|
||||
<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>
|
||||
{/* 数据集成统计 */}
|
||||
<Collapsible
|
||||
open={expandedSections.integration}
|
||||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, integration: open }))}
|
||||
>
|
||||
<Card className="border-none shadow-md">
|
||||
<CollapsibleTrigger className="w-full">
|
||||
<CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b hover:from-purple-100 hover:to-pink-100 transition-colors cursor-pointer py-3 md:py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<RefreshCw className="h-4 w-4 md:h-5 md:w-5 text-purple-600" />
|
||||
<div className="text-left">
|
||||
<CardTitle className="text-base md:text-lg">集成统计</CardTitle>
|
||||
<CardDescription className="text-xs md:text-sm">数据集成性能指标</CardDescription>
|
||||
</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>
|
||||
{expandedSections.integration ? (
|
||||
<ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CardContent className="p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="bg-blue-50 p-4 rounded-lg">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Database className="h-4 w-4 text-blue-600" />
|
||||
<span className="text-sm font-medium">集成概况</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs text-gray-600">总集成数</span>
|
||||
<span className="text-sm font-bold">{platformData.integrationStats.totalIntegrations}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs text-gray-600">活跃集成</span>
|
||||
<span className="text-sm font-bold">{platformData.integrationStats.activeIntegrations}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs text-gray-600">待处理</span>
|
||||
<span className="text-sm font-bold">{platformData.integrationStats.pendingIntegrations}</span>
|
||||
</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 className="bg-green-50 p-4 rounded-lg">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span className="text-sm font-medium">性能指标</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 className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs text-gray-600">成功率</span>
|
||||
<span className="text-sm font-bold">{platformData.integrationStats.successRate}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs text-gray-600">平均同步时间</span>
|
||||
<span className="text-sm font-bold">{platformData.integrationStats.avgSyncTime}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs text-gray-600">失败集成</span>
|
||||
<span className="text-sm font-bold">{platformData.integrationStats.failedIntegrations}</span>
|
||||
</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 className="bg-purple-50 p-4 rounded-lg">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Clock className="h-4 w-4 text-purple-600" />
|
||||
<span className="text-sm font-medium">实时状态</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 className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs text-gray-600">最后更新</span>
|
||||
<span className="text-sm font-bold">{platformData.overview.lastUpdate}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs text-gray-600">同步状态</span>
|
||||
<span className="text-sm font-bold text-green-600">{platformData.overview.syncStatus}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs text-gray-600">系统负载</span>
|
||||
<span className="text-sm font-bold">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
|
||||
{/* 数据采集标签页 */}
|
||||
<TabsContent value="data-collection" className="space-y-4">
|
||||
<DataCollectionSettings />
|
||||
</TabsContent>
|
||||
{/* 数据质量监控 */}
|
||||
<Collapsible
|
||||
open={expandedSections.quality}
|
||||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, quality: open }))}
|
||||
>
|
||||
<Card className="border-none shadow-md">
|
||||
<CollapsibleTrigger className="w-full">
|
||||
<CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 border-b hover:from-orange-100 hover:to-red-100 transition-colors cursor-pointer py-3 md:py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="h-4 w-4 md:h-5 md:w-5 text-orange-600" />
|
||||
<div className="text-left">
|
||||
<CardTitle className="text-base md:text-lg">数据质量监控</CardTitle>
|
||||
<CardDescription className="text-xs md:text-sm">数据质量多维度评估</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
{expandedSections.quality ? (
|
||||
<ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CardContent className="p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{Object.entries(platformData.dataQuality).map(([key, value], index) => {
|
||||
const labels = {
|
||||
completeness: "完整性",
|
||||
accuracy: "准确性",
|
||||
consistency: "一致性",
|
||||
timeliness: "及时性",
|
||||
validity: "有效性",
|
||||
uniqueness: "唯一性",
|
||||
}
|
||||
|
||||
{/* 数据映射标签页 */}
|
||||
<TabsContent value="data-mapping" className="space-y-4">
|
||||
<DataFieldMapping />
|
||||
</TabsContent>
|
||||
const colors = [
|
||||
"bg-blue-50 text-blue-600",
|
||||
"bg-green-50 text-green-600",
|
||||
"bg-purple-50 text-purple-600",
|
||||
"bg-orange-50 text-orange-600",
|
||||
"bg-pink-50 text-pink-600",
|
||||
"bg-indigo-50 text-indigo-600",
|
||||
]
|
||||
|
||||
{/* 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>
|
||||
return (
|
||||
<div key={key} className={`p-4 rounded-lg ${colors[index]}`}>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold mb-1">{value}%</div>
|
||||
<div className="text-sm">{labels[key as keyof typeof labels]}</div>
|
||||
<div className="mt-2">
|
||||
<Progress value={value} className="h-1.5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user