update

给FluPaneItemSeparator增加spacing和size属性

.gitmodules

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

CMakeLists.txt

@@ -13,6 +13,7 @@ if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
 endif()
 
 add_subdirectory(src)
+add_subdirectory(zxing-cpp)
 
 if (FLUENTUI_BUILD_EXAMPLES)
     add_subdirectory(example)
@@ -23,6 +24,8 @@ if (FLUENTUI_BUILD_FRAMELESSHEPLER)
     set(FRAMELESSHELPER_NO_SUMMARY OFF)
     set(FRAMELESSHELPER_NO_DEBUG_OUTPUT OFF)
     set(FRAMELESSHELPER_BUILD_WIDGETS OFF)
+    add_definitions(-DFRAMELESSHELPER_CORE_NO_DEBUG_OUTPUT)
+    add_definitions(-DFRAMELESSHELPER_QUICK_NO_DEBUG_OUTPUT)
     add_subdirectory(framelesshelper)
 endif ()
 

example/CMakeLists.txt

@@ -8,6 +8,9 @@ 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)
+
 #判断FluentUI库类型
 if(FLUENTUI_BUILD_STATIC_LIB)
     add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
@@ -24,9 +27,9 @@ endif()
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,7,4)
+add_definitions(-DVERSION=1,5,0,0)
 
-find_package(Qt6 REQUIRED COMPONENTS Quick Svg)
+find_package(Qt6 REQUIRED COMPONENTS Quick Svg Network)
 
 if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
     qt_standard_project_setup()
@@ -87,12 +90,17 @@ endif()
 
 #添加qml模块
 qt_add_qml_module(example
-    URI example
+    URI "example"
     VERSION 1.0
     QML_FILES ${qml_files}
     RESOURCES ${resource_files}
 )
 
+#导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
+target_include_directories(example PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/src/component
+)
+
 #设置属性
 set_target_properties(example PROPERTIES
     MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
@@ -106,7 +114,8 @@ set_target_properties(example PROPERTIES
 if (FLUENTUI_BUILD_STATIC_LIB)
     target_link_libraries(example PRIVATE
         Qt6::Quick
-        Qt::Svg
+        Qt6::Svg
+        Qt6::Network
         fluentui
         fluentuiplugin
         FramelessHelper::Core
@@ -115,7 +124,8 @@ if (FLUENTUI_BUILD_STATIC_LIB)
 else()
     target_link_libraries(example PRIVATE
         Qt6::Quick
-        Qt::Svg
+        Qt6::Svg
+        Qt6::Network
         fluentuiplugin
         FramelessHelper::Core
         FramelessHelper::Quick

example/qml/App.qml

@@ -7,9 +7,26 @@ import FluentUI
 Window {
     id: app
     flags: Qt.SplashScreen
+
+    FluHttpInterceptor{
+        id:interceptor
+        function onIntercept(request){
+            if(request.method === "get"){
+                request.params["method"] = "get"
+            }
+            if(request.method === "post"){
+                request.params["method"] = "post"
+            }
+            request.headers["token"] ="yyds"
+            request.headers["os"] ="pc"
+            console.debug(JSON.stringify(request))
+            return request
+        }
+    }
+
     Component.onCompleted: {
         FluApp.init(app)
-        FluTheme.darkMode = FluDarkMode.System
+        FluTheme.darkMode = FluThemeType.System
         FluTheme.enableAnimation = true
         FluApp.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
@@ -21,6 +38,7 @@ Window {
             "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
         }
         FluApp.initialRoute = "/"
+        FluApp.httpInterceptor = interceptor
         FluApp.run()
     }
 }

example/qml/component/CodeExpander.qml

@@ -130,7 +130,11 @@ FluExpander{
                     "FluPagination",
                     "FluRadioButtons",
                     "FluImage",
-                    "FluSpinBox"
+                    "FluSpinBox",
+                    "FluHttp",
+                    "FluWatermark",
+                    "FluTour",
+                    "FluQRCode"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/component/CustomWindow.qml

@@ -4,14 +4,11 @@ import FluentUI
 import org.wangwenx190.FramelessHelper
 
 FluWindow {
-
     id:window
-
     property bool fixSize
     property alias titleVisible: title_bar.titleVisible
     property bool appBarVisible: true
     default property alias content: container.data
-
     FluAppBar {
         id: title_bar
         title: window.title
@@ -23,7 +20,6 @@ FluWindow {
         }
         darkText: lang.dark_mode
     }
-
     Item{
         id:container
         anchors{
@@ -34,7 +30,6 @@ FluWindow {
         }
         clip: true
     }
-
     FramelessHelper{
         id:framless_helper
         onReady: {
@@ -59,13 +54,10 @@ FluWindow {
                 FramelessUtils.systemTheme = FramelessHelperConstants.Light
         }
     }
-
     function setHitTestVisible(com){
         framless_helper.setHitTestVisible(com)
     }
-
     function setTitleBarItem(com){
         framless_helper.setTitleBarItem(com)
     }
-
 }

example/qml/global/ItemsOriginal.qml

@@ -181,6 +181,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_Expander.qml")
             }
         }
+        FluPaneItem{
+            title:"Watermark"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
+            }
+        }
     }
 
     FluPaneItemExpander{
@@ -317,9 +323,32 @@ FluObject{
         }
     }
 
+    FluPaneItemSeparator{
+        spacing:20
+        size:1
+    }
+
     FluPaneItemExpander{
         title:lang.other
         icon:FluentIcons.Shop
+        FluPaneItem{
+            title:"QRCode"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Tour"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Http"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Http.qml")
+            }
+        }
         FluPaneItem{
             id:item_other
             title:"RemoteLoader"
@@ -379,7 +408,12 @@ FluObject{
         for(var i=0;i<items.length;i++){
             var item = items[i]
             if(item instanceof FluPaneItem){
-                arr.push({title:item.title,key:item.key})
+                if (item.parent instanceof FluPaneItemExpander)
+                {
+                    arr.push({title:`${item.parent.title} -> ${item.title}`,key:item.key})
+                }
+                else
+                    arr.push({title:item.title,key:item.key})
             }
         }
         return arr

example/qml/global/MainEvent.qml

@@ -5,5 +5,5 @@ import QtQuick.Controls
 import FluentUI
 
 QtObject {
-    property int displayMode : FluNavigationView.Auto
+    property int displayMode : FluNavigationViewType.Auto
 }

example/qml/page/T_Acrylic.qml

@@ -9,35 +9,84 @@ FluScrollablePage{
 
     title:"Acrylic"
 
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 20
+        FluText{
+            text:"tintColor:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:color_picker
+        }
+    }
+    RowLayout{
+        spacing: 10
+        FluText{
+            text:"tintOpacity:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_tint_opacity
+            value: 65
+        }
+    }
+    RowLayout{
+        spacing: 10
+        FluText{
+            text:"blurRadius:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_blur_radius
+            value: 32
+        }
+    }
     FluArea{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 1200/5+20
+        height: 1200/4+20
         paddings: 10
-
+        Layout.topMargin: 10
         FluRectangle{
-            width: 1920/5
-            height: 1200/5
+            width: 1920/4
+            height: 1200/4
             radius:[15,15,15,15]
             Image {
                 id:image
                 asynchronous: true
-                source: "qrc:/example/res/image/banner_3.jpg"
+                source: "qrc:/example/res/image/bg_scenic.png"
                 anchors.fill: parent
                 sourceSize: Qt.size(2*width,2*height)
             }
             FluAcrylic {
-                sourceItem:image
-                anchors.bottom: parent.bottom
-                anchors.right: parent.right
-                width: 100
-                height: 100
+                id:acrylic
+                target: image
+                width: 200
+                height: 200
+                tintOpacity: slider_tint_opacity.value/100
+                tintColor: color_picker.colorValue
+                blurRadius: slider_blur_radius.value
+                x:(image.width-width)/2
+                y:(image.height-height)/2
                 FluText {
                     anchors.centerIn: parent
                     text: "Acrylic"
                     color: "#FFFFFF"
                     font.bold: true
                 }
+                MouseArea {
+                    property point clickPos: Qt.point(0,0)
+                    id:drag_area
+                    anchors.fill: parent
+                    onPressed: (mouse)=>{
+                                   clickPos = Qt.point(mouse.x, mouse.y)
+                               }
+                    onPositionChanged: (mouse)=>{
+                                           var delta = Qt.point(mouse.x - clickPos.x,mouse.y - clickPos.y)
+                                           acrylic.x = acrylic.x + delta.x
+                                           acrylic.y = acrylic.y + delta.y
+                                       }
+                }
             }
             Layout.topMargin: 20
         }
@@ -54,7 +103,7 @@ FluScrollablePage{
     radius: 8
     }
     FluAcrylic{
-        sourceItem:image
+        target:image
         width: 100
         height: 100
         anchors.centerIn: parent

example/qml/page/T_Carousel.qml

@@ -9,6 +9,19 @@ FluScrollablePage{
 
     title:"Carousel"
 
+    ListModel{
+        id:data_model
+        ListElement{
+            url:"qrc:/example/res/image/banner_1.jpg"
+        }
+        ListElement{
+            url:"qrc:/example/res/image/banner_2.jpg"
+        }
+        ListElement{
+            url:"qrc:/example/res/image/banner_3.jpg"
+        }
+    }
+
     FluArea{
         Layout.fillWidth: true
         height: 370
@@ -24,23 +37,95 @@ FluScrollablePage{
                 text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
             }
             FluCarousel{
-                id:carousel
+                radius:[5,5,5,5]
+                delegate: Component{
+                    Image {
+                        anchors.fill: parent
+                        source: model.url
+                        asynchronous: true
+                        fillMode:Image.PreserveAspectCrop
+                    }
+                }
                 Layout.topMargin: 20
                 Layout.leftMargin: 5
                 Component.onCompleted: {
-                    carousel.setData([{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}])
+                    model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
                 }
             }
         }
     }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 340
+        paddings: 10
+        Layout.topMargin: 10
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            FluCarousel{
+                radius:[15,15,15,15]
+                loopTime:1500
+                indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
+                indicatorMarginTop:15
+                delegate: Component{
+                    Item{
+                        anchors.fill: parent
+                        Image {
+                            anchors.fill: parent
+                            source: model.url
+                            asynchronous: true
+                            fillMode:Image.PreserveAspectCrop
+                        }
+                        Rectangle{
+                            height: 40
+                            width: parent.width
+                            anchors.bottom: parent.bottom
+                            color: "#33000000"
+                            FluText{
+                                anchors.fill: parent
+                                verticalAlignment: Qt.AlignVCenter
+                                horizontalAlignment: Qt.AlignHCenter
+                                text:model.title
+                                color: FluColors.Grey10
+                                font.pixelSize: 15
+                            }
+                        }
+                    }
+                }
+                Layout.topMargin: 20
+                Layout.leftMargin: 5
+                Component.onCompleted: {
+                    var arr = []
+                    arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
+                    arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
+                    arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
+                    model = arr
+                }
+            }
+        }
+    }
+
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluCarousel{
+    id:carousel
     width: 400
     height: 300
+    delegate: Component{
+        Image {
+            anchors.fill: parent
+            source: model.url
+            asynchronous: true
+            fillMode:Image.PreserveAspectCrop
+        }
+    }
     Component.onCompleted: {
-        setData([{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}])
+        carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
     }
 }'
     }

example/qml/page/T_Dialog.qml

@@ -31,7 +31,7 @@ FluScrollablePage{
     title:"友情提示"
     message:"确定要退出程序么？"
     negativeText:"取消"
-    buttonFlags: FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
+    buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
     onNegativeClicked:{
         showSuccess("点击取消按钮")
     }
@@ -47,7 +47,7 @@ FluScrollablePage{
         id:double_btn_dialog
         title:"友情提示"
         message:"确定要退出程序么？"
-        buttonFlags: FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
         negativeText:"取消"
         onNegativeClicked:{
             showSuccess("点击取消按钮")
@@ -80,7 +80,7 @@ FluScrollablePage{
     title:"友情提示"
     message:"确定要退出程序么？"
     negativeText:"取消"
-    buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
+    buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
     negativeText:"取消"
     onNegativeClicked:{
         showSuccess("点击取消按钮")
@@ -101,7 +101,7 @@ FluScrollablePage{
         id:triple_btn_dialog
         title:"友情提示"
         message:"确定要退出程序么？"
-        buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
+        buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
         negativeText:"取消"
         onNegativeClicked:{
             showSuccess("点击取消按钮")

example/qml/page/T_Home.qml

@@ -7,7 +7,7 @@ import FluentUI
 
 FluScrollablePage{
 
-    launchMode: FluPage.SingleTask
+    launchMode: FluPageType.SingleTask
     animDisabled: true
 
     ListModel{
@@ -68,19 +68,16 @@ FluScrollablePage{
                 id: control
                 width: 220
                 height: 240
-                FluArea{
-                    radius: 8
+                FluItem{
+                    radius: [8,8,8,8]
                     width: 200
                     height: 220
                     anchors.centerIn: parent
-                    color: 'transparent'
-                    FluAcrylic {
-                        sourceItem:bg
+                    FluAcrylic{
                         anchors.fill: parent
-                        color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-                        rectX: list.x-list.contentX+10+(control.width)*index
-                        rectY: list.y+10
-                        acrylicOpacity:0.8
+                        tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                        target: bg
+                        targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
                     }
                     Rectangle{
                         anchors.fill: parent
@@ -99,7 +96,6 @@ FluScrollablePage{
                             }
                         }
                     }
-
                     ColumnLayout{
                         Image {
                             Layout.topMargin: 20

example/qml/page/T_Http.qml

@@ -0,0 +1,214 @@
+import QtQuick
+import Qt.labs.platform
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Dialogs
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluContentPage{
+
+    title:"Http"
+
+    FluHttp{
+        id:http
+    }
+
+    Flickable{
+        id:layout_flick
+        width: 160
+        clip: true
+        anchors{
+            top: parent.top
+            topMargin: 20
+            bottom: parent.bottom
+            left: parent.left
+        }
+        ScrollBar.vertical: FluScrollBar {}
+        contentHeight:layout_column.height
+        Column{
+            spacing: 2
+            id:layout_column
+            width: parent.width
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Get请求"
+                onClicked: {
+                    var callable = {}
+                    callable.onStart = function(){
+                        showLoading()
+                    }
+                    callable.onFinish = function(){
+                        hideLoading()
+                    }
+                    callable.onSuccess = function(result){
+                        text_info.text = result
+                        console.debug(result)
+                    }
+                    callable.onError = function(status,errorString){
+                        console.debug(status+";"+errorString)
+                    }
+                    http.get("https://httpbingo.org/get",callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post表单请求"
+                onClicked: {
+                    var callable = {}
+                    callable.onStart = function(){
+                        showLoading()
+                    }
+                    callable.onFinish = function(){
+                        hideLoading()
+                    }
+                    callable.onSuccess = function(result){
+                        text_info.text = result
+                        console.debug(result)
+                    }
+                    callable.onError = function(status,errorString){
+                        console.debug(status+";"+errorString)
+                    }
+                    var param = {}
+                    param.custname = "朱子楚"
+                    param.custtel = "1234567890"
+                    param.custemail = "zhuzichu520@gmail.com"
+                    http.post("https://httpbingo.org/post",callable,param)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post Json请求"
+                onClicked: {
+                    var callable = {}
+                    callable.onStart = function(){
+                        showLoading()
+                    }
+                    callable.onFinish = function(){
+                        hideLoading()
+                    }
+                    callable.onSuccess = function(result){
+                        text_info.text = result
+                        console.debug(result)
+                    }
+                    callable.onError = function(status,errorString){
+                        console.debug(status+";"+errorString)
+                    }
+                    var param = {}
+                    param.custname = "朱子楚"
+                    param.custtel = "1234567890"
+                    param.custemail = "zhuzichu520@gmail.com"
+//                    http.postJson("https://httpbingo.org/post",callable,param)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post String请求"
+                onClicked: {
+                    var callable = {}
+                    callable.onStart = function(){
+                        showLoading()
+                    }
+                    callable.onFinish = function(){
+                        hideLoading()
+                    }
+                    callable.onSuccess = function(result){
+                        text_info.text = result
+                        console.debug(result)
+                    }
+                    callable.onError = function(status,errorString){
+                        console.debug(status+";"+errorString)
+                    }
+                    var param = "我命由我不由天"
+//                    http.postString("https://httpbingo.org/post",callable,param)
+                }
+            }
+            FluButton{
+                id:btn_download
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "下载文件"
+                onClicked: {
+                    file_dialog.open()
+                }
+            }
+        }
+    }
+
+    FolderDialog {
+        id: file_dialog
+        currentFolder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
+        onAccepted: {
+            var callable = {}
+            callable.onStart = function(){
+                btn_download.disabled = true
+            }
+            callable.onFinish = function(){
+                btn_download.disabled = false
+                btn_download.text = "下载文件"
+                layout_file_size.visible = false
+                text_file_size.text = ""
+            }
+            callable.onSuccess = function(result){
+                showSuccess(result)
+            }
+            callable.onError = function(status,errorString){
+                showError(errorString)
+            }
+            callable.onDownloadProgress = function(recv,total){
+                var locale = Qt.locale()
+                var precent = (recv/total * 100).toFixed(0) + "%"
+                btn_download.text = "下载中..."+precent
+                text_file_size.text =  "%1/%2".arg(locale.formattedDataSize(recv)).arg(locale.formattedDataSize(total))
+                layout_file_size.visible = true
+            }
+            var path = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
+            http.download("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",callable,path)
+        }
+    }
+
+    FluArea{
+        anchors{
+            top: layout_flick.top
+            bottom: layout_flick.bottom
+            left: layout_flick.right
+            right: parent.right
+            leftMargin: 8
+        }
+        Flickable{
+            clip: true
+            id:scrollview
+            width: parent.width
+            height: parent.height
+            contentWidth: width
+            contentHeight: text_info.height
+            ScrollBar.vertical: FluScrollBar {}
+            FluText{
+                id:text_info
+                width: scrollview.width
+                wrapMode: Text.WrapAnywhere
+                padding: 14
+            }
+        }
+    }
+
+    FluRectangle{
+        id:layout_file_size
+        radius: [4,4,4,4]
+        height: 36
+        width: 160
+        visible: false
+        x:layout_flick.width
+        y: 173 - layout_flick.contentY
+        FluText{
+            id:text_file_size
+            anchors.centerIn: parent
+        }
+    }
+
+}

example/qml/page/T_MultiWindow.qml

@@ -93,9 +93,9 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluWindow{
-  //launchMode: FluWindow.Standard
-  //launchMode: FluWindow.SingleTask
-     launchMode: FluWindow.SingleInstance
+  //launchMode: FluWindowType.Standard
+  //launchMode: FluWindowType.SingleTask
+     launchMode: FluWindowType.SingleInstance
 }
 '
     }

example/qml/page/T_Progress.qml

@@ -12,7 +12,7 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 110
+        height: 130
         paddings: 10
 
         ColumnLayout{
@@ -45,7 +45,7 @@ FluProgressRing{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 230
+        height: 286
         paddings: 10
 
         ColumnLayout{
@@ -59,21 +59,24 @@ FluProgressRing{
             }
             FluProgressBar{
                 indeterminate: false
-                progress: slider.value/100
-            }
-            FluProgressRing{
-                indeterminate: false
-                progress: slider.value/100
+                value:slider.value/100
+                Layout.topMargin: 10
             }
             FluProgressBar{
                 indeterminate: false
+                value:slider.value/100
                 progressVisible: true
-                progress: slider.value/100
+                Layout.topMargin: 10
             }
             FluProgressRing{
                 indeterminate: false
+                value: slider.value/100
+                Layout.topMargin: 10
+            }
+            FluProgressRing{
                 progressVisible: true
-                progress: slider.value/100
+                indeterminate: false
+                value: slider.value/100
             }
             FluSlider{
                 id:slider

example/qml/page/T_QRCode.qml

@@ -0,0 +1,75 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import Qt5Compat.GraphicalEffects
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"QRCode"
+
+    FluQRCode{
+        id:qrcode
+        Layout.topMargin: 20
+        size:slider_size.value
+        text:text_box.text
+        color:color_picker.colorValue
+        Layout.preferredWidth: size
+        Layout.preferredHeight: size
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 20
+        FluText{
+            text:"text:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluTextBox{
+            id:text_box
+            text:"会磨刀的小猪"
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluText{
+            text:"color:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:color_picker
+            Component.onCompleted: {
+                setColor(Qt.rgba(0,0,0,1))
+            }
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        FluText{
+            text:"size:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_size
+            from:60
+            to:260
+            value: 120
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        code:'FluQRCode{
+    color:"red"
+    text:"会磨刀的小猪"
+    size:100
+}'
+    }
+
+}

example/qml/page/T_RemoteLoader.qml

@@ -6,7 +6,7 @@ import FluentUI
 import "qrc:///example/qml/component"
 
 FluPage{
-    launchMode: FluPage.SingleTop
+    launchMode: FluPageType.SingleTop
     FluRemoteLoader{
         anchors.fill: parent
         source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"

example/qml/page/T_Settings.qml

@@ -28,7 +28,7 @@ FluScrollablePage{
                 Layout.bottomMargin: 4
             }
             Repeater{
-                model: [{title:"System",mode:FluDarkMode.System},{title:"Light",mode:FluDarkMode.Light},{title:"Dark",mode:FluDarkMode.Dark}]
+                model: [{title:"System",mode:FluThemeType.System},{title:"Light",mode:FluThemeType.Light},{title:"Dark",mode:FluThemeType.Dark}]
                 delegate:  FluRadioButton{
                     checked : FluTheme.darkMode === modelData.mode
                     text:modelData.title
@@ -58,7 +58,7 @@ FluScrollablePage{
                 Layout.bottomMargin: 4
             }
             Repeater{
-                model: [{title:"Open",mode:FluNavigationView.Open},{title:"Compact",mode:FluNavigationView.Compact},{title:"Minimal",mode:FluNavigationView.Minimal},{title:"Auto",mode:FluNavigationView.Auto}]
+                model: [{title:"Open",mode:FluNavigationViewType.Open},{title:"Compact",mode:FluNavigationViewType.Compact},{title:"Minimal",mode:FluNavigationViewType.Minimal},{title:"Auto",mode:FluNavigationViewType.Auto}]
                 delegate: FluRadioButton{
                     checked : MainEvent.displayMode===modelData.mode
                     text:modelData.title

example/qml/page/T_StatusView.qml

@@ -25,28 +25,28 @@ FluScrollablePage{
                     text:"Loading"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusView.Loading
+                        status_view.statusMode = FluStatusViewType.Loading
                     }
                 }
                 FluMenuItem{
                     text:"Empty"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusView.Empty
+                        status_view.statusMode = FluStatusViewType.Empty
                     }
                 }
                 FluMenuItem{
                     text:"Error"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusView.Error
+                        status_view.statusMode = FluStatusViewType.Error
                     }
                 }
                 FluMenuItem{
                     text:"Success"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusView.Success
+                        status_view.statusMode = FluStatusViewType.Success
                     }
                 }
             }
@@ -75,7 +75,7 @@ FluScrollablePage{
         Layout.topMargin: -1
         code:'FluStatusView{
     anchors.fill: parent
-    statusMode: FluStatusView.Loading
+    statusMode: FluStatusViewType.Loading
     Rectangle{
         anchors.fill: parent
         color:FluTheme.primaryColor.dark

example/qml/page/T_TabView.qml

@@ -44,21 +44,21 @@ FluScrollablePage{
                     text:"Equal"
                     onClicked: {
                         btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabView.Equal
+                        tab_view.tabWidthBehavior = FluTabViewType.Equal
                     }
                 }
                 FluMenuItem{
                     text:"SizeToContent"
                     onClicked: {
                         btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabView.SizeToContent
+                        tab_view.tabWidthBehavior = FluTabViewType.SizeToContent
                     }
                 }
                 FluMenuItem{
                     text:"Compact"
                     onClicked: {
                         btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabView.Compact
+                        tab_view.tabWidthBehavior = FluTabViewType.Compact
                     }
                 }
             }
@@ -70,21 +70,21 @@ FluScrollablePage{
                     text:"Nerver"
                     onClicked: {
                         btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabView.Nerver
+                        tab_view.closeButtonVisibility = FluTabViewType.Nerver
                     }
                 }
                 FluMenuItem{
                     text:"Always"
                     onClicked: {
                         btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabView.Always
+                        tab_view.closeButtonVisibility = FluTabViewType.Always
                     }
                 }
                 FluMenuItem{
                     text:"OnHover"
                     onClicked: {
                         btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabView.OnHover
+                        tab_view.closeButtonVisibility = FluTabViewType.OnHover
                     }
                 }
             }

example/qml/page/T_TextBox.qml

@@ -7,7 +7,7 @@ import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
-    launchMode: FluPage.SingleInstance
+    launchMode: FluPageType.SingleInstance
 
     title:"TextBox"
     FluArea{
@@ -17,27 +17,22 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluTextBox{
-            Layout.topMargin: 20
             placeholderText: "单行输入框"
-            Layout.preferredWidth: 300
             disabled:text_box_switch.checked
+            cleanEnabled: true
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
 
-        Row{
-            spacing: 5
+        FluToggleSwitch{
+            id:text_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
-                id:text_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
+            text:"Disabled"
         }
     }
     CodeExpander{
@@ -55,27 +50,20 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluPasswordBox{
-            Layout.topMargin: 20
             placeholderText: "请输入密码"
-            Layout.preferredWidth: 300
             disabled:password_box_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-
-        Row{
-            spacing: 5
+        FluToggleSwitch{
+            id:password_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
-                id:password_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
+            text:"Disabled"
         }
     }
     CodeExpander{
@@ -95,9 +83,7 @@ FluScrollablePage{
 
         FluMultilineTextBox{
             id:multiine_textbox
-            Layout.topMargin: 20
             placeholderText: "多行输入框"
-            Layout.preferredWidth: 300
             disabled:text_box_multi_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -105,17 +91,13 @@ FluScrollablePage{
             }
         }
 
-        Row{
-            spacing: 5
+        FluToggleSwitch{
+            id:text_box_multi_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
-                id:text_box_multi_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
+            text:"Disabled"
         }
     }
     CodeExpander{
@@ -126,17 +108,13 @@ FluScrollablePage{
 }'
     }
 
-
     FluArea{
         Layout.fillWidth: true
         height: 68
         paddings: 10
         Layout.topMargin: 20
-
         FluAutoSuggestBox{
-            Layout.topMargin: 20
             placeholderText: "AutoSuggestBox"
-            Layout.preferredWidth: 300
             items:generateRandomNames(100)
             disabled:text_box_suggest_switch.checked
             anchors{
@@ -144,18 +122,13 @@ FluScrollablePage{
                 left: parent.left
             }
         }
-
-        Row{
-            spacing: 5
+        FluToggleSwitch{
+            id:text_box_suggest_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
-                id:text_box_suggest_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
+            text:"Disabled"
         }
     }
     CodeExpander{
@@ -171,27 +144,20 @@ FluScrollablePage{
         height: 68
         paddings: 10
         Layout.topMargin: 20
-
         FluSpinBox{
-            Layout.topMargin: 20
             disabled: spin_box_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-
-        Row{
-            spacing: 5
+        FluToggleSwitch{
+            id:spin_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
-                id:spin_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
+            text:"Disabled"
         }
     }
     CodeExpander{

example/qml/page/T_Theme.qml

@@ -55,9 +55,9 @@ FluScrollablePage{
                 checked: FluTheme.dark
                 onClicked: {
                     if(FluTheme.dark){
-                        FluTheme.darkMode = FluDarkMode.Light
+                        FluTheme.darkMode = FluThemeType.Light
                     }else{
-                        FluTheme.darkMode = FluDarkMode.Dark
+                        FluTheme.darkMode = FluThemeType.Dark
                     }
                 }
             }

example/qml/page/T_TimePicker.qml

@@ -8,7 +8,7 @@ import "qrc:///example/qml/component"
 FluScrollablePage{
 
     title:"TimePicker"
-    launchMode: FluPage.SingleInstance
+    launchMode: FluPageType.SingleInstance
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -23,7 +23,7 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePicker.H"
+                text:"hourFormat=FluTimePickerType.H"
             }
 
             FluTimePicker{
@@ -56,11 +56,11 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePicker.HH"
+                text:"hourFormat=FluTimePickerType.HH"
             }
 
             FluTimePicker{
-                hourFormat:FluTimePicker.HH
+                hourFormat:FluTimePickerType.HH
                 onCurrentChanged: {
                     showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
                 }
@@ -72,7 +72,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluTimePicker{
-    hourFormat:FluTimePicker.HH
+    hourFormat:FluTimePickerType.HH
 }'
     }
 

example/qml/page/T_Tour.qml

@@ -0,0 +1,80 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Tour"
+
+    FluTour{
+        id:tour
+        steps:[
+            {title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
+            {title:"Save",description: "Save your changes.",target:()=>btn_save},
+            {title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
+        ]
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 130
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluFilledButton{
+            anchors{
+                top: parent.top
+                topMargin: 14
+            }
+            text:"Begin Tour"
+            onClicked: {
+                tour.open()
+            }
+        }
+
+        Row{
+            spacing: 20
+            anchors{
+                top: parent.top
+                topMargin: 60
+            }
+            FluButton{
+                id:btn_upload
+                text:"Upload"
+                onClicked: {
+                    showInfo("Upload")
+                }
+            }
+            FluFilledButton{
+                id:btn_save
+                text:"Save"
+                onClicked: {
+                    showInfo("Save")
+                }
+            }
+            FluIconButton{
+                id:btn_more
+                iconSource: FluentIcons.More
+                onClicked: {
+                    showInfo("More")
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluTour{
+    id:tour
+    steps:[
+        {title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
+        {title:"Save",description: "Save your changes.",target:()=>btn_save},
+        {title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
+    ]
+}'
+    }
+
+}

example/qml/page/T_TreeView.qml

@@ -64,38 +64,38 @@ FluScrollablePage {
                     text:"None"
                     onClicked: {
                         btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabView.Equal
+                        tree_view.selectionMode = FluTabViewType.Equal
                     }
                 }
                 FluMenuItem{
                     text:"Single"
                     onClicked: {
                         btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabView.SizeToContent
+                        tree_view.selectionMode = FluTabViewType.SizeToContent
                     }
                 }
                 FluMenuItem{
                     text:"Muiltple"
                     onClicked: {
                         btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabView.Compact
+                        tree_view.selectionMode = FluTabViewType.Compact
                     }
                 }
             }
             FluFilledButton{
                 text:"获取选中的数据"
                 onClicked: {
-                    if(tree_view.selectionMode === FluTreeView.None){
+                    if(tree_view.selectionMode === FluTreeViewType.None){
                         showError("当前非选择模式,没有选中的数据")
                     }
-                    if(tree_view.selectionMode === FluTreeView.Single){
+                    if(tree_view.selectionMode === FluTreeViewType.Single){
                         if(!tree_view.signleData()){
                             showError("没有选中数据")
                             return
                         }
                         showSuccess(tree_view.signleData().text)
                     }
-                    if(tree_view.selectionMode === FluTreeView.Multiple){
+                    if(tree_view.selectionMode === FluTreeViewType.Multiple){
                         if(tree_view.multipData().length===0){
                             showError("没有选中数据")
                             return

example/qml/page/T_Watermark.qml

@@ -0,0 +1,132 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluContentPage{
+
+    title:"Watermark"
+
+    FluArea{
+        anchors.fill: parent
+        anchors.topMargin: 20
+
+        ColumnLayout{
+            anchors{
+                left: parent.left
+                leftMargin: 14
+            }
+
+            RowLayout{
+                spacing: 10
+                Layout.topMargin: 14
+                FluText{
+                    text:"text:"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluTextBox{
+                    id:text_box
+                    text:"会磨刀的小猪"
+                }
+            }
+
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text:"textSize:"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id:slider_text_size
+                    value: 20
+                    from: 13
+                    to:50
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text:"gapX:"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id:slider_gap_x
+                    value: 100
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text:"gapY:"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id:slider_gap_y
+                    value: 100
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text:"offsetX:"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id:slider_offset_x
+                    value: 50
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text:"offsetY:"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id:slider_offset_y
+                    value: 50
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text:"rotate:"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluSlider{
+                    id:slider_rotate
+                    value: 22
+                    from: 0
+                    to:360
+                }
+            }
+            RowLayout{
+                spacing: 10
+                FluText{
+                    text:"textColor:"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluColorPicker{
+                    id:color_picker
+                    Component.onCompleted: {
+                        setColor(Qt.rgba(0,0,0,0.1))
+                    }
+                }
+            }
+        }
+
+        FluWatermark{
+            id:water_mark
+            anchors.fill: parent
+            text:text_box.text
+            textColor: color_picker.colorValue
+            textSize: slider_text_size.value
+            rotate: slider_rotate.value
+            gap:Qt.point(slider_gap_x.value,slider_gap_y.value)
+            offset: Qt.point(slider_offset_x.value,slider_offset_y.value)
+        }
+    }
+
+}

example/qml/window/AboutWindow.qml

@@ -11,7 +11,7 @@ CustomWindow {
     width: 600
     height: 600
     fixSize: true
-    launchMode: FluWindow.SingleTask
+    launchMode: FluWindowType.SingleTask
 
     ColumnLayout{
         anchors{

example/qml/window/HotloadWindow.qml

@@ -13,7 +13,7 @@ CustomWindow {
     height: 600
     minimumWidth: 520
     minimumHeight: 200
-    launchMode: FluWindow.SingleTask
+    launchMode: FluWindowType.SingleTask
     FileWatcher{
         id:watcher
         onFileChanged: {
@@ -25,7 +25,7 @@ CustomWindow {
         FluRemoteLoader{
             id:loader
             anchors.fill: parent
-            statusMode: FluStatusView.Success
+            statusMode: FluStatusViewType.Success
             lazy: true
             errorItem: Item{
                 FluText{
@@ -43,7 +43,7 @@ CustomWindow {
             text:"拖入qml文件"
             font.pixelSize: 26
             anchors.centerIn: parent
-            visible: !loader.itemLodaer().item && loader.statusMode === FluStatusView.Success
+            visible: !loader.itemLodaer().item && loader.statusMode === FluStatusViewType.Success
         }
         Rectangle{
             radius: 4

example/qml/window/MainWindow.qml

@@ -18,7 +18,7 @@ CustomWindow {
     minimumWidth: 520
     minimumHeight: 200
     appBarVisible: false
-    launchMode: FluWindow.SingleTask
+    launchMode: FluWindowType.SingleTask
 
     closeFunc:function(event){
         dialog_close.open()
@@ -27,15 +27,7 @@ CustomWindow {
 
     Component.onCompleted: {
         FluTools.setQuitOnLastWindowClosed(false)
-    }
-
-    Connections{
-        target: appInfo
-        function onActiveWindow(){
-            window.show()
-            window.raise()
-            window.requestActivate()
-        }
+        tour.open()
     }
 
     SystemTrayIcon {
@@ -67,14 +59,13 @@ CustomWindow {
         title:"退出"
         message:"确定要退出程序吗？"
         negativeText:"最小化"
-        buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
         onNegativeClicked:{
             window.hide()
             system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
         }
         positiveText:"退出"
         neutralText:"取消"
-        blurSource: nav_view
         onPositiveClicked:{
             window.deleteWindow()
             FluApp.closeApp()
@@ -156,6 +147,7 @@ CustomWindow {
             visible: flipable.flipAngle !== 180
             anchors.fill: flipable
             FluAppBar {
+                id:app_bar_front
                 anchors {
                     top: parent.top
                     left: parent.left
@@ -173,9 +165,9 @@ CustomWindow {
                 height: parent.height
                 z:999
                 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
-                //                 pageMode: FluNavigationView.Stack
+                pageMode: FluNavigationViewType.Stack
                 //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
-//                pageMode: FluNavigationView.NoStack
+                //                pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
                 topPadding:FluTools.isMacos() ? 20 : 5
@@ -184,7 +176,8 @@ CustomWindow {
                 title:"FluentUI"
                 onLogoClicked:{
                     clickCount += 1
-                    if(clickCount === 1){
+                    showSuccess("点击%1次".arg(clickCount))
+                    if(clickCount === 5){
                         loader.reload()
                         flipable.flipped = true
                         clickCount = 0
@@ -210,15 +203,27 @@ CustomWindow {
         }
     }
 
-    CircularReveal{
-        id:reveal
-        target:window.contentItem
-        anchors.fill: parent
-        onImageChanged: {
-            changeDark()
+    Component{
+        id:com_reveal
+        CircularReveal{
+            id:reveal
+            target:window.contentItem
+            anchors.fill: parent
+            onAnimationFinished:{
+                //动画结束后释放资源
+                loader_reveal.sourceComponent = undefined
+            }
+            onImageChanged: {
+                changeDark()
+            }
         }
     }
 
+    Loader{
+        id:loader_reveal
+        anchors.fill: parent
+    }
+
     function distance(x1,y1,x2,y2){
         return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
     }
@@ -227,20 +232,22 @@ CustomWindow {
         if(FluTools.isMacos() || !FluTheme.enableAnimation){
             changeDark()
         }else{
+            loader_reveal.sourceComponent = com_reveal
             var target = window.contentItem
             var pos = button.mapToItem(target,0,0)
             var mouseX = pos.x
             var mouseY = pos.y
             var radius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
+            var reveal = loader_reveal.item
             reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
         }
     }
 
     function changeDark(){
         if(FluTheme.dark){
-            FluTheme.darkMode = FluDarkMode.Light
+            FluTheme.darkMode = FluThemeType.Light
         }else{
-            FluTheme.darkMode = FluDarkMode.Dark
+            FluTheme.darkMode = FluThemeType.Dark
         }
     }
 
@@ -254,5 +261,20 @@ CustomWindow {
         }
     }
 
+    Shortcut {
+        sequence: "F6"
+        context: Qt.WindowShortcut
+        onActivated: {
+            tour.open()
+        }
+    }
+
+    FluTour{
+        id:tour
+        steps:[
+            {title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()},
+            {title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}
+        ]
+    }
 
 }

example/qml/window/SingleInstanceWindow.qml

@@ -11,7 +11,7 @@ CustomWindow {
     width: 500
     height: 600
     fixSize: true
-    launchMode: FluWindow.SingleInstance
+    launchMode: FluWindowType.SingleInstance
 
     FluTextBox{
         anchors{

example/qml/window/SingleTaskWindow.qml

@@ -11,7 +11,7 @@ CustomWindow {
     width: 500
     height: 600
     fixSize: true
-    launchMode: FluWindow.SingleTask
+    launchMode: FluWindowType.SingleTask
 
     FluText{
         anchors.centerIn: parent

example/qml/window/StandardWindow.qml

@@ -11,7 +11,7 @@ CustomWindow {
     width: 500
     height: 600
     fixSize: true
-    launchMode: FluWindow.Standard
+    launchMode: FluWindowType.Standard
 
     FluMenuBar {
         FluMenu {

example/src/AppInfo.cpp

@@ -39,18 +39,3 @@ void AppInfo::changeLang(const QString& locale){
         lang(new En());
     }
 }
-
-bool AppInfo::isOwnerProcess(IPC *ipc){
-    QString activeWindowEvent = "activeWindow";
-    if(!ipc->isCurrentOwner()){
-        ipc->postEvent(activeWindowEvent,QString().toUtf8(),0);
-        return false;
-    }
-    if(ipc->isAttached()){
-        ipc->registerEventHandler(activeWindowEvent,[=](const QByteArray&){
-            Q_EMIT this->activeWindow();
-            return true;
-        });
-    }
-    return true;
-}

example/src/AppInfo.h

@@ -3,7 +3,6 @@
 
 #include <QObject>
 #include <QQmlApplicationEngine>
-#include "tool/IPC.h"
 #include "lang/Lang.h"
 #include "stdafx.h"
 
@@ -15,9 +14,7 @@ class AppInfo : public QObject
 public:
     explicit AppInfo(QObject *parent = nullptr);
     void init(QQmlApplicationEngine *engine);
-    bool isOwnerProcess(IPC *ipc);
     Q_INVOKABLE void changeLang(const QString& locale);
-    Q_SIGNAL void activeWindow();
 };
 
 #endif // APPINFO_H

example/src/component/CircularReveal.cpp

@@ -6,11 +6,12 @@
 CircularReveal::CircularReveal(QQuickItem* parent) : QQuickPaintedItem(parent)
 {
     setVisible(false);
-    _anim = new QPropertyAnimation(this, "radius", this);
-    _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();
     });
     connect(this,&CircularReveal::radiusChanged,this,[=](){
         update();
@@ -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

@@ -12,15 +12,17 @@ class CircularReveal : public QQuickPaintedItem
     Q_OBJECT
     Q_PROPERTY_AUTO(QQuickItem*,target)
     Q_PROPERTY_AUTO(int,radius)
+    QML_NAMED_ELEMENT(CircularReveal)
 public:
     CircularReveal(QQuickItem* parent = nullptr);
     void paint(QPainter* painter) override;
     Q_INVOKABLE void start(int w,int h,const QPoint& center,int radius);
     Q_SIGNAL void imageChanged();
+    Q_SIGNAL void animationFinished();
     Q_SLOT void handleGrabResult();
 private:
     QImage _source;
-    QPropertyAnimation* _anim;
+    QPropertyAnimation _anim = QPropertyAnimation(this, "radius", this);
     QPoint _center;
     QSharedPointer<QQuickItemGrabResult>  _grabResult;
 };

example/src/component/FileWatcher.h

@@ -3,12 +3,14 @@
 
 #include <QObject>
 #include <QFileSystemWatcher>
+#include <QtQml/qqml.h>
 #include "src/stdafx.h"
 
 class FileWatcher : public QObject
 {
     Q_OBJECT
     Q_PROPERTY_AUTO(QString,path);
+    QML_NAMED_ELEMENT(FileWatcher)
 public:
     explicit FileWatcher(QObject *parent = nullptr);
     Q_SIGNAL void fileChanged();

example/src/main.cpp

@@ -3,11 +3,11 @@
 #include <QQmlContext>
 #include <QDir>
 #include <QQuickWindow>
+#include <QNetworkProxy>
+#include <QSslConfiguration>
 #include <QProcess>
 #include <FramelessHelper/Quick/framelessquickmodule.h>
 #include <FramelessHelper/Core/private/framelessconfig_p.h>
-#include "src/component/CircularReveal.h"
-#include "src/component/FileWatcher.h"
 #include "AppInfo.h"
 
 FRAMELESSHELPER_USE_NAMESPACE
@@ -32,17 +32,11 @@ FRAMELESSHELPER_USE_NAMESPACE
     FramelessConfig::instance()->set(Global::Option::ForceNonNativeBackgroundBlur,false);
 #endif
     AppInfo* appInfo = new AppInfo();
-    IPC ipc(0);
-    if(!appInfo->isOwnerProcess(&ipc)){
-        return 0;
-    }
     QQmlApplicationEngine engine;
     FramelessHelper::Quick::registerTypes(&engine);
 #ifdef FLUENTUI_BUILD_STATIC_LIB
     engine.addImportPath("qrc:/"); // 让静态资源可以被QML引擎搜索到
 #endif
-    qmlRegisterType<CircularReveal>("example", 1, 0, "CircularReveal");
-    qmlRegisterType<FileWatcher>("example", 1, 0, "FileWatcher");
     appInfo->init(&engine);
     const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,

example/src/tool/IPC.cpp

@@ -1,250 +0,0 @@
-#include "IPC.h"
-
-#include <QCoreApplication>
-#include <QDebug>
-#include <QThread>
-#include <ctime>
-#include <random>
-
-
-IPC::IPC(uint32_t profileId)
-    : profileId{profileId}
-    , globalMemory{"ipc-" IPC_PROTOCOL_VERSION}
-{
-    qRegisterMetaType<IPCEventHandler>("IPCEventHandler");
-    timer.setInterval(EVENT_TIMER_MS);
-    timer.setSingleShot(true);
-    connect(&timer, &QTimer::timeout, this, &IPC::processEvents);
-    std::default_random_engine randEngine((std::random_device())());
-    std::uniform_int_distribution<uint64_t> distribution;
-    globalId = distribution(randEngine);
-    qDebug() << "Our global IPC ID is " << globalId;
-    if (globalMemory.create(sizeof(IPCMemory))) {
-        if (globalMemory.lock()) {
-            IPCMemory* mem = global();
-            memset(mem, 0, sizeof(IPCMemory));
-            mem->globalId = globalId;
-            mem->lastProcessed = time(nullptr);
-            globalMemory.unlock();
-        } else {
-            qWarning() << "Couldn't lock to take ownership";
-        }
-    } else if (globalMemory.attach()) {
-        qDebug() << "Attaching to the global shared memory";
-    } else {
-        qDebug() << "Failed to attach to the global shared memory, giving up. Error:"
-                 << globalMemory.error();
-        return;
-    }
-
-    processEvents();
-}
-
-IPC::~IPC()
-{
-    if (!globalMemory.lock()) {
-        qWarning() << "Failed to lock in ~IPC";
-        return;
-    }
-
-    if (isCurrentOwnerNoLock()) {
-        global()->globalId = 0;
-    }
-    globalMemory.unlock();
-}
-
-time_t IPC::postEvent(const QString& name, const QByteArray& data, uint32_t dest)
-{
-    QByteArray binName = name.toUtf8();
-    if (binName.length() > (int32_t)sizeof(IPCEvent::name)) {
-        return 0;
-    }
-
-    if (data.length() > (int32_t)sizeof(IPCEvent::data)) {
-        return 0;
-    }
-
-    if (!globalMemory.lock()) {
-        qDebug() << "Failed to lock in postEvent()";
-        return 0;
-    }
-
-    IPCEvent* evt = nullptr;
-    IPCMemory* mem = global();
-    time_t result = 0;
-
-    for (uint32_t i = 0; !evt && i < EVENT_QUEUE_SIZE; ++i) {
-        if (mem->events[i].posted == 0) {
-            evt = &mem->events[i];
-        }
-    }
-
-    if (evt) {
-        memset(evt, 0, sizeof(IPCEvent));
-        memcpy(evt->name, binName.constData(), binName.length());
-        memcpy(evt->data, data.constData(), data.length());
-        mem->lastEvent = evt->posted = result = qMax(mem->lastEvent + 1, time(nullptr));
-        evt->dest = dest;
-        evt->sender = qApp->applicationPid();
-        qDebug() << "postEvent " << name << "to" << dest;
-    }
-    globalMemory.unlock();
-    return result;
-}
-
-bool IPC::isCurrentOwner()
-{
-    if (globalMemory.lock()) {
-        const bool isOwner = isCurrentOwnerNoLock();
-        globalMemory.unlock();
-        return isOwner;
-    } else {
-        qWarning() << "isCurrentOwner failed to lock, returning false";
-        return false;
-    }
-}
-
-void IPC::registerEventHandler(const QString& name, IPCEventHandler handler)
-{
-    eventHandlers[name] = handler;
-}
-
-bool IPC::isEventAccepted(time_t time)
-{
-    bool result = false;
-    if (!globalMemory.lock()) {
-        return result;
-    }
-
-    if (difftime(global()->lastProcessed, time) > 0) {
-        IPCMemory* mem = global();
-        for (uint32_t i = 0; i < EVENT_QUEUE_SIZE; ++i) {
-            if (mem->events[i].posted == time && mem->events[i].processed) {
-                result = mem->events[i].accepted;
-                break;
-            }
-        }
-    }
-    globalMemory.unlock();
-
-    return result;
-}
-
-bool IPC::waitUntilAccepted(time_t postTime, int32_t timeout /*=-1*/)
-{
-    bool result = false;
-    time_t start = time(nullptr);
-    forever
-    {
-        result = isEventAccepted(postTime);
-        if (result || (timeout > 0 && difftime(time(nullptr), start) >= timeout)) {
-            break;
-        }
-
-        qApp->processEvents();
-        QThread::msleep(0);
-    }
-    return result;
-}
-
-bool IPC::isAttached() const
-{
-    return globalMemory.isAttached();
-}
-
-void IPC::setProfileId(uint32_t profileId)
-{
-    this->profileId = profileId;
-}
-
-IPC::IPCEvent* IPC::fetchEvent()
-{
-    IPCMemory* mem = global();
-    for (uint32_t i = 0; i < EVENT_QUEUE_SIZE; ++i) {
-        IPCEvent* evt = &mem->events[i];
-        if ((evt->processed && difftime(time(nullptr), evt->processed) > EVENT_GC_TIMEOUT)
-            || (!evt->processed && difftime(time(nullptr), evt->posted) > EVENT_GC_TIMEOUT)) {
-            memset(evt, 0, sizeof(IPCEvent));
-        }
-
-        if (evt->posted && !evt->processed && evt->sender != qApp->applicationPid()
-            && (evt->dest == profileId || (evt->dest == 0 && isCurrentOwnerNoLock()))) {
-            return evt;
-        }
-    }
-
-    return nullptr;
-}
-
-bool IPC::runEventHandler(IPCEventHandler handler, const QByteArray& arg)
-{
-    bool result = false;
-    if (QThread::currentThread() == qApp->thread()) {
-        result = handler(arg);
-    } else {
-        QMetaObject::invokeMethod(this, "runEventHandler", Qt::BlockingQueuedConnection,
-                                  Q_RETURN_ARG(bool, result), Q_ARG(IPCEventHandler, handler),
-                                  Q_ARG(const QByteArray&, arg));
-    }
-    return result;
-}
-
-void IPC::processEvents()
-{
-    if (!globalMemory.lock()) {
-        timer.start();
-        return;
-    }
-
-    IPCMemory* mem = global();
-
-    if (mem->globalId == globalId) {
-        mem->lastProcessed = time(nullptr);
-    } else {
-        if (difftime(time(nullptr), mem->lastProcessed) >= OWNERSHIP_TIMEOUT_S) {
-            qDebug() << "Previous owner timed out, taking ownership" << mem->globalId << "->"
-                     << globalId;
-            memset(mem, 0, sizeof(IPCMemory));
-            mem->globalId = globalId;
-            mem->lastProcessed = time(nullptr);
-        }
-    }
-
-    while (IPCEvent* evt = fetchEvent()) {
-        QString name = QString::fromUtf8(evt->name);
-        auto it = eventHandlers.find(name);
-        if (it != eventHandlers.end()) {
-            evt->accepted = runEventHandler(it.value(), evt->data);
-            qDebug() << "Processed event:" << name << "posted:" << evt->posted
-                     << "accepted:" << evt->accepted;
-            if (evt->dest == 0) {
-                if (evt->accepted) {
-                    evt->processed = time(nullptr);
-                }
-            } else {
-                evt->processed = time(nullptr);
-            }
-        } else {
-            qDebug() << "Received event:" << name << "without handler";
-            qDebug() << "Available handlers:" << eventHandlers.keys();
-        }
-    }
-
-    globalMemory.unlock();
-    timer.start();
-}
-
-bool IPC::isCurrentOwnerNoLock()
-{
-    const void* const data = globalMemory.data();
-    if (!data) {
-        qWarning() << "isCurrentOwnerNoLock failed to access the memory, returning false";
-        return false;
-    }
-    return (*static_cast<const uint64_t*>(data) == globalId);
-}
-
-IPC::IPCMemory* IPC::global()
-{
-    return static_cast<IPCMemory*>(globalMemory.data());
-}

example/src/tool/IPC.h

@@ -1,75 +0,0 @@
-#ifndef IPC_H
-#define IPC_H
-
-#include <QMap>
-#include <QObject>
-#include <QSharedMemory>
-#include <QTimer>
-#include <ctime>
-#include <functional>
-
-using IPCEventHandler = std::function<bool(const QByteArray&)>;
-
-#define IPC_PROTOCOL_VERSION "1"
-
-class IPC : public QObject
-{
-    Q_OBJECT
-
-protected:
-    static const int EVENT_TIMER_MS = 1000;
-    static const int EVENT_GC_TIMEOUT = 5;
-    static const int EVENT_QUEUE_SIZE = 32;
-    static const int OWNERSHIP_TIMEOUT_S = 5;
-
-public:
-    IPC(uint32_t profileId);
-    ~IPC();
-
-    struct IPCEvent
-    {
-        uint32_t dest;
-        int32_t sender;
-        char name[16];
-        char data[128];
-        time_t posted;
-        time_t processed;
-        uint32_t flags;
-        bool accepted;
-        bool global;
-    };
-
-    struct IPCMemory
-    {
-        uint64_t globalId;
-        time_t lastEvent;
-        time_t lastProcessed;
-        IPCEvent events[IPC::EVENT_QUEUE_SIZE];
-    };
-
-    time_t postEvent(const QString& name, const QByteArray& data = QByteArray(), uint32_t dest = 0);
-    bool isCurrentOwner();
-    void registerEventHandler(const QString& name, IPCEventHandler handler);
-    bool isEventAccepted(time_t time);
-    bool waitUntilAccepted(time_t time, int32_t timeout = -1);
-    bool isAttached() const;
-
-public slots:
-    void setProfileId(uint32_t profileId);
-
-private:
-    IPCMemory* global();
-    bool runEventHandler(IPCEventHandler handler, const QByteArray& arg);
-    IPCEvent* fetchEvent();
-    void processEvents();
-    bool isCurrentOwnerNoLock();
-
-private:
-    QTimer timer;
-    uint64_t globalId;
-    uint32_t profileId;
-    QSharedMemory globalMemory;
-    QMap<QString, IPCEventHandler> eventHandlers;
-};
-
-#endif // IPC_H

src/CMakeLists.txt

@@ -12,7 +12,7 @@ if(APPLE)
 endif()
 
 #设置版本号
-add_definitions(-DVERSION=1,3,7,4)
+add_definitions(-DVERSION=1,5,0,0)
 
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
 
@@ -58,37 +58,32 @@ else()
     set(LIB_TYPE "SHARED")
 endif()
 qt_add_library(${PROJECT_NAME} ${LIB_TYPE})
+
 if (FLUENTUI_BUILD_STATIC_LIB)
-    qt_add_qml_module(${PROJECT_NAME}
-        #在静态库编译中使用PLUGIN_TARGET会导致链接失败
-        OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
-        VERSION 1.0
-        URI "FluentUI"
-        TYPEINFO "plugins.qmltypes"
-        SOURCES ${sources_files} fluentui.rc
-        QML_FILES ${qml_files}
-        RESOURCES ${resource_files}
-    )
+    set(PLUGIN_TARGET_NAME "")
 else()
-    qt_add_qml_module(${PROJECT_NAME}
-        #没有下面这行代码就会生成fluentuiplugin.dll与fluentuipluginplugin.dll两个动态库
-        PLUGIN_TARGET fluentuiplugin
-        OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
-        VERSION 1.0
-        URI "FluentUI"
-        #修改qmltypes文件名称。默认fluentuiplugin.qmltypes，使用默认名称有时候import FluentUI会爆红，所以修改成plugins.qmltypes
-        TYPEINFO "plugins.qmltypes"
-        SOURCES ${sources_files} fluentui.rc
-        QML_FILES ${qml_files}
-        RESOURCES ${resource_files}
-    )
+    #如果是动态库，则使用插件目标作为其自己的支持目标来定义 QML 模块，在这种情况下，模块必须在运行时动态加载，并且不能由其他目标直接链接到
+    set(PLUGIN_TARGET_NAME ${PROJECT_NAME})
 endif()
 
+qt_add_qml_module(${PROJECT_NAME}
+    PLUGIN_TARGET ${PLUGIN_TARGET_NAME}
+    OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
+    VERSION 1.0
+    URI "FluentUI"
+    #修改qmltypes文件名称。默认fluentuiplugin.qmltypes，使用默认名称有时候import FluentUI会爆红，所以修改成plugins.qmltypes
+    TYPEINFO "plugins.qmltypes"
+    SOURCES ${sources_files} fluentui.rc
+    QML_FILES ${qml_files}
+    RESOURCES ${resource_files}
+)
+
 #链接库
 target_link_libraries(${PROJECT_NAME} PUBLIC
     Qt::CorePrivate
     Qt::QuickPrivate
     Qt::QmlPrivate
+    ZXing
 )
 
 #安装

src/Def.h

@@ -4,15 +4,127 @@
 #include <QObject>
 #include <QtQml/qqml.h>
 
-namespace Fluent_DarkMode {
+namespace FluThemeType {
 Q_NAMESPACE
-enum Fluent_DarkModeType {
-    System = 0x0,
-    Light = 0x1,
-    Dark = 0x2,
+enum DarkMode {
+    System = 0x0000,
+    Light = 0x0001,
+    Dark = 0x0002,
 };
-Q_ENUM_NS(Fluent_DarkModeType)
-QML_NAMED_ELEMENT(FluDarkMode)
+Q_ENUM_NS(DarkMode)
+QML_NAMED_ELEMENT(FluThemeType)
+}
+
+namespace FluPageType {
+Q_NAMESPACE
+enum LaunchMode {
+    Standard = 0x0000,
+    SingleTask = 0x0001,
+    SingleTop = 0x0002,
+    SingleInstance = 0x0004
+};
+Q_ENUM_NS(LaunchMode)
+QML_NAMED_ELEMENT(FluPageType)
+}
+
+namespace FluWindowType {
+Q_NAMESPACE
+enum LaunchMode {
+    Standard = 0x0000,
+    SingleTask = 0x0001,
+    SingleInstance = 0x0002
+};
+Q_ENUM_NS(LaunchMode)
+QML_NAMED_ELEMENT(FluWindowType)
+}
+
+namespace FluTreeViewType {
+Q_NAMESPACE
+enum SelectionMode {
+    None = 0x0000,
+    Single = 0x0001,
+    Multiple = 0x0002
+};
+Q_ENUM_NS(SelectionMode)
+QML_NAMED_ELEMENT(FluTreeViewType)
+}
+
+namespace FluStatusViewType {
+Q_NAMESPACE
+enum StatusMode {
+    Loading = 0x0000,
+    Empty = 0x0001,
+    Error = 0x0002,
+    Success = 0x0004
+};
+Q_ENUM_NS(StatusMode)
+QML_NAMED_ELEMENT(FluStatusViewType)
+}
+
+namespace FluContentDialogType {
+Q_NAMESPACE
+enum ButtonFlag {
+    NeutralButton = 0x0001,
+    NegativeButton = 0x0002,
+    PositiveButton = 0x0004
+};
+Q_ENUM_NS(ButtonFlag)
+QML_NAMED_ELEMENT(FluContentDialogType)
+}
+
+namespace FluTimePickerType {
+Q_NAMESPACE
+enum HourFormat {
+    H = 0x0000,
+    HH = 0x0001
+};
+Q_ENUM_NS(HourFormat)
+QML_NAMED_ELEMENT(FluTimePickerType)
+}
+
+namespace FluCalendarViewType {
+Q_NAMESPACE
+enum DisplayMode {
+    Month = 0x0000,
+    Year = 0x0001,
+    Decade = 0x0002
+};
+Q_ENUM_NS(DisplayMode)
+QML_NAMED_ELEMENT(FluCalendarViewType)
+}
+
+namespace FluTabViewType {
+Q_NAMESPACE
+enum TabWidthBehavior {
+    Equal = 0x0000,
+    SizeToContent = 0x0001,
+    Compact = 0x0002
+};
+Q_ENUM_NS(TabWidthBehavior)
+enum CloseButtonVisibility {
+    Nerver = 0x0000,
+    Always = 0x0001,
+    OnHover = 0x0002
+};
+Q_ENUM_NS(CloseButtonVisibility)
+QML_NAMED_ELEMENT(FluTabViewType)
+}
+
+namespace FluNavigationViewType {
+Q_NAMESPACE
+enum DisplayMode {
+    Open = 0x0000,
+    Compact = 0x0001,
+    Minimal = 0x0002,
+    Auto = 0x0004
+};
+Q_ENUM_NS(DisplayMode)
+enum PageMode {
+    Stack = 0x0000,
+    NoStack = 0x0001
+};
+Q_ENUM_NS(PageMode)
+QML_NAMED_ELEMENT(FluNavigationViewType)
 }
 
 namespace Fluent_Awesome {

src/FluApp.cpp

@@ -23,6 +23,7 @@ FluApp *FluApp::getInstance()
 FluApp::FluApp(QObject *parent)
     : QObject{parent}
 {
+    httpInterceptor(nullptr);
 }
 
 FluApp::~FluApp(){

src/FluApp.h

@@ -9,6 +9,7 @@
 #include <QJsonObject>
 #include <QQmlEngine>
 #include "FluRegister.h"
+#include "FluHttpInterceptor.h"
 #include "stdafx.h"
 
 /**
@@ -27,6 +28,11 @@ class FluApp : public QObject
      */
     Q_PROPERTY_AUTO(QJsonObject,routes);
 
+    /**
+     * @brief http拦截器
+     */
+    Q_PROPERTY_AUTO(FluHttpInterceptor*,httpInterceptor);
+
     QML_NAMED_ELEMENT(FluApp)
     QML_SINGLETON
 private:

src/FluHttp.cpp

@@ -0,0 +1,305 @@
+#include "FluHttp.h"
+
+#include <QThreadPool>
+#include <QEventLoop>
+#include <QNetworkReply>
+#include <QUrlQuery>
+#include <QHttpMultiPart>
+#include <QJsonDocument>
+#include "MainThread.h"
+#include "FluApp.h"
+
+FluHttp::FluHttp(QObject *parent)
+    : QObject{parent}
+{
+    retry(3);
+    timeout(15000);
+}
+
+FluHttp::~FluHttp(){
+    cancel();
+}
+
+void FluHttp::cancel(){
+    foreach (QPointer<QNetworkReply> item, _cache) {
+        if(item){
+            item->abort();
+        }
+    }
+}
+
+void FluHttp::handleReply(QNetworkReply* reply){
+    _cache.append(reply);
+}
+
+void FluHttp::post(QString url,QJSValue callable,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
+    QMap<QString, QVariant> data = invokeIntercept(params,headers,"post").toMap();
+    QThreadPool::globalInstance()->start([=](){
+        onStart(callable);
+        for (int i = 0; i < retry(); ++i) {
+            QNetworkAccessManager manager;
+            manager.setTransferTimeout(timeout());
+            QUrl _url(url);
+            QNetworkRequest request(_url);
+            addHeaders(&request,data["headers"].toMap());
+            QHttpMultiPart multiPart(QHttpMultiPart::FormDataType);
+            QString contentType = QString("multipart/form-data;boundary=%1").arg(multiPart.boundary());
+            request.setHeader(QNetworkRequest::ContentTypeHeader, contentType);
+            for (const auto& each : data["params"].toMap().toStdMap())
+            {
+                const QString& key = each.first;
+                const QString& value = each.second.toString();
+                QString dispositionHeader = QString("form-data; name=\"%1\"").arg(key);
+                QHttpPart part;
+                part.setHeader(QNetworkRequest::ContentDispositionHeader, dispositionHeader);
+                part.setBody(value.toUtf8());
+                multiPart.append(part);
+            }
+            QEventLoop loop;
+            QNetworkReply* reply = manager.post(request,&multiPart);
+            _cache.append(reply);
+            connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
+                loop.quit();
+            });
+            loop.exec();
+            QString result = QString::fromUtf8(reply->readAll());
+            int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
+            QString errorString = reply->errorString();
+            bool isSuccess = reply->error() == QNetworkReply::NoError;
+            _cache.removeOne(reply);
+            reply->deleteLater();
+            reply = nullptr;
+            if (isSuccess) {
+                onSuccess(callable,result);
+                break;
+            }else{
+                if(i == retry()-1){
+                    onError(callable,status,errorString);
+                }
+            }
+        }
+        onFinish(callable);
+    });
+}
+
+void FluHttp::postString(QString url,QJSValue callable,QString params,QMap<QString, QVariant> headers){
+    QMap<QString, QVariant> data = invokeIntercept(params,headers,"postString").toMap();
+    QThreadPool::globalInstance()->start([=](){
+        onStart(callable);
+        for (int i = 0; i < retry(); ++i) {
+            QNetworkAccessManager manager;
+            manager.setTransferTimeout(timeout());
+            QUrl _url(url);
+            QNetworkRequest request(_url);
+            addHeaders(&request,data["headers"].toMap());
+            QString contentType = QString("text/plain;charset=utf-8");
+            request.setHeader(QNetworkRequest::ContentTypeHeader, contentType);
+            QEventLoop loop;
+            QNetworkReply* reply = manager.post(request,params.toUtf8());
+            _cache.append(reply);
+            connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
+                loop.quit();
+            });
+            loop.exec();
+            QString result = QString::fromUtf8(reply->readAll());
+            int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
+            QString errorString = reply->errorString();
+            bool isSuccess = reply->error() == QNetworkReply::NoError;
+            _cache.removeOne(reply);
+            reply->deleteLater();
+            reply = nullptr;
+            if (isSuccess) {
+                onSuccess(callable,result);
+                break;
+            }else{
+                if(i == retry()-1){
+                    onError(callable,status,errorString);
+                }
+            }
+        }
+        onFinish(callable);
+    });
+}
+
+void FluHttp::postJson(QString url,QJSValue callable,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
+    QMap<QString, QVariant> data = invokeIntercept(params,headers,"postJson").toMap();
+    QThreadPool::globalInstance()->start([=](){
+        onStart(callable);
+        for (int i = 0; i < retry(); ++i) {
+            QNetworkAccessManager manager;
+            manager.setTransferTimeout(timeout());
+            QUrl _url(url);
+            QNetworkRequest request(_url);
+            addHeaders(&request,data["headers"].toMap());
+            QString contentType = QString("application/json;charset=utf-8");
+            request.setHeader(QNetworkRequest::ContentTypeHeader, contentType);
+            QEventLoop loop;
+            QNetworkReply* reply = manager.post(request,QJsonDocument::fromVariant(data["params"]).toJson());
+            _cache.append(reply);
+            connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
+                loop.quit();
+            });
+            loop.exec();
+            QString result = QString::fromUtf8(reply->readAll());
+            int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
+            QString errorString = reply->errorString();
+            bool isSuccess = reply->error() == QNetworkReply::NoError;
+            _cache.removeOne(reply);
+            reply->deleteLater();
+            reply = nullptr;
+            if (isSuccess) {
+                onSuccess(callable,result);
+                break;
+            }else{
+                if(i == retry()-1){
+                    onError(callable,status,errorString);
+                }
+            }
+        }
+        onFinish(callable);
+    });
+}
+
+void FluHttp::get(QString url,QJSValue callable,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
+    QMap<QString, QVariant> data = invokeIntercept(params,headers,"get").toMap();
+    QThreadPool::globalInstance()->start([=](){
+        for (int i = 0; i < retry(); ++i) {
+            onStart(callable);
+            QNetworkAccessManager manager;
+            manager.setTransferTimeout(timeout());
+            QUrl _url(url);
+            addQueryParam(&_url,data["params"].toMap());
+            QNetworkRequest request(_url);
+            addHeaders(&request,data["headers"].toMap());
+            QEventLoop loop;
+            QNetworkReply* reply = manager.get(request);
+            _cache.append(reply);
+            connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
+                loop.quit();
+            });
+            loop.exec();
+            QString result = QString::fromUtf8(reply->readAll());
+            int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
+            QString errorString = reply->errorString();
+            bool isSuccess = reply->error() == QNetworkReply::NoError;
+            _cache.removeOne(reply);
+            reply->deleteLater();
+            reply = nullptr;
+            if (isSuccess) {
+                onSuccess(callable,result);
+                break;
+            }else{
+                if(i == retry()-1){
+                    onError(callable,status,errorString);
+                }
+            }
+        }
+        onFinish(callable);
+    });
+}
+
+void FluHttp::download(QString url,QJSValue callable,QString filePath,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
+    QMap<QString, QVariant> data = invokeIntercept(params,headers,"download").toMap();
+    QThreadPool::globalInstance()->start([=](){
+        onStart(callable);
+        QNetworkAccessManager manager;
+        QUrl _url(url);
+        addQueryParam(&_url,data["params"].toMap());
+        QNetworkRequest request(_url);
+        addHeaders(&request,data["headers"].toMap());
+        QSharedPointer<QFile> file(new QFile(filePath));
+        QIODevice::OpenMode mode = QIODevice::WriteOnly|QIODevice::Truncate;
+        if (!file->open(mode))
+        {
+            onError(callable,-1,QString("Url: %1 %2 Non-Writable").arg(request.url().toString(),file->fileName()));
+            onFinish(callable);
+            return;
+        }
+        QEventLoop loop;
+        connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
+            loop.quit();
+        });
+        QPointer<QNetworkReply> reply =  manager.get(request);
+        _cache.append(reply);
+        connect(reply,&QNetworkReply::downloadProgress,this,[=](qint64 bytesReceived, qint64 bytesTotal){
+            onDownloadProgress(callable,bytesReceived,bytesTotal);
+        });
+        loop.exec();
+        if (reply->error() == QNetworkReply::NoError) {
+            file->write(reply->readAll());
+            onSuccess(callable,filePath);
+        }else{
+            onError(callable,reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt(),reply->errorString());
+        }
+        _cache.removeOne(reply);
+        reply->deleteLater();
+        reply = nullptr;
+        onFinish(callable);
+    });
+}
+
+QVariant FluHttp::invokeIntercept(const QVariant& params,const QVariant& headers,const QString& method){
+    QMap<QString, QVariant> requet = {
+        {"params",params},
+        {"headers",headers},
+        {"method",method}
+    };
+    if(!FluApp::getInstance()->httpInterceptor()){
+        return requet;
+    }
+    QVariant target;
+    QMetaObject::invokeMethod(FluApp::getInstance()->httpInterceptor(), "onIntercept",Q_RETURN_ARG(QVariant,target),Q_ARG(QVariant, requet));
+    return target;
+}
+
+void FluHttp::addQueryParam(QUrl* url,const QMap<QString, QVariant>& params){
+    QMapIterator<QString, QVariant> iter(params);
+    QUrlQuery urlQuery(*url);
+    while (iter.hasNext())
+    {
+        iter.next();
+        urlQuery.addQueryItem(iter.key(), iter.value().toString());
+    }
+    url->setQuery(urlQuery);
+}
+
+void FluHttp::addHeaders(QNetworkRequest* request,const QMap<QString, QVariant>& headers){
+    QMapIterator<QString, QVariant> iter(headers);
+    while (iter.hasNext())
+    {
+        iter.next();
+        request->setRawHeader(iter.key().toUtf8(), iter.value().toString().toUtf8());
+    }
+}
+
+void FluHttp::onStart(const QJSValue& callable){
+    QJSValue onStart = callable.property("onStart");
+    MainThread::post([=](){onStart.call();});
+}
+
+void FluHttp::onFinish(const QJSValue& callable){
+    QJSValue onFinish = callable.property("onFinish");
+    MainThread::post([=](){onFinish.call();});
+}
+
+void FluHttp::onError(const QJSValue& callable,int status,QString errorString){
+    QJSValue onError = callable.property("onError");
+    QJSValueList args;
+    args<<status<<errorString;
+    MainThread::post([=](){onError.call(args);});
+}
+
+void FluHttp::onSuccess(const QJSValue& callable,QString result){
+    QJSValueList args;
+    args<<result;
+    QJSValue onSuccess = callable.property("onSuccess");
+    MainThread::post([=](){onSuccess.call(args);});
+}
+
+void FluHttp::onDownloadProgress(const QJSValue& callable,qint64 recv, qint64 total){
+    QJSValueList args;
+    args<<static_cast<double>(recv);
+    args<<static_cast<double>(total);
+    QJSValue onDownloadProgress = callable.property("onDownloadProgress");
+    MainThread::post([=](){onDownloadProgress.call(args);});
+}

src/FluHttp.h

@@ -0,0 +1,40 @@
+#ifndef FLUHTTP_H
+#define FLUHTTP_H
+
+#include <QObject>
+#include <QtQml/qqml.h>
+#include <QFile>
+#include <QNetworkAccessManager>
+#include "stdafx.h"
+
+class FluHttp : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(int,retry);
+    Q_PROPERTY_AUTO(int,timeout)
+    QML_NAMED_ELEMENT(FluHttp)
+private:
+    QVariant invokeIntercept(const QVariant& params,const QVariant& headers,const QString& method);
+    void handleReply(QNetworkReply* reply);
+    void addQueryParam(QUrl* url,const QMap<QString, QVariant>& params);
+    void addHeaders(QNetworkRequest* request,const QMap<QString, QVariant>& params);
+    void onStart(const QJSValue& callable);
+    void onFinish(const QJSValue& callable);
+    void onError(const QJSValue& callable,int status,QString errorString);
+    void onSuccess(const QJSValue& callable,QString result);
+    void onDownloadProgress(const QJSValue& callable,qint64 recv, qint64 total);
+public:
+    explicit FluHttp(QObject *parent = nullptr);
+    ~FluHttp();
+    //神坑！！！ 如果参数使用QVariantMap会有问题，在6.4.3版本中QML一调用就会编译失败。所以改用QMap<QString, QVariant>
+    Q_INVOKABLE void get(QString url,QJSValue callable,QMap<QString, QVariant> = {},QMap<QString, QVariant> headers = {});
+    Q_INVOKABLE void post(QString url,QJSValue callable,QMap<QString, QVariant> = {},QMap<QString, QVariant> headers = {});
+    Q_INVOKABLE void postString(QString url,QJSValue callable,QString params = "",QMap<QString, QVariant> headers = {});
+    Q_INVOKABLE void postJson(QString url,QJSValue callable,QMap<QString, QVariant> params = {},QMap<QString, QVariant> headers = {});
+    Q_INVOKABLE void download(QString url,QJSValue callable,QString filePath,QMap<QString, QVariant> params = {},QMap<QString, QVariant> headers = {});
+    Q_INVOKABLE void cancel();
+private:
+    QList<QPointer<QNetworkReply>> _cache;
+};
+
+#endif // FLUHTTP_H

src/FluHttpInterceptor.cpp

@@ -0,0 +1,7 @@
+#include "FluHttpInterceptor.h"
+
+FluHttpInterceptor::FluHttpInterceptor(QObject *parent)
+    : QObject{parent}
+{
+
+}

src/FluHttpInterceptor.h

@@ -0,0 +1,18 @@
+#ifndef FLUHTTPINTERCEPTOR_H
+#define FLUHTTPINTERCEPTOR_H
+
+#include <QObject>
+#include <QtQml/qqml.h>
+
+class FluHttpInterceptor : public QObject
+{
+    Q_OBJECT
+    QML_NAMED_ELEMENT(FluHttpInterceptor)
+public:
+    explicit FluHttpInterceptor(QObject *parent = nullptr);
+
+signals:
+
+};
+
+#endif // FLUHTTPINTERCEPTOR_H

src/FluQRCode.cpp

@@ -0,0 +1,53 @@
+#include "FluQRCode.h"
+
+#include "BarcodeFormat.h"
+#include "BitMatrix.h"
+#include "MultiFormatWriter.h"
+
+using namespace ZXing;
+
+FluQRCode::FluQRCode(QQuickItem* parent) : QQuickPaintedItem(parent)
+{
+    color(QColor(0,0,0,255));
+    size(100);
+    setWidth(_size);
+    setHeight(_size);
+    connect(this,&FluQRCode::textChanged,this,[=]{update();});
+    connect(this,&FluQRCode::colorChanged,this,[=]{update();});
+    connect(this,&FluQRCode::sizeChanged,this,[=]{
+        setWidth(_size);
+        setHeight(_size);
+        update();
+    });
+}
+
+
+void FluQRCode::paint(QPainter* painter)
+{
+    if(_text.isEmpty()){
+        return;
+    }
+    if(_text.length()>1108){
+        return;
+    }
+    painter->save();
+    painter->eraseRect(boundingRect());
+    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);
+            }
+        }
+    }
+    painter->drawImage(QRect(0, 0, static_cast<int>(width()), static_cast<int>(height())), rgbImage);
+    painter->restore();
+}

src/FluQRCode.h

@@ -0,0 +1,22 @@
+#ifndef FLUQRCODE_H
+#define FLUQRCODE_H
+
+#include <QQuickItem>
+#include <QQuickPaintedItem>
+#include <QPainter>
+#include "stdafx.h"
+
+class FluQRCode : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QString,text)
+    Q_PROPERTY_AUTO(QColor,color)
+    Q_PROPERTY_AUTO(int,size);
+    QML_NAMED_ELEMENT(FluQRCode)
+public:
+    explicit FluQRCode(QQuickItem *parent = nullptr);
+    void paint(QPainter* painter) override;
+
+};
+
+#endif // FLUQRCODE_H

src/FluTheme.cpp

@@ -32,7 +32,7 @@ FluTheme::FluTheme(QObject *parent)
     primaryColor(FluColors::getInstance()->Blue());
     nativeText(false);
     enableAnimation(false);
-    darkMode(Fluent_DarkMode::Fluent_DarkModeType::Light);
+    darkMode(FluThemeType::DarkMode::Light);
     _systemDark = systemDark();
     qApp->installEventFilter(this);
 }
@@ -67,11 +67,11 @@ bool FluTheme::systemDark()
 }
 
 bool FluTheme::dark(){
-    if(_darkMode == Fluent_DarkMode::Fluent_DarkModeType::Dark){
+    if(_darkMode == FluThemeType::DarkMode::Dark){
         return true;
-    }else if(_darkMode == Fluent_DarkMode::Fluent_DarkModeType::Light){
+    }else if(_darkMode == FluThemeType::DarkMode::Light){
         return false;
-    }else if(_darkMode == Fluent_DarkMode::Fluent_DarkModeType::System){
+    }else if(_darkMode == FluThemeType::DarkMode::System){
         return _systemDark;
     }else{
         return false;

src/FluTools.cpp

@@ -94,3 +94,7 @@ void FluTools::deleteItem(QObject *p){
         p = nullptr;
     }
 }
+
+QString FluTools::toLocalPath(const QUrl& url){
+    return url.toLocalFile();
+}

src/FluTools.h

@@ -23,6 +23,37 @@ public:
         return getInstance();
     }
     static FluTools *getInstance();
+
+    /**
+     * @brief qtMajor Qt Major版本
+     * @return
+     */
+    Q_INVOKABLE int qtMajor();
+
+    /**
+     * @brief qtMajor Qt Minor版本
+     * @return
+     */
+    Q_INVOKABLE int qtMinor();
+
+    /**
+     * @brief isMacos 是否是Macos系统
+     * @return
+     */
+    Q_INVOKABLE bool isMacos();
+
+    /**
+     * @brief isLinux 是否是Linux系统
+     * @return
+     */
+    Q_INVOKABLE bool isLinux();
+
+    /**
+     * @brief isWin 是否是Windows系统
+     * @return
+     */
+    Q_INVOKABLE bool isWin();
+
     /**
      * @brief clipText 将字符串添加到剪切板
      * @param text
@@ -40,25 +71,39 @@ public:
      * @param fileName
      * @return
      */
-    Q_INVOKABLE QString readFile(const QString &fileName);
-
-    Q_INVOKABLE bool isMacos();
-
-    Q_INVOKABLE bool isLinux();
-
-    Q_INVOKABLE bool isWin();
+    Q_INVOKABLE QString readFile(const QString& fileName);
 
+    /**
+     * @brief setQuitOnLastWindowClosed 设置关闭最后一个窗口是否退出程序
+     * @param val
+     */
     Q_INVOKABLE void setQuitOnLastWindowClosed(bool val);
 
-    Q_INVOKABLE int qtMajor();
-
-    Q_INVOKABLE int qtMinor();
-
+    /**
+     * @brief setOverrideCursor 设置全局鼠标样式
+     * @param shape
+     */
     Q_INVOKABLE void setOverrideCursor(Qt::CursorShape shape);
 
+    /**
+     * @brief restoreOverrideCursor 还原全局鼠标样式
+     */
     Q_INVOKABLE void restoreOverrideCursor();
 
+    /**
+     * @brief toLocalPath 获取文件路径，可以去掉windows系统下的file:///，macos下的file://
+     * @param url
+     * @return 返回文件路径
+     */
+    Q_INVOKABLE QString toLocalPath(const QUrl& url);
+
+    /**
+     * @brief deleteItem 销毁Item对象
+     * @param p
+     */
     Q_INVOKABLE void deleteItem(QObject *p);
+
+
 };
 
 #endif // FLUTOOLS_H

src/FluWatermark.cpp

@@ -0,0 +1,45 @@
+#include "FluWatermark.h"
+
+FluWatermark::FluWatermark(QQuickItem* parent) : QQuickPaintedItem(parent)
+{
+    gap(QPoint(100,100));
+    offset(QPoint(_gap.x()/2,_gap.y()/2));
+    rotate(22);
+    setZ(9999);
+    textColor(QColor(222,222,222,222));
+    textSize(16);
+    connect(this,&FluWatermark::textColorChanged,this,[=]{update();});
+    connect(this,&FluWatermark::gapChanged,this,[=]{update();});
+    connect(this,&FluWatermark::offsetChanged,this,[=]{update();});
+    connect(this,&FluWatermark::textChanged,this,[=]{update();});
+    connect(this,&FluWatermark::rotateChanged,this,[=]{update();});
+    connect(this,&FluWatermark::textSizeChanged,this,[=]{update();});
+}
+
+void FluWatermark::paint(QPainter* painter)
+{
+    QFont font;
+    font.setPixelSize(_textSize);
+    painter->setFont(font);
+    painter->setPen(_textColor);
+    QFontMetricsF fontMetrics(font);
+    qreal fontWidth = fontMetrics.horizontalAdvance(_text);
+    qreal fontHeight = fontMetrics.height();
+    int stepX =  fontWidth + _gap.x();
+    int stepY =  fontHeight + _gap.y();
+    int rowCount = width() / stepX+1;
+    int colCount = height() / stepY+1;
+    for (int r = 0; r < rowCount; r++)
+    {
+        for (int c = 0; c < colCount; c++)
+        {
+            qreal centerX = stepX * r + _offset.x() + fontWidth / 2.0;
+            qreal centerY = stepY * c + _offset.y() + fontHeight / 2.0;
+            painter->save();
+            painter->translate(centerX, centerY);
+            painter->rotate(_rotate);
+            painter->drawText(QRectF(-fontWidth / 2.0, -fontHeight / 2.0, fontWidth, fontHeight), _text);
+            painter->restore();
+        }
+    }
+}

src/FluWatermark.h

@@ -0,0 +1,25 @@
+#ifndef FLUWATERMARK_H
+#define FLUWATERMARK_H
+
+#include <QQuickItem>
+#include <QQuickPaintedItem>
+#include <QPainter>
+#include "stdafx.h"
+
+class FluWatermark : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QString,text)
+    Q_PROPERTY_AUTO(QPoint,gap)
+    Q_PROPERTY_AUTO(QPoint,offset);
+    Q_PROPERTY_AUTO(QColor,textColor);
+    Q_PROPERTY_AUTO(int,rotate);
+    Q_PROPERTY_AUTO(int,textSize);
+    QML_NAMED_ELEMENT(FluWatermark)
+public:
+    explicit FluWatermark(QQuickItem *parent = nullptr);
+    void paint(QPainter* painter) override;
+
+};
+
+#endif // FLUWATERMARK_H

src/MainThread.cpp

@@ -0,0 +1,39 @@
+#include "MainThread.h"
+#include <QGuiApplication>
+#include <QMetaMethod>
+
+std::shared_ptr<MainThread> MainThread::createShared(QObject* bindObject)
+{
+    return std::shared_ptr<MainThread>(new MainThread(bindObject), [=](QObject* mainThread) {
+        mainThread->deleteLater();
+    });
+}
+
+MainThread::MainThread(QObject* bindObject)
+    : mBindObject(bindObject)
+    , mIgnoreNullObject(bindObject == nullptr)
+{
+    qRegisterMetaType<std::function<void()>>("std::function<void()>");
+    auto mainUIThread = qApp->thread();
+    if (this->thread() != mainUIThread)
+    {
+        this->moveToThread(mainUIThread);
+    }
+}
+
+MainThread::~MainThread()
+{
+}
+
+void MainThread::post(std::function<void()> func)
+{
+    QMetaObject::invokeMethod(createShared().get(), "mainThreadSlot", Q_ARG(std::function<void()>, func));
+}
+
+void MainThread::mainThreadSlot(std::function<void()> func)
+{
+    if ((mIgnoreNullObject || mBindObject) && func)
+    {
+        func();
+    }
+}

src/MainThread.h

@@ -0,0 +1,24 @@
+#ifndef MAINTHREAD_H
+#define MAINTHREAD_H
+
+#include <QObject>
+#include <QPointer>
+#include <QDebug>
+
+class MainThread : public QObject
+{
+    Q_OBJECT
+public:
+
+    static void post(std::function<void()> func);
+    ~MainThread();
+private:
+    static std::shared_ptr<MainThread> createShared(QObject* bindObject = nullptr);
+private slots:
+    void mainThreadSlot(std::function<void()> func);
+private:
+    MainThread(QObject* bindObject = nullptr);
+    QPointer<QObject> mBindObject;
+    bool mIgnoreNullObject{ false };
+};
+#endif // MAINTHREAD_H

src/imports/FluentUI/Controls/FluAcrylic.qml

@@ -2,36 +2,39 @@ import QtQuick
 import Qt5Compat.GraphicalEffects
 import FluentUI
 
-Item {
+FluItem {
     id: control
-    property alias color: rect.color
-    property alias acrylicOpacity: rect.opacity
-    property alias radius:bg.radius
-    property alias blurRadius: blur.radius
-    property int rectX: control.x
-    property int rectY: control.y
-    property var sourceItem: control.parent
-    FluRectangle{
-        id:bg
+    property color tintColor: Qt.rgba(1,1,1,1)
+    property real tintOpacity: 0.65
+    property real luminosity: 0.01
+    property real noiseOpacity : 0.066
+    property alias target : effect_source.sourceItem
+    property int blurRadius: 32
+    property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
+    ShaderEffectSource {
+        id: effect_source
         anchors.fill: parent
-        radius: [8,8,8,8]
-        ShaderEffectSource {
-            id: effect_source
-            anchors.fill: parent
-            sourceItem: control.sourceItem
-            sourceRect: Qt.rect(rectX, rectY, control.width, control.height)
-            Rectangle {
-                id: rect
-                anchors.fill: parent
-                color: "white"
-                opacity: 0.5
-            }
-        }
-        FastBlur {
-            id:blur
-            radius: 50
-            anchors.fill: effect_source
-            source: effect_source
-        }
+        visible: false
+        sourceRect: control.targetRect
+    }
+    FastBlur {
+        id:fast_blur
+        anchors.fill: parent
+        source: effect_source
+        radius: control.blurRadius
+    }
+    Rectangle{
+        anchors.fill: parent
+        color: Qt.rgba(255, 255, 255, luminosity)
+    }
+    Rectangle{
+        anchors.fill: parent
+        color: Qt.rgba(tintColor.r, tintColor.g, tintColor.b, tintOpacity)
+    }
+    Image{
+        anchors.fill: parent
+        source: "../Image/noise.png"
+        fillMode: Image.Tile
+        opacity: control.noiseOpacity
     }
 }

src/imports/FluentUI/Controls/FluAppBar.qml

@@ -39,9 +39,9 @@ Rectangle{
     }
     property var darkClickListener: function(){
         if(FluTheme.dark){
-            FluTheme.darkMode = FluDarkMode.Light
+            FluTheme.darkMode = FluThemeType.Light
         }else{
-            FluTheme.darkMode = FluDarkMode.Dark
+            FluTheme.darkMode = FluThemeType.Dark
         }
     }
     id:root

src/imports/FluentUI/Controls/FluAutoSuggestBox.qml

@@ -10,7 +10,6 @@ FluTextBox{
     signal itemClicked(var data)
     signal handleClicked
     id:control
-    width: 300
     Component.onCompleted: {
         loadData()
     }

src/imports/FluentUI/Controls/FluCalendarView.qml

@@ -3,12 +3,7 @@ import QtQuick.Controls
 import FluentUI
 
 Item {
-    enum DisplayMode {
-        Month,
-        Year,
-        Decade
-    }
-    property int displayMode: FluCalendarView.Month
+    property int displayMode: FluCalendarViewType.Month
     property var date: new Date()
     property var currentDate : new Date()
     property var toDay: new Date()
@@ -39,7 +34,7 @@ Item {
             width: 70
             onClicked:{
                 control.date = date
-                displayMode = FluCalendarView.Year
+                displayMode = FluCalendarViewType.Year
                 updateYear(date)
             }
             background: Item{
@@ -98,7 +93,7 @@ Item {
             width: 70
             onClicked:{
                 control.date = date
-                displayMode = FluCalendarView.Month
+                displayMode = FluCalendarViewType.Month
                 updateMouth(date)
             }
             background: Item{
@@ -248,13 +243,13 @@ Item {
                     left: parent.left
                     leftMargin: 14
                 }
-                disabled: displayMode === FluCalendarView.Decade
+                disabled: displayMode === FluCalendarViewType.Decade
                 onClicked:{
-                    if(displayMode === FluCalendarView.Month){
-                        displayMode = FluCalendarView.Year
+                    if(displayMode === FluCalendarViewType.Month){
+                        displayMode = FluCalendarViewType.Year
                         updateYear(date)
-                    }else if(displayMode === FluCalendarView.Year){
-                        displayMode = FluCalendarView.Decade
+                    }else if(displayMode === FluCalendarViewType.Year){
+                        displayMode = FluCalendarViewType.Decade
                         updateDecade(date)
                     }
                 }
@@ -271,7 +266,7 @@ Item {
                 onClicked: {
                     var year = date.getFullYear()
                     var month = date.getMonth()
-                    if(displayMode === FluCalendarView.Month){
+                    if(displayMode === FluCalendarViewType.Month){
                         var lastMonthYear = year;
                         var lastMonthMonth = month - 1
                         if (month === 0) {
@@ -280,10 +275,10 @@ Item {
                         }
                         date = new Date(lastMonthYear,lastMonthMonth,1)
                         updateMouth(date)
-                    }else if(displayMode === FluCalendarView.Year){
+                    }else if(displayMode === FluCalendarViewType.Year){
                         date = new Date(year-1,month,1)
                         updateYear(date)
-                    }else if(displayMode === FluCalendarView.Decade){
+                    }else if(displayMode === FluCalendarViewType.Decade){
                         date = new Date(Math.floor(year / 10) * 10-10,month,1)
                         updateDecade(date)
                     }
@@ -301,7 +296,7 @@ Item {
                 onClicked: {
                     var year = date.getFullYear()
                     var month = date.getMonth()
-                    if(displayMode === FluCalendarView.Month){
+                    if(displayMode === FluCalendarViewType.Month){
                         var nextMonthYear = year
                         var nextMonth = month + 1
                         if (month === 11) {
@@ -310,10 +305,10 @@ Item {
                         }
                         date = new Date(nextMonthYear,nextMonth,1)
                         updateMouth(date)
-                    }else if(displayMode === FluCalendarView.Year){
+                    }else if(displayMode === FluCalendarViewType.Year){
                         date = new Date(year+1,month,1)
                         updateYear(date)
-                    }else if(displayMode === FluCalendarView.Decade){
+                    }else if(displayMode === FluCalendarViewType.Decade){
                         date = new Date(Math.floor(year / 10) * 10+10,month,1)
                         updateDecade(date)
                     }
@@ -334,8 +329,8 @@ Item {
             GridView{
                 model: list_model
                 anchors.fill: parent
-                cellHeight: displayMode === FluCalendarView.Month ? 40 : 70
-                cellWidth: displayMode === FluCalendarView.Month ? 40 : 70
+                cellHeight: displayMode === FluCalendarViewType.Month ? 40 : 70
+                cellWidth: displayMode === FluCalendarViewType.Month ? 40 : 70
                 clip: true
                 boundsBehavior:Flickable.StopAtBounds
                 delegate: Loader{

src/imports/FluentUI/Controls/FluCarousel.qml

@@ -2,102 +2,170 @@ import QtQuick
 import QtQuick.Controls
 import FluentUI
 
-Item {
-    property bool flagXChanged: true
-    property int radius : 5
+FluItem {
     property int loopTime: 2000
+    property var model
+    property Component delegate
     property bool showIndicator: true
+    property int indicatorGravity : Qt.AlignBottom | Qt.AlignHCenter
+    property int indicatorMarginLeft: 0
+    property int indicatorMarginRight: 0
+    property int indicatorMarginTop: 0
+    property int indicatorMarginBottom: 20
+    property int indicatorSpacing: 10
+    property alias indicatorAnchors: layout_indicator.anchors
+    property Component indicatorDelegate : com_indicator
     id:control
     width: 400
     height: 300
     ListModel{
         id:content_model
     }
-    FluRectangle{
-        anchors.fill: parent
-        radius: [control.radius,control.radius,control.radius,control.radius]
-        FluShadow{
-            radius:control.radius
+    QtObject{
+        id:d
+        property bool flagXChanged: true
+        function setData(data){
+            if(!data){
+                return
+            }
+            content_model.clear()
+            content_model.append(data[data.length-1])
+            content_model.append(data)
+            content_model.append(data[0])
+            list_view.highlightMoveDuration = 0
+            list_view.currentIndex = 1
+            list_view.highlightMoveDuration = 250
+            timer_run.restart()
         }
-        ListView{
-            id:list_view
-            anchors.fill: parent
-            snapMode: ListView.SnapOneItem
-            clip: true
-            boundsBehavior: ListView.StopAtBounds
-            model:content_model
-            maximumFlickVelocity: 4 * (list_view.orientation === Qt.Horizontal ? width : height)
-            preferredHighlightBegin: 0
-            preferredHighlightEnd: 0
-            highlightMoveDuration: 0
-            orientation : ListView.Horizontal
-            delegate: Item{
-                width: ListView.view.width
-                height: ListView.view.height
-                property int displayIndex: {
-                    if(index === 0)
-                        return content_model.count-3
-                    if(index === content_model.count-1)
-                        return 0
-                    return index-1
-                }
-                Image {
-                    anchors.fill: parent
-                    source: model.url
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
+    }
+    ListView{
+        id:list_view
+        anchors.fill: parent
+        snapMode: ListView.SnapOneItem
+        clip: true
+        boundsBehavior: ListView.StopAtBounds
+        model:content_model
+        maximumFlickVelocity: 4 * (list_view.orientation === Qt.Horizontal ? width : height)
+        preferredHighlightBegin: 0
+        preferredHighlightEnd: 0
+        highlightMoveDuration: 0
+        Component.onCompleted: {
+            d.setData(control.model)
+        }
+        Connections{
+            target: control
+            function onModelChanged(){
+                d.setData(control.model)
             }
-            onMovementEnded:{
-                currentIndex = list_view.contentX/list_view.width
-                if(currentIndex === 0){
-                    currentIndex = list_view.count-2
-                }else if(currentIndex === list_view.count-1){
-                    currentIndex = 1
-                }
-                flagXChanged = false
-                timer_run.start()
+        }
+        orientation : ListView.Horizontal
+        delegate: Item{
+            id:item_control
+            width: ListView.view.width
+            height: ListView.view.height
+            property int displayIndex: {
+                if(index === 0)
+                    return content_model.count-3
+                if(index === content_model.count-1)
+                    return 0
+                return index-1
             }
-            onMovementStarted: {
-                flagXChanged = true
-                timer_run.stop()
-            }
-            onContentXChanged: {
-                if(flagXChanged){
-                    var maxX = Math.min(list_view.width*(currentIndex+1),list_view.count*list_view.width)
-                    var minY = Math.max(0,(list_view.width*(currentIndex-1)))
-                    if(contentX>=maxX){
-                        contentX = maxX
-                    }
-                    if(contentX<=minY){
-                        contentX = minY
+            Loader{
+                property int displayIndex : item_control.displayIndex
+                property var model: list_view.model.get(index)
+                anchors.fill: parent
+                sourceComponent: {
+                    if(model){
+                        return control.delegate
                     }
+                    return undefined
+                }
+            }
+        }
+        onMovementEnded:{
+            currentIndex = list_view.contentX/list_view.width
+            if(currentIndex === 0){
+                currentIndex = list_view.count-2
+            }else if(currentIndex === list_view.count-1){
+                currentIndex = 1
+            }
+            d.flagXChanged = false
+            timer_run.restart()
+        }
+        onMovementStarted: {
+            d.flagXChanged = true
+            timer_run.stop()
+        }
+        onContentXChanged: {
+            if(d.flagXChanged){
+                var maxX = Math.min(list_view.width*(currentIndex+1),list_view.count*list_view.width)
+                var minY = Math.max(0,(list_view.width*(currentIndex-1)))
+                if(contentX>=maxX){
+                    contentX = maxX
+                }
+                if(contentX<=minY){
+                    contentX = minY
+                }
+            }
+        }
+    }
+    Component{
+        id:com_indicator
+        Rectangle{
+            width:  8
+            height: 8
+            radius: 4
+            FluShadow{
+                radius: 4
+            }
+            scale: checked ? 1.2 : 1
+            color: checked ?  FluTheme.primaryColor.dark : Qt.rgba(1,1,1,0.7)
+            border.width: mouse_item.containsMouse ? 1 : 0
+            border.color: FluTheme.primaryColor.dark
+            MouseArea{
+                id:mouse_item
+                hoverEnabled: true
+                anchors.fill: parent
+                onClicked: {
+                    changedIndex(realIndex)
                 }
             }
         }
     }
     Row{
-        spacing: 10
+        id:layout_indicator
+        spacing: control.indicatorSpacing
         anchors{
-            horizontalCenter: parent.horizontalCenter
-            bottom: parent.bottom
-            bottomMargin: 20
+            horizontalCenter:(indicatorGravity & Qt.AlignHCenter) ? parent.horizontalCenter : undefined
+            verticalCenter: (indicatorGravity & Qt.AlignVCenter) ? parent.verticalCenter : undefined
+            bottom: (indicatorGravity & Qt.AlignBottom) ? parent.bottom : undefined
+            top: (indicatorGravity & Qt.AlignTop) ? parent.top : undefined
+            left: (indicatorGravity & Qt.AlignLeft) ? parent.left : undefined
+            right: (indicatorGravity & Qt.AlignRight) ? parent.right : undefined
+            bottomMargin: control.indicatorMarginBottom
+            leftMargin: control.indicatorMarginBottom
+            rightMargin: control.indicatorMarginBottom
+            topMargin: control.indicatorMarginBottom
         }
         visible: showIndicator
         Repeater{
+            id:repeater_indicator
             model: list_view.count
-            Rectangle{
-                width: 8
-                height: 8
-                radius: 4
-                visible: {
-                    if(index===0 || index===list_view.count-1)
-                        return false
-                    return true
+            Loader{
+                property int displayIndex: {
+                    if(index === 0)
+                        return list_view.count-3
+                    if(index === list_view.count-1)
+                        return 0
+                    return index-1
+                }
+                property int realIndex: index
+                property bool checked: list_view.currentIndex === index
+                sourceComponent: {
+                    if(index===0 || index===list_view.count-1)
+                        return undefined
+                    return control.indicatorDelegate
                 }
-                border.width: 1
-                border.color: FluColors.Grey100
-                color:   list_view.currentIndex === index ?  FluTheme.primaryColor.dark : Qt.rgba(1,1,1,0.5)
             }
         }
     }
@@ -121,12 +189,13 @@ Item {
             timer_anim.start()
         }
     }
-    function setData(data){
-        content_model.clear()
-        content_model.append(data[data.length-1])
-        content_model.append(data)
-        content_model.append(data[0])
-        list_view.currentIndex = 1
+
+    function changedIndex(index){
+        d.flagXChanged = true
+        timer_run.stop()
+         list_view.currentIndex = index
+        d.flagXChanged = false
         timer_run.restart()
     }
+
 }

src/imports/FluentUI/Controls/FluColorPicker.qml

@@ -11,6 +11,7 @@ Button{
     height: 36
     implicitWidth: width
     implicitHeight: height
+    property alias colorValue: container.colorValue
     background:
         Rectangle{
         id:layout_color
@@ -75,4 +76,7 @@ Button{
             popup.open()
         }
     }
+    function setColor(color){
+        container.setColor(color)
+    }
 }

src/imports/FluentUI/Controls/FluContentDialog.qml

@@ -15,23 +15,13 @@ FluPopup {
     signal neutralClicked
     signal negativeClicked
     signal positiveClicked
-    enum ButtonFlag{
-        NegativeButton=1
-        ,NeutralButton=2
-        ,PositiveButton=4
-    }
-    property int buttonFlags: FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
-    property var minWidth: {
-        if(Window.window==null)
-            return 400
-        return  Math.min(Window.window.width,400)
-    }
+    property int buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
     focus: true
+    implicitWidth: 400
+    implicitHeight: text_title.height + text_message.height + layout_actions.height
     Rectangle {
         id:layout_content
         anchors.fill: parent
-        implicitWidth:minWidth
-        implicitHeight: text_title.height + text_message.height + layout_actions.height
         color: 'transparent'
         radius:5
         FluText{
@@ -67,7 +57,7 @@ FluPopup {
             id:layout_actions
             height: 68
             radius: 5
-            color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255, blurBackground ? blurOpacity - 0.4 : 1) : Qt.rgba(243/255,243/255,243/255,blurBackground ? blurOpacity - 0.4 : 1)
+            color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
             anchors{
                 top:text_message.bottom
                 left: parent.left
@@ -85,11 +75,11 @@ FluPopup {
                     id:neutral_btn
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    visible: popup.buttonFlags&FluContentDialog.NeutralButton
+                    visible: popup.buttonFlags&FluContentDialogType.NeutralButton
                     text: neutralText
                     onClicked: {
                         popup.close()
-                        timer_delay.targetFlags = FluContentDialog.NeutralButton
+                        timer_delay.targetFlags = FluContentDialogType.NeutralButton
                         timer_delay.restart()
                     }
                 }
@@ -97,11 +87,11 @@ FluPopup {
                     id:negative_btn
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    visible: popup.buttonFlags&FluContentDialog.NegativeButton
+                    visible: popup.buttonFlags&FluContentDialogType.NegativeButton
                     text: negativeText
                     onClicked: {
                         popup.close()
-                        timer_delay.targetFlags = FluContentDialog.NegativeButton
+                        timer_delay.targetFlags = FluContentDialogType.NegativeButton
                         timer_delay.restart()
                     }
                 }
@@ -109,11 +99,11 @@ FluPopup {
                     id:positive_btn
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    visible: popup.buttonFlags&FluContentDialog.PositiveButton
+                    visible: popup.buttonFlags&FluContentDialogType.PositiveButton
                     text: positiveText
                     onClicked: {
                         popup.close()
-                        timer_delay.targetFlags = FluContentDialog.PositiveButton
+                        timer_delay.targetFlags = FluContentDialogType.PositiveButton
                         timer_delay.restart()
                     }
                 }
@@ -125,13 +115,13 @@ FluPopup {
         id:timer_delay
         interval: popup.delayTime
         onTriggered: {
-            if(targetFlags === FluContentDialog.NegativeButton){
+            if(targetFlags === FluContentDialogType.NegativeButton){
                 negativeClicked()
             }
-            if(targetFlags === FluContentDialog.NeutralButton){
+            if(targetFlags === FluContentDialogType.NeutralButton){
                 neutralClicked()
             }
-            if(targetFlags === FluContentDialog.PositiveButton){
+            if(targetFlags === FluContentDialogType.PositiveButton){
                 positiveClicked()
             }
         }

src/imports/FluentUI/Controls/FluContentPage.qml

@@ -11,6 +11,17 @@ FluPage {
     property int topPadding: 0
     property int rightPadding: 10
     property int bottomPadding: 10
+    property alias color: status_view.color
+    property alias statusMode: status_view.statusMode
+    property alias loadingText: status_view.loadingText
+    property alias emptyText:status_view.emptyText
+    property alias errorText:status_view.errorText
+    property alias errorButtonText:status_view.errorButtonText
+    property alias loadingItem :status_view.loadingItem
+    property alias emptyItem : status_view.emptyItem
+    property alias errorItem :status_view.errorItem
+    signal errorClicked
+
     id:control
     FluText{
         id:text_title
@@ -26,9 +37,11 @@ FluPage {
             rightMargin: control.rightPadding
         }
     }
-    Item{
-        clip: true
-        id:container
+    FluStatusView{
+        id:status_view
+        color: "#00000000"
+        statusMode: FluStatusViewType.Success
+        onErrorClicked: control.errorClicked()
         anchors{
             left: parent.left
             right: parent.right
@@ -38,5 +51,10 @@ FluPage {
             rightMargin: control.rightPadding
             bottomMargin: control.bottomPadding
         }
+        Item{
+            clip: true
+            id:container
+            anchors.fill: parent
+        }
     }
 }

src/imports/FluentUI/Controls/FluDivider.qml

@@ -3,5 +3,16 @@ import QtQuick.Window
 import FluentUI
 
 Rectangle {
-   color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
+    property real spacing
+    property alias separatorHeight:separator.height
+
+    id:root
+    color:Qt.rgba(0,0,0,0)
+    height: spacing*2+separator.height
+    Rectangle{
+        id:separator
+         color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
+         width:parent.width
+         anchors.centerIn: parent
+    }
 }

src/imports/FluentUI/Controls/FluHorizontalHeaderView.qml

@@ -1,27 +0,0 @@
-import QtQuick
-import QtQuick.Templates as T
-import FluentUI
-
-T.HorizontalHeaderView {
-    id: control
-    implicitWidth: syncView ? syncView.width : 0
-    implicitHeight: Math.max(1, contentHeight)
-    delegate: Rectangle {
-        readonly property real cellPadding: 8
-        implicitWidth: text.implicitWidth + (cellPadding * 2)
-        implicitHeight: Math.max(control.height, text.implicitHeight + (cellPadding * 2))
-        color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-        border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
-        FluText {
-            id: text
-            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
-                                        : model[control.textRole])
-                                   : modelData
-            width: parent.width
-            height: parent.height
-            font.bold: true
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-    }
-}

src/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -12,7 +12,6 @@ TextArea{
     property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
     property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
     id:control
-    width: 300
     enabled: !disabled
     color: {
         if(!enabled){
@@ -37,7 +36,10 @@ TextArea{
         return placeholderNormalColor
     }
     selectByMouse: true
-    background: FluTextBoxBackground{ inputItem: control }
+    background: FluTextBoxBackground{
+        inputItem: control
+        implicitWidth: 240
+    }
     Keys.onEnterPressed: (event)=> d.handleCommit(event)
     Keys.onReturnPressed:(event)=> d.handleCommit(event)
     QtObject{

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -6,39 +6,29 @@ import QtQuick.Layouts
 import FluentUI
 
 Item {
-    enum DisplayMode {
-        Open = 0,
-        Compact = 1,
-        Minimal = 2,
-        Auto = 3
-    }
-    enum PageMode {
-        Stack = 0,
-        NoStack = 1
-    }
     property url logo
     property string title: ""
     property FluObject items
     property FluObject footerItems
-    property int displayMode: FluNavigationView.Auto
+    property int displayMode: FluNavigationViewType.Auto
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
     property int navWidth: 300
-    property int pageMode: FluNavigationView.Stack
+    property int pageMode: FluNavigationViewType.Stack
     signal logoClicked
     id:control
-    QtObject{
+    Item{
         id:d
         property bool animDisabled:false
         property var stackItems: []
         property int displayMode: control.displayMode
         property bool enableNavigationPanel: false
-        property bool isCompact: d.displayMode === FluNavigationView.Compact
-        property bool isMinimal: d.displayMode === FluNavigationView.Minimal
-        property bool isCompactAndPanel: d.displayMode === FluNavigationView.Compact && d.enableNavigationPanel
-        property bool isCompactAndNotPanel:d.displayMode === FluNavigationView.Compact && !d.enableNavigationPanel
-        property bool isMinimalAndPanel: d.displayMode === FluNavigationView.Minimal && d.enableNavigationPanel
+        property bool isCompact: d.displayMode === FluNavigationViewType.Compact
+        property bool isMinimal: d.displayMode === FluNavigationViewType.Minimal
+        property bool isCompactAndPanel: d.displayMode === FluNavigationViewType.Compact && d.enableNavigationPanel
+        property bool isCompactAndNotPanel:d.displayMode === FluNavigationViewType.Compact && !d.enableNavigationPanel
+        property bool isMinimalAndPanel: d.displayMode === FluNavigationViewType.Minimal && d.enableNavigationPanel
         onIsCompactAndNotPanelChanged: {
             collapseAll()
         }
@@ -76,18 +66,22 @@ Item {
             }
             return data
         }
+        function refreshWindow(){
+            Window.window.width = Window.window.width-1
+            Window.window.width = Window.window.width+1
+        }
     }
     Component.onCompleted: {
         d.displayMode = Qt.binding(function(){
-            if(control.displayMode !==FluNavigationView.Auto){
+            if(control.displayMode !==FluNavigationViewType.Auto){
                 return control.displayMode
             }
             if(control.width<=700){
-                return FluNavigationView.Minimal
+                return FluNavigationViewType.Minimal
             }else if(control.width<=900){
-                return FluNavigationView.Compact
+                return FluNavigationViewType.Compact
             }else{
-                return FluNavigationView.Open
+                return FluNavigationViewType.Open
             }
         })
         timer_anim_delay.restart()
@@ -102,10 +96,10 @@ Item {
     Connections{
         target: d
         function onDisplayModeChanged(){
-            if(d.displayMode === FluNavigationView.Compact){
+            if(d.displayMode === FluNavigationViewType.Compact){
                 collapseAll()
             }
-            if(d.displayMode === FluNavigationView.Minimal){
+            if(d.displayMode === FluNavigationViewType.Minimal){
                 d.enableNavigationPanel = false
             }
         }
@@ -120,11 +114,12 @@ Item {
         id:com_panel_item_separatorr
         FluDivider{
             width: layout_list.width
-            height: {
+            spacing: model.spacing
+            separatorHeight: {
                 if(model.parent){
-                    return model.parent.isExpand ? 1 : 0
+                    return model.parent.isExpand ? model.size : 0
                 }
-                return 1
+                return model.size
             }
         }
     }
@@ -533,11 +528,11 @@ Item {
                         layout_footer.currentIndex = item._idx-(nav_list.count-layout_footer.count)
                     }
                     nav_list.currentIndex = item._idx
-                    if(pageMode === FluNavigationView.Stack){
+                    if(pageMode === FluNavigationViewType.Stack){
                         var nav_stack = loader_content.item.navStack()
                         var nav_stack2 = loader_content.item.navStack2()
                         nav_stack.pop()
-                        if(nav_stack.currentItem.launchMode === FluPage.SingleInstance){
+                        if(nav_stack.currentItem.launchMode === FluPageType.SingleInstance){
                             var url = nav_stack.currentItem.url
                             var pageIndex = -1
                             for(var i=0;i<nav_stack2.children.length;i++){
@@ -551,7 +546,7 @@ Item {
                                 nav_stack2.currentIndex = pageIndex
                             }
                         }
-                    }else if(pageMode === FluNavigationView.NoStack){
+                    }else if(pageMode === FluNavigationViewType.NoStack){
                         loader_content.setSource(item._ext.url,item._ext.argument)
                     }
                 }
@@ -646,7 +641,7 @@ Item {
                 id:nav_stack2
                 anchors.fill: nav_stack
                 clip: true
-                visible: nav_stack.currentItem?.launchMode === FluPage.SingleInstance
+                visible: nav_stack.currentItem?.launchMode === FluPageType.SingleInstance
             }
             function navStack(){
                 return nav_stack
@@ -707,7 +702,7 @@ Item {
         border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
         border.width:  d.isMinimal || d.isCompactAndPanel ? 1 : 0
         color: {
-            if(d.isMinimal){
+            if(d.isMinimal || d.enableNavigationPanel){
                 return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
             }
             return "transparent"
@@ -718,6 +713,11 @@ Item {
             NumberAnimation{
                 duration: 167
                 easing.type: Easing.OutCubic
+                onRunningChanged: {
+                    if(!running){
+                        d.refreshWindow()
+                    }
+                }
             }
         }
         Behavior on x {
@@ -725,27 +725,18 @@ Item {
             NumberAnimation{
                 duration: 167
                 easing.type: Easing.OutCubic
+                onRunningChanged: {
+                    if(!running){
+                        d.refreshWindow()
+                    }
+                }
             }
         }
         visible: {
-            if(d.displayMode !== FluNavigationView.Minimal)
+            if(d.displayMode !== FluNavigationViewType.Minimal)
                 return true
             return d.isMinimalAndPanel  ? true : false
         }
-        FluAcrylic {
-            sourceItem:loader_content
-            anchors.fill: layout_list
-            color: {
-                if(d.isMinimalAndPanel || d.isCompactAndPanel){
-                    return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
-                }
-                return "transparent"
-            }
-            visible: d.isMinimalAndPanel || d.isCompactAndPanel
-            rectX: d.isCompactAndPanel ? (layout_list.x - 50) : layout_list.x
-            rectY: layout_list.y - 60
-            acrylicOpacity:0.9
-        }
         Item{
             id:layout_header
             width: layout_list.width
@@ -1005,7 +996,7 @@ Item {
     Component{
         id:com_placeholder
         Item{
-            property int launchMode: FluPage.SingleInstance
+            property int launchMode: FluPageType.SingleInstance
             property string url
         }
     }
@@ -1031,12 +1022,12 @@ Item {
         return nav_list.currentIndex
     }
     function getCurrentUrl(){
-        if(pageMode === FluNavigationView.Stack){
+        if(pageMode === FluNavigationViewType.Stack){
             var nav_stack = loader_content.item.navStack()
             if(nav_stack.currentItem){
                 return nav_stack.currentItem.url
             }
-        }else if(pageMode === FluNavigationView.NoStack){
+        }else if(pageMode === FluNavigationViewType.NoStack){
             return loader_content.source.toString()
         }
         return undefined
@@ -1051,19 +1042,19 @@ Item {
             if(page){
                 switch(page.launchMode)
                 {
-                case FluPage.SingleTask:
+                case FluPageType.SingleTask:
                     while(nav_stack.currentItem !== page)
                     {
                         nav_stack.pop()
                         d.stackItems = d.stackItems.slice(0, -1)
                     }
                     return
-                case FluPage.SingleTop:
+                case FluPageType.SingleTop:
                     if (nav_stack.currentItem.url === url){
                         return
                     }
                     break
-                case FluPage.Standard:
+                case FluPageType.Standard:
                 default:
                 }
             }
@@ -1083,7 +1074,7 @@ Item {
                 var comp = Qt.createComponent(url)
                 if (comp.status === Component.Ready) {
                     var obj  = comp.createObject(nav_stack,options)
-                    if(obj.launchMode === FluPage.SingleInstance){
+                    if(obj.launchMode === FluPageType.SingleInstance){
                         nav_stack.push(com_placeholder,options)
                         nav_stack2.children.push(obj)
                         nav_stack2.currentIndex = nav_stack2.count - 1
@@ -1105,9 +1096,9 @@ Item {
             obj._ext = {url:url,argument:argument}
             d.stackItems = d.stackItems.concat(obj)
         }
-        if(pageMode === FluNavigationView.Stack){
+        if(pageMode === FluNavigationViewType.Stack){
             stackPush()
-        }else if(pageMode === FluNavigationView.NoStack){
+        }else if(pageMode === FluNavigationViewType.NoStack){
             noStackPush()
         }
     }
@@ -1133,4 +1124,7 @@ Item {
     function navButton(){
         return btn_nav
     }
+    function logoButton(){
+        return image_logo
+    }
 }

src/imports/FluentUI/Controls/FluPage.qml

@@ -5,13 +5,7 @@ import QtQuick.Window
 import FluentUI
 
 Item {
-    enum LaunchMode{
-        Standard = 0,
-        SingleTask = 1,
-        SingleTop = 2,
-        SingleInstance = 3
-    }
-    property int launchMode: FluPage.SingleTop
+    property int launchMode: FluPageType.SingleTop
     property bool animDisabled: false
     property string url : ""
     id: control

src/imports/FluentUI/Controls/FluPaneItemSeparator.qml

@@ -6,4 +6,6 @@ QtObject {
     readonly property string key : FluTools.uuid()
     property int _idx
     property var parent
+    property real spacing
+    property int size:1
 }

src/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -13,7 +13,6 @@ TextField{
     property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
     property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
     id:control
-    width: 300
     enabled: !disabled
     color: {
         if(!enabled){
@@ -41,6 +40,7 @@ TextField{
     rightPadding: icon_end.visible ? 50 : 30
     background: FluTextBoxBackground{
         inputItem: control
+        implicitWidth: 240
         FluIcon{
             id:icon_end
             iconSource: control.iconSource

src/imports/FluentUI/Controls/FluPopup.qml

@@ -10,11 +10,6 @@ Popup {
     modal:true
     anchors.centerIn: Overlay.overlay
     closePolicy: Popup.CloseOnEscape
-    property alias blurSource: blur.sourceItem
-    property bool blurBackground: true
-    property alias blurOpacity: blur.acrylicOpacity
-    property alias blurRectX: blur.rectX
-    property alias blurRectY: blur.rectY
     enter: Transition {
         NumberAnimation {
             properties: "scale"
@@ -45,12 +40,8 @@ Popup {
             to:0
         }
     }
-
-    background: FluAcrylic{
-        id:blur
-        color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1)
-        rectX: popup.x
-        rectY: popup.y
-        acrylicOpacity:blurBackground ? 0.8 : 1
+    background: FluRectangle{
+        radius: [5,5,5,5]
+        color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
     }
 }

src/imports/FluentUI/Controls/FluProgressBar.qml

@@ -2,56 +2,48 @@ import QtQuick
 import QtQuick.Controls
 import FluentUI
 
-Item{
-
-    property real progress: 0.5
-    property bool indeterminate: true
+ProgressBar{
+    property real strokeWidth: 6
     property bool progressVisible: false
-    id: control
-    width: 150
-    height: 5
-
-    FluRectangle {
-        shadow: false
-        radius: [3,3,3,3]
-        anchors.fill: parent
-        color:  FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-        Component.onCompleted: {
-            if(indeterminate){
-                bar.x = -control.width*0.5
-                behavior.enabled = true
-                bar.x = control.width
-            }else{
-                bar.x = 0
-            }
-        }
-        Rectangle{
-            id:bar
-            radius: 3
-            width: control.width*progress
-            height:  control.height
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-            Behavior on x{
-                id:behavior
-                enabled: false
-                NumberAnimation{
-                    duration: 1000
-                    onRunningChanged: {
-                        if(!running){
-                            behavior.enabled = false
-                            bar.x = -control.width*0.5
-                            behavior.enabled = true
-                            bar.x = control.width
-                        }
-                    }
+    property color color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color backgroundColor : FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+    id:control
+    indeterminate : true
+    QtObject{
+        id:d
+        property real _radius: strokeWidth/2
+    }
+    background: Rectangle {
+        implicitWidth: 150
+        implicitHeight: control.strokeWidth
+        color: control.backgroundColor
+        radius: d._radius
+    }
+    contentItem: FluItem {
+        clip: true
+        radius: [d._radius,d._radius,d._radius,d._radius]
+        Rectangle {
+            id:rect_progress
+            width: {
+                if(control.indeterminate){
+                    return 0.5 * parent.width
                 }
+                return control.visualPosition * parent.width
+            }
+            height: parent.height
+            radius: d._radius
+            color: control.color
+            PropertyAnimation on x {
+                running: control.indeterminate && control.visible
+                from: -rect_progress.width
+                to:control.width+rect_progress.width
+                loops: Animation.Infinite
+                duration: 888
             }
         }
     }
-
     FluText{
-        text:(control.progress * 100).toFixed(0) + "%"
-        font.pixelSize: 10
+        text:(control.visualPosition * 100).toFixed(0) + "%"
         visible: {
             if(control.indeterminate){
                 return false

src/imports/FluentUI/Controls/FluProgressRing.qml

@@ -1,32 +1,31 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Shapes
 import FluentUI
 
-Rectangle {
-    property real linWidth : 5
-    property real progress: 0.25
-    property bool indeterminate: true
-    property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+ProgressBar{
+    property real strokeWidth: 6
     property bool progressVisible: false
-    id: control
-    width: 44
-    height: 44
-    radius: width/2
-    border.width: linWidth
-    color: "#00000000"
-    border.color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-    onProgressChanged: {
-        canvas.requestPaint()
-    }
-    Component.onCompleted: {
-        if(indeterminate){
-            behavior.enabled = true
-            control.rotation = 360
-        }
+    property color color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color backgroundColor : FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+    id:control
+    indeterminate : true
+    clip: true
+    background: Rectangle {
+        implicitWidth: 56
+        implicitHeight: 56
+        radius: control.width/2
+        color:"transparent"
+        border.color: control.backgroundColor
+        border.width: control.strokeWidth
     }
     QtObject{
         id:d
-        property real _radius: control.radius-control.linWidth/2
+        property real _radius: control.width/2-control.strokeWidth/2
+        property real _progress: control.indeterminate ? 0.3 :  control.visualPosition
+        on_ProgressChanged: {
+            canvas.requestPaint()
+        }
     }
     Connections{
         target: FluTheme
@@ -34,43 +33,35 @@ Rectangle {
             canvas.requestPaint()
         }
     }
-    Behavior on rotation{
-        id:behavior
-        enabled: false
-        NumberAnimation{
-            duration: 999
-            onRunningChanged: {
-                if(!running){
-                    behavior.enabled = false
-                    control.rotation = 0
-                    behavior.enabled = true
-                    control.rotation = 360
-                }
+    contentItem: Item {
+        RotationAnimation on rotation {
+            running: control.indeterminate && control.visible
+            from: 0
+            to:360
+            loops: Animation.Infinite
+            duration: 888
+        }
+        Canvas {
+            id:canvas
+            anchors.fill: parent
+            antialiasing: true
+            renderTarget: Canvas.Image
+            onPaint: {
+                var ctx = canvas.getContext("2d")
+                ctx.clearRect(0, 0, canvas.width, canvas.height)
+                ctx.save()
+                ctx.lineWidth = control.strokeWidth
+                ctx.strokeStyle = control.color
+                ctx.beginPath()
+                ctx.arc(width/2, height/2, d._radius ,-0.5 * Math.PI,-0.5 * Math.PI + d._progress * 2 * Math.PI)
+                ctx.stroke()
+                ctx.closePath()
+                ctx.restore()
             }
         }
     }
-    Canvas {
-        id:canvas
-        anchors.fill: parent
-        antialiasing: true
-        renderTarget: Canvas.Image
-        onPaint: {
-            var ctx = canvas.getContext("2d")
-            ctx.clearRect(0, 0, canvas.width, canvas.height)
-            ctx.save()
-            ctx.lineWidth = linWidth
-            ctx.strokeStyle = primaryColor
-            ctx.fillStyle = primaryColor
-            ctx.beginPath()
-            ctx.arc(width/2, height/2, d._radius ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI)
-            ctx.stroke()
-            ctx.closePath()
-            ctx.restore()
-        }
-    }
     FluText{
-        text:(control.progress * 100).toFixed(0) + "%"
-        font.pixelSize: 10
+        text:(control.visualPosition * 100).toFixed(0) + "%"
         visible: {
             if(control.indeterminate){
                 return false
@@ -80,3 +71,4 @@ Rectangle {
         anchors.centerIn: parent
     }
 }
+

src/imports/FluentUI/Controls/FluRectangle.qml

@@ -5,7 +5,7 @@ import FluentUI
 
 Item{
     property var radius:[0,0,0,0]
-    property color color : "#FFFFFF"
+    property color color : FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
     property bool shadow: true
     default property alias contentItem: container.data
     id:control
@@ -40,27 +40,27 @@ Item{
         anchors.fill: parent
         visible: false
         onPaint: {
-            var ctx = getContext("2d");
-            var x = 0;
-            var y = 0;
-            var w = control.width;
-            var h = control.height;
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            ctx.save();
+            var ctx = getContext("2d")
+            var x = 0
+            var y = 0
+            var w = control.width
+            var h = control.height
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
+            ctx.save()
             ctx.beginPath();
-            ctx.moveTo(x + radius[0], y);
-            ctx.lineTo(x + w - radius[1], y);
-            ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1]);
-            ctx.lineTo(x + w, y + h - radius[2]);
-            ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2]);
-            ctx.lineTo(x + radius[3], y + h);
-            ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3]);
-            ctx.lineTo(x, y + radius[0]);
-            ctx.arcTo(x, y, x + radius[0], y, radius[0]);
-            ctx.closePath();
-            ctx.fillStyle = control.color;
-            ctx.fill();
-            ctx.restore();
+            ctx.moveTo(x + radius[0], y)
+            ctx.lineTo(x + w - radius[1], y)
+            ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1])
+            ctx.lineTo(x + w, y + h - radius[2])
+            ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2])
+            ctx.lineTo(x + radius[3], y + h)
+            ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3])
+            ctx.lineTo(x, y + radius[0])
+            ctx.arcTo(x, y, x + radius[0], y, radius[0])
+            ctx.closePath()
+            ctx.fillStyle = "#000000"
+            ctx.fill()
+            ctx.restore()
         }
     }
     OpacityMask {

src/imports/FluentUI/Controls/FluRemoteLoader.qml

@@ -21,11 +21,11 @@ FluStatusView {
         asynchronous: true
         onStatusChanged: {
             if(status === Loader.Error){
-                control.statusMode = FluStatusView.Error
+                control.statusMode = FluStatusViewType.Error
             }else if(status === Loader.Loading){
-                control.statusMode = FluStatusView.Loading
+                control.statusMode = FluStatusViewType.Loading
             }else{
-                control.statusMode = FluStatusView.Success
+                control.statusMode = FluStatusViewType.Success
             }
         }
     }

src/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -12,6 +12,16 @@ FluPage {
     property int topPadding: 0
     property int rightPadding: 10
     property int bottomPadding: 10
+    property alias color: status_view.color
+    property alias statusMode: status_view.statusMode
+    property alias loadingText: status_view.loadingText
+    property alias emptyText:status_view.emptyText
+    property alias errorText:status_view.errorText
+    property alias errorButtonText:status_view.errorButtonText
+    property alias loadingItem :status_view.loadingItem
+    property alias emptyItem : status_view.emptyItem
+    property alias errorItem :status_view.errorItem
+    signal errorClicked
     id:control
     FluText{
         id:text_title
@@ -28,9 +38,11 @@ FluPage {
             rightMargin: control.rightPadding
         }
     }
-    Flickable{
-        id:flickview
-        clip: true
+    FluStatusView{
+        id:status_view
+        color: "#00000000"
+        statusMode: FluStatusViewType.Success
+        onErrorClicked: control.errorClicked()
         anchors{
             left: parent.left
             right: parent.right
@@ -38,29 +50,30 @@ FluPage {
             bottom: parent.bottom
             bottomMargin: control.bottomPadding
         }
-        contentWidth: parent.width
-        contentHeight: container.height
-        ScrollBar.vertical: FluScrollBar {
-            anchors.right: flickview.right
-            anchors.rightMargin: 2
-        }
-        boundsBehavior: Flickable.StopAtBounds
-        anchors{
-            top: text_title.bottom
-            bottom: parent.bottom
-        }
-        ColumnLayout{
-            id:container
-            spacing: control.spacing
+        Flickable{
+            id:flickview
             clip: true
-            anchors{
-                left: parent.left
-                right: parent.right
-                top: parent.top
-                leftMargin: control.leftPadding
-                rightMargin: control.rightPadding
+            anchors.fill: parent
+            contentWidth: parent.width
+            contentHeight: container.height
+            ScrollBar.vertical: FluScrollBar {
+                anchors.right: flickview.right
+                anchors.rightMargin: 2
+            }
+            boundsBehavior: Flickable.StopAtBounds
+            ColumnLayout{
+                id:container
+                spacing: control.spacing
+                clip: true
+                anchors{
+                    left: parent.left
+                    right: parent.right
+                    top: parent.top
+                    leftMargin: control.leftPadding
+                    rightMargin: control.rightPadding
+                }
+                width: parent.width
             }
-            width: parent.width
         }
     }
 }

src/imports/FluentUI/Controls/FluSpinBox.qml

@@ -1,160 +1,157 @@
 import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 import FluentUI
 
-Rectangle{
-    readonly property string displayText : d._displayText
+T.SpinBox {
+    id: control
     property bool disabled: false
-    property int from: 0
-    property int to: 99
-    property var validator: IntValidator {
+    property color normalColor: FluTheme.dark ? Qt.rgba(56/255,56/255,56/255,1) : Qt.rgba(232/255,232/255,232/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(64/255,64/255,64/255,1) : Qt.rgba(224/255,224/255,224/255,1)
+    property color pressedColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(216/255,216/255,216/255,1)
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             up.implicitIndicatorHeight, down.implicitIndicatorHeight)
+    leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
+    rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+    enabled: !disabled
+    validator: IntValidator {
+        locale: control.locale.name
         bottom: Math.min(control.from, control.to)
         top: Math.max(control.from, control.to)
     }
-    id:control
-    implicitWidth: 200
-    implicitHeight: 34
-    radius: 4
-    color: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
-    border.width: 1
-    border.color: FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
-    QtObject{
-        id:d
-        property string _displayText: "0"
-    }
-    Component{
-        id:com_edit
-        FluTextBox{
-            rightPadding: 80
-            closeRightMargin: 55
-            disabled: control.disabled
-            validator: control.validator
-            text: d._displayText
-            Component.onCompleted: {
-                forceActiveFocus()
-            }
-            onCommit: {
-                var number = Number(text)
-                if(number>=control.from && number<=control.to){
-                    d._displayText = String(number)
-                }
-                edit_loader.sourceComponent = null
-            }
-            onActiveFocusChanged: {
-                if(!activeFocus){
-                    edit_loader.sourceComponent = null
-                }
-            }
-        }
-    }
-    FluTextBox{
-        id:text_number
-        anchors.fill: parent
-        readOnly: true
-        rightPadding: 80
-        disabled: control.disabled
+
+    contentItem: TextInput {
+        property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
+        property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+        property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+        property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
+        property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+        z: 2
         text: control.displayText
-        MouseArea{
+        clip: width < implicitWidth
+        padding: 6
+        font: control.font
+        color: {
+            if(!enabled){
+                return disableColor
+            }
+            return normalColor
+        }
+        selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+        selectedTextColor: color
+        horizontalAlignment: Qt.AlignHCenter
+        verticalAlignment: Qt.AlignVCenter
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: control.inputMethodHints
+        Rectangle{
+            width: parent.width
+            height: contentItem.activeFocus ? 3 : 1
+            anchors.bottom: parent.bottom
+            visible: contentItem.enabled
+            color: {
+                if(FluTheme.dark){
+                    contentItem.activeFocus ? FluTheme.primaryColor.lighter  : Qt.rgba(166/255,166/255,166/255,1)
+                }else{
+                    return contentItem.activeFocus ? FluTheme.primaryColor.dark  : Qt.rgba(183/255,183/255,183/255,1)
+                }
+            }
+            Behavior on height{
+                enabled: FluTheme.enableAnimation
+                NumberAnimation{
+                    duration: 83
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+    }
+
+    up.indicator: FluItem {
+        x: control.mirrored ? 0 : control.width - width
+        height: control.height
+        implicitWidth: 32
+        implicitHeight: 32
+        radius: [0,4,4,0]
+        Rectangle{
             anchors.fill: parent
-            onClicked: {
-                edit_loader.sourceComponent = com_edit
+            color: {
+                if(control.up.pressed){
+                    return control.pressedColor
+                }
+                if(control.up.hovered){
+                    return control.hoverColor
+                }
+                return control.normalColor
             }
         }
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: parent.width / 3
+            height: 2
+            color: enabled ? FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) : FluColors.Grey90
+        }
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 2
+            height: parent.width / 3
+            color: enabled ? FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) : FluColors.Grey90
+        }
     }
-    Loader{
-        id:edit_loader
-        anchors.fill: parent
-    }
-    FluIconButton{
-        id:btn_up
-        width: 20
-        height: 20
-        iconSize: 16
-        disabled: {
-            if(control.disabled===true){
-                return true
-            }
-            return Number(control.displayText) === control.to
-        }
-        iconSource: FluentIcons.ChevronUp
-        anchors{
-            verticalCenter: parent.verticalCenter
-            right: parent.right
-            rightMargin: 30
-        }
-        onClicked: {
-            d._displayText = String(Math.min(Number(d._displayText)+1,control.to))
-        }
-        MouseArea{
+
+
+    down.indicator: FluItem {
+        x: control.mirrored ? parent.width - width : 0
+        height: control.height
+        implicitWidth: 32
+        implicitHeight: 32
+        radius: [4,0,0,4]
+        Rectangle{
             anchors.fill: parent
-            onReleased: {
-                timer.stop()
-            }
-            TapHandler{
-                onTapped: {
-                    btn_up.clicked()
-                }
-                onCanceled: {
-                    timer.stop()
-                }
-                onLongPressed: {
-                    timer.isUp = true
-                    timer.start()
-                }
+            color: {
+                if(control.down.pressed){
+                    return control.pressedColor
+                }
+                if(control.down.hovered){
+                    return control.hoverColor
+                }
+                return normalColor
             }
         }
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: parent.width / 3
+            height: 2
+            color: enabled ? FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) : FluColors.Grey90
+        }
     }
-    FluIconButton{
-        id:btn_down
-        iconSource: FluentIcons.ChevronDown
-        width: 20
-        height: 20
-        disabled: {
-            if(control.disabled === true){
-                return true
+
+    background: Rectangle {
+        implicitWidth: 136
+        radius: 4
+        border.width: 1
+        border.color: {
+            if(contentItem.disabled){
+                return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
             }
-            return Number(control.displayText) === control.from
+            return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
         }
-        iconSize: 16
-        anchors{
-            verticalCenter: parent.verticalCenter
-            right: parent.right
-            rightMargin: 5
-        }
-        onClicked: {
-            d._displayText = String(Math.max(Number(d._displayText)-1,control.from))
-        }
-        MouseArea{
-            anchors.fill: parent
-            onReleased: {
-                timer.stop()
+        color: {
+            if(contentItem.disabled){
+                return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
             }
-            TapHandler{
-                onTapped: {
-                    btn_down.clicked()
-                }
-                onCanceled: {
-                    timer.stop()
-                }
-                onLongPressed: {
-                    timer.isUp = false
-                    timer.start()
-                }
+            if(contentItem.activeFocus){
+                return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
             }
-        }
-    }
-    Timer{
-        id:timer
-        property bool isUp : true
-        interval: 50
-        repeat: true
-        onTriggered: {
-            if(isUp){
-                btn_up.clicked()
-            }else{
-                btn_down.clicked()
+            if(contentItem.hovered){
+                return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
             }
+            return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
         }
     }
 }

src/imports/FluentUI/Controls/FluStatusView.qml

@@ -5,14 +5,8 @@ import FluentUI
 
 Item{
     id:control
-    enum StatusMode  {
-        Loading,
-        Empty,
-        Error,
-        Success
-    }
     default property alias content: container.data
-    property int statusMode: FluStatusView.Loading
+    property int statusMode: FluStatusViewType.Loading
     property string loadingText:"正在加载..."
     property string emptyText: "空空如也"
     property string errorText: "页面出错了.."
@@ -26,20 +20,20 @@ Item{
     Item{
         id:container
         anchors.fill: parent
-        visible: statusMode===FluStatusView.Success
+        visible: statusMode===FluStatusViewType.Success
     }
     Loader{
         id:loader
         anchors.fill: parent
-        visible: statusMode!==FluStatusView.Success
+        visible: statusMode!==FluStatusViewType.Success
         sourceComponent: {
-            if(statusMode === FluStatusView.Loading){
+            if(statusMode === FluStatusViewType.Loading){
                 return loadingItem
             }
-            if(statusMode === FluStatusView.Empty){
+            if(statusMode === FluStatusViewType.Empty){
                 return emptyItem
             }
-            if(statusMode === FluStatusView.Error){
+            if(statusMode === FluStatusViewType.Error){
                 return errorItem
             }
             return undefined
@@ -108,15 +102,15 @@ Item{
         }
     }
     function showSuccessView(){
-        statusMode = FluStatusView.Success
+        statusMode = FluStatusViewType.Success
     }
     function showLoadingView(){
-        statusMode = FluStatusView.Loading
+        statusMode = FluStatusViewType.Loading
     }
     function showEmptyView(){
-        statusMode = FluStatusView.Empty
+        statusMode = FluStatusViewType.Empty
     }
     function showErrorView(){
-        statusMode = FluStatusView.Error
+        statusMode = FluStatusViewType.Error
     }
 }

src/imports/FluentUI/Controls/FluTabView.qml

@@ -4,18 +4,8 @@ import QtQuick.Layouts
 import FluentUI
 
 Item {
-    enum TabWidthBehavior {
-        Equal,
-        SizeToContent,
-        Compact
-    }
-    enum CloseButtonVisibility{
-        Nerver,
-        Always,
-        OnHover
-    }
-    property int tabWidthBehavior : FluTabView.Equal
-    property int closeButtonVisibility : FluTabView.Always
+    property int tabWidthBehavior : FluTabViewType.Equal
+    property int closeButtonVisibility : FluTabViewType.Always
     property int itemWidth: 146
     property bool addButtonVisibility: true
     signal newPressed
@@ -91,13 +81,13 @@ Item {
                     property real timestamp: new Date().getTime()
                     height: tab_nav.height
                     width: {
-                        if(tabWidthBehavior === FluTabView.Equal){
+                        if(tabWidthBehavior === FluTabViewType.Equal){
                             return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
                         }
-                        if(tabWidthBehavior === FluTabView.SizeToContent){
+                        if(tabWidthBehavior === FluTabViewType.SizeToContent){
                             return itemWidth
                         }
-                        if(tabWidthBehavior === FluTabView.Compact){
+                        if(tabWidthBehavior === FluTabViewType.Compact){
                             return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index  ? itemWidth : 41 + item_btn_close.width
                         }
                         return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
@@ -233,13 +223,13 @@ Item {
                             text: model.text
                             Layout.leftMargin: 10
                             visible: {
-                                if(tabWidthBehavior === FluTabView.Equal){
+                                if(tabWidthBehavior === FluTabViewType.Equal){
                                     return true
                                 }
-                                if(tabWidthBehavior === FluTabView.SizeToContent){
+                                if(tabWidthBehavior === FluTabViewType.SizeToContent){
                                     return true
                                 }
-                                if(tabWidthBehavior === FluTabView.Compact){
+                                if(tabWidthBehavior === FluTabViewType.Compact){
                                     return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index
                                 }
                                 return false
@@ -256,9 +246,9 @@ Item {
                         width: visible ? 24 : 0
                         height: 24
                         visible: {
-                            if(closeButtonVisibility === FluTabView.Nerver)
+                            if(closeButtonVisibility === FluTabViewType.Nerver)
                                 return false
-                            if(closeButtonVisibility === FluTabView.OnHover)
+                            if(closeButtonVisibility === FluTabViewType.OnHover)
                                 return item_mouse_hove.containsMouse || item_btn_close.hovered
                             return true
                         }

src/imports/FluentUI/Controls/FluTableView.qml

@@ -322,7 +322,7 @@ Rectangle {
             property bool canceled: false
             readonly property var obj : columnSource[column]
             implicitWidth: column_text.implicitWidth + (cellPadding * 2)
-            implicitHeight: Math.max(header_horizontal.height, column_text.implicitHeight + (cellPadding * 2))
+            implicitHeight: Math.max(36, column_text.implicitHeight + (cellPadding * 2))
             color:{
                 d.selectionFlag
                 if(column_item_control_mouse.pressed){
@@ -436,7 +436,7 @@ Rectangle {
             id:item_control
             readonly property real cellPadding: 8
             property bool canceled: false
-            implicitWidth: Math.max(header_vertical.width, row_text.implicitWidth + (cellPadding * 2))
+            implicitWidth: Math.max(30, row_text.implicitWidth + (cellPadding * 2))
             implicitHeight: row_text.implicitHeight + (cellPadding * 2)
             color: {
                 d.selectionFlag

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -12,9 +12,9 @@ TextField{
     property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
     property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
     property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
-    property int closeRightMargin: icon_end.visible ? 25 : 5
+    property int iconRightMargin: icon_end.visible ? 25 : 5
+    property bool cleanEnabled: true
     id:control
-    width: 300
     padding: 8
     leftPadding: padding+2
     enabled: !disabled
@@ -41,6 +41,7 @@ TextField{
     rightPadding: icon_end.visible ? 50 : 30
     background: FluTextBoxBackground{
         inputItem: control
+        implicitWidth: 240
         FluIcon{
             id:icon_end
             iconSource: control.iconSource
@@ -74,6 +75,9 @@ TextField{
         width: 20
         height: 20
         visible: {
+            if(control.cleanEnabled === false){
+                return false
+            }
             if(control.readOnly)
                 return false
             return control.text !== ""
@@ -81,7 +85,7 @@ TextField{
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right
-            rightMargin: closeRightMargin
+            rightMargin: control.iconRightMargin
         }
         contentDescription:"清空"
         onClicked:{

src/imports/FluentUI/Controls/FluTextBoxBackground.qml

@@ -12,7 +12,7 @@ Rectangle{
         if(inputItem.disabled){
             return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
         }
-        if(inputItem.focus){
+        if(inputItem.activeFocus){
             return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
         }
         if(inputItem.hovered){
@@ -36,14 +36,14 @@ Rectangle{
     }
     Rectangle{
         width: parent.width
-        height: inputItem.focus ? 3 : 1
+        height: inputItem.activeFocus ? 3 : 1
         anchors.bottom: parent.bottom
         visible: !inputItem.disabled
         color: {
             if(FluTheme.dark){
-                inputItem.focus ? FluTheme.primaryColor.lighter  : Qt.rgba(166/255,166/255,166/255,1)
+                inputItem.activeFocus ? FluTheme.primaryColor.lighter  : Qt.rgba(166/255,166/255,166/255,1)
             }else{
-                return inputItem.focus ? FluTheme.primaryColor.dark  : Qt.rgba(183/255,183/255,183/255,1)
+                return inputItem.activeFocus ? FluTheme.primaryColor.dark  : Qt.rgba(183/255,183/255,183/255,1)
             }
         }
         Behavior on height{

src/imports/FluentUI/Controls/FluTimePicker.qml

@@ -5,15 +5,11 @@ import QtQuick.Window
 import FluentUI
 
 Rectangle {
-    enum HourFormat {
-        H,
-        HH
-    }
     property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property int hourFormat: FluTimePicker.H
-    property int isH: hourFormat === FluTimePicker.H
+    property int hourFormat: FluTimePickerType.H
+    property int isH: hourFormat === FluTimePickerType.H
     property var current
     id:control
     color: {
@@ -326,7 +322,7 @@ Rectangle {
                             const period = text_ampm.text
                             const date = new Date()
                             var hours24 = parseInt(hours);
-                            if(control.hourFormat === FluTimePicker.H){
+                            if(control.hourFormat === FluTimePickerType.H){
                                 if (hours === "12") {
                                     hours24 = (period === "上午") ? 0 : 12;
                                 } else {

src/imports/FluentUI/Controls/FluTour.qml

@@ -0,0 +1,178 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Shapes
+import QtQuick.Window
+import FluentUI
+
+Popup{
+    property var steps : []
+    property int targetMargins: 5
+    property Component nextButton: com_next_button
+    property Component prevButton: com_prev_button
+    property int index : 0
+    id:control
+    padding: 0
+    anchors.centerIn: Overlay.overlay
+    width: d.window?.width
+    height: d.window?.height
+    background: Item{}
+    contentItem: Item{}
+    onVisibleChanged: {
+        if(visible){
+            control.index = 0
+        }
+    }
+    onIndexChanged: {
+        canvas.requestPaint()
+    }
+    Component{
+        id:com_next_button
+        FluFilledButton{
+            text: isEnd ? "结束导览" :"下一步"
+            onClicked: {
+                if(isEnd){
+                    control.close()
+                }else{
+                    control.index = control.index + 1
+                }
+            }
+        }
+    }
+    Component{
+        id:com_prev_button
+        FluButton{
+            text: "上一步"
+            onClicked: {
+                control.index = control.index - 1
+            }
+        }
+    }
+    Item{
+        id:d
+        property var window: Window.window
+        property var pos:Qt.point(0,0)
+        property var step : steps[index]
+        property var target : step.target()
+    }
+    Connections{
+        target: d.window
+        function onWidthChanged(){
+            canvas.requestPaint()
+        }
+        function onHeightChanged(){
+            canvas.requestPaint()
+        }
+    }
+    Canvas{
+        id:canvas
+        anchors.fill: parent
+        onPaint: {
+            d.pos = d.target.mapToGlobal(0,0)
+            d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
+            var ctx = canvas.getContext("2d")
+            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height)
+            ctx.save()
+            ctx.fillStyle = "#88000000"
+            ctx.fillRect(0, 0, canvasSize.width, canvasSize.height)
+            ctx.globalCompositeOperation = 'destination-out'
+            ctx.fillStyle = 'black'
+            drawRoundedRect(Qt.rect(d.pos.x-control.targetMargins,d.pos.y-control.targetMargins, d.target.width+control.targetMargins*2, d.target.height+control.targetMargins*2),2,ctx)
+            ctx.restore()
+        }
+        function drawRoundedRect(rect, r, ctx) {
+            var ptA = Qt.point(rect.x + r, rect.y)
+            var ptB = Qt.point(rect.x + rect.width, rect.y)
+            var ptC = Qt.point(rect.x + rect.width, rect.y + rect.height)
+            var ptD = Qt.point(rect.x, rect.y + rect.height)
+            var ptE = Qt.point(rect.x, rect.y)
+            ctx.beginPath()
+            ctx.moveTo(ptA.x, ptA.y)
+            ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r)
+            ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r)
+            ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r)
+            ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r)
+            ctx.fill()
+            ctx.closePath()
+        }
+    }
+    FluArea{
+        id:layout_panne
+        radius: 5
+        width: 500
+        height: 88 + text_desc.height
+        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+        x: Math.min(Math.max(0,d.pos.x+d.target.width/2-width/2),d.window?.width-width)
+        y: d.pos.y+d.target.height+control.targetMargins + 15
+        border.width: 0
+        FluText{
+            text: d.step.title
+            font: FluTextStyle.BodyStrong
+            elide: Text.ElideRight
+            anchors{
+                top: parent.top
+                left: parent.left
+                topMargin: 15
+                leftMargin: 15
+                right: parent.right
+                rightMargin: 32
+            }
+        }
+        FluText{
+            id:text_desc
+            font: FluTextStyle.Body
+            wrapMode: Text.WrapAnywhere
+            maximumLineCount: 4
+            elide: Text.ElideRight
+            text: d.step.description
+            anchors{
+                top: parent.top
+                left: parent.left
+                right: parent.right
+                rightMargin: 15
+                topMargin: 42
+                leftMargin: 15
+            }
+        }
+        Loader{
+            id:loader_next
+            property bool isEnd: control.index === steps.length-1
+            sourceComponent: com_next_button
+            anchors{
+                top:text_desc.bottom
+                topMargin: 10
+                right: parent.right
+                rightMargin: 15
+            }
+        }
+        Loader{
+            id:loader_prev
+            visible: control.index !== 0
+            sourceComponent: com_prev_button
+            anchors{
+                right:loader_next.left
+                top: loader_next.top
+                rightMargin: 14
+            }
+        }
+        FluIconButton{
+            anchors{
+                right: parent.right
+                top: parent.top
+                margins: 10
+            }
+            width: 26
+            height: 26
+            iconSize: 12
+            iconSource : FluentIcons.ChromeClose
+            onClicked: {
+                control.close()
+            }
+        }
+    }
+    FluIcon{
+        iconSource: FluentIcons.FlickDown
+        color: layout_panne.color
+        x: d.pos.x+d.target.width/2-10
+        y: d.pos.y+d.target.height
+    }
+}

src/imports/FluentUI/Controls/FluTreeView.qml

@@ -5,12 +5,7 @@ import QtQuick.Controls
 import FluentUI
 
 Item {
-    enum TreeViewSelectionMode  {
-        None,
-        Single,
-        Multiple
-    }
-    property int selectionMode: FluTreeView.None
+    property int selectionMode: FluTreeViewType.None
     property var currentElement
     property var currentParentElement
     property var rootModel: tree_model.get(0).items
@@ -83,12 +78,12 @@ Item {
                     anchors.margins: 2
                     color:{
                         if(FluTheme.dark){
-                            if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
+                            if(item_layout.singleSelected && selectionMode === FluTreeViewType.Single){
                                 return Qt.rgba(62/255,62/255,62/255,1)
                             }
                             return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(62/255,62/255,62/255,1):Qt.rgba(0,0,0,0)
                         }else{
-                            if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
+                            if(item_layout.singleSelected && selectionMode === FluTreeViewType.Single){
                                 return Qt.rgba(0,0,0,0.06)
                             }
                             return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(0,0,0,0.03):Qt.rgba(0,0,0,0)
@@ -97,7 +92,7 @@ Item {
                     Rectangle{
                         width: 3
                         color:FluTheme.primaryColor.dark
-                        visible: item_layout.singleSelected && (selectionMode === FluTreeView.Single)
+                        visible: item_layout.singleSelected && (selectionMode === FluTreeViewType.Single)
                         radius: 3
                         height: 20
                         anchors{
@@ -115,10 +110,10 @@ Item {
                     }
                 }
                 function onClickItem(){
-                    if(selectionMode === FluTreeView.None){
+                    if(selectionMode === FluTreeViewType.None){
                         itemClicked(model)
                     }
-                    if(selectionMode === FluTreeView.Single){
+                    if(selectionMode === FluTreeViewType.Single){
                         currentElement = model
                         if(item_layout.parent.parent.parent.itemModel){
                             currentParentElement = item_layout.parent.parent.parent.itemModel
@@ -129,7 +124,7 @@ Item {
                         }
                         itemClicked(model)
                     }
-                    if(selectionMode === FluTreeView.Multiple){
+                    if(selectionMode === FluTreeViewType.Multiple){
 
                     }
                 }
@@ -144,7 +139,7 @@ Item {
                         id:item_layout_checkbox
                         text:""
                         checked: itemModel.multipSelected
-                        visible: selectionMode === FluTreeView.Multiple
+                        visible: selectionMode === FluTreeViewType.Multiple
                         Layout.leftMargin: 5
                         function refreshCheckBox(){
                             const stack = [tree_model.get(0)];

src/imports/FluentUI/Controls/FluVerticalHeaderView.qml

@@ -1,27 +0,0 @@
-import QtQuick
-import QtQuick.Templates as T
-import FluentUI
-
-T.VerticalHeaderView {
-    id: control
-    implicitWidth: Math.max(1, contentWidth)
-    implicitHeight: syncView ? syncView.height : 0
-    delegate: Rectangle {
-        readonly property real cellPadding: 8
-        implicitWidth: Math.max(control.width, text.implicitWidth + (cellPadding * 2))
-        implicitHeight: text.implicitHeight + (cellPadding * 2)
-        color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-        border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
-        FluText {
-            id: text
-            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
-                                        : model[control.textRole])
-                                   : modelData
-            width: parent.width
-            font.bold: true
-            height: parent.height
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-    }
-}

src/imports/FluentUI/Controls/FluWindow.qml

@@ -5,14 +5,9 @@ import QtQuick.Layouts
 import FluentUI
 
 Window {
-    enum LaunchMode {
-        Standard,
-        SingleTask,
-        SingleInstance
-    }
     default property alias content: container.data
     property bool closeDestory: true
-    property int launchMode: FluWindow.Standard
+    property int launchMode: FluWindowType.Standard
     property string route
     property var argument:({})
     property var pageRegister

src/imports/FluentUI/qmldir

@@ -1,11 +1,10 @@
-module FluentUI
+module FluentUI
 classname FluentUIPlugin
-designersupported
 typeinfo plugins.qmltypes
 
+FluAcrylic 1.0 Controls/FluAcrylic.qml
 FluAppBar 1.0 Controls/FluAppBar.qml
 FluArea 1.0 Controls/FluArea.qml
-FluAcrylic 1.0 Controls/FluAcrylic.qml
 FluAutoSuggestBox 1.0 Controls/FluAutoSuggestBox.qml
 FluBadge 1.0 Controls/FluBadge.qml
 FluBreadcrumbBar 1.0 Controls/FluBreadcrumbBar.qml
@@ -17,9 +16,9 @@ FluCheckBox 1.0 Controls/FluCheckBox.qml
 FluColorPicker 1.0 Controls/FluColorPicker.qml
 FluColorView 1.0 Controls/FluColorView.qml
 FluComboBox 1.0 Controls/FluComboBox.qml
-FluControl 1.0 Controls/FluControl.qml
 FluContentDialog 1.0 Controls/FluContentDialog.qml
 FluContentPage 1.0 Controls/FluContentPage.qml
+FluControl 1.0 Controls/FluControl.qml
 FluCopyableText 1.0 Controls/FluCopyableText.qml
 FluDatePicker 1.0 Controls/FluDatePicker.qml
 FluDivider 1.0 Controls/FluDivider.qml
@@ -30,15 +29,15 @@ FluFlipView 1.0 Controls/FluFlipView.qml
 FluFocusRectangle 1.0 Controls/FluFocusRectangle.qml
 FluIcon 1.0 Controls/FluIcon.qml
 FluIconButton 1.0 Controls/FluIconButton.qml
+FluImage 1.0 Controls/FluImage.qml
 FluInfoBar 1.0 Controls/FluInfoBar.qml
 FluItem 1.0 Controls/FluItem.qml
-FluImage 1.0 Controls/FluImage.qml
-FluMediaPlayer 1.0 Controls/FluMediaPlayer.qml
+FluItemDelegate 1.0 Controls/FluItemDelegate.qml
 FluMenu 1.0 Controls/FluMenu.qml
-FluMenuItem 1.0 Controls/FluMenuItem.qml
-FluMenuSeparator 1.0 Controls/FluMenuSeparator.qml
 FluMenuBar 1.0 Controls/FluMenuBar.qml
 FluMenuBarItem 1.0 Controls/FluMenuBarItem.qml
+FluMenuItem 1.0 Controls/FluMenuItem.qml
+FluMenuSeparator 1.0 Controls/FluMenuSeparator.qml
 FluMultilineTextBox 1.0 Controls/FluMultilineTextBox.qml
 FluNavigationView 1.0 Controls/FluNavigationView.qml
 FluObject 1.0 Controls/FluObject.qml
@@ -60,14 +59,16 @@ FluRadioButtons 1.0 Controls/FluRadioButtons.qml
 FluRatingControl 1.0 Controls/FluRatingControl.qml
 FluRectangle 1.0 Controls/FluRectangle.qml
 FluRemoteLoader 1.0 Controls/FluRemoteLoader.qml
-FluScrollablePage 1.0 Controls/FluScrollablePage.qml
 FluScrollBar 1.0 Controls/FluScrollBar.qml
+FluScrollIndicator 1.0 Controls/FluScrollIndicator.qml
+FluScrollablePage 1.0 Controls/FluScrollablePage.qml
 FluShadow 1.0 Controls/FluShadow.qml
 FluSlider 1.0 Controls/FluSlider.qml
 FluSpinBox 1.0 Controls/FluSpinBox.qml
 FluStatusView 1.0 Controls/FluStatusView.qml
-FluTableView 1.0 Controls/FluTableView.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
 FluTextBoxBackground 1.0 Controls/FluTextBoxBackground.qml
@@ -77,7 +78,7 @@ FluTimePicker 1.0 Controls/FluTimePicker.qml
 FluToggleButton 1.0 Controls/FluToggleButton.qml
 FluToggleSwitch 1.0 Controls/FluToggleSwitch.qml
 FluTooltip 1.0 Controls/FluTooltip.qml
+FluTour 1.0 Controls/FluTour.qml
 FluTreeView 1.0 Controls/FluTreeView.qml
 FluWindow 1.0 Controls/FluWindow.qml
-FluSingleton 1.0 Controls/FluSingleton.qml
 plugin fluentuiplugin