fnvtk/users
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: overhaul UI for streamlined user experience

Browse Source 
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
2025-07-18 13:47:12 +00:00
parent 440b310c6f
commit 2408d50cb0
316 changed files with 55785 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
components/data-integration/data-preview.tsx Normal file
View File

@@ -0,0 +1,235 @@
"use client"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
export function DataPreview() {
// 模拟数据
const previewData = [
{
id: "1",
name: "张三",
phone: "13812345678",
idCard: "3101********1234",
imei: "86723*****5432",
address: "上海市浦东新区张江高科技园区",
registerDate: "2023-01-15",
lastActive: "2023-07-12",
source: "CRM系统",
status: "matched",
},
{
id: "2",
name: "李四",
phone: "13987654321",
idCard: "4401********5678",
imei: "35871*****7890",
address: "广州市天河区珠江新城",
registerDate: "2022-11-20",
lastActive: "2023-07-10",
source: "电商平台",
status: "matched",
},
{
id: "3",
name: "王五",
phone: "13765432198",
idCard: "1101********7890",
imei: "",
address: "北京市海淀区中关村",
registerDate: "2023-03-05",
lastActive: "2023-07-15",
source: "营销活动",
status: "partial",
},
{
id: "4",
name: "赵六",
phone: "13698765432",
idCard: "",
imei: "86723*****1234",
address: "深圳市南山区科技园",
registerDate: "2023-05-18",
lastActive: "2023-07-14",
source: "APP注册",
status: "partial",
},
{
id: "5",
name: "钱七",
phone: "",
idCard: "",
imei: "",
address: "杭州市西湖区",
registerDate: "2023-06-30",
lastActive: "2023-07-01",
source: "社交媒体",
status: "unmatched",
},
]
const getStatusBadge = (status: string) => {
switch (status) {
case "matched":
return <Badge className="bg-green-100 text-green-800">已匹配</Badge>
case "partial":
return <Badge className="bg-yellow-100 text-yellow-800">部分匹配</Badge>
case "unmatched":
return <Badge className="bg-red-100 text-red-800">未匹配</Badge>
}
}
return (
<div className="space-y-4">
<Tabs defaultValue="preview">
<TabsList>
<TabsTrigger value="preview">数据预览</TabsTrigger>
<TabsTrigger value="matched">已匹配</TabsTrigger>
<TabsTrigger value="partial">部分匹配</TabsTrigger>
<TabsTrigger value="unmatched">未匹配</TabsTrigger>
</TabsList>
<TabsContent value="preview" className="pt-4">
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>姓名</TableHead>
<TableHead>手机号</TableHead>
<TableHead>身份证</TableHead>
<TableHead>IMEI</TableHead>
<TableHead>地址</TableHead>
<TableHead>注册日期</TableHead>
<TableHead>最后活跃</TableHead>
<TableHead>来源</TableHead>
<TableHead>匹配状态</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{previewData.map((item) => (
<TableRow key={item.id}>
<TableCell className="font-medium">{item.name}</TableCell>
<TableCell>{item.phone || "-"}</TableCell>
<TableCell>{item.idCard || "-"}</TableCell>
<TableCell>{item.imei || "-"}</TableCell>
<TableCell>{item.address}</TableCell>
<TableCell>{item.registerDate}</TableCell>
<TableCell>{item.lastActive}</TableCell>
<TableCell>{item.source}</TableCell>
<TableCell>{getStatusBadge(item.status)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</TabsContent>
<TabsContent value="matched" className="pt-4">
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>姓名</TableHead>
<TableHead>手机号</TableHead>
<TableHead>身份证</TableHead>
<TableHead>IMEI</TableHead>
<TableHead>地址</TableHead>
<TableHead>注册日期</TableHead>
<TableHead>最后活跃</TableHead>
<TableHead>来源</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{previewData
.filter((item) => item.status === "matched")
.map((item) => (
<TableRow key={item.id}>
<TableCell className="font-medium">{item.name}</TableCell>
<TableCell>{item.phone || "-"}</TableCell>
<TableCell>{item.idCard || "-"}</TableCell>
<TableCell>{item.imei || "-"}</TableCell>
<TableCell>{item.address}</TableCell>
<TableCell>{item.registerDate}</TableCell>
<TableCell>{item.lastActive}</TableCell>
<TableCell>{item.source}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</TabsContent>
<TabsContent value="partial" className="pt-4">
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>姓名</TableHead>
<TableHead>手机号</TableHead>
<TableHead>身份证</TableHead>
<TableHead>IMEI</TableHead>
<TableHead>地址</TableHead>
<TableHead>注册日期</TableHead>
<TableHead>最后活跃</TableHead>
<TableHead>来源</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{previewData
.filter((item) => item.status === "partial")
.map((item) => (
<TableRow key={item.id}>
<TableCell className="font-medium">{item.name}</TableCell>
<TableCell>{item.phone || "-"}</TableCell>
<TableCell>{item.idCard || "-"}</TableCell>
<TableCell>{item.imei || "-"}</TableCell>
<TableCell>{item.address}</TableCell>
<TableCell>{item.registerDate}</TableCell>
<TableCell>{item.lastActive}</TableCell>
<TableCell>{item.source}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</TabsContent>
<TabsContent value="unmatched" className="pt-4">
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>姓名</TableHead>
<TableHead>手机号</TableHead>
<TableHead>身份证</TableHead>
<TableHead>IMEI</TableHead>
<TableHead>地址</TableHead>
<TableHead>注册日期</TableHead>
<TableHead>最后活跃</TableHead>
<TableHead>来源</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{previewData
.filter((item) => item.status === "unmatched")
.map((item) => (
<TableRow key={item.id}>
<TableCell className="font-medium">{item.name}</TableCell>
<TableCell>{item.phone || "-"}</TableCell>
<TableCell>{item.idCard || "-"}</TableCell>
<TableCell>{item.imei || "-"}</TableCell>
<TableCell>{item.address}</TableCell>
<TableCell>{item.registerDate}</TableCell>
<TableCell>{item.lastActive}</TableCell>
<TableCell>{item.source}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</TabsContent>
</Tabs>
</div>
)
}