Feature/ecs behavior tree (#188)
* feat(behavior-tree): 完全 ECS 化的行为树系统 * feat(editor-app): 添加行为树可视化编辑器 * chore: 移除 Cocos Creator 扩展目录 * feat(editor-app): 行为树编辑器功能增强 * fix(editor-app): 修复 TypeScript 类型错误 * feat(editor-app): 使用 FlexLayout 重构面板系统并优化资产浏览器 * feat(editor-app): 改进编辑器UI样式并修复行为树执行顺序 * feat(behavior-tree,editor-app): 添加装饰器系统并优化编辑器性能 * feat(behavior-tree,editor-app): 添加属性绑定系统 * feat(editor-app,behavior-tree): 优化编辑器UI并改进行为树功能 * feat(editor-app,behavior-tree): 添加全局黑板系统并增强资产浏览器功能 * feat(behavior-tree,editor-app): 添加运行时资产导出系统 * feat(behavior-tree,editor-app): 添加SubTree系统和资产选择器 * feat(behavior-tree,editor-app): 优化系统架构并改进编辑器文件管理 * fix(behavior-tree,editor-app): 修复SubTree节点错误显示空节点警告 * fix(editor-app): 修复局部黑板类型定义文件扩展名错误
This commit is contained in:
YHH
GitHub
302
packages/editor-app/src/styles/FlexLayoutDock.css
Normal file
302
packages/editor-app/src/styles/FlexLayoutDock.css
Normal file
@@ -0,0 +1,302 @@
|
||||
.flexlayout-dock-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #1e1e1e;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flexlayout__layout {
|
||||
background: #1e1e1e;
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.flexlayout__tabset {
|
||||
background: #252526;
|
||||
}
|
||||
|
||||
.flexlayout__tabset_header {
|
||||
background: #252526;
|
||||
border-bottom: 1px solid #1e1e1e;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.flexlayout__tab {
|
||||
background: transparent;
|
||||
color: #969696;
|
||||
border: none;
|
||||
padding: 0 16px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
cursor: default;
|
||||
transition: all 0.1s ease;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flexlayout__tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: transparent;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
.flexlayout__tab:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button {
|
||||
background: transparent !important;
|
||||
color: #969696;
|
||||
border: none !important;
|
||||
border-right: none !important;
|
||||
padding: 0 16px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: transparent;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button:hover {
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button--selected {
|
||||
background: transparent !important;
|
||||
color: #ffffff !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button--selected::after {
|
||||
background: #007acc;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button_leading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button_content {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button--selected .flexlayout__tab_button_content {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button_trailing {
|
||||
margin-left: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.flexlayout__tab:hover .flexlayout__tab_button_trailing {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button_trailing svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button_trailing:hover svg {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.flexlayout__tabset_tabbar_outer {
|
||||
background: #2d2d30;
|
||||
}
|
||||
|
||||
.flexlayout__tabset-selected {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.flexlayout__splitter {
|
||||
background: linear-gradient(to right, transparent, #3e3e42 40%, #3e3e42 60%, transparent);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.flexlayout__splitter_horz {
|
||||
background: linear-gradient(to bottom, transparent, #3e3e42 40%, #3e3e42 60%, transparent);
|
||||
}
|
||||
|
||||
.flexlayout__splitter:hover {
|
||||
background: #007acc;
|
||||
}
|
||||
|
||||
.flexlayout__splitter_border {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.flexlayout__outline_rect {
|
||||
border: 2px solid #007acc;
|
||||
box-shadow: 0 0 20px rgba(0, 122, 204, 0.5);
|
||||
background: rgba(0, 122, 204, 0.1);
|
||||
}
|
||||
|
||||
.flexlayout__edge_rect {
|
||||
background: rgba(0, 122, 204, 0.3);
|
||||
border: 2px solid #007acc;
|
||||
}
|
||||
|
||||
.flexlayout__drag_rect {
|
||||
border: 2px solid #007acc;
|
||||
background: rgba(0, 122, 204, 0.2);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.flexlayout__tabset_content {
|
||||
background: #1e1e1e;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.flexlayout__tabset_content * {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.flexlayout__tabset_content button,
|
||||
.flexlayout__tabset_content a,
|
||||
.flexlayout__tabset_content [role="button"] {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.flexlayout__tab_toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.flexlayout__tab_toolbar_button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #cccccc;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.flexlayout__tab_toolbar_button:hover {
|
||||
background: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.flexlayout__tab_toolbar_button svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.flexlayout__popup_menu {
|
||||
background: #252526;
|
||||
border: 1px solid #454545;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.flexlayout__popup_menu_item {
|
||||
color: #cccccc;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.flexlayout__popup_menu_item:hover {
|
||||
background: #2a2d2e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.flexlayout__popup_menu_item:active {
|
||||
background: #094771;
|
||||
}
|
||||
|
||||
.flexlayout__border {
|
||||
background: #252526;
|
||||
border: 1px solid #1e1e1e;
|
||||
}
|
||||
|
||||
.flexlayout__border_top,
|
||||
.flexlayout__border_bottom {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.flexlayout__border_left,
|
||||
.flexlayout__border_right {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.flexlayout__border_button {
|
||||
background: transparent;
|
||||
color: #969696;
|
||||
border: none;
|
||||
border-bottom: 1px solid #1e1e1e;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flexlayout__border_button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: transparent;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
.flexlayout__border_button:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.flexlayout__border_button--selected {
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.flexlayout__border_button--selected::after {
|
||||
background: #007acc;
|
||||
}
|
||||
|
||||
.flexlayout__error_boundary_container {
|
||||
background: #1e1e1e;
|
||||
color: #f48771;
|
||||
padding: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.flexlayout__error_boundary_message {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
Reference in New Issue
Block a user