可动态识别属性

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

@@ -19,31 +19,35 @@
 }
 
 .resizer {
-  background: #252526;
+  background: var(--color-bg-elevated);
   position: relative;
-  z-index: 10;
-  transition: background-color 0.2s ease;
+  z-index: var(--z-index-base);
+  transition: background-color var(--transition-fast);
+  flex-shrink: 0;
 }
 
 .resizer:hover {
-  background: #094771;
+  background: var(--color-primary-subtle);
+}
+
+.resizer:active {
+  background: var(--color-primary);
 }
 
 .resizer-horizontal {
   width: 4px;
   cursor: col-resize;
-  flex-shrink: 0;
 }
 
 .resizer-vertical {
   height: 4px;
   cursor: row-resize;
-  flex-shrink: 0;
 }
 
 .resizer-handle {
   position: absolute;
   background: transparent;
+  pointer-events: none;
 }
 
 .resizer-horizontal .resizer-handle {
@@ -62,10 +66,6 @@
   height: 12px;
 }
 
-.resizer:active {
-  background: #0e6caa;
-}
-
 body.resizing {
   cursor: col-resize !important;
   user-select: none !important;