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
210
components/data-integration/data-mapping-config.tsx
Normal file
210
components/data-integration/data-mapping-config.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { ArrowRight, Plus, Save, Trash2 } from "lucide-react"
|
||||
|
||||
interface FieldMapping {
|
||||
id: string
|
||||
sourceField: string
|
||||
targetField: string
|
||||
dataType: string
|
||||
required: boolean
|
||||
transformation: string
|
||||
}
|
||||
|
||||
export function DataMappingConfig() {
|
||||
// 模拟数据
|
||||
const [mappings, setMappings] = useState<FieldMapping[]>([
|
||||
{
|
||||
id: "1",
|
||||
sourceField: "phone",
|
||||
targetField: "phoneNumber",
|
||||
dataType: "string",
|
||||
required: true,
|
||||
transformation: "formatPhoneNumber",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
sourceField: "id_card",
|
||||
targetField: "identityNumber",
|
||||
dataType: "string",
|
||||
required: true,
|
||||
transformation: "mask",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
sourceField: "imei",
|
||||
targetField: "deviceImei",
|
||||
dataType: "string",
|
||||
required: false,
|
||||
transformation: "none",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
sourceField: "address",
|
||||
targetField: "userAddress",
|
||||
dataType: "string",
|
||||
required: false,
|
||||
transformation: "none",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
sourceField: "name",
|
||||
targetField: "fullName",
|
||||
dataType: "string",
|
||||
required: true,
|
||||
transformation: "none",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
sourceField: "register_time",
|
||||
targetField: "registrationDate",
|
||||
dataType: "datetime",
|
||||
required: true,
|
||||
transformation: "parseDateTime",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
sourceField: "last_login",
|
||||
targetField: "lastActiveTime",
|
||||
dataType: "datetime",
|
||||
required: false,
|
||||
transformation: "parseDateTime",
|
||||
},
|
||||
])
|
||||
|
||||
const addNewMapping = () => {
|
||||
const newMapping: FieldMapping = {
|
||||
id: `new-${Date.now()}`,
|
||||
sourceField: "",
|
||||
targetField: "",
|
||||
dataType: "string",
|
||||
required: false,
|
||||
transformation: "none",
|
||||
}
|
||||
setMappings([...mappings, newMapping])
|
||||
}
|
||||
|
||||
const updateMapping = (id: string, field: keyof FieldMapping, value: any) => {
|
||||
setMappings(mappings.map((mapping) => (mapping.id === id ? { ...mapping, [field]: value } : mapping)))
|
||||
}
|
||||
|
||||
const deleteMapping = (id: string) => {
|
||||
setMappings(mappings.filter((mapping) => mapping.id !== id))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-medium">字段映射配置</h3>
|
||||
<Button onClick={addNewMapping}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
添加映射
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>源字段</TableHead>
|
||||
<TableHead></TableHead>
|
||||
<TableHead>目标字段</TableHead>
|
||||
<TableHead>数据类型</TableHead>
|
||||
<TableHead>必填</TableHead>
|
||||
<TableHead>转换方式</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{mappings.map((mapping) => (
|
||||
<TableRow key={mapping.id}>
|
||||
<TableCell>
|
||||
<Input
|
||||
value={mapping.sourceField}
|
||||
onChange={(e) => updateMapping(mapping.id, "sourceField", e.target.value)}
|
||||
placeholder="源字段名"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<ArrowRight className="h-4 w-4 text-muted-foreground" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
value={mapping.targetField}
|
||||
onChange={(e) => updateMapping(mapping.id, "targetField", e.target.value)}
|
||||
placeholder="目标字段名"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Select
|
||||
value={mapping.dataType}
|
||||
onValueChange={(value) => updateMapping(mapping.id, "dataType", value)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="选择数据类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="string">字符串</SelectItem>
|
||||
<SelectItem value="number">数字</SelectItem>
|
||||
<SelectItem value="boolean">布尔值</SelectItem>
|
||||
<SelectItem value="datetime">日期时间</SelectItem>
|
||||
<SelectItem value="array">数组</SelectItem>
|
||||
<SelectItem value="object">对象</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center justify-center">
|
||||
<Switch
|
||||
checked={mapping.required}
|
||||
onCheckedChange={(checked) => updateMapping(mapping.id, "required", checked)}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Select
|
||||
value={mapping.transformation}
|
||||
onValueChange={(value) => updateMapping(mapping.id, "transformation", value)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="选择转换方式" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">无转换</SelectItem>
|
||||
<SelectItem value="formatPhoneNumber">格式化手机号</SelectItem>
|
||||
<SelectItem value="mask">数据脱敏</SelectItem>
|
||||
<SelectItem value="parseDateTime">解析日期时间</SelectItem>
|
||||
<SelectItem value="uppercase">转大写</SelectItem>
|
||||
<SelectItem value="lowercase">转小写</SelectItem>
|
||||
<SelectItem value="trim">去除空格</SelectItem>
|
||||
<SelectItem value="custom">自定义转换</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="icon" onClick={() => deleteMapping(mapping.id)}>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button variant="outline">取消</Button>
|
||||
<Button>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
保存配置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user