first

2025-12-04 19:11:29 +08:00
commit bb600bbbc4
2741 changed files with 364700 additions and 0 deletions
@@ -0,0 +1,108 @@
+cmake_minimum_required(VERSION 3.5)
+
+project(ElaWidgetToolsExample VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_AUTOUIC ON)
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+add_compile_options("$<$<CXX_COMPILER_ID:MSVC>:/utf-8>")
+
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Widgets)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Widgets)
+
+FILE(GLOB ORIGIN *.cpp *.h)
+FILE(GLOB MODELVIEW ModelView/*.h ModelView/*.cpp)
+FILE(GLOB EAXMPLEPAGE ExamplePage/*.h ExamplePage/*.cpp)
+
+source_group(ModelView FILES ${MODELVIEW})
+source_group(ExamplePage FILES ${EAXMPLEPAGE})
+
+
+set(PROJECT_SOURCES
+    ${ORIGIN}
+    ${MODELVIEW}
+    ${EAXMPLEPAGE}
+)
+
+if (${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+    qt_add_executable(ElaWidgetToolsExample
+        MANUAL_FINALIZATION
+        ${PROJECT_SOURCES}
+    )
+
+    #遍历所有资源文件
+    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.js)
+    foreach (filepath ${RES_PATHS})
+        string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
+        list(APPEND resource_files ${filename})
+    endforeach (filepath)
+
+    qt_add_resources(${PROJECT_NAME} "ElaWidgetToolsExample"
+        RESOURCES PREFIX "/"
+        FILES
+        ${resource_files}
+    )
+    # Define target properties for Android with Qt 6 as:
+    #    set_property(TARGET ElaWidgetToolsExample APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR
+    #                 ${CMAKE_CURRENT_SOURCE_DIR}/android)
+    # For more information, see https://doc.qt.io/qt-6/qt-add-executable.html#target-creation
+else ()
+    if (ANDROID)
+        add_library(ElaWidgetToolsExample SHARED
+            ${PROJECT_SOURCES}
+        )
+        # Define properties for Android with Qt 5 after find_package() calls as:
+        #    set(ANDROID_PACKAGE_SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/android")
+    else ()
+        qt5_add_big_resources(PROJECT_SOURCES
+            ../src/include/ElaWidgetTools.qrc
+            ElaWidgetToolsExample.qrc
+        )
+        add_executable(ElaWidgetToolsExample
+            ${PROJECT_SOURCES}
+        )
+    endif ()
+endif ()
+
+list(APPEND CMAKE_PREFIX_PATH ${CMAKE_SOURCE_DIR}/install/lib/cmake/)
+find_package(ElaWidgetTools REQUIRED)
+if (ELAWIDGETTOOLS_FOUND)
+    message(STATUS "ELAWIDGETTOOLS_INCLUDE_DIR = ${ELAWIDGETTOOLS_INCLUDE_DIRS}")
+    message(STATUS "ELAWIDGETTOOLS_LIBRARIES = ${ELAWIDGETTOOLS_LIBRARIES}")
+    message(STATUS "ELAWIDGETTOOLS_LIB_DIR = ${ELAWIDGETTOOLS_LIBRARY_DIRS}")
+endif ()
+set(EXECUTABLE_OUTPUT_PATH ${CMAKE_BINARY_DIR})
+target_include_directories(ElaWidgetToolsExample PUBLIC
+    ${ELAWIDGETTOOLS_INCLUDE_DIRS}
+    ExamplePage
+    ModelView
+)
+target_link_libraries(ElaWidgetToolsExample PRIVATE
+    Qt${QT_VERSION_MAJOR}::Widgets
+    ElaWidgetTools
+)
+target_link_directories(ElaWidgetToolsExample PUBLIC
+    ${ELAWIDGETTOOLS_LIBRARY_DIRS}
+)
+
+# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
+# If you are developing for iOS or macOS you should consider setting an
+# explicit, fixed bundle identifier manually though.
+if (${QT_VERSION} VERSION_LESS 6.1.0)
+    set(BUNDLE_ID_OPTION MACOSX_BUNDLE_GUI_IDENTIFIER com.example.ElaWidgetToolsExample)
+endif ()
+set_target_properties(ElaWidgetToolsExample PROPERTIES
+    ${BUNDLE_ID_OPTION}
+    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+    MACOSX_BUNDLE TRUE
+    WIN32_EXECUTABLE TRUE
+)
+
+if (QT_VERSION_MAJOR EQUAL 6)
+    qt_finalize_executable(ElaWidgetToolsExample)
+endif ()
@@ -0,0 +1,124 @@
+<RCC>
+    <qresource prefix="/">
+        <file>Resource/Image/control/Acrylic.png</file>
+        <file>Resource/Image/control/AnimatedIcon.png</file>
+        <file>Resource/Image/control/AnimatedVisualPlayer.png</file>
+        <file>Resource/Image/control/AnimationInterop.png</file>
+        <file>Resource/Image/control/AppBarButton.png</file>
+        <file>Resource/Image/control/AppBarSeparator.png</file>
+        <file>Resource/Image/control/AppBarToggleButton.png</file>
+        <file>Resource/Image/control/AutomationProperties.png</file>
+        <file>Resource/Image/control/AutoSuggestBox.png</file>
+        <file>Resource/Image/control/Border.png</file>
+        <file>Resource/Image/control/BreadcrumbBar.png</file>
+        <file>Resource/Image/control/Button.png</file>
+        <file>Resource/Image/control/CalendarDatePicker.png</file>
+        <file>Resource/Image/control/CalendarView.png</file>
+        <file>Resource/Image/control/Canvas.png</file>
+        <file>Resource/Image/control/Checkbox.png</file>
+        <file>Resource/Image/control/Clipboard.png</file>
+        <file>Resource/Image/control/ColorPaletteResources.png</file>
+        <file>Resource/Image/control/ColorPicker.png</file>
+        <file>Resource/Image/control/ComboBox.png</file>
+        <file>Resource/Image/control/CommandBar.png</file>
+        <file>Resource/Image/control/CommandBarFlyout.png</file>
+        <file>Resource/Image/control/CompactSizing.png</file>
+        <file>Resource/Image/control/ConnectedAnimation.png</file>
+        <file>Resource/Image/control/ContentDialog.png</file>
+        <file>Resource/Image/control/CreateMultipleWindows.png</file>
+        <file>Resource/Image/control/DataGrid.png</file>
+        <file>Resource/Image/control/DatePicker.png</file>
+        <file>Resource/Image/control/DropDownButton.png</file>
+        <file>Resource/Image/control/EasingFunction.png</file>
+        <file>Resource/Image/control/Expander.png</file>
+        <file>Resource/Image/control/FilePicker.png</file>
+        <file>Resource/Image/control/FlipView.png</file>
+        <file>Resource/Image/control/Flyout.png</file>
+        <file>Resource/Image/control/Grid.png</file>
+        <file>Resource/Image/control/GridView.png</file>
+        <file>Resource/Image/control/HyperlinkButton.png</file>
+        <file>Resource/Image/control/IconElement.png</file>
+        <file>Resource/Image/control/Image.png</file>
+        <file>Resource/Image/control/ImplicitTransition.png</file>
+        <file>Resource/Image/control/InfoBadge.png</file>
+        <file>Resource/Image/control/InfoBar.png</file>
+        <file>Resource/Image/control/InkCanvas.png</file>
+        <file>Resource/Image/control/InkToolbar.png</file>
+        <file>Resource/Image/control/InputValidation.png</file>
+        <file>Resource/Image/control/ItemsRepeater.png</file>
+        <file>Resource/Image/control/Line.png</file>
+        <file>Resource/Image/control/ListBox.png</file>
+        <file>Resource/Image/control/ListView.png</file>
+        <file>Resource/Image/control/MediaPlayerElement.png</file>
+        <file>Resource/Image/control/MenuBar.png</file>
+        <file>Resource/Image/control/MenuFlyout.png</file>
+        <file>Resource/Image/control/NavigationView.png</file>
+        <file>Resource/Image/control/NumberBox.png</file>
+        <file>Resource/Image/control/PageTransition.png</file>
+        <file>Resource/Image/control/ParallaxView.png</file>
+        <file>Resource/Image/control/PasswordBox.png</file>
+        <file>Resource/Image/control/PersonPicture.png</file>
+        <file>Resource/Image/control/PipsPager.png</file>
+        <file>Resource/Image/control/Pivot.png</file>
+        <file>Resource/Image/control/ProgressBar.png</file>
+        <file>Resource/Image/control/ProgressRing.png</file>
+        <file>Resource/Image/control/PullToRefresh.png</file>
+        <file>Resource/Image/control/RadialGradientBrush.png</file>
+        <file>Resource/Image/control/RadioButton.png</file>
+        <file>Resource/Image/control/RadioButtons.png</file>
+        <file>Resource/Image/control/RatingControl.png</file>
+        <file>Resource/Image/control/RelativePanel.png</file>
+        <file>Resource/Image/control/RepeatButton.png</file>
+        <file>Resource/Image/control/RevealFocus.png</file>
+        <file>Resource/Image/control/RichEditBox.png</file>
+        <file>Resource/Image/control/RichTextBlock.png</file>
+        <file>Resource/Image/control/ScrollViewer.png</file>
+        <file>Resource/Image/control/SemanticZoom.png</file>
+        <file>Resource/Image/control/Shape.png</file>
+        <file>Resource/Image/control/Slider.png</file>
+        <file>Resource/Image/control/Sound.png</file>
+        <file>Resource/Image/control/SplitButton.png</file>
+        <file>Resource/Image/control/SplitView.png</file>
+        <file>Resource/Image/control/StackPanel.png</file>
+        <file>Resource/Image/control/StandardUICommand.png</file>
+        <file>Resource/Image/control/SwipeControl.png</file>
+        <file>Resource/Image/control/TabView.png</file>
+        <file>Resource/Image/control/TeachingTip.png</file>
+        <file>Resource/Image/control/TextBlock.png</file>
+        <file>Resource/Image/control/TextBox.png</file>
+        <file>Resource/Image/control/ThemeTransition.png</file>
+        <file>Resource/Image/control/TimePicker.png</file>
+        <file>Resource/Image/control/TitleBar.png</file>
+        <file>Resource/Image/control/ToggleButton.png</file>
+        <file>Resource/Image/control/ToggleSplitButton.png</file>
+        <file>Resource/Image/control/ToggleSwitch.png</file>
+        <file>Resource/Image/control/ToolTip.png</file>
+        <file>Resource/Image/control/TreeView.png</file>
+        <file>Resource/Image/control/VariableSizedWrapGrid.png</file>
+        <file>Resource/Image/control/Viewbox.png</file>
+        <file>Resource/Image/control/WebView.png</file>
+        <file>Resource/Image/control/XamlUICommand.png</file>
+        <file>Resource/Image/Cirno.jpg</file>
+        <file>Resource/Image/github.png</file>
+        <file>Resource/Image/Home_Background.png</file>
+        <file>Resource/Image/Moon.jpg</file>
+        <file>Resource/Image/Card/beach.png</file>
+        <file>Resource/Image/Card/classroom.png</file>
+        <file>Resource/Image/Card/dream.png</file>
+        <file>Resource/Image/Card/miku.png</file>
+        <file>Resource/Image/IARC/IARC_12+.svg.png</file>
+        <file>Resource/Image/IARC/IARC_16+.svg.png</file>
+        <file>Resource/Image/IARC/IARC_18+.svg.png</file>
+        <file>Resource/Image/IARC/IARC_3+.svg.png</file>
+        <file>Resource/Image/IARC/IARC_7+.svg.png</file>
+        <file>Resource/Image/Model/CollapsingWorld.jpg</file>
+        <file>Resource/Image/Model/DarkForest.jpg</file>
+        <file>Resource/Image/Model/LASTSTARDUST.jpg</file>
+        <file>Resource/Image/Model/Light.jpg</file>
+        <file>Resource/Image/Model/MaVieEnRose.jpg</file>
+        <file>Resource/Image/Model/NaightNavigationStar.jpg</file>
+        <file>Resource/Image/Model/RainMan.jpg</file>
+        <file>Resource/Image/Model/RunningInTheDark.jpg</file>
+        <file>Resource/Image/Model/STYXHELIX.jpg</file>
+    </qresource>
+</RCC>
@@ -0,0 +1,73 @@
+#include "T_About.h"
+
+#include <QHBoxLayout>
+#include <QIcon>
+#include <QVBoxLayout>
+
+#include "ElaImageCard.h"
+#include "ElaText.h"
+T_About::T_About(QWidget* parent)
+    : ElaWidget(parent)
+{
+    setWindowTitle("关于..");
+    setWindowIcon(QIcon(":/include/Image/Moon.jpg"));
+    this->setIsFixedSize(true);
+    setWindowModality(Qt::ApplicationModal);
+    setWindowButtonFlags(ElaAppBarType::CloseButtonHint);
+    ElaImageCard* pixCard = new ElaImageCard(this);
+    pixCard->setFixedSize(60, 60);
+    pixCard->setIsPreserveAspectCrop(false);
+    pixCard->setCardImage(QImage(":/include/Image/Moon.jpg"));
+
+    QVBoxLayout* pixCardLayout = new QVBoxLayout();
+    pixCardLayout->addWidget(pixCard);
+    pixCardLayout->addStretch();
+
+    ElaText* versionText = new ElaText("ElaWidgetTools-LK-2024", this);
+    QFont versionTextFont = versionText->font();
+    versionTextFont.setWeight(QFont::Bold);
+    versionText->setFont(versionTextFont);
+    versionText->setWordWrap(false);
+    versionText->setTextPixelSize(18);
+
+    ElaText* licenseText = new ElaText("MIT授权协议", this);
+    licenseText->setWordWrap(false);
+    licenseText->setTextPixelSize(14);
+    ElaText* supportText = new ElaText("Windows支持版本: QT5.12以上\nLinux支持版本: Qt5.14以上", this);
+    supportText->setWordWrap(false);
+    supportText->setTextPixelSize(14);
+    ElaText* contactText = new ElaText("作者: 8009963@qq.com\n交流群: 850243692(QQ)", this);
+    contactText->setWordWrap(false);
+    contactText->setTextInteractionFlags(Qt::TextSelectableByMouse);
+    contactText->setTextPixelSize(14);
+    ElaText* helperText = new ElaText("用户手册及API文档付费提供\n提供额外的专业技术支持", this);
+    helperText->setWordWrap(false);
+    helperText->setTextPixelSize(14);
+    ElaText* copyrightText = new ElaText("版权所有 © 2024 Liniyous", this);
+    copyrightText->setWordWrap(false);
+    copyrightText->setTextPixelSize(14);
+
+    QVBoxLayout* textLayout = new QVBoxLayout();
+    textLayout->setSpacing(15);
+    textLayout->addWidget(versionText);
+    textLayout->addWidget(licenseText);
+    textLayout->addWidget(supportText);
+    textLayout->addWidget(contactText);
+    textLayout->addWidget(helperText);
+    textLayout->addWidget(copyrightText);
+    textLayout->addStretch();
+
+    QHBoxLayout* contentLayout = new QHBoxLayout();
+    contentLayout->addSpacing(30);
+    contentLayout->addLayout(pixCardLayout);
+    contentLayout->addSpacing(30);
+    contentLayout->addLayout(textLayout);
+
+    QVBoxLayout* mainLayout = new QVBoxLayout(this);
+    mainLayout->setContentsMargins(0, 25, 0, 0);
+    mainLayout->addLayout(contentLayout);
+}
+
+T_About::~T_About()
+{
+}
@@ -0,0 +1,14 @@
+#ifndef T_ABOUT_H
+#define T_ABOUT_H
+
+#include <ElaWidget.h>
+
+class T_About : public ElaWidget
+{
+    Q_OBJECT
+public:
+    explicit T_About(QWidget* parent = nullptr);
+    ~T_About();
+};
+
+#endif // T_ABOUT_H
@@ -0,0 +1,284 @@
+#include "T_BaseComponents.h"
+
+#include <QHBoxLayout>
+#include <QVBoxLayout>
+
+#include "ElaCheckBox.h"
+#include "ElaComboBox.h"
+#include "ElaMessageButton.h"
+#include "ElaMultiSelectComboBox.h"
+#include "ElaPlainTextEdit.h"
+#include "ElaProgressBar.h"
+#include "ElaRadioButton.h"
+#include "ElaScrollPageArea.h"
+#include "ElaSlider.h"
+#include "ElaSpinBox.h"
+#include "ElaText.h"
+#include "ElaToggleButton.h"
+#include "ElaToggleSwitch.h"
+T_BaseComponents::T_BaseComponents(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("ElaBaseComponents");
+
+    // 顶部元素
+    createCustomWidget("一些常用的基础组件被放置于此，可在此界面体验其效果并按需添加进项目中");
+
+    _toggleSwitch = new ElaToggleSwitch(this);
+    ElaScrollPageArea* toggleSwitchArea = new ElaScrollPageArea(this);
+    QHBoxLayout* toggleSwitchLayout = new QHBoxLayout(toggleSwitchArea);
+    ElaText* toggleSwitchText = new ElaText("ElaToggleSwitch", this);
+    toggleSwitchText->setTextPixelSize(15);
+    toggleSwitchLayout->addWidget(toggleSwitchText);
+    toggleSwitchLayout->addWidget(_toggleSwitch);
+    toggleSwitchLayout->addStretch();
+    ElaToggleSwitch* toggleSwitchDisableSwitch = new ElaToggleSwitch(this);
+    ElaText* toggleSwitchDisableText = new ElaText("禁用", this);
+    toggleSwitchDisableText->setTextPixelSize(15);
+    connect(toggleSwitchDisableSwitch, &ElaToggleSwitch::toggled, this, [=](bool checked) {
+        _toggleSwitch->setDisabled(checked);
+    });
+    toggleSwitchLayout->addWidget(toggleSwitchDisableSwitch);
+    toggleSwitchLayout->addWidget(toggleSwitchDisableText);
+    toggleSwitchLayout->addSpacing(10);
+
+    _toggleButton = new ElaToggleButton("ToggleButton", this);
+    _toggleButton->setFixedWidth(120);
+    ElaScrollPageArea* toggleButtonArea = new ElaScrollPageArea(this);
+    QHBoxLayout* toggleButtonLayout = new QHBoxLayout(toggleButtonArea);
+    ElaText* toggleButtonText = new ElaText("ElaToggleButton", this);
+    toggleButtonText->setTextPixelSize(15);
+    toggleButtonLayout->addWidget(toggleButtonText);
+    toggleButtonLayout->addWidget(_toggleButton);
+    toggleButtonLayout->addStretch();
+    ElaToggleSwitch* toggleButtonDisableSwitch = new ElaToggleSwitch(this);
+    ElaText* toggleButtonDisableText = new ElaText("禁用", this);
+    toggleButtonDisableText->setTextPixelSize(15);
+    connect(toggleButtonDisableSwitch, &ElaToggleSwitch::toggled, this, [=](bool checked) {
+        _toggleButton->setDisabled(checked);
+    });
+    toggleButtonLayout->addWidget(toggleButtonDisableSwitch);
+    toggleButtonLayout->addWidget(toggleButtonDisableText);
+    toggleButtonLayout->addSpacing(10);
+
+    _comboBox = new ElaComboBox(this);
+    QStringList comboList{
+        "我愿投身前途未卜的群星",
+        "潜行 步伐小心翼翼",
+        "不留游走痕迹",
+        "如同一簇幽灵",
+        "所谓 道德加上伦理",
+        "抱歉只能律己"};
+    _comboBox->addItems(comboList);
+    ElaScrollPageArea* comboBoxArea = new ElaScrollPageArea(this);
+    QHBoxLayout* comboBoxLayout = new QHBoxLayout(comboBoxArea);
+    ElaText* comboBoxText = new ElaText("ElaComboBox", this);
+    comboBoxText->setTextPixelSize(15);
+    comboBoxLayout->addWidget(comboBoxText);
+    comboBoxLayout->addWidget(_comboBox);
+    comboBoxLayout->addStretch();
+    ElaToggleSwitch* comboBoxDisableSwitch = new ElaToggleSwitch(this);
+    ElaText* comboBoxDisableText = new ElaText("禁用", this);
+    comboBoxDisableText->setTextPixelSize(15);
+    connect(comboBoxDisableSwitch, &ElaToggleSwitch::toggled, this, [=](bool checked) {
+        _comboBox->setDisabled(checked);
+    });
+    comboBoxLayout->addWidget(comboBoxDisableSwitch);
+    comboBoxLayout->addWidget(comboBoxDisableText);
+    comboBoxLayout->addSpacing(10);
+
+    _multiSelectComboBox = new ElaMultiSelectComboBox(this);
+    QStringList multiComboList{"执念的鱼", "提着灯闯过远洋的甄选", "继续下潜", "无需誓言", "我的心像自沉的旧母舰", "没入深渊", "我曾凝望曾是航向的日出"};
+    QStringList multiSelectComboList{"执念的鱼", "提着灯闯过远洋的甄选", "无需誓言", "我的心像自沉的旧母舰"};
+    _multiSelectComboBox->addItems(multiComboList);
+    _multiSelectComboBox->setCurrentSelection(multiSelectComboList);
+    ElaScrollPageArea* multiSelectComboBoxArea = new ElaScrollPageArea(this);
+    QHBoxLayout* multiSelectComboBoxLayout = new QHBoxLayout(multiSelectComboBoxArea);
+    ElaText* multiSelectComboBoxText = new ElaText("ElaMutilSelectComboBox", this);
+    multiSelectComboBoxText->setTextPixelSize(15);
+    multiSelectComboBoxLayout->addWidget(multiSelectComboBoxText);
+    multiSelectComboBoxLayout->addWidget(_multiSelectComboBox);
+    multiSelectComboBoxLayout->addStretch();
+    ElaToggleSwitch* multiSelectComboBoxDisableSwitch = new ElaToggleSwitch(this);
+    ElaText* multiSelectComboBoxDisableText = new ElaText("禁用", this);
+    multiSelectComboBoxDisableText->setTextPixelSize(15);
+    connect(multiSelectComboBoxDisableSwitch, &ElaToggleSwitch::toggled, this, [=](bool checked) {
+        _multiSelectComboBox->setDisabled(checked);
+    });
+    multiSelectComboBoxLayout->addWidget(multiSelectComboBoxDisableSwitch);
+    multiSelectComboBoxLayout->addWidget(multiSelectComboBoxDisableText);
+    multiSelectComboBoxLayout->addSpacing(10);
+
+    _messageButton = new ElaMessageButton("Success", this);
+    _messageButton->setBarTitle("Success");
+    _messageButton->setBarText("点燃星 亲手点燃黑暗森林的火星 蒙昧初醒 而我却 轻声告别这新生的黎明");
+
+    _infoMessageButton = new ElaMessageButton("Info", this);
+    _infoMessageButton->setBarTitle("Information");
+    _infoMessageButton->setBarText("点燃星 亲手点燃黑暗森林的火星 蒙昧初醒 而我却 轻声告别这新生的黎明");
+    _infoMessageButton->setMessageMode(ElaMessageBarType::Information);
+    _infoMessageButton->setPositionPolicy(ElaMessageBarType::TopLeft);
+
+    _warningMessageButton = new ElaMessageButton("Warning", this);
+    _warningMessageButton->setBarTitle("Warning");
+    _warningMessageButton->setBarText("点燃星 亲手点燃黑暗森林的火星 蒙昧初醒 而我却 轻声告别这新生的黎明");
+    _warningMessageButton->setMessageMode(ElaMessageBarType::Warning);
+    _warningMessageButton->setPositionPolicy(ElaMessageBarType::BottomLeft);
+
+    _errorMessageButton = new ElaMessageButton("Error", this);
+    _errorMessageButton->setBarTitle("Error");
+    _errorMessageButton->setBarText("点燃星 亲手点燃黑暗森林的火星 蒙昧初醒 而我却 轻声告别这新生的黎明");
+    _errorMessageButton->setMessageMode(ElaMessageBarType::Error);
+    _errorMessageButton->setPositionPolicy(ElaMessageBarType::BottomRight);
+
+    ElaScrollPageArea* messageButtonArea = new ElaScrollPageArea(this);
+    QHBoxLayout* messageButtonLayout = new QHBoxLayout(messageButtonArea);
+    ElaText* messageButtonText = new ElaText("ElaMessageButton", this);
+    messageButtonText->setTextPixelSize(15);
+    messageButtonLayout->addWidget(messageButtonText);
+    messageButtonLayout->addWidget(_messageButton);
+    messageButtonLayout->addWidget(_infoMessageButton);
+    messageButtonLayout->addWidget(_warningMessageButton);
+    messageButtonLayout->addWidget(_errorMessageButton);
+    messageButtonLayout->addStretch();
+    ElaToggleSwitch* messageButtonDisableSwitch = new ElaToggleSwitch(this);
+    ElaText* messageButtonDisableText = new ElaText("禁用", this);
+    messageButtonDisableText->setTextPixelSize(15);
+    connect(messageButtonDisableSwitch, &ElaToggleSwitch::toggled, this, [=](bool checked) {
+        _messageButton->setDisabled(checked);
+        _infoMessageButton->setDisabled(checked);
+        _warningMessageButton->setDisabled(checked);
+        _errorMessageButton->setDisabled(checked);
+    });
+    messageButtonLayout->addWidget(messageButtonDisableSwitch);
+    messageButtonLayout->addWidget(messageButtonDisableText);
+    messageButtonLayout->addSpacing(10);
+
+    _checkBox = new ElaCheckBox("CheckBox", this);
+    ElaScrollPageArea* checkBoxArea = new ElaScrollPageArea(this);
+    QHBoxLayout* checkBoxLayout = new QHBoxLayout(checkBoxArea);
+    ElaText* checkBoxText = new ElaText("ElacheckBox", this);
+    checkBoxText->setTextPixelSize(15);
+    checkBoxLayout->addWidget(checkBoxText);
+    checkBoxLayout->addWidget(_checkBox);
+    checkBoxLayout->addStretch();
+    ElaToggleSwitch* checkBoxDisableSwitch = new ElaToggleSwitch(this);
+    ElaText* checkBoxDisableText = new ElaText("禁用", this);
+    checkBoxDisableText->setTextPixelSize(15);
+    connect(checkBoxDisableSwitch, &ElaToggleSwitch::toggled, this, [=](bool checked) {
+        _checkBox->setDisabled(checked);
+    });
+    checkBoxLayout->addWidget(checkBoxDisableSwitch);
+    checkBoxLayout->addWidget(checkBoxDisableText);
+    checkBoxLayout->addSpacing(10);
+
+    _spinBox = new ElaSpinBox(this);
+    ElaScrollPageArea* spinBoxArea = new ElaScrollPageArea(this);
+    QHBoxLayout* spinBoxLayout = new QHBoxLayout(spinBoxArea);
+    ElaText* spinBoxText = new ElaText("ElaSpinBox", this);
+    spinBoxText->setTextPixelSize(15);
+    spinBoxLayout->addWidget(spinBoxText);
+    spinBoxLayout->addWidget(_spinBox);
+    spinBoxLayout->addStretch();
+
+    _slider = new ElaSlider(this);
+    ElaScrollPageArea* sliderArea = new ElaScrollPageArea(this);
+    QHBoxLayout* sliderLayout = new QHBoxLayout(sliderArea);
+    ElaText* sliderText = new ElaText("ElaSlider", this);
+    sliderText->setTextPixelSize(15);
+    sliderLayout->addWidget(sliderText);
+    sliderLayout->addWidget(_slider);
+    sliderLayout->addStretch();
+
+    _radioButton = new ElaRadioButton("RadioButton", this);
+    ElaScrollPageArea* radioButtonArea = new ElaScrollPageArea(this);
+    QHBoxLayout* radioButtonLayout = new QHBoxLayout(radioButtonArea);
+    ElaText* radioButtonText = new ElaText("ElaRadioButton", this);
+    radioButtonText->setTextPixelSize(15);
+    radioButtonLayout->addWidget(radioButtonText);
+    radioButtonLayout->addWidget(_radioButton);
+    radioButtonLayout->addStretch();
+
+    _progressBar = new ElaProgressBar(this);
+    _progressBar->setMinimum(0);
+    _progressBar->setMaximum(0);
+    ElaScrollPageArea* progressBarArea = new ElaScrollPageArea(this);
+    QHBoxLayout* progressBarLayout = new QHBoxLayout(progressBarArea);
+    ElaText* progressBarText = new ElaText("ElaProgressBar", this);
+    progressBarText->setTextPixelSize(15);
+    progressBarLayout->addWidget(progressBarText);
+    progressBarLayout->addWidget(_progressBar);
+    progressBarLayout->addStretch();
+
+    ElaPlainTextEdit* edit = new ElaPlainTextEdit(this);
+    edit->setPlainText("这是一个ElaPlainTextEdit  暂时放在这里");
+
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("ElaBaseComponents");
+    QVBoxLayout* centerLayout = new QVBoxLayout(centralWidget);
+    centerLayout->addWidget(toggleSwitchArea);
+    centerLayout->addWidget(toggleButtonArea);
+    centerLayout->addWidget(comboBoxArea);
+    centerLayout->addWidget(multiSelectComboBoxArea);
+    centerLayout->addWidget(messageButtonArea);
+    centerLayout->addWidget(checkBoxArea);
+    centerLayout->addWidget(spinBoxArea);
+    centerLayout->addWidget(sliderArea);
+    centerLayout->addWidget(radioButtonArea);
+    centerLayout->addWidget(progressBarArea);
+    centerLayout->addWidget(edit);
+    centerLayout->addStretch();
+    centerLayout->setContentsMargins(0, 0, 0, 0);
+    addCentralWidget(centralWidget, true, true, 0);
+
+    ElaText* homeStack1 = new ElaText("HomeStack1", this);
+    QFont font = homeStack1->font();
+    font.setPixelSize(32);
+    homeStack1->setFont(font);
+    homeStack1->setAlignment(Qt::AlignCenter);
+    homeStack1->setWindowTitle("HomeStack1");
+    addCentralWidget(homeStack1);
+    ElaText* homeStack2 = new ElaText("HomeStack2", this);
+    homeStack2->setFont(font);
+    homeStack2->setAlignment(Qt::AlignCenter);
+    homeStack2->setWindowTitle("HomeStack2");
+    addCentralWidget(homeStack2);
+}
+
+T_BaseComponents::~T_BaseComponents()
+{
+}
+
+void T_BaseComponents::mouseReleaseEvent(QMouseEvent* event)
+{
+    switch (event->button())
+    {
+    case Qt::LeftButton:
+    {
+        //ElaMessageBar::success(ElaMessageBarType::TopRight, "Success", "Never Close Your Eyes", 2500);
+        //ElaMessageBar::success(ElaMessageBarType::TopRight, "Success", "Never Close Your Eyes", 1500);
+        break;
+    }
+    case Qt::BackButton:
+    {
+        this->navigation(0);
+        break;
+    }
+    case Qt::ForwardButton:
+    {
+        this->navigation(1);
+        break;
+    }
+    case Qt::MiddleButton:
+    {
+        this->navigation(2);
+        break;
+    }
+    default:
+    {
+        break;
+    }
+    }
+    ElaScrollPage::mouseReleaseEvent(event);
+}
@@ -0,0 +1,42 @@
+#ifndef T_BASECOMPONENTS_H
+#define T_BASECOMPONENTS_H
+
+#include "T_BasePage.h"
+
+class ElaToggleSwitch;
+class ElaToggleButton;
+class ElaComboBox;
+class ElaMultiSelectComboBox;
+class ElaMessageButton;
+class ElaCheckBox;
+class ElaSpinBox;
+class ElaSlider;
+class ElaRadioButton;
+class ElaProgressBar;
+class T_BaseComponents : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_BaseComponents(QWidget* parent = nullptr);
+    ~T_BaseComponents();
+
+protected:
+    virtual void mouseReleaseEvent(QMouseEvent* event);
+
+private:
+    ElaToggleSwitch* _toggleSwitch{nullptr};
+    ElaToggleButton* _toggleButton{nullptr};
+    ElaComboBox* _comboBox{nullptr};
+    ElaMultiSelectComboBox* _multiSelectComboBox{nullptr};
+    ElaMessageButton* _messageButton{nullptr};
+    ElaMessageButton* _infoMessageButton{nullptr};
+    ElaMessageButton* _warningMessageButton{nullptr};
+    ElaMessageButton* _errorMessageButton{nullptr};
+    ElaCheckBox* _checkBox{nullptr};
+    ElaSpinBox* _spinBox{nullptr};
+    ElaSlider* _slider{nullptr};
+    ElaRadioButton* _radioButton{nullptr};
+    ElaProgressBar* _progressBar{nullptr};
+};
+
+#endif // T_BASECOMPONENTS_H
@@ -0,0 +1,85 @@
+#include "T_BasePage.h"
+
+#include <QHBoxLayout>
+#include <QVBoxLayout>
+
+#include "ElaMenu.h"
+#include "ElaText.h"
+#include "ElaTheme.h"
+#include "ElaToolButton.h"
+T_BasePage::T_BasePage(QWidget* parent)
+    : ElaScrollPage(parent)
+{
+    connect(eTheme, &ElaTheme::themeModeChanged, this, [=]() {
+        if (!parent)
+        {
+            update();
+        }
+    });
+}
+
+T_BasePage::~T_BasePage()
+{
+}
+
+void T_BasePage::createCustomWidget(QString desText)
+{
+    // 顶部元素
+    QWidget* customWidget = new QWidget(this);
+    ElaText* subTitleText = new ElaText(this);
+    subTitleText->setText("https://github.com/Liniyous/ElaWidgetTools");
+    subTitleText->setTextInteractionFlags(Qt::TextSelectableByMouse);
+    subTitleText->setTextPixelSize(11);
+
+    ElaToolButton* documentationButton = new ElaToolButton(this);
+    documentationButton->setFixedHeight(35);
+    documentationButton->setIsTransparent(false);
+    documentationButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
+    //_toolButton->setPopupMode(QToolButton::MenuButtonPopup);
+    documentationButton->setText("Documentation");
+    documentationButton->setElaIcon(ElaIconType::FileDoc);
+    ElaMenu* documentationMenu = new ElaMenu(this);
+    documentationMenu->addElaIconAction(ElaIconType::CardsBlank, "CardsBlank");
+    documentationMenu->addElaIconAction(ElaIconType::EarthAmericas, "EarthAmericas");
+    documentationButton->setMenu(documentationMenu);
+
+    ElaToolButton* sourceButton = new ElaToolButton(this);
+    sourceButton->setFixedHeight(35);
+    sourceButton->setIsTransparent(false);
+    sourceButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
+    sourceButton->setText("Source");
+    sourceButton->setElaIcon(ElaIconType::NfcSymbol);
+    ElaMenu* sourceMenu = new ElaMenu(this);
+    sourceMenu->addElaIconAction(ElaIconType::FireBurner, "FireBurner");
+    sourceMenu->addElaIconAction(ElaIconType::Galaxy, "Galaxy~~~~");
+    sourceButton->setMenu(sourceMenu);
+
+    ElaToolButton* themeButton = new ElaToolButton(this);
+    themeButton->setFixedSize(35, 35);
+    themeButton->setIsTransparent(false);
+    themeButton->setElaIcon(ElaIconType::MoonStars);
+    connect(themeButton, &ElaToolButton::clicked, this, [=]() {
+        eTheme->setThemeMode(eTheme->getThemeMode() == ElaThemeType::Light ? ElaThemeType::Dark : ElaThemeType::Light);
+    });
+
+    QHBoxLayout* buttonLayout = new QHBoxLayout();
+    buttonLayout->addWidget(documentationButton);
+    buttonLayout->addSpacing(5);
+    buttonLayout->addWidget(sourceButton);
+    buttonLayout->addStretch();
+    buttonLayout->addWidget(themeButton);
+    buttonLayout->addSpacing(15);
+
+    ElaText* descText = new ElaText(this);
+    descText->setText(desText);
+    descText->setTextPixelSize(13);
+
+    QVBoxLayout* topLayout = new QVBoxLayout(customWidget);
+    topLayout->setContentsMargins(0, 0, 0, 0);
+    topLayout->addWidget(subTitleText);
+    topLayout->addSpacing(5);
+    topLayout->addLayout(buttonLayout);
+    topLayout->addSpacing(5);
+    topLayout->addWidget(descText);
+    setCustomWidget(customWidget);
+}
@@ -0,0 +1,18 @@
+#ifndef T_BASEPAGE_H
+#define T_BASEPAGE_H
+
+#include <ElaScrollPage.h>
+
+class QVBoxLayout;
+class T_BasePage : public ElaScrollPage
+{
+    Q_OBJECT
+public:
+    explicit T_BasePage(QWidget* parent = nullptr);
+    ~T_BasePage();
+
+protected:
+    void createCustomWidget(QString desText);
+};
+
+#endif // T_BASEPAGE_H
@@ -0,0 +1,83 @@
+#include "T_Card.h"
+
+#include <QVBoxLayout>
+
+#include "ElaLCDNumber.h"
+#include "ElaPromotionCard.h"
+#include "ElaPromotionView.h"
+T_Card::T_Card(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("ElaCard");
+
+    // 顶部元素
+    createCustomWidget("一些常用的卡片组件被放置于此，可在此界面体验其效果并按需添加进项目中");
+
+    _lcdNumber = new ElaLCDNumber(this);
+    _lcdNumber->setIsUseAutoClock(true);
+    _lcdNumber->setIsTransparent(false);
+    //    _lcdNumber->setAutoClockFormat("hh:mm:ss");
+    _lcdNumber->setFixedHeight(100);
+
+    _promotionCard = new ElaPromotionCard(this);
+    _promotionCard->setFixedSize(600, 300);
+    _promotionCard->setCardPixmap(QPixmap(":/Resource/Image/Card/miku.png"));
+    _promotionCard->setCardTitle("MiKu");
+    _promotionCard->setPromotionTitle("SONG~");
+    _promotionCard->setTitle("STYX HELIX");
+    _promotionCard->setSubTitle("Never close your eyes, Searching for a true fate");
+
+    _promotionView = new ElaPromotionView(this);
+
+    ElaPromotionCard* exampleCard1 = new ElaPromotionCard(this);
+    exampleCard1->setCardPixmap(QPixmap(":/Resource/Image/Card/miku.png"));
+    exampleCard1->setCardTitle("MiKu");
+    exampleCard1->setPromotionTitle("SONG~");
+    exampleCard1->setTitle("STYX HELIX");
+    exampleCard1->setSubTitle("Never close your eyes, Searching for a true fate");
+
+    ElaPromotionCard* exampleCard2 = new ElaPromotionCard(this);
+    exampleCard2->setCardPixmap(QPixmap(":/Resource/Image/Card/beach.png"));
+    exampleCard2->setCardTitle("Beach");
+    exampleCard2->setPromotionTitle("SONG~");
+    exampleCard2->setTitle("STYX HELIX");
+    exampleCard2->setSubTitle("Never close your eyes, Searching for a true fate");
+
+    ElaPromotionCard* exampleCard3 = new ElaPromotionCard(this);
+    exampleCard3->setCardPixmap(QPixmap(":/Resource/Image/Card/dream.png"));
+    exampleCard3->setCardTitle("Dream");
+    exampleCard3->setPromotionTitle("SONG~");
+    exampleCard3->setTitle("STYX HELIX");
+    exampleCard3->setSubTitle("Never close your eyes, Searching for a true fate");
+
+    ElaPromotionCard* exampleCard4 = new ElaPromotionCard(this);
+    exampleCard4->setCardPixmap(QPixmap(":/Resource/Image/Card/classroom.png"));
+    exampleCard4->setCardTitle("Classroom");
+    exampleCard4->setPromotionTitle("SONG~");
+    exampleCard4->setTitle("STYX HELIX");
+    exampleCard4->setSubTitle("Never close your eyes, Searching for a true fate");
+
+    _promotionView->appendPromotionCard(exampleCard1);
+    _promotionView->appendPromotionCard(exampleCard2);
+    _promotionView->appendPromotionCard(exampleCard3);
+    _promotionView->appendPromotionCard(exampleCard4);
+    _promotionView->setIsAutoScroll(true);
+
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("ElaCard");
+    QVBoxLayout* centerLayout = new QVBoxLayout(centralWidget);
+    centerLayout->setContentsMargins(0, 0, 0, 0);
+    centerLayout->addWidget(_lcdNumber);
+    centerLayout->addSpacing(20);
+    centerLayout->addWidget(_promotionCard);
+    centerLayout->addSpacing(20);
+    centerLayout->addWidget(_promotionView);
+    centerLayout->addSpacing(100);
+    centerLayout->addStretch();
+    addCentralWidget(centralWidget, true, true, 0);
+}
+
+T_Card::~T_Card()
+{
+}
@@ -0,0 +1,22 @@
+#ifndef T_CARD_H
+#define T_CARD_H
+
+#include "T_BasePage.h"
+
+class ElaLCDNumber;
+class ElaPromotionCard;
+class ElaPromotionView;
+class T_Card : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_Card(QWidget* parent = nullptr);
+    ~T_Card();
+
+private:
+    ElaLCDNumber* _lcdNumber{nullptr};
+    ElaPromotionCard* _promotionCard{nullptr};
+    ElaPromotionView* _promotionView{nullptr};
+};
+
+#endif // T_CARD_H
@@ -0,0 +1,86 @@
+#include "T_ElaScreen.h"
+
+#include "ElaToggleButton.h"
+#ifdef Q_OS_WIN
+#include <QVBoxLayout>
+
+#include "ElaComboBox.h"
+#include "ElaDxgiManager.h"
+#include "ElaText.h"
+T_ElaScreen::T_ElaScreen(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("ElaScreen");
+
+    // 顶部元素
+    createCustomWidget("DXGI录制组件被放置于此，可在此界面预览录制效果");
+
+    ElaDxgiManager* dxgiManager = ElaDxgiManager::getInstance();
+    dxgiManager->setGrabArea(1920, 1080);
+
+    _dxgiScreen = new ElaDxgiScreen(this);
+    _dxgiScreen->setIsSyncGrabSize(true);
+
+    ElaText* dxText = new ElaText("显卡选择", this);
+    dxText->setTextPixelSize(15);
+    _dxComboBox = new ElaComboBox(this);
+    _dxComboBox->addItems(dxgiManager->getDxDeviceList());
+    _dxComboBox->setCurrentIndex(dxgiManager->getDxDeviceID());
+
+    ElaText* outputText = new ElaText("屏幕选择", this);
+    outputText->setTextPixelSize(15);
+    _outputComboBox = new ElaComboBox(this);
+    _outputComboBox->addItems(dxgiManager->getOutputDeviceList());
+    _outputComboBox->setCurrentIndex(dxgiManager->getOutputDeviceID());
+
+    connect(_dxComboBox, QOverload<int>::of(&ElaComboBox::currentIndexChanged), this, [=](int index) {
+        dxgiManager->setDxDeviceID(index);
+        _outputComboBox->blockSignals(true);
+        _outputComboBox->clear();
+        _outputComboBox->addItems(dxgiManager->getOutputDeviceList());
+        _outputComboBox->setCurrentIndex(dxgiManager->getOutputDeviceID());
+        _outputComboBox->blockSignals(false);
+        _dxgiScreen->update();
+    });
+    connect(_outputComboBox, QOverload<int>::of(&ElaComboBox::currentIndexChanged), this, [=](int index) {
+        dxgiManager->setOutputDeviceID(index);
+        _dxgiScreen->update();
+    });
+
+    ElaToggleButton* startButton = new ElaToggleButton("捕获", this);
+    connect(startButton, &ElaToggleButton::toggled, this, [=](bool isToggled) {
+        if (isToggled)
+        {
+            dxgiManager->startGrabScreen();
+        }
+        else
+        {
+            dxgiManager->stopGrabScreen();
+            _dxgiScreen->update();
+        }
+    });
+
+    QHBoxLayout* comboBoxLayout = new QHBoxLayout();
+    comboBoxLayout->addWidget(dxText);
+    comboBoxLayout->addWidget(_dxComboBox);
+    comboBoxLayout->addSpacing(10);
+    comboBoxLayout->addWidget(outputText);
+    comboBoxLayout->addWidget(_outputComboBox);
+    comboBoxLayout->addWidget(startButton);
+    comboBoxLayout->addStretch();
+
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("ElaScreen");
+    QVBoxLayout* centerLayout = new QVBoxLayout(centralWidget);
+    centerLayout->setContentsMargins(0, 0, 0, 0);
+    centerLayout->addLayout(comboBoxLayout);
+    centerLayout->addWidget(_dxgiScreen);
+
+    addCentralWidget(centralWidget, false, true);
+}
+
+T_ElaScreen::~T_ElaScreen()
+{
+}
+#endif
@@ -0,0 +1,22 @@
+#ifndef T_ELASCREEN_H
+#define T_ELASCREEN_H
+#include <QWidget>
+
+#include "T_BasePage.h"
+#ifdef Q_OS_WIN
+class ElaDxgiScreen;
+class ElaComboBox;
+class T_ElaScreen : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_ElaScreen(QWidget* parent = nullptr);
+    ~T_ElaScreen();
+
+private:
+    ElaDxgiScreen* _dxgiScreen{nullptr};
+    ElaComboBox* _dxComboBox{nullptr};
+    ElaComboBox* _outputComboBox{nullptr};
+};
+#endif
+#endif // T_ELASCREEN_H
@@ -0,0 +1,49 @@
+#include "T_Graphics.h"
+
+#include <QHBoxLayout>
+#include <QVBoxLayout>
+
+#include "ElaGraphicsItem.h"
+#include "ElaGraphicsScene.h"
+#include "ElaGraphicsView.h"
+T_Graphics::T_Graphics(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("ElaGraphics");
+    // 顶部元素
+    createCustomWidget("图形视图框架被放置于此，可在此界面体验其效果，按住Ctrl进行缩放，按住Shitf进行连接");
+
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("ElaGraphics");
+
+    // GraphicsView
+    ElaGraphicsScene* scene = new ElaGraphicsScene(this);
+    scene->setSceneRect(0, 0, 1500, 1500);
+    ElaGraphicsItem* item1 = new ElaGraphicsItem();
+    item1->setWidth(100);
+    item1->setHeight(100);
+    item1->setMaxLinkPortCount(100);
+    item1->setMaxLinkPortCount(1);
+    ElaGraphicsItem* item2 = new ElaGraphicsItem();
+    item2->setWidth(100);
+    item2->setHeight(100);
+    scene->addItem(item1);
+    scene->addItem(item2);
+    ElaGraphicsView* view = new ElaGraphicsView(scene);
+    view->setScene(scene);
+    view->setFixedHeight(600);
+    QHBoxLayout* viewLayout = new QHBoxLayout();
+    viewLayout->setContentsMargins(0, 0, 12, 0);
+    viewLayout->addWidget(view);
+
+    QVBoxLayout* centerVLayout = new QVBoxLayout(centralWidget);
+    centerVLayout->setContentsMargins(0, 0, 0, 0);
+    centerVLayout->addLayout(viewLayout);
+    centerVLayout->addStretch();
+    addCentralWidget(centralWidget, true, false, 0);
+}
+
+T_Graphics::~T_Graphics()
+{
+}
@@ -0,0 +1,14 @@
+#ifndef T_GRAPHICS_H
+#define T_GRAPHICS_H
+
+#include "T_BasePage.h"
+
+class T_Graphics : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_Graphics(QWidget* parent = nullptr);
+    ~T_Graphics();
+};
+
+#endif // T_GRAPHICS_H
@@ -0,0 +1,240 @@
+#include "T_Home.h"
+
+#include <QDebug>
+#include <QDesktopServices>
+#include <QHBoxLayout>
+#include <QMouseEvent>
+#include <QPainter>
+#include <QVBoxLayout>
+
+#include "ElaAcrylicUrlCard.h"
+#include "ElaFlowLayout.h"
+#include "ElaImageCard.h"
+#include "ElaMenu.h"
+#include "ElaMessageBar.h"
+#include "ElaNavigationRouter.h"
+#include "ElaPopularCard.h"
+#include "ElaScrollArea.h"
+#include "ElaText.h"
+#include "ElaToolTip.h"
+T_Home::T_Home(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("Home");
+
+    setTitleVisible(false);
+    setContentsMargins(2, 2, 0, 0);
+    // 标题卡片区域
+    ElaText* desText = new ElaText("FluentUI For QWidget", this);
+    desText->setTextPixelSize(18);
+    ElaText* titleText = new ElaText("ElaWidgetTools", this);
+    titleText->setTextPixelSize(35);
+
+    QVBoxLayout* titleLayout = new QVBoxLayout();
+    titleLayout->setContentsMargins(30, 60, 0, 0);
+    titleLayout->addWidget(desText);
+    titleLayout->addWidget(titleText);
+
+    ElaImageCard* backgroundCard = new ElaImageCard(this);
+    backgroundCard->setBorderRadius(10);
+    backgroundCard->setFixedHeight(400);
+    backgroundCard->setMaximumAspectRatio(1.7);
+    backgroundCard->setCardImage(QImage(":/Resource/Image/Home_Background.png"));
+
+    ElaAcrylicUrlCard* urlCard1 = new ElaAcrylicUrlCard(this);
+    urlCard1->setCardPixmapSize(QSize(62, 62));
+    urlCard1->setFixedSize(195, 225);
+    urlCard1->setTitlePixelSize(17);
+    urlCard1->setTitleSpacing(25);
+    urlCard1->setSubTitleSpacing(13);
+    urlCard1->setUrl("https://github.com/Liniyous/ElaWidgetTools");
+    urlCard1->setCardPixmap(QPixmap(":/Resource/Image/github.png"));
+    urlCard1->setTitle("ElaTool Github");
+    urlCard1->setSubTitle("Use ElaWidgetTools To Create A Cool Project");
+    ElaToolTip* urlCard1ToolTip = new ElaToolTip(urlCard1);
+    urlCard1ToolTip->setToolTip("https://github.com/Liniyous/ElaWidgetTools");
+    ElaAcrylicUrlCard* urlCard2 = new ElaAcrylicUrlCard(this);
+    urlCard2->setCardPixmapSize(QSize(62, 62));
+    urlCard2->setFixedSize(195, 225);
+    urlCard2->setTitlePixelSize(17);
+    urlCard2->setTitleSpacing(25);
+    urlCard2->setSubTitleSpacing(13);
+    urlCard2->setUrl("https://space.bilibili.com/21256707");
+    urlCard2->setCardPixmap(QPixmap(":/Resource/Image/Moon.jpg"));
+    urlCard2->setTitle("ElaWidgetTool");
+    urlCard2->setSubTitle("8009963@qq.com");
+
+    ElaScrollArea* cardScrollArea = new ElaScrollArea(this);
+    cardScrollArea->setWidgetResizable(true);
+    cardScrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    cardScrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    cardScrollArea->setIsGrabGesture(true, 0);
+    cardScrollArea->setIsOverShoot(Qt::Horizontal, true);
+    QWidget* cardScrollAreaWidget = new QWidget(this);
+    cardScrollAreaWidget->setStyleSheet("background-color:transparent;");
+    cardScrollArea->setWidget(cardScrollAreaWidget);
+    QHBoxLayout* urlCardLayout = new QHBoxLayout();
+    urlCardLayout->setSpacing(15);
+    urlCardLayout->setContentsMargins(30, 0, 0, 6);
+    urlCardLayout->addWidget(urlCard1);
+    urlCardLayout->addWidget(urlCard2);
+    urlCardLayout->addStretch();
+    QVBoxLayout* cardScrollAreaWidgetLayout = new QVBoxLayout(cardScrollAreaWidget);
+    cardScrollAreaWidgetLayout->setContentsMargins(0, 0, 0, 0);
+    cardScrollAreaWidgetLayout->addStretch();
+    cardScrollAreaWidgetLayout->addLayout(urlCardLayout);
+
+    QVBoxLayout* backgroundLayout = new QVBoxLayout(backgroundCard);
+    backgroundLayout->setContentsMargins(0, 0, 0, 0);
+    backgroundLayout->addLayout(titleLayout);
+    backgroundLayout->addWidget(cardScrollArea);
+
+    // 推荐卡片
+    ElaText* flowText = new ElaText("热门免费应用", this);
+    flowText->setTextPixelSize(20);
+    QHBoxLayout* flowTextLayout = new QHBoxLayout();
+    flowTextLayout->setContentsMargins(33, 0, 0, 0);
+    flowTextLayout->addWidget(flowText);
+    // ElaFlowLayout
+    ElaPopularCard* homeCard = new ElaPopularCard(this);
+    connect(homeCard, &ElaPopularCard::popularCardButtonClicked, this, [=]() {
+        QDesktopServices::openUrl(QUrl("https://github.com/Liniyous/ElaWidgetTools"));
+    });
+    homeCard->setCardPixmap(QPixmap(":/Resource/Image/Cirno.jpg"));
+    homeCard->setTitle("ElaWidgetTool");
+    homeCard->setSubTitle("5.0⭐ 实用程序与工具");
+    homeCard->setInteractiveTips("免费下载");
+    homeCard->setDetailedText("ElaWidgetTools致力于为QWidget用户提供一站式的外观和实用功能解决方案,只需数十MB内存和极少CPU占用以支持高效而美观的界面开发");
+    homeCard->setCardFloatPixmap(QPixmap(":/Resource/Image/IARC/IARC_7+.svg.png"));
+
+    ElaPopularCard* homeCard1 = new ElaPopularCard(this);
+    connect(homeCard1, &ElaPopularCard::popularCardButtonClicked, this, [=]() { Q_EMIT elaScreenNavigation(); });
+    homeCard1->setTitle("ElaScreen");
+    homeCard1->setSubTitle("5.0⭐ 实用程序与工具");
+    homeCard1->setCardPixmap(QPixmap(":/Resource/Image/control/AutomationProperties.png"));
+    homeCard1->setInteractiveTips("免费使用");
+    homeCard1->setDetailedText("使用ElaDxgiManager获取屏幕的实时数据，以QImage的形式处理数据，支持切换采集设备和输出设备。");
+    homeCard1->setCardFloatPixmap(QPixmap(":/Resource/Image/IARC/IARC_7+.svg.png"));
+
+    ElaPopularCard* homeCard2 = new ElaPopularCard(this);
+    connect(homeCard2, &ElaPopularCard::popularCardButtonClicked, this, [=]() { Q_EMIT elaSceneNavigation(); });
+    homeCard2->setTitle("ElaScene");
+    homeCard2->setSubTitle("5.0⭐ 实用程序与工具");
+    homeCard2->setCardPixmap(QPixmap(":/Resource/Image/control/Canvas.png"));
+    homeCard2->setInteractiveTips("免费使用");
+    homeCard2->setDetailedText("使用ElaScene封装的高集成度API进行快速拓扑绘图开发，对基于连接的网络拓扑特化处理。");
+    homeCard2->setCardFloatPixmap(QPixmap(":/Resource/Image/IARC/IARC_7+.svg.png"));
+
+    ElaPopularCard* homeCard3 = new ElaPopularCard(this);
+    connect(homeCard3, &ElaPopularCard::popularCardButtonClicked, this, [=]() { Q_EMIT elaBaseComponentNavigation(); });
+    homeCard3->setTitle("ElaBaseComponent");
+    homeCard3->setSubTitle("5.0⭐ 实用程序与工具");
+    homeCard3->setCardPixmap(QPixmap(":/Resource/Image/control/StandardUICommand.png"));
+    homeCard3->setInteractiveTips("免费使用");
+    homeCard3->setDetailedText("添加ElaBaseComponent页面中的基础组件到你的项目中以进行快捷开发，使用方便，结构整洁，API规范");
+    homeCard3->setCardFloatPixmap(QPixmap(":/Resource/Image/IARC/IARC_7+.svg.png"));
+
+    ElaPopularCard* homeCard4 = new ElaPopularCard(this);
+    connect(homeCard4, &ElaPopularCard::popularCardButtonClicked, this, [=]() { Q_EMIT elaCardNavigation(); });
+    homeCard4->setTitle("ElaCard");
+    homeCard4->setSubTitle("5.0⭐ 实用程序与工具");
+    homeCard4->setCardPixmap(QPixmap(":/Resource/Image/control/FlipView.png"));
+    homeCard4->setInteractiveTips("免费使用");
+    homeCard4->setDetailedText("使用ElaCard系列组件，包括促销卡片和促销卡片视窗来快速建立循环动画。");
+    homeCard4->setCardFloatPixmap(QPixmap(":/Resource/Image/IARC/IARC_7+.svg.png"));
+
+    ElaPopularCard* homeCard5 = new ElaPopularCard(this);
+    connect(homeCard5, &ElaPopularCard::popularCardButtonClicked, this, [=]() { Q_EMIT elaIconNavigation(); });
+    homeCard5->setTitle("ElaIcon");
+    homeCard5->setSubTitle("5.0⭐ 实用程序与工具");
+    homeCard5->setCardPixmap(QPixmap(":/Resource/Image/control/CommandBarFlyout.png"));
+    homeCard5->setInteractiveTips("免费使用");
+    homeCard5->setDetailedText("在该界面快速挑选你喜欢的图标应用到项目中，以枚举的形式使用它");
+    homeCard5->setCardFloatPixmap(QPixmap(":/Resource/Image/IARC/IARC_7+.svg.png"));
+
+    ElaFlowLayout* flowLayout = new ElaFlowLayout(0, 5, 5);
+    flowLayout->setContentsMargins(30, 0, 0, 0);
+    flowLayout->setIsAnimation(true);
+    flowLayout->addWidget(homeCard);
+    flowLayout->addWidget(homeCard1);
+    flowLayout->addWidget(homeCard2);
+    flowLayout->addWidget(homeCard3);
+    flowLayout->addWidget(homeCard4);
+    flowLayout->addWidget(homeCard5);
+
+    // 菜单
+    _homeMenu = new ElaMenu(this);
+    ElaMenu* checkMenu = _homeMenu->addMenu(ElaIconType::Cubes, "查看");
+    checkMenu->addAction("查看1");
+    checkMenu->addAction("查看2");
+    checkMenu->addAction("查看3");
+    checkMenu->addAction("查看4");
+
+    ElaMenu* checkMenu1 = _homeMenu->addMenu(ElaIconType::Cubes, "查看");
+    checkMenu1->addAction("查看1");
+    checkMenu1->addAction("查看2");
+    checkMenu1->addAction("查看3");
+    checkMenu1->addAction("查看4");
+
+    ElaMenu* checkMenu2 = checkMenu->addMenu(ElaIconType::Cubes, "查看");
+    checkMenu2->addAction("查看1");
+    checkMenu2->addAction("查看2");
+    checkMenu2->addAction("查看3");
+    checkMenu2->addAction("查看4");
+
+    // QKeySequence key = QKeySequence(Qt::CTRL | Qt::Key_S);
+
+    _homeMenu->addSeparator();
+    _homeMenu->addElaIconAction(ElaIconType::BoxCheck, "排序方式", QKeySequence::Save);
+    _homeMenu->addElaIconAction(ElaIconType::ArrowRotateRight, "刷新");
+    QAction* action = _homeMenu->addElaIconAction(ElaIconType::ArrowRotateLeft, "撤销");
+    connect(action, &QAction::triggered, this, [=]() {
+        ElaNavigationRouter::getInstance()->navigationRouteBack();
+    });
+
+    _homeMenu->addElaIconAction(ElaIconType::Copy, "复制");
+    _homeMenu->addElaIconAction(ElaIconType::MagnifyingGlassPlus, "显示设置");
+
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("Home");
+    QVBoxLayout* centerVLayout = new QVBoxLayout(centralWidget);
+    centerVLayout->setSpacing(0);
+    centerVLayout->setContentsMargins(0, 0, 0, 0);
+    centerVLayout->addWidget(backgroundCard);
+    centerVLayout->addSpacing(20);
+    centerVLayout->addLayout(flowTextLayout);
+    centerVLayout->addSpacing(10);
+    centerVLayout->addLayout(flowLayout);
+    centerVLayout->addStretch();
+    addCentralWidget(centralWidget);
+
+    // 初始化提示
+    ElaMessageBar::success(ElaMessageBarType::BottomRight, "Success", "初始化成功!", 2000);
+    qDebug() << "初始化成功";
+}
+
+T_Home::~T_Home()
+{
+}
+
+void T_Home::mouseReleaseEvent(QMouseEvent* event)
+{
+    switch (event->button())
+    {
+    case Qt::RightButton:
+    {
+#if QT_VERSION >= QT_VERSION_CHECK(6, 0, 0)
+        _homeMenu->popup(event->globalPosition().toPoint());
+#else
+        _homeMenu->popup(event->globalPos());
+#endif
+        break;
+    }
+    default:
+    {
+        break;
+    }
+    }
+    ElaScrollPage::mouseReleaseEvent(event);
+}
@@ -0,0 +1,26 @@
+#ifndef T_HOME_H
+#define T_HOME_H
+
+#include "T_BasePage.h"
+class ElaMenu;
+class T_Home : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_Home(QWidget* parent = nullptr);
+    ~T_Home();
+Q_SIGNALS:
+    Q_SIGNAL void elaScreenNavigation();
+    Q_SIGNAL void elaBaseComponentNavigation();
+    Q_SIGNAL void elaSceneNavigation();
+    Q_SIGNAL void elaCardNavigation();
+    Q_SIGNAL void elaIconNavigation();
+
+protected:
+    virtual void mouseReleaseEvent(QMouseEvent* event);
+
+private:
+    ElaMenu* _homeMenu{nullptr};
+};
+
+#endif // T_HOME_H
@@ -0,0 +1,88 @@
+#include "T_Icon.h"
+
+#include <QApplication>
+#include <QClipboard>
+#include <QHeaderView>
+#include <QStandardItemModel>
+#include <QVBoxLayout>
+
+#include "ElaLineEdit.h"
+#include "ElaListView.h"
+#include "ElaMessageBar.h"
+#include "T_IconDelegate.h"
+#include "T_IconModel.h"
+T_Icon::T_Icon(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("ElaIcon");
+    // 顶部元素
+    createCustomWidget("一堆常用图标被放置于此，左键单击以复制其枚举");
+
+    _metaEnum = QMetaEnum::fromType<ElaIconType::IconName>();
+    QWidget* centralWidget = new QWidget(this);
+    QVBoxLayout* centerVLayout = new QVBoxLayout(centralWidget);
+    centerVLayout->setContentsMargins(0, 0, 5, 0);
+    centralWidget->setWindowTitle("ElaIcon");
+    // ListView
+    _iconView = new ElaListView(this);
+    _iconView->setIsTransparent(true);
+    _iconView->setFlow(QListView::LeftToRight);
+    _iconView->setViewMode(QListView::IconMode);
+    _iconView->setResizeMode(QListView::Adjust);
+    connect(_iconView, &ElaListView::clicked, this, [=](const QModelIndex& index) {
+        QString iconName = _iconModel->getIconNameFromModelIndex(index);
+        if (iconName.isEmpty())
+        {
+            return;
+        }
+        qApp->clipboard()->setText(iconName);
+        ElaMessageBar::success(ElaMessageBarType::Top, "复制完成", iconName + "已被复制到剪贴板", 1000, this);
+    });
+    _iconModel = new T_IconModel(this);
+    _iconDelegate = new T_IconDelegate(this);
+    _iconView->setModel(_iconModel);
+    _iconView->setItemDelegate(_iconDelegate);
+    _iconView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+
+    _searchEdit = new ElaLineEdit(this);
+    _searchEdit->setPlaceholderText("搜索图标");
+    _searchEdit->setFixedSize(300, 35);
+    connect(_searchEdit, &ElaLineEdit::textEdited, this, &T_Icon::onSearchEditTextEdit);
+    connect(_searchEdit, &ElaLineEdit::focusIn, this, &T_Icon::onSearchEditTextEdit);
+
+    centerVLayout->addSpacing(13);
+    centerVLayout->addWidget(_searchEdit);
+    centerVLayout->addWidget(_iconView);
+    this->addCentralWidget(centralWidget, true, true, 0);
+}
+
+T_Icon::~T_Icon()
+{
+}
+
+void T_Icon::onSearchEditTextEdit(const QString& searchText)
+{
+    if (searchText.isEmpty())
+    {
+        _iconModel->setIsSearchMode(false);
+        _iconModel->setSearchKeyList(QStringList());
+        _iconView->clearSelection();
+        _iconView->viewport()->update();
+        return;
+    }
+    QStringList searchKeyList;
+    for (int i = 1; i < _metaEnum.keyCount(); i++)
+    {
+        QString key = QString(_metaEnum.key(i));
+        if (key.contains(searchText, Qt::CaseInsensitive))
+        {
+            searchKeyList.append(key);
+        }
+    }
+    _iconModel->setSearchKeyList(searchKeyList);
+    _iconModel->setIsSearchMode(true);
+    _iconView->clearSelection();
+    _iconView->scrollTo(_iconModel->index(0, 0));
+    _iconView->viewport()->update();
+}
@@ -0,0 +1,27 @@
+#ifndef T_ICON_H
+#define T_ICON_H
+
+#include <QMetaEnum>
+
+#include "T_BasePage.h"
+class ElaLineEdit;
+class ElaListView;
+class T_IconModel;
+class T_IconDelegate;
+class T_Icon : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_Icon(QWidget* parent = nullptr);
+    ~T_Icon();
+    Q_SLOT void onSearchEditTextEdit(const QString& searchText);
+
+private:
+    QMetaEnum _metaEnum;
+    ElaLineEdit* _searchEdit{nullptr};
+    ElaListView* _iconView;
+    T_IconModel* _iconModel;
+    T_IconDelegate* _iconDelegate;
+};
+
+#endif // T_ICON_H
@@ -0,0 +1,45 @@
+#include "T_ListView.h"
+
+#include <QHBoxLayout>
+#include <QVBoxLayout>
+
+#include "ElaListView.h"
+#include "ElaScrollBar.h"
+#include "ElaText.h"
+#include "T_ListViewModel.h"
+T_ListView::T_ListView(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("ElaListView");
+
+    // 顶部元素
+    createCustomWidget("列表视图被放置于此，可在此界面体验其效果并按需添加进项目中");
+
+    //ElaListView
+    ElaText* listText = new ElaText("ElaListView", this);
+    listText->setTextPixelSize(18);
+    _listView = new ElaListView(this);
+    _listView->setFixedHeight(450);
+    // _listView->setAlternatingRowColors(true);
+    _listView->setModel(new T_ListViewModel(this));
+    ElaScrollBar* listViewFloatScrollBar = new ElaScrollBar(_listView->verticalScrollBar(), _listView);
+    listViewFloatScrollBar->setIsAnimation(true);
+    QHBoxLayout* listViewLayout = new QHBoxLayout();
+    listViewLayout->setContentsMargins(0, 0, 10, 0);
+    listViewLayout->addWidget(_listView);
+
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("ElaView");
+    QVBoxLayout* centerVLayout = new QVBoxLayout(centralWidget);
+    centerVLayout->setContentsMargins(0, 0, 0, 0);
+    centerVLayout->addWidget(listText);
+    centerVLayout->addSpacing(10);
+    centerVLayout->addLayout(listViewLayout);
+    centerVLayout->addStretch();
+    addCentralWidget(centralWidget, true, false, 0);
+}
+
+T_ListView::~T_ListView()
+{
+}
@@ -0,0 +1,18 @@
+#ifndef T_LISTVIEW_H
+#define T_LISTVIEW_H
+
+#include "T_BasePage.h"
+
+class ElaListView;
+class T_ListView : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_ListView(QWidget* parent = nullptr);
+    ~T_ListView();
+
+private:
+    ElaListView* _listView{nullptr};
+};
+
+#endif // T_LISTVIEW_H
@@ -0,0 +1,30 @@
+#include "T_LogWidget.h"
+
+#include <ElaListView.h>
+
+#include <QVBoxLayout>
+
+#include "ElaLog.h"
+#include "T_LogModel.h"
+T_LogWidget::T_LogWidget(QWidget* parent)
+    : QWidget{parent}
+{
+    QVBoxLayout* mainLayout = new QVBoxLayout(this);
+    mainLayout->setContentsMargins(0, 5, 5, 0);
+    ElaListView* logView = new ElaListView(this);
+    logView->setIsTransparent(true);
+    _logModel = new T_LogModel(this);
+    logView->setModel(_logModel);
+    mainLayout->addWidget(logView);
+    connect(ElaLog::getInstance(), &ElaLog::logMessage, this, [=](QString log) {
+        _logModel->appendLogList(log);
+    });
+    _logModel->appendLogList("测试条例11223344556677889900");
+    _logModel->appendLogList("测试条例11223344556677889900");
+    _logModel->appendLogList("测试条例11223344556677889900");
+    _logModel->appendLogList("测试条例11223344556677889900");
+}
+
+T_LogWidget::~T_LogWidget()
+{
+}
@@ -0,0 +1,18 @@
+#ifndef T_LOGWIDGET_H
+#define T_LOGWIDGET_H
+
+#include <QWidget>
+
+class T_LogModel;
+class T_LogWidget : public QWidget
+{
+    Q_OBJECT
+public:
+    explicit T_LogWidget(QWidget* parent = nullptr);
+    ~T_LogWidget();
+signals:
+private:
+    T_LogModel* _logModel{nullptr};
+};
+
+#endif // T_LOGWIDGET_H
@@ -0,0 +1,108 @@
+#include "T_Navigation.h"
+
+#include <QHBoxLayout>
+#include <QLabel>
+#include <QVBoxLayout>
+
+#include "ElaBreadcrumbBar.h"
+#include "ElaPivot.h"
+#include "ElaPushButton.h"
+#include "ElaScrollPageArea.h"
+#include "ElaTabWidget.h"
+#include "ElaText.h"
+T_Navigation::T_Navigation(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("ElaNavigation");
+
+    // 顶部元素
+    createCustomWidget("一些导航组件被放置于此，可在此界面体验其效果并按需添加进项目中");
+
+    //ElaBreadcrumbBar
+    ElaText* breadcrumbBarText = new ElaText("ElaBreadcrumbBar", this);
+    breadcrumbBarText->setTextPixelSize(18);
+    _breadcrumbBar = new ElaBreadcrumbBar(this);
+    QStringList breadcrumbBarList;
+    for (int i = 0; i < 20; i++)
+    {
+        breadcrumbBarList << QString("Item%1").arg(i + 1);
+    }
+    _breadcrumbBar->setBreadcrumbList(breadcrumbBarList);
+
+    ElaPushButton* resetButton = new ElaPushButton("还原", this);
+    resetButton->setFixedSize(60, 32);
+    connect(resetButton, &ElaPushButton::clicked, this, [=]() {
+        _breadcrumbBar->setBreadcrumbList(breadcrumbBarList);
+    });
+
+    QHBoxLayout* breadcrumbBarTextLayout = new QHBoxLayout();
+    breadcrumbBarTextLayout->addWidget(breadcrumbBarText);
+    breadcrumbBarTextLayout->addSpacing(15);
+    breadcrumbBarTextLayout->addWidget(resetButton);
+    breadcrumbBarTextLayout->addStretch();
+
+    ElaScrollPageArea* breadcrumbBarArea = new ElaScrollPageArea(this);
+    QVBoxLayout* breadcrumbBarLayout = new QVBoxLayout(breadcrumbBarArea);
+    breadcrumbBarLayout->addWidget(_breadcrumbBar);
+
+    // ElaPivot
+    ElaText* pivotText = new ElaText("ElaPivot", this);
+    pivotText->setTextPixelSize(18);
+    _pivot = new ElaPivot(this);
+    _pivot->setPivotSpacing(8);
+    _pivot->setMarkWidth(75);
+    _pivot->appendPivot("本地歌曲");
+    _pivot->appendPivot("下载歌曲");
+    _pivot->appendPivot("下载视频");
+    _pivot->appendPivot("正在下载");
+    _pivot->setCurrentIndex(0);
+
+    ElaScrollPageArea* pivotArea = new ElaScrollPageArea(this);
+    QVBoxLayout* pivotLayout = new QVBoxLayout(pivotArea);
+    pivotLayout->addWidget(_pivot);
+
+    // ElaTabWidget
+    ElaText* tabWidgetText = new ElaText("ElaTabWidget", this);
+    tabWidgetText->setTextPixelSize(18);
+    _tabWidget = new ElaTabWidget(this);
+    _tabWidget->setFixedHeight(500);
+    QLabel* page1 = new QLabel("新标签页1", this);
+    page1->setAlignment(Qt::AlignCenter);
+    QFont font = page1->font();
+    font.setPixelSize(32);
+    page1->setFont(font);
+    QLabel* page2 = new QLabel("新标签页2", this);
+    page2->setFont(font);
+    page2->setAlignment(Qt::AlignCenter);
+    QLabel* page3 = new QLabel("新标签页3", this);
+    page3->setFont(font);
+    page3->setAlignment(Qt::AlignCenter);
+    QLabel* page4 = new QLabel("新标签页4", this);
+    page4->setFont(font);
+    page4->setAlignment(Qt::AlignCenter);
+    _tabWidget->addTab(page1, QIcon(":/Resource/Image/Cirno.jpg"), "新标签页1");
+    _tabWidget->addTab(page2, "新标签页2");
+    _tabWidget->addTab(page3, "新标签页3");
+    _tabWidget->addTab(page4, "新标签页4");
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("ElaNavigation");
+    QVBoxLayout* centerVLayout = new QVBoxLayout(centralWidget);
+    centerVLayout->setContentsMargins(0, 0, 0, 0);
+    centerVLayout->addLayout(breadcrumbBarTextLayout);
+    centerVLayout->addSpacing(10);
+    centerVLayout->addWidget(breadcrumbBarArea);
+    centerVLayout->addSpacing(15);
+    centerVLayout->addWidget(pivotText);
+    centerVLayout->addSpacing(10);
+    centerVLayout->addWidget(pivotArea);
+    centerVLayout->addSpacing(15);
+    centerVLayout->addWidget(tabWidgetText);
+    centerVLayout->addSpacing(10);
+    centerVLayout->addWidget(_tabWidget);
+    addCentralWidget(centralWidget, true, false, 0);
+}
+
+T_Navigation::~T_Navigation()
+{
+}
@@ -0,0 +1,22 @@
+#ifndef T_NAVIGATION_H
+#define T_NAVIGATION_H
+
+#include "T_BasePage.h"
+
+class ElaPivot;
+class ElaTabWidget;
+class ElaBreadcrumbBar;
+class T_Navigation : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_Navigation(QWidget* parent = nullptr);
+    ~T_Navigation();
+
+private:
+    ElaBreadcrumbBar* _breadcrumbBar{nullptr};
+    ElaPivot* _pivot{nullptr};
+    ElaTabWidget* _tabWidget{nullptr};
+};
+
+#endif // T_NAVIGATION_H
@@ -0,0 +1,114 @@
+#include "T_Popup.h"
+
+#include <QHBoxLayout>
+#include <QVBoxLayout>
+
+#include "ElaCalendar.h"
+#include "ElaCalendarPicker.h"
+#include "ElaColorDialog.h"
+#include "ElaKeyBinder.h"
+#include "ElaMenu.h"
+#include "ElaPushButton.h"
+#include "ElaScrollPageArea.h"
+#include "ElaText.h"
+#include "ElaToolButton.h"
+
+T_Popup::T_Popup(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("ElaPopup");
+
+    // 顶部元素
+    createCustomWidget("一些常用的弹出组件被放置于此，可在此界面体验其效果并按需添加进项目中");
+
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("ElaPopup");
+
+    _toolButton = new ElaToolButton(this);
+    _toolButton->setIsTransparent(false);
+    _toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
+    //_toolButton->setPopupMode(QToolButton::MenuButtonPopup);
+    _toolButton->setText("ElaToolButton");
+
+    ElaMenu* menu = new ElaMenu(this);
+    menu->addElaIconAction(ElaIconType::JackOLantern, "JackOLantern");
+    menu->addElaIconAction(ElaIconType::LacrosseStick, "LacrosseStick");
+    _toolButton->setMenu(menu);
+    _toolButton->setElaIcon(ElaIconType::Broom);
+
+    ElaScrollPageArea* toolButtonArea = new ElaScrollPageArea(this);
+    QHBoxLayout* toolButtonLayout = new QHBoxLayout(toolButtonArea);
+    ElaText* toolButtonText = new ElaText("ElaToolButton", this);
+    toolButtonText->setTextPixelSize(15);
+    toolButtonLayout->addWidget(toolButtonText);
+    toolButtonLayout->addWidget(_toolButton);
+    toolButtonLayout->addStretch();
+
+    _colorDialog = new ElaColorDialog(this);
+    ElaText* colorText = new ElaText(_colorDialog->getCurrentColorRGB(), this);
+    colorText->setTextPixelSize(15);
+    ElaPushButton* colorDialogButton = new ElaPushButton(this);
+    colorDialogButton->setFixedSize(35, 35);
+    colorDialogButton->setLightDefaultColor(_colorDialog->getCurrentColor());
+    colorDialogButton->setLightHoverColor(_colorDialog->getCurrentColor());
+    colorDialogButton->setLightPressColor(_colorDialog->getCurrentColor());
+    colorDialogButton->setDarkDefaultColor(_colorDialog->getCurrentColor());
+    colorDialogButton->setDarkHoverColor(_colorDialog->getCurrentColor());
+    colorDialogButton->setDarkPressColor(_colorDialog->getCurrentColor());
+    connect(colorDialogButton, &ElaPushButton::clicked, this, [=]() {
+        _colorDialog->exec();
+    });
+    connect(_colorDialog, &ElaColorDialog::colorSelected, this, [=](const QColor& color) {
+        colorDialogButton->setLightDefaultColor(color);
+        colorDialogButton->setLightHoverColor(color);
+        colorDialogButton->setLightPressColor(color);
+        colorDialogButton->setDarkDefaultColor(color);
+        colorDialogButton->setDarkHoverColor(color);
+        colorDialogButton->setDarkPressColor(color);
+        colorText->setText(_colorDialog->getCurrentColorRGB());
+    });
+
+    ElaScrollPageArea* colorDialogArea = new ElaScrollPageArea(this);
+    QHBoxLayout* colorDialogLayout = new QHBoxLayout(colorDialogArea);
+    ElaText* colorDialogText = new ElaText("ElaColorDialog", this);
+    colorDialogText->setTextPixelSize(15);
+    colorDialogLayout->addWidget(colorDialogText);
+    colorDialogLayout->addWidget(colorDialogButton);
+    colorDialogLayout->addWidget(colorText);
+    colorDialogLayout->addStretch();
+
+    _calendar = new ElaCalendar(this);
+
+    _calendarPicker = new ElaCalendarPicker(this);
+    ElaScrollPageArea* calendarPickerArea = new ElaScrollPageArea(this);
+    QHBoxLayout* calendarPickerLayout = new QHBoxLayout(calendarPickerArea);
+    ElaText* calendarPickerText = new ElaText("ElaCalendarPicker", this);
+    calendarPickerText->setTextPixelSize(15);
+    calendarPickerLayout->addWidget(calendarPickerText);
+    calendarPickerLayout->addWidget(_calendarPicker);
+    calendarPickerLayout->addStretch();
+
+    _keyBinder = new ElaKeyBinder(this);
+    ElaScrollPageArea* keyBinderArea = new ElaScrollPageArea(this);
+    QHBoxLayout* keyBinderLayout = new QHBoxLayout(keyBinderArea);
+    ElaText* keyBinderText = new ElaText("ElaKeyBinder", this);
+    keyBinderText->setTextPixelSize(15);
+    keyBinderLayout->addWidget(keyBinderText);
+    keyBinderLayout->addWidget(_keyBinder);
+    keyBinderLayout->addStretch();
+
+    QVBoxLayout* centerVLayout = new QVBoxLayout(centralWidget);
+    centerVLayout->setContentsMargins(0, 0, 0, 0);
+    centerVLayout->addWidget(toolButtonArea);
+    centerVLayout->addWidget(colorDialogArea);
+    centerVLayout->addWidget(calendarPickerArea);
+    centerVLayout->addWidget(_calendar);
+    centerVLayout->addWidget(keyBinderArea);
+    centerVLayout->addStretch();
+    addCentralWidget(centralWidget, true, false, 0);
+}
+
+T_Popup::~T_Popup()
+{
+}
@@ -0,0 +1,26 @@
+#ifndef T_POPUP_H
+#define T_POPUP_H
+
+#include "T_BasePage.h"
+
+class ElaToolButton;
+class ElaColorDialog;
+class ElaCalendar;
+class ElaCalendarPicker;
+class ElaKeyBinder;
+class T_Popup : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_Popup(QWidget* parent = nullptr);
+    ~T_Popup();
+
+private:
+    ElaToolButton* _toolButton{nullptr};
+    ElaColorDialog* _colorDialog{nullptr};
+    ElaCalendar* _calendar{nullptr};
+    ElaCalendarPicker* _calendarPicker{nullptr};
+    ElaKeyBinder* _keyBinder{nullptr};
+};
+
+#endif// T_POPUP_H
@@ -0,0 +1,160 @@
+#include "T_Setting.h"
+
+#include <QDebug>
+#include <QHBoxLayout>
+#include <QVBoxLayout>
+
+#include "ElaApplication.h"
+#include "ElaComboBox.h"
+#include "ElaLog.h"
+#include "ElaRadioButton.h"
+#include "ElaScrollPageArea.h"
+#include "ElaText.h"
+#include "ElaTheme.h"
+#include "ElaToggleSwitch.h"
+#include "ElaWindow.h"
+T_Setting::T_Setting(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    ElaWindow* window = dynamic_cast<ElaWindow*>(parent);
+    setWindowTitle("Setting");
+
+    ElaText* themeText = new ElaText("主题设置", this);
+    themeText->setWordWrap(false);
+    themeText->setTextPixelSize(18);
+
+    _themeComboBox = new ElaComboBox(this);
+    _themeComboBox->addItem("日间模式");
+    _themeComboBox->addItem("夜间模式");
+    ElaScrollPageArea* themeSwitchArea = new ElaScrollPageArea(this);
+    QHBoxLayout* themeSwitchLayout = new QHBoxLayout(themeSwitchArea);
+    ElaText* themeSwitchText = new ElaText("主题切换", this);
+    themeSwitchText->setWordWrap(false);
+    themeSwitchText->setTextPixelSize(15);
+    themeSwitchLayout->addWidget(themeSwitchText);
+    themeSwitchLayout->addStretch();
+    themeSwitchLayout->addWidget(_themeComboBox);
+    connect(_themeComboBox, QOverload<int>::of(&ElaComboBox::currentIndexChanged), this, [=](int index) {
+        if (index == 0)
+        {
+            eTheme->setThemeMode(ElaThemeType::Light);
+        }
+        else
+        {
+            eTheme->setThemeMode(ElaThemeType::Dark);
+        }
+    });
+    connect(eTheme, &ElaTheme::themeModeChanged, this, [=](ElaThemeType::ThemeMode themeMode) {
+        _themeComboBox->blockSignals(true);
+        if (themeMode == ElaThemeType::Light)
+        {
+            _themeComboBox->setCurrentIndex(0);
+        }
+        else
+        {
+            _themeComboBox->setCurrentIndex(1);
+        }
+        _themeComboBox->blockSignals(false);
+    });
+
+    ElaText* helperText = new ElaText("应用程序设置", this);
+    helperText->setWordWrap(false);
+    helperText->setTextPixelSize(18);
+
+    _micaSwitchButton = new ElaToggleSwitch(this);
+    ElaScrollPageArea* micaSwitchArea = new ElaScrollPageArea(this);
+    QHBoxLayout* micaSwitchLayout = new QHBoxLayout(micaSwitchArea);
+    ElaText* micaSwitchText = new ElaText("启用云母效果(跨平台)", this);
+    micaSwitchText->setWordWrap(false);
+    micaSwitchText->setTextPixelSize(15);
+    micaSwitchLayout->addWidget(micaSwitchText);
+    micaSwitchLayout->addStretch();
+    micaSwitchLayout->addWidget(_micaSwitchButton);
+    connect(_micaSwitchButton, &ElaToggleSwitch::toggled, this, [=](bool checked) {
+        eApp->setIsEnableMica(checked);
+    });
+
+    _logSwitchButton = new ElaToggleSwitch(this);
+    ElaScrollPageArea* logSwitchArea = new ElaScrollPageArea(this);
+    QHBoxLayout* logSwitchLayout = new QHBoxLayout(logSwitchArea);
+    ElaText* logSwitchText = new ElaText("启用日志功能", this);
+    logSwitchText->setWordWrap(false);
+    logSwitchText->setTextPixelSize(15);
+    logSwitchLayout->addWidget(logSwitchText);
+    logSwitchLayout->addStretch();
+    logSwitchLayout->addWidget(_logSwitchButton);
+    connect(_logSwitchButton, &ElaToggleSwitch::toggled, this, [=](bool checked) {
+        ElaLog::getInstance()->initMessageLog(checked);
+        if (checked)
+        {
+            qDebug() << "日志已启用!";
+        }
+        else
+        {
+            qDebug() << "日志已关闭!";
+        }
+    });
+
+    _minimumButton = new ElaRadioButton("Minimum", this);
+    _compactButton = new ElaRadioButton("Compact", this);
+    _maximumButton = new ElaRadioButton("Maximum", this);
+    _autoButton = new ElaRadioButton("Auto", this);
+    _autoButton->setChecked(true);
+    ElaScrollPageArea* displayModeArea = new ElaScrollPageArea(this);
+    QHBoxLayout* displayModeLayout = new QHBoxLayout(displayModeArea);
+    ElaText* displayModeText = new ElaText("导航栏模式选择", this);
+    displayModeText->setWordWrap(false);
+    displayModeText->setTextPixelSize(15);
+    displayModeLayout->addWidget(displayModeText);
+    displayModeLayout->addStretch();
+    displayModeLayout->addWidget(_minimumButton);
+    displayModeLayout->addWidget(_compactButton);
+    displayModeLayout->addWidget(_maximumButton);
+    displayModeLayout->addWidget(_autoButton);
+    connect(_minimumButton, &ElaRadioButton::toggled, this, [=](bool checked) {
+        if (checked)
+        {
+            window->setNavigationBarDisplayMode(ElaNavigationType::Minimal);
+        }
+    });
+    connect(_compactButton, &ElaRadioButton::toggled, this, [=](bool checked) {
+        if (checked)
+        {
+            window->setNavigationBarDisplayMode(ElaNavigationType::Compact);
+        }
+    });
+    connect(_maximumButton, &ElaRadioButton::toggled, this, [=](bool checked) {
+        if (checked)
+        {
+            window->setNavigationBarDisplayMode(ElaNavigationType::Maximal);
+        }
+    });
+    connect(_autoButton, &ElaRadioButton::toggled, this, [=](bool checked) {
+        if (checked)
+        {
+            window->setNavigationBarDisplayMode(ElaNavigationType::Auto);
+        }
+    });
+
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("Setting");
+    QVBoxLayout* centerLayout = new QVBoxLayout(centralWidget);
+    centerLayout->addSpacing(30);
+    centerLayout->addWidget(themeText);
+    centerLayout->addSpacing(10);
+    centerLayout->addWidget(themeSwitchArea);
+    centerLayout->addSpacing(15);
+    centerLayout->addWidget(helperText);
+    centerLayout->addSpacing(10);
+    centerLayout->addWidget(logSwitchArea);
+    centerLayout->addWidget(micaSwitchArea);
+    centerLayout->addWidget(displayModeArea);
+    centerLayout->addStretch();
+    centerLayout->setContentsMargins(0, 0, 0, 0);
+    addCentralWidget(centralWidget, true, true, 0);
+}
+
+T_Setting::~T_Setting()
+{
+}
@@ -0,0 +1,25 @@
+#ifndef T_SETTING_H
+#define T_SETTING_H
+
+#include "T_BasePage.h"
+class ElaRadioButton;
+class ElaToggleSwitch;
+class ElaComboBox;
+class T_Setting : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_Setting(QWidget* parent = nullptr);
+    ~T_Setting();
+
+private:
+    ElaComboBox* _themeComboBox{nullptr};
+    ElaToggleSwitch* _micaSwitchButton{nullptr};
+    ElaToggleSwitch* _logSwitchButton{nullptr};
+    ElaRadioButton* _minimumButton{nullptr};
+    ElaRadioButton* _compactButton{nullptr};
+    ElaRadioButton* _maximumButton{nullptr};
+    ElaRadioButton* _autoButton{nullptr};
+};
+
+#endif // T_SETTING_H
@@ -0,0 +1,60 @@
+#include "T_TableView.h"
+
+#include <QHBoxLayout>
+#include <QHeaderView>
+#include <QVBoxLayout>
+
+#include "ElaTableView.h"
+#include "ElaText.h"
+#include "T_TableViewModel.h"
+T_TableView::T_TableView(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("ElaTableView");
+
+    // 顶部元素
+    createCustomWidget("表格视图被放置于此，可在此界面体验其效果并按需添加进项目中");
+
+    //ElaTableView
+    ElaText* tableText = new ElaText("ElaTableView", this);
+    tableText->setTextPixelSize(18);
+    _tableView = new ElaTableView(this);
+    // ElaScrollBar* tableViewFloatScrollBar = new ElaScrollBar(_tableView->verticalScrollBar(), _tableView);
+    // tableViewFloatScrollBar->setIsAnimation(true);
+    QFont tableHeaderFont = _tableView->horizontalHeader()->font();
+    tableHeaderFont.setPixelSize(16);
+    _tableView->horizontalHeader()->setFont(tableHeaderFont);
+    _tableView->setModel(new T_TableViewModel(this));
+    _tableView->setAlternatingRowColors(true);
+    _tableView->setIconSize(QSize(38, 38));
+    _tableView->verticalHeader()->setHidden(true);
+    _tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Interactive);
+    _tableView->setSelectionBehavior(QAbstractItemView::SelectRows);
+    _tableView->horizontalHeader()->setMinimumSectionSize(60);
+    _tableView->verticalHeader()->setMinimumSectionSize(46);
+    _tableView->setFixedHeight(450);
+    connect(_tableView, &ElaTableView::tableViewShow, this, [=]() {
+        _tableView->setColumnWidth(0, 60);
+        _tableView->setColumnWidth(1, 205);
+        _tableView->setColumnWidth(2, 170);
+        _tableView->setColumnWidth(3, 150);
+        _tableView->setColumnWidth(4, 60);
+    });
+    QHBoxLayout* tableViewLayout = new QHBoxLayout();
+    tableViewLayout->setContentsMargins(0, 0, 10, 0);
+    tableViewLayout->addWidget(_tableView);
+
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("ElaView");
+    QVBoxLayout* centerVLayout = new QVBoxLayout(centralWidget);
+    centerVLayout->setContentsMargins(0, 0, 0, 0);
+    centerVLayout->addWidget(tableText);
+    centerVLayout->addSpacing(10);
+    centerVLayout->addLayout(tableViewLayout);
+    addCentralWidget(centralWidget, true, false, 0);
+}
+
+T_TableView::~T_TableView()
+{
+}
@@ -0,0 +1,18 @@
+#ifndef T_TABLEVIEW_H
+#define T_TABLEVIEW_H
+
+#include "T_BasePage.h"
+
+class ElaTableView;
+class T_TableView : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_TableView(QWidget* parent = nullptr);
+    ~T_TableView();
+
+private:
+    ElaTableView* _tableView{nullptr};
+};
+
+#endif // T_TABLEVIEW_H
@@ -0,0 +1,141 @@
+#include "T_TreeView.h"
+
+#include <QHBoxLayout>
+#include <QHeaderView>
+#include <QVBoxLayout>
+
+#include "ElaPushButton.h"
+#include "ElaScrollBar.h"
+#include "ElaSlider.h"
+#include "ElaText.h"
+#include "ElaTreeView.h"
+#include "T_TreeViewModel.h"
+T_TreeView::T_TreeView(QWidget* parent)
+    : T_BasePage(parent)
+{
+    // 预览窗口标题
+    setWindowTitle("ElaTreeView");
+
+    // 顶部元素
+    createCustomWidget("树型视图被放置于此，可在此界面体验其效果并按需添加进项目中");
+
+    // ElaTreeView
+    T_TreeViewModel* treeModel = new T_TreeViewModel(this);
+    QHBoxLayout* treeLayout = new QHBoxLayout();
+    treeLayout->setContentsMargins(0, 0, 10, 0);
+    QWidget* treeSettingWidget = new QWidget(this);
+    QVBoxLayout* treeSettingWidgetLayout = new QVBoxLayout(treeSettingWidget);
+    treeSettingWidgetLayout->setContentsMargins(0, 0, 0, 0);
+    treeSettingWidgetLayout->setSpacing(15);
+
+    // 数据统计
+    ElaText* dataText = new ElaText(QString("树模型总数据条数：%1").arg(treeModel->getItemCount()), this);
+    dataText->setTextPixelSize(15);
+
+    // ItemHeight
+    ElaText* itemHeightText = new ElaText("ItemHeight", this);
+    itemHeightText->setTextPixelSize(15);
+    ElaSlider* itemHeightSlider = new ElaSlider(this);
+    itemHeightSlider->setRange(200, 600);
+    itemHeightSlider->setValue(350);
+    ElaText* itemHeightValueText = new ElaText("35", this);
+    itemHeightValueText->setTextPixelSize(15);
+    connect(itemHeightSlider, &ElaSlider::valueChanged, this, [=](int value) {
+        itemHeightValueText->setText(QString::number(value / 10));
+        _treeView->setItemHeight(value / 10);
+    });
+    QHBoxLayout* itemHeightLayout = new QHBoxLayout();
+    itemHeightLayout->setContentsMargins(0, 0, 0, 0);
+    itemHeightLayout->addWidget(itemHeightText);
+    itemHeightLayout->addWidget(itemHeightSlider);
+    itemHeightLayout->addWidget(itemHeightValueText);
+
+    // HeaderMargin
+    ElaText* headerMarginText = new ElaText("HeaderMargin", this);
+    headerMarginText->setTextPixelSize(15);
+    ElaSlider* headerMarginSlider = new ElaSlider(this);
+    headerMarginSlider->setRange(0, 200);
+    headerMarginSlider->setValue(50);
+    ElaText* headerMarginValueText = new ElaText("5", this);
+    headerMarginValueText->setTextPixelSize(15);
+    connect(headerMarginSlider, &ElaSlider::valueChanged, this, [=](int value) {
+        headerMarginValueText->setText(QString::number(value / 10));
+        _treeView->setHeaderMargin(value / 10);
+    });
+    QHBoxLayout* headerMarginLayout = new QHBoxLayout();
+    headerMarginLayout->setContentsMargins(0, 0, 0, 0);
+    headerMarginLayout->addWidget(headerMarginText);
+    headerMarginLayout->addWidget(headerMarginSlider);
+    headerMarginLayout->addWidget(headerMarginValueText);
+
+    // Indentation
+    ElaText* indentationText = new ElaText("Indentation", this);
+    indentationText->setTextPixelSize(15);
+    ElaSlider* indentationSlider = new ElaSlider(this);
+    indentationSlider->setRange(200, 1000);
+    indentationSlider->setValue(200);
+    ElaText* indentationValueText = new ElaText("20", this);
+    indentationValueText->setTextPixelSize(15);
+    connect(indentationSlider, &ElaSlider::valueChanged, this, [=](int value) {
+        indentationValueText->setText(QString::number(value / 10));
+        _treeView->setIndentation(value / 10);
+    });
+    QHBoxLayout* indentationLayout = new QHBoxLayout();
+    indentationLayout->setContentsMargins(0, 0, 0, 0);
+    indentationLayout->addWidget(indentationText);
+    indentationLayout->addWidget(indentationSlider);
+    indentationLayout->addWidget(indentationValueText);
+
+    //展开全部
+    QHBoxLayout* expandCollapseLayout = new QHBoxLayout();
+    expandCollapseLayout->setContentsMargins(0, 0, 0, 0);
+    ElaPushButton* expandButton = new ElaPushButton("展开全部", this);
+    expandButton->setFixedWidth(80);
+    connect(expandButton, &ElaPushButton::clicked, this, [=]() {
+        _treeView->expandAll();
+    });
+
+    //收起全部
+    ElaPushButton* collapseButton = new ElaPushButton("收起全部", this);
+    collapseButton->setFixedWidth(80);
+    connect(collapseButton, &ElaPushButton::clicked, this, [=]() {
+        _treeView->collapseAll();
+    });
+    expandCollapseLayout->addWidget(expandButton);
+    expandCollapseLayout->addWidget(collapseButton);
+    expandCollapseLayout->addStretch();
+
+    treeSettingWidgetLayout->addWidget(dataText);
+    treeSettingWidgetLayout->addLayout(itemHeightLayout);
+    treeSettingWidgetLayout->addLayout(headerMarginLayout);
+    treeSettingWidgetLayout->addLayout(indentationLayout);
+    treeSettingWidgetLayout->addLayout(expandCollapseLayout);
+    treeSettingWidgetLayout->addStretch();
+
+    // TreeView
+    ElaText* treeText = new ElaText("ElaTreeView", this);
+    treeText->setTextPixelSize(18);
+    _treeView = new ElaTreeView(this);
+    ElaScrollBar* treeViewFloatScrollBar = new ElaScrollBar(_treeView->verticalScrollBar(), _treeView);
+    treeViewFloatScrollBar->setIsAnimation(true);
+    QFont headerFont = _treeView->header()->font();
+    headerFont.setPixelSize(16);
+    _treeView->header()->setFont(headerFont);
+    _treeView->setFixedHeight(450);
+    _treeView->setModel(treeModel);
+    treeLayout->addWidget(treeSettingWidget);
+    treeLayout->addWidget(_treeView);
+
+    QWidget* centralWidget = new QWidget(this);
+    centralWidget->setWindowTitle("ElaView");
+    QVBoxLayout* centerVLayout = new QVBoxLayout(centralWidget);
+    centerVLayout->setContentsMargins(0, 0, 0, 0);
+    centerVLayout->addWidget(treeText);
+    centerVLayout->addSpacing(10);
+    centerVLayout->addLayout(treeLayout);
+    addCentralWidget(centralWidget, true, false, 0);
+}
+
+T_TreeView::~T_TreeView()
+{
+}
@@ -0,0 +1,18 @@
+#ifndef T_TREEVIEW_H
+#define T_TREEVIEW_H
+
+#include "T_BasePage.h"
+
+class ElaTreeView;
+class T_TreeView : public T_BasePage
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE explicit T_TreeView(QWidget* parent = nullptr);
+    ~T_TreeView();
+
+private:
+    ElaTreeView* _treeView{nullptr};
+};
+
+#endif // T_TREEVIEW_H
@@ -0,0 +1,34 @@
+#include "T_UpdateWidget.h"
+
+#include <QVBoxLayout>
+
+#include "ElaText.h"
+T_UpdateWidget::T_UpdateWidget(QWidget* parent)
+    : QWidget{parent}
+{
+    setMinimumSize(200, 260);
+    QVBoxLayout* mainLayout = new QVBoxLayout(this);
+    mainLayout->setSizeConstraint(QLayout::SetMaximumSize);
+    mainLayout->setContentsMargins(5, 10, 5, 5);
+    mainLayout->setSpacing(4);
+    ElaText* updateTitle = new ElaText("2024-11-17更新", 15, this);
+    ElaText* update1 = new ElaText("1、新增ElaKeyBinder单键位绑定组件，支持鼠标按键", 13, this);
+    ElaText* update2 = new ElaText("2、ElaContentDialog中间按钮按下行为优化", 13, this);
+    ElaText* update3 = new ElaText("3、ElaWindow导航模式切换相关问题修正", 13, this);
+    ElaText* update4 = new ElaText("4、CMAKE编译配置和体验优化", 13, this);
+    update1->setIsWrapAnywhere(true);
+    update2->setIsWrapAnywhere(true);
+    update3->setIsWrapAnywhere(true);
+    update4->setIsWrapAnywhere(true);
+
+    mainLayout->addWidget(updateTitle);
+    mainLayout->addWidget(update1);
+    mainLayout->addWidget(update2);
+    mainLayout->addWidget(update3);
+    mainLayout->addWidget(update4);
+    mainLayout->addStretch();
+}
+
+T_UpdateWidget::~T_UpdateWidget()
+{
+}
@@ -0,0 +1,14 @@
+#ifndef T_UPDATEWIDGET_H
+#define T_UPDATEWIDGET_H
+
+#include <QWidget>
+
+class T_UpdateWidget : public QWidget
+{
+    Q_OBJECT
+public:
+    explicit T_UpdateWidget(QWidget* parent = nullptr);
+    ~T_UpdateWidget();
+};
+
+#endif // T_UPDATEWIDGET_H
@@ -0,0 +1,74 @@
+#include "T_IconDelegate.h"
+
+#include <QPainter>
+
+#include "Def.h"
+#include "ElaTheme.h"
+T_IconDelegate::T_IconDelegate(QObject* parent)
+    : QStyledItemDelegate{parent}
+{
+    connect(eTheme, &ElaTheme::themeModeChanged, this, [=](ElaThemeType::ThemeMode themeMode) { _themeMode = themeMode; });
+}
+
+T_IconDelegate::~T_IconDelegate()
+{
+}
+
+void T_IconDelegate::paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const
+{
+    QStyleOptionViewItem viewOption(option);
+    initStyleOption(&viewOption, index);
+
+    if (option.state.testFlag(QStyle::State_HasFocus))
+    {
+        viewOption.state &= ~QStyle::State_HasFocus;
+    }
+    QStyledItemDelegate::paint(painter, viewOption, index);
+    QStringList iconList = index.data(Qt::UserRole).toStringList();
+    if (iconList.count() != 2)
+    {
+        return;
+    }
+    QString iconName = iconList.at(0);
+    QString iconValue = iconList.at(1);
+    painter->save();
+    painter->setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
+    painter->save();
+    QFont iconFont = QFont("ElaAwesome");
+    iconFont.setPixelSize(22);
+    painter->setFont(iconFont);
+    painter->setPen(ElaThemeColor(_themeMode, BasicText));
+    painter->drawText(option.rect.x() + option.rect.width() / 2 - 11, option.rect.y() + option.rect.height() / 2 - 11, iconValue);
+    painter->restore();
+    // 文字绘制
+    painter->setPen(ElaThemeColor(_themeMode, BasicText));
+    QFont titlefont = painter->font();
+    titlefont.setPixelSize(13);
+    painter->setFont(titlefont);
+    qreal rowTextWidth = option.rect.width() * 0.8;
+    int subTitleRow = painter->fontMetrics().horizontalAdvance(iconName) / rowTextWidth;
+    if (subTitleRow > 0)
+    {
+        QString subTitleText = iconName;
+        for (int i = 0; i < subTitleRow + 1; i++)
+        {
+            QString text = painter->fontMetrics().elidedText(subTitleText, Qt::ElideRight, rowTextWidth);
+            if (text.right(3).contains("…"))
+            {
+                text = text.replace("…", subTitleText.mid(text.length() - 1, 1));
+            }
+            subTitleText.remove(0, text.length());
+            painter->drawText(option.rect.x() + option.rect.width() / 2 - painter->fontMetrics().horizontalAdvance(text) / 2, option.rect.y() + option.rect.height() - 10 * (subTitleRow + 1 - i), text);
+        }
+    }
+    else
+    {
+        painter->drawText(option.rect.x() + option.rect.width() / 2 - painter->fontMetrics().horizontalAdvance(iconName) / 2, option.rect.y() + option.rect.height() - 20, iconName);
+    }
+    painter->restore();
+}
+
+QSize T_IconDelegate::sizeHint(const QStyleOptionViewItem& option, const QModelIndex& index) const
+{
+    return QSize(100, 100);
+}
@@ -0,0 +1,22 @@
+#ifndef T_ICONDELEGATE_H
+#define T_ICONDELEGATE_H
+
+#include <QStyledItemDelegate>
+
+#include "Def.h"
+class T_IconDelegate : public QStyledItemDelegate
+{
+    Q_OBJECT
+public:
+    explicit T_IconDelegate(QObject* parent = nullptr);
+    ~T_IconDelegate();
+
+protected:
+    void paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const override;
+    QSize sizeHint(const QStyleOptionViewItem& option, const QModelIndex& index) const override;
+
+private:
+    ElaThemeType::ThemeMode _themeMode{ElaThemeType::Light};
+};
+
+#endif // T_ICONDELEGATE_H
@@ -0,0 +1,86 @@
+#include "T_IconModel.h"
+
+#include "Def.h"
+T_IconModel::T_IconModel(QObject* parent)
+    : QAbstractListModel{parent}
+{
+    _metaEnum = QMetaEnum::fromType<ElaIconType::IconName>();
+    _rowCount = _metaEnum.keyCount() - 1;
+    _pIsSearchMode = false;
+}
+
+T_IconModel::~T_IconModel()
+{
+}
+
+int T_IconModel::rowCount(const QModelIndex& parent) const
+{
+    return _rowCount;
+}
+
+void T_IconModel::setSearchKeyList(QStringList list)
+{
+    beginResetModel();
+    this->_searchKeyList = list;
+    if (_pIsSearchMode)
+    {
+        _rowCount = this->getSearchKeyList().count();
+    }
+    else
+    {
+        _rowCount = _metaEnum.keyCount() - 1;
+    }
+    endResetModel();
+}
+
+QStringList T_IconModel::getSearchKeyList()
+{
+    return this->_searchKeyList;
+}
+
+QVariant T_IconModel::data(const QModelIndex& index, int role) const
+{
+    if (role == Qt::UserRole)
+    {
+        if (!_pIsSearchMode)
+        {
+            if (index.row() >= _metaEnum.keyCount() - 1)
+            {
+                return QVariant();
+            }
+            return QStringList{_metaEnum.key(index.row() + 1), QChar(_metaEnum.value(index.row() + 1))};
+        }
+        else
+        {
+            QStringList iconList;
+            if (index.row() >= _searchKeyList.count())
+            {
+                return QVariant();
+            }
+            iconList.append(_searchKeyList.at(index.row()));
+            iconList.append(QChar(_metaEnum.keyToValue(_searchKeyList.at(index.row()).toUtf8().constData())));
+            return iconList;
+        }
+    }
+    return QVariant();
+}
+
+QString T_IconModel::getIconNameFromModelIndex(const QModelIndex& index) const
+{
+    QString iconName;
+    if (_pIsSearchMode)
+    {
+        if (index.row() < _searchKeyList.count())
+        {
+            iconName = QString("ElaIconType::") + _searchKeyList.at(index.row());
+        }
+    }
+    else
+    {
+        if (index.row() < _metaEnum.keyCount() - 1)
+        {
+            iconName = QString("ElaIconType::") + _metaEnum.key(index.row() + 1);
+        }
+    }
+    return iconName;
+}
@@ -0,0 +1,28 @@
+#ifndef T_ICONMODEL_H
+#define T_ICONMODEL_H
+
+#include <QAbstractListModel>
+#include <QMetaEnum>
+
+#include "stdafx.h"
+class T_IconModel : public QAbstractListModel
+{
+    Q_OBJECT
+    Q_PROPERTY_CREATE(bool, IsSearchMode)
+public:
+    explicit T_IconModel(QObject* parent = nullptr);
+    ~T_IconModel();
+    int rowCount(const QModelIndex& parent = QModelIndex()) const override;
+    void setSearchKeyList(QStringList list);
+    QStringList getSearchKeyList();
+
+    QVariant data(const QModelIndex& index, int role = Qt::DisplayRole) const override;
+    QString getIconNameFromModelIndex(const QModelIndex& index) const;
+
+private:
+    QMetaEnum _metaEnum;
+    QStringList _searchKeyList;
+    int _rowCount;
+};
+
+#endif // T_ICONMODEL_H
@@ -0,0 +1,63 @@
+#include "T_ListViewModel.h"
+
+T_ListViewModel::T_ListViewModel(QObject* parent)
+    : QAbstractListModel{parent}
+{
+    _dataList.append("最轻一个灵魂 送出玫瑰星光");
+    _dataList.append("最轻一句提问 答案是生命的存亡");
+    _dataList.append("最轻一颗麦种 由云帆托起");
+    _dataList.append("流浪至黑暗的心脏");
+    _dataList.append("轻轻的一支航船");
+    _dataList.append("归来却被囚困旧港湾");
+    _dataList.append("轻轻的一些落叶");
+    _dataList.append("飘零在梦萦故乡彼岸");
+    _dataList.append("轻轻的虫 森林鸣唱");
+    _dataList.append("轻轻的鱼 渡向汪洋");
+    _dataList.append("我们是 轻轻轻轻摇曳的篝火");
+    _dataList.append("轻轻对天空哼一支歌");
+    _dataList.append("轻轻被谁听见了");
+    _dataList.append("轻轻的被随意熄灭了");
+    _dataList.append("可我要 重重将夜灼伤");
+    _dataList.append("可我要 重重将夜点燃");
+    _dataList.append("更明亮的 也曾尘埃一样");
+    _dataList.append("最轻一段目光 注视年岁漫长");
+    _dataList.append("最轻一根琴弦 沉默着致命的声浪");
+    _dataList.append("最轻一线悬丝 紧握住锋芒");
+    _dataList.append("牵系着存亡的衡量");
+    _dataList.append("轻轻的一枚棋子 阻挡在骑士前进路上");
+    _dataList.append("轻轻的一双手掌 爱抚的婴孩不再成长");
+    _dataList.append("轻轻的虫 童话里唱");
+    _dataList.append("轻轻的鱼 向宇宙望");
+    _dataList.append("我们是 轻轻轻轻摇曳的篝火");
+    _dataList.append("轻轻对天空哼一支歌");
+    _dataList.append("轻轻被谁听见了");
+    _dataList.append("轻轻的被随意熄灭了");
+    _dataList.append("可我要 重重将夜灼伤");
+    _dataList.append("可我要 重重将夜点燃");
+    _dataList.append("更明亮的 也曾尘埃一样");
+    _dataList.append("轻轻时间 重重浩荡纪年");
+    _dataList.append("轻轻的文明 重重书写");
+    _dataList.append("轻轻身躯 重重对峙黑夜");
+    _dataList.append("轻轻的人类 重重思想");
+    _dataList.append("向宇宙望 向宇宙望");
+    _dataList.append("向远航");
+    _dataList.append("最重一粒微光");
+}
+
+T_ListViewModel::~T_ListViewModel()
+{
+}
+
+int T_ListViewModel::rowCount(const QModelIndex& parent) const
+{
+    return this->_dataList.count();
+}
+
+QVariant T_ListViewModel::data(const QModelIndex& index, int role) const
+{
+    if (role == Qt::DisplayRole)
+    {
+        return _dataList[index.row()];
+    }
+    return QVariant();
+}
@@ -0,0 +1,21 @@
+#ifndef T_LISTVIEWMODEL_H
+#define T_LISTVIEWMODEL_H
+
+#include <QAbstractListModel>
+
+class T_ListViewModel : public QAbstractListModel
+{
+    Q_OBJECT
+public:
+    explicit T_ListViewModel(QObject* parent = nullptr);
+    ~T_ListViewModel();
+
+protected:
+    int rowCount(const QModelIndex& parent = QModelIndex()) const override;
+    QVariant data(const QModelIndex& index, int role) const override;
+
+private:
+    QStringList _dataList;
+};
+
+#endif // T_LISTVIEWMODEL_H
@@ -0,0 +1,43 @@
+#include "T_LogModel.h"
+
+T_LogModel::T_LogModel(QObject* parent)
+    : QAbstractListModel{parent}
+{
+}
+
+T_LogModel::~T_LogModel()
+{
+}
+
+int T_LogModel::rowCount(const QModelIndex& parent) const
+{
+    return this->_logList.count();
+}
+
+QVariant T_LogModel::data(const QModelIndex& index, int role) const
+{
+    if (role == Qt::DisplayRole)
+    {
+        return _logList[index.row()];
+    }
+    return QVariant();
+}
+
+void T_LogModel::setLogList(QStringList list)
+{
+    beginResetModel();
+    this->_logList = list;
+    endResetModel();
+}
+
+void T_LogModel::appendLogList(QString log)
+{
+    beginResetModel();
+    this->_logList.append(log);
+    endResetModel();
+}
+
+QStringList T_LogModel::getLogList() const
+{
+    return this->_logList;
+}
@@ -0,0 +1,24 @@
+#ifndef T_LOGMODEL_H
+#define T_LOGMODEL_H
+
+#include <QAbstractListModel>
+
+class T_LogModel : public QAbstractListModel
+{
+    Q_OBJECT
+public:
+    explicit T_LogModel(QObject* parent = nullptr);
+    ~T_LogModel();
+    void setLogList(QStringList list);
+    void appendLogList(QString log);
+    QStringList getLogList() const;
+
+protected:
+    int rowCount(const QModelIndex& parent = QModelIndex()) const override;
+    QVariant data(const QModelIndex& index, int role) const override;
+
+private:
+    QStringList _logList;
+};
+
+#endif // T_LOGMODEL_H
@@ -0,0 +1,120 @@
+#include "T_TableViewModel.h"
+
+#include <QIcon>
+T_TableViewModel::T_TableViewModel(QObject* parent)
+    : QAbstractTableModel{parent}
+{
+    _header << "预览"
+            << "歌名"
+            << "歌手"
+            << "专辑"
+            << "时长";
+    QStringList data0;
+    QStringList data1;
+    QStringList data2;
+    QStringList data3;
+    QStringList data4;
+    QStringList data5;
+    QStringList data6;
+    QStringList data7;
+    QStringList data8;
+    data0 << "夜航星(Night Voyager)"
+          << "不才/三体宇宙"
+          << "我的三体之章北海传"
+          << "05:03";
+    data1 << "玫瑰少年"
+          << "五月天"
+          << "玫瑰少年"
+          << "03:55";
+    data2 << "Collapsing World(Original Mix)"
+          << "Lightscape"
+          << "Collapsing World"
+          << "03:10";
+    data3 << "RAIN MAN (雨人)"
+          << "AKIHIDE (佐藤彰秀)"
+          << "RAIN STORY"
+          << "05:37";
+    data4 << "黑暗森林"
+          << "雲翼星辰"
+          << "黑暗森林"
+          << "05:47";
+    data5 << "轻(我的三体第四季主题曲)"
+          << "刘雪茗"
+          << "我的三体第四季"
+          << "01:59";
+    data6 << "STYX HELIX"
+          << "MYTH & ROID"
+          << "STYX HELIX"
+          << "04:51";
+    data7 << "LAST STARDUST"
+          << "Aimer"
+          << "DAWN"
+          << "05:18";
+    data8 << "Running In The Dark"
+          << "MONKEY MAJIK/塞壬唱片"
+          << "Running In The Dark"
+          << "03:40";
+    _dataList.append(data0);
+    _dataList.append(data1);
+    _dataList.append(data2);
+    _dataList.append(data3);
+    _dataList.append(data4);
+    _dataList.append(data5);
+    _dataList.append(data6);
+    _dataList.append(data7);
+    _dataList.append(data8);
+
+    _iconList.append(QIcon(QPixmap(":/Resource/Image/Model/NaightNavigationStar.jpg").scaled(38, 38, Qt::KeepAspectRatio, Qt::SmoothTransformation)));
+    _iconList.append(QIcon(QPixmap(":/Resource/Image/Model/MaVieEnRose.jpg").scaled(38, 38, Qt::KeepAspectRatio, Qt::SmoothTransformation)));
+    _iconList.append(QIcon(QPixmap(":/Resource/Image/Model/CollapsingWorld.jpg").scaled(38, 38, Qt::KeepAspectRatio, Qt::SmoothTransformation)));
+    _iconList.append(QIcon(QPixmap(":/Resource/Image/Model/RainMan.jpg").scaled(38, 38, Qt::KeepAspectRatio, Qt::SmoothTransformation)));
+    _iconList.append(QIcon(QPixmap(":/Resource/Image/Model/DarkForest.jpg").scaled(38, 38, Qt::KeepAspectRatio, Qt::SmoothTransformation)));
+    _iconList.append(QIcon(QPixmap(":/Resource/Image/Model/Light.jpg").scaled(38, 38, Qt::KeepAspectRatio, Qt::SmoothTransformation)));
+    _iconList.append(QIcon(QPixmap(":/Resource/Image/Model/STYXHELIX.jpg").scaled(38, 38, Qt::KeepAspectRatio, Qt::SmoothTransformation)));
+    _iconList.append(QIcon(QPixmap(":/Resource/Image/Model/LASTSTARDUST.jpg").scaled(38, 38, Qt::KeepAspectRatio, Qt::SmoothTransformation)));
+    _iconList.append(QIcon(QPixmap(":/Resource/Image/Model/RunningInTheDark.jpg").scaled(38, 38, Qt::KeepAspectRatio, Qt::SmoothTransformation)));
+}
+
+T_TableViewModel::~T_TableViewModel()
+{
+}
+
+int T_TableViewModel::rowCount(const QModelIndex& parent) const
+{
+    return 100;
+}
+
+int T_TableViewModel::columnCount(const QModelIndex& parent) const
+{
+    return _header.count();
+}
+
+QVariant T_TableViewModel::data(const QModelIndex& index, int role) const
+{
+    if (role == Qt::DisplayRole && index.column() != 0)
+    {
+        return _dataList[index.row() % 9][index.column() - 1];
+    }
+    else if (role == Qt::DecorationRole && index.column() == 0)
+    {
+        return _iconList[index.row() % 9];
+    }
+    else if (role == Qt::DecorationPropertyRole)
+    {
+        return Qt::AlignCenter;
+    }
+    else if (role == Qt::TextAlignmentRole && index.column() == 4)
+    {
+        return Qt::AlignCenter;
+    }
+    return QVariant();
+}
+
+QVariant T_TableViewModel::headerData(int section, Qt::Orientation orientation, int role) const
+{
+    if (orientation == Qt::Horizontal && role == Qt::DisplayRole)
+    {
+        return _header[section];
+    }
+    return QAbstractTableModel::headerData(section, orientation, role);
+}
@@ -0,0 +1,24 @@
+#ifndef T_TABLEVIEWMODEL_H
+#define T_TABLEVIEWMODEL_H
+
+#include <QAbstractTableModel>
+
+class T_TableViewModel : public QAbstractTableModel
+{
+    Q_OBJECT
+public:
+    explicit T_TableViewModel(QObject* parent = nullptr);
+    ~T_TableViewModel();
+    int rowCount(const QModelIndex& parent = QModelIndex()) const override;
+    int columnCount(const QModelIndex& parent = QModelIndex()) const override;
+
+    QVariant data(const QModelIndex& index, int role) const override;
+    QVariant headerData(int section, Qt::Orientation orientation, int role = Qt::DisplayRole) const override;
+
+private:
+    QStringList _header;
+    QList<QStringList> _dataList;
+    QList<QIcon> _iconList;
+};
+
+#endif // T_TABLEVIEWMODEL_H
@@ -0,0 +1,110 @@
+#include "T_TreeItem.h"
+
+#include <QUuid>
+T_TreeItem::T_TreeItem(QString itemTitle, T_TreeItem* parent)
+    : QObject{parent}
+{
+    _itemKey = QUuid::createUuid().toString().remove("{").remove("}").remove("-");
+    _itemTitle = itemTitle;
+    _pParentItem = parent;
+    _pIsChecked = false;
+}
+
+T_TreeItem::~T_TreeItem()
+{
+    qDeleteAll(_pChildrenItems);
+}
+
+QString T_TreeItem::getItemKey() const
+{
+    return _itemKey;
+}
+
+QString T_TreeItem::getItemTitle() const
+{
+    return _itemTitle;
+}
+
+void T_TreeItem::setChildChecked(bool isChecked)
+{
+    if (isChecked)
+    {
+        for (auto node : _pChildrenItems)
+        {
+            node->setIsChecked(isChecked);
+            node->setChildChecked(isChecked);
+        }
+    }
+    else
+    {
+        for (auto node : _pChildrenItems)
+        {
+            node->setChildChecked(isChecked);
+            node->setIsChecked(isChecked);
+        }
+    }
+}
+
+Qt::CheckState T_TreeItem::getChildCheckState()
+{
+    bool isAllChecked = true;
+    bool isAnyChecked = false;
+    for (auto node : _pChildrenItems)
+    {
+        if (node->getIsChecked())
+        {
+            isAnyChecked = true;
+        }
+        else
+        {
+            isAllChecked = false;
+        }
+        Qt::CheckState childState = node->getChildCheckState();
+        if (childState == Qt::PartiallyChecked)
+        {
+            isAllChecked = false;
+            isAnyChecked = true;
+            break;
+        }
+        else if (childState == Qt::Unchecked)
+        {
+            isAllChecked = false;
+        }
+    }
+    if (_pChildrenItems.count() > 0)
+    {
+        if (isAllChecked)
+        {
+            return Qt::Checked;
+        }
+        if (isAnyChecked)
+        {
+            return Qt::PartiallyChecked;
+        }
+        return Qt::Unchecked;
+    }
+    return Qt::Checked;
+}
+
+void T_TreeItem::appendChildItem(T_TreeItem* childItem)
+{
+    _pChildrenItems.append(childItem);
+}
+
+bool T_TreeItem::getIsHasChild() const
+{
+    if (_pChildrenItems.count() > 0)
+    {
+        return true;
+    }
+    return false;
+}
+
+int T_TreeItem::getRow() const
+{
+    if (_pParentItem)
+    {
+        return _pParentItem->getChildrenItems().indexOf(const_cast<T_TreeItem*>(this));
+    }
+    return 0;
+}
@@ -0,0 +1,33 @@
+#ifndef T_TREEITEM_H
+#define T_TREEITEM_H
+
+#include <QModelIndex>
+#include <QObject>
+
+#include "stdafx.h"
+class T_TreeItem : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY_CREATE(QList<T_TreeItem*>, ChildrenItems)
+    Q_PROPERTY_CREATE(bool, IsChecked)
+    Q_PRIVATE_CREATE(T_TreeItem*, ParentItem)
+public:
+    explicit T_TreeItem(QString itemTitle, T_TreeItem* parent = nullptr);
+    ~T_TreeItem();
+    QString getItemKey() const;
+    QString getItemTitle() const;
+
+    void setChildChecked(bool isChecked);
+    Qt::CheckState getChildCheckState();
+
+    void appendChildItem(T_TreeItem* childItem);
+    bool getIsHasChild() const;
+    int getRow() const;
+
+private:
+    QString _itemKey = "";
+    QString _itemTitle = "";
+    bool _isExpanded{false};
+};
+
+#endif // T_TREEITEM_H
@@ -0,0 +1,169 @@
+#include "T_TreeViewModel.h"
+
+#include <QIcon>
+
+#include "T_TreeItem.h"
+T_TreeViewModel::T_TreeViewModel(QObject* parent)
+    : QAbstractItemModel{parent}
+{
+    _rootItem = new T_TreeItem("root");
+    for (int i = 0; i < 20; i++)
+    {
+        T_TreeItem* level1Item = new T_TreeItem(QString("Lv1--TreeItem%1").arg(i + 1), _rootItem);
+        for (int j = 0; j < 6; j++)
+        {
+            T_TreeItem* level2Item = new T_TreeItem(QString("Lv2--TreeItem%1").arg(j + 1), level1Item);
+            for (int k = 0; k < 6; k++)
+            {
+                T_TreeItem* level3Item = new T_TreeItem(QString("Lv3--TreeItem%1").arg(k + 1), level2Item);
+                for (int l = 0; l < 6; l++)
+                {
+                    T_TreeItem* level4Item = new T_TreeItem(QString("Lv4--TreeItem%1").arg(l + 1), level3Item);
+                    level3Item->appendChildItem(level4Item);
+                    _itemsMap.insert(level4Item->getItemKey(), level4Item);
+                }
+                level2Item->appendChildItem(level3Item);
+                _itemsMap.insert(level3Item->getItemKey(), level3Item);
+            }
+            level1Item->appendChildItem(level2Item);
+            _itemsMap.insert(level2Item->getItemKey(), level2Item);
+        }
+        _rootItem->appendChildItem(level1Item);
+        _itemsMap.insert(level1Item->getItemKey(), level1Item);
+    }
+}
+
+T_TreeViewModel::~T_TreeViewModel()
+{
+    delete _rootItem;
+}
+
+QModelIndex T_TreeViewModel::parent(const QModelIndex& child) const
+{
+    if (!child.isValid())
+    {
+        return QModelIndex();
+    }
+    T_TreeItem* childItem = static_cast<T_TreeItem*>(child.internalPointer());
+    T_TreeItem* parentItem = childItem->getParentItem();
+    if (parentItem == _rootItem)
+    {
+        return QModelIndex();
+    }
+    else if (parentItem == nullptr)
+    {
+        return QModelIndex();
+    }
+    return createIndex(parentItem->getRow(), 0, parentItem);
+}
+
+QModelIndex T_TreeViewModel::index(int row, int column, const QModelIndex& parent) const
+{
+    if (!hasIndex(row, column, parent))
+    {
+        return QModelIndex();
+    }
+    T_TreeItem* parentItem;
+    if (!parent.isValid())
+    {
+        parentItem = _rootItem;
+    }
+    else
+    {
+        parentItem = static_cast<T_TreeItem*>(parent.internalPointer());
+    }
+    T_TreeItem* childItem = nullptr;
+    if (parentItem->getChildrenItems().count() > row)
+    {
+        childItem = parentItem->getChildrenItems().at(row);
+    }
+    if (childItem)
+    {
+        return createIndex(row, column, childItem);
+    }
+    return QModelIndex();
+}
+
+int T_TreeViewModel::rowCount(const QModelIndex& parent) const
+{
+    T_TreeItem* parentItem;
+    if (parent.column() > 0)
+    {
+        return 0;
+    }
+    if (!parent.isValid())
+    {
+        parentItem = _rootItem;
+    }
+    else
+    {
+        parentItem = static_cast<T_TreeItem*>(parent.internalPointer());
+    }
+    return parentItem->getChildrenItems().count();
+}
+
+int T_TreeViewModel::columnCount(const QModelIndex& parent) const
+{
+    Q_UNUSED(parent)
+    return 1;
+}
+
+QVariant T_TreeViewModel::data(const QModelIndex& index, int role) const
+{
+    if (role == Qt::DisplayRole)
+    {
+        return static_cast<T_TreeItem*>(index.internalPointer())->getItemTitle();
+    }
+    else if (role == Qt::DecorationRole)
+    {
+        return QIcon(":/Resource/Image/Cirno.jpg");
+    }
+    else if (role == Qt::CheckStateRole)
+    {
+        T_TreeItem* item = static_cast<T_TreeItem*>(index.internalPointer());
+        if (item->getIsHasChild())
+        {
+            return item->getChildCheckState();
+        }
+        else
+        {
+            return item->getIsChecked() ? Qt::Checked : Qt::Unchecked;
+        }
+        return Qt::Unchecked;
+    }
+    return QVariant();
+}
+
+bool T_TreeViewModel::setData(const QModelIndex& index, const QVariant& value, int role)
+{
+    if (role == Qt::CheckStateRole)
+    {
+        T_TreeItem* item = static_cast<T_TreeItem*>(index.internalPointer());
+        item->setIsChecked(!item->getIsChecked());
+        item->setChildChecked(item->getIsChecked());
+        Q_EMIT dataChanged(QModelIndex(), QModelIndex(), {role});
+        return true;
+    }
+    return QAbstractItemModel::setData(index, value, role);
+}
+
+Qt::ItemFlags T_TreeViewModel::flags(const QModelIndex& index) const
+{
+    Qt::ItemFlags flags = QAbstractItemModel::flags(index);
+    flags |= Qt::ItemIsUserCheckable;
+    return flags;
+}
+
+QVariant T_TreeViewModel::headerData(int section, Qt::Orientation orientation, int role) const
+{
+    if (orientation == Qt::Horizontal && role == Qt::DisplayRole)
+    {
+        return QString("ElaTreeView-Example-4Level");
+    }
+    return QAbstractItemModel::headerData(section, orientation, role);
+}
+
+int T_TreeViewModel::getItemCount() const
+{
+    return this->_itemsMap.count();
+}
@@ -0,0 +1,30 @@
+#ifndef T_TREEVIEWMODEL_H
+#define T_TREEVIEWMODEL_H
+
+#include <QAbstractItemModel>
+#include <QObject>
+
+class T_TreeItem;
+class T_TreeViewModel : public QAbstractItemModel
+{
+    Q_OBJECT
+public:
+    explicit T_TreeViewModel(QObject* parent = nullptr);
+    ~T_TreeViewModel();
+    QModelIndex parent(const QModelIndex& child) const override;
+    QModelIndex index(int row, int column, const QModelIndex& parent = QModelIndex()) const override;
+    int rowCount(const QModelIndex& parent = QModelIndex()) const override;
+    int columnCount(const QModelIndex& parent = QModelIndex()) const override;
+    QVariant data(const QModelIndex& index, int role = Qt::DisplayRole) const override;
+    bool setData(const QModelIndex& index, const QVariant& value, int role = Qt::EditRole) override;
+    Qt::ItemFlags flags(const QModelIndex& index) const override;
+    QVariant headerData(int section, Qt::Orientation orientation, int role = Qt::DisplayRole) const override;
+
+    int getItemCount() const;
+
+private:
+    QMap<QString, T_TreeItem*> _itemsMap;
+    T_TreeItem* _rootItem{nullptr};
+};
+
+#endif // T_TREEVIEWMODEL_H
--- a/Show More
+++ b/Show More