update

2025-07-01 15:42:20 +08:00 · 2023-03-31 22:05:25 +08:00 · 2023-03-31 18:11:55 +08:00 · 2023-03-31 17:59:20 +08:00 · 2023-03-31 13:03:36 +08:00 · 2023-03-31 11:58:15 +08:00
109 changed files with 1564 additions and 1156 deletions
--- a/.github/workflows/macos.yml
+++ b/.github/workflows/macos.yml
@ -17,7 +17,7 @@ jobs:
    strategy:
      matrix:
        os: [macos-11.0]
-        qt_ver: [5.15.2]
+        qt_ver: [6.4.3]
        qt_arch: [clang_64]
    env:
      targetName: example
@ -30,10 +30,12 @@ jobs:
          sudo xcode-select --print-path
          sudo xcode-select --switch /Library/Developer/CommandLineTools       
      - name: Install Qt
-        uses: jurplel/install-qt-action@v2
+        uses: jurplel/install-qt-action@v3
        with:
          version: ${{ matrix.qt_ver }}
          cached: 'false'
+          arch: ${{ matrix.qt_arch }}
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
      - uses: actions/checkout@v2
        with:
          fetch-depth: 1
--- a/.github/workflows/ubuntu.yml
+++ b/.github/workflows/ubuntu.yml
@ -19,16 +19,18 @@ jobs:
    strategy:
      matrix:
        os: [ubuntu-20.04]
-        qt_ver: [5.15.2]
+        qt_ver: [6.4.3]
        qt_arch: [gcc_64]
    env:
      targetName: example
    steps:
      - name: Install Qt
-        uses: jurplel/install-qt-action@v2
+        uses: jurplel/install-qt-action@v3
        with:
          version: ${{ matrix.qt_ver }}
          cached: 'false'
+          arch: ${{ matrix.qt_arch }}
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
      - name: ubuntu install GL library
        run: sudo apt-get install -y libglew-dev libglfw3-dev qml-module-qtquick-controls qml-module-qtquick-controls2
      - uses: actions/checkout@v2
--- a/.github/workflows/windows.yml
+++ b/.github/workflows/windows.yml
@ -21,12 +21,7 @@ jobs:
      # 矩阵配置
      matrix:
        include:
-          # 5.15.2 参考 https://mirrors.cloud.tencent.com/qt/online/qtsdkrepository/windows_x86/desktop/qt5_5152/
-          - qt_ver: 5.15.2
-            qt_arch: win32_msvc2019
-            msvc_arch: x86
-            qt_arch_install: msvc2019
-          - qt_ver: 5.15.2          
+          - qt_ver: 6.4.3          
            qt_arch: win64_msvc2019_64
            msvc_arch: x64
            qt_arch_install: msvc2019_64          
@ -38,15 +33,12 @@ jobs:
      # 安装Qt
      - name: Install Qt
        # 使用外部action。这个action专门用来安装Qt
-        uses: jurplel/install-qt-action@v2
+        uses: jurplel/install-qt-action@v3
        with:
-          # Version of Qt to install
          version: ${{ matrix.qt_ver }}
-          # Target platform for build
-          # target: ${{ matrix.qt_target }}
          arch: ${{ matrix.qt_arch }}
          cached: 'false'
-          aqtversion: '==2.0.5'          
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
      # 拉取代码
      - uses: actions/checkout@v2
        with:
--- a/README.md
+++ b/README.md
@ -65,9 +65,9 @@

 # 部分效果预览

-## 一个聊天Demo，调用了ChatGPT的接口
+## 首页

-![](doc/preview/chatgpt.png)
+![](doc/preview/home.png)

 ## 各种Button按钮

--- a/doc/preview/home.png
+++ b/doc/preview/home.png
--- a/example/App.qml
+++ b/example/App.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI

 Window {
    id:app
@ -17,6 +16,7 @@ Window {
            "/about":"qrc:/page/AboutPage.qml",
            "/login":"qrc:/page/LoginPage.qml",
            "/chat":"qrc:/page/ChatPage.qml",
+            "/media":"qrc:/page/MediaPage.qml",
        }
        FluApp.initialRoute = "/"
        FluApp.run()
--- a/example/T_Awesome.qml
+++ b/example/T_Awesome.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 FluContentPage {

--- a/example/T_Badge.qml
+++ b/example/T_Badge.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

--- a/example/T_Buttons.qml
+++ b/example/T_Buttons.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{
    title:"Buttons"
@ -27,7 +27,6 @@ FluScrollablePage{
            disabled:text_button_switch.selected
            text:"Text Button"
            onClicked: {
-                console.debug(Screen.devicePixelRatio)
                showInfo("点击Text Button")
            }
            anchors{
--- a/example/T_CalendarPicker.qml
+++ b/example/T_CalendarPicker.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 FluScrollablePage{

--- a/example/T_Carousel.qml
+++ b/example/T_Carousel.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

--- a/example/T_CheckBox.qml
+++ b/example/T_CheckBox.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

@ -13,7 +13,11 @@ FluScrollablePage{

    FluCheckBox{
        Layout.topMargin: 20
-        Layout.leftMargin: 10
-        Layout.bottomMargin: 20
    }
+
+    FluCheckBox{
+        Layout.topMargin: 20
+        text:"Text"
+    }
+
 }
--- a/example/T_ColorPicker.qml
+++ b/example/T_ColorPicker.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 FluScrollablePage{

--- a/example/T_DatePicker.qml
+++ b/example/T_DatePicker.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 FluScrollablePage{

--- a/example/T_Dialog.qml
+++ b/example/T_Dialog.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

--- a/example/T_Expander.qml
+++ b/example/T_Expander.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 FluScrollablePage{

@ -46,13 +45,15 @@ FluScrollablePage{
        headerText:"打开一个滑动文本框"
        Item{
            anchors.fill: parent
-            ScrollView{
+            Flickable{
                id:scrollview
                width: parent.width
                height: parent.height
-                contentWidth: parent.width
+                contentWidth: width
+                contentHeight: text_info.height
+                ScrollBar.vertical: FluScrollBar {}
                FluText{
-                    id:test
+                    id:text_info
                    width: scrollview.width
                    wrapMode: Text.WrapAnywhere
                    padding: 14
--- a/example/T_Home.qml
+++ b/example/T_Home.qml
@ -1,8 +1,9 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import "qrc:///global/"
+import FluentUI

 FluScrollablePage{

@ -56,7 +57,6 @@ FluScrollablePage{
                bottom: parent.bottom
            }
            orientation: ListView.Horizontal
-            boundsBehavior: ListView.StopAtBounds
            height: 240
            model: model_header
            header: Item{height: 10;width: 10}
@ -101,7 +101,7 @@ FluScrollablePage{
                        }
                        FluText{
                            text: model.title
-                            fontStyle: FluText.BodyLarge
+                            fontStyle: FluText.Body
                            Layout.topMargin: 20
                            Layout.leftMargin: 20
                        }
@ -110,7 +110,7 @@ FluScrollablePage{
                            Layout.topMargin: 5
                            Layout.preferredWidth: 160
                            Layout.leftMargin: 20
-                            color: FluColors.Grey100
+                            color: FluColors.Grey120
                            font.pixelSize: 12
                            wrapMode: Text.WrapAnywhere
                        }
@ -142,44 +142,6 @@ FluScrollablePage{
        }
    }

-    ListModel{
-        id:model_added
-        ListElement{
-            title:"TabView"
-            icon:"qrc:/res/image/control/TabView.png"
-            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-        }
-        ListElement{
-            title:"MediaPlayer"
-            icon:"qrc:/res/image/control/MediaPlayerElement.png"
-            desc:"A control to display video and image content"
-        }
-    }
-
-    ListModel{
-        id:model_update
-        ListElement{
-            title:"Buttons"
-            icon:"qrc:/res/image/control/Button.png"
-             desc:"A control that responds to user input and raisesa Click event."
-        }
-        ListElement{
-            title:"InfoBar"
-            icon:"qrc:/res/image/control/InfoBar.png"
-             desc:"An inline message to display app-wide statuschange information."
-        }
-        ListElement{
-            title:"Slider"
-            icon:"qrc:/res/image/control/Slider.png"
-             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-        }
-        ListElement{
-            title:"CheckBox"
-            icon:"qrc:/res/image/control/Checkbox.png"
-             desc:"A control that a user can select or clear."
-        }
-    }
-
    Component{
        id:com_item
        Item{
@ -211,7 +173,7 @@ FluScrollablePage{
                    id:item_icon
                    height: 40
                    width: 40
-                    source: model.icon
+                    source: modelData.image
                    anchors{
                        left: parent.left
                        leftMargin: 20
@ -221,8 +183,8 @@ FluScrollablePage{

                FluText{
                    id:item_title
-                    text:model.title
-                    fontStyle: FluText.Subtitle
+                    text:modelData.title
+                    fontStyle: FluText.BodyStrong
                    anchors{
                        left: item_icon.right
                        leftMargin: 20
@ -232,10 +194,11 @@ FluScrollablePage{

                FluText{
                    id:item_desc
-                    text:model.desc
-                    color:FluColors.Grey100
+                    text:modelData.desc
+                    color:FluColors.Grey120
                    wrapMode: Text.WrapAnywhere
                    elide: Text.ElideRight
+                    fontStyle: FluText.Caption
                    maximumLineCount: 2
                    anchors{
                        left: item_title.left
@ -246,12 +209,25 @@ FluScrollablePage{
                    }
                }

+                Rectangle{
+                    height: 12
+                    width: 12
+                    radius:  6
+                    color: FluTheme.primaryColor.dark
+                    anchors{
+                        right: parent.right
+                        top: parent.top
+                        rightMargin: 14
+                        topMargin: 14
+                    }
+                }
+
                MouseArea{
                    id:item_mouse
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
-                        rootwindow.startPageByTitle(model.title)
+                        ItemsOriginal.startPageByItem(modelData)
                    }
                }
            }
@ -260,7 +236,7 @@ FluScrollablePage{

    FluText{
        text: "Recently added samples"
-        fontStyle: FluText.TitleLarge
+        fontStyle: FluText.Title
        Layout.topMargin: 20
        Layout.leftMargin: 20
    }
@ -270,14 +246,14 @@ FluScrollablePage{
        implicitHeight: contentHeight
        cellHeight: 120
        cellWidth: 320
-        boundsBehavior: GridView.StopAtBounds
-        model:model_added
+        model:ItemsOriginal.getRecentlyAddedData()
+        interactive: false
        delegate: com_item
    }

    FluText{
        text: "Recently updated samples"
-        fontStyle: FluText.TitleLarge
+        fontStyle: FluText.Title
        Layout.topMargin: 20
        Layout.leftMargin: 20
    }
@ -287,8 +263,8 @@ FluScrollablePage{
        implicitHeight: contentHeight
        cellHeight: 120
        cellWidth: 320
-        boundsBehavior: GridView.StopAtBounds
-        model: model_update
+        interactive: false
+        model: ItemsOriginal.getRecentlyUpdatedData()
        delegate: com_item
    }

--- a/example/T_InfoBar.qml
+++ b/example/T_InfoBar.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

--- a/example/T_MediaPlayer.qml
+++ b/example/T_MediaPlayer.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 FluScrollablePage{

@ -30,17 +29,13 @@ FluScrollablePage{
                verticalCenter: parent.verticalCenter
                left:parent.left
            }
-
            FluMediaPlayer{
                id:player
 //                source:"http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4"
                source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
 //                source:"http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4"
            }
-
+        }
    }
 }

-
-}
-
--- a/example/T_Menu.qml
+++ b/example/T_Menu.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

--- a/example/T_MultiWindow.qml
+++ b/example/T_MultiWindow.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

--- a/example/T_Progress.qml
+++ b/example/T_Progress.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

--- a/example/T_Rectangle.qml
+++ b/example/T_Rectangle.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.15
-import QtQuick.Window 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Window
+import FluentUI

 FluScrollablePage{

@ -53,7 +52,7 @@ FluScrollablePage{
    }
    FluText{
        text:"配合图片使用"
-        fontStyle: FluText.Subtitle
+        fontStyle: FluText.SubTitle
        Layout.topMargin: 20
    }
    RowLayout{
--- a/example/T_Slider.qml
+++ b/example/T_Slider.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

@ -17,7 +17,7 @@ FluScrollablePage{
        Layout.leftMargin: 10
    }
    FluSlider{
-        orientation:FluSlider.Vertical
+        vertical:true
        Layout.topMargin: 20
        Layout.leftMargin: 10
        Layout.bottomMargin: 20
--- a/example/T_TabView.qml
+++ b/example/T_TabView.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 FluScrollablePage{

@ -11,6 +11,8 @@ FluScrollablePage{
    rightPadding:10
    bottomPadding:20

+    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+
    Component{
        id:com_page
        Rectangle{
@ -19,26 +21,93 @@ FluScrollablePage{
        }
    }

-    Component.onCompleted: {
-        var colors = [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-        for(var i =0;i<colors.length;i++){
-            tab_view.appendTab("","Document "+i,com_page,colors[i].dark)
+    function newTab(){
+        tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
    }
+
+    Component.onCompleted: {
+        newTab()
+        newTab()
+        newTab()
    }

    FluArea{
        width: parent.width
        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        RowLayout{
+            spacing: 14
+            FluDropDownButton{
+                id:btn_tab_width_behavior
+                Layout.preferredWidth: 140
+                text:"Equal"
+                items:[
+                    FluMenuItem{
+                        text:"Equal"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.Equal
+                        }
+                    },
+                    FluMenuItem{
+                        text:"SizeToContent"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.SizeToContent
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Compact"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.Compact
+                        }
+                    }
+                ]
+            }
+            FluDropDownButton{
+                id:btn_close_button_visibility
+                text:"Always"
+                 Layout.preferredWidth: 120
+                items:[
+                    FluMenuItem{
+                        text:"Nerver"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.Nerver
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Always"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.Always
+                        }
+                    },
+                    FluMenuItem{
+                        text:"OnHover"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.OnHover
+                        }
+                    }
+                ]
+            }
+        }
+    }
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 5
        height: 400
        paddings: 10
-
-
        FluTabView{
            id:tab_view
+            onNewPressed:{
+                newTab()
+            }
+        }
    }

-
-    }
-
-
 }
--- a/example/T_TextBox.qml
+++ b/example/T_TextBox.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 FluScrollablePage{

@ -26,7 +25,7 @@ FluScrollablePage{
    }
    FluAutoSuggestBox{
        Layout.topMargin: 20
-        values:generateRandomNames(100)
+        items:generateRandomNames(100)
        placeholderText: "AutoSuggestBox"
        Layout.preferredWidth: 300
        disabled:toggle_switch.selected
@ -52,7 +51,7 @@ FluScrollablePage{
        }
        for (let i = 0; i < numNames; i++) {
            const name = generateRandomName();
-            names.push(name);
+            names.push({title:name});
        }
        return names;
    }
--- a/example/T_Theme.qml
+++ b/example/T_Theme.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

--- a/example/T_TimePicker.qml
+++ b/example/T_TimePicker.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 FluScrollablePage{

--- a/example/T_ToggleSwitch.qml
+++ b/example/T_ToggleSwitch.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluScrollablePage{

@ -17,6 +16,6 @@ FluScrollablePage{
    }
    FluToggleSwitch{
        Layout.topMargin: 20
-        text:"Disabled"
+        text:"Text"
    }
 }
--- a/example/T_Tooltip.qml
+++ b/example/T_Tooltip.qml
@ -1,9 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtGraphicalEffects 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 FluScrollablePage{

--- a/example/T_TreeView.qml
+++ b/example/T_TreeView.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 FluContentPage {

--- a/example/T_Typography.qml
+++ b/example/T_Typography.qml
@ -1,18 +1,18 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI

 FluContentPage {

    title: "Typography"
-    property int textSize: 13
+    property int textSize: FluTheme.textSize
    leftPadding:10
    rightPadding:10
    bottomPadding:20

    Component.onCompleted: {
-        slider.seek(31)
+        slider.seek(0)
    }

    ScrollView{
@ -44,13 +44,7 @@ FluContentPage {
                text:"Subtitle"
                padding: 0
                pixelSize: textSize
-                fontStyle: FluText.Subtitle
-            }
-            FluText{
-                text:"Body Large"
-                padding: 0
-                pixelSize: textSize
-                fontStyle: FluText.BodyLarge
+                fontStyle: FluText.SubTitle
            }
            FluText{
                text:"Body Strong"
@ -76,7 +70,7 @@ FluContentPage {

    FluSlider{
        id:slider
-        orientation:FluSlider.Vertical
+        vertical:true
        anchors{
            right: parent.right
            rightMargin: 45
@ -84,7 +78,7 @@ FluContentPage {
            topMargin: 30
        }
        onValueChanged:{
-            textSize = value/100*16+8
+            textSize = value/100*6+FluTheme.textSize
        }
    }

--- a/example/example.pro
+++ b/example/example.pro
@ -1,5 +1,5 @@
-QT += quick concurrent network multimedia
-CONFIG += c++11
+QT += quick quickcontrols2 concurrent network multimedia
+CONFIG += c++17
 DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT

 HEADERS += \
--- a/example/global/ItemsFooter.qml
+++ b/example/global/ItemsFooter.qml
@ -0,0 +1,21 @@
+pragma Singleton
+
+import QtQuick
+import FluentUI
+
+FluObject{
+    id:footer_items
+    FluPaneItemSeparator{}
+    FluPaneItem{
+        title:"意见反馈"
+        onTap:{
+            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
+        }
+    }
+    FluPaneItem{
+        title:"关于"
+        onTap:{
+            FluApp.navigate("/about")
+        }
+    }
+}
--- a/example/global/ItemsOriginal.qml
+++ b/example/global/ItemsOriginal.qml
@ -0,0 +1,299 @@
+pragma Singleton
+
+import QtQuick
+import FluentUI
+
+
+FluObject{
+
+    property var navigationView
+
+    FluPaneItem{
+        title:"Home"
+        icon:FluentIcons.Home
+        onTap:{
+            navigationView.push("qrc:/T_Home.qml")
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Basic input"
+        icon:FluentIcons.CheckboxComposite
+
+        FluPaneItem{
+            title:"Buttons"
+            image:"qrc:/res/image/control/Button.png"
+            recentlyUpdated:true
+            desc:"A control that responds to user input and raisesa Click event."
+            onTap:{
+                navigationView.push("qrc:/T_Buttons.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Slider"
+            image:"qrc:/res/image/control/Slider.png"
+            recentlyUpdated:true
+            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
+            onTap:{
+                navigationView.push("qrc:/T_Slider.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"CheckBox"
+            image:"qrc:/res/image/control/Checkbox.png"
+            recentlyUpdated:true
+            desc:"A control that a user can select or clear."
+            onTap:{
+                navigationView.push("qrc:/T_CheckBox.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"ToggleSwitch"
+            onTap:{
+                navigationView.push("qrc:/T_ToggleSwitch.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Form"
+        icon:FluentIcons.GridView
+        FluPaneItem{
+            title:"TextBox"
+            onTap:{
+                navigationView.push("qrc:/T_TextBox.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TimePicker"
+            onTap:{
+                navigationView.push("qrc:/T_TimePicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"DatePicker"
+            onTap:{
+                navigationView.push("qrc:/T_DatePicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"CalendarPicker"
+            onTap:{
+                navigationView.push("qrc:/T_CalendarPicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"ColorPicker"
+            onTap:{
+                navigationView.push("qrc:/T_ColorPicker.qml")
+            }
+        }
+    }
+
+
+    FluPaneItemExpander{
+        title:"Surface"
+        icon:FluentIcons.SurfaceHub
+
+        FluPaneItem{
+            title:"InfoBar"
+            image:"qrc:/res/image/control/InfoBar.png"
+            recentlyUpdated:true
+            desc:"An inline message to display app-wide statuschange information."
+            onTap:{
+                navigationView.push("qrc:/T_InfoBar.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Progress"
+            onTap:{
+                navigationView.push("qrc:/T_Progress.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Badge"
+            onTap:{
+                navigationView.push("qrc:/T_Badge.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Rectangle"
+            onTap:{
+                navigationView.push("qrc:/T_Rectangle.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Carousel"
+            onTap:{
+                navigationView.push("qrc:/T_Carousel.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Expander"
+            onTap:{
+                navigationView.push("qrc:/T_Expander.qml")
+            }
+        }
+
+    }
+
+    FluPaneItemExpander{
+        title:"Popus"
+        icon:FluentIcons.ButtonMenu
+        FluPaneItem{
+            title:"Dialog"
+            onTap:{
+                navigationView.push("qrc:/T_Dialog.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Tooltip"
+            onTap:{
+                navigationView.push("qrc:/T_Tooltip.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Menu"
+            onTap:{
+                navigationView.push("qrc:/T_Menu.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Navigation"
+        icon:FluentIcons.AllApps
+        FluPaneItem{
+            title:"TabView"
+            image:"qrc:/res/image/control/TabView.png"
+            recentlyAdded:true
+            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
+            onTap:{
+                navigationView.push("qrc:/T_TabView.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TreeView"
+            onTap:{
+                navigationView.push("qrc:/T_TreeView.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"MultiWindow"
+            onTap:{
+                navigationView.push("qrc:/T_MultiWindow.qml")
+            }
+        }
+    }
+
+
+    FluPaneItemExpander{
+        title:"Theming"
+        icon:FluentIcons.Brightness
+        FluPaneItem{
+            title:"Theme"
+            onTap:{
+                navigationView.push("qrc:/T_Theme.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Awesome"
+            onTap:{
+                navigationView.push("qrc:/T_Awesome.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Typography"
+            onTap:{
+                navigationView.push("qrc:/T_Typography.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Media"
+        icon:FluentIcons.Media
+        FluPaneItem{
+            title:"MediaPlayer"
+            image:"qrc:/res/image/control/MediaPlayerElement.png"
+            recentlyAdded:true
+            desc:"A control to display video and image content."
+            onTap:{
+                navigationView.push("qrc:/T_MediaPlayer.qml")
+            }
+        }
+    }
+
+    function getRecentlyAddedData(){
+        var arr = []
+        for(var i=0;i<children.length;i++){
+            var item = children[i]
+            if(item instanceof FluPaneItem && item.recentlyAdded){
+                arr.push(item)
+            }
+            if(item instanceof FluPaneItemExpander){
+                for(var j=0;j<item.children.length;j++){
+                    var itemChild = item.children[j]
+                    if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
+                        arr.push(itemChild)
+                    }
+                }
+            }
+        }
+        return arr
+    }
+
+    function getRecentlyUpdatedData(){
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem && item.recentlyUpdated){
+                arr.push(item)
+            }
+        }
+        return arr
+    }
+
+    function getSearchData(){
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem){
+                arr.push({title:item.title,key:item.key})
+            }
+        }
+        return arr
+    }
+
+    function startPageByItem(data){
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item =  items[i]
+            if(item.key === data.key){
+                if(navigationView.getCurrentIndex() === i){
+                    return
+                }
+                item.tap()
+                navigationView.setCurrentIndex(i)
+                if(item.parent){
+                item.parent.isExpand = true
+                }
+                return
+            }
+        }
+    }
+
+}
--- a/example/global/qmldir
+++ b/example/global/qmldir
@ -0,0 +1,2 @@
+singleton ItemsOriginal 1.0 ItemsOriginal.qml
+singleton ItemsFooter 1.0 ItemsFooter.qml
--- a/example/main.cpp
+++ b/example/main.cpp
@ -3,6 +3,7 @@
 #include <QQmlContext>
 #include <QDir>
 #include <QQuickWindow>
+#include <QQuickStyle>
 #include <QProcess>
 #include "ChatController.h"

@ -17,8 +18,7 @@ int main(int argc, char *argv[])
    QCoreApplication::setOrganizationName("ZhuZiChu");
    QCoreApplication::setOrganizationDomain("https://zhuzichu520.github.io");
    QCoreApplication::setApplicationName("FluentUI");
-    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
-//    QQuickWindow::setSceneGraphBackend(QSGRendererInterface::Software);
+    QQuickStyle::setStyle("Basic");
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;

--- a/example/page/AboutPage.qml
+++ b/example/page/AboutPage.qml
@ -1,7 +1,7 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI

 FluWindow {

@ -17,6 +17,7 @@ FluWindow {
    FluAppBar{
        id:appbar
        title:"关于"
+        width:parent.width
    }

    ColumnLayout{
@ -35,7 +36,7 @@ FluWindow {
                fontStyle: FluText.Title
            }
            FluText{
-                text:"v1.1.5"
+                text:"v1.1.7"
                fontStyle: FluText.Body
                Layout.alignment: Qt.AlignBottom
            }
--- a/example/page/ChatPage.qml
+++ b/example/page/ChatPage.qml
@ -1,9 +1,9 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
-import Controller 1.0
-import QtQuick.Dialogs 1.3
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI
+import Controller
+import QtQuick.Dialogs

 FluWindow {

@ -43,6 +43,7 @@ FluWindow {
    FluAppBar{
        id:appbar
        title:"ChatGPT"
+        width:parent.width
    }

    Component{
--- a/example/page/LoginPage.qml
+++ b/example/page/LoginPage.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import FluentUI

 FluWindow {

@ -17,13 +17,14 @@ FluWindow {

    onInitArgument:
        (argument)=>{
-            textbox_uesrname.text = argument.username
+            textbox_uesrname.updateText(argument.username)
            textbox_password.focus =  true
        }

    FluAppBar{
        id:appbar
        title:"登录"
+        width:parent.width
    }

    ColumnLayout{
@ -33,10 +34,9 @@ FluWindow {
            verticalCenter: parent.verticalCenter
        }

-
        FluAutoSuggestBox{
            id:textbox_uesrname
-            values:["Admin","User"]
+            items:[{title:"Admin"},{title:"User"}]
            placeholderText: "请输入账号"
            Layout.preferredWidth: 260
            Layout.alignment: Qt.AlignHCenter
--- a/example/page/MainPage.qml
+++ b/example/page/MainPage.qml
@ -1,10 +1,9 @@
-import QtQuick 2.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtGraphicalEffects 1.15
-
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Layouts
+import "qrc:///global/"
+import FluentUI

 FluWindow {
    id:rootwindow
@ -12,263 +11,40 @@ FluWindow {
    height: 640
    title: "FluentUI"
    minimumWidth: 520
-    minimumHeight: 400
+    minimumHeight: 460

    FluAppBar{
        id:appbar
        z:10
        showDark: true
+        width:parent.width
    }

-    FluObject{
-        id:original_items
-
-        FluPaneItem{
-            title:"Home"
-            icon:FluentIcons.Home
-            onTap:{
-                nav_view.push("qrc:/T_Home.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Inputs"
-        }
-
-        FluPaneItem{
-            title:"Buttons"
-            onTap:{
-                nav_view.push("qrc:/T_Buttons.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Slider"
-            onTap:{
-                nav_view.push("qrc:/T_Slider.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"CheckBox"
-            onTap:{
-                nav_view.push("qrc:/T_CheckBox.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"ToggleSwitch"
-            onTap:{
-                nav_view.push("qrc:/T_ToggleSwitch.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Form"
-        }
-
-        FluPaneItem{
-            title:"TextBox"
-            onTap:{
-                nav_view.push("qrc:/T_TextBox.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"TimePicker"
-            onTap:{
-                nav_view.push("qrc:/T_TimePicker.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"DatePicker"
-            onTap:{
-                nav_view.push("qrc:/T_DatePicker.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"CalendarPicker"
-            onTap:{
-                nav_view.push("qrc:/T_CalendarPicker.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"ColorPicker"
-            onTap:{
-                nav_view.push("qrc:/T_ColorPicker.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Surface"
-        }
-
-        FluPaneItem{
-            title:"InfoBar"
-            onTap:{
-                nav_view.push("qrc:/T_InfoBar.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Progress"
-            onTap:{
-                nav_view.push("qrc:/T_Progress.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Badge"
-            onTap:{
-                nav_view.push("qrc:/T_Badge.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Rectangle"
-            onTap:{
-                nav_view.push("qrc:/T_Rectangle.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Carousel"
-            onTap:{
-                nav_view.push("qrc:/T_Carousel.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Expander"
-            onTap:{
-                nav_view.push("qrc:/T_Expander.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Popus"
-        }
-
-        FluPaneItem{
-            title:"Dialog"
-            onTap:{
-                nav_view.push("qrc:/T_Dialog.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Tooltip"
-            onTap:{
-                nav_view.push("qrc:/T_Tooltip.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Menu"
-            onTap:{
-                nav_view.push("qrc:/T_Menu.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Navigation"
-        }
-
-        FluPaneItem{
-            title:"TabView"
-            onTap:{
-                nav_view.push("qrc:/T_TabView.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"TreeView"
-            onTap:{
-                nav_view.push("qrc:/T_TreeView.qml")
-            }
-        }
-
-
-        FluPaneItem{
-            title:"MultiWindow"
-            onTap:{
-                nav_view.push("qrc:/T_MultiWindow.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Theming"
-        }
-
-        FluPaneItem{
-            title:"Theme"
-            onTap:{
-                nav_view.push("qrc:/T_Theme.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Awesome"
-            onTap:{
-                nav_view.push("qrc:/T_Awesome.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Typography"
-            onTap:{
-                nav_view.push("qrc:/T_Typography.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Media"
-        }
-
-        FluPaneItem{
-            title:"MediaPlayer"
-            onTap:{
-                nav_view.push("qrc:/T_MediaPlayer.qml")
-            }
-        }
-
-    }
-
-    FluObject{
-        id:footer_items
-        FluPaneItemSeparator{}
-        FluPaneItem{
-            title:"意见反馈"
-            onTap:{
-                Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
-            }
-        }
-        FluPaneItem{
-            title:"关于"
-            onTap:{
-                FluApp.navigate("/about")
-            }
-        }
-    }

    FluNavigationView{
        id:nav_view
        anchors.fill: parent
-        items: original_items
-        footerItems:footer_items
+        items: ItemsOriginal
+        footerItems:ItemsFooter
        logo: "qrc:/res/image/favicon.ico"
        z: 11
+        title:"FluentUI"
+        autoSuggestBox:FluAutoSuggestBox{
+            width: 280
+            anchors.centerIn: parent
+            iconSource: FluentIcons.Zoom
+            items: ItemsOriginal.getSearchData()
+            placeholderText: "查找"
+            onItemClicked:
+                (data)=>{
+                    ItemsOriginal.startPageByItem(data)
+                }
+        }
        Component.onCompleted: {
+            ItemsOriginal.navigationView = nav_view
            nav_view.setCurrentIndex(0)
            nav_view.push("qrc:/T_Home.qml")
        }
    }

-    function startPageByTitle(title){
-        console.debug(title)
-        nav_view.startPageByTitle(title)
-    }
-
 }
--- a/example/page/MediaPage.qml
+++ b/example/page/MediaPage.qml
@ -0,0 +1,37 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+
+FluWindow {
+
+    width: 640
+    height: 480
+    minimumWidth: 640
+    minimumHeight: 480
+
+    title:"视频播放器"
+
+
+    FluAppBar{
+        id:appbar
+        title:"视频播放器"
+        width:parent.width
+    }
+
+
+    FluMediaPlayer{
+        id:player
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: appbar.bottom
+            bottom: parent.bottom
+        }
+        //                source:"http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4"
+        source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+        //                source:"http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4"
+    }
+
+
+}
--- a/example/qml.qrc
+++ b/example/qml.qrc
@ -149,5 +149,9 @@
        <file>res/image/control/WebView.png</file>
        <file>res/image/control/XamlUICommand.png</file>
        <file>T_CheckBox.qml</file>
+        <file>global/ItemsOriginal.qml</file>
+        <file>global/qmldir</file>
+        <file>global/ItemsFooter.qml</file>
+        <file>page/MediaPage.qml</file>
    </qresource>
 </RCC>
--- a/src/FluApp.cpp
+++ b/src/FluApp.cpp
@ -5,6 +5,7 @@
 #include <QQmlContext>
 #include <QQuickItem>
 #include <QTimer>
+#include <QUuid>
 #include <QClipboard>
 #include "Def.h"

@ -99,3 +100,7 @@ QJsonArray FluApp::awesomelist(const QString& keyword)
 void FluApp::clipText(const QString& text){
    QGuiApplication::clipboard()->setText(text);
 }
+
+QString FluApp::uuid(){
+    return QUuid::createUuid().toString();
+}
--- a/src/FluApp.h
+++ b/src/FluApp.h
@ -37,6 +37,8 @@ public:

    Q_INVOKABLE void clipText(const QString& text);

+    Q_INVOKABLE QString uuid();
+
 private:
    QMap<QString, QVariant> properties;
    static FluApp* m_instance;
--- a/src/FluTheme.cpp
+++ b/src/FluTheme.cpp
@ -17,7 +17,7 @@ FluTheme::FluTheme(QObject *parent)
 {
    primaryColor(FluColors::getInstance()->Blue());
    textSize(13);
-    nativeText(false);
+    nativeText(true);
    frameless(true);
    dark(false);
 }
--- a/src/Fluent.cpp
+++ b/src/Fluent.cpp
@ -32,6 +32,8 @@ void Fluent::registerTypes(const char *uri){

    qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
    qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
+
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander");
    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");
    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluBadge.qml"),uri,major,minor,"FluBadge");
--- a/src/FluentUI.pro
+++ b/src/FluentUI.pro
@ -1,5 +1,5 @@
 QT          += qml quick svg
-CONFIG      += plugin c++11
+CONFIG      += plugin c++17
 TEMPLATE    = lib
 TARGET      = FluentUI
 TARGET      = $$qtLibraryTarget($$TARGET)
--- a/src/colorpicker/ColorPicker.qml
+++ b/src/colorpicker/ColorPicker.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
 import "content"

 Rectangle {
--- a/src/colorpicker/content/Checkerboard.qml
+++ b/src/colorpicker/content/Checkerboard.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 Grid {
    id: root
    property int cellSide: 5
--- a/src/colorpicker/content/ColorSlider.qml
+++ b/src/colorpicker/content/ColorSlider.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick

 Item {
    property int cursorHeight: 7
--- a/src/colorpicker/content/NumberBox.qml
+++ b/src/colorpicker/content/NumberBox.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick

 Row {
    property alias  caption: captionBox.text
--- a/src/colorpicker/content/PanelBorder.qml
+++ b/src/colorpicker/content/PanelBorder.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick

 Rectangle {
    width : 40; height : 15; radius: 2
--- a/src/colorpicker/content/SBPicker.qml
+++ b/src/colorpicker/content/SBPicker.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick

 Item {
    id: root
@ -48,22 +48,15 @@ Item {
        anchors.fill: parent
        x: r
        y: r
+        preventStealing: true
        function handleMouse(mouse) {
            if (mouse.buttons & Qt.LeftButton) {
-
                pickerCursor.x = Math.max(0,Math.min(mouse.x - r,width-2*r));
                pickerCursor.y = Math.max(0,Math.min(mouse.y - r,height-2*r));
-
-
-//                pickerCursor.x = Math.max(-r,Math.min(mouse.x - r,width+r));
-//                pickerCursor.y = Math.max(-r,Math.min(mouse.y - r,height+r));
-
-//                pickerCursor.x = Math.max(0, Math.min(width,  mouse.x) - 2 * r);
-//                pickerCursor.y = Math.max(0, Math.min(height, mouse.y) - 2 * r);
            }
        }
-        onPositionChanged: handleMouse(mouse)
-        onPressed: handleMouse(mouse)
+        onPositionChanged:(mouse)=> handleMouse(mouse)
+        onPressed:(mouse)=> handleMouse(mouse)
    }
 }

--- a/src/controls/FluAppBar.qml
+++ b/src/controls/FluAppBar.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Window 2.15
-import QtQuick.Layouts 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Window
+import QtQuick.Layouts
+import FluentUI

 Rectangle{

@ -23,11 +23,7 @@ Rectangle{
    color: Qt.rgba(0,0,0,0)
    visible: FluTheme.frameless
    height: visible ? 30 : 0
-    width: {
-        if(parent==null)
-            return 200
-        return parent.width
-    }
+    clip: true
    z: 65535

    TapHandler {
@ -59,13 +55,6 @@ Rectangle{
        height: root.height
        spacing: 0

-        TFpsMonitor{
-            Layout.alignment: Qt.AlignVCenter
-            Layout.rightMargin: 20
-            Layout.topMargin: 5
-            color:root.textColor
-            visible: showFps
-        }

        RowLayout{
            Layout.alignment: Qt.AlignVCenter
@ -75,7 +64,6 @@ Rectangle{
            FluText{
                text:"夜间模式"
                color:root.textColor
-                fontStyle: FluText.Caption
            }
            FluToggleSwitch{
                selected: FluTheme.dark
--- a/src/controls/FluArea.qml
+++ b/src/controls/FluArea.qml
@ -1,5 +1,5 @@
-import QtQuick 2.15
-import FluentUI 1.0
+import QtQuick
+import FluentUI

 Rectangle {

--- a/src/controls/FluAutoSuggestBox.qml
+++ b/src/controls/FluAutoSuggestBox.qml
@ -1,16 +1,20 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import FluentUI

 TextField{

-    property var values:[]
+    property var items:[]
    property int fontStyle: FluText.Body
    property int pixelSize : FluTheme.textSize
    property int iconSource: 0
    property bool disabled: false
-    signal itemClicked(string data)
-
+    signal itemClicked(var data)
+    signal handleClicked
+    QtObject{
+        id:d
+        property bool flagVisible: true
+    }
    id:input
    width: 300
    enabled: !disabled
@ -20,13 +24,7 @@ TextField{
        }
        return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
    }
-    selectionColor: {
-        if(FluTheme.dark){
-            return FluTheme.primaryColor.lighter
-        }else{
-            return FluTheme.primaryColor.dark
-        }
-    }
+    selectionColor: FluTheme.primaryColor.lightest
    renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
    placeholderTextColor: {
        if(disabled){
@ -39,20 +37,14 @@ TextField{
    }
    rightPadding: icon_right.visible ? 50 : 30
    selectByMouse: true
-
    Keys.onUpPressed: {
        list_view.currentIndex = Math.max(list_view.currentIndex-1,0)
    }
-
    Keys.onDownPressed: {
        list_view.currentIndex = Math.min(list_view.currentIndex+1,list_view.count-1)
    }
-
-    signal handleClicked
    Keys.onEnterPressed:handleClicked()
    Keys.onReturnPressed:handleClicked()
-
-
    font.bold: {
        switch (fontStyle) {
        case FluText.Display:
@ -61,10 +53,8 @@ TextField{
            return true
        case FluText.Title:
            return true
-        case FluText.Subtitle:
+        case FluText.SubTitle:
            return true
-        case FluText.BodyLarge:
-            return false
        case FluText.BodyStrong:
            return true
        case FluText.Body:
@ -78,27 +68,23 @@ TextField{
    font.pixelSize: {
        switch (fontStyle) {
        case FluText.Display:
-            return input.pixelSize * 4
+            return text.pixelSize * 4.857
        case FluText.TitleLarge:
-            return input.pixelSize * 2
+            return text.pixelSize * 2.857
        case FluText.Title:
-            return input.pixelSize * 1.5
-        case FluText.Subtitle:
-            return input.pixelSize * 0.9
-        case FluText.BodyLarge:
-            return input.pixelSize * 1.1
-        case FluText.BodyStrong:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 2
+        case FluText.SubTitle:
+            return text.pixelSize * 1.428
        case FluText.Body:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
        case FluText.Caption:
-            return input.pixelSize * 0.8
+            return text.pixelSize * 0.857
        default:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
        }
    }
-    background: FluTextBoxBackground{
-        inputItem: input

    FluIconButton{
        iconSource:FluentIcons.ChromeClose
@ -117,6 +103,10 @@ TextField{
        }
    }

+    background: FluTextBoxBackground{
+        inputItem: input
+
+
        FluIcon{
            id:icon_right
            iconSource: input.iconSource
@ -137,10 +127,8 @@ TextField{

    Popup{
        id:input_popup
-        visible: input.focus
        y:input.height
-        modal: true
-        dim:false
+        focus: false
        enter: Transition {
            NumberAnimation {
                property: "y"
@ -155,9 +143,6 @@ TextField{
                duration: 150
            }
        }
-        onClosed: {
-            input.focus = false
-        }
        onVisibleChanged: {
            if(visible){
                list_view.currentIndex = -1
@ -173,9 +158,7 @@ TextField{
            height: 38*Math.min(Math.max(list_view.count,1),8)
            ListView{
                id:list_view
-                signal closePopup
                anchors.fill: parent
-                boundsBehavior: ListView.StopAtBounds
                clip: true
                currentIndex: -1
                ScrollBar.vertical: FluScrollBar {}
@ -212,16 +195,11 @@ TextField{
                                target: input
                                function onHandleClicked(){
                                    if((list_view.currentIndex === index)){
-                                        mouse_area.handleClick()
+                                        handleClick(modelData)
                                    }
                                }
                            }
-                            onClicked: handleClick()
-                            function handleClick(){
-                                input_popup.close()
-                                input.itemClicked(modelData)
-                                input.text = modelData
-                            }
+                            onClicked: handleClick(modelData)
                        }
                        Rectangle{
                            width: 3
@ -236,53 +214,81 @@ TextField{
                        }
                    }
                    contentItem: FluText{
-                        text:modelData
+                        text:modelData.title
                        anchors{
                            verticalCenter: parent.verticalCenter
                        }
                    }
-
-                }
-                //                Item{
-                //                    height: 38
-                //                    width: input.width
-                //                    Rectangle{
-                //                        anchors.fill: parent
-                //                        anchors.topMargin: 2
-                //                        anchors.bottomMargin: 2
-                //                        anchors.leftMargin: 5
-                //                        anchors.rightMargin: 5
-
-                //                        radius: 3
-                //                        MouseArea{
-                //                            id:item_mouse
-                //                            anchors.fill: parent
-                //                            hoverEnabled: true
-                //                            onClicked: {
-                //                                input_popup.close()
-                //                                input.itemClicked(modelData)
-                //                                input.text = modelData
-                //                            }
-                //                        }
-
-                //                    }
-                //                }
                }
            }
        }
+    }
+
+    function handleClick(modelData){
+        input_popup.visible = false
+        input.itemClicked(modelData)
+        updateText(modelData.title)
+    }
+
+    function updateText(text){
+        d.flagVisible = false
+        input.text = text
+        d.flagVisible = true
+    }

    onTextChanged: {
        searchData()
+        if(d.flagVisible){
+            input_popup.visible = true
+        }
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+        onTapped: input.echoMode !== TextInput.Password && menu.popup()
+    }
+
+    FluMenu{
+        id:menu
+        focus: false
+        FluMenuItem{
+            text: "剪切"
+            visible: input.text !== ""
+            onClicked: {
+                input.cut()
+            }
+        }
+        FluMenuItem{
+            text: "复制"
+            visible: input.selectedText !== ""
+            onClicked: {
+                input.copy()
+            }
+        }
+        FluMenuItem{
+            text: "粘贴"
+            visible: input.canPaste
+            onClicked: {
+                input.paste()
+            }
+        }
+        FluMenuItem{
+            text: "全选"
+            visible: input.text !== ""
+            onClicked: {
+                input.selectAll()
+            }
+        }
    }

    function searchData(){
        var result = []
-        if(values==null){
+        if(items==null){
            list_view.model = result
            return
        }
-        values.map(function(item){
-            if(item.indexOf(input.text)!==-1){
+        items.map(function(item){
+            if(item.title.indexOf(input.text)!==-1){
                result.push(item)
            }
        })
--- a/src/controls/FluBadge.qml
+++ b/src/controls/FluBadge.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick

 Rectangle{

--- a/src/controls/FluButton.qml
+++ b/src/controls/FluButton.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import FluentUI

 Button {

--- a/src/controls/FluCalendarPicker.qml
+++ b/src/controls/FluCalendarPicker.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 Rectangle {

@ -50,7 +50,7 @@ Rectangle {
    FluIcon{
        iconSource: FluentIcons.Calendar
        iconSize: 14
-        color: text_date.color
+        iconColor: text_date.color
        anchors{
            verticalCenter: parent.verticalCenter
            right: parent.right
@ -59,7 +59,7 @@ Rectangle {
    }


-    Popup{
+    Menu{
        id:popup
        height: container.height
        width: container.width
@ -79,7 +79,9 @@ Rectangle {
                duration: 150
            }
        }
-        background: FluCalendarView{
+        contentItem: Item{
+            anchors.fill: parent
+            FluCalendarView{
                id:container
                onDateClicked:
                    (date)=>{
@ -90,7 +92,8 @@ Rectangle {
                        text_date.text = year+"-"+(month+1)+"-"+day
                    }
            }
-        contentItem: Item{}
+        }
+        background: Item{}
        function showPopup() {
            var pos = root.mapToItem(null, 0, 0)
            if(window.height>pos.y+root.height+popup.height){
--- a/src/controls/FluCalendarView.qml
+++ b/src/controls/FluCalendarView.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import FluentUI

 Item {

--- a/src/controls/FluCarousel.qml
+++ b/src/controls/FluCarousel.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import FluentUI

 Item {

--- a/src/controls/FluCheckBox.qml
+++ b/src/controls/FluCheckBox.qml
@ -1,7 +1,7 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI

 Button {

@ -73,16 +73,28 @@ Button {
                }
                return normalColor
            }
+            Behavior on color {
+                ColorAnimation{
+                    duration: 150
+                }
+            }
            FluIcon {
                anchors.centerIn: parent
                iconSource: FluentIcons.AcceptMedium
                iconSize: 15
                visible: selected
-                color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                Behavior on visible {
+                    NumberAnimation{
+                        duration: 150
+                    }
+                }
            }
        }
        FluText{
            text: control.text
+            Layout.leftMargin: 5
+            visible: text !== ""
        }
    }
 }
--- a/src/controls/FluColorPicker.qml
+++ b/src/controls/FluColorPicker.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI


 Button{
@ -27,15 +27,19 @@ Button{
    onClicked: {
        popup.showPopup()
    }
-    Popup{
+    Menu{
        id:popup
        modal: true
        dim:false
        height: container.height
        width: container.width
-        background: FluColorView{
+        contentItem: Item{
+            anchors.fill: parent
+            FluColorView{
                id:container
            }
+        }
+        background:Item{}
        enter: Transition {
            NumberAnimation {
                property: "y"
@ -50,7 +54,6 @@ Button{
                duration: 150
            }
        }
-        contentItem: Item{}
        function showPopup() {
            var pos = control.mapToItem(null, 0, 0)
            if(window.height>pos.y+control.height+popup.height){
--- a/src/controls/FluColorView.qml
+++ b/src/controls/FluColorView.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 import "../colorpicker"

 Item {
--- a/src/controls/FluComboBox.qml
+++ b/src/controls/FluComboBox.qml
@ -1,5 +1,5 @@
-import QtQuick 2.15
-import FluentUI 1.0
+import QtQuick
+import FluentUI

 Item {

--- a/src/controls/FluContentDialog.qml
+++ b/src/controls/FluContentDialog.qml
@ -1,7 +1,7 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.15
-import QtQuick.Window 2.15
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Window

 Popup {
    id: popup
@ -17,11 +17,11 @@ Popup {
            return 400
        return  Math.min(Window.window.width,400)
    }
-
    modal:true
    anchors.centerIn: Overlay.overlay
    closePolicy: Popup.CloseOnEscape
-    background: Rectangle {
+    background:Item{}
+    contentItem: Rectangle {
        id:layout_content
        implicitWidth:minWidth
        implicitHeight: text_title.height + text_message.height + layout_actions.height
--- a/src/controls/FluContentPage.qml
+++ b/src/controls/FluContentPage.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 Item {

--- a/src/controls/FluDatePicker.qml
+++ b/src/controls/FluDatePicker.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI

 Rectangle {

@ -97,12 +97,11 @@ Rectangle {
        text:"日"
    }

-    Popup{
+    Menu{
        id:popup
-        width: container.width
-        height: container.height
-        contentItem: Item{}
        modal: true
+        width: 300
+        height: 340
        dim:false
        enter: Transition {
            NumberAnimation {
@ -118,12 +117,12 @@ Rectangle {
                duration: 150
            }
        }
-        background: Rectangle{
+        background:Item{}
+        contentItem: Rectangle{
            id:container
-            width: 300
            radius: 4
+            anchors.fill: parent
            color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
-            height: 340
            MouseArea{
                anchors.fill: parent
            }
@ -337,9 +336,7 @@ Rectangle {
                        popup.close()
                    }
                }
-
            }
-
        }
        y:35
        function showPopup() {
--- a/src/controls/FluDivider.qml
+++ b/src/controls/FluDivider.qml
@ -1,5 +1,5 @@
-import QtQuick 2.15
-import FluentUI 1.0
+import QtQuick
+import FluentUI

 Rectangle {

--- a/src/controls/FluDropDownButton.qml
+++ b/src/controls/FluDropDownButton.qml
@ -1,7 +1,7 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Window
+import FluentUI

 Button {

@ -44,7 +44,7 @@ Button {
                rightMargin: 10
                verticalCenter: parent.verticalCenter
            }
-            color:title.color
+            iconColor:title.color
        }

    }
--- a/src/controls/FluExpander.qml
+++ b/src/controls/FluExpander.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import FluentUI

 Item {

@ -51,15 +51,22 @@ Item {
                if(root_mouse.containsMouse){
                    return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
                }
-                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+                return FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
            }
-            iconSize: 15
-            iconSource: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
            onClicked: {
                expand = !expand
            }
+            contentItem: FluIcon{
+                rotation: expand?0:180
+                iconSource:FluentIcons.ChevronUp
+                iconSize: 15
+                Behavior on rotation {
+                    NumberAnimation{
+                        duration: 150
+                    }
+                }
+            }
        }
-
    }


--- a/src/controls/FluFilledButton.qml
+++ b/src/controls/FluFilledButton.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import FluentUI

 Button {

--- a/src/controls/FluFocusRectangle.qml
+++ b/src/controls/FluFocusRectangle.qml
@ -1,5 +1,5 @@
-import QtQuick 2.15
-import FluentUI 1.0
+import QtQuick
+import FluentUI

 Item {

--- a/src/controls/FluIcon.qml
+++ b/src/controls/FluIcon.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick

 Text {

--- a/src/controls/FluIconButton.qml
+++ b/src/controls/FluIconButton.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import FluentUI

 Button {

--- a/src/controls/FluInfoBar.qml
+++ b/src/controls/FluInfoBar.qml
@ -1,5 +1,5 @@
-import QtQuick 2.15
-import FluentUI 1.0
+import QtQuick
+import FluentUI

 FluObject {
    id:infoBar
@ -178,7 +178,7 @@ FluObject {
                        return FluentIcons.FA_info_circle
                    }
                    iconSize:20
-                    color: {
+                    iconColor: {
                        if(FluTheme.dark){
                            switch(_super.type){
                            case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);
@ -208,23 +208,23 @@ FluObject {
        }
    }

-    function showSuccess(text,duration,moremsg){
+    function showSuccess(text,duration=1000,moremsg){
        mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : "");
    }

-    function showInfo(text,duration,moremsg){
+    function showInfo(text,duration=1000,moremsg){
        mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : "");
    }

-    function showWarning(text,duration,moremsg){
+    function showWarning(text,duration=1000,moremsg){
        mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : "");
    }

-    function showError(text,duration,moremsg){
+    function showError(text,duration=1000,moremsg){
        mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : "");
    }

-    function showCustom(itemcomponent,duration){
+    function showCustom(itemcomponent,duration=1000){
        mcontrol.createCustom(itemcomponent,duration);
    }

--- a/src/controls/FluItem.qml
+++ b/src/controls/FluItem.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects

 Item{
    id:control
@ -14,6 +14,18 @@ Item{
        opacity: 0
    }

+    onWidthChanged: {
+        canvas.requestPaint()
+    }
+
+    onHeightChanged: {
+        canvas.requestPaint()
+    }
+
+    onRadiusChanged: {
+        canvas.requestPaint()
+    }
+
    Canvas {
        id: canvas
        anchors.fill: parent
--- a/src/controls/FluMediaPlayer.qml
+++ b/src/controls/FluMediaPlayer.qml
@ -1,7 +1,7 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtMultimedia 5.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtMultimedia
+import FluentUI

 Rectangle {

@ -17,6 +17,7 @@ Rectangle {

    MouseArea{
        anchors.fill: parent
+        preventStealing: true
        onClicked: {
            showControl = !showControl
        }
@ -25,9 +26,13 @@ Rectangle {
    MediaPlayer {
        id: mediaplayer
        property bool autoSeek:true
-        autoPlay: true
        source: control.source
-        onError: {
+        videoOutput: video_output
+        audioOutput: AudioOutput{
+            id:audio_output
+        }
+        onErrorChanged:
+            (error)=> {
                console.debug(error)
            }
        onPositionChanged: {
@ -35,10 +40,12 @@ Rectangle {
                slider.seek(mediaplayer.position*slider.maxValue/mediaplayer.duration)
            }
        }
-        onStatusChanged: {
-            if(status===6){
+        onMediaStatusChanged:
+            (status)=> {
+                if(status===2){
                    slider.maxValue = mediaplayer.duration
                    showControl = true
+                    mediaplayer.play()
                }
            }
    }
@ -48,29 +55,31 @@ Rectangle {
    }

    VideoOutput {
+        id:video_output
        anchors.fill: parent
-        source: mediaplayer
    }

    Item{
        height: 100
        y:showControl ? control.height - 110 : control.height
        anchors{
-            left: parent.left
-            right: parent.right
-            leftMargin: 10
-            rightMargin: 10
+            horizontalCenter: parent.horizontalCenter
        }
+        width: 460
+        opacity: showControl
        MouseArea{
            anchors.fill: parent
        }
-
+        Behavior on opacity{
+            NumberAnimation{
+                duration: 150
+            }
+        }
        Behavior on y{
            NumberAnimation{
                duration: 150
            }
        }
-
        Rectangle{
            anchors.fill: parent
            color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
@ -82,25 +91,23 @@ Rectangle {
            size:parent.width-20
            y:20
            anchors.horizontalCenter: parent.horizontalCenter
-            enableTip:false
+            tipEnabled:false
            onPressed: {
                mediaplayer.autoSeek = false
                mediaplayer.pause()
            }
-            value:0
+            value:mediaplayer.position
            onReleased: {
                mediaplayer.autoSeek = true
                mediaplayer.play()
            }
-
            onValueChanged: {
                if(mediaplayer.autoSeek == false){
-                    mediaplayer.seek(value*mediaplayer.duration/slider.maxValue)
+                    mediaplayer.position = value*mediaplayer.duration/slider.maxValue
                }
            }
-
            onLineClickFunc:function(val){
-                mediaplayer.seek(val*mediaplayer.duration/slider.maxValue)
+                mediaplayer.position = val*mediaplayer.duration/slider.maxValue
            }
        }

@ -137,14 +144,14 @@ Rectangle {
                iconSize: 17
                iconSource:  FluentIcons.SkipBack10
                onClicked: {
-                    mediaplayer.seek(Math.max(mediaplayer.position-10*1000,0))
+                    mediaplayer.position = Math.max(mediaplayer.position-10*1000,0)
                }
            }
            FluIconButton{
                iconSize: 15
-                iconSource: mediaplayer.playbackState === Audio.PlayingState ?   FluentIcons.Pause  : FluentIcons.Play
+                iconSource: mediaplayer.playbackState === MediaPlayer.PlayingState ?   FluentIcons.Pause  : FluentIcons.Play
                onClicked: {
-                    if(mediaplayer.playbackState === Audio.PlayingState){
+                    if(mediaplayer.playbackState === MediaPlayer.PlayingState){
                        mediaplayer.pause()
                    }else{
                        mediaplayer.play()
@ -155,16 +162,15 @@ Rectangle {
                iconSize: 17
                iconSource:  FluentIcons.SkipForward30
                onClicked: {
-                    mediaplayer.seek(Math.min(mediaplayer.position+30*1000,mediaplayer.duration))
+                    mediaplayer.position = Math.min(mediaplayer.position+30*1000,mediaplayer.duration)
                }
            }
        }

-
        FluIconButton{
            id:btn_volume
            iconSize: 17
-            iconSource:  mediaplayer.volume ?  FluentIcons.Volume :  FluentIcons.Mute
+            iconSource:  audio_output.muted ? FluentIcons.Mute  :  FluentIcons.Volume
            anchors{
                left: parent.left
                leftMargin: 5
@ -172,7 +178,7 @@ Rectangle {
                bottomMargin: 10
            }
            onClicked: {
-                mediaplayer.volume = !mediaplayer.volume
+                audio_output.muted = !audio_output.muted
            }
        }

@ -187,10 +193,9 @@ Rectangle {
                leftMargin: 10
            }
            onValueChanged:{
-                mediaplayer.volume = value/100
+                audio_output.volume = value/100
            }
        }
-
    }

    function formatDuration(duration) {
--- a/src/controls/FluMenu.qml
+++ b/src/controls/FluMenu.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls

 Menu {

@ -11,8 +11,6 @@ Menu {
    height: container.height
    modal:true
    dim:false
-    contentItem: Item{}
-
    enter: Transition {
        NumberAnimation {
            property: "y"
@ -27,8 +25,8 @@ Menu {
            duration: animEnabled ? 150 : 0
        }
    }
-
-    background: Item {
+    background:Item{}
+    contentItem: Item {
        Rectangle{
            anchors.fill: parent
            color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
--- a/src/controls/FluMenuItem.qml
+++ b/src/controls/FluMenuItem.qml
@ -1,5 +1,5 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Controls

 Item {

--- a/src/controls/FluMultiLineTextBox.qml
+++ b/src/controls/FluMultiLineTextBox.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import FluentUI

 TextArea{

@ -20,13 +20,7 @@ TextArea{
    wrapMode: Text.WrapAnywhere
    renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
    selectByMouse: true
-    selectionColor: {
-        if(FluTheme.dark){
-            return FluTheme.primaryColor.lighter
-        }else{
-            return FluTheme.primaryColor.dark
-        }
-    }
+    selectionColor: FluTheme.primaryColor.lightest
    background: FluTextBoxBackground{
        inputItem: input
    }
@ -47,10 +41,8 @@ TextArea{
            return true
        case FluText.Title:
            return true
-        case FluText.Subtitle:
+        case FluText.SubTitle:
            return true
-        case FluText.BodyLarge:
-            return false
        case FluText.BodyStrong:
            return true
        case FluText.Body:
@ -61,29 +53,60 @@ TextArea{
            return false
        }
    }
-
    font.pixelSize: {
        switch (fontStyle) {
        case FluText.Display:
-            return input.pixelSize * 4
+            return text.pixelSize * 4.857
        case FluText.TitleLarge:
-            return input.pixelSize * 2
+            return text.pixelSize * 2.857
        case FluText.Title:
-            return input.pixelSize * 1.5
-        case FluText.Subtitle:
-            return input.pixelSize * 0.9
-        case FluText.BodyLarge:
-            return input.pixelSize * 1.1
-        case FluText.BodyStrong:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 2
+        case FluText.SubTitle:
+            return text.pixelSize * 1.428
        case FluText.Body:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
        case FluText.Caption:
-            return input.pixelSize * 0.8
+            return text.pixelSize * 0.857
        default:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
+        }
+    }
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+       onTapped: input.echoMode !== TextInput.Password && menu.popup()
+    }
+    FluMenu{
+        id:menu
+        focus: false
+        FluMenuItem{
+            text: "剪切"
+            visible: input.text !== ""
+            onClicked: {
+                input.cut()
+            }
+        }
+        FluMenuItem{
+            text: "复制"
+            visible: input.selectedText !== ""
+            onClicked: {
+                input.copy()
+            }
+        }
+        FluMenuItem{
+            text: "粘贴"
+            visible: input.canPaste
+            onClicked: {
+                input.paste()
+            }
+        }
+        FluMenuItem{
+            text: "全选"
+            visible: input.text !== ""
+            onClicked: {
+                input.selectAll()
+            }
        }
    }
-
-
 }
--- a/src/controls/FluNavigationView.qml
+++ b/src/controls/FluNavigationView.qml
@ -1,16 +1,18 @@
-import QtQuick 2.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI

 Item {

    property alias logo : image_logo.source
+    property string title: ""
    property FluObject items
    property FluObject footerItems
    property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
    property bool displaMinimalMenu : false
+    property Component  autoSuggestBox

    id:root

@ -46,14 +48,34 @@ Item {
        id:com_panel_item_separatorr
        FluDivider{
            width: nav_list.width
-            height: 1
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 1 : 0
+                }
+                return 1
+            }
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
        }
    }

    Component{
        id:com_panel_item_header
        Item{
-            height: 30
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 30 : 0
+                }
+                return 30
+            }
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
            width: nav_list.width
            FluText{
                text:model.title
@ -68,11 +90,131 @@ Item {
    }

    Component{
-        id:com_panel_item
+        id:com_panel_item_expander
        Item{
            height: 38
            width: nav_list.width

+            Rectangle{
+                radius: 4
+                anchors{
+                    top: parent.top
+                    bottom: parent.bottom
+                    left: parent.left
+                    right: parent.right
+                    topMargin: 2
+                    bottomMargin: 2
+                    leftMargin: 6
+                    rightMargin: 6
+                }
+                Rectangle{
+                    width: 3
+                    height: 18
+                    radius: 1.5
+                    color: FluTheme.primaryColor.dark
+                    visible: {
+                        for(var i=0;i<model.children.length;i++){
+                            var item = model.children[i]
+                            if(item.idx === nav_list.currentIndex && !model.isExpand){
+                                return true
+                            }
+                        }
+                        return false
+                    }
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                    }
+                }
+                FluIcon{
+                    rotation: model.isExpand?0:180
+                    iconSource:FluentIcons.ChevronUp
+                    iconSize: 15
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                        rightMargin: 12
+                    }
+                    Behavior on rotation {
+                        NumberAnimation{
+                            duration: 150
+                        }
+                    }
+                }
+                MouseArea{
+                    id:item_mouse
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    onClicked: {
+                        model.isExpand = !model.isExpand
+                    }
+                }
+                color: {
+                    if(FluTheme.dark){
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(1,1,1,0.03)
+                        }
+                        if((nav_list.currentIndex === position)&&type===0){
+                            return Qt.rgba(1,1,1,0.06)
+                        }
+                        return Qt.rgba(0,0,0,0)
+                    }else{
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(0,0,0,0.03)
+                        }
+                        if(nav_list.currentIndex === position&&type===0){
+                            return Qt.rgba(0,0,0,0.06)
+                        }
+                        return Qt.rgba(0,0,0,0)
+                    }
+                }
+
+                FluIcon{
+                    id:item_icon
+                    iconSource: {
+                        if(model.icon){
+                            return model.icon
+                        }
+                        return 0
+                    }
+                    width: 30
+                    height: 30
+                    iconSize: 15
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left:parent.left
+                        leftMargin: 3
+                    }
+                }
+
+                FluText{
+                    id:item_title
+                    text:model.title
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left:item_icon.right
+                    }
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_panel_item
+        Item{
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
+            clip: true
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 38 : 0
+                }
+                return 38
+            }
+            width: nav_list.width
+
            Rectangle{
                radius: 4
                anchors{
@ -214,7 +356,7 @@ Item {
            }
            FluText{
                Layout.alignment: Qt.AlignVCenter
-                text:"FluentUI"
+                text:root.title
                Layout.leftMargin: 12
                fontStyle: FluText.Body
            }
@ -257,6 +399,17 @@ Item {
    Rectangle{
        id:layout_list
        width: 300
+        border.color: FluTheme.dark ? 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
+        color: {
+            if(displayMode === FluNavigationView.Minimal){
+                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+            }
+            if(window && window.active){
+                return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
+            }
+            return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+        }
        anchors{
            top: parent.top
            bottom: parent.bottom
@ -273,70 +426,29 @@ Item {
            }
        }

-        color: {
-            if(displayMode === FluNavigationView.Minimal){
-                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
-            }
-            if(window && window.active){
-                return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
-            }
-            return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
-        }
        Behavior on color{
            ColorAnimation {
                duration: 300
            }
        }

-        border.color: FluTheme.dark ? 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: textbox_search.height
+            height: {
+                if(loader_auto_suggest_box.item){
+                    return loader_auto_suggest_box.item.height
+                }
+                return 0
+            }
+            Loader{
+                id:loader_auto_suggest_box
+                anchors.horizontalCenter: parent.horizontalCenter
+                sourceComponent: autoSuggestBox
+            }
+        }

-            FluAutoSuggestBox{
-                id:textbox_search
-                width: 280
-                anchors.centerIn: parent
-                iconSource: FluentIcons.Zoom
-                values: {
-                    var arr = []
-                    if(items==null)
-                        return arr
-                    if(items.children==null)
-                        return arr
-                    for(var i=0;i<items.children.length;i++){
-                        var item = items.children[i]
-                        if(item instanceof FluPaneItem){
-                            arr.push(item.title)
-                        }
-                    }
-                    return arr
-                }
-                placeholderText: "查找"
-                onItemClicked:
-                    (data)=>{
-                        var arr = []
-                        if(items==null)
-                        return arr
-                        if(items.children==null)
-                        return arr
-                        for(var i=0;i<items.children.length;i++){
-                            if(items.children[i].title === data){
-                                if(nav_list.currentIndex === i){
-                                    return
-                                }
-                                items.children[i].tap()
-                                nav_list.currentIndex = i
-                                return
-                            }
-                        }
-                    }
-            }
-        }
        ListView{
            id:nav_list
            property bool enableStack: true
@ -349,6 +461,7 @@ Item {
                right: parent.right
                bottom: layout_footer.top
            }
+            highlightMoveDuration: 150
            currentIndex: -1
            onCurrentIndexChanged: {
                if(enableStack){
@ -357,12 +470,7 @@ Item {
            }
            ScrollBar.vertical: FluScrollBar {}

-            model:{
-                if(items){
-                    return items.children
-                }
-            }
-            boundsBehavior: ListView.StopAtBounds
+            model:handleItems()
            delegate: Loader{
                property var model: modelData
                property var position: index
@ -377,6 +485,9 @@ Item {
                    if(modelData instanceof FluPaneItemSeparator){
                        return com_panel_item_separatorr
                    }
+                    if(modelData instanceof FluPaneItemExpander){
+                        return com_panel_item_expander
+                    }
                }
            }
        }
@ -386,7 +497,6 @@ Item {
            width: layout_list.width
            height: childrenRect.height
            anchors.bottom: parent.bottom
-            boundsBehavior: ListView.StopAtBounds
            model: {
                if(footerItems){
                    return footerItems.children
@ -412,6 +522,33 @@ Item {
        }
    }

+    function handleItems(){
+        var idx = 0
+        var data = []
+        if(items){
+            for(var i=0;i<items.children.length;i++){
+                var item = items.children[i]
+                item.idx = idx
+                data.push(item)
+                idx++
+                if(item instanceof FluPaneItemExpander){
+                    for(var j=0;j<item.children.length;j++){
+                        var itemChild = item.children[j]
+                        itemChild.parent = item
+                        itemChild.idx = idx
+                        data.push(itemChild)
+                        idx++
+                    }
+                }
+            }
+        }
+        return data
+    }
+
+    function getItems(){
+        return nav_list.model
+    }
+
    function push(url){
        nav_swipe.push(url)
    }
@ -420,17 +557,8 @@ Item {
        nav_list.currentIndex = index
    }

-    function startPageByTitle(title){
-        for(var i=0;i<items.children.length;i++){
-            if(items.children[i].title === title){
-                if(nav_list.currentIndex === i){
-                    return
-                }
-                items.children[i].tap()
-                nav_list.currentIndex = i
-                return
-            }
-        }
+    function getCurrentIndex(){
+        return nav_list.currentIndex
    }

 }
--- a/src/controls/FluObject.qml
+++ b/src/controls/FluObject.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick

 QtObject {
    id:flu_object;
--- a/src/controls/FluPaneItem.qml
+++ b/src/controls/FluPaneItem.qml
@ -1,8 +1,17 @@
-import QtQuick 2.15
+import QtQuick
+import FluentUI

 QtObject {
+    readonly property string key : FluApp.uuid()
+    readonly property int flag : 0
    property string title
-    property var icon
+    property int icon
+    property bool recentlyAdded: false
+    property bool recentlyUpdated: false
+    property string desc
+    property var image
+    property var parent
+    property int idx
    signal tap
    signal repTap
 }
--- a/src/controls/FluPaneItemExpander.qml
+++ b/src/controls/FluPaneItemExpander.qml
@ -0,0 +1,14 @@
+import QtQuick
+import FluentUI
+
+FluObject {
+    readonly property int flag : 3
+    readonly property string key : FluApp.uuid()
+    property string title
+    property int icon
+    property bool isExpand: false
+    property var parent
+    property int idx
+    signal tap
+    signal repTap
+}
--- a/src/controls/FluPaneItemHeader.qml
+++ b/src/controls/FluPaneItemHeader.qml
@ -1,5 +1,9 @@
-import QtQuick 2.15
+import QtQuick

 QtObject {
+    readonly property int flag : 1
+    readonly property string key : FluApp.uuid()
    property string title
+    property var parent
+    property int idx
 }
--- a/src/controls/FluPaneItemSeparator.qml
+++ b/src/controls/FluPaneItemSeparator.qml
@ -1,5 +1,8 @@
-import QtQuick 2.15
+import QtQuick

 QtObject {
-
+    readonly property int flag : 2
+    readonly property string key : FluApp.uuid()
+    property var parent
+    property int idx
 }
--- a/src/controls/FluProgressBar.qml
+++ b/src/controls/FluProgressBar.qml
@ -1,5 +1,5 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
+import QtQuick
+import QtQuick.Controls

 FluRectangle {

--- a/src/controls/FluProgressRing.qml
+++ b/src/controls/FluProgressRing.qml
@ -1,5 +1,5 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
+import QtQuick
+import QtQuick.Controls

 Rectangle {

--- a/src/controls/FluRadioButton.qml
+++ b/src/controls/FluRadioButton.qml
@ -1,7 +1,7 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI


 Button {
--- a/src/controls/FluRectangle.qml
+++ b/src/controls/FluRectangle.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects

 Item{
    id:control
--- a/src/controls/FluScrollBar.qml
+++ b/src/controls/FluScrollBar.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Controls
 import QtQuick.Controls.impl 2.15
 import QtQuick.Templates 2.15 as T
-import FluentUI 1.0
+import FluentUI

 T.ScrollBar {
    id: control
--- a/src/controls/FluScrollablePage.qml
+++ b/src/controls/FluScrollablePage.qml
@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI

 Item {

@ -43,7 +43,6 @@ Item {
        }
        contentWidth: parent.width
        contentHeight: container.height
-        boundsBehavior: Flickable.StopAtBounds
        ScrollBar.vertical: FluScrollBar {
        }
        anchors{
--- a/src/controls/FluShadow.qml
+++ b/src/controls/FluShadow.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick

 Item {

--- a/src/controls/FluSlider.qml
+++ b/src/controls/FluSlider.qml
@ -1,20 +1,15 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtGraphicalEffects 1.15
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects

 Item{

-    enum Orientation  {
-        Horizontal,
-        Vertical
-    }
    property int size: 180
    property int dotSize: 24
    property int value: 50
    property int maxValue: 100
-    property int orientation: FluSlider.Horizontal
-    property bool isHorizontal: orientation === FluSlider.Horizontal
-    property bool enableTip : true
+    property bool vertical: false
+    property bool tipEnabled : true
    property var onLineClickFunc
    signal pressed
    signal released
@ -22,7 +17,7 @@ Item{
    id:root
    height: control.height
    width: control.width
-    rotation: isHorizontal ? 0 : 180
+    rotation: vertical ? 180 : 0

    Component.onCompleted: {
        seek(value)
@ -31,16 +26,16 @@ Item{
    MouseArea{
        id:mouse_line
        anchors.centerIn: control
-        width: isHorizontal ? control.width : 10
-        height: isHorizontal ? 10 : control.height
+        width: vertical ? 10 : control.width
+        height: vertical ? control.height : 10
        hoverEnabled: true
        onClicked:
            (mouse) => {
                var val;
-                if(isHorizontal){
-                    val = mouse.x*maxValue/control.width
-                }else{
+                if(vertical){
                    val = mouse.y*maxValue/control.height
+                }else{
+                    val = mouse.x*maxValue/control.width
                }
                if(onLineClickFunc){
                    onLineClickFunc(val)
@ -52,20 +47,18 @@ Item{

    Rectangle {
        id: control
-        width: isHorizontal ? size : 4
-        height:  isHorizontal ? 4 : size
+        width: vertical ? 4 :size
+        height:  vertical ? size : 4
        radius: 2
        anchors.verticalCenter: parent.verticalCenter
        color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
        Rectangle{
            id:rect
            radius: 2.5
-            width: isHorizontal ? control.width*(value/maxValue) : 5
-            height: isHorizontal ?  5  : control.height*(value/maxValue)
+            width: vertical ? 5 : control.width*(value/maxValue)
+            height: vertical ? control.height*(value/maxValue) :  5
            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
        }
-
-
    }

    Rectangle{
@ -76,8 +69,8 @@ Item{
            radius: dotSize/2
        }
        radius: dotSize/2
-        anchors.verticalCenter: isHorizontal ?  parent.verticalCenter : undefined
-        anchors.horizontalCenter: isHorizontal ? undefined :parent.horizontalCenter
+        anchors.verticalCenter: vertical ? undefined : parent.verticalCenter
+        anchors.horizontalCenter: vertical ? parent.horizontalCenter : undefined
        color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
        Rectangle{
            width: dotSize/2
@ -85,7 +78,12 @@ Item{
            radius: dotSize/4
            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
            anchors.centerIn: parent
-            scale: control_mouse.containsMouse || mouse_line.containsMouse  ? 1.3 : 1
+            scale: {
+                if(control_mouse.pressed){
+                    return 0.9
+                }
+                return control_mouse.containsMouse || mouse_line.containsMouse  ? 1.3 : 1
+            }
            Behavior on scale {
                NumberAnimation{
                    duration: 150
@ -98,14 +96,14 @@ Item{
            hoverEnabled: true
            drag {
                target: dot
-                axis: isHorizontal ? Drag.XAxis : Drag.YAxis
-                minimumX: isHorizontal ? -dotSize/2 : 0
-                maximumX: isHorizontal ?  (control.width - dotSize/2) : 0
-                minimumY: isHorizontal ? 0 : -dotSize/2
-                maximumY: isHorizontal ? 0 : (control.height - dotSize/2)
+                axis: vertical ? Drag.YAxis : Drag.XAxis
+                minimumX: vertical ? 0 : -dotSize/2
+                maximumX: vertical ? 0 : (control.width - dotSize/2)
+                minimumY: vertical ? -dotSize/2 : 0
+                maximumY: vertical ? (control.height - dotSize/2) : 0
            }
            onPressed: {
-                if(enableTip){
+                if(tipEnabled){
                    tool_tip.visible  =  true
                }
                root.pressed()
@ -120,23 +118,22 @@ Item{
        FluTooltip{
            id:tool_tip
            text:String(root.value)
-            y: isHorizontal ? -40 : 32
+            y: vertical ? 32 : -40
        }
    }

    function seek(val){
-        if(isHorizontal){
-            dot.x =val/maxValue*control.width - dotSize/2
-            root.value = Qt.binding(function(){
-                return (dot.x+dotSize/2)/control.width*maxValue
-            })
-        }else{
+        if(vertical){
            dot.y =val/maxValue*control.height - dotSize/2
            root.value = Qt.binding(function(){
                return (dot.y+dotSize/2)/control.height*maxValue
            })
+        }else{
+            dot.x =val/maxValue*control.width - dotSize/2
+            root.value = Qt.binding(function(){
+                return (dot.x+dotSize/2)/control.width*maxValue
+            })
+        }
    }
 }

-}
-
--- a/src/controls/FluTabView.qml
+++ b/src/controls/FluTabView.qml
@ -1,6 +1,7 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI

 Item {

@ -14,6 +15,11 @@ Item {
    implicitHeight: height
    implicitWidth: width

+    MouseArea{
+        anchors.fill: parent
+        preventStealing: true
+    }
+
    enum TabWidthBehavior {
        Equal,
        SizeToContent,
@ -29,25 +35,43 @@ Item {
    property int tabWidthBehavior : FluTabView.Equal
    property int closeButtonVisibility : FluTabView.Always
    property int itemWidth: 146
+    signal newPressed

    QtObject {
        id: d
        property int dragIndex: -1
        property bool dragBehavior: false
        property bool itemPress: false
+        property int maxEqualWidth: 240
    }

    ListModel{
        id:tab_model
    }

+    FluIconButton{
+        id:btn_new
+        width: 34
+        height: 34
+        x:Math.min(tab_nav.contentWidth,tab_nav.width)
+        anchors.top: parent.top
+        iconSource: FluentIcons.Add
+        onClicked: {
+            newPressed()
+        }
+    }
+
    ListView{
        id:tab_nav
        height: 34
        orientation: ListView.Horizontal
-        width: parent.width
+        anchors{
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            rightMargin: 34
+        }
        interactive: false
-        boundsBehavior: ListView.StopAtBounds
        model: tab_model
        move: Transition {
            NumberAnimation { properties: "x"; duration: 100; easing.type: Easing.OutCubic }
@ -57,20 +81,20 @@ Item {
            NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.OutCubic}
            NumberAnimation { properties: "y"; duration: 100;  easing.type: Easing.OutCubic }
        }
-        clip: false
+        clip: true
        ScrollBar.horizontal: ScrollBar{
            id: scroll_nav
            policy: ScrollBar.AlwaysOff
        }
        delegate:  Item{

-            width: itemWidth
+            width: item_layout.width
            height: item_container.height
            z: item_mouse_drag.pressed ? 1000 : 1

            Item{
                id:item_layout
-                width: itemWidth
+                width: item_container.width
                height: item_container.height

                FluItem{
@ -79,8 +103,19 @@ Item {
                    property real timestamp: new Date().getTime()

                    height: tab_nav.height
-                    width: itemWidth
-                    radius: [5,5,0,0]
+                    width: {
+                        if(tabWidthBehavior === FluTabView.Equal){
+                            return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
+                        }
+                        if(tabWidthBehavior === FluTabView.SizeToContent){
+                            return itemWidth
+                        }
+                        if(tabWidthBehavior === FluTabView.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)
+                    }
+                    radius: [6,6,0,0]
                    Behavior on x { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
                    Behavior on y { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }

@ -166,7 +201,10 @@ Item {
                            var idx = tab_nav.indexAt(pos.x+tab_nav.contentX, pos.y)
                            var firstIdx = tab_nav.indexAt(tab_nav.contentX+1, pos.y)
                            var lastIdx = tab_nav.indexAt(tab_nav.width+tab_nav.contentX-1, pos.y)
-                            if (idx >= firstIdx && idx <= lastIdx && d.dragIndex !== idx) {
+                            if(lastIdx === -1){
+                                lastIdx = tab_nav.count-1
+                            }
+                            if (idx!==-1 && idx >= firstIdx && idx <= lastIdx && d.dragIndex !== idx) {
                                tab_model.move(d.dragIndex, idx, 1)
                                d.dragIndex = idx;
                            }
@ -196,19 +234,51 @@ Item {
                        }
                    }

+                    RowLayout{
+                        spacing: 0
+                        height: parent.height
+                        Image{
+                            source:model.icon
+                            Layout.leftMargin: 10
+                            Layout.preferredWidth: 14
+                            Layout.preferredHeight: 14
+                            Layout.alignment: Qt.AlignVCenter
+                        }
                        FluText{
                            id:item_text
-                        anchors.centerIn: parent
                            text: model.text
-                        rightPadding: 24
+                            Layout.leftMargin: 10
+                            visible: {
+                                if(tabWidthBehavior === FluTabView.Equal){
+                                    return true
+                                }
+                                if(tabWidthBehavior === FluTabView.SizeToContent){
+                                    return true
+                                }
+                                if(tabWidthBehavior === FluTabView.Compact){
+                                    return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index
+                                }
+                                return false
+                            }
+                            Layout.preferredWidth: visible?item_container.width - 41 - item_btn_close.width:0
+                            elide: Text.ElideRight
+                            Layout.alignment: Qt.AlignVCenter
+                        }
                    }

                    FluIconButton{
                        id:item_btn_close
                        iconSource: FluentIcons.ChromeClose
                        iconSize: 10
-                        width: 24
+                        width: visible ? 24 : 0
                        height: 24
+                        visible: {
+                            if(closeButtonVisibility === FluTabView.Nerver)
+                                return false
+                            if(closeButtonVisibility === FluTabView.OnHover)
+                                return item_mouse_hove.containsMouse || item_btn_close.hovered
+                            return true
+                        }
                        anchors{
                            right: parent.right
                            rightMargin: 5
@ -218,6 +288,15 @@ Item {
                            tab_model.remove(index)
                        }
                    }
+
+                    FluDivider{
+                        width: 1
+                        height: 16
+                        anchors{
+                            verticalCenter: parent.verticalCenter
+                            right: parent.right
+                        }
+                    }
                }
            }
        }
@ -258,4 +337,8 @@ Item {
        tab_model.append(list)
    }

+    function count(){
+        return tab_nav.count
+    }
+
 }
--- a/src/controls/FluText.qml
+++ b/src/controls/FluText.qml
@ -1,5 +1,5 @@
-import QtQuick 2.15
-import FluentUI 1.0
+import QtQuick
+import FluentUI

 Text {

@ -11,8 +11,7 @@ Text {
        Display,
        TitleLarge,
        Title,
-        Subtitle,
-        BodyLarge,
+        SubTitle,
        BodyStrong,
        Body,
        Caption
@ -29,10 +28,8 @@ Text {
            return true
        case FluText.Title:
            return true
-        case FluText.Subtitle:
+        case FluText.SubTitle:
            return true
-        case FluText.BodyLarge:
-            return false
        case FluText.BodyStrong:
            return true
        case FluText.Body:
@ -46,21 +43,19 @@ Text {
    font.pixelSize: {
        switch (fontStyle) {
        case FluText.Display:
-            return text.pixelSize * 4
+            return text.pixelSize * 4.857
        case FluText.TitleLarge:
-            return text.pixelSize * 2
+            return text.pixelSize * 2.857
        case FluText.Title:
-            return text.pixelSize * 1.5
-        case FluText.Subtitle:
-            return text.pixelSize * 0.9
-        case FluText.BodyLarge:
-            return text.pixelSize * 1.1
-        case FluText.BodyStrong:
-            return text.pixelSize * 1.0
+            return text.pixelSize * 2
+        case FluText.SubTitle:
+            return text.pixelSize * 1.428
        case FluText.Body:
            return text.pixelSize * 1.0
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
        case FluText.Caption:
-            return text.pixelSize * 0.8
+            return text.pixelSize * 0.857
        default:
            return text.pixelSize * 1.0
        }
--- a/src/controls/FluTextBox.qml
+++ b/src/controls/FluTextBox.qml
@ -1,6 +1,6 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
+import QtQuick
+import QtQuick.Controls
+import FluentUI

 TextField{

@ -18,13 +18,7 @@ TextField{
        return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
    }
    renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: {
-        if(FluTheme.dark){
-            return FluTheme.primaryColor.lighter
-        }else{
-            return FluTheme.primaryColor.dark
-        }
-    }
+    selectionColor: FluTheme.primaryColor.lightest
    placeholderTextColor: {
        if(disabled){
            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
@ -42,10 +36,8 @@ TextField{
            return true
        case FluText.Title:
            return true
-        case FluText.Subtitle:
+        case FluText.SubTitle:
            return true
-        case FluText.BodyLarge:
-            return false
        case FluText.BodyStrong:
            return true
        case FluText.Body:
@ -59,29 +51,63 @@ TextField{
    font.pixelSize: {
        switch (fontStyle) {
        case FluText.Display:
-            return input.pixelSize * 4
+            return text.pixelSize * 4.857
        case FluText.TitleLarge:
-            return input.pixelSize * 2
+            return text.pixelSize * 2.857
        case FluText.Title:
-            return input.pixelSize * 1.5
-        case FluText.Subtitle:
-            return input.pixelSize * 0.9
-        case FluText.BodyLarge:
-            return input.pixelSize * 1.1
-        case FluText.BodyStrong:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 2
+        case FluText.SubTitle:
+            return text.pixelSize * 1.428
        case FluText.Body:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
        case FluText.Caption:
-            return input.pixelSize * 0.8
+            return text.pixelSize * 0.857
        default:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
        }
    }
    selectByMouse: true
    background: FluTextBoxBackground{
        inputItem: input
    }
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+        onTapped: input.echoMode !== TextInput.Password && menu.popup()
+    }
+    FluMenu{
+        id:menu
+        focus: false
+        FluMenuItem{
+            text: "剪切"
+            visible: input.text !== ""
+            onClicked: {
+                input.cut()
+            }
+        }
+        FluMenuItem{
+            text: "复制"
+            visible: input.selectedText !== ""
+            onClicked: {
+                input.copy()
+            }
+        }
+        FluMenuItem{
+            text: "粘贴"
+            visible: input.canPaste
+            onClicked: {
+                input.paste()
+            }
+        }
+        FluMenuItem{
+            text: "全选"
+            visible: input.text !== ""
+            onClicked: {
+                input.selectAll()
+            }
+        }
+    }

 }

--- a/src/controls/FluTextBoxBackground.qml
+++ b/src/controls/FluTextBoxBackground.qml
@ -1,5 +1,5 @@
-import QtQuick 2.15
-import QtGraphicalEffects 1.15
+import QtQuick
+import Qt5Compat.GraphicalEffects

 Rectangle{
    id:content
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
$朱子楚\zhuzi$ 朱子楚\zhuzi	0b37ddcb6e	update	2023-03-31 22:05:25 +08:00
zhuzihcu	d2e3e6dd4b	update	2023-03-31 18:11:55 +08:00
zhuzihcu	1e5bd75123	update	2023-03-31 17:59:20 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	1b97b197a4	update	2023-03-31 13:03:36 +08:00
zhuzihcu	936a310ca6	update	2023-03-31 11:58:15 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	3236be8a7f	update	2023-03-30 23:25:48 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	2008e0f524	update	2023-03-30 22:59:25 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	4e53936bb7	update	2023-03-30 22:27:30 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	eb758f7765	update	2023-03-30 22:18:42 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	1ab69e401a	update	2023-03-30 22:10:05 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	e014aa774d	update	2023-03-30 22:02:10 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	0595e2e640	update	2023-03-30 21:59:32 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	b5894158d2	update	2023-03-30 21:52:55 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	4829ce58fd	update	2023-03-30 19:58:57 +08:00
zhuzihcu	b5f44f4f7d	update	2023-03-30 18:34:03 +08:00
zhuzihcu	cbd4c229aa	update	2023-03-30 18:23:33 +08:00
zhuzihcu	7720208d17	update	2023-03-30 17:16:57 +08:00
zhuzihcu	9790ae12eb	update	2023-03-30 11:49:35 +08:00
zhuzihcu	37ae17d92d	update	2023-03-30 11:43:35 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	036450f0a3	update	2023-03-29 22:42:08 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	5a1b10fef8	update	2023-03-29 21:43:01 +08:00
$朱子楚\zhuzi$ 朱子楚\zhuzi	a33a63abc9	update	2023-03-29 21:40:28 +08:00