95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { ProjectDetail } from "@/components/label/api/project/typing"
|
|
import { Badge, Group, Paper, Stack, Text } from "@mantine/core"
|
|
import { DataTable, DataTableColumn } from "mantine-datatable"
|
|
import { useMemo } from "react"
|
|
|
|
export default function LabelSchemeContainer(props: {
|
|
info: ProjectDetail.DataProps | undefined
|
|
}) {
|
|
const schemas = props.info?.label_schema_list ?? []
|
|
|
|
const columns = useMemo(() => {
|
|
const cols: DataTableColumn<ProjectDetail.LabelSchemaList>[] = [
|
|
{ accessor: "category_id", title: "ID", width: 70 },
|
|
{ accessor: "label_class", title: "类别", width: 140 },
|
|
{
|
|
accessor: "color",
|
|
title: "颜色",
|
|
width: 120,
|
|
render: (record) => {
|
|
const color = Array.isArray(record.color) ? record.color : []
|
|
const bg =
|
|
color.length >= 3
|
|
? `rgb(${color[0]}, ${color[1]}, ${color[2]})`
|
|
: "rgba(0,0,0,0.15)"
|
|
return (
|
|
<Group gap={8} wrap="nowrap">
|
|
<div
|
|
style={{
|
|
width: 14,
|
|
height: 14,
|
|
borderRadius: 4,
|
|
background: bg,
|
|
border: "1px solid rgba(0,0,0,0.12)",
|
|
}}
|
|
/>
|
|
<Text size="sm">
|
|
{color.length >= 3
|
|
? `${color[0]},${color[1]},${color[2]}`
|
|
: "-"}
|
|
</Text>
|
|
</Group>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessor: "label_type",
|
|
title: "类型",
|
|
width: 90,
|
|
render: (record) => <Badge variant="light">{record.label_type}</Badge>,
|
|
},
|
|
{
|
|
accessor: "sub_attributes",
|
|
title: "子属性",
|
|
width: 240,
|
|
render: (record) => (
|
|
<Text
|
|
size="sm"
|
|
style={{
|
|
maxWidth: 240,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
}}>
|
|
{(record.sub_attributes ?? []).join("、") || "-"}
|
|
</Text>
|
|
),
|
|
},
|
|
]
|
|
return cols
|
|
}, [])
|
|
|
|
return (
|
|
<Paper
|
|
withBorder
|
|
p="sm"
|
|
radius="md"
|
|
style={{ borderColor: "rgba(0,0,0,0.06)" }}>
|
|
<Stack gap="sm">
|
|
<Text fw={700}>标注方案</Text>
|
|
<DataTable<ProjectDetail.LabelSchemaList>
|
|
withTableBorder
|
|
withRowBorders
|
|
idAccessor="category_id"
|
|
records={schemas}
|
|
columns={columns}
|
|
minHeight={160}
|
|
noRecordsText="暂无数据"
|
|
/>
|
|
</Stack>
|
|
</Paper>
|
|
)
|
|
}
|