From 011376cf519e639f39c224461fc81095a3b10b79 Mon Sep 17 00:00:00 2001
From: JIANG <huarch97@gmail.com>
Date: Mon, 20 Oct 2025 18:29:44 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B1=9E=E6=80=A7=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E9=9D=A2=E6=9D=BF=E9=A3=8E=E6=A0=BC=EF=BC=8C=E4=B8=8E?=
 =?UTF-8?q?=E5=88=86=E5=8C=BA=E5=B1=9E=E6=80=A7=E6=9F=A5=E8=AF=A2=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E9=A3=8E=E6=A0=BC=E4=B8=80=E8=87=B4=EF=BC=9B=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E5=AE=98=E7=BD=91=E4=BC=98=E5=8C=96=E5=88=86=E5=8C=BA?=
 =?UTF-8?q?=E7=9A=84=E5=B7=A5=E5=85=B7=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../network-partition-optimization/page.tsx   |   2 +-
 src/app/OlMap/Controls/PropertyPanel.tsx      | 152 +++++++++++++++---
 src/components/olmap/ZonePropsPanel.tsx       |   2 +-
 3 files changed, 130 insertions(+), 26 deletions(-)

diff --git a/src/app/(main)/network-partition-optimization/page.tsx b/src/app/(main)/network-partition-optimization/page.tsx
index 77da850..ab64ace 100644
--- a/src/app/(main)/network-partition-optimization/page.tsx
+++ b/src/app/(main)/network-partition-optimization/page.tsx
@@ -7,7 +7,7 @@ export default function Home() {
   return (
     <div className="relative w-full h-full overflow-hidden">
       <MapComponent>
-        <MapToolbar hiddenButtons={["style"]} />
+        {/* <MapToolbar hiddenButtons={["style"]} /> */}
         <ZonePropsPanel />
       </MapComponent>
     </div>
diff --git a/src/app/OlMap/Controls/PropertyPanel.tsx b/src/app/OlMap/Controls/PropertyPanel.tsx
index f96ccd3..a9c6243 100644
--- a/src/app/OlMap/Controls/PropertyPanel.tsx
+++ b/src/app/OlMap/Controls/PropertyPanel.tsx
@@ -18,15 +18,6 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
   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] z-10">
-        <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);
@@ -37,24 +28,137 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
     return property.value;
   };
 
+  const isImportantKeys = ["ID", "类型", "Name", "面积", "长度"];
+
   return (
-    <div className="absolute top-0 right-0 h-auto bg-white p-6 rounded-bl-2xl shadow-lg min-w-[320px] z-10">
-      <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 className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-96 max-h-[850px] flex flex-col backdrop-blur-sm opacity-95 hover:opacity-100 transition-all duration-300">
+      {/* 头部 */}
+      <div className="flex justify-between items-center px-5 py-4 bg-[#257DD4] text-white">
+        <div className="flex items-center gap-2">
+          <svg
+            className="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+          </svg>
+          <h3 className="text-lg font-semibold">属性面板</h3>
         </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 className="flex-1 overflow-y-auto px-4 py-3">
+        {!id ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg
+              className="w-16 h-16 mb-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+              />
+            </svg>
+            <p className="text-sm">暂无属性信息</p>
+            <p className="text-xs mt-1">请选择一个要素以查看其属性</p>
           </div>
-        ))}
+        ) : (
+          <div className="space-y-2">
+            {/* ID 属性 */}
+            <div className="group rounded-lg p-3 transition-all duration-200 bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500">
+              <div className="flex justify-between items-start gap-3">
+                <span className="font-medium text-xs uppercase tracking-wide text-blue-700">
+                  ID
+                </span>
+                <span className="text-sm font-semibold text-right flex-1 text-blue-900">
+                  {id}
+                </span>
+              </div>
+            </div>
+
+            {/* 类型属性 */}
+            <div className="group rounded-lg p-3 transition-all duration-200 bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500">
+              <div className="flex justify-between items-start gap-3">
+                <span className="font-medium text-xs uppercase tracking-wide text-blue-700">
+                  类型
+                </span>
+                <span className="text-sm font-semibold text-right flex-1 text-blue-900">
+                  {type}
+                </span>
+              </div>
+            </div>
+
+            {/* 其他属性 */}
+            {properties.map((property, index) => {
+              const isImportant = isImportantKeys.includes(property.label);
+              return (
+                <div
+                  key={index}
+                  className={`group rounded-lg p-3 transition-all duration-200 ${
+                    isImportant
+                      ? "bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500"
+                      : "bg-gray-50 hover:bg-gray-100"
+                  }`}
+                >
+                  <div className="flex justify-between items-start gap-3">
+                    <span
+                      className={`font-medium text-xs uppercase tracking-wide ${
+                        isImportant ? "text-blue-700" : "text-gray-600"
+                      }`}
+                    >
+                      {property.label}
+                    </span>
+                    <span
+                      className={`text-sm font-semibold text-right flex-1 ${
+                        isImportant ? "text-blue-900" : "text-gray-800"
+                      }`}
+                    >
+                      {formatValue(property)}
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* 底部统计区域 */}
+      <div className="px-5 py-3 bg-gray-50 border-t border-gray-200">
+        <div className="flex items-center justify-between text-xs">
+          <span className="text-gray-600 flex items-center gap-1">
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+              />
+            </svg>
+            共 {id ? properties.length + 2 : 0} 个属性
+          </span>
+          {id && (
+            <span className="text-green-600 flex items-center gap-1 font-medium">
+              <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
+              已选中
+            </span>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/olmap/ZonePropsPanel.tsx b/src/components/olmap/ZonePropsPanel.tsx
index 86e0c9e..7da1cc1 100644
--- a/src/components/olmap/ZonePropsPanel.tsx
+++ b/src/components/olmap/ZonePropsPanel.tsx
@@ -282,7 +282,7 @@ const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
   return (
     <div className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-96 max-h-[850px] flex flex-col backdrop-blur-sm opacity-95 hover:opacity-100 transition-all duration-300">
       {/* 头部 */}
-      <div className="flex justify-between items-center px-5 py-4 bg-blue-500 text-white">
+      <div className="flex justify-between items-center px-5 py-4 bg-[#257DD4] text-white">
         <div className="flex items-center gap-2">
           <svg
             className="w-5 h-5"