update

.cmake/InstallerScript.iss.in

@@ -30,6 +30,7 @@ SolidCompression=yes
 WizardStyle=modern
 UninstallDisplayIcon={app}\{#MyAppExeName}
 SetupIconFile=.\..\favicon.ico
+MinVersion = 6.0
 
 [Languages]
 Name: "chinesesimplified"; MessagesFile: "compiler:Languages\ChineseSimplified.isl"

.github/workflows/macos.yml

@@ -22,7 +22,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-13]
-        qt_ver: [6.6.0]
+        qt_ver: [6.6.1]
         qt_arch: [clang_64]
     env:
       targetName: example
@@ -50,11 +50,13 @@ jobs:
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/6.6.0/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/6.6.1/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: package
         run: |
+          # 先删除所有dSYM文件，减少包的体积
+          sudo find /Users/runner/work/FluentUI/Qt/6.6.1/macos/qml -name "*.dSYM" | xargs rm -r
           # 拷贝依赖
           sudo macdeployqt bin/release/${targetName}.app -qmldir=. -dmg     
           

.github/workflows/ubuntu.yml

@@ -23,7 +23,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-20.04]
-        qt_ver: [6.6.0]
+        qt_ver: [6.6.1]
         qt_arch: [gcc_64]
     env:
       targetName: example
@@ -55,7 +55,7 @@ jobs:
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/6.6.0/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/6.6.1/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: install QT linux deploy

.github/workflows/windows-mingw.yml

@@ -24,7 +24,7 @@ jobs:
         os: [windows-2022]
         include:
           - qt_arch: win64_mingw
-            qt_ver: 6.6.0
+            qt_ver: 6.6.1
             qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
             qt_tools_mingw_install: mingw900_64
     env:
@@ -69,7 +69,7 @@ jobs:
           mkdir build
           cd build
           ninja --version
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.6.0\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.6.1\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
       
       - name: package

.github/workflows/windows.yml

@@ -23,7 +23,7 @@ jobs:
       matrix:
         os: [windows-2019]
         include:
-          - qt_ver: 6.6.0        
+          - qt_ver: 6.6.1        
             qt_arch: win64_msvc2019_64
             msvc_arch: x64
             qt_arch_install: msvc2019_64  
@@ -52,7 +52,7 @@ jobs:
           ninja --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.6.0\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.6.1\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
           echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%

.gitmodules

@@ -1,6 +0,0 @@
-[submodule "framelesshelper"]
-	path = framelesshelper
-	url = https://github.com/zhuzichu520/framelesshelper.git
-[submodule "zxing-cpp"]
-	path = zxing-cpp
-	url = https://github.com/zhuzichu520/zxing-cpp.git

CMakeLists.txt

@@ -1,6 +1,6 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(FluentUI VERSION 0.1 LANGUAGES CXX)
+project(FluentUI VERSION 1.0)
 
 set(FLUENTUI_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
 list(APPEND CMAKE_MODULE_PATH ${FLUENTUI_DIRECTORY}/.cmake/)
@@ -25,17 +25,17 @@ if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
 endif()
 
 add_subdirectory(src)
-add_subdirectory(zxing-cpp)
+
+#Release也支持日志打印代码位置
+target_compile_definitions(fluentuiplugin
+    PRIVATE
+    QT_MESSAGELOGCONTEXT
+)
 
 if (FLUENTUI_BUILD_EXAMPLES)
     add_subdirectory(example)
 endif ()
 
-set(FRAMELESSHELPER_BUILD_STATIC ON)
-set(FRAMELESSHELPER_NO_DEBUG_OUTPUT ON)
-set(FRAMELESSHELPER_BUILD_WIDGETS OFF)
-add_subdirectory(framelesshelper)
-
 message("------------------------ FluentUI ------------------------")
 message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
 message("Build static library.: ${FLUENTUI_BUILD_STATIC_LIB}")

example/CMakeLists.txt

@@ -1,12 +1,10 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(example VERSION 0.1 LANGUAGES CXX)
+project(example VERSION 1.0)
 
 #配置通用编译
+set(CMAKE_CXX_STANDARD 17)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
-if(APPLE)
-    set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
-endif()
 
 #导入exmaple的QML位置，不然import example有时候会爆红
 set(QML_IMPORT_PATH ${CMAKE_BINARY_DIR}/example CACHE STRING "Qt Creator extra QML import paths" FORCE)
@@ -26,6 +24,7 @@ endif()
 #获取文件路径分隔符（解决执行命令的时候有些平台会报错）
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
+#导入Qt相关依赖包
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
 
@@ -53,22 +52,28 @@ endforeach(filepath)
 
 if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     #遍历所有qml文件
-    file(GLOB_RECURSE QML_PATHS *.qml)
+    file(GLOB_RECURSE QML_PATHS *.qml qmldir)
     foreach(filepath ${QML_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-        if(${filepath} MATCHES "Qt${QT_VERSION_MAJOR}/")
-            string(REPLACE "qml-Qt${QT_VERSION_MAJOR}" "qml" filealias ${filename})
+        if(${filepath} MATCHES "qml-Qt6")
+            string(REPLACE "qml-Qt6" "qml" filealias ${filename})
             set_source_files_properties(${filename} PROPERTIES QT_RESOURCE_ALIAS ${filealias})
-            list(APPEND qml_files ${filename})
+            if(${filename} MATCHES "qmldir")
+                list(APPEND resource_files ${filename})
+            else()
+                list(APPEND qml_files ${filename})
+            endif()
         endif()
     endforeach(filepath)
 
     #遍历所有资源文件
-    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.obj qmldir)
+    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.obj)
     foreach(filepath ${RES_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
+        message(${filename})
         list(APPEND resource_files ${filename})
     endforeach(filepath)
+
 endif()
 
 #如果是Windows平台，则生成rc文件，还有inno setup脚本文件
@@ -79,10 +84,10 @@ if(WIN32)
         ${FLUENTUI_DIRECTORY}/.cmake/version_exe.rc.in
         ${EXAMPLE_VERSION_RC_PATH}
     )
-    configure_file(
-        ${FLUENTUI_DIRECTORY}/.cmake/InstallerScript.iss.in
-        ${FLUENTUI_DIRECTORY}/action-cli/InstallerScript.iss
-    )
+configure_file(
+    ${FLUENTUI_DIRECTORY}/.cmake/InstallerScript.iss.in
+    ${FLUENTUI_DIRECTORY}/action-cli/InstallerScript.iss
+)
 endif()
 
 #添加可执行文件
@@ -97,20 +102,19 @@ else ()
     )
 endif ()
 
+#复制程序运行所需要的动态库
 if(WIN32)
-    #复制动态库到可执行文件同级目录下
-    if(CMAKE_SIZEOF_VOID_P EQUAL 4)
-        set(3RDPARTY_ARCH_DIR ${CMAKE_SOURCE_DIR}/3rdparty/Win_x86)
-    elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
-        set(3RDPARTY_ARCH_DIR ${CMAKE_SOURCE_DIR}/3rdparty/Win_x64)
-    endif()
     if(MSVC)
-        set(DLLPATH ${3RDPARTY_ARCH_DIR}/msvc/*.dll)
+        if(CMAKE_SIZEOF_VOID_P EQUAL 4)
+            set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
+        elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
+            set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
+        endif()
     elseif(MINGW)
-        set(DLLPATH ${3RDPARTY_ARCH_DIR}/mingw/*.dll)
+        set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
     endif()
-    string(REPLACE "/" ${PATH_SEPARATOR} DLLPATH "${DLLPATH}")
-    file(GLOB DLL_FILES ${DLLPATH})
+    string(REPLACE "/" ${PATH_SEPARATOR} 3RDPARTY_DLL_DIR "${3RDPARTY_DLL_DIR}")
+    file(GLOB DLL_FILES ${3RDPARTY_DLL_DIR})
     add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
         COMMAND ${CMAKE_COMMAND} -E copy
         ${DLL_FILES}
@@ -119,7 +123,7 @@ if(WIN32)
 endif()
 
 if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
-    #添加qml模块
+    #如果是Qt6.2以上，则使用qt_add_qml_module添加资源文件
     qt_add_qml_module(example
         URI "example"
         VERSION 1.0
@@ -128,10 +132,11 @@ if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
         RESOURCE_PREFIX "/"
     )
 else()
+    #如果是Qt6.2以下，则使用qrc添加资源文件
     target_include_directories(example PRIVATE
         ${CMAKE_CURRENT_SOURCE_DIR}
     )
-target_sources(example PRIVATE example.qrc)
+    target_sources(example PRIVATE example.qrc)
 endif()
 
 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
@@ -155,6 +160,13 @@ set_target_properties(example PROPERTIES
     WIN32_EXECUTABLE TRUE
 )
 
+#Release也支持日志打印代码位置
+target_compile_definitions(example
+    PRIVATE
+    QT_MESSAGELOGCONTEXT
+)
+
+#目标文件链接库
 target_link_libraries(example PRIVATE
     Qt${QT_VERSION_MAJOR}::Quick
     Qt${QT_VERSION_MAJOR}::Svg

example/example.qrc

@@ -134,7 +134,6 @@
         <file>qml/page/T_CalendarPicker.qml</file>
         <file>qml/page/T_Captcha.qml</file>
         <file>qml/page/T_Carousel.qml</file>
-        <file>qml/page/T_Chart.qml</file>
         <file>qml/page/T_CheckBox.qml</file>
         <file>qml/page/T_ColorPicker.qml</file>
         <file>qml/page/T_ComboBox.qml</file>
@@ -190,5 +189,12 @@
         <file>qml/global/Lang.qml</file>
         <file>qml/page/T_Network.qml</file>
         <file>qml/page/T_ShortcutPicker.qml</file>
+        <file>qml/chart/T_BarChart.qml</file>
+        <file>qml/chart/T_LineChart.qml</file>
+        <file>qml/chart/T_PieChart.qml</file>
+        <file>qml/chart/T_RadarChart.qml</file>
+        <file>qml/chart/T_ScatterChart.qml</file>
+        <file>qml/chart/T_BubbleChart.qml</file>
+        <file>qml/chart/T_PolarAreaChart.qml</file>
     </qresource>
 </RCC>

example/qml-Qt6/App.qml

@@ -16,21 +16,19 @@ Item {
 
     Connections{
         target: FluApp
-        function onVsyncChanged(){
-            SettingsHelper.saveVsync(FluApp.vsync)
-        }
         function onUseSystemAppBarChanged(){
             SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
         }
     }
 
     Component.onCompleted: {
+        FluNetwork.openLog = false
         FluNetwork.setInterceptor(function(param){
             param.addHeader("Token","000000000000000000000")
         })
         FluApp.init(app)
+        FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
         FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
-        FluApp.vsync = SettingsHelper.getVsync()
         FluTheme.darkMode = SettingsHelper.getDarkMode()
         FluTheme.enableAnimation = true
         FluApp.routes = {

example/qml-Qt6/chart/T_BarChart.qml

@@ -0,0 +1,132 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Bar Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'horizontalBar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js HorizontalBar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml-Qt6/chart/T_BubbleChart.qml

@@ -0,0 +1,74 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Bubble Chart"
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluArea{
+        height: 370
+        width: 500
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bubble'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'First Dataset',
+                            data: [{
+                                    x: 20,
+                                    y: 30,
+                                    r: 15
+                                }, {
+                                    x: 12,
+                                    y: 70,
+                                    r: 20
+                                }, {
+                                    x: 11,
+                                    y: 28,
+                                    r: 8
+                                }, {
+                                    x: 9,
+                                    y: 28,
+                                    r: 10
+                                }, {
+                                    x: 43,
+                                    y: 7,
+                                    r: 14
+                                }, {
+                                    x: 22,
+                                    y: 22,
+                                    r: 12
+                                }, {
+                                    x: 40,
+                                    y: 10,
+                                    r: 10
+                                }],
+                            backgroundColor: 'rgb(255, 99, 132)'
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bubble Chart - Multi Axis'
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml-Qt6/chart/T_LineChart.qml

@@ -0,0 +1,45 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Line Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'line'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            fill: false,
+                            borderColor: 'rgb(75, 192, 192)',
+                            tension: 0.1
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Line Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+}

example/qml-Qt6/chart/T_PieChart.qml

@@ -0,0 +1,93 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Doughnut and Pie Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "doughnut"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Doughnut Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "pie"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Pie Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+}

example/qml-Qt6/chart/T_PolarAreaChart.qml

@@ -0,0 +1,57 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"PolarArea Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'polarArea'
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Green',
+                        'Yellow',
+                        'Grey',
+                        'Blue'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [11, 16, 7, 3, 14],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(75, 192, 192)',
+                                'rgb(255, 205, 86)',
+                                'rgb(201, 203, 207)',
+                                'rgb(54, 162, 235)'
+                            ]
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js PolarArea Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml-Qt6/chart/T_RadarChart.qml

@@ -0,0 +1,74 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Radar Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'radar'
+            chartData: { return {
+                    labels: [
+                        'Eating',
+                        'Drinking',
+                        'Sleeping',
+                        'Designing',
+                        'Coding',
+                        'Cycling',
+                        'Running'
+                    ],
+                    datasets:
+                        [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 90, 81, 56, 55, 40],
+                            fill: true,
+                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                            borderColor: 'rgb(255, 99, 132)',
+                            pointBackgroundColor: 'rgb(255, 99, 132)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(255, 99, 132)'
+                        }, {
+                            label: 'My Second Dataset',
+                            data: [28, 48, 40, 19, 96, 27, 100],
+                            fill: true,
+                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                            borderColor: 'rgb(54, 162, 235)',
+                            pointBackgroundColor: 'rgb(54, 162, 235)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(54, 162, 235)'
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Radar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    elements: {
+                        line: {
+                            borderWidth: 3
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml-Qt6/chart/T_ScatterChart.qml

@@ -0,0 +1,123 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Scatter Chart"
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluArea{
+        height: 370
+        width: 500
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'scatter'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'My First dataset',
+                            xAxisID: 'x-axis-1',
+                            yAxisID: 'y-axis-1',
+                            borderColor: '#ff5555',
+                            backgroundColor: 'rgba(255,192,192,0.3)',
+                            data: [{
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }]
+                        }, {
+                            label: 'My Second dataset',
+                            xAxisID: 'x-axis-1',
+                            yAxisID: 'y-axis-2',
+                            borderColor: '#5555ff',
+                            backgroundColor: 'rgba(192,192,255,0.3)',
+                            data: [{
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }]
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Scatter Chart - Multi Axis'
+                    },
+                    scales: {
+                        xAxes: [{
+                                position: 'bottom',
+                                gridLines: {
+                                    zeroLineColor: 'rgba(0,0,0,1)'
+                                }
+                            }],
+                        yAxes: [{
+                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                                display: true,
+                                position: 'left',
+                                id: 'y-axis-1',
+                            }, {
+                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                                display: true,
+                                position: 'right',
+                                reverse: true,
+                                id: 'y-axis-2',
+
+                                // grid line settings
+                                gridLines: {
+                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
+                                },
+                            }],
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml-Qt6/global/ItemsOriginal.qml

@@ -50,9 +50,7 @@ FluObject{
             }
             title:"Buttons"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/Button.png"
-            recentlyUpdated:true
-            desc:"A control that responds to user input and raisesa Click event."
+            extra:({image:"qrc:/example/res/image/control/Button.png",recentlyUpdated:true,desc:"A control that responds to user input and raisesa Click event."})
             url:"qrc:/example/qml/page/T_Buttons.qml"
             onTap:{
                 item_buttons.count = 0
@@ -83,18 +81,14 @@ FluObject{
         FluPaneItem{
             title:"Slider"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/Slider.png"
-            recentlyUpdated:true
-            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
+            extra:({image:"qrc:/example/res/image/control/Slider.png",recentlyUpdated:true,desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."})
             url:"qrc:/example/qml/page/T_Slider.qml"
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/Checkbox.png"
-            recentlyUpdated:true
-            desc:"A control that a user can select or clear."
+            extra:({image:"qrc:/example/res/image/control/Checkbox.png",recentlyUpdated:true,desc:"A control that a user can select or clear."})
             url:"qrc:/example/qml/page/T_CheckBox.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -164,9 +158,7 @@ FluObject{
         FluPaneItem{
             title:"InfoBar"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/InfoBar.png"
-            recentlyUpdated:true
-            desc:"An inline message to display app-wide statuschange information."
+            extra:({image:"qrc:/example/res/image/control/InfoBar.png",recentlyUpdated:true,desc:"An inline message to display app-wide statuschange information."})
             url:"qrc:/example/qml/page/T_InfoBar.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -276,10 +268,7 @@ FluObject{
         FluPaneItem{
             title:"Pivot"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/Pivot.png"
-            recentlyAdded:true
-            order:3
-            desc:"Presents information from different sources in atabbed view."
+            extra:({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:"Presents information from different sources in atabbed view."})
             url:"qrc:/example/qml/page/T_Pivot.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -292,10 +281,7 @@ FluObject{
         FluPaneItem{
             title:"TabView"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/TabView.png"
-            recentlyAdded:true
-            order:1
-            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
+            extra:({image:"qrc:/example/res/image/control/TabView.png",order:1,recentlyAdded:true,desc:"A control that displays a collection of tabs thatcan be used to display several documents."})
             url:"qrc:/example/qml/page/T_TabView.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -308,10 +294,7 @@ FluObject{
         FluPaneItem{
             title:"TableView"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/DataGrid.png"
-            recentlyAdded:true
-            order:4
-            desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
+            extra:({image:"qrc:/example/res/image/control/DataGrid.png",order:4,recentlyAdded:true,desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"})
             url:"qrc:/example/qml/page/T_TableView.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -330,10 +313,7 @@ FluObject{
         FluPaneItem{
             title:"FlipView"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/FlipView.png"
-            recentlyAdded:true
-            order:2
-            desc:"Presents a collection of items that the user canflip through, one item at a time."
+            extra:({image:"qrc:/example/res/image/control/FlipView.png",order:2,recentlyAdded:true,desc:"Presents a collection of items that the user canflip through, one item at a time."})
             url:"qrc:/example/qml/page/T_FlipView.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -368,6 +348,53 @@ FluObject{
         }
     }
 
+    FluPaneItemExpander{
+        title: Lang.chart
+        icon:FluentIcons.AreaChart
+        FluPaneItem{
+            title:Lang.bar_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_BarChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.line_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_LineChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.pie_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_PieChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.polar_area_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_PolarAreaChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.bubble_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_BubbleChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.scatter_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_ScatterChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.radar_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_RadarChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+    }
+
     FluPaneItemSeparator{
         spacing:10
         size:1
@@ -406,12 +433,6 @@ FluObject{
             url:"qrc:/example/qml/page/T_Captcha.qml"
             onTap:{ navigationView.push(url) }
         }
-        FluPaneItem{
-            title:"Chart"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Chart.qml"
-            onTap:{ navigationView.push(url) }
-        }
         FluPaneItem{
             title:"Network"
             menuDelegate: paneItemMenu
@@ -449,21 +470,14 @@ FluObject{
 
     function getRecentlyAddedData(){
         var arr = []
-        for(var i=0;i<children.length;i++){
-            var item = children[i]
-            if(item instanceof FluPaneItem && item.recentlyAdded){
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyAdded){
                 arr.push(item)
             }
-            if(item instanceof FluPaneItemExpander){
-                for(var j=0;j<item.children.length;j++){
-                    var itemChild = item.children[j]
-                    if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
-                        arr.push(itemChild)
-                    }
-                }
-            }
         }
-        arr.sort(function(o1,o2){ return o2.order-o1.order })
+        arr.sort(function(o1,o2){ return o2.extra.order-o1.extra.order })
         return arr
     }
 
@@ -472,7 +486,7 @@ FluObject{
         var items = navigationView.getItems();
         for(var i=0;i<items.length;i++){
             var item = items[i]
-            if(item instanceof FluPaneItem && item.recentlyUpdated){
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyUpdated){
                 arr.push(item)
             }
         }

example/qml-Qt6/global/Lang.qml

@@ -20,6 +20,14 @@ QtObject {
     property string locale
     property string navigation_view_display_mode
     property string other
+    property string chart
+    property string bar_chart
+    property string line_chart
+    property string pie_chart
+    property string polar_area_chart
+    property string bubble_chart
+    property string scatter_chart
+    property string radar_chart
 
     function zh(){
         home="首页"
@@ -38,6 +46,14 @@ QtObject {
         locale="语言环境"
         navigation_view_display_mode="导航视图显示模式"
         other="其他"
+        chart="表格"
+        bar_chart="条形图"
+        line_chart="折线图"
+        pie_chart="饼图"
+        polar_area_chart="极坐标区域图"
+        bubble_chart="气泡图"
+        scatter_chart="散点图"
+        radar_chart="雷达图"
     }
 
     function en(){
@@ -57,6 +73,14 @@ QtObject {
         locale="Locale"
         navigation_view_display_mode="NavigationView Display Mode"
         other="Other"
+        chart="Chart"
+        bar_chart="Bar Chart"
+        line_chart="Line Chart"
+        pie_chart="Pie Chart"
+        polar_area_chart="Polar Area Chart"
+        bubble_chart="Bubble Chart"
+        scatter_chart="Scatter Chart"
+        radar_chart="Radar Chart"
     }
 
     property string __locale

example/qml-Qt6/page/T_Chart.qml

@@ -1,331 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Chart"
-
-    function randomScalingFactor() {
-        return Math.random().toFixed(1);
-    }
-
-    FluArea{
-        height: 370
-        width: 500
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'scatter'
-            chartData: {
-                return {
-                    datasets: [{
-                            label: 'My First dataset',
-                            xAxisID: 'x-axis-1',
-                            yAxisID: 'y-axis-1',
-                            borderColor: '#ff5555',
-                            backgroundColor: 'rgba(255,192,192,0.3)',
-                            data: [{
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }]
-                        }, {
-                            label: 'My Second dataset',
-                            xAxisID: 'x-axis-1',
-                            yAxisID: 'y-axis-2',
-                            borderColor: '#5555ff',
-                            backgroundColor: 'rgba(192,192,255,0.3)',
-                            data: [{
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }]
-                        }]
-                }}
-            chartOptions: {return {
-                    maintainAspectRatio: false,
-                    responsive: true,
-                    hoverMode: 'nearest',
-                    intersect: true,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Scatter Chart - Multi Axis'
-                    },
-                    scales: {
-                        xAxes: [{
-                                position: 'bottom',
-                                gridLines: {
-                                    zeroLineColor: 'rgba(0,0,0,1)'
-                                }
-                            }],
-                        yAxes: [{
-                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                                display: true,
-                                position: 'left',
-                                id: 'y-axis-1',
-                            }, {
-                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                                display: true,
-                                position: 'right',
-                                reverse: true,
-                                id: 'y-axis-2',
-
-                                // grid line settings
-                                gridLines: {
-                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
-                                },
-                            }],
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'bar'
-            chartData: { return {
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [{
-                            label: 'Dataset 1',
-                            backgroundColor: '#ff9999',
-                            stack: 'Stack 0',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ]
-                        }, {
-                            label: 'Dataset 2',
-                            backgroundColor: '#9999ff',
-                            stack: 'Stack 0',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ]
-                        }, {
-                            label: 'Dataset 3',
-                            backgroundColor: '#99ff99',
-                            stack: 'Stack 1',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ]
-                        }]
-                }
-            }
-
-            chartOptions: { return {
-                    maintainAspectRatio: false,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Bar Chart - Stacked'
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false
-                    },
-                    responsive: true,
-                    scales: {
-                        xAxes: [{
-                                stacked: true,
-                            }],
-                        yAxes: [{
-                                stacked: true
-                            }]
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'pie'
-            chartData: {return {
-                    datasets: [{
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                            ],
-                            backgroundColor: [
-                                '#ffbbbb',
-                                '#ffddaa',
-                                '#ffffbb',
-                                '#bbffbb',
-                                '#bbbbff'
-                            ],
-                            label: 'Dataset 1'
-                        }],
-                    labels: [
-                        'Red',
-                        'Orange',
-                        'Yellow',
-                        'Green',
-                        'Blue'
-                    ]
-                }}
-            chartOptions: {return {maintainAspectRatio: false, responsive: true}}
-        }
-    }
-
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'line'
-            chartData: { return {
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [{
-                            label: 'Filled',
-                            fill: true,
-                            backgroundColor: 'rgba(192,222,255,0.3)',
-                            borderColor: 'rgba(128,192,255,255)',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ],
-                        }, {
-                            label: 'Dashed',
-                            fill: false,
-                            backgroundColor: 'rgba(0,0,0,0)',
-                            borderColor: '#009900',
-                            borderDash: [5, 5],
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ],
-                        }, {
-                            label: 'Filled',
-                            backgroundColor: 'rgba(0,0,0,0)',
-                            borderColor: '#990000',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ],
-                            fill: false,
-                        }]
-                }
-            }
-
-            chartOptions: {return {
-                    maintainAspectRatio: false,
-                    responsive: true,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Line Chart'
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false,
-                    },
-                    hover: {
-                        mode: 'nearest',
-                        intersect: true
-                    },
-                    scales: {
-                        xAxes: [{
-                                display: true,
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: 'Month'
-                                }
-                            }],
-                        yAxes: [{
-                                display: true,
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: 'Value'
-                                }
-                            }]
-                    }
-                }
-            }
-        }
-    }
-
-}

example/qml-Qt6/page/T_Home.qml

@@ -160,7 +160,7 @@ FluScrollablePage{
     Component{
         id:com_item
         Item{
-            property string desc: modelData.desc
+            property string desc: modelData.extra.desc
             width: 320
             height: 120
             FluArea{
@@ -182,7 +182,7 @@ FluScrollablePage{
                     id:item_icon
                     height: 40
                     width: 40
-                    source: modelData.image
+                    source: modelData.extra.image
                     anchors{
                         left: parent.left
                         leftMargin: 20

example/qml-Qt6/page/T_Network.qml

@@ -64,6 +64,20 @@ FluContentPage{
                     .go(callable)
                 }
             }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Head"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.head("https://httpbingo.org/head")
+                    .addQuery("name","孙悟空")
+                    .addQuery("age",500)
+                    .addQuery("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
             FluButton{
                 implicitWidth: parent.width
                 implicitHeight: 36
@@ -280,6 +294,21 @@ FluContentPage{
                     .go(callable)
                 }
             }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Open Log"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postJson("https://httpbingo.org/post")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .openLog(true)
+                    .bind(root)
+                    .go(callable)
+                }
+            }
             FluButton{
                 implicitWidth: parent.width
                 implicitHeight: 36

example/qml-Qt6/page/T_Settings.qml

@@ -56,22 +56,6 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        FluCheckBox{
-            text:"V-Sync"
-            checked: FluApp.vsync
-            anchors.verticalCenter: parent.verticalCenter
-            onClicked: {
-                FluApp.vsync = !FluApp.vsync
-                dialog_restart.open()
-            }
-        }
-    }
-
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -103,26 +87,6 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        FluCheckBox{
-            text:"Software Render"
-            checked: SettingsHelper.getRender() === "software"
-            anchors.verticalCenter: parent.verticalCenter
-            onClicked: {
-                if(SettingsHelper.getRender() === "software"){
-                    SettingsHelper.saveRender("")
-                }else{
-                    SettingsHelper.saveRender("software")
-                }
-                dialog_restart.open()
-            }
-        }
-    }
-
     FluContentDialog{
         id:dialog_restart
         title:"友情提示"

example/qml-Qt6/window/AboutWindow.qml

@@ -9,7 +9,7 @@ FluWindow {
     id:window
     title:"关于"
     width: 600
-    height: 600
+    height: 580
     fixSize: true
     launchMode: FluWindowType.SingleTask
 

example/qml-Qt6/window/MainWindow.qml

@@ -13,14 +13,13 @@ FluWindow {
 
     id:window
     title: "FluentUI"
-    width: 1000
-    height: 640
+    width: 960
+    height: 600
     minimumWidth: 520
     minimumHeight: 200
     launchMode: FluWindowType.SingleTask
     fitsAppBarWindows: true
     appBar: FluAppBar {
-        width: window.width
         height: 30
         darkText: Lang.dark_mode
         showDark: true
@@ -42,7 +41,15 @@ FluWindow {
     }
 
     onFirstVisible: {
-        tour.open()
+        timer_tour_delay.restart()
+    }
+
+    Timer{
+        id:timer_tour_delay
+        interval: 200
+        onTriggered: {
+            tour.open()
+        }
     }
 
     Component.onCompleted: {
@@ -191,7 +198,12 @@ FluWindow {
                 pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
-                topPadding:FluTools.isMacos() ? 20 : 0
+                topPadding:{
+                    if(window.useSystemAppBar){
+                        return 0
+                    }
+                    return FluTools.isMacos() ? 20 : 0
+                }
                 displayMode:viewmodel_settings.displayMode
                 logo: "qrc:/example/res/image/favicon.ico"
                 title:"FluentUI"
@@ -228,7 +240,7 @@ FluWindow {
         id:com_reveal
         CircularReveal{
             id:reveal
-            target:window.contentItem
+            target:window.layoutContainer()
             anchors.fill: parent
             onAnimationFinished:{
                 //动画结束后释放资源
@@ -253,8 +265,11 @@ FluWindow {
         if(!FluTheme.enableAnimation || window.fitsAppBarWindows === false){
             changeDark()
         }else{
+            if(loader_reveal.sourceComponent){
+                return
+            }
             loader_reveal.sourceComponent = com_reveal
-            var target = window.contentItem
+            var target = window.layoutContainer()
             var pos = button.mapToItem(target,0,0)
             var mouseX = pos.x
             var mouseY = pos.y

example/qml/App.qml

@@ -16,21 +16,19 @@ Item {
 
     Connections{
         target: FluApp
-        function onVsyncChanged(){
-            SettingsHelper.saveVsync(FluApp.vsync)
-        }
         function onUseSystemAppBarChanged(){
             SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
         }
     }
 
     Component.onCompleted: {
+        FluNetwork.openLog = false
         FluNetwork.setInterceptor(function(param){
             param.addHeader("Token","000000000000000000000")
         })
         FluApp.init(app)
+        FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
         FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
-        FluApp.vsync = SettingsHelper.getVsync()
         FluTheme.darkMode = SettingsHelper.getDarkMode()
         FluTheme.enableAnimation = true
         FluApp.routes = {

example/qml/chart/T_BarChart.qml

@@ -0,0 +1,133 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "qrc:///example/qml/component"
+import "../component"
+
+FluScrollablePage{
+
+    title:"Bar Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'horizontalBar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js HorizontalBar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml/chart/T_BubbleChart.qml

@@ -0,0 +1,75 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "qrc:///example/qml/component"
+import "../component"
+
+FluScrollablePage{
+
+    title:"Bubble Chart"
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluArea{
+        height: 370
+        width: 500
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bubble'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'First Dataset',
+                            data: [{
+                                    x: 20,
+                                    y: 30,
+                                    r: 15
+                                }, {
+                                    x: 12,
+                                    y: 70,
+                                    r: 20
+                                }, {
+                                    x: 11,
+                                    y: 28,
+                                    r: 8
+                                }, {
+                                    x: 9,
+                                    y: 28,
+                                    r: 10
+                                }, {
+                                    x: 43,
+                                    y: 7,
+                                    r: 14
+                                }, {
+                                    x: 22,
+                                    y: 22,
+                                    r: 12
+                                }, {
+                                    x: 40,
+                                    y: 10,
+                                    r: 10
+                                }],
+                            backgroundColor: 'rgb(255, 99, 132)'
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bubble Chart - Multi Axis'
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml/chart/T_LineChart.qml

@@ -0,0 +1,46 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "qrc:///example/qml/component"
+import "../component"
+
+FluScrollablePage{
+
+    title:"Line Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'line'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            fill: false,
+                            borderColor: 'rgb(75, 192, 192)',
+                            tension: 0.1
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Line Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+}

example/qml/chart/T_PieChart.qml

@@ -0,0 +1,94 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "qrc:///example/qml/component"
+import "../component"
+
+FluScrollablePage{
+
+    title:"Doughnut and Pie Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "doughnut"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Doughnut Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "pie"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Pie Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+}

example/qml/chart/T_PolarAreaChart.qml

@@ -0,0 +1,58 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "qrc:///example/qml/component"
+import "../component"
+
+FluScrollablePage{
+
+    title:"PolarArea Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'polarArea'
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Green',
+                        'Yellow',
+                        'Grey',
+                        'Blue'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [11, 16, 7, 3, 14],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(75, 192, 192)',
+                                'rgb(255, 205, 86)',
+                                'rgb(201, 203, 207)',
+                                'rgb(54, 162, 235)'
+                            ]
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js PolarArea Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml/chart/T_RadarChart.qml

@@ -0,0 +1,75 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "qrc:///example/qml/component"
+import "../component"
+
+FluScrollablePage{
+
+    title:"Radar Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'radar'
+            chartData: { return {
+                    labels: [
+                        'Eating',
+                        'Drinking',
+                        'Sleeping',
+                        'Designing',
+                        'Coding',
+                        'Cycling',
+                        'Running'
+                    ],
+                    datasets:
+                        [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 90, 81, 56, 55, 40],
+                            fill: true,
+                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                            borderColor: 'rgb(255, 99, 132)',
+                            pointBackgroundColor: 'rgb(255, 99, 132)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(255, 99, 132)'
+                        }, {
+                            label: 'My Second Dataset',
+                            data: [28, 48, 40, 19, 96, 27, 100],
+                            fill: true,
+                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                            borderColor: 'rgb(54, 162, 235)',
+                            pointBackgroundColor: 'rgb(54, 162, 235)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(54, 162, 235)'
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Radar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    elements: {
+                        line: {
+                            borderWidth: 3
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml/chart/T_ScatterChart.qml

@@ -0,0 +1,124 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "qrc:///example/qml/component"
+import "../component"
+
+FluScrollablePage{
+
+    title:"Scatter Chart"
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluArea{
+        height: 370
+        width: 500
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'scatter'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'My First dataset',
+                            xAxisID: 'x-axis-1',
+                            yAxisID: 'y-axis-1',
+                            borderColor: '#ff5555',
+                            backgroundColor: 'rgba(255,192,192,0.3)',
+                            data: [{
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }]
+                        }, {
+                            label: 'My Second dataset',
+                            xAxisID: 'x-axis-1',
+                            yAxisID: 'y-axis-2',
+                            borderColor: '#5555ff',
+                            backgroundColor: 'rgba(192,192,255,0.3)',
+                            data: [{
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }]
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Scatter Chart - Multi Axis'
+                    },
+                    scales: {
+                        xAxes: [{
+                                position: 'bottom',
+                                gridLines: {
+                                    zeroLineColor: 'rgba(0,0,0,1)'
+                                }
+                            }],
+                        yAxes: [{
+                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                                display: true,
+                                position: 'left',
+                                id: 'y-axis-1',
+                            }, {
+                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                                display: true,
+                                position: 'right',
+                                reverse: true,
+                                id: 'y-axis-2',
+
+                                // grid line settings
+                                gridLines: {
+                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
+                                },
+                            }],
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml/global/ItemsOriginal.qml

@@ -50,9 +50,7 @@ FluObject{
             }
             title:"Buttons"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/Button.png"
-            recentlyUpdated:true
-            desc:"A control that responds to user input and raisesa Click event."
+            extra:({image:"qrc:/example/res/image/control/Button.png",recentlyUpdated:true,desc:"A control that responds to user input and raisesa Click event."})
             url:"qrc:/example/qml/page/T_Buttons.qml"
             onTap:{
                 item_buttons.count = 0
@@ -83,18 +81,14 @@ FluObject{
         FluPaneItem{
             title:"Slider"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/Slider.png"
-            recentlyUpdated:true
-            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
+            extra:({image:"qrc:/example/res/image/control/Slider.png",recentlyUpdated:true,desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."})
             url:"qrc:/example/qml/page/T_Slider.qml"
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/Checkbox.png"
-            recentlyUpdated:true
-            desc:"A control that a user can select or clear."
+            extra:({image:"qrc:/example/res/image/control/Checkbox.png",recentlyUpdated:true,desc:"A control that a user can select or clear."})
             url:"qrc:/example/qml/page/T_CheckBox.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -164,9 +158,7 @@ FluObject{
         FluPaneItem{
             title:"InfoBar"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/InfoBar.png"
-            recentlyUpdated:true
-            desc:"An inline message to display app-wide statuschange information."
+            extra:({image:"qrc:/example/res/image/control/InfoBar.png",recentlyUpdated:true,desc:"An inline message to display app-wide statuschange information."})
             url:"qrc:/example/qml/page/T_InfoBar.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -276,10 +268,7 @@ FluObject{
         FluPaneItem{
             title:"Pivot"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/Pivot.png"
-            recentlyAdded:true
-            order:3
-            desc:"Presents information from different sources in atabbed view."
+            extra:({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:"Presents information from different sources in atabbed view."})
             url:"qrc:/example/qml/page/T_Pivot.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -292,10 +281,7 @@ FluObject{
         FluPaneItem{
             title:"TabView"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/TabView.png"
-            recentlyAdded:true
-            order:1
-            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
+            extra:({image:"qrc:/example/res/image/control/TabView.png",order:1,recentlyAdded:true,desc:"A control that displays a collection of tabs thatcan be used to display several documents."})
             url:"qrc:/example/qml/page/T_TabView.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -308,10 +294,7 @@ FluObject{
         FluPaneItem{
             title:"TableView"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/DataGrid.png"
-            recentlyAdded:true
-            order:4
-            desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
+            extra:({image:"qrc:/example/res/image/control/DataGrid.png",order:4,recentlyAdded:true,desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"})
             url:"qrc:/example/qml/page/T_TableView.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -330,10 +313,7 @@ FluObject{
         FluPaneItem{
             title:"FlipView"
             menuDelegate: paneItemMenu
-            image:"qrc:/example/res/image/control/FlipView.png"
-            recentlyAdded:true
-            order:2
-            desc:"Presents a collection of items that the user canflip through, one item at a time."
+            extra:({image:"qrc:/example/res/image/control/FlipView.png",order:2,recentlyAdded:true,desc:"Presents a collection of items that the user canflip through, one item at a time."})
             url:"qrc:/example/qml/page/T_FlipView.qml"
             onTap:{ navigationView.push(url) }
         }
@@ -368,6 +348,53 @@ FluObject{
         }
     }
 
+    FluPaneItemExpander{
+        title: Lang.chart
+        icon:FluentIcons.AreaChart
+        FluPaneItem{
+            title:Lang.bar_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_BarChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.line_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_LineChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.pie_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_PieChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.polar_area_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_PolarAreaChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.bubble_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_BubbleChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.scatter_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_ScatterChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.radar_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_RadarChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+    }
+
     FluPaneItemSeparator{
         spacing:10
         size:1
@@ -406,12 +433,6 @@ FluObject{
             url:"qrc:/example/qml/page/T_Captcha.qml"
             onTap:{ navigationView.push(url) }
         }
-        FluPaneItem{
-            title:"Chart"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Chart.qml"
-            onTap:{ navigationView.push(url) }
-        }
         FluPaneItem{
             title:"Network"
             menuDelegate: paneItemMenu
@@ -449,21 +470,14 @@ FluObject{
 
     function getRecentlyAddedData(){
         var arr = []
-        for(var i=0;i<children.length;i++){
-            var item = children[i]
-            if(item instanceof FluPaneItem && item.recentlyAdded){
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyAdded){
                 arr.push(item)
             }
-            if(item instanceof FluPaneItemExpander){
-                for(var j=0;j<item.children.length;j++){
-                    var itemChild = item.children[j]
-                    if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
-                        arr.push(itemChild)
-                    }
-                }
-            }
         }
-        arr.sort(function(o1,o2){ return o2.order-o1.order })
+        arr.sort(function(o1,o2){ return o2.extra.order-o1.extra.order })
         return arr
     }
 
@@ -472,7 +486,7 @@ FluObject{
         var items = navigationView.getItems();
         for(var i=0;i<items.length;i++){
             var item = items[i]
-            if(item instanceof FluPaneItem && item.recentlyUpdated){
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyUpdated){
                 arr.push(item)
             }
         }

example/qml/global/Lang.qml

@@ -20,6 +20,14 @@ QtObject {
     property string locale
     property string navigation_view_display_mode
     property string other
+    property string chart
+    property string bar_chart
+    property string line_chart
+    property string pie_chart
+    property string polar_area_chart
+    property string bubble_chart
+    property string scatter_chart
+    property string radar_chart
 
     function zh(){
         home="首页"
@@ -38,6 +46,14 @@ QtObject {
         locale="语言环境"
         navigation_view_display_mode="导航视图显示模式"
         other="其他"
+        chart="表格"
+        bar_chart="条形图"
+        line_chart="折线图"
+        pie_chart="饼图"
+        polar_area_chart="极坐标区域图"
+        bubble_chart="气泡图"
+        scatter_chart="散点图"
+        radar_chart="雷达图"
     }
 
     function en(){
@@ -57,6 +73,14 @@ QtObject {
         locale="Locale"
         navigation_view_display_mode="NavigationView Display Mode"
         other="Other"
+        chart="Chart"
+        bar_chart="Bar Chart"
+        line_chart="Line Chart"
+        pie_chart="Pie Chart"
+        polar_area_chart="Polar Area Chart"
+        bubble_chart="Bubble Chart"
+        scatter_chart="Scatter Chart"
+        radar_chart="Radar Chart"
     }
 
     property string __locale

example/qml/page/T_Chart.qml

@@ -1,332 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
-import "qrc:///example/qml/component"
-import "../component"
-
-FluScrollablePage{
-
-    title:"Chart"
-
-    function randomScalingFactor() {
-        return Math.random().toFixed(1);
-    }
-
-    FluArea{
-        height: 370
-        width: 500
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'scatter'
-            chartData: {
-                return {
-                    datasets: [{
-                            label: 'My First dataset',
-                            xAxisID: 'x-axis-1',
-                            yAxisID: 'y-axis-1',
-                            borderColor: '#ff5555',
-                            backgroundColor: 'rgba(255,192,192,0.3)',
-                            data: [{
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }]
-                        }, {
-                            label: 'My Second dataset',
-                            xAxisID: 'x-axis-1',
-                            yAxisID: 'y-axis-2',
-                            borderColor: '#5555ff',
-                            backgroundColor: 'rgba(192,192,255,0.3)',
-                            data: [{
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }]
-                        }]
-                }}
-            chartOptions: {return {
-                    maintainAspectRatio: false,
-                    responsive: true,
-                    hoverMode: 'nearest',
-                    intersect: true,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Scatter Chart - Multi Axis'
-                    },
-                    scales: {
-                        xAxes: [{
-                                position: 'bottom',
-                                gridLines: {
-                                    zeroLineColor: 'rgba(0,0,0,1)'
-                                }
-                            }],
-                        yAxes: [{
-                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                                display: true,
-                                position: 'left',
-                                id: 'y-axis-1',
-                            }, {
-                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                                display: true,
-                                position: 'right',
-                                reverse: true,
-                                id: 'y-axis-2',
-
-                                // grid line settings
-                                gridLines: {
-                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
-                                },
-                            }],
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'bar'
-            chartData: { return {
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [{
-                            label: 'Dataset 1',
-                            backgroundColor: '#ff9999',
-                            stack: 'Stack 0',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ]
-                        }, {
-                            label: 'Dataset 2',
-                            backgroundColor: '#9999ff',
-                            stack: 'Stack 0',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ]
-                        }, {
-                            label: 'Dataset 3',
-                            backgroundColor: '#99ff99',
-                            stack: 'Stack 1',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ]
-                        }]
-                }
-            }
-
-            chartOptions: { return {
-                    maintainAspectRatio: false,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Bar Chart - Stacked'
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false
-                    },
-                    responsive: true,
-                    scales: {
-                        xAxes: [{
-                                stacked: true,
-                            }],
-                        yAxes: [{
-                                stacked: true
-                            }]
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'pie'
-            chartData: {return {
-                    datasets: [{
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                            ],
-                            backgroundColor: [
-                                '#ffbbbb',
-                                '#ffddaa',
-                                '#ffffbb',
-                                '#bbffbb',
-                                '#bbbbff'
-                            ],
-                            label: 'Dataset 1'
-                        }],
-                    labels: [
-                        'Red',
-                        'Orange',
-                        'Yellow',
-                        'Green',
-                        'Blue'
-                    ]
-                }}
-            chartOptions: {return {maintainAspectRatio: false, responsive: true}}
-        }
-    }
-
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'line'
-            chartData: { return {
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [{
-                            label: 'Filled',
-                            fill: true,
-                            backgroundColor: 'rgba(192,222,255,0.3)',
-                            borderColor: 'rgba(128,192,255,255)',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ],
-                        }, {
-                            label: 'Dashed',
-                            fill: false,
-                            backgroundColor: 'rgba(0,0,0,0)',
-                            borderColor: '#009900',
-                            borderDash: [5, 5],
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ],
-                        }, {
-                            label: 'Filled',
-                            backgroundColor: 'rgba(0,0,0,0)',
-                            borderColor: '#990000',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ],
-                            fill: false,
-                        }]
-                }
-            }
-
-            chartOptions: {return {
-                    maintainAspectRatio: false,
-                    responsive: true,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Line Chart'
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false,
-                    },
-                    hover: {
-                        mode: 'nearest',
-                        intersect: true
-                    },
-                    scales: {
-                        xAxes: [{
-                                display: true,
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: 'Month'
-                                }
-                            }],
-                        yAxes: [{
-                                display: true,
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: 'Value'
-                                }
-                            }]
-                    }
-                }
-            }
-        }
-    }
-
-}

example/qml/page/T_Home.qml

@@ -160,7 +160,7 @@ FluScrollablePage{
     Component{
         id:com_item
         Item{
-            property string desc: modelData.desc
+            property string desc: modelData.extra.desc
             width: 320
             height: 120
             FluArea{
@@ -182,7 +182,7 @@ FluScrollablePage{
                     id:item_icon
                     height: 40
                     width: 40
-                    source: modelData.image
+                    source: modelData.extra.image
                     anchors{
                         left: parent.left
                         leftMargin: 20

example/qml/page/T_Network.qml

@@ -65,6 +65,20 @@ FluContentPage{
                     .go(callable)
                 }
             }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Head"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.head("https://httpbingo.org/head")
+                    .addQuery("name","孙悟空")
+                    .addQuery("age",500)
+                    .addQuery("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
             FluButton{
                 implicitWidth: parent.width
                 implicitHeight: 36
@@ -281,6 +295,21 @@ FluContentPage{
                     .go(callable)
                 }
             }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Open Log"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postJson("https://httpbingo.org/post")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .openLog(true)
+                    .bind(root)
+                    .go(callable)
+                }
+            }
             FluButton{
                 implicitWidth: parent.width
                 implicitHeight: 36

example/qml/page/T_Settings.qml

@@ -59,22 +59,6 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        FluCheckBox{
-            text:"V-Sync"
-            checked: FluApp.vsync
-            anchors.verticalCenter: parent.verticalCenter
-            onClicked: {
-                FluApp.vsync = !FluApp.vsync
-                dialog_restart.open()
-            }
-        }
-    }
-
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -106,26 +90,6 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        FluCheckBox{
-            text:"Software Render"
-            checked: SettingsHelper.getRender() === "software"
-            anchors.verticalCenter: parent.verticalCenter
-            onClicked: {
-                if(SettingsHelper.getRender() === "software"){
-                    SettingsHelper.saveRender("")
-                }else{
-                    SettingsHelper.saveRender("software")
-                }
-                dialog_restart.open()
-            }
-        }
-    }
-
     FluContentDialog{
         id:dialog_restart
         title:"友情提示"

example/qml/window/AboutWindow.qml

@@ -10,7 +10,7 @@ FluWindow {
     id:window
     title:"关于"
     width: 600
-    height: 600
+    height: 580
     fixSize: true
     launchMode: FluWindowType.SingleTask
 

example/qml/window/MainWindow.qml

@@ -16,14 +16,13 @@ FluWindow {
 
     id:window
     title: "FluentUI"
-    width: 1000
-    height: 640
+    width: 960
+    height: 600
     minimumWidth: 520
     minimumHeight: 200
     launchMode: FluWindowType.SingleTask
     fitsAppBarWindows: true
     appBar: FluAppBar {
-        width: window.width
         height: 30
         darkText: Lang.dark_mode
         showDark: true
@@ -45,7 +44,15 @@ FluWindow {
     }
 
     onFirstVisible: {
-        tour.open()
+        timer_tour_delay.restart()
+    }
+
+    Timer{
+        id:timer_tour_delay
+        interval: 200
+        onTriggered: {
+            tour.open()
+        }
     }
 
     Component.onCompleted: {
@@ -194,7 +201,12 @@ FluWindow {
                 pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
-                topPadding:FluTools.isMacos() ? 20 : 0
+                topPadding:{
+                    if(window.useSystemAppBar){
+                        return 0
+                    }
+                    return FluTools.isMacos() ? 20 : 0
+                }
                 displayMode:viewmodel_settings.displayMode
                 logo: "qrc:/example/res/image/favicon.ico"
                 title:"FluentUI"
@@ -231,7 +243,7 @@ FluWindow {
         id:com_reveal
         CircularReveal{
             id:reveal
-            target:window.contentItem
+            target:window.layoutContainer()
             anchors.fill: parent
             onAnimationFinished:{
                 //动画结束后释放资源
@@ -256,8 +268,11 @@ FluWindow {
         if(!FluTheme.enableAnimation || window.fitsAppBarWindows === false){
             changeDark()
         }else{
+            if(loader_reveal.sourceComponent){
+                return
+            }
             loader_reveal.sourceComponent = com_reveal
-            var target = window.contentItem
+            var target = window.layoutContainer()
             var pos = button.mapToItem(target,0,0)
             var mouseX = pos.x
             var mouseY = pos.y

example/src/AppInfo.cpp

@@ -10,7 +10,3 @@ AppInfo::AppInfo(QObject *parent)
 {
     version(APPLICATION_VERSION);
 }
-
-void AppInfo::init(QQmlApplicationEngine *engine){
-    engine->rootContext();
-}

example/src/AppInfo.h

@@ -14,7 +14,6 @@ private:
     explicit AppInfo(QObject *parent = nullptr);
 public:
     SINGLETONG(AppInfo)
-    void init(QQmlApplicationEngine *engine);
 };
 
 #endif // APPINFO_H

example/src/component/CircularReveal.cpp

@@ -5,10 +5,11 @@
 
 CircularReveal::CircularReveal(QQuickItem* parent) : QQuickPaintedItem(parent)
 {
+    _anim = new QPropertyAnimation(this, "radius", this);
     setVisible(false);
-    _anim.setDuration(333);
-    _anim.setEasingCurve(QEasingCurve::OutCubic);
-    connect(&_anim, &QPropertyAnimation::finished,this,[=](){
+    _anim->setDuration(333);
+    _anim->setEasingCurve(QEasingCurve::OutCubic);
+    connect(_anim, &QPropertyAnimation::finished,this,[=](){
         update();
         setVisible(false);
         Q_EMIT animationFinished();
@@ -31,8 +32,8 @@ void CircularReveal::paint(QPainter* painter)
 }
 
 void CircularReveal::start(int w,int h,const QPoint& center,int radius){
-    _anim.setStartValue(0);
-    _anim.setEndValue(radius);
+    _anim->setStartValue(0);
+    _anim->setEndValue(radius);
     _center = center;
     _grabResult = _target->grabToImage(QSize(w,h));
     connect(_grabResult.data(), &QQuickItemGrabResult::ready, this, &CircularReveal::handleGrabResult);
@@ -43,5 +44,5 @@ void CircularReveal::handleGrabResult(){
     update();
     setVisible(true);
     Q_EMIT imageChanged();
-    _anim.start();
+    _anim->start();
 }

example/src/component/CircularReveal.h

@@ -20,8 +20,8 @@ public:
     Q_SIGNAL void animationFinished();
     Q_SLOT void handleGrabResult();
 private:
+    QPropertyAnimation* _anim = nullptr;
     QImage _source;
-    QPropertyAnimation _anim = QPropertyAnimation(this, "radius", this);
     QPoint _center;
     QSharedPointer<QQuickItemGrabResult>  _grabResult;
 };

example/src/helper/Log.cpp

@@ -2,7 +2,20 @@
 #include <QtCore/qdebug.h>
 #include <QtCore/qfile.h>
 #include <QtCore/qtextstream.h>
+#include <QGuiApplication>
 #include <iostream>
+#include <QDateTime>
+#include <QStandardPaths>
+#include <QDir>
+#include <QThread>
+#include <QSettings>
+#include <QRegularExpression>
+#include "Version.h"
+#ifdef WIN32
+#include <process.h>
+#else
+#include <unistd.h>
+#endif
 
 #ifndef QT_ENDL
 #  if (QT_VERSION >= QT_VERSION_CHECK(5, 14, 0))
@@ -13,57 +26,183 @@
 #endif
 
 static QString g_app = {};
+static QString g_file_path= {};
 static bool g_logError = false;
 
 static std::unique_ptr<QFile> g_logFile = nullptr;
 static std::unique_ptr<QTextStream> g_logStream = nullptr;
 
-static inline void myMessageHandler(const QtMsgType type, const QMessageLogContext &context, const QString &message)
+static int g_logLevel = 4;
+
+std::map<QtMsgType, int> logLevelMap = {
+    {QtFatalMsg,0},
+    {QtCriticalMsg,1},
+    {QtWarningMsg,2},
+    {QtInfoMsg,3},
+    {QtDebugMsg,4}
+};
+
+QString Log::prettyProductInfoWrapper()
 {
-    if (message.isEmpty()) {
-        return;
-    }
-    const QString finalMessage = qFormatLogMessage(type, context, message).trimmed();
-    if ((type == QtInfoMsg) || (type == QtDebugMsg)) {
-        std::cout << qUtf8Printable(finalMessage) << std::endl;
-    } else {
-        std::cerr << qUtf8Printable(finalMessage) << std::endl;
-    }
-    if (g_logError) {
-        return;
-    }
-    if (!g_logFile) {
-        g_logFile = std::make_unique<QFile>();
-        g_logFile->setFileName(QString("debug-%1.log").arg(g_app));
-        if (!g_logFile->open(QFile::WriteOnly | QFile::Text | QFile::Append)) {
-            std::cerr << "Can't open file to write: " << qUtf8Printable(g_logFile->errorString()) << std::endl;
-            g_logFile.reset();
-            g_logError = true;
-            return;
+    auto productName = QSysInfo::prettyProductName();
+#if QT_VERSION < QT_VERSION_CHECK(6, 5, 0)
+#if defined(Q_OS_MACOS)
+    auto macosVersionFile = QString::fromUtf8("/System/Library/CoreServices/.SystemVersionPlatform.plist");
+    auto fi = QFileInfo (macosVersionFile);
+    if (fi.exists() && fi.isReadable()) {
+        auto plistFile = QFile(macosVersionFile);
+        plistFile.open(QIODevice::ReadOnly);
+        while (!plistFile.atEnd()) {
+            auto line = plistFile.readLine();
+            if (line.contains("ProductUserVisibleVersion")) {
+                auto nextLine = plistFile.readLine();
+                if (nextLine.contains("<string>")) {
+                    QRegularExpression re(QString::fromUtf8("\\s*<string>(.*)</string>"));
+                    auto matches = re.match(QString::fromUtf8(nextLine));
+                    if (matches.hasMatch()) {
+                        productName = QString::fromUtf8("macOS ") + matches.captured(1);
+                        break;
+                    }
+                }
+            }
         }
     }
-    if (!g_logStream) {
-        g_logStream = std::make_unique<QTextStream>();
-        g_logStream->setDevice(g_logFile.get());
+#endif
+#endif
+#if defined(Q_OS_WIN)
+    QSettings regKey {QString::fromUtf8("HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion"), QSettings::NativeFormat};
+    if (regKey.contains(QString::fromUtf8("CurrentBuildNumber"))) {
+        auto buildNumber = regKey.value(QString::fromUtf8("CurrentBuildNumber")).toInt();
+        if (buildNumber > 0) {
+            if (buildNumber < 9200) {
+                productName = QString::fromUtf8("Windows 7 build %1").arg(buildNumber);
+            }
+            else if (buildNumber < 10240) {
+                productName = QString::fromUtf8("Windows 8 build %1").arg(buildNumber);
+            }
+            else if (buildNumber < 22000) {
+                productName = QString::fromUtf8("Windows 10 build %1").arg(buildNumber);
+            }
+            else {
+                productName = QString::fromUtf8("Windows 11 build %1").arg(buildNumber);
+            }
+        }
     }
-    (*g_logStream) << finalMessage << QT_ENDL;
+#endif
+    return productName;
 }
 
-void Log::setup(const QString &app)
+static inline void myMessageHandler(const QtMsgType type, const QMessageLogContext &context, const QString &message)
+{
+    if(message == "Could not get the INetworkConnection instance for the adapter GUID."){
+        return;
+    }
+    if(logLevelMap[type]>g_logLevel){
+        return;
+    }
+    if (!message.isEmpty()) {
+        QString levelName;
+        switch (type) {
+        case QtDebugMsg:
+            levelName = QStringLiteral("Debug");
+            break;
+        case QtInfoMsg:
+            levelName = QStringLiteral("Info");
+            break;
+        case QtWarningMsg:
+            levelName = QStringLiteral("Warning");
+            break;
+        case QtCriticalMsg:
+            levelName = QStringLiteral("Critical");
+            break;
+        case QtFatalMsg:
+            levelName = QStringLiteral("Fatal");
+            break;
+        }
+        QString fileAndLineLogStr;
+        if(context.file){
+            std::string strFileTmp = context.file;
+            const char* ptr = strrchr(strFileTmp.c_str(), '/');
+            if (nullptr != ptr) {
+                char fn[512] = {0};
+                sprintf(fn, "%s", ptr + 1);
+                strFileTmp = fn;
+            }
+            const char* ptrTmp = strrchr(strFileTmp.c_str(), '\\');
+            if (nullptr != ptrTmp) {
+                char fn[512] = {0};
+                sprintf(fn, "%s", ptrTmp + 1);
+                strFileTmp = fn;
+            }
+            fileAndLineLogStr = QString::fromStdString("[%1:%2]").arg(QString::fromStdString(strFileTmp),QString::number(context.line));
+        }
+        const QString finalMessage = QString::fromStdString("%1[%2]%3[%4]:%5").arg(
+            QDateTime::currentDateTime().toString("yyyy/MM/dd hh:mm:ss.zzz"),
+            levelName,
+            fileAndLineLogStr,
+            QString::number(reinterpret_cast<quintptr>(QThread::currentThreadId())),
+            message);
+        if ((type == QtInfoMsg) || (type == QtDebugMsg)) {
+            std::cout << qPrintable(finalMessage) << std::endl;
+        } else {
+            std::cerr << qPrintable(finalMessage) << std::endl;
+        }
+        if (g_logError) {
+            return;
+        }
+        if (!g_logFile) {
+            g_logFile = std::make_unique<QFile>(g_file_path);
+            if (!g_logFile->open(QFile::WriteOnly | QFile::Text | QFile::Append)) {
+                std::cerr << "Can't open file to write: " << qPrintable(g_logFile->errorString()) << std::endl;
+                g_logFile.reset();
+                g_logError = true;
+                return;
+            }
+        }
+        if (!g_logStream) {
+            g_logStream = std::make_unique<QTextStream>();
+            g_logStream->setDevice(g_logFile.get());
+        }
+        (*g_logStream) << finalMessage << QT_ENDL;
+        g_logStream->flush();
+    }
+}
+
+void Log::setup(const QString &app,int level)
 {
     Q_ASSERT(!app.isEmpty());
     if (app.isEmpty()) {
         return;
     }
+    g_logLevel = level;
     static bool once = false;
     if (once) {
         return;
     }
     once = true;
     g_app = app;
-    qSetMessagePattern(QString(
-        "[%{time yyyy/MM/dd hh:mm:ss.zzz}] <%{if-info}INFO%{endif}%{if-debug}DEBUG"
-        "%{endif}%{if-warning}WARNING%{endif}%{if-critical}CRITICAL%{endif}%{if-fatal}"
-        "FATAL%{endif}> %{if-category}%{category}: %{endif}%{message}"));
+    const QString logFileName = QString("%1_%2.log").arg(g_app,QDateTime::currentDateTime().toString("yyyyMMdd"));
+    const QString logDirPath = QStandardPaths::writableLocation(QStandardPaths::AppLocalDataLocation)+"/log";
+    const QDir logDir(logDirPath);
+    if(!logDir.exists()){
+        logDir.mkpath(logDirPath);
+    }
+    g_file_path = logDir.filePath(logFileName);
     qInstallMessageHandler(myMessageHandler);
+    qInfo()<<"===================================================";
+    qInfo()<<"[AppName]"<<g_app;
+    qInfo()<<"[AppVersion]"<<APPLICATION_VERSION;
+#ifdef WIN32
+    qInfo()<<"[ProcessId]"<<QString::number(_getpid());
+#else
+    qInfo()<<"[ProcessId]"<<QString::number(getpid());
+#endif
+    qInfo()<<"[GitHashCode]"<<COMMIT_HASH;
+    qInfo()<<"[DeviceInfo]";
+    qInfo()<<"  [DeviceId]"<<QSysInfo::machineUniqueId();
+    qInfo()<<"  [Manufacturer]"<<prettyProductInfoWrapper();
+    qInfo()<<"  [CPU_ABI]"<<QSysInfo::currentCpuArchitecture();
+    qInfo()<<"[LOG_LEVEL]"<<g_logLevel;
+    qInfo()<<"[LOG_PATH]"<<g_file_path;
+    qInfo()<<"===================================================";
 }

example/src/helper/Log.h

@@ -4,7 +4,8 @@
 
 namespace Log
 {
-    void setup(const QString &app);
+    QString prettyProductInfoWrapper();
+    void setup(const QString &app,int level = 4);
 }
 
 #endif // LOG_H

example/src/helper/SettingsHelper.cpp

@@ -12,23 +12,15 @@ SettingsHelper::~SettingsHelper() = default;
 
 void SettingsHelper::save(const QString& key,QVariant val)
 {
-    QByteArray data = {};
-    QDataStream stream(&data, QIODevice::WriteOnly);
-    stream.setVersion(QDataStream::Qt_5_6);
-    stream << val;
-    m_settings->setValue(key, data);
+    m_settings->setValue(key, val);
 }
 
 QVariant SettingsHelper::get(const QString& key,QVariant def){
-    const QByteArray data = m_settings->value(key).toByteArray();
-    if (data.isEmpty()) {
-        return def;
+    QVariant data = m_settings->value(key);
+    if (!data.isNull() && data.isValid()) {
+        return data;
     }
-    QDataStream stream(data);
-    stream.setVersion(QDataStream::Qt_5_6);
-    QVariant val;
-    stream >> val;
-    return val;
+    return def;
 }
 
 void SettingsHelper::init(char *argv[]){
@@ -36,6 +28,5 @@ void SettingsHelper::init(char *argv[]){
     const QFileInfo fileInfo(applicationPath);
     const QString iniFileName = fileInfo.completeBaseName() + ".ini";
     const QString iniFilePath = QStandardPaths::writableLocation(QStandardPaths::AppLocalDataLocation) + "/" + iniFileName;
-    qDebug()<<"Application configuration file path->"<<iniFilePath;
     m_settings.reset(new QSettings(iniFilePath, QSettings::IniFormat));
 }

example/src/helper/SettingsHelper.h

@@ -19,14 +19,10 @@ public:
     SINGLETONG(SettingsHelper)
     ~SettingsHelper() override;
     void init(char *argv[]);
-    Q_INVOKABLE void saveRender(const QVariant& render){save("render",render);}
-    Q_INVOKABLE QVariant getRender(){return get("render");}
     Q_INVOKABLE void saveDarkMode(int darkModel){save("darkMode",darkModel);}
-    Q_INVOKABLE QVariant getDarkMode(){return get("darkMode",QVariant(0));}
-    Q_INVOKABLE void saveVsync(bool vsync){save("vsync",vsync);}
-    Q_INVOKABLE QVariant getVsync(){return get("vsync",QVariant(true));}
+    Q_INVOKABLE int getDarkMode(){return get("darkMode",QVariant(0)).toInt();}
     Q_INVOKABLE void saveUseSystemAppBar(bool useSystemAppBar){save("useSystemAppBar",useSystemAppBar);}
-    Q_INVOKABLE QVariant getUseSystemAppBar(){return get("useSystemAppBar",QVariant(false));}
+    Q_INVOKABLE bool getUseSystemAppBar(){return get("useSystemAppBar",QVariant(false)).toBool();}
 private:
     void save(const QString& key,QVariant val);
     QVariant get(const QString& key,QVariant def={});

example/src/main.cpp

@@ -24,8 +24,18 @@ Q_IMPORT_QML_PLUGIN(FluentUIPlugin)
 
 int main(int argc, char *argv[])
 {
+    qputenv("QT_QUICK_CONTROLS_STYLE","Basic");
+#ifdef Q_OS_LINUX
+    //fix bug UOSv20 does not print logs
+    qputenv("QT_LOGGING_RULES","");
+    //fix bug UOSv20 v-sync does not work
+    qputenv("QSG_RENDER_LOOP","basic");
+#endif
+    QGuiApplication::setOrganizationName("ZhuZiChu");
+    QGuiApplication::setOrganizationDomain("https://zhuzichu520.github.io");
+    QGuiApplication::setApplicationName("FluentUI");
+    SettingsHelper::getInstance()->init(argv);
     Log::setup("example");
-    QNetworkProxy::setApplicationProxy(QNetworkProxy::NoProxy);
 #if (QT_VERSION < QT_VERSION_CHECK(6, 0, 0))
     QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
     QGuiApplication::setAttribute(Qt::AA_UseHighDpiPixmaps);
@@ -33,29 +43,13 @@ int main(int argc, char *argv[])
     QGuiApplication::setHighDpiScaleFactorRoundingPolicy(Qt::HighDpiScaleFactorRoundingPolicy::PassThrough);
 #endif
 #endif
-    qputenv("QT_QUICK_CONTROLS_STYLE","Basic");
-    QGuiApplication::setOrganizationName("ZhuZiChu");
-    QGuiApplication::setOrganizationDomain("https://zhuzichu520.github.io");
-    QGuiApplication::setApplicationName("FluentUI");
-    SettingsHelper::getInstance()->init(argv);
-    if(SettingsHelper::getInstance()->getRender()=="software"){
-#if (QT_VERSION >= QT_VERSION_CHECK(6, 0, 0))
-        QQuickWindow::setGraphicsApi(QSGRendererInterface::Software);
-#elif (QT_VERSION >= QT_VERSION_CHECK(5, 14, 0))
-        QQuickWindow::setSceneGraphBackend(QSGRendererInterface::Software);
-#endif
-    }
     QGuiApplication app(argc, argv);
-    //    QLoggingCategory::setFilterRules(QStringLiteral("qt.scenegraph.general=true"));
-    //    qSetMessagePattern("%{category}: %{message}");
     QQmlApplicationEngine engine;
-    AppInfo::getInstance()->init(&engine);
     engine.rootContext()->setContextProperty("AppInfo",AppInfo::getInstance());
     engine.rootContext()->setContextProperty("SettingsHelper",SettingsHelper::getInstance());
 #ifdef FLUENTUI_BUILD_STATIC_LIB
     FluentUI::getInstance()->registerTypes(&engine);
 #endif
-    qDebug()<<engine.importPathList();
     qmlRegisterType<CircularReveal>("example", 1, 0, "CircularReveal");
     qmlRegisterType<FileWatcher>("example", 1, 0, "FileWatcher");
     qmlRegisterType<FpsItem>("example", 1, 0, "FpsItem");

example/src/singleton.h

@@ -44,4 +44,10 @@ private:                                               \
         return Singleton<Class>::getInstance(); \
 }
 
+#define HIDE_CONSTRUCTOR(Class)         \
+private:                                \
+    Class() = default;                  \
+    Class(const Class& other) = delete; \
+    Class& operator=(const Class& other) = delete;
+
 #endif // SINGLETON_H

src/CMakeLists.txt

@@ -1,21 +1,20 @@
 cmake_minimum_required(VERSION 3.20)
 
 if (FLUENTUI_BUILD_STATIC_LIB AND (QT_VERSION VERSION_GREATER_EQUAL "6.2"))
-    project(fluentui LANGUAGES CXX)
+    project(fluentui VERSION 1.0)
 else()
-    project(fluentuiplugin LANGUAGES CXX)
+    project(fluentuiplugin VERSION 1.0)
 endif()
 
 #配置通用编译
+set(CMAKE_CXX_STANDARD 17)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
-if(APPLE)
-    set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
-endif()
 
 if (FLUENTUI_BUILD_STATIC_LIB)
     add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
 endif()
 
+#导入Qt相关依赖包
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core Quick Qml)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core Quick Qml)
 
@@ -66,7 +65,6 @@ if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     endforeach()
 endif()
 
-#添加qml模块
 if (FLUENTUI_BUILD_STATIC_LIB)
     set(LIB_TYPE "STATIC")
 else()
@@ -91,6 +89,7 @@ if(WIN32)
 endif()
 
 if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
+    #如果是Qt6.2版本以上，则使用qt_add_library，qt_add_qml_module函数添加资源文件
     if(FLUENTUI_BUILD_STATIC_LIB)
         set(FLUENTUI_QML_PLUGIN_DIRECTORY ${CMAKE_BINARY_DIR}/FluentUI)
     endif()
@@ -108,6 +107,7 @@ if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
         RESOURCE_PREFIX "/qt/qml"
     )
 else()
+    #如果是Qt6.2版本以下，则使用add_qmlplugin函数添加资源文件，这是个自定义的函数，详情见.cmake/QmlPlugin.cmake
     include(QmlPlugin)
     add_qmlplugin(${PROJECT_NAME}
         URI "FluentUI"
@@ -120,11 +120,15 @@ else()
     )
 endif()
 
+target_compile_definitions(${PROJECT_NAME}
+    PRIVATE
+    #导入qrcode配置文件
+    HAVE_CONFIG_H
+)
 
 #去掉mingw生成的动态库libxxx前缀lib，不去掉前缀会导致 module "FluentUI" plugin "fluentuiplugin" not found
 if(MINGW)
     set_target_properties(${PROJECT_NAME} PROPERTIES PREFIX "")
-    set_target_properties(${PROJECT_NAME} PROPERTIES DEBUG_POSTFIX ".debug")
 endif()
 
 #MSVC Debug 添加后缀d，与Qt插件风格保持一致
@@ -137,9 +141,6 @@ target_link_libraries(${PROJECT_NAME} PUBLIC
     Qt${QT_VERSION_MAJOR}::CorePrivate
     Qt${QT_VERSION_MAJOR}::QuickPrivate
     Qt${QT_VERSION_MAJOR}::QmlPrivate
-    ZXing
-    FramelessHelper::Core
-    FramelessHelper::Quick
 )
 
 #安装

src/FluApp.cpp

@@ -8,13 +8,8 @@
 #include <QUuid>
 #include <QFontDatabase>
 #include <QClipboard>
-#include <FramelessHelper/Quick/framelessquickmodule.h>
-#include <FramelessHelper/Core/private/framelessconfig_p.h>
-
-FRAMELESSHELPER_USE_NAMESPACE
 
 FluApp::FluApp(QObject *parent):QObject{parent}{
-    connect(this,&FluApp::useSystemAppBarChanged,this,[=]{FramelessConfig::instance()->set(Global::Option::UseSystemAppBar,_useSystemAppBar);});
     vsync(true);
     useSystemAppBar(false);
 }
@@ -24,11 +19,10 @@ FluApp::~FluApp(){
 
 void FluApp::init(QObject *application){
     this->_application = application;
-    FramelessHelperQuickInitialize();
-    FramelessConfig::instance()->set(Global::Option::DisableLazyInitializationForMicaMaterial);
-    FramelessConfig::instance()->set(Global::Option::CenterWindowBeforeShow);
-    QQmlEngine *engine = qmlEngine(_application);
-    FramelessHelper::Quick::registerTypes(engine);
+    QJSEngine * jsEngine = qjsEngine(_application);
+    std::string jsFunction = R"( (function () { console.log("FluentUI");}) )";
+    QJSValue function = jsEngine->evaluate(QString::fromStdString(jsFunction));
+    jsEngine->globalObject().setProperty("__fluentui",function);
 }
 
 void FluApp::run(){

src/FluApp.h

@@ -22,6 +22,7 @@ class FluApp : public QObject
     Q_PROPERTY_AUTO(QString,initialRoute);
     Q_PROPERTY_AUTO(QJsonObject,routes);
     Q_PROPERTY_AUTO(bool,useSystemAppBar);
+    Q_PROPERTY_AUTO(QString,windowIcon);
     QML_NAMED_ELEMENT(FluApp)
     QML_SINGLETON
 private:
@@ -38,7 +39,7 @@ public:
     void removeWindow(QQuickWindow* window);
 private:
     QMap<quint64, QQuickWindow*> _windows;
-    QObject* _application;
+    QObject* _application = nullptr;
 };
 
 #endif // FLUAPP_H

src/FluColorSet.h

@@ -2,6 +2,7 @@
 #define FLUCOLORSET_H
 
 #include <QObject>
+#include <QtQml/qqml.h>
 #include "stdafx.h"
 
 /**
@@ -17,6 +18,7 @@ class FluColorSet : public QObject
     Q_PROPERTY_AUTO(QString,light)
     Q_PROPERTY_AUTO(QString,lighter)
     Q_PROPERTY_AUTO(QString,lightest)
+    QML_NAMED_ELEMENT(FluColorSet)
 public:
     explicit FluColorSet(QObject *parent = nullptr);
 };

src/FluColors.cpp

@@ -27,7 +27,7 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
     Grey210("#161514");
     Grey220("#11100f");
 
-    FluColorSet *yellow = new FluColorSet();
+    FluColorSet *yellow = new FluColorSet(this);
     yellow->darkest("#f9a825");
     yellow->darker("#fbc02d");
     yellow->dark("#fdd435");
@@ -37,7 +37,7 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
     yellow->lightest("#fff59b");
     Yellow(yellow);
 
-    FluColorSet *orange = new FluColorSet();
+    FluColorSet *orange = new FluColorSet(this);
     orange->darkest("#993d07");
     orange->darker("#ac4408");
     orange->dark("#d1580a");
@@ -47,7 +47,7 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
     orange->lightest("#fac06a");
     Orange(orange);
 
-    FluColorSet *red = new FluColorSet();
+    FluColorSet *red = new FluColorSet(this);
     red->darkest("#8f0a15");
     red->darker("#a20b18");
     red->dark("#b90d1c");
@@ -57,7 +57,7 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
     red->lightest("#f06b76");
     Red(red);
 
-    FluColorSet *magenta = new FluColorSet();
+    FluColorSet *magenta = new FluColorSet(this);
     magenta->darkest("#6f004f");
     magenta->darker("#a0076c");
     magenta->dark("#b50d7d");
@@ -67,7 +67,7 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
     magenta->lightest("#f18cd5");
     Magenta(magenta);
 
-    FluColorSet *purple = new FluColorSet();
+    FluColorSet *purple = new FluColorSet(this);
     purple->darkest("#2c0f76");
     purple->darker("#3d0f99");
     purple->dark("#4e11ae");
@@ -77,7 +77,7 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
     purple->lightest("#9e8ed9");
     Purple(purple);
 
-    FluColorSet *blue = new FluColorSet();
+    FluColorSet *blue = new FluColorSet(this);
     blue->darkest("#004A83");
     blue->darker("#005494");
     blue->dark("#0066B4");
@@ -87,7 +87,7 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
     blue->lightest("#60ABE4");
     Blue(blue);
 
-    FluColorSet *teal = new FluColorSet();
+    FluColorSet *teal = new FluColorSet(this);
     teal->darkest("#006E5B");
     teal->darker("#007C67");
     teal->dark("#00977D");
@@ -97,7 +97,7 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
     teal->lightest("#60CFBC");
     Teal(teal);
 
-    FluColorSet *green = new FluColorSet();
+    FluColorSet *green = new FluColorSet(this);
     green->darkest("#094C09");
     green->darker("#0C5D0C");
     green->dark("#0E6F0E");

src/FluFramelessHelper.cpp

@@ -0,0 +1,400 @@
+#include "FluFramelessHelper.h"
+
+#include <QGuiApplication>
+#include "FluTools.h"
+#ifdef Q_OS_WIN
+#pragma comment (lib,"user32.lib")
+#pragma comment (lib,"dwmapi.lib")
+#include <windows.h>
+#include <dwmapi.h>
+
+static inline QByteArray qtNativeEventType()
+{
+    static const auto result = "windows_generic_MSG";
+    return result;
+}
+
+static inline bool isTaskbarAutoHide() {
+    APPBARDATA appBarData;
+    memset(&appBarData, 0, sizeof(appBarData));
+    appBarData.cbSize = sizeof(appBarData);
+    appBarData.hWnd = FindWindowW(L"Shell_TrayWnd", NULL);
+    LPARAM lParam = SHAppBarMessage(ABM_GETSTATE, &appBarData);
+    return lParam & ABS_AUTOHIDE;
+}
+
+static inline QColor getAccentColor(){
+    typedef HRESULT (WINAPI* DwmGetColorizationColorPtr)(DWORD* pcrColorization,BOOL* pfOpaqueBlend);
+    HMODULE module = LoadLibraryW(L"dwmapi.dll");
+    if (module)
+    {
+        DwmGetColorizationColorPtr dwm_get_colorization_color;
+        dwm_get_colorization_color= reinterpret_cast<DwmGetColorizationColorPtr>(GetProcAddress(module, "DwmGetColorizationColor"));
+        DWORD color = 0;
+        BOOL bOpaque = FALSE;
+        if (dwm_get_colorization_color)
+        {
+            dwm_get_colorization_color(&color,&bOpaque);
+        }
+        return QColor(color);
+    }
+    return QColor();
+}
+
+static inline bool isCompositionEnabled(){
+    typedef HRESULT (WINAPI* DwmIsCompositionEnabledPtr)(BOOL *pfEnabled);
+    HMODULE module = LoadLibraryW(L"dwmapi.dll");
+    if (module)
+    {
+        BOOL composition_enabled = false;
+        DwmIsCompositionEnabledPtr dwm_is_composition_enabled;
+        dwm_is_composition_enabled= reinterpret_cast<DwmIsCompositionEnabledPtr>(GetProcAddress(module, "DwmIsCompositionEnabled"));
+        if (dwm_is_composition_enabled)
+        {
+            dwm_is_composition_enabled(&composition_enabled);
+        }
+        return composition_enabled;
+    }
+    return false;
+}
+
+static inline void showShadow(HWND hwnd){
+    const MARGINS shadow = { 0, 0, 1, 0 };
+    typedef HRESULT (WINAPI* DwmExtendFrameIntoClientAreaPtr)(HWND hWnd, const MARGINS *pMarInset);
+    HMODULE module = LoadLibraryW(L"dwmapi.dll");
+    if (module)
+    {
+        DwmExtendFrameIntoClientAreaPtr dwm_extendframe_into_client_area_;
+        dwm_extendframe_into_client_area_= reinterpret_cast<DwmExtendFrameIntoClientAreaPtr>(GetProcAddress(module, "DwmExtendFrameIntoClientArea"));
+        if (dwm_extendframe_into_client_area_)
+        {
+            dwm_extendframe_into_client_area_(hwnd, &shadow);
+        }
+    }
+}
+
+#endif
+
+FramelessEventFilter::FramelessEventFilter(FluFramelessHelper* helper){
+    _helper = helper;
+    _current = _helper->window->winId();
+}
+
+bool FramelessEventFilter::nativeEventFilter(const QByteArray &eventType, void *message, QT_NATIVE_EVENT_RESULT_TYPE *result){
+#ifdef Q_OS_WIN
+    if ((eventType != qtNativeEventType()) || !message || _helper.isNull() || _helper->window.isNull()) {
+        return false;
+    }
+    const auto msg = static_cast<const MSG *>(message);
+    const HWND hwnd = msg->hwnd;
+    if (!hwnd) {
+        return false;
+    }
+    const qint64 wid = reinterpret_cast<qint64>(hwnd);
+    if(wid != _current){
+        return false;
+    }
+    const UINT uMsg = msg->message;
+    if (!msg || !hwnd)
+    {
+        return false;
+    }
+    const WPARAM wParam = msg->wParam;
+    const LPARAM lParam = msg->lParam;
+    if(uMsg == WM_WINDOWPOSCHANGING){
+        WINDOWPOS* wp = reinterpret_cast<WINDOWPOS*>(lParam);
+        if (wp != nullptr && (wp->flags & SWP_NOSIZE) == 0)
+        {
+            wp->flags |= SWP_NOCOPYBITS;
+            *result = DefWindowProc(hwnd, uMsg, wParam, lParam);
+            return true;
+        }
+        return false;
+    }else if(uMsg == WM_NCCALCSIZE){
+        const auto clientRect = ((wParam == FALSE) ? reinterpret_cast<LPRECT>(lParam) : &(reinterpret_cast<LPNCCALCSIZE_PARAMS>(lParam))->rgrc[0]);
+        const LONG originalTop = clientRect->top;
+        const LONG originalLeft = clientRect->left;
+        const LRESULT hitTestResult = ::DefWindowProcW(hwnd, WM_NCCALCSIZE, wParam, lParam);
+        if ((hitTestResult != HTERROR) && (hitTestResult != HTNOWHERE)) {
+            *result = hitTestResult;
+            return true;
+        }
+        if(IsZoomed(hwnd)){
+            _helper->setOriginalPos(QPoint(originalLeft,originalTop));
+            if(isTaskbarAutoHide()){
+                clientRect->bottom -= 1;
+            }
+        }else{
+            _helper->setOriginalPos({});
+        }
+        clientRect->top = originalTop;
+        *result = WVR_REDRAW;
+        return true;
+    }if(uMsg == WM_NCHITTEST){
+        if(FluTools::getInstance()->isWindows11OrGreater() && _helper->hoverMaxBtn() && _helper->resizeable()){
+            if (*result == HTNOWHERE) {
+                *result = HTZOOM;
+            }
+            return true;
+        }
+        return false;
+    }else if(uMsg == WM_NCLBUTTONDBLCLK || uMsg == WM_NCLBUTTONDOWN){
+        if(FluTools::getInstance()->isWindows11OrGreater() && _helper->hoverMaxBtn() && _helper->resizeable()){
+            QMouseEvent event = QMouseEvent(QEvent::MouseButtonPress, QPoint(), QPoint(), Qt::LeftButton, Qt::LeftButton, Qt::NoModifier);
+            QGuiApplication::sendEvent(_helper->maximizeButton(),&event);
+            return true;
+        }
+        return false;
+    }else if(uMsg == WM_NCLBUTTONUP || uMsg == WM_NCRBUTTONUP){
+        if(FluTools::getInstance()->isWindows11OrGreater() && _helper->hoverMaxBtn() && _helper->resizeable()){
+            QMouseEvent event = QMouseEvent(QEvent::MouseButtonRelease, QPoint(), QPoint(), Qt::LeftButton, Qt::LeftButton, Qt::NoModifier);
+            QGuiApplication::sendEvent(_helper->maximizeButton(),&event);
+        }
+        return false;
+    }
+    return false;
+#endif
+    return false;
+}
+
+FluFramelessHelper::FluFramelessHelper(QObject *parent)
+    : QObject{parent}
+{
+
+}
+
+void FluFramelessHelper::classBegin(){
+}
+
+void FluFramelessHelper::_updateCursor(int edges){
+    switch (edges) {
+    case 0:
+        window->setCursor(Qt::ArrowCursor);
+        break;
+    case Qt::LeftEdge:
+    case Qt::RightEdge:
+        window->setCursor(Qt::SizeHorCursor);
+        break;
+    case Qt::TopEdge:
+    case Qt::BottomEdge:
+        window->setCursor(Qt::SizeVerCursor);
+        break;
+    case Qt::LeftEdge | Qt::TopEdge:
+    case Qt::RightEdge | Qt::BottomEdge:
+        window->setCursor(Qt::SizeFDiagCursor);
+        break;
+    case Qt::RightEdge | Qt::TopEdge:
+    case Qt::LeftEdge | Qt::BottomEdge:
+        window->setCursor(Qt::SizeBDiagCursor);
+        break;
+    }
+}
+
+bool FluFramelessHelper::eventFilter(QObject *obj, QEvent *ev){
+    if (!window.isNull() && window->flags()) {
+
+        static int edges = 0;
+        const int margin = 8;
+        switch (ev->type()) {
+        case QEvent::MouseButtonPress:
+            if(edges!=0){
+                QMouseEvent *event = static_cast<QMouseEvent*>(ev);
+                if(event->button() == Qt::LeftButton){
+                    _updateCursor(edges);
+                    window->startSystemResize(Qt::Edges(edges));
+                }
+            }
+            break;
+        case QEvent::MouseButtonRelease:
+            edges = 0;
+            _updateCursor(edges);
+            break;
+        case QEvent::MouseMove: {
+            if(_maximized() || _fullScreen()){
+                break;
+            }
+            if(!resizeable()){
+                break;
+            }
+            QMouseEvent *event = static_cast<QMouseEvent*>(ev);
+            QPoint p =
+#if QT_VERSION < QT_VERSION_CHECK(6,0,0)
+                event->pos();
+#else
+                event->position().toPoint();
+#endif
+            if(p.x() >= margin && p.x() <= (window->width() - margin) && p.y() >= margin && p.y() <= (window->height() - margin)){
+                if(edges != 0){
+                    edges = 0;
+                    _updateCursor(edges);
+                }
+                break;
+            }
+            edges = 0;
+            if ( p.x() < margin ) {
+                edges |= Qt::LeftEdge;
+            }
+            if ( p.x() > (window->width() - margin) ) {
+                edges |= Qt::RightEdge;
+            }
+            if ( p.y() < margin ) {
+                edges |= Qt::TopEdge;
+            }
+            if ( p.y() > (window->height() - margin) ) {
+                edges |= Qt::BottomEdge;
+            }
+            _updateCursor(edges);
+            break;
+        }
+        default:
+            break;
+        }
+    }
+    return QObject::eventFilter(obj, ev);
+}
+
+void FluFramelessHelper::componentComplete(){
+    auto o = parent();
+    while (nullptr != o) {
+        window = (QQuickWindow*)o;
+        o = o->parent();
+    }
+    if(!window.isNull()){
+        _stayTop = QQmlProperty(window,"stayTop");
+        _screen = QQmlProperty(window,"screen");
+        _fixSize = QQmlProperty(window,"fixSize");
+        _originalPos = QQmlProperty(window,"_originalPos");
+        _accentColor = QQmlProperty(window,"_accentColor");
+#ifdef Q_OS_WIN
+        if(isCompositionEnabled()){
+            _accentColor.write(getAccentColor());
+            _nativeEvent =new FramelessEventFilter(this);
+            qApp->installNativeEventFilter(_nativeEvent);
+            HWND hwnd = reinterpret_cast<HWND>(window->winId());
+            DWORD style = ::GetWindowLong(hwnd, GWL_STYLE);
+            if(resizeable()){
+                SetWindowLongPtr(hwnd, GWL_STYLE, style | WS_MAXIMIZEBOX | WS_THICKFRAME | WS_CAPTION);
+            }else{
+                SetWindowLongPtr(hwnd, GWL_STYLE, style | WS_THICKFRAME | WS_CAPTION);
+            }
+            SetWindowPos(hwnd,nullptr,0,0,0,0,SWP_NOZORDER | SWP_NOOWNERZORDER | SWP_NOMOVE | SWP_NOSIZE | SWP_FRAMECHANGED);
+            if(_fixSize.read().toBool()){
+                window->setMaximumSize(window->size());
+                window->setMinimumSize(window->size());
+            }
+        }else{
+            window->setFlags((window->flags() & (~Qt::WindowMinMaxButtonsHint) & (~Qt::Dialog)) | Qt::FramelessWindowHint | Qt::Window);
+        }
+#else
+        window->setFlags((window->flags() & (~Qt::WindowMinMaxButtonsHint) & (~Qt::Dialog)) | Qt::FramelessWindowHint | Qt::Window);
+#endif
+        _onStayTopChange();
+        _stayTop.connectNotifySignal(this,SLOT(_onStayTopChange()));
+        _screen.connectNotifySignal(this,SLOT(_onScreenChanged()));
+        window->installEventFilter(this);
+    }
+}
+
+void FluFramelessHelper::_onScreenChanged(){
+#ifdef Q_OS_WIN
+    HWND hwnd = reinterpret_cast<HWND>(window->winId());
+    SetWindowPos(hwnd,0,0,0,0,0,SWP_NOMOVE | SWP_NOSIZE | SWP_NOZORDER | SWP_FRAMECHANGED | SWP_NOOWNERZORDER);
+    RedrawWindow(hwnd, NULL, NULL, RDW_INVALIDATE | RDW_UPDATENOW);
+#endif
+}
+
+void FluFramelessHelper::showSystemMenu(){
+#ifdef Q_OS_WIN
+    QPoint point = QCursor::pos();
+    HWND hwnd = reinterpret_cast<HWND>(window->winId());
+    DWORD style = GetWindowLongPtr(hwnd,GWL_STYLE);
+    SetWindowLongPtr(hwnd, GWL_STYLE, style | WS_THICKFRAME | WS_CAPTION | WS_SYSMENU | WS_MAXIMIZEBOX);
+    const HMENU hMenu = ::GetSystemMenu(hwnd, FALSE);
+    DeleteMenu(hMenu, SC_MOVE, MF_BYCOMMAND);
+    DeleteMenu(hMenu, SC_SIZE, MF_BYCOMMAND);
+    if(_maximized() || _fullScreen()){
+        EnableMenuItem(hMenu,SC_RESTORE,MFS_ENABLED);
+    }else{
+        EnableMenuItem(hMenu,SC_RESTORE,MFS_DISABLED);
+    }
+    if(resizeable() && !_maximized() && !_fullScreen()){
+        EnableMenuItem(hMenu,SC_MAXIMIZE,MFS_ENABLED);
+    }else{
+        EnableMenuItem(hMenu,SC_MAXIMIZE,MFS_DISABLED);
+    }
+    const int result = TrackPopupMenu(hMenu, (TPM_RETURNCMD | (QGuiApplication::isRightToLeft() ? TPM_RIGHTALIGN : TPM_LEFTALIGN)), point.x()*window->devicePixelRatio(), point.y()*window->devicePixelRatio(), 0, hwnd, nullptr);
+    if (result != FALSE) {
+        PostMessageW(hwnd, WM_SYSCOMMAND, result, 0);
+    }
+    SetWindowLongPtr(hwnd, GWL_STYLE, style | WS_THICKFRAME | WS_CAPTION &~ WS_SYSMENU);
+#endif
+}
+
+void FluFramelessHelper::_onStayTopChange(){
+    bool isStayTop = _stayTop.read().toBool();
+#ifdef Q_OS_WIN
+    HWND hwnd = reinterpret_cast<HWND>(window->winId());
+    if(isStayTop){
+        SetWindowPos(hwnd, HWND_TOPMOST, 0, 0, 0, 0, SWP_NOMOVE | SWP_NOSIZE);
+    }else{
+        SetWindowPos(hwnd, HWND_NOTOPMOST, 0, 0, 0, 0, SWP_NOMOVE | SWP_NOSIZE);
+    }
+#else
+    window->setFlag(Qt::WindowStaysOnTopHint,isStayTop);
+#endif
+}
+
+FluFramelessHelper::~FluFramelessHelper(){
+    if (!window.isNull()) {
+        window->setFlags(Qt::Window);
+#ifdef Q_OS_WIN
+        if(isCompositionEnabled()){
+            qApp->removeNativeEventFilter(_nativeEvent);
+            delete _nativeEvent;
+        }
+#endif
+        window->removeEventFilter(this);
+    }
+}
+
+bool FluFramelessHelper::hoverMaxBtn(){
+    QVariant appBar = window->property("appBar");
+    if(appBar.isNull()){
+        return false;
+    }
+    QVariant var;
+    QMetaObject::invokeMethod(appBar.value<QObject*>(), "maximizeButtonHover",Q_RETURN_ARG(QVariant, var));
+    if(var.isNull()){
+        return false;
+    }
+    return var.toBool();
+}
+
+QObject* FluFramelessHelper::maximizeButton(){
+    QVariant appBar = window->property("appBar");
+    if(appBar.isNull()){
+        return nullptr;
+    }
+    QVariant var;
+    QMetaObject::invokeMethod(appBar.value<QObject*>(), "maximizeButton",Q_RETURN_ARG(QVariant, var));
+    if(var.isNull()){
+        return nullptr;
+    }
+    return var.value<QObject*>();
+}
+
+void FluFramelessHelper::setOriginalPos(QVariant pos){
+    _originalPos.write(pos);
+}
+
+bool FluFramelessHelper::resizeable(){
+    return !(window->width() == window->maximumWidth() && window->width() == window->minimumWidth() && window->height() == window->maximumHeight() && window->height() == window->minimumHeight());
+}
+
+bool FluFramelessHelper::_maximized(){
+    return window->visibility() == QWindow::Maximized;
+}
+
+bool FluFramelessHelper::_fullScreen(){
+    return window->visibility() == QWindow::FullScreen;
+}

src/FluFramelessHelper.h

@@ -0,0 +1,63 @@
+#ifndef FLUFRAMELESSHELPER_H
+#define FLUFRAMELESSHELPER_H
+
+#include <QObject>
+#include <QQuickWindow>
+#include <QtQml/qqml.h>
+#include <QAbstractNativeEventFilter>
+#include <QQmlProperty>
+
+#if (QT_VERSION >= QT_VERSION_CHECK(6, 0, 0))
+using QT_NATIVE_EVENT_RESULT_TYPE = qintptr;
+using QT_ENTER_EVENT_TYPE = QEnterEvent;
+#else
+using QT_NATIVE_EVENT_RESULT_TYPE = long;
+using QT_ENTER_EVENT_TYPE = QEvent;
+#endif
+
+class FluFramelessHelper;
+
+class FramelessEventFilter : public QAbstractNativeEventFilter
+{
+public:
+    FramelessEventFilter(FluFramelessHelper* helper);
+    bool nativeEventFilter(const QByteArray &eventType, void *message, QT_NATIVE_EVENT_RESULT_TYPE *result) override;
+public:
+    QPointer<FluFramelessHelper> _helper = nullptr;
+    qint64 _current = 0;
+};
+
+class FluFramelessHelper : public QObject, public QQmlParserStatus
+{
+    Q_OBJECT
+    QML_NAMED_ELEMENT(FluFramelessHelper)
+public:
+    explicit FluFramelessHelper(QObject *parent = nullptr);
+    ~FluFramelessHelper();
+    void classBegin() override;
+    void componentComplete() override;
+    bool hoverMaxBtn();
+    bool resizeable();
+    QObject* maximizeButton();
+    void setOriginalPos(QVariant pos);
+    Q_INVOKABLE void showSystemMenu();
+protected:
+    bool eventFilter(QObject *obj, QEvent *event) override;
+private:
+    void _updateCursor(int edges);
+    bool _maximized();
+    bool _fullScreen();
+    Q_SLOT void _onStayTopChange();
+    Q_SLOT void _onScreenChanged();
+public:
+    QPointer<QQuickWindow> window = nullptr;
+private:
+    FramelessEventFilter* _nativeEvent = nullptr;
+    QQmlProperty _stayTop;
+    QQmlProperty _screen;
+    QQmlProperty _originalPos;
+    QQmlProperty _fixSize;
+    QQmlProperty _accentColor;
+};
+
+#endif // FLUFRAMELESSHELPER_H

src/FluNetwork.cpp

@@ -54,6 +54,13 @@ int NetworkParams::getRetry(){
     return FluNetwork::getInstance()->retry();
 }
 
+bool NetworkParams::getOpenLog(){
+    if(!_openLog.isNull()){
+        return _openLog.toBool();
+    }
+    return FluNetwork::getInstance()->openLog();
+}
+
 DownloadParam::DownloadParam(QObject *parent)
     : QObject{parent}
 {
@@ -129,6 +136,11 @@ NetworkParams* NetworkParams::bind(QObject* target){
     return this;
 }
 
+NetworkParams* NetworkParams::openLog(QVariant val){
+    _openLog = val;
+    return this;
+}
+
 QString NetworkParams::buildCacheKey(){
     QJsonObject obj;
     obj.insert("url",_url);
@@ -189,8 +201,8 @@ void FluNetwork::handle(NetworkParams* params,NetworkCallable* c){
             QNetworkRequest request(url);
             addHeaders(&request,params->_headerMap);
             QNetworkReply* reply;
-            sendRequest(&manager,request,params,reply,callable);
-            if(!QPointer(qApp)){
+            sendRequest(&manager,request,params,reply,i==0,callable);
+            if(!QPointer<QGuiApplication>(qApp)){
                 reply->deleteLater();
                 reply = nullptr;
                 return;
@@ -215,22 +227,26 @@ void FluNetwork::handle(NetworkParams* params,NetworkCallable* c){
                 disconnect(conn_quit);
             }
             QString response;
-            if(reply->isOpen()){
-                response = QString::fromUtf8(reply->readAll());
+            if(params->_method == NetworkParams::METHOD_HEAD){
+                response = headerList2String(reply->rawHeaderPairs());
+            }else{
+                if(reply->isOpen()){
+                    response = QString::fromUtf8(reply->readAll());
+                }
             }
-            QNetworkReply::NetworkError error = reply->error();
-            if(error == QNetworkReply::NoError){
+            int httpStatus = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
+            if(httpStatus == 200){
                 if(!callable.isNull()){
                     if(params->_cacheMode != FluNetworkType::CacheMode::NoCache){
                         saveResponse(cacheKey,response);
                     }
                     callable->success(response);
                 }
+                printRequestEndLog(request,params,reply,response);
                 break;
             }else{
                 if(i == params->getRetry()-1){
                     if(!callable.isNull()){
-                        int httpStatus = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
                         if(params->_cacheMode == FluNetworkType::CacheMode::RequestFailedReadCache && cacheExists(cacheKey)){
                             if(!callable.isNull()){
                                 callable->cache(readCache(cacheKey));
@@ -238,6 +254,7 @@ void FluNetwork::handle(NetworkParams* params,NetworkCallable* c){
                         }
                         callable->error(httpStatus,reply->errorString(),response);
                     }
+                    printRequestEndLog(request,params,reply,response);
                 }
             }
             reply->deleteLater();
@@ -387,40 +404,70 @@ QString FluNetwork::getCacheFilePath(const QString& key){
     return cacheDir.absoluteFilePath(key);
 }
 
-void FluNetwork::sendRequest(QNetworkAccessManager* manager,QNetworkRequest request,NetworkParams* params,QNetworkReply*& reply,QPointer<NetworkCallable> callable){
+QString FluNetwork::headerList2String(const QList<QNetworkReply::RawHeaderPair>& data){
+    QJsonObject object;
+    for (auto it = data.constBegin(); it != data.constEnd(); ++it) {
+        object.insert(QString(it->first),QString(it->second));
+    }
+    return QJsonDocument(object).toJson(QJsonDocument::Compact);
+}
+
+QString FluNetwork::map2String(const QMap<QString, QVariant>& map){
+    QStringList parameters;
+    for (auto it = map.constBegin(); it != map.constEnd(); ++it) {
+        parameters << QString("%1=%2").arg(it.key(), it.value().toString());
+    }
+    return parameters.join(" ");
+}
+
+void FluNetwork::sendRequest(QNetworkAccessManager* manager,QNetworkRequest request,NetworkParams* params,QNetworkReply*& reply,bool isFirst,QPointer<NetworkCallable> callable){
     QByteArray verb = params->method2String().toUtf8();
     switch (params->_type) {
     case NetworkParams::TYPE_FORM:{
-        QHttpMultiPart *multiPart = new QHttpMultiPart();
-        multiPart->setContentType(QHttpMultiPart::FormDataType);
-        for (const auto& each : params->_paramMap.toStdMap())
-        {
-            QHttpPart part;
-            part.setHeader(QNetworkRequest::ContentDispositionHeader, QString("form-data; name=\"%1\"").arg(each.first));
-            part.setBody(each.second.toByteArray());
-            multiPart->append(part);
-        }
-        for (const auto& each : params->_fileMap.toStdMap())
-        {
-            QString filePath = each.second.toString();
-            QString name = each.first;
-            QFile *file = new QFile(filePath);
-            QString fileName = QFileInfo(filePath).fileName();
-            file->open(QIODevice::ReadOnly);
-            file->setParent(multiPart);
-            QHttpPart part;
-            part.setHeader(QNetworkRequest::ContentDispositionHeader, QString("form-data; name=\"%1\"; filename=\"%2\"").arg(name,fileName));
-            part.setBodyDevice(file);
-            multiPart->append(part);
-        }
-        reply = manager->sendCustomRequest(request,verb,multiPart);
-        multiPart->setParent(reply);
-        if(!params->_fileMap.isEmpty()){
+        bool isFormData = !params->_fileMap.isEmpty();
+        if(isFormData){
+            QHttpMultiPart *multiPart = new QHttpMultiPart();
+            multiPart->setContentType(QHttpMultiPart::FormDataType);
+            for (const auto& each : params->_paramMap.toStdMap())
+            {
+                QHttpPart part;
+                part.setHeader(QNetworkRequest::ContentDispositionHeader, QString("form-data; name=\"%1\"").arg(each.first));
+                part.setBody(each.second.toByteArray());
+                multiPart->append(part);
+            }
+            for (const auto& each : params->_fileMap.toStdMap())
+            {
+                QString filePath = each.second.toString();
+                QString name = each.first;
+                QFile *file = new QFile(filePath);
+                QString fileName = QFileInfo(filePath).fileName();
+                file->open(QIODevice::ReadOnly);
+                file->setParent(multiPart);
+                QHttpPart part;
+                part.setHeader(QNetworkRequest::ContentDispositionHeader, QString("form-data; name=\"%1\"; filename=\"%2\"").arg(name,fileName));
+                part.setBodyDevice(file);
+                multiPart->append(part);
+            }
+            reply = manager->sendCustomRequest(request,verb,multiPart);
+            multiPart->setParent(reply);
             connect(reply,&QNetworkReply::uploadProgress,reply,[callable](qint64 bytesSent, qint64 bytesTotal){
                 if(!callable.isNull() && bytesSent!=0 && bytesTotal!=0){
-                    callable->uploadProgress(bytesSent,bytesTotal);
+                    Q_EMIT callable->uploadProgress(bytesSent,bytesTotal);
                 }
             });
+        }else{
+            request.setHeader(QNetworkRequest::ContentTypeHeader, QString("application/x-www-form-urlencoded"));
+            QString value;
+            for (const auto& each : params->_paramMap.toStdMap())
+            {
+                value += QString("%1=%2").arg(each.first,each.second.toString());
+                value += "&";
+            }
+            if(!params->_paramMap.isEmpty()){
+                value.chop(1);
+            }
+            QByteArray data = value.toUtf8();
+            reply = manager->sendCustomRequest(request,verb,data);
         }
         break;
     }
@@ -458,6 +505,46 @@ void FluNetwork::sendRequest(QNetworkAccessManager* manager,QNetworkRequest requ
         reply = manager->sendCustomRequest(request,verb);
         break;
     }
+    if(isFirst){
+        printRequestStartLog(request,params);
+    }
+}
+
+void FluNetwork::printRequestStartLog(QNetworkRequest request,NetworkParams* params){
+    if(!params->getOpenLog()){
+        return;
+    }
+    qDebug()<<"<------"<<qUtf8Printable(request.header(QNetworkRequest::UserAgentHeader).toString())<<"Request Start ------>";
+    qDebug()<<qUtf8Printable(QString::fromStdString("<%1>").arg(params->method2String()))<<qUtf8Printable(params->_url);
+    auto contentType = request.header(QNetworkRequest::ContentTypeHeader).toString();
+    if(!contentType.isEmpty()){
+        qDebug()<<qUtf8Printable(QString::fromStdString("<Header> %1=%2").arg("Content-Type",contentType));
+    }
+    QList<QByteArray> headers = request.rawHeaderList();
+    for(const QByteArray& header:headers){
+        qDebug()<<qUtf8Printable(QString::fromStdString("<Header> %1=%2").arg(header,request.rawHeader(header)));
+    }
+    if(!params->_queryMap.isEmpty()){
+        qDebug()<<"<Query>"<<qUtf8Printable(map2String(params->_queryMap));
+    }
+    if(!params->_paramMap.isEmpty()){
+        qDebug()<<"<Param>"<<qUtf8Printable(map2String(params->_paramMap));
+    }
+    if(!params->_fileMap.isEmpty()){
+        qDebug()<<"<File>"<<qUtf8Printable(map2String(params->_fileMap));
+    }
+    if(!params->_body.isEmpty()){
+        qDebug()<<"<Body>"<<qUtf8Printable(params->_body);
+    }
+}
+
+void FluNetwork::printRequestEndLog(QNetworkRequest request,NetworkParams* params,QNetworkReply*& reply,const QString& response){
+    if(!params->getOpenLog()){
+        return;
+    }
+    qDebug()<<"<------"<<qUtf8Printable(request.header(QNetworkRequest::UserAgentHeader).toString())<<"Request End ------>";
+    qDebug()<<qUtf8Printable(QString::fromStdString("<%1>").arg(params->method2String()))<<qUtf8Printable(params->_url);
+    qDebug()<<"<Result>"<<qUtf8Printable(response);
 }
 
 void FluNetwork::saveResponse(QString key,QString response){
@@ -471,6 +558,7 @@ void FluNetwork::saveResponse(QString key,QString response){
 }
 
 void FluNetwork::addHeaders(QNetworkRequest* request,const QMap<QString, QVariant>& headers){
+    request->setHeader(QNetworkRequest::UserAgentHeader,QString::fromStdString("Mozilla/5.0 %1/%2").arg(QGuiApplication::applicationName(),QGuiApplication::applicationVersion()));
     QMapIterator<QString, QVariant> iter(headers);
     while (iter.hasNext())
     {
@@ -494,6 +582,7 @@ FluNetwork::FluNetwork(QObject *parent): QObject{parent}
 {
     timeout(5000);
     retry(3);
+    openLog(false);
     cacheDir(QStandardPaths::writableLocation(QStandardPaths::CacheLocation).append(QDir::separator()).append("network"));
 }
 

src/FluNetwork.h

@@ -7,6 +7,7 @@
 #include <QJsonValue>
 #include <QJSValue>
 #include <QNetworkAccessManager>
+#include <QNetworkReply>
 #include "Def.h"
 #include "stdafx.h"
 #include "singleton.h"
@@ -67,11 +68,13 @@ public:
     Q_INVOKABLE NetworkParams* setCacheMode(int val);
     Q_INVOKABLE NetworkParams* toDownload(QString destPath,bool append = false);
     Q_INVOKABLE NetworkParams* bind(QObject* target);
+    Q_INVOKABLE NetworkParams* openLog(QVariant val);
     Q_INVOKABLE void go(NetworkCallable* result);
     QString buildCacheKey();
     QString method2String();
     int getTimeout();
     int getRetry();
+    bool getOpenLog();
 public:
     DownloadParam* _downloadParam = nullptr;
     QObject* _target = nullptr;
@@ -85,6 +88,7 @@ public:
     QMap<QString, QVariant> _fileMap;
     int _timeout = -1;
     int _retry = -1;
+    QVariant _openLog;
     int _cacheMode = FluNetworkType::CacheMode::NoCache;
 };
 
@@ -94,6 +98,7 @@ class FluNetwork : public QObject
     Q_PROPERTY_AUTO(int,timeout)
     Q_PROPERTY_AUTO(int,retry)
     Q_PROPERTY_AUTO(QString,cacheDir)
+    Q_PROPERTY_AUTO(bool,openLog)
     QML_NAMED_ELEMENT(FluNetwork)
     QML_SINGLETON
 private:
@@ -123,13 +128,17 @@ public:
     void handle(NetworkParams* params,NetworkCallable* result);
     void handleDownload(NetworkParams* params,NetworkCallable* result);
 private:
-    void sendRequest(QNetworkAccessManager* manager,QNetworkRequest request,NetworkParams* params,QNetworkReply*& reply,QPointer<NetworkCallable> callable);
+    void sendRequest(QNetworkAccessManager* manager,QNetworkRequest request,NetworkParams* params,QNetworkReply*& reply,bool isFirst,QPointer<NetworkCallable> callable);
     void addQueryParam(QUrl* url,const QMap<QString, QVariant>& params);
     void addHeaders(QNetworkRequest* request,const QMap<QString, QVariant>& headers);
     void saveResponse(QString key,QString response);
     QString readCache(const QString& key);
     bool cacheExists(const QString& key);
     QString getCacheFilePath(const QString& key);
+    QString map2String(const QMap<QString, QVariant>& map);
+    QString headerList2String(const QList<QNetworkReply::RawHeaderPair>& data);
+    void printRequestStartLog(QNetworkRequest request,NetworkParams* params);
+    void printRequestEndLog(QNetworkRequest request,NetworkParams* params,QNetworkReply*& reply,const QString& response);
 public:
     QJSValue _interceptor;
 };

src/FluTools.cpp

@@ -14,6 +14,7 @@
 #include <QTextDocument>
 #include <QQuickWindow>
 #include <QDateTime>
+#include <QSettings>
 
 FluTools::FluTools(QObject *parent):QObject{parent}{
 
@@ -175,3 +176,67 @@ QPoint FluTools::cursorPos(){
 qint64 FluTools::currentTimestamp(){
     return QDateTime::currentMSecsSinceEpoch();
 }
+
+QIcon FluTools::windowIcon(){
+    return QGuiApplication::windowIcon();
+}
+
+int FluTools::cursorScreenIndex(){
+    int screenIndex = 0;
+    int screenCount = qApp->screens().count();
+    if (screenCount > 1) {
+        QPoint pos = QCursor::pos();
+        for (int i = 0; i < screenCount; ++i) {
+            if (qApp->screens().at(i)->geometry().contains(pos)) {
+                screenIndex = i;
+                break;
+            }
+        }
+    }
+    return screenIndex;
+}
+
+int FluTools::windowBuildNumber(){
+#if defined(Q_OS_WIN)
+    QSettings regKey {QString::fromUtf8("HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion"), QSettings::NativeFormat};
+    if (regKey.contains(QString::fromUtf8("CurrentBuildNumber"))) {
+        auto buildNumber = regKey.value(QString::fromUtf8("CurrentBuildNumber")).toInt();
+        return buildNumber;
+    }
+#endif
+    return -1;
+}
+
+bool FluTools::isWindows11OrGreater(){
+    static QVariant var;
+    if(var.isNull()){
+#if defined(Q_OS_WIN)
+        auto buildNumber = windowBuildNumber();
+        if(buildNumber>=22000){
+            var = QVariant::fromValue(true);
+            return true;
+        }
+#endif
+        var = QVariant::fromValue(false);
+        return  false;
+    }else{
+        return var.toBool();
+    }
+}
+
+bool FluTools::isWindows10OrGreater(){
+    static QVariant var;
+    if(var.isNull()){
+#if defined(Q_OS_WIN)
+        auto buildNumber = windowBuildNumber();
+        if(buildNumber>=10240){
+            var = QVariant::fromValue(true);
+            return true;
+        }
+#endif
+        var = QVariant::fromValue(false);
+        return  false;
+    }else{
+        return var.toBool();
+    }
+}

src/FluTools.h

@@ -49,6 +49,11 @@ public:
     Q_INVOKABLE bool isSoftware();
     Q_INVOKABLE qint64 currentTimestamp();
     Q_INVOKABLE QPoint cursorPos();
+    Q_INVOKABLE QIcon windowIcon();
+    Q_INVOKABLE int cursorScreenIndex();
+    Q_INVOKABLE int windowBuildNumber();
+    Q_INVOKABLE bool isWindows11OrGreater();
+    Q_INVOKABLE bool isWindows10OrGreater();
 };
 
 #endif // FLUTOOLS_H

src/FluentUI.cpp

@@ -16,6 +16,7 @@
 #include "Screenshot.h"
 #include "FluRectangle.h"
 #include "FluNetwork.h"
+#include "FluFramelessHelper.h"
 #include "QRCode.h"
 
 void FluentUI::registerTypes(QQmlEngine *engine){
@@ -40,6 +41,7 @@ void FluentUI::registerTypes(const char *uri){
     qmlRegisterType<FluRectangle>(uri,major,minor,"FluRectangle");
     qmlRegisterType<NetworkCallable>(uri,major,minor,"FluNetworkCallable");
     qmlRegisterType<NetworkParams>(uri,major,minor,"FluNetworkParams");
+    qmlRegisterType<FluFramelessHelper>(uri,major,minor,"FluFramelessHelper");
 
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/ColorPicker.qml"),uri,major,minor,"ColorPicker");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/Content/Checkerboard.qml"),uri,major,minor,"Checkerboard");
@@ -114,7 +116,6 @@ void FluentUI::registerTypes(const char *uri){
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluSpinBox.qml"),uri,major,minor,"FluSpinBox");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluStatusView.qml"),uri,major,minor,"FluStatusView");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluTabView.qml"),uri,major,minor,"FluTabView");
-    qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluTableModelColumn.qml"),uri,major,minor,"FluTableModelColumn");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluTableView.qml"),uri,major,minor,"FluTableView");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluText.qml"),uri,major,minor,"FluText");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluTextBox.qml"),uri,major,minor,"FluTextBox");
@@ -159,7 +160,7 @@ void FluentUI::registerTypes(const char *uri){
 void FluentUI::initializeEngine(QQmlEngine *engine, const char *uri){
 #ifdef Q_OS_WIN
     QFont font;
-    font.setFamily("Microsoft YaHei UI");
+    font.setFamily("微软雅黑");
     QGuiApplication::setFont(font);
 #endif
     FluApp* app = FluApp::getInstance();

src/QRCode.cpp

@@ -1,10 +1,6 @@
 #include "QRCode.h"
 
-#include "BarcodeFormat.h"
-#include "BitMatrix.h"
-#include "MultiFormatWriter.h"
-
-using namespace ZXing;
+#include "qrcode/qrencode.h"
 
 QRCode::QRCode(QQuickItem* parent):QQuickPaintedItem(parent){
     color(QColor(0,0,0,255));
@@ -27,29 +23,35 @@ void QRCode::paint(QPainter* painter){
     if(_text.isEmpty()){
         return;
     }
-    if(_text.length()>1108){
+    if(_text.length()>1024){
         return;
     }
     painter->save();
-    auto format = ZXing::BarcodeFormatFromString("QRCode");
-    auto writer = MultiFormatWriter(format);
-    writer.setMargin(0);
-    writer.setEncoding(ZXing::CharacterSet::UTF8);
-    auto matrix = writer.encode(_text.toUtf8().constData(), 0, 0);
-    auto bitmap = ToMatrix<uint8_t>(matrix);
-    auto image = QImage(bitmap.data(), bitmap.width(), bitmap.height(), bitmap.width(), QImage::Format::Format_Grayscale8).copy();
-    QImage rgbImage = image.convertToFormat(QImage::Format_ARGB32);
-    for (int y = 0; y < rgbImage.height(); ++y) {
-        for (int x = 0; x < rgbImage.width(); ++x) {
-            QRgb pixel = rgbImage.pixel(x, y);
-            if (qRed(pixel) == 0 && qGreen(pixel) == 0 && qBlue(pixel) == 0) {
-                rgbImage.setPixelColor(x, y, _color);
-            }
-            if (qRed(pixel) == 255 && qGreen(pixel) == 255 && qBlue(pixel) == 255) {
-                rgbImage.setPixelColor(x, y, _bgColor);
+    QRcode *qrcode = QRcode_encodeString(_text.toUtf8().constData(), 2, QR_ECLEVEL_Q, QR_MODE_8, 1);
+    qint32 w = width();
+    qint32 h = height();
+    qint32 qrcodeW = qrcode->width > 0 ? qrcode->width : 1;
+    double scaleX = (double)w / (double)qrcodeW;
+    double scaleY = (double)h / (double)qrcodeW;
+    QImage image = QImage(w, h, QImage::Format_ARGB32);
+    QPainter p(&image);
+    p.setBrush(_bgColor);
+    p.setPen(Qt::NoPen);
+    p.drawRect(0, 0, w, h);
+    p.setBrush(_color);
+    for (qint32 y = 0; y < qrcodeW; y++)
+    {
+        for (qint32 x = 0; x < qrcodeW; x++)
+        {
+            unsigned char b = qrcode->data[y*qrcodeW + x];
+            if (b & 0x01)
+            {
+                QRectF r(x * scaleX,y * scaleY, scaleX, scaleY);
+                p.drawRects(&r, 1);
             }
         }
     }
-    painter->drawImage(QRect(0, 0, static_cast<int>(width()), static_cast<int>(height())), rgbImage);
+    QPixmap pixmap = QPixmap::fromImage(image);
+    painter->drawPixmap(QRect(0, 0, static_cast<int>(width()), static_cast<int>(height())), pixmap);
     painter->restore();
 }

src/Qt5/imports/FluentUI/Controls/FluAppBar.qml

@@ -34,10 +34,17 @@ Rectangle{
     property bool isMac: FluTools.isMacos()
     property color borerlessColor : FluTheme.primaryColor
     property var maxClickListener : function(){
-        if (d.win.visibility === Window.Maximized)
-            d.win.visibility = Window.Windowed
-        else
-            d.win.visibility = Window.Maximized
+        if(FluTools.isMacos()){
+            if (d.win.visibility === Window.FullScreen)
+                d.win.visibility = Window.Windowed
+            else
+                d.win.visibility = Window.FullScreen
+        }else{
+            if (d.win.visibility === Window.Maximized)
+                d.win.visibility = Window.Windowed
+            else
+                d.win.visibility = Window.Maximized
+        }
     }
     property var minClickListener: function(){
         d.win.visibility = Window.Minimized
@@ -57,6 +64,11 @@ Rectangle{
             FluTheme.darkMode = FluThemeType.Dark
         }
     }
+    property var systemMenuListener: function(){
+        if(d.win instanceof FluWindow){
+            d.win.showSystemMenu()
+        }
+    }
     id:control
     color: Qt.rgba(0,0,0,0)
     height: visible ? 30 : 0
@@ -64,6 +76,7 @@ Rectangle{
     z: 65535
     Item{
         id:d
+        property bool hoverMaxBtn: false
         property var win: Window.window
         property bool stayTop: {
             if(d.win instanceof FluWindow){
@@ -74,14 +87,25 @@ Rectangle{
         property bool isRestore: win && Window.Maximized === win.visibility
         property bool resizable: win && !(win.height === win.maximumHeight && win.height === win.minimumHeight && win.width === win.maximumWidth && win.width === win.minimumWidth)
     }
-    TapHandler {
-        onTapped: if (tapCount === 2 && d.resizable) btn_maximize.clicked()
-        gesturePolicy: TapHandler.DragThreshold
-    }
-    DragHandler {
-        target: null
-        grabPermissions: TapHandler.CanTakeOverFromAnything
-        onActiveChanged: if (active) { d.win.startSystemMove(); }
+    MouseArea{
+        anchors.fill: parent
+        onPositionChanged:
+            (mouse)=>{
+                d.win.startSystemMove()
+            }
+        onDoubleClicked:
+            (mouse)=>{
+                if(d.resizable && Qt.LeftButton){
+                    btn_maximize.clicked()
+                }
+            }
+        acceptedButtons: Qt.LeftButton|Qt.RightButton
+        onClicked:
+            (mouse)=>{
+                if (mouse.button === Qt.RightButton){
+                    control.systemMenuListener()
+                }
+            }
     }
     Row{
         anchors{
@@ -105,6 +129,49 @@ Rectangle{
             anchors.verticalCenter: parent.verticalCenter
         }
     }
+
+    Component{
+        id:com_mac_buttons
+        RowLayout{
+            FluImageButton{
+                Layout.preferredHeight: 12
+                Layout.preferredWidth: 12
+                normalImage: "../Image/btn_close_normal.png"
+                hoveredImage: "../Image/btn_close_hovered.png"
+                pushedImage: "../Image/btn_close_pushed.png"
+                visible: showClose
+                onClicked: closeClickListener()
+            }
+            FluImageButton{
+                Layout.preferredHeight: 12
+                Layout.preferredWidth: 12
+                normalImage: "../Image/btn_min_normal.png"
+                hoveredImage: "../Image/btn_min_hovered.png"
+                pushedImage: "../Image/btn_min_pushed.png"
+                onClicked: minClickListener()
+                visible: showMinimize
+            }
+            FluImageButton{
+                Layout.preferredHeight: 12
+                Layout.preferredWidth: 12
+                normalImage: "../Image/btn_max_normal.png"
+                hoveredImage: "../Image/btn_max_hovered.png"
+                pushedImage: "../Image/btn_max_pushed.png"
+                onClicked: maxClickListener()
+                visible: d.resizable && showMaximize
+            }
+        }
+    }
+
+    FluLoader{
+        anchors{
+            verticalCenter: parent.verticalCenter
+            left: parent.left
+            leftMargin: 10
+        }
+        sourceComponent: isMac ? com_mac_buttons : undefined
+    }
+
     RowLayout{
         anchors.right: parent.right
         height: control.height
@@ -166,6 +233,9 @@ Rectangle{
                 if(pressed){
                     return maximizePressColor
                 }
+                if(FluTools.isWindows11OrGreater()){
+                    return d.hoverMaxBtn ? maximizeHoverColor : maximizeNormalColor
+                }
                 return hovered ? maximizeHoverColor : maximizeNormalColor
             }
             Layout.alignment: Qt.AlignVCenter
@@ -211,4 +281,17 @@ Rectangle{
     function darkButton(){
         return btn_dark
     }
+    function maximizeButtonHover(){
+        var hover = false;
+        var pos = btn_maximize.mapToGlobal(0,0)
+        if(btn_maximize.visible){
+            var rect = Qt.rect(pos.x,pos.y,btn_maximize.width,btn_maximize.height)
+            pos = FluTools.cursorPos()
+            if(pos.x>rect.x && pos.x<(rect.x+rect.width) && pos.y>rect.y && pos.y<(rect.y+rect.height)){
+                hover = true;
+            }
+        }
+        d.hoverMaxBtn = hover
+        return hover;
+    }
 }

src/Qt5/imports/FluentUI/Controls/FluChart.qml

@@ -4,25 +4,27 @@ import "./../JS/Chart.js" as Chart
 
 Canvas {
     id: control
-    property var window: Window.window
-    property var jsChart: undefined
     property string chartType
     property var chartData
     property var chartOptions
     property double chartAnimationProgress: 0.1
     property int animationEasingType: Easing.InOutExpo
-    property double animationDuration: 0
-    property var memorizedContext
-    property var memorizedData
-    property var memorizedOptions
+    property double animationDuration: 300
     property alias animationRunning: chartAnimator.running
     signal animationFinished()
     function animateToNewData()
     {
         chartAnimationProgress = 0.1;
-        jsChart.update();
+        d.jsChart.update();
         chartAnimator.restart();
     }
+    QtObject{
+        id:d
+        property var jsChart: undefined
+        property var memorizedContext
+        property var memorizedData
+        property var memorizedOptions
+    }
     MouseArea {
         id: event
         anchors.fill: control
@@ -48,31 +50,33 @@ Canvas {
             mouseEvent.left = 0;
             mouseEvent.top = 0;
             mouseEvent.target = control;
-
             if(handler) {
                 handler(mouseEvent);
             }
-
             control.requestPaint();
         }
-        onClicked:(mouse)=> {
-            submitEvent(mouse, "click");
-        }
-        onPositionChanged:(mouse)=> {
-            submitEvent(mouse, "mousemove");
-        }
+        onClicked:
+            (mouse)=> {
+                submitEvent(mouse, "click");
+            }
+        onPositionChanged:
+            (mouse)=> {
+                submitEvent(mouse, "mousemove");
+            }
         onExited: {
             submitEvent(undefined, "mouseout");
         }
         onEntered: {
             submitEvent(undefined, "mouseenter");
         }
-        onPressed:(mouse)=> {
-            submitEvent(mouse, "mousedown");
-        }
-        onReleased:(mouse)=> {
-            submitEvent(mouse, "mouseup");
-        }
+        onPressed:
+            (mouse)=> {
+                submitEvent(mouse, "mousedown");
+            }
+        onReleased:
+            (mouse)=> {
+                submitEvent(mouse, "mouseup");
+            }
     }
     PropertyAnimation {
         id: chartAnimator
@@ -90,34 +94,25 @@ Canvas {
         control.requestPaint();
     }
     onPaint: {
-        if(control.getContext('2d') !== null && memorizedContext !== control.getContext('2d') || memorizedData !== control.chartData || memorizedOptions !== control.chartOptions) {
+        if(control.getContext('2d') !== null && d.memorizedContext !== control.getContext('2d') || d.memorizedData !== control.chartData || d.memorizedOptions !== control.chartOptions) {
             var ctx = control.getContext('2d');
-
-            jsChart =  Chart.build(ctx, {
-                type: control.chartType,
-                data: control.chartData,
-                options: control.chartOptions
-                });
-
-            memorizedData = control.chartData ;
-            memorizedContext = control.getContext('2d');
-            memorizedOptions = control.chartOptions;
-
-            control.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
-
+            d.jsChart =  Chart.build(ctx, {type: control.chartType,data: control.chartData,options: control.chartOptions});
+            d.memorizedData = control.chartData ;
+            d.memorizedContext = control.getContext('2d');
+            d.memorizedOptions = control.chartOptions;
+            d.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
             chartAnimator.start();
         }
-
-        jsChart.draw(chartAnimationProgress);
+        d.jsChart.draw(chartAnimationProgress);
     }
     onWidthChanged: {
-        if(jsChart) {
-            jsChart.resize();
+        if(d.jsChart) {
+            d.jsChart.resize();
         }
     }
     onHeightChanged: {
-        if(jsChart) {
-            jsChart.resize();
+        if(d.jsChart) {
+            d.jsChart.resize();
         }
     }
 }

src/Qt5/imports/FluentUI/Controls/FluImageButton.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+Button{
+    id:control
+    property string normalImage: ""
+    property string hoveredImage: ""
+    property string pushedImage: ""
+    background: Item{
+        implicitHeight: 12
+        implicitWidth: 12
+        BorderImage {
+            anchors.fill: parent
+            source: control.hovered ? (control.pressed ? control.pushedImage : control.hoveredImage ) : control.normalImage
+        }
+    }
+}

src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -64,6 +64,7 @@ TextArea{
         anchors.fill: parent
         cursorShape: Qt.IBeamCursor
         acceptedButtons: Qt.RightButton
+        visible: !readOnly
         onClicked: control.echoMode !== TextInput.Password && menu.popup()
     }
     FluTextBoxMenu{

src/Qt5/imports/FluentUI/Controls/FluPaneItem.qml

@@ -8,21 +8,17 @@ QtObject {
     property var _ext
     property var _parent
     property string title
-    property int order : 0
     property var url
     property bool disabled: false
     property int icon
     property bool iconVisible: true
     property Component infoBadge
-    property bool recentlyAdded: false
-    property bool recentlyUpdated: false
-    property string desc
-    property var image
     property int count: 0
     property var onTapListener
     property Component iconDelegate
     property Component menuDelegate
     property Component editDelegate
+    property var extra
     property bool showEdit
     signal tap
 }

src/Qt5/imports/FluentUI/Controls/FluTableModelColumn.qml

@@ -1,5 +0,0 @@
-import Qt.labs.qmlmodels 1.0
-
-TableModelColumn{
-
-}

src/Qt5/imports/FluentUI/Controls/FluTableView.qml

@@ -13,19 +13,17 @@ Rectangle {
     color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {
         if(columnSource.length!==0){
-            var com_column = Qt.createComponent("FluTableModelColumn.qml")
-            if (com_column.status === Component.Ready) {
-                var columns= []
-                var header_rows = {}
-                columnSource.forEach(function(item){
-                    var column = com_column.createObject(table_model,{display:item.dataIndex});
-                    columns.push(column)
-                    header_rows[item.dataIndex] = item.title
-                })
-                table_model.columns = columns
-                header_model.columns = columns
-                d.header_rows = [header_rows]
-            }
+            var columns= []
+            var header_rows = {}
+            columnSource.forEach(function(item){
+                var column = Qt.createQmlObject('import Qt.labs.qmlmodels 1.0;TableModelColumn{}',table_model);
+                column.display = item.dataIndex
+                columns.push(column)
+                header_rows[item.dataIndex] = item.title
+            })
+            table_model.columns = columns
+            header_model.columns = columns
+            d.header_rows = [header_rows]
         }
     }
     QtObject{

src/Qt5/imports/FluentUI/Controls/FluTextBox.qml

@@ -62,6 +62,7 @@ TextField{
         anchors.fill: parent
         cursorShape: Qt.IBeamCursor
         acceptedButtons: Qt.RightButton
+        visible: !readOnly
         onClicked: control.echoMode !== TextInput.Password && menu.popup()
     }
     RowLayout{

src/Qt5/imports/FluentUI/Controls/FluWindow.qml

@@ -3,10 +3,10 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
-import org.wangwenx190.FramelessHelper 1.0
 
 Window {
-    default property alias content: container.data
+    default property alias content: layout_content.data
+    property string windowIcon: FluApp.windowIcon
     property bool closeDestory: true
     property int launchMode: FluWindowType.Standard
     property var argument:({})
@@ -16,13 +16,13 @@ Window {
     property bool fitsAppBarWindows: false
     property Item appBar: FluAppBar {
         title: window.title
-        width: window.width
         height: 30
         showDark: window.showDark
         showClose: window.showClose
         showMinimize: window.showMinimize
         showMaximize: window.showMaximize
         showStayTop: window.showStayTop
+        icon: window.windowIcon
     }
     property color backgroundColor: {
         if(active){
@@ -38,8 +38,15 @@ Window {
     property bool showMinimize: true
     property bool showMaximize: true
     property bool showStayTop: true
-    property bool useSystemAppBar
     property bool autoMaximize: false
+    property bool useSystemAppBar
+    property color resizeBorderColor: {
+        if(window.active){
+            return _accentColor
+        }
+        return FluTheme.dark ? "#3D3D3E" : "#A7A7A7"
+    }
+    property int resizeBorderWidth: 1
     property var closeListener: function(event){
         if(closeDestory){
             destoryOnClose()
@@ -48,34 +55,49 @@ Window {
             event.accepted = false
         }
     }
+    signal showSystemMenu
     signal initArgument(var argument)
     signal firstVisible()
+    property point _offsetXY : Qt.point(0,0)
+    property var _originalPos
+    property color _accentColor : FluTheme.dark ? "#333333" : "#6E6E6E"
     id:window
-    maximumWidth: useSystemAppBar&&fixSize ? width : 16777215
-    maximumHeight: useSystemAppBar&&fixSize ? height : 16777215
-    minimumWidth: useSystemAppBar&&fixSize ? width : 0
-    minimumHeight: useSystemAppBar&&fixSize ? height : 0
     color:"transparent"
-    onStayTopChanged: {
-        d.changedStayTop()
-    }
     Component.onCompleted: {
+        moveWindowToDesktopCenter()
         useSystemAppBar = FluApp.useSystemAppBar
+        if(!useSystemAppBar){
+            loader_frameless_helper.sourceComponent = com_frameless
+        }
         lifecycle.onCompleted(window)
         initArgument(argument)
-        d.changedStayTop()
-        if(useSystemAppBar){
-            window.moveWindowToDesktopCenter()
-            if(window.autoMaximize){
-                window.showMaximized()
-            }else{
-                window.show()
-            }
+        if(window.autoMaximize){
+            window.showMaximized()
+        }else{
+            window.show()
         }
     }
     Component.onDestruction: {
         lifecycle.onDestruction()
     }
+    on_OriginalPosChanged: {
+        if(_originalPos){
+            var dx = (_originalPos.x - screen.virtualX)/screen.devicePixelRatio
+            var dy = _originalPos.y - screen.virtualY/screen.devicePixelRatio
+            if(dx<0 && dy<0){
+                _offsetXY = Qt.point(Math.abs(dx),Math.abs(dy))
+            }else{
+                _offsetXY = Qt.point(0,0)
+            }
+        }else{
+            _offsetXY = Qt.point(0,0)
+        }
+    }
+    onShowSystemMenu: {
+        if(loader_frameless_helper.item){
+            loader_frameless_helper.item.showSystemMenu()
+        }
+    }
     onVisibleChanged: {
         if(visible && d.isFirstVisible){
             window.firstVisible()
@@ -86,74 +108,27 @@ Window {
     QtObject{
         id:d
         property bool isFirstVisible: true
-        function changedStayTop(){
-            function toggleStayTop(){
-                if(window.stayTop){
-                    window.flags = window.flags | Qt.WindowStaysOnTopHint
-                }else{
-                    window.flags = window.flags &~ Qt.WindowStaysOnTopHint
-                }
-            }
-            if(window.visibility === Window.Maximized){
-                window.visibility = Window.Windowed
-                toggleStayTop()
-                window.visibility = Window.Maximized
-            }else{
-                toggleStayTop()
-            }
-        }
     }
     Connections{
         target: window
         function onClosing(event){closeListener(event)}
     }
+    Component{
+        id:com_frameless
+        FluFramelessHelper{}
+    }
     Component{
         id:com_background
         Rectangle{
             color: window.backgroundColor
         }
     }
-    FluLoader{
-        anchors.fill: parent
-        sourceComponent: background
-    }
-    FluLoader{
-        id:loader_app_bar
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-        sourceComponent: window.useSystemAppBar ? undefined : com_app_bar
-    }
     Component{
         id:com_app_bar
         Item{
             data: window.appBar
-            height: {
-                if(FluApp.useSystemAppBar){
-                    return 0
-                }
-                return window.fitsAppBarWindows ? 0 : childrenRect.height
-            }
         }
     }
-    Item{
-        id:container
-        anchors{
-            top: loader_app_bar.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-        clip: true
-    }
-    FluLoader{
-        property string loadingText: "加载中..."
-        property bool cancel: false
-        id:loader_loading
-        anchors.fill: container
-    }
     Component{
         id:com_loading
         Popup{
@@ -216,64 +191,93 @@ Window {
             }
         }
     }
-    FluInfoBar{
-        id:infoBar
-        root: window
-    }
-    Connections{
-        target: FluTheme
-        function onDarkChanged(){
-            if (FluTheme.dark)
-                FramelessUtils.systemTheme = FramelessHelperConstants.Dark
-            else
-                FramelessUtils.systemTheme = FramelessHelperConstants.Light
-        }
-    }
-    FramelessHelper{
-        id:framless_helper
-        onReady: {
-            flags = flags | Qt.Window | Qt.CustomizeWindowHint | Qt.WindowTitleHint | Qt.WindowSystemMenuHint | Qt.WindowMinMaxButtonsHint | Qt.WindowCloseButtonHint
-            if(appBar){
-                var appbar = window.appBar
-                window.moveWindowToDesktopCenter()
-                setWindowFixedSize(fixSize)
-                if (blurBehindWindowEnabled)
-                    window.background = undefined
-            }
-            if(window.autoMaximize){
-                window.showMaximized()
-            }else{
-                window.show()
-            }
-        }
-    }
-    WindowLifecycle{
-        id:lifecycle
-    }
     FluLoader{
-        id:loader_window_border
-        anchors.fill: parent
-        z:999
-        sourceComponent: FluApp.useSystemAppBar ? undefined : com_window_border
+        id:loader_frameless_helper
     }
-    Component{
-        id:com_window_border
-        Item{
-            WindowBorder{
-                anchors.fill: parent
-                visible: !FluTools.isLinux()
+    Item{
+        id:layout_container
+        anchors{
+            fill:parent
+            topMargin: _offsetXY.y
+        }
+        onWidthChanged: {
+            window.appBar.width = width
+        }
+        FluLoader{
+            anchors.fill: parent
+            sourceComponent: background
+        }
+        FluLoader{
+            id:loader_app_bar
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
             }
-            Rectangle{
-                anchors.fill: parent
-                color: Qt.rgba(0,0,0,0)
-                border.width: 1
-                visible: FluTools.isLinux()
-                border.color: {
-                    if(window.active){
-                        return Qt.rgba(51/255,51/255,51/255,1)
-                    }
-                    return Qt.rgba(153/255,153/255,153/255,1)
+            height: {
+                if(window.useSystemAppBar){
+                    return 0
                 }
+                return window.fitsAppBarWindows ? 0 : window.appBar.height
+            }
+            sourceComponent: window.useSystemAppBar ? undefined : com_app_bar
+        }
+        Item{
+            id:layout_content
+            anchors{
+                top: loader_app_bar.bottom
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            clip: true
+        }
+        FluLoader{
+            property string loadingText: "加载中..."
+            property bool cancel: false
+            id:loader_loading
+            anchors.fill: layout_content
+        }
+        FluInfoBar{
+            id:infoBar
+            root: window
+        }
+        WindowLifecycle{
+            id:lifecycle
+        }
+        Rectangle{
+            anchors.fill: parent
+            color:"transparent"
+            border.width: window.resizeBorderWidth
+            border.color: window.resizeBorderColor
+            visible: {
+                if(window.useSystemAppBar || FluTools.isWindows10OrGreater()){
+                    return false
+                }
+                if(FluTools.isMacos()){
+                    if(window.visibility == Window.FullScreen){
+                        return false
+                    }
+                }else{
+                    if(window.visibility == Window.Maximized || window.visibility == Window.FullScreen){
+                        return false
+                    }
+                }
+                return true
+            }
+        }
+        Rectangle{
+            height: 1
+            width: parent.width
+            color: window.resizeBorderColor
+            visible: {
+                if(window.useSystemAppBar || !FluTools.isWin()){
+                    return false
+                }
+                if(window.visibility == Window.Maximized || window.visibility == Window.FullScreen){
+                    return false
+                }
+                return true
             }
         }
     }
@@ -304,14 +308,24 @@ Window {
         return lifecycle.createRegister(window,path)
     }
     function moveWindowToDesktopCenter(){
-        return framless_helper.moveWindowToDesktopCenter()
+        screen = Qt.application.screens[FluTools.cursorScreenIndex()]
+        window.setGeometry((Screen.width-window.width)/2+Screen.virtualX,(Screen.height-window.height)/2+Screen.virtualY,window.width,window.height)
+        if(fixSize){
+            maximumWidth =  width
+            maximumHeight =  height
+            minimumWidth = width
+            minimumHeight = height
+        }
     }
     function onResult(data){
         if(_pageRegister){
             _pageRegister.onResult(data)
         }
     }
-    function containerItem(){
-        return container
+    function layoutContainer(){
+        return layout_container
+    }
+    function layoutContent(){
+        return layout_content
     }
 }

src/Qt5/imports/FluentUI/plugins.qmltypes

@@ -4,7 +4,7 @@ import QtQuick.tooling 1.2
 // It is used for QML tooling purposes only.
 //
 // This file was auto-generated by:
-// 'qmlplugindump -nonrelocatable FluentUI 1.0 D:/QtProjects/build-FluentUI-Desktop_Qt_5_15_2_MSVC2019_64bit-Release/src'
+// 'qmlplugindump -nonrelocatable FluentUI 1.0 D:\QtProjects\build-FluentUI-Desktop_Qt_5_15_2_MSVC2019_64bit-Release\src'
 
 Module {
     dependencies: ["QtQuick 2.0"]
@@ -75,6 +75,12 @@ Module {
             Parameter { name: "data"; type: "QVariantMap" }
         }
     }
+    Component {
+        name: "FluFramelessHelper"
+        prototype: "QObject"
+        exports: ["FluentUI/FluFramelessHelper 1.0"]
+        exportMetaObjectRevisions: [0]
+    }
     Component {
         name: "FluNavigationViewType"
         exports: ["FluentUI/FluNavigationViewType 1.0"]
@@ -1866,6 +1872,11 @@ Module {
             type: "NetworkParams*"
             Parameter { name: "target"; type: "QObject"; isPointer: true }
         }
+        Method {
+            name: "openLog"
+            type: "NetworkParams*"
+            Parameter { name: "val"; type: "QVariant" }
+        }
         Method {
             name: "go"
             Parameter { name: "result"; type: "NetworkCallable"; isPointer: true }
@@ -2538,17 +2549,12 @@ Module {
         exportMetaObjectRevisions: [0]
         isComposite: true
         defaultProperty: "data"
-        Property { name: "window"; type: "QVariant" }
-        Property { name: "jsChart"; type: "QVariant" }
         Property { name: "chartType"; type: "string" }
         Property { name: "chartData"; type: "QVariant" }
         Property { name: "chartOptions"; type: "QVariant" }
         Property { name: "chartAnimationProgress"; type: "double" }
         Property { name: "animationEasingType"; type: "int" }
         Property { name: "animationDuration"; type: "double" }
-        Property { name: "memorizedContext"; type: "QVariant" }
-        Property { name: "memorizedData"; type: "QVariant" }
-        Property { name: "memorizedOptions"; type: "QVariant" }
         Property { name: "animationRunning"; type: "bool" }
         Signal { name: "animationFinished" }
         Method { name: "animateToNewData"; type: "QVariant" }
@@ -2649,9 +2655,13 @@ Module {
         Property { name: "neutralText"; type: "string" }
         Property { name: "negativeText"; type: "string" }
         Property { name: "positiveText"; type: "string" }
+        Property { name: "messageTextFormart"; type: "int" }
         Property { name: "delayTime"; type: "int" }
         Property { name: "buttonFlags"; type: "int" }
-        Property { name: "messageTextFormart"; type: "int" }
+        Property { name: "contentDelegate"; type: "QVariant" }
+        Property { name: "onNeutralClickListener"; type: "QVariant" }
+        Property { name: "onNegativeClickListener"; type: "QVariant" }
+        Property { name: "onPositiveClickListener"; type: "QVariant" }
         Signal { name: "neutralClicked" }
         Signal { name: "negativeClicked" }
         Signal { name: "positiveClicked" }
@@ -3003,15 +3013,15 @@ Module {
         defaultProperty: "data"
         Property { name: "logo"; type: "QUrl" }
         Property { name: "title"; type: "string" }
-        Property { name: "items"; type: "FluObject_QMLTYPE_124"; isPointer: true }
-        Property { name: "footerItems"; type: "FluObject_QMLTYPE_124"; isPointer: true }
+        Property { name: "items"; type: "FluObject_QMLTYPE_125"; isPointer: true }
+        Property { name: "footerItems"; type: "FluObject_QMLTYPE_125"; isPointer: true }
         Property { name: "displayMode"; type: "int" }
         Property { name: "autoSuggestBox"; type: "QQmlComponent"; isPointer: true }
         Property { name: "actionItem"; type: "QQmlComponent"; isPointer: true }
         Property { name: "topPadding"; type: "int" }
         Property { name: "pageMode"; type: "int" }
-        Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_39"; isPointer: true }
-        Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_39"; isPointer: true }
+        Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_34"; isPointer: true }
+        Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_34"; isPointer: true }
         Property { name: "navCompactWidth"; type: "int" }
         Property { name: "navTopMargin"; type: "int" }
         Property { name: "cellHeight"; type: "int" }
@@ -3758,6 +3768,91 @@ Module {
         Method { name: "allExpand"; type: "QVariant" }
         Method { name: "allCollapse"; type: "QVariant" }
     }
+    Component {
+        prototype: "QQuickWindowQmlImpl"
+        name: "FluentUI/FluWindow 1.0"
+        exports: ["FluentUI/FluWindow 1.0"]
+        exportMetaObjectRevisions: [0]
+        isComposite: true
+        defaultProperty: "content"
+        Property { name: "windowIcon"; type: "string" }
+        Property { name: "closeDestory"; type: "bool" }
+        Property { name: "launchMode"; type: "int" }
+        Property { name: "argument"; type: "QVariant" }
+        Property { name: "background"; type: "QVariant" }
+        Property { name: "fixSize"; type: "bool" }
+        Property { name: "loadingItem"; type: "QQmlComponent"; isPointer: true }
+        Property { name: "fitsAppBarWindows"; type: "bool" }
+        Property { name: "appBar"; type: "QQuickItem"; isPointer: true }
+        Property { name: "backgroundColor"; type: "QColor" }
+        Property { name: "stayTop"; type: "bool" }
+        Property { name: "_pageRegister"; type: "QVariant" }
+        Property { name: "_route"; type: "string" }
+        Property { name: "showDark"; type: "bool" }
+        Property { name: "showClose"; type: "bool" }
+        Property { name: "showMinimize"; type: "bool" }
+        Property { name: "showMaximize"; type: "bool" }
+        Property { name: "showStayTop"; type: "bool" }
+        Property { name: "autoMaximize"; type: "bool" }
+        Property { name: "useSystemAppBar"; type: "bool" }
+        Property { name: "resizeBorderColor"; type: "QColor" }
+        Property { name: "resizeBorderWidth"; type: "int" }
+        Property { name: "closeListener"; type: "QVariant" }
+        Property { name: "content"; type: "QObject"; isList: true; isReadonly: true }
+        Signal {
+            name: "initArgument"
+            Parameter { name: "argument"; type: "QVariant" }
+        }
+        Signal { name: "firstVisible" }
+        Method { name: "destoryOnClose"; type: "QVariant" }
+        Method {
+            name: "showLoading"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "cancel"; type: "QVariant" }
+        }
+        Method { name: "hideLoading"; type: "QVariant" }
+        Method {
+            name: "showSuccess"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "showInfo"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "showWarning"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "showError"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "registerForWindowResult"
+            type: "QVariant"
+            Parameter { name: "path"; type: "QVariant" }
+        }
+        Method { name: "moveWindowToDesktopCenter"; type: "QVariant" }
+        Method {
+            name: "onResult"
+            type: "QVariant"
+            Parameter { name: "data"; type: "QVariant" }
+        }
+        Method { name: "containerItem"; type: "QVariant" }
+    }
     Component {
         prototype: "QQuickRow"
         name: "FluentUI/NumberBox 1.0"

src/Qt5/imports/FluentUI/qmldir

@@ -75,7 +75,6 @@ FluSlider 1.0 Controls/FluSlider.qml
 FluSpinBox 1.0 Controls/FluSpinBox.qml
 FluStatusView 1.0 Controls/FluStatusView.qml
 FluTabView 1.0 Controls/FluTabView.qml
-FluTableModelColumn 1.0 Controls/FluTableModelColumn.qml
 FluTableView 1.0 Controls/FluTableView.qml
 FluText 1.0 Controls/FluText.qml
 FluTextBox 1.0 Controls/FluTextBox.qml

src/Qt5/imports/fluentui.qrc

@@ -71,7 +71,6 @@
         <file>FluentUI/Controls/FluSpinBox.qml</file>
         <file>FluentUI/Controls/FluStaggeredView.qml</file>
         <file>FluentUI/Controls/FluStatusView.qml</file>
-        <file>FluentUI/Controls/FluTableModelColumn.qml</file>
         <file>FluentUI/Controls/FluTableView.qml</file>
         <file>FluentUI/Controls/FluTabView.qml</file>
         <file>FluentUI/Controls/FluText.qml</file>
@@ -97,5 +96,15 @@
         <file>FluentUI/Controls/FluClip.qml</file>
         <file>FluentUI/Controls/FluLoader.qml</file>
         <file>FluentUI/Controls/FluShortcutPicker.qml</file>
+        <file>FluentUI/Image/btn_close_hovered.png</file>
+        <file>FluentUI/Image/btn_close_normal.png</file>
+        <file>FluentUI/Image/btn_close_pushed.png</file>
+        <file>FluentUI/Image/btn_max_hovered.png</file>
+        <file>FluentUI/Image/btn_max_normal.png</file>
+        <file>FluentUI/Image/btn_max_pushed.png</file>
+        <file>FluentUI/Image/btn_min_hovered.png</file>
+        <file>FluentUI/Image/btn_min_normal.png</file>
+        <file>FluentUI/Image/btn_min_pushed.png</file>
+        <file>FluentUI/Controls/FluImageButton.qml</file>
     </qresource>
 </RCC>

src/Qt6/imports/FluentUI/Controls/FluAppBar.qml

@@ -34,10 +34,17 @@ Rectangle{
     property bool isMac: FluTools.isMacos()
     property color borerlessColor : FluTheme.primaryColor
     property var maxClickListener : function(){
-        if (d.win.visibility === Window.Maximized)
-            d.win.visibility = Window.Windowed
-        else
-            d.win.visibility = Window.Maximized
+        if(FluTools.isMacos()){
+            if (d.win.visibility === Window.FullScreen)
+                d.win.visibility = Window.Windowed
+            else
+                d.win.visibility = Window.FullScreen
+        }else{
+            if (d.win.visibility === Window.Maximized)
+                d.win.visibility = Window.Windowed
+            else
+                d.win.visibility = Window.Maximized
+        }
     }
     property var minClickListener: function(){
         d.win.visibility = Window.Minimized
@@ -57,6 +64,11 @@ Rectangle{
             FluTheme.darkMode = FluThemeType.Dark
         }
     }
+    property var systemMenuListener: function(){
+        if(d.win instanceof FluWindow){
+            d.win.showSystemMenu()
+        }
+    }
     id:control
     color: Qt.rgba(0,0,0,0)
     height: visible ? 30 : 0
@@ -64,6 +76,7 @@ Rectangle{
     z: 65535
     Item{
         id:d
+        property bool hoverMaxBtn: false
         property var win: Window.window
         property bool stayTop: {
             if(d.win instanceof FluWindow){
@@ -74,14 +87,25 @@ Rectangle{
         property bool isRestore: win && Window.Maximized === win.visibility
         property bool resizable: win && !(win.height === win.maximumHeight && win.height === win.minimumHeight && win.width === win.maximumWidth && win.width === win.minimumWidth)
     }
-    TapHandler {
-        onTapped: if (tapCount === 2 && d.resizable) btn_maximize.clicked()
-        gesturePolicy: TapHandler.DragThreshold
-    }
-    DragHandler {
-        target: null
-        grabPermissions: TapHandler.CanTakeOverFromAnything
-        onActiveChanged: if (active) { d.win.startSystemMove(); }
+    MouseArea{
+        anchors.fill: parent
+        onPositionChanged:
+            (mouse)=>{
+                d.win.startSystemMove()
+            }
+        onDoubleClicked:
+            (mouse)=>{
+                if(d.resizable && Qt.LeftButton){
+                    btn_maximize.clicked()
+                }
+            }
+        acceptedButtons: Qt.LeftButton|Qt.RightButton
+        onClicked:
+            (mouse)=>{
+                if (mouse.button === Qt.RightButton){
+                    control.systemMenuListener()
+                }
+            }
     }
     Row{
         anchors{
@@ -105,6 +129,49 @@ Rectangle{
             anchors.verticalCenter: parent.verticalCenter
         }
     }
+
+    Component{
+        id:com_mac_buttons
+        RowLayout{
+            FluImageButton{
+                Layout.preferredHeight: 12
+                Layout.preferredWidth: 12
+                normalImage: "../Image/btn_close_normal.png"
+                hoveredImage: "../Image/btn_close_hovered.png"
+                pushedImage: "../Image/btn_close_pushed.png"
+                visible: showClose
+                onClicked: closeClickListener()
+            }
+            FluImageButton{
+                Layout.preferredHeight: 12
+                Layout.preferredWidth: 12
+                normalImage: "../Image/btn_min_normal.png"
+                hoveredImage: "../Image/btn_min_hovered.png"
+                pushedImage: "../Image/btn_min_pushed.png"
+                onClicked: minClickListener()
+                visible: showMinimize
+            }
+            FluImageButton{
+                Layout.preferredHeight: 12
+                Layout.preferredWidth: 12
+                normalImage: "../Image/btn_max_normal.png"
+                hoveredImage: "../Image/btn_max_hovered.png"
+                pushedImage: "../Image/btn_max_pushed.png"
+                onClicked: maxClickListener()
+                visible: d.resizable && showMaximize
+            }
+        }
+    }
+
+    FluLoader{
+        anchors{
+            verticalCenter: parent.verticalCenter
+            left: parent.left
+            leftMargin: 10
+        }
+        sourceComponent: isMac ? com_mac_buttons : undefined
+    }
+
     RowLayout{
         anchors.right: parent.right
         height: control.height
@@ -166,6 +233,9 @@ Rectangle{
                 if(pressed){
                     return maximizePressColor
                 }
+                if(FluTools.isWindows11OrGreater()){
+                    return d.hoverMaxBtn ? maximizeHoverColor : maximizeNormalColor
+                }
                 return hovered ? maximizeHoverColor : maximizeNormalColor
             }
             Layout.alignment: Qt.AlignVCenter
@@ -211,4 +281,17 @@ Rectangle{
     function darkButton(){
         return btn_dark
     }
+    function maximizeButtonHover(){
+        var hover = false;
+        var pos = btn_maximize.mapToGlobal(0,0)
+        if(btn_maximize.visible){
+            var rect = Qt.rect(pos.x,pos.y,btn_maximize.width,btn_maximize.height)
+            pos = FluTools.cursorPos()
+            if(pos.x>rect.x && pos.x<(rect.x+rect.width) && pos.y>rect.y && pos.y<(rect.y+rect.height)){
+                hover = true;
+            }
+        }
+        d.hoverMaxBtn = hover
+        return hover;
+    }
 }

src/Qt6/imports/FluentUI/Controls/FluChart.qml

@@ -3,25 +3,27 @@ import "./../JS/Chart.js" as Chart
 
 Canvas {
     id: control
-    property var window: Window.window
-    property var jsChart: undefined
     property string chartType
     property var chartData
     property var chartOptions
     property double chartAnimationProgress: 0.1
     property int animationEasingType: Easing.InOutExpo
-    property double animationDuration: 0
-    property var memorizedContext
-    property var memorizedData
-    property var memorizedOptions
+    property double animationDuration: 300
     property alias animationRunning: chartAnimator.running
     signal animationFinished()
     function animateToNewData()
     {
         chartAnimationProgress = 0.1;
-        jsChart.update();
+        d.jsChart.update();
         chartAnimator.restart();
     }
+    QtObject{
+        id:d
+        property var jsChart: undefined
+        property var memorizedContext
+        property var memorizedData
+        property var memorizedOptions
+    }
     MouseArea {
         id: event
         anchors.fill: control
@@ -47,31 +49,33 @@ Canvas {
             mouseEvent.left = 0;
             mouseEvent.top = 0;
             mouseEvent.target = control;
-
             if(handler) {
                 handler(mouseEvent);
             }
-
             control.requestPaint();
         }
-        onClicked:(mouse)=> {
-            submitEvent(mouse, "click");
-        }
-        onPositionChanged:(mouse)=> {
-            submitEvent(mouse, "mousemove");
-        }
+        onClicked:
+            (mouse)=> {
+                submitEvent(mouse, "click");
+            }
+        onPositionChanged:
+            (mouse)=> {
+                submitEvent(mouse, "mousemove");
+            }
         onExited: {
             submitEvent(undefined, "mouseout");
         }
         onEntered: {
             submitEvent(undefined, "mouseenter");
         }
-        onPressed:(mouse)=> {
-            submitEvent(mouse, "mousedown");
-        }
-        onReleased:(mouse)=> {
-            submitEvent(mouse, "mouseup");
-        }
+        onPressed:
+            (mouse)=> {
+                submitEvent(mouse, "mousedown");
+            }
+        onReleased:
+            (mouse)=> {
+                submitEvent(mouse, "mouseup");
+            }
     }
     PropertyAnimation {
         id: chartAnimator
@@ -89,34 +93,25 @@ Canvas {
         control.requestPaint();
     }
     onPaint: {
-        if(control.getContext('2d') !== null && memorizedContext !== control.getContext('2d') || memorizedData !== control.chartData || memorizedOptions !== control.chartOptions) {
+        if(control.getContext('2d') !== null && d.memorizedContext !== control.getContext('2d') || d.memorizedData !== control.chartData || d.memorizedOptions !== control.chartOptions) {
             var ctx = control.getContext('2d');
-
-            jsChart =  Chart.build(ctx, {
-                type: control.chartType,
-                data: control.chartData,
-                options: control.chartOptions
-                });
-
-            memorizedData = control.chartData ;
-            memorizedContext = control.getContext('2d');
-            memorizedOptions = control.chartOptions;
-
-            control.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
-
+            d.jsChart =  Chart.build(ctx, {type: control.chartType,data: control.chartData,options: control.chartOptions});
+            d.memorizedData = control.chartData ;
+            d.memorizedContext = control.getContext('2d');
+            d.memorizedOptions = control.chartOptions;
+            d.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
             chartAnimator.start();
         }
-
-        jsChart.draw(chartAnimationProgress);
+        d.jsChart.draw(chartAnimationProgress);
     }
     onWidthChanged: {
-        if(jsChart) {
-            jsChart.resize();
+        if(d.jsChart) {
+            d.jsChart.resize();
         }
     }
     onHeightChanged: {
-        if(jsChart) {
-            jsChart.resize();
+        if(d.jsChart) {
+            d.jsChart.resize();
         }
     }
 }