From 345ef70972a02e05cca485baf649f0900e712c51 Mon Sep 17 00:00:00 2001
From: YHH <359807859@qq.com>
Date: Thu, 16 Oct 2025 12:00:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81color=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/EntityInspector.tsx        | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/editor-app/src/components/EntityInspector.tsx b/packages/editor-app/src/components/EntityInspector.tsx
index 01f9fff5..2786c67e 100644
--- a/packages/editor-app/src/components/EntityInspector.tsx
+++ b/packages/editor-app/src/components/EntityInspector.tsx
@@ -186,6 +186,30 @@ export function EntityInspector({ entityStore: _entityStore, messageHub }: Entit
       );
     }
 
+    if (valueType === 'object' && value.r !== undefined && value.g !== undefined && value.b !== undefined) {
+      const r = Math.round(value.r * 255);
+      const g = Math.round(value.g * 255);
+      const b = Math.round(value.b * 255);
+      const a = value.a !== undefined ? value.a : 1;
+      const hexColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+
+      return (
+        <div key={key} className="property-field">
+          <label className="property-label">{key}</label>
+          <div className="property-color-wrapper">
+            <div className="property-color-preview" style={{ backgroundColor: hexColor, opacity: a }} />
+            <input
+              type="text"
+              className="property-input property-input-color-text"
+              value={`${hexColor.toUpperCase()} (${a.toFixed(2)})`}
+              disabled
+              style={{ flex: 1 }}
+            />
+          </div>
+        </div>
+      );
+    }
+
     if (valueType === 'object' && value.minX !== undefined && value.maxX !== undefined && value.minY !== undefined && value.maxY !== undefined) {
       return (
         <div key={key} className="property-field" style={{ flexDirection: 'column', alignItems: 'stretch' }}>