64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import React from "react";
|
||
|
||
interface BaseProperty {
|
||
label: string;
|
||
value: string | number;
|
||
unit?: string;
|
||
formatter?: (value: string | number) => string;
|
||
}
|
||
|
||
interface PropertyPanelProps {
|
||
id?: string;
|
||
type?: string;
|
||
properties?: BaseProperty[];
|
||
}
|
||
|
||
const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
||
id,
|
||
type = "未知类型",
|
||
properties = [],
|
||
}) => {
|
||
if (!id) {
|
||
return (
|
||
<div className="absolute top-0 right-0 h-auto bg-white p-6 rounded-bl-2xl shadow-lg min-w-[320px]">
|
||
<h3 className="text-lg font-semibold mb-4">属性面板</h3>
|
||
<p className="text-gray-500">请选择一个要素以查看其属性。</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const formatValue = (property: BaseProperty) => {
|
||
if (property.formatter) {
|
||
return property.formatter(property.value);
|
||
}
|
||
if (property.unit) {
|
||
return `${property.value} ${property.unit}`;
|
||
}
|
||
return property.value;
|
||
};
|
||
|
||
return (
|
||
<div className="absolute top-0 right-0 h-auto bg-white p-6 rounded-bl-2xl shadow-lg min-w-[320px]">
|
||
<h3 className="text-lg font-semibold mb-4">属性面板</h3>
|
||
<div className="space-y-2">
|
||
<div>
|
||
<span className="font-medium">ID：</span>
|
||
<span>{id}</span>
|
||
</div>
|
||
<div>
|
||
<span className="font-medium">类型：</span>
|
||
<span>{type}</span>
|
||
</div>
|
||
{properties.map((property, index) => (
|
||
<div key={index}>
|
||
<span className="font-medium">{property.label}：</span>
|
||
<span>{formatValue(property)}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PropertyPanel;
|