update

example/T_Awesome.qml

@@ -8,6 +8,10 @@ FluContentPage {
 
     title:"Awesome"
 
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+
     FluTextBox{
         id:text_box
         placeholderText: "请输入关键字"

example/T_Badge.qml

@@ -9,6 +9,9 @@ FluScrollablePage{
 
     title:"Badge"
 
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluArea{
         width: parent.width

example/T_Buttons.qml

@@ -9,6 +9,10 @@ FluScrollablePage{
 
     spacing: 20
 
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+
     FluText{
         Layout.topMargin: 20
         text:"支持Tab键切换焦点，空格键执行点击事件"

example/T_CalendarPicker.qml

@@ -7,6 +7,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"CalendarPicker"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluArea{
         width: parent.width

example/T_Carousel.qml

@@ -8,6 +8,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"Carousel"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluArea{
         width: parent.width

example/T_ColorPicker.qml

@@ -8,6 +8,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"ColorPicker"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluArea{
         width: parent.width

example/T_DatePicker.qml

@@ -7,7 +7,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"TimePicker"
-
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluArea{
         width: parent.width

example/T_Dialog.qml

@@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
 FluScrollablePage{
+
     title:"Dialog"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluContentDialog{
         id:dialog

example/T_Expander.qml

@@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
 FluScrollablePage{
+
     title:"Expander"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluExpander{
         headerText:"打开一个单选框"

example/T_InfoBar.qml

@@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
 FluScrollablePage{
+
     title:"InfoBar"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluButton{
         text:"Info"

example/T_MediaPlayer.qml

@@ -8,6 +8,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"MediaPlayer"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     onVisibleChanged: {
         if(visible){

example/T_Menu.qml

@@ -8,11 +8,13 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"Menu"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluButton{
         text:"左击菜单"
         Layout.topMargin: 20
-        Layout.leftMargin: 15
         onClicked:{
             menu.popup()
         }
@@ -22,7 +24,6 @@ FluScrollablePage{
     FluButton{
         text:"右击菜单"
         Layout.topMargin: 20
-        Layout.leftMargin: 15
         onClicked: {
             showSuccess("请按鼠标右击")
         }

example/T_MultiWindow.qml

@@ -7,6 +7,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"MultiWindow"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     property string password: ""
 

example/T_Progress.qml

@@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
 FluScrollablePage{
+
     title:"Progress"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluProgressBar{
         Layout.topMargin: 20

example/T_Rectangle.qml

@@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
 FluScrollablePage{
+
     title:"Rectangle"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     RowLayout{
         Layout.topMargin: 20

example/T_Slider.qml

@@ -8,16 +8,20 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"Slider"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluSlider{
         Layout.topMargin: 20
-        Layout.leftMargin: 15
         value: 50
+        Layout.leftMargin: 10
     }
     FluSlider{
         orientation:FluSlider.Vertical
         Layout.topMargin: 20
-        Layout.leftMargin: 15
+        Layout.leftMargin: 10
+        Layout.bottomMargin: 20
         value: 50
     }
 }

example/T_TabView.qml

@@ -7,6 +7,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"TabView"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     Component{
         id:com_page

example/T_TextBox.qml

@@ -8,6 +8,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"TextBox"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluTextBox{
         Layout.topMargin: 20

example/T_Theme.qml

@@ -8,6 +8,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"Theme"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     RowLayout{
         Layout.topMargin: 20

example/T_TimePicker.qml

@@ -7,7 +7,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"TimePicker"
-
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluArea{
         width: parent.width

example/T_ToggleSwitch.qml

@@ -8,6 +8,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"ToggleSwitch"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluToggleSwitch{
         Layout.topMargin: 20

example/T_Tooltip.qml

@@ -8,6 +8,9 @@ import FluentUI 1.0
 FluScrollablePage{
 
     title:"Tooltip"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     FluText{
         Layout.topMargin: 20

example/T_TreeView.qml

@@ -7,6 +7,9 @@ import FluentUI 1.0
 FluContentPage {
 
     title:"TreeView"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     function randomName() {
         var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]

example/T_Typography.qml

@@ -7,6 +7,9 @@ FluContentPage {
 
     title: "Typography"
     property int textSize: 13
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
 
     Component.onCompleted: {
         slider.seek(31)

example/page/MainPage.qml

@@ -9,14 +9,14 @@ import FluentUI 1.0
 FluWindow {
     id:rootwindow
     width: 860
-    height: 600
+    height: 640
     title: "FluentUI"
     minimumWidth: 520
     minimumHeight: 400
 
     FluAppBar{
         id:appbar
-        title: "FluentUI"
+        z:10
     }
 
     FluObject{
@@ -237,47 +237,13 @@ FluWindow {
         }
     }
 
-
     FluNavigationView{
         id:nav_view
-        anchors{
-            top: appbar.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-        items:original_items
-        footerItems:footer_items
-
-        actions:[
-            Image {
-                width: 30
-                height: 30
-                Layout.preferredWidth: 30
-                Layout.preferredHeight: 30
-                sourceSize: Qt.size(60,60)
-                source: "qrc:/res/image/logo_openai.png"
-                Layout.rightMargin: 5
-                MouseArea{
         anchors.fill: parent
-                    cursorShape: Qt.PointingHandCursor
+        items: original_items
-                    onClicked: {
+        footerItems:footer_items
-                        FluApp.navigate("/chat")
+        logo: "qrc:/res/image/favicon.ico"
-                    }
+        z: 11
-                }
-            },
-            FluText{
-                text:"夜间模式"
-                fontStyle: FluText.Body
-            },
-            FluToggleSwitch{
-                selected: FluTheme.isDark
-                clickFunc:function(){
-                    FluTheme.isDark = !FluTheme.isDark
-                }
-            }
-        ]
-
         Component.onCompleted: {
             nav_view.setCurrentIndex(1)
             nav_view.push("qrc:/T_Buttons.qml")

example/qml.qrc

@@ -46,5 +46,6 @@
         <file>T_Carousel.qml</file>
         <file>T_MediaPlayer.qml</file>
         <file>T_TabView.qml</file>
+        <file>res/image/favicon.ico</file>
     </qresource>
 </RCC>

src/FluTheme.cpp

@@ -16,7 +16,7 @@ FluTheme::FluTheme(QObject *parent)
     : QObject{parent}
 {
     primaryColor(FluColors::getInstance()->Blue());
-    textSize(13);
+    textSize(14);
     isNativeText(false);
     isFrameless(true);
     isDark(false);

src/controls/FluAppBar.qml

@@ -6,7 +6,7 @@ import FluentUI 1.0
 
 Rectangle{
 
-    property string title: "标题"
+    property string title: ""
     property color textColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
     property bool showDark: false
     property bool showFps: false
@@ -94,7 +94,19 @@ Rectangle{
             text:"最小化"
             radius: 0
             textColor: root.textColor
-            color:hovered ? "#20000000" : "#00000000"
+            color:{
+                if(FluTheme.isDark){
+                    if(hovered){
+                        return Qt.rgba(1,1,1,0.06)
+                    }
+                    return Qt.rgba(0,0,0,0)
+                }else{
+                    if(hovered){
+                        return Qt.rgba(0,0,0,0.06)
+                    }
+                    return Qt.rgba(0,0,0,0)
+                }
+            }
             onClicked: {
                 window.showMinimized()
             }
@@ -108,7 +120,19 @@ Rectangle{
                 return Window.Maximized === window.visibility
             }
             iconSource : isRestore  ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
-            color:hovered ? "#20000000" : "#00000000"
+            color:{
+                if(FluTheme.isDark){
+                    if(hovered){
+                        return Qt.rgba(1,1,1,0.06)
+                    }
+                    return Qt.rgba(0,0,0,0)
+                }else{
+                    if(hovered){
+                        return Qt.rgba(0,0,0,0.06)
+                    }
+                    return Qt.rgba(0,0,0,0)
+                }
+            }
             Layout.alignment: Qt.AlignVCenter
             visible: resizable
             radius: 0

src/controls/FluCalendarPicker.qml

@@ -63,6 +63,8 @@ Rectangle {
         id:popup
         height: container.height
         width: container.width
+        modal: true
+        dim:false
         background: FluCalendarView{
             id:container
             onDateClicked:

src/controls/FluColorPicker.qml

@@ -29,6 +29,8 @@ Button{
     }
     Popup{
         id:popup
+        modal: true
+        dim:false
         height: container.height
         width: container.width
         background: FluColorView{

src/controls/FluContentPage.qml

@@ -8,22 +8,38 @@ Item {
 
     property alias title: text_title.text
     default property alias content: container.data
+    property int leftPadding: 0
+    property int topPadding: 0
+    property int rightPadding: 0
+    property int bottomPadding: 0
 
-    id:root
+    id:control
 
     FluText{
         id:text_title
         fontStyle: FluText.TitleLarge
+        anchors{
+            top: parent.top
+            topMargin: control.topPadding
+            left: parent.left
+            right: parent.right
+            leftMargin: control.leftPadding
+            rightMargin: control.rightPadding
+        }
     }
 
     Item{
         clip: true
         id:container
         anchors{
+            left: parent.left
+            right: parent.right
             top: text_title.bottom
             bottom: parent.bottom
+            leftMargin: control.leftPadding
+            rightMargin: control.rightPadding
+            bottomMargin: control.bottomPadding
         }
-        width: parent.width
     }
 
 }

src/controls/FluDatePicker.qml

@@ -102,6 +102,8 @@ Rectangle {
         width: container.width
         height: container.height
         contentItem: Item{}
+        modal: true
+        dim:false
         background: Rectangle{
             id:container
             width: 300

src/controls/FluDivider.qml

@@ -5,4 +5,10 @@ Rectangle {
 
     color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
 
+    Behavior on color{
+        ColorAnimation {
+            duration: 300
+        }
+    }
+
 }

src/controls/FluMenu.qml

@@ -9,6 +9,9 @@ Menu {
     id: popup
     width: 140
     height: container.height
+    modal: true
+    dim:false
+    contentItem: Item{}
 
     background: Item {
         Rectangle{

src/controls/FluNavigationView.qml

@@ -6,18 +6,18 @@ import FluentUI 1.0
 
 Item {
 
+    property alias logo : image_logo.source
     property FluObject items
     property FluObject footerItems
     property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
-    property bool displaMinimalNav : false
+    property bool displaMinimalMenu : false
-    property alias actions: layout_actions.data
 
     id:root
 
     onDisplayModeChanged: {
         if(displayMode === FluNavigationView.Minimal){
             anim_navi.enabled = false
-            displaMinimalNav = false
+            displaMinimalMenu = false
             timer_anim_enable.restart()
         }
     }
@@ -85,6 +85,16 @@ Item {
                     leftMargin: 6
                     rightMargin: 6
                 }
+                Rectangle{
+                    width: 3
+                    height: 18
+                    radius: 1.5
+                    color: FluTheme.primaryColor.dark
+                    visible: nav_list.currentIndex === position && type===0
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                    }
+                }
                 MouseArea{
                     id:item_mouse
                     hoverEnabled: true
@@ -99,6 +109,7 @@ Item {
                         }else{
                             model.tap()
                         }
+                        displaMinimalMenu = false
                     }
                 }
                 color: {
@@ -136,7 +147,7 @@ Item {
     Item {
         id:nav_app_bar
         width: parent.width
-        height: 38
+        height: 50
         z:999
         RowLayout{
             height:parent.height
@@ -144,6 +155,8 @@ Item {
             FluIconButton{
                 iconSource: FluentIcons.ChromeBack
                 Layout.leftMargin: 5
+                Layout.preferredWidth: 40
+                Layout.preferredHeight: 40
                 Layout.alignment: Qt.AlignVCenter
                 disabled:  nav_swipe.depth === 1
                 iconSize: 13
@@ -157,37 +170,45 @@ Item {
                 }
             }
             FluIconButton{
+                id:btn_nav
                 iconSource: FluentIcons.GlobalNavButton
-                Layout.leftMargin: 5
                 iconSize: 15
+                Layout.preferredWidth: 40
+                Layout.preferredHeight: 40
                 visible: displayMode === FluNavigationView.Minimal
                 Layout.alignment: Qt.AlignVCenter
                 onClicked: {
-                    displaMinimalNav = !displaMinimalNav
+                    displaMinimalMenu = !displaMinimalMenu
-                }
                 }
             }
 
-        RowLayout{
+            Image{
-            id:layout_actions
+                id:image_logo
-            anchors{
+                Layout.preferredHeight: 20
-                right: parent.right
+                Layout.preferredWidth: 20
-                rightMargin: 14
+                Layout.leftMargin: {
-                verticalCenter: parent.verticalCenter
+                    if(btn_nav.visible){
+                        return 12
+                    }
+                    return 5
+                }
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluText{
+                Layout.alignment: Qt.AlignVCenter
+                text:"FluentUI"
+                Layout.leftMargin: 12
+                fontStyle: FluText.Body
             }
-            spacing: 5
         }
     }
 
     Item{
         anchors{
             left: displayMode === FluNavigationView.Minimal ? parent.left : layout_list.right
-            leftMargin: 10
             top: nav_app_bar.bottom
             right: parent.right
-            rightMargin: 10
             bottom: parent.bottom
-            bottomMargin: 20
         }
 
         StackView{
@@ -209,9 +230,9 @@ Item {
 
     MouseArea{
         anchors.fill: parent
-        enabled: (displayMode === FluNavigationView.Minimal && displaMinimalNav)
+        enabled: (displayMode === FluNavigationView.Minimal && displaMinimalMenu)
         onClicked: {
-            displaMinimalNav = false
+            displaMinimalMenu = false
         }
     }
 
@@ -225,7 +246,7 @@ Item {
         x: {
             if(displayMode !== FluNavigationView.Minimal)
                 return 0
-            return (displayMode === FluNavigationView.Minimal && displaMinimalNav)  ? 0 : -width
+            return (displayMode === FluNavigationView.Minimal && displaMinimalMenu)  ? 0 : -width
         }
         Behavior on x{
             id:anim_navi
@@ -233,6 +254,7 @@ Item {
                 duration: 150
             }
         }
+
         color: {
             if(displayMode === FluNavigationView.Minimal){
                 return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
@@ -248,13 +270,17 @@ Item {
             }
         }
 
+        border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
+        border.width:  displayMode === FluNavigationView.Minimal ? 1 : 0
+
         Item{
             id:layout_header
             width: layout_list.width
             y:nav_app_bar.height
-            height: 50
+            height: textbox_search.height
 
             FluAutoSuggestBox{
+                id:textbox_search
                 width: 280
                 anchors.centerIn: parent
                 iconSource: FluentIcons.Zoom

src/controls/FluScrollBar.qml

@@ -1,7 +1,39 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import QtQuick.Controls.impl 2.15
+import QtQuick.Templates 2.15 as T
 import FluentUI 1.0
 
-ScrollBar {
+T.ScrollBar {
+    id: control
+
+    property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
+    property color handleHoverColor: Qt.lighter(handleNormalColor)
+    property color handlePressColor: Qt.darker(handleNormalColor)
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 4
+    visible: control.policy !== T.ScrollBar.AlwaysOff
+    minimumSize: 0.3
+
+    contentItem: Rectangle {
+        implicitWidth: hovered || pressed ? 6 : 2
+        implicitHeight:  hovered || pressed ? 6 : 2
+        radius: width / 2
+        layer.samples: 4
+        layer.enabled: true
+        layer.smooth: true
+        color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
+        opacity:(control.policy === T.ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
+    }
+    Behavior on implicitWidth {
+        NumberAnimation{
+            duration: 150
+        }
+    }
 
 }

src/controls/FluScrollablePage.qml

@@ -9,28 +9,56 @@ Item {
     property alias title: text_title.text
     default property alias content: container.data
     property int spacing : 5
+    property int leftPadding: 0
+    property int topPadding: 0
+    property int rightPadding: 0
+    property int bottomPadding: 0
 
-    id:root
+    id:control
 
     FluText{
         id:text_title
         fontStyle: FluText.TitleLarge
+        anchors{
+            top: parent.top
+            topMargin: control.topPadding
+            left: parent.left
+            right: parent.right
+            leftMargin: control.leftPadding
+            rightMargin: control.rightPadding
+        }
     }
 
     Flickable{
+        id:flickview
         clip: true
-        width: parent.width
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: text_title.bottom
+            bottom: parent.bottom
+            bottomMargin: control.bottomPadding
+        }
         contentWidth: parent.width
         contentHeight: container.height
         boundsBehavior: Flickable.StopAtBounds
-        ScrollBar.vertical: ScrollBar { }
+        ScrollBar.vertical: FluScrollBar {
+        }
         anchors{
             top: text_title.bottom
             bottom: parent.bottom
         }
         ColumnLayout{
             id:container
-            spacing: root.spacing
+            spacing: control.spacing
+            clip: true
+            anchors{
+                left: parent.left
+                right: parent.right
+                top: parent.top
+                leftMargin: control.leftPadding
+                rightMargin: control.rightPadding
+            }
             width: parent.width
         }
     }

src/controls/FluTimePicker.qml

@@ -104,6 +104,8 @@ Rectangle {
         width: container.width
         height: container.height
         contentItem: Item{}
+        modal: true
+        dim:false
         background: Rectangle{
             id:container
             width: 300