feat(image): add page
This commit is contained in:
224
app/project/detail/components/LabelSchemeContainer.tsx
Normal file
224
app/project/detail/components/LabelSchemeContainer.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
"use client"
|
||||
|
||||
import { ProjectDetail } from "@/components/label/api/project/typing"
|
||||
import {
|
||||
labelTypeMap,
|
||||
selectModeMap,
|
||||
staticsColor,
|
||||
} from "@/components/label/utils/constants"
|
||||
import { Badge, Button, Group, Modal, Paper, Stack, Text } from "@mantine/core"
|
||||
import { DataTable, DataTableColumn } from "mantine-datatable"
|
||||
import { useState } from "react"
|
||||
|
||||
type DetailRow = ProjectDetail.SubAttributesDescribe
|
||||
|
||||
function getColorIndex(color: number[] | undefined) {
|
||||
if (!Array.isArray(color) || color.length < 3) return undefined
|
||||
const key = color.slice(0, 3).join("_")
|
||||
for (const item of staticsColor) {
|
||||
const [colorKey, colorIndex] = Object.entries(item)[0] ?? []
|
||||
if (colorKey === key && typeof colorIndex === "number") {
|
||||
return colorIndex
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
export default function LabelSchemeContainer(props: {
|
||||
info: ProjectDetail.DataProps | undefined
|
||||
}) {
|
||||
const schemas = props.info?.label_schema_list ?? []
|
||||
const [detailOpen, setDetailOpen] = useState(false)
|
||||
const [detailRows, setDetailRows] = useState<DetailRow[]>([])
|
||||
|
||||
const columns: DataTableColumn<ProjectDetail.LabelSchemaList>[] = [
|
||||
{
|
||||
accessor: "label_class",
|
||||
title: "类别",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
accessor: "super_category",
|
||||
title: "属性",
|
||||
width: 120,
|
||||
render: (record) => record.super_category || "-",
|
||||
},
|
||||
{
|
||||
accessor: "category_id",
|
||||
title: "ID",
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
accessor: "label_type",
|
||||
title: "标注方式",
|
||||
width: 140,
|
||||
render: (record) => (
|
||||
<Badge variant="light">
|
||||
{labelTypeMap.get(record.label_type) ??
|
||||
String(record.label_type ?? "-")}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessor: "color",
|
||||
title: "标签颜色",
|
||||
width: 130,
|
||||
render: (record) => {
|
||||
const color = Array.isArray(record.color) ? record.color : []
|
||||
const idx = getColorIndex(color)
|
||||
if (color.length < 3) {
|
||||
return (
|
||||
<Text size="sm" c="dimmed">
|
||||
-
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Group gap={8} wrap="nowrap">
|
||||
<div
|
||||
style={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 999,
|
||||
backgroundColor: `rgb(${color.join(",")})`,
|
||||
border:
|
||||
"1px solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
|
||||
}}
|
||||
/>
|
||||
<Text size="sm">{idx ?? "-"}</Text>
|
||||
</Group>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessor: "sub_attributes",
|
||||
title: "子属性",
|
||||
width: 180,
|
||||
render: (record) => {
|
||||
const attrs = Array.isArray(record.sub_attributes)
|
||||
? record.sub_attributes
|
||||
: []
|
||||
return (
|
||||
<Text
|
||||
size="sm"
|
||||
style={{
|
||||
maxWidth: 180,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}>
|
||||
{attrs.length ? attrs.join("、") : "-"}
|
||||
</Text>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessor: "sub_attributes_describe",
|
||||
title: "子属性描述",
|
||||
width: 120,
|
||||
textAlign: "center",
|
||||
render: (record) => {
|
||||
const details = Array.isArray(record.sub_attributes_describe)
|
||||
? record.sub_attributes_describe
|
||||
: []
|
||||
if (!details.length) {
|
||||
return (
|
||||
<Text size="sm" c="dimmed">
|
||||
-
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="compact-xs"
|
||||
onClick={() => {
|
||||
setDetailRows(details)
|
||||
setDetailOpen(true)
|
||||
}}>
|
||||
查看
|
||||
</Button>
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const detailColumns: DataTableColumn<DetailRow>[] = [
|
||||
{
|
||||
accessor: "chinese_name",
|
||||
title: "子属性",
|
||||
width: 140,
|
||||
render: (record) => record.chinese_name || "-",
|
||||
},
|
||||
{
|
||||
accessor: "select_mode",
|
||||
title: "输入方式",
|
||||
width: 100,
|
||||
render: (record) =>
|
||||
selectModeMap.get(record.select_mode) ??
|
||||
String(record.select_mode ?? "-"),
|
||||
},
|
||||
{
|
||||
accessor: "isrequired",
|
||||
title: "是否必填",
|
||||
width: 90,
|
||||
render: (record) => (record.isrequired === 1 ? "是" : "否"),
|
||||
},
|
||||
{
|
||||
accessor: "optional_item",
|
||||
title: "可选属性值",
|
||||
render: (record) => {
|
||||
const opts = Array.isArray(record.optional_item)
|
||||
? record.optional_item
|
||||
: []
|
||||
return opts.length ? opts.join("；") : "-"
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper
|
||||
withBorder
|
||||
p="sm"
|
||||
radius="md"
|
||||
style={{
|
||||
borderColor:
|
||||
"light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
|
||||
}}>
|
||||
<Stack gap="sm">
|
||||
<Text fw={700}>标注方案</Text>
|
||||
<DataTable<ProjectDetail.LabelSchemaList>
|
||||
withTableBorder
|
||||
withRowBorders
|
||||
idAccessor="category_id"
|
||||
records={schemas}
|
||||
columns={columns}
|
||||
minHeight={160}
|
||||
noRecordsText="暂无数据"
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Modal
|
||||
opened={detailOpen}
|
||||
onClose={() => {
|
||||
setDetailOpen(false)
|
||||
setDetailRows([])
|
||||
}}
|
||||
title="子属性描述"
|
||||
centered
|
||||
size="70%">
|
||||
<DataTable<DetailRow>
|
||||
withTableBorder
|
||||
withRowBorders
|
||||
records={detailRows}
|
||||
columns={detailColumns}
|
||||
noRecordsText="暂无数据"
|
||||
minHeight={220}
|
||||
idAccessor="chinese_name"
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user