可动态识别属性

packages/editor-app/src/styles/SceneHierarchy.css

@@ -2,34 +2,68 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: #1e1e1e;
-  color: #cccccc;
+  background-color: var(--color-bg-base);
+  color: var(--color-text-primary);
 }
 
 .hierarchy-header {
-  padding: 10px;
-  border-bottom: 1px solid #3c3c3c;
-  background-color: #252526;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  height: var(--layout-panel-header);
+  padding: 0 var(--spacing-md);
+  border-bottom: 1px solid var(--color-border-default);
+  background-color: var(--color-bg-elevated);
+  flex-shrink: 0;
+}
+
+.hierarchy-header-icon {
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
 }
 
 .hierarchy-header h3 {
   margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #cccccc;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .hierarchy-content {
   flex: 1;
   overflow-y: auto;
-  padding: 8px 0;
+  padding: var(--spacing-xs) 0;
 }
 
 .empty-state {
-  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4xl) var(--spacing-lg);
   text-align: center;
-  color: #858585;
-  font-size: 13px;
+  color: var(--color-text-secondary);
+  height: 100%;
+}
+
+.empty-icon {
+  color: var(--color-text-tertiary);
+  margin-bottom: var(--spacing-md);
+  opacity: 0.5;
+}
+
+.empty-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.empty-hint {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
 }
 
 .entity-list {
@@ -41,30 +75,61 @@
 .entity-item {
   display: flex;
   align-items: center;
-  padding: 6px 12px;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
   cursor: pointer;
   user-select: none;
-  transition: background-color 0.1s;
+  transition: all var(--transition-fast);
+  position: relative;
+}
+
+.entity-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: transparent;
+  transition: background-color var(--transition-fast);
 }
 
 .entity-item:hover {
-  background-color: #2a2d2e;
+  background-color: var(--color-bg-hover);
 }
 
 .entity-item.selected {
-  background-color: #094771;
+  background-color: var(--color-selected);
+}
+
+.entity-item.selected::before {
+  background-color: var(--color-primary);
 }
 
 .entity-item.selected:hover {
-  background-color: #0e639c;
+  background-color: var(--color-selected-hover);
 }
 
 .entity-icon {
-  margin-right: 8px;
-  font-size: 14px;
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+  transition: color var(--transition-fast);
+}
+
+.entity-item:hover .entity-icon,
+.entity-item.selected .entity-icon {
+  color: var(--color-primary);
 }
 
 .entity-name {
-  font-size: 13px;
-  color: #cccccc;
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.entity-item.selected .entity-name {
+  font-weight: var(--font-weight-medium);
 }