From 7720208d1768d3be258e85a1a3d1f9e8db79e73b Mon Sep 17 00:00:00 2001
From: zhuzihcu <zhuzichu520@gmail.com>
Date: Thu, 30 Mar 2023 17:16:57 +0800
Subject: [PATCH] update

---
 example/T_Home.qml                    |  37 +---
 example/T_TextBox.qml                 |   4 +-
 example/global/ItemsFooter.qml        |  21 ++
 example/global/ItemsOriginal.qml      | 286 ++++++++++++++++++++++++++
 example/global/qmldir                 |   2 +
 example/page/LoginPage.qml            |   1 -
 example/page/MainPage.qml             | 256 ++---------------------
 example/qml.qrc                       |   3 +
 src/FluApp.cpp                        |   5 +
 src/FluApp.h                          |   2 +
 src/controls/FluAutoSuggestBox.qml    |  39 +---
 src/controls/FluNavigationView.qml    |  90 +++-----
 src/controls/FluPaneItem.qml          |   8 +-
 src/controls/FluPaneItemHeader.qml    |   1 +
 src/controls/FluPaneItemSeparator.qml |   2 +-
 15 files changed, 387 insertions(+), 370 deletions(-)
 create mode 100644 example/global/ItemsFooter.qml
 create mode 100644 example/global/ItemsOriginal.qml
 create mode 100644 example/global/qmldir

diff --git a/example/T_Home.qml b/example/T_Home.qml
index 85acc2c..3171bf3 100644
--- a/example/T_Home.qml
+++ b/example/T_Home.qml
@@ -2,6 +2,7 @@
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
+import "qrc:///global/"
 import FluentUI 1.0
 
 FluScrollablePage{
@@ -143,39 +144,15 @@ 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"
+        Component.onCompleted: {
+            append(ItemsOriginal.getRecentlyAddedData())
         }
     }
 
     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.onCompleted: {
+            append(ItemsOriginal.getRecentlyUpdatedData())
         }
     }
 
@@ -210,7 +187,7 @@ FluScrollablePage{
                     id:item_icon
                     height: 40
                     width: 40
-                    source: model.icon
+                    source: model.image
                     anchors{
                         left: parent.left
                         leftMargin: 20
@@ -251,7 +228,7 @@ FluScrollablePage{
                     anchors.fill: parent
                     hoverEnabled: true
                     onClicked: {
-                        rootwindow.startPageByTitle(model.title)
+                        ItemsOriginal.startPageByItem(model)
                     }
                 }
             }
diff --git a/example/T_TextBox.qml b/example/T_TextBox.qml
index e172aa3..ee475e2 100644
--- a/example/T_TextBox.qml
+++ b/example/T_TextBox.qml
@@ -26,7 +26,7 @@ FluScrollablePage{
     }
     FluAutoSuggestBox{
         Layout.topMargin: 20
-        values:generateRandomNames(100)
+        items:generateRandomNames(100)
         placeholderText: "AutoSuggestBox"
         Layout.preferredWidth: 300
         disabled:toggle_switch.selected
@@ -52,7 +52,7 @@ FluScrollablePage{
         }
         for (let i = 0; i < numNames; i++) {
             const name = generateRandomName();
-            names.push(name);
+            names.push({title:name});
         }
         return names;
     }
diff --git a/example/global/ItemsFooter.qml b/example/global/ItemsFooter.qml
new file mode 100644
index 0000000..5d8ed3f
--- /dev/null
+++ b/example/global/ItemsFooter.qml
@@ -0,0 +1,21 @@
+pragma Singleton
+
+import QtQuick 2.15
+import FluentUI 1.0
+
+FluObject{
+    id:footer_items
+    FluPaneItemSeparator{}
+    FluPaneItem{
+        title:"意见反馈"
+        onTap:{
+            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
+        }
+    }
+    FluPaneItem{
+        title:"关于"
+        onTap:{
+            FluApp.navigate("/about")
+        }
+    }
+}
diff --git a/example/global/ItemsOriginal.qml b/example/global/ItemsOriginal.qml
new file mode 100644
index 0000000..035acfd
--- /dev/null
+++ b/example/global/ItemsOriginal.qml
@@ -0,0 +1,286 @@
+pragma Singleton
+
+import QtQuick 2.15
+import FluentUI 1.0
+
+
+FluObject{
+
+    property var navigationView
+
+    FluPaneItem{
+        title:"Home"
+        icon:FluentIcons.Home
+        onTap:{
+            navigationView.push("qrc:/T_Home.qml")
+        }
+    }
+
+    FluPaneItemHeader{
+        title:"Inputs"
+    }
+
+    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")
+        }
+    }
+
+    FluPaneItemHeader{
+        title:"Form"
+    }
+
+    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")
+        }
+    }
+
+    FluPaneItemHeader{
+        title:"Surface"
+    }
+
+    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")
+        }
+    }
+
+    FluPaneItemHeader{
+        title:"Popus"
+    }
+
+    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")
+        }
+    }
+
+    FluPaneItemHeader{
+        title:"Navigation"
+    }
+
+    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")
+        }
+    }
+
+    FluPaneItemHeader{
+        title:"Theming"
+    }
+
+    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")
+        }
+    }
+
+    FluPaneItemHeader{
+        title:"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)
+            }
+        }
+        return arr
+    }
+
+    function getRecentlyUpdatedData(){
+        var arr = []
+        for(var i=0;i<children.length;i++){
+            var item = children[i]
+            if(item instanceof FluPaneItem && item.recentlyUpdated){
+                arr.push(item)
+            }
+        }
+        return arr
+    }
+
+    function getSearchData(){
+        var arr = []
+        for(var i=0;i<children.length;i++){
+            var item = children[i]
+            if(item instanceof FluPaneItem){
+                arr.push({title:item.title,key:item.key})
+            }
+        }
+        return arr
+    }
+
+    function startPageByItem(item){
+        for(var i=0;i<children.length;i++){
+            if(children[i].key === item.key){
+                if(navigationView.getCurrentIndex() === i){
+                    return
+                }
+                children[i].tap()
+                navigationView.setCurrentIndex(i)
+                return
+            }
+        }
+    }
+
+}
diff --git a/example/global/qmldir b/example/global/qmldir
new file mode 100644
index 0000000..eb6bfea
--- /dev/null
+++ b/example/global/qmldir
@@ -0,0 +1,2 @@
+singleton ItemsOriginal 1.0 ItemsOriginal.qml
+singleton ItemsFooter 1.0 ItemsFooter.qml
diff --git a/example/page/LoginPage.qml b/example/page/LoginPage.qml
index 15a7da4..5f000eb 100644
--- a/example/page/LoginPage.qml
+++ b/example/page/LoginPage.qml
@@ -33,7 +33,6 @@ FluWindow {
             verticalCenter: parent.verticalCenter
         }
 
-
         FluAutoSuggestBox{
             id:textbox_uesrname
             values:["Admin","User"]
diff --git a/example/page/MainPage.qml b/example/page/MainPage.qml
index 08e9830..05caf91 100644
--- a/example/page/MainPage.qml
+++ b/example/page/MainPage.qml
@@ -2,7 +2,7 @@
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
-import QtGraphicalEffects 1.15
+import "qrc:///global/"
 import FluentUI 1.0
 
 FluWindow {
@@ -19,255 +19,31 @@ FluWindow {
         showDark: true
     }
 
-    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)
-    }
-
 }
diff --git a/example/qml.qrc b/example/qml.qrc
index 5ed5cea..434575a 100644
--- a/example/qml.qrc
+++ b/example/qml.qrc
@@ -149,5 +149,8 @@
         <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>
     </qresource>
 </RCC>
diff --git a/src/FluApp.cpp b/src/FluApp.cpp
index d68dec4..3499228 100644
--- 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();
+}
diff --git a/src/FluApp.h b/src/FluApp.h
index 38c3004..b886bf0 100644
--- 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;
diff --git a/src/controls/FluAutoSuggestBox.qml b/src/controls/FluAutoSuggestBox.qml
index 5c21ccb..b1bd0f2 100644
--- a/src/controls/FluAutoSuggestBox.qml
+++ b/src/controls/FluAutoSuggestBox.qml
@@ -4,12 +4,12 @@ import FluentUI 1.0
 
 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
     id:input
     width: 300
@@ -211,7 +211,7 @@ TextField{
                             function handleClick(){
                                 input_popup.close()
                                 input.itemClicked(modelData)
-                                input.text = modelData
+                                input.text = modelData.title
                             }
                         }
                         Rectangle{
@@ -227,37 +227,12 @@ 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
-                //                            }
-                //                        }
-
-                //                    }
-                //                }
             }
         }
     }
@@ -268,12 +243,12 @@ TextField{
 
     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)
             }
         })
diff --git a/src/controls/FluNavigationView.qml b/src/controls/FluNavigationView.qml
index e31a09f..8ba225c 100644
--- a/src/controls/FluNavigationView.qml
+++ b/src/controls/FluNavigationView.qml
@@ -7,10 +7,12 @@ import FluentUI 1.0
 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
 
@@ -214,7 +216,7 @@ Item {
             }
             FluText{
                 Layout.alignment: Qt.AlignVCenter
-                text:"FluentUI"
+                text:root.title
                 Layout.leftMargin: 12
                 fontStyle: FluText.Body
             }
@@ -257,6 +259,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 +286,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
-
-            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
+            height: {
+                if(loader_auto_suggest_box.item){
+                    return loader_auto_suggest_box.item.height
                 }
-                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
-                            }
-                        }
-                    }
+                return 0
+            }
+            Loader{
+                id:loader_auto_suggest_box
+                anchors.horizontalCenter: parent.horizontalCenter
+                sourceComponent: autoSuggestBox
             }
         }
+
         ListView{
             id:nav_list
             property bool enableStack: true
@@ -349,6 +321,7 @@ Item {
                 right: parent.right
                 bottom: layout_footer.top
             }
+            highlightMoveDuration: 150
             currentIndex: -1
             onCurrentIndexChanged: {
                 if(enableStack){
@@ -418,17 +391,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
     }
 
 }
diff --git a/src/controls/FluPaneItem.qml b/src/controls/FluPaneItem.qml
index 0b78094..c26816e 100644
--- a/src/controls/FluPaneItem.qml
+++ b/src/controls/FluPaneItem.qml
@@ -1,8 +1,14 @@
 import QtQuick 2.15
+import FluentUI 1.0
 
 QtObject {
+    readonly property string key : FluApp.uuid()
     property string title
-    property var icon
+    property int icon
+    property bool recentlyAdded: false
+    property bool recentlyUpdated: false
+    property string desc
+    property var image
     signal tap
     signal repTap
 }
diff --git a/src/controls/FluPaneItemHeader.qml b/src/controls/FluPaneItemHeader.qml
index 63d4789..c9bf979 100644
--- a/src/controls/FluPaneItemHeader.qml
+++ b/src/controls/FluPaneItemHeader.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.15
 
 QtObject {
+    readonly property string key : FluApp.uuid()
     property string title
 }
diff --git a/src/controls/FluPaneItemSeparator.qml b/src/controls/FluPaneItemSeparator.qml
index 9dfda86..f392535 100644
--- a/src/controls/FluPaneItemSeparator.qml
+++ b/src/controls/FluPaneItemSeparator.qml
@@ -1,5 +1,5 @@
 import QtQuick 2.15
 
 QtObject {
-
+    readonly property string key : FluApp.uuid()
 }