feat(editor): 添加 ECS UI 系统和编辑器更新优化 (#238)

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

@@ -150,6 +150,17 @@
     cursor: not-allowed;
 }
 
+.update-btn.install-btn {
+    background: #22c55e;
+    border-color: #22c55e;
+    color: white;
+}
+
+.update-btn.install-btn:hover:not(:disabled) {
+    background: #16a34a;
+    border-color: #16a34a;
+}
+
 .update-status {
     display: flex;
     align-items: center;
@@ -179,6 +190,11 @@
     color: #CE9178;
 }
 
+.update-status.status-installing {
+    background: rgba(34, 197, 94, 0.1);
+    color: #22c55e;
+}
+
 .update-status .status-available {
     color: #4EC9B0;
 }

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

@@ -515,9 +515,7 @@
 }
 
 .component-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
+  position: fixed;
   min-width: 220px;
   max-height: 320px;
   background: var(--color-bg-elevated);
@@ -540,17 +538,33 @@
   }
 }
 
-.component-dropdown-header {
-  padding: 10px 12px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.component-dropdown-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
   border-bottom: 1px solid var(--color-border-default);
   background: var(--color-bg-base);
 }
 
+.component-dropdown-search svg {
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
+.component-dropdown-search input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--color-text-primary);
+  font-size: 12px;
+}
+
+.component-dropdown-search input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
 .component-dropdown-empty {
   padding: 16px 12px;
   text-align: center;
@@ -589,6 +603,41 @@
   margin-bottom: 0;
 }
 
+.component-category-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--color-bg-base);
+  border: none;
+  color: var(--color-text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+  transition: all var(--transition-fast);
+}
+
+.component-category-header:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.component-category-header svg {
+  color: var(--color-text-tertiary);
+}
+
+.component-category-count {
+  margin-left: auto;
+  padding: 1px 6px;
+  background: var(--color-bg-inset);
+  border-radius: 10px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--color-text-tertiary);
+}
+
 .component-category-label {
   padding: 6px 12px 4px;
   font-size: 10px;
@@ -600,10 +649,11 @@
 
 .component-dropdown-item {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
   width: 100%;
-  padding: 8px 12px;
+  padding: 6px 12px 6px 28px;
   background: transparent;
   border: none;
   color: var(--color-text-primary);
@@ -612,6 +662,11 @@
   transition: all 0.1s ease;
 }
 
+.component-dropdown-item svg {
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
 .component-dropdown-item:hover {
   background: var(--color-bg-hover);
 }
@@ -637,7 +692,7 @@
   background: #2a2a2f;
   border: none;
   border-radius: 0;
-  overflow: hidden;
+  overflow: visible;
   transition: none;
   border-left: 3px solid #4a4a50;
 }
@@ -729,7 +784,7 @@
   padding: 6px 8px 8px 8px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   background: #1e1e23;
-  overflow: hidden;
+  overflow: visible;
   min-width: 0;
 }
 

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

@@ -16,7 +16,7 @@
   border-bottom: 1px solid var(--color-border-subtle);
   gap: 8px;
   transition: background-color var(--transition-fast);
-  overflow: hidden;
+  overflow: visible;
 }
 
 .property-field:hover {

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

@@ -466,3 +466,69 @@
   background-color: var(--color-border-default);
   margin: var(--spacing-xs) 0;
 }
+
+.context-menu-item-with-submenu {
+  position: relative;
+}
+
+.context-menu-item-with-submenu > button {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  text-align: left;
+}
+
+.context-menu-item-with-submenu > button:hover {
+  background-color: var(--color-bg-hover);
+}
+
+.context-menu-item-with-submenu .submenu-arrow {
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+}
+
+.context-submenu {
+  position: fixed;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  padding: var(--spacing-xs);
+  min-width: 150px;
+  z-index: 1001;
+}
+
+.context-submenu button {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  text-align: left;
+}
+
+.context-submenu button:hover {
+  background-color: var(--color-bg-hover);
+}
+
+.context-menu-danger {
+  color: var(--color-error) !important;
+}
+
+.context-menu-danger:hover {
+  background-color: rgba(244, 135, 113, 0.1) !important;
+}

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

@@ -0,0 +1,22 @@
+.startup-logo-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: #1e1e1e;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.5s ease-out;
+}
+
+.startup-logo-container.fade-out {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.startup-logo-canvas {
+    display: block;
+}

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

@@ -250,3 +250,99 @@
 .startup-locale-item.active:hover {
   color: #fff;
 }
+
+/* 更新提示条样式 */
+.startup-update-banner {
+  position: fixed;
+  bottom: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+}
+
+.update-banner-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: linear-gradient(135deg, #1e5a2f 0%, #1a4a28 100%);
+  border: 1px solid #2e8b4a;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  color: #ffffff;
+  font-size: 13px;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.update-banner-content svg {
+  color: #4ade80;
+  flex-shrink: 0;
+}
+
+.update-banner-text {
+  white-space: nowrap;
+}
+
+.update-banner-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.update-banner-btn.primary {
+  background: #22c55e;
+  color: #ffffff;
+}
+
+.update-banner-btn.primary:hover:not(:disabled) {
+  background: #16a34a;
+}
+
+.update-banner-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.update-banner-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.update-banner-close:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+.update-banner-close:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}