fluent_imgui

fluent_imgui 是一个基于 C++20 和 Dear ImGui 的 Fluent 风格 UI 组件库。它提供主题、布局、常用控件、Toast、Settings 持久化和动画状态管理，核心库不绑定渲染后端；当前仓库附带一个 Windows + DirectX 11 示例程序。

特性

• fluent_imgui::fluent_imgui CMake 静态库目标，适合 FetchContent 直接接入。
• 后端无关的核心库：可以配合你自己的 ImGui backend 使用。
• 深色/浅色主题、7 个 accent 预设、DPI scale、圆角、间距和状态色。
• 常用组件：Button、IconButton、Toggle、InputText、Combo、Slider、Stepper、RadioGroup、Tabs、ProgressBar、InfoBar、Toast、Tooltip、Dialog。
• 布局组件：Panel、Sidebar、NavItem、响应式列、SettingRow。
• 交互动效：hover、press、selected、value、toast、dialog、页面切换等状态使用短时缓动。
• JSON 设置持久化：显式路径 API，不隐式写入用户目录。
• Windows DX11 demo：固定 1280x720 视觉示例，包含中文字体和 Font Awesome 图标演示。

快速接入

推荐使用 CMake FetchContent。最小接入如下：

cmake_minimum_required(VERSION 3.25)
project(my_app LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 20)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

include(FetchContent)
FetchContent_Declare(
    fluent_imgui
    GIT_REPOSITORY https://github.com/z1990700333/fluent_imgui.git
    GIT_TAG v0.1.0
)
FetchContent_MakeAvailable(fluent_imgui)

add_executable(my_app main.cpp)
target_link_libraries(my_app PRIVATE fluent_imgui::fluent_imgui)

作为子项目引入时，FLUENT_IMGUI_BUILD_DEMO 和 FLUENT_IMGUI_BUILD_TESTS 默认关闭，只会构建库目标。

如果你的工程已经提供 imgui::imgui 或 imgui CMake target，可以在 FetchContent_MakeAvailable 前启用系统 ImGui：

set(FLUENT_IMGUI_USE_SYSTEM_IMGUI ON CACHE BOOL "" FORCE)

否则保持默认值，库会拉取仓库固定的 Dear ImGui docking 版本。

最小使用示例

#include <fluent_imgui/fluent_imgui.hpp>

fluent_imgui::Context ui;
bool enabled = true;
int active_tab = 0;

void RenderUi()
{
    ui.BeginFrame();

    fluent_imgui::Theme theme =
        fluent_imgui::Theme::Make(fluent_imgui::ThemeMode::Dark, fluent_imgui::AccentColor::Orange);
    theme.Apply();

    if (fluent_imgui::BeginPanel("设置")) {
        fluent_imgui::Toggle("启用功能", &enabled);
        fluent_imgui::Button("保存", fluent_imgui::ButtonVariant::Primary);
    }
    fluent_imgui::EndPanel();

    std::array<std::string_view, 3> tabs = {"主页", "日志", "设置"};
    fluent_imgui::Tabs("main_tabs", &active_tab, tabs);

    ui.Toasts().Render(ui.Themes().Current(), ImVec2(-24.0F, -24.0F));
    ui.EndFrame();
}

fluent_imgui 不替你创建 ImGui context，也不绑定 Win32/DX11/OpenGL/Vulkan backend。你仍然需要按 Dear ImGui 的方式初始化平台和渲染后端。

构建本仓库

Windows + Visual Studio 2022：

cmake -S . -B build -G "Visual Studio 17 2022" -A x64 -DFLUENT_IMGUI_BUILD_DEMO=ON -DFLUENT_IMGUI_BUILD_TESTS=ON
cmake --build build --config Release --parallel
ctest --test-dir build -C Release --output-on-failure

常用 CMake 选项：

• FLUENT_IMGUI_BUILD_DEMO：构建 Windows DirectX 11 demo。顶层项目默认 ON，子项目默认 OFF。
• FLUENT_IMGUI_BUILD_TESTS：构建单元测试。顶层项目默认 ON，子项目默认 OFF。
• FLUENT_IMGUI_USE_SYSTEM_IMGUI：使用外部已有 ImGui target。默认 OFF。
• FLUENT_IMGUI_INSTALL：生成基础 install rules。默认 OFF。

Demo 与视觉验证

构建后运行：

.\build\Release\fluent_imgui_demo_dx11.exe

截图和差异验证脚本：

powershell -ExecutionPolicy Bypass -File .\tools\capture_demo.ps1 -ExePath .\build\Release\fluent_imgui_demo_dx11.exe -OutDir .\visual_captures
powershell -ExecutionPolicy Bypass -File .\tools\compare_visuals.ps1 -ReferenceDir .\visual_refs -CaptureDir .\visual_captures -ReportDir .\visual_report
powershell -ExecutionPolicy Bypass -File .\tools\interaction_smoke.ps1 -ExePath .\build\Release\fluent_imgui_demo_dx11.exe -OutDir .\visual_interactions

visual_refs/、visual_captures/、visual_report/、visual_interactions/ 都是本地验证目录，不会提交到仓库。

文档

• 快速开始
• API 概览
• DX11 demo 与验证

目录结构

include/fluent_imgui/   公共头文件
src/                    库实现
examples/dx11_demo/     Windows + DirectX 11 示例
tests/                  单元测试
tools/                  本地截图、视觉对比和交互 smoke 脚本
docs/                   中文文档和截图资产

FAQ

这个库是否包含 Dear ImGui？ 默认会通过 CMake FetchContent 拉取固定版本 Dear ImGui。外部项目也可以设置 FLUENT_IMGUI_USE_SYSTEM_IMGUI=ON 复用已有 ImGui target。

是否只能在 Windows 使用？ 核心库不绑定平台；当前 demo 只覆盖 Windows + DirectX 11。OpenGL/Vulkan/SDL/GLFW 示例可以后续添加。

是否复制了某个商业 UI 库？ 没有。该项目是独立实现，只复刻 Fluent 风格和常见组件行为，不包含第三方商品源码、Logo 或原始素材。

为什么首个版本是 0.1.0？ 当前 API 已可用于实验性接入，但仍处于早期版本。后续会继续补充示例、install package config 和更多后端 demo。

许可证

本项目使用 MIT License。第三方依赖和字体说明见 NOTICE.md。