You've already forked DataMate
156 lines
6.5 KiB
TypeScript
156 lines
6.5 KiB
TypeScript
import React from "react";
|
|
import { Modal, Descriptions, Tag, Space, Divider, Card, Typography } from "antd";
|
|
import type { AnnotationTemplate } from "../annotation.model";
|
|
|
|
const { Text, Paragraph } = Typography;
|
|
|
|
interface TemplateDetailProps {
|
|
visible: boolean;
|
|
template?: AnnotationTemplate;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const TemplateDetail: React.FC<TemplateDetailProps> = ({
|
|
visible,
|
|
template,
|
|
onClose,
|
|
}) => {
|
|
if (!template) return null;
|
|
|
|
return (
|
|
<Modal
|
|
title="模板详情"
|
|
open={visible}
|
|
onCancel={onClose}
|
|
footer={null}
|
|
width={800}
|
|
>
|
|
<Descriptions bordered column={2}>
|
|
<Descriptions.Item label="名称" span={2}>
|
|
{template.name}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="描述" span={2}>
|
|
{template.description || "-"}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="数据类型">
|
|
<Tag color="cyan">{template.dataType}</Tag>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="标注类型">
|
|
<Tag color="geekblue">{template.labelingType}</Tag>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="分类">
|
|
<Tag color="blue">{template.category}</Tag>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="样式">
|
|
{template.style}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="类型">
|
|
<Tag color={template.builtIn ? "gold" : "default"}>
|
|
{template.builtIn ? "系统内置" : "自定义"}
|
|
</Tag>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="版本">
|
|
{template.version}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="创建时间" span={2}>
|
|
{new Date(template.createdAt).toLocaleString()}
|
|
</Descriptions.Item>
|
|
{template.updatedAt && (
|
|
<Descriptions.Item label="更新时间" span={2}>
|
|
{new Date(template.updatedAt).toLocaleString()}
|
|
</Descriptions.Item>
|
|
)}
|
|
</Descriptions>
|
|
|
|
<Divider>配置详情</Divider>
|
|
|
|
<Card title="数据对象" size="small" style={{ marginBottom: 16 }}>
|
|
<Space direction="vertical" style={{ width: "100%" }}>
|
|
{template.configuration.objects.map((obj, index) => (
|
|
<Card key={index} size="small" type="inner">
|
|
<Space>
|
|
<Text strong>名称：</Text>
|
|
<Tag>{obj.name}</Tag>
|
|
<Text strong>类型：</Text>
|
|
<Tag color="blue">{obj.type}</Tag>
|
|
<Text strong>值：</Text>
|
|
<Tag color="green">{obj.value}</Tag>
|
|
</Space>
|
|
</Card>
|
|
))}
|
|
</Space>
|
|
</Card>
|
|
|
|
<Card title="标注控件" size="small" style={{ marginBottom: 16 }}>
|
|
<Space direction="vertical" style={{ width: "100%" }} size="middle">
|
|
{template.configuration.labels.map((label, index) => (
|
|
<Card key={index} size="small" type="inner" title={`控件 ${index + 1}`}>
|
|
<Space direction="vertical" style={{ width: "100%" }}>
|
|
<div>
|
|
<Text strong>来源名称：</Text>
|
|
<Tag>{label.fromName}</Tag>
|
|
|
|
<Text strong style={{ marginLeft: 16 }}>目标名称：</Text>
|
|
<Tag>{label.toName}</Tag>
|
|
|
|
<Text strong style={{ marginLeft: 16 }}>类型：</Text>
|
|
<Tag color="purple">{label.type}</Tag>
|
|
|
|
{label.required && <Tag color="red">必填</Tag>}
|
|
</div>
|
|
|
|
{label.description && (
|
|
<div>
|
|
<Text strong>描述：</Text>
|
|
<Text type="secondary">{label.description}</Text>
|
|
</div>
|
|
)}
|
|
|
|
{label.options && label.options.length > 0 && (
|
|
<div>
|
|
<Text strong>选项：</Text>
|
|
<div style={{ marginTop: 4 }}>
|
|
{label.options.map((opt, i) => (
|
|
<Tag key={i} color="cyan">{opt}</Tag>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{label.labels && label.labels.length > 0 && (
|
|
<div>
|
|
<Text strong>标签：</Text>
|
|
<div style={{ marginTop: 4 }}>
|
|
{label.labels.map((lbl, i) => (
|
|
<Tag key={i} color="geekblue">{lbl}</Tag>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Space>
|
|
</Card>
|
|
))}
|
|
</Space>
|
|
</Card>
|
|
|
|
{template.labelConfig && (
|
|
<Card title="Label Studio XML 配置" size="small">
|
|
<Paragraph>
|
|
<pre style={{
|
|
background: "#f5f5f5",
|
|
padding: 12,
|
|
borderRadius: 4,
|
|
overflow: "auto",
|
|
maxHeight: 300
|
|
}}>
|
|
{template.labelConfig}
|
|
</pre>
|
|
</Paragraph>
|
|
</Card>
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default TemplateDetail;
|