feat(xcui): add tab strip and workspace compose foundations

This commit is contained in:
2026-04-06 04:27:54 +08:00
parent 3540dbc94d
commit b14a4fb7bb
27 changed files with 2075 additions and 41 deletions

View File

@@ -1,6 +1,10 @@
add_subdirectory(splitter_resize)
add_subdirectory(tab_strip_selection)
add_subdirectory(workspace_compose)
add_custom_target(editor_ui_layout_integration_tests
DEPENDS
editor_ui_layout_splitter_resize_validation
editor_ui_layout_tab_strip_selection_validation
editor_ui_layout_workspace_compose_validation
)

View File

@@ -0,0 +1,35 @@
set(EDITOR_UI_LAYOUT_TAB_STRIP_SELECTION_RESOURCES
View.xcui
${CMAKE_SOURCE_DIR}/tests/UI/Editor/integration/shared/themes/editor_validation.xctheme
)
add_executable(editor_ui_layout_tab_strip_selection_validation WIN32
main.cpp
${EDITOR_UI_LAYOUT_TAB_STRIP_SELECTION_RESOURCES}
)
target_include_directories(editor_ui_layout_tab_strip_selection_validation PRIVATE
${CMAKE_SOURCE_DIR}/tests/UI/Editor/integration/shared/src
${CMAKE_SOURCE_DIR}/engine/include
)
target_compile_definitions(editor_ui_layout_tab_strip_selection_validation PRIVATE
UNICODE
_UNICODE
)
if(MSVC)
target_compile_options(editor_ui_layout_tab_strip_selection_validation PRIVATE /utf-8 /FS)
set_property(TARGET editor_ui_layout_tab_strip_selection_validation PROPERTY
MSVC_RUNTIME_LIBRARY "MultiThreaded$<$<CONFIG:Debug>:Debug>DLL")
endif()
target_link_libraries(editor_ui_layout_tab_strip_selection_validation PRIVATE
editor_ui_integration_host
)
set_target_properties(editor_ui_layout_tab_strip_selection_validation PROPERTIES
OUTPUT_NAME "XCUIEditorLayoutTabStripSelectionValidation"
)
source_group(TREE "${CMAKE_CURRENT_SOURCE_DIR}" FILES View.xcui)

View File

@@ -0,0 +1,46 @@
<View
name="EditorTabStripSelectionValidation"
theme="../../shared/themes/editor_validation.xctheme">
<Column width="fill" height="fill" padding="20" gap="12">
<Card
title="功能TabStrip 选择切换"
subtitle="只验证 tab 头部点击、键盘导航,以及只渲染 selected tab 内容"
tone="accent"
height="156">
<Column gap="6">
<Text text="1. 点击 Scene / Console / Inspector 任一 tab下方内容区应立即切换旧内容不应继续显示。" />
<Text text="2. 先点击一个 tab 让它获得 focus再按 Left / Right / Home / Endselected tab 应变化。" />
<Text text="3. 右下角 Result 正常应显示 Tab selected 或 Tab navigatedFocused 应落在当前 tab。" />
<Text text="4. 这个场景只检查 TabStrip 基础能力,不检查 editor 业务面板。" />
</Column>
</Card>
<TabStrip
id="editor-workspace-tabs"
tabHeaderHeight="34"
tabMinWidth="96"
height="fill">
<Tab id="tab-scene" label="Scene" selected="true">
<Card title="Scene Tab Content" subtitle="selected = Scene" height="fill">
<Column gap="8">
<Text text="这里应该只显示 Scene 的内容占位。" />
</Column>
</Card>
</Tab>
<Tab id="tab-console" label="Console">
<Card title="Console Tab Content" subtitle="selected = Console" height="fill">
<Column gap="8">
<Text text="切换到 Console 后Scene 内容应消失。" />
</Column>
</Card>
</Tab>
<Tab id="tab-inspector" label="Inspector">
<Card title="Inspector Tab Content" subtitle="selected = Inspector" height="fill">
<Column gap="8">
<Text text="按 Home / End 时,也应只保留当前 selected 内容。" />
</Column>
</Card>
</Tab>
</TabStrip>
</Column>
</View>

View File

@@ -0,0 +1,8 @@
#include "Application.h"
int WINAPI wWinMain(HINSTANCE hInstance, HINSTANCE, LPWSTR, int nCmdShow) {
return XCEngine::Tests::EditorUI::RunEditorUIValidationApp(
hInstance,
nCmdShow,
"editor.layout.tab_strip_selection");
}

View File

@@ -0,0 +1,35 @@
set(EDITOR_UI_LAYOUT_WORKSPACE_COMPOSE_RESOURCES
View.xcui
${CMAKE_SOURCE_DIR}/tests/UI/Editor/integration/shared/themes/editor_validation.xctheme
)
add_executable(editor_ui_layout_workspace_compose_validation WIN32
main.cpp
${EDITOR_UI_LAYOUT_WORKSPACE_COMPOSE_RESOURCES}
)
target_include_directories(editor_ui_layout_workspace_compose_validation PRIVATE
${CMAKE_SOURCE_DIR}/tests/UI/Editor/integration/shared/src
${CMAKE_SOURCE_DIR}/engine/include
)
target_compile_definitions(editor_ui_layout_workspace_compose_validation PRIVATE
UNICODE
_UNICODE
)
if(MSVC)
target_compile_options(editor_ui_layout_workspace_compose_validation PRIVATE /utf-8 /FS)
set_property(TARGET editor_ui_layout_workspace_compose_validation PROPERTY
MSVC_RUNTIME_LIBRARY "MultiThreaded$<$<CONFIG:Debug>:Debug>DLL")
endif()
target_link_libraries(editor_ui_layout_workspace_compose_validation PRIVATE
editor_ui_integration_host
)
set_target_properties(editor_ui_layout_workspace_compose_validation PROPERTIES
OUTPUT_NAME "XCUIEditorLayoutWorkspaceComposeValidation"
)
source_group(TREE "${CMAKE_CURRENT_SOURCE_DIR}" FILES View.xcui)

View File

@@ -0,0 +1,94 @@
<View
name="EditorWorkspaceComposeValidation"
theme="../../shared/themes/editor_validation.xctheme">
<Column width="fill" height="fill" padding="20" gap="12">
<Card
title="功能Workspace compose"
subtitle="只检查 editor 工作区的 split + tab + placeholder 组合,不检查任何业务面板"
tone="accent"
height="156">
<Column gap="6">
<Text text="1. 先看布局:左、中、右、下四个区域应边界清晰,没有重叠、穿透或错位。" />
<Text text="2. 拖拽 workspace-left-right 和 workspace-top-bottom各区域尺寸应实时变化并被最小尺寸 clamp 住。" />
<Text text="3. 点击中间的 Document A / B / C只应显示当前 selected tab 的 placeholder 内容。" />
<Text text="4. 这个场景只验证工作区组合基础,不代表 Hierarchy / Inspector / Console 已开始实现。" />
</Column>
</Card>
<Splitter
id="workspace-top-bottom"
axis="vertical"
splitRatio="0.76"
splitterSize="10"
splitterHitSize="18"
primaryMin="320"
secondaryMin="120"
height="fill">
<Splitter
id="workspace-left-right"
axis="horizontal"
splitRatio="0.24"
splitterSize="10"
splitterHitSize="18"
primaryMin="160"
secondaryMin="420"
height="fill">
<Card id="workspace-left-slot" title="Navigation Slot" subtitle="placeholder panel host" height="fill">
<Column gap="8">
<Text text="这里是左侧 placeholder slot只检查 pane compose。" />
</Column>
</Card>
<Splitter
id="workspace-center-right"
axis="horizontal"
splitRatio="0.70"
splitterSize="10"
splitterHitSize="18"
primaryMin="260"
secondaryMin="180"
height="fill">
<TabStrip
id="workspace-document-tabs"
tabHeaderHeight="34"
tabMinWidth="112"
height="fill">
<Tab id="tab-document-a" label="Document A" selected="true">
<Card title="Primary Document Slot" subtitle="selected = Document A" height="fill">
<Column gap="8">
<Text text="这里应只显示 Document A 的 placeholder 内容。" />
</Column>
</Card>
</Tab>
<Tab id="tab-document-b" label="Document B">
<Card title="Secondary Document Slot" subtitle="selected = Document B" height="fill">
<Column gap="8">
<Text text="切换到 Document B 后A 的内容应消失。" />
</Column>
</Card>
</Tab>
<Tab id="tab-document-c" label="Document C">
<Card title="Tertiary Document Slot" subtitle="selected = Document C" height="fill">
<Column gap="8">
<Text text="这里只是第三个 placeholder不代表真实面板业务。" />
</Column>
</Card>
</Tab>
</TabStrip>
<Card id="workspace-right-slot" title="Details Slot" subtitle="placeholder panel host" height="fill">
<Column gap="8">
<Text text="这里是右侧 placeholder slot只检查嵌套 split 稳定性。" />
</Column>
</Card>
</Splitter>
</Splitter>
<Card id="workspace-bottom-slot" title="Output Slot" subtitle="placeholder panel host" height="fill">
<Column gap="8">
<Text text="这里是底部 placeholder slot用来检查上下 split compose。" />
</Column>
</Card>
</Splitter>
</Column>
</View>

View File

@@ -0,0 +1,8 @@
#include "Application.h"
int WINAPI wWinMain(HINSTANCE hInstance, HINSTANCE, LPWSTR, int nCmdShow) {
return XCEngine::Tests::EditorUI::RunEditorUIValidationApp(
hInstance,
nCmdShow,
"editor.layout.workspace_compose");
}

View File

@@ -24,8 +24,8 @@ fs::path RepoRelative(const char* relativePath) {
return (RepoRootPath() / relativePath).lexically_normal();
}
const std::array<EditorValidationScenario, 4>& GetEditorValidationScenarios() {
static const std::array<EditorValidationScenario, 4> scenarios = { {
const std::array<EditorValidationScenario, 6>& GetEditorValidationScenarios() {
static const std::array<EditorValidationScenario, 6> scenarios = { {
{
"editor.input.keyboard_focus",
UIValidationDomain::Editor,
@@ -61,6 +61,24 @@ const std::array<EditorValidationScenario, 4>& GetEditorValidationScenarios() {
RepoRelative("tests/UI/Editor/integration/layout/splitter_resize/View.xcui"),
RepoRelative("tests/UI/Editor/integration/shared/themes/editor_validation.xctheme"),
RepoRelative("tests/UI/Editor/integration/layout/splitter_resize/captures")
},
{
"editor.layout.tab_strip_selection",
UIValidationDomain::Editor,
"layout",
"Editor Layout | TabStrip Selection",
RepoRelative("tests/UI/Editor/integration/layout/tab_strip_selection/View.xcui"),
RepoRelative("tests/UI/Editor/integration/shared/themes/editor_validation.xctheme"),
RepoRelative("tests/UI/Editor/integration/layout/tab_strip_selection/captures")
},
{
"editor.layout.workspace_compose",
UIValidationDomain::Editor,
"layout",
"Editor Layout | Workspace Compose",
RepoRelative("tests/UI/Editor/integration/layout/workspace_compose/View.xcui"),
RepoRelative("tests/UI/Editor/integration/shared/themes/editor_validation.xctheme"),
RepoRelative("tests/UI/Editor/integration/layout/workspace_compose/captures")
}
} };
return scenarios;