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>
This commit is contained in:
v0
185
components/data-integration/data-source-list.tsx
Normal file
185
components/data-integration/data-source-list.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Edit, ExternalLink, MoreHorizontal, Search, RefreshCw } from "lucide-react"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
|
||||
interface DataSource {
|
||||
id: string
|
||||
name: string
|
||||
type: "api" | "file" | "database" | "third-party"
|
||||
status: "active" | "inactive" | "error" | "pending"
|
||||
lastSync: Date | null
|
||||
recordCount: number
|
||||
createdAt: Date
|
||||
}
|
||||
|
||||
export function DataSourceList() {
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
|
||||
// 模拟数据
|
||||
const dataSources: DataSource[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "CRM系统用户数据",
|
||||
type: "api",
|
||||
status: "active",
|
||||
lastSync: new Date(2023, 6, 15, 14, 30),
|
||||
recordCount: 45892,
|
||||
createdAt: new Date(2023, 3, 10),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "电商平台订单数据",
|
||||
type: "api",
|
||||
status: "active",
|
||||
lastSync: new Date(2023, 6, 15, 10, 15),
|
||||
recordCount: 128456,
|
||||
createdAt: new Date(2023, 2, 5),
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "营销活动参与用户",
|
||||
type: "file",
|
||||
status: "active",
|
||||
lastSync: new Date(2023, 6, 14, 9, 45),
|
||||
recordCount: 8754,
|
||||
createdAt: new Date(2023, 5, 20),
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "APP用户行为数据",
|
||||
type: "api",
|
||||
status: "error",
|
||||
lastSync: new Date(2023, 6, 10, 16, 20),
|
||||
recordCount: 65432,
|
||||
createdAt: new Date(2023, 1, 15),
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "社交媒体用户数据",
|
||||
type: "third-party",
|
||||
status: "active",
|
||||
lastSync: new Date(2023, 6, 15, 8, 0),
|
||||
recordCount: 32145,
|
||||
createdAt: new Date(2023, 4, 25),
|
||||
},
|
||||
]
|
||||
|
||||
// 过滤数据源
|
||||
const filteredDataSources = dataSources.filter(
|
||||
(source) =>
|
||||
source.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
source.type.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
)
|
||||
|
||||
const formatDate = (date: Date | null) => {
|
||||
if (!date) return "从未同步"
|
||||
return date.toLocaleString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: DataSource["status"]) => {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return <Badge className="bg-green-100 text-green-800">正常</Badge>
|
||||
case "inactive":
|
||||
return <Badge className="bg-gray-100 text-gray-800">未启用</Badge>
|
||||
case "error":
|
||||
return <Badge className="bg-red-100 text-red-800">错误</Badge>
|
||||
case "pending":
|
||||
return <Badge className="bg-yellow-100 text-yellow-800">待配置</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeIcon = (type: DataSource["type"]) => {
|
||||
switch (type) {
|
||||
case "api":
|
||||
return <Badge className="bg-blue-100 text-blue-800">API接口</Badge>
|
||||
case "file":
|
||||
return <Badge className="bg-purple-100 text-purple-800">文件导入</Badge>
|
||||
case "database":
|
||||
return <Badge className="bg-green-100 text-green-800">数据库</Badge>
|
||||
case "third-party":
|
||||
return <Badge className="bg-orange-100 text-orange-800">第三方平台</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="relative w-64">
|
||||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="搜索数据源..."
|
||||
className="pl-8"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="sm">
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
刷新状态
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>数据源名称</TableHead>
|
||||
<TableHead>类型</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>最后同步时间</TableHead>
|
||||
<TableHead>记录数量</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredDataSources.map((source) => (
|
||||
<TableRow key={source.id}>
|
||||
<TableCell className="font-medium">{source.name}</TableCell>
|
||||
<TableCell>{getTypeIcon(source.type)}</TableCell>
|
||||
<TableCell>{getStatusBadge(source.status)}</TableCell>
|
||||
<TableCell>{formatDate(source.lastSync)}</TableCell>
|
||||
<TableCell>{source.recordCount.toLocaleString()}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>立即同步</DropdownMenuItem>
|
||||
<DropdownMenuItem>查看日志</DropdownMenuItem>
|
||||
<DropdownMenuItem>复制配置</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-red-600">删除</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user