完成页面的基础配置

src/app/OlMap/Controls/PropertyPanel.tsx

@@ -0,0 +1,63 @@
+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;