1.添加搜索框唤出隐藏动画、搜索框显示细节；2.添加按钮的基础组件；3.添加滑动区域的分割线

qml/AppControls2/RoundButton.qml

@@ -0,0 +1,22 @@
+import QtQuick 2.0
+import org.ukui.menu.core 1.0
+
+MouseArea {
+    id: buttonMouseArea
+    hoverEnabled: true
+    property string buttonIcon: ""
+
+    StyleBackground {
+        useStyleTransparent: false
+        paletteRole: Palette.Text
+        anchors.fill: parent
+        radius: height / 2
+        alpha: buttonMouseArea.containsPress ? 0.17 : buttonMouseArea.containsMouse ? 0.12 : 0.06
+    }
+
+    Image {
+        anchors.centerIn: parent
+        width: 16; height: width
+        source: buttonIcon
+    }
+}

qml/AppControls2/StyleBackground.qml

@@ -1,5 +1,4 @@
 import QtQuick 2.0
-import QtQuick.Controls 2.5
 import org.ukui.menu.core 1.0
 
 Rectangle {
@@ -9,8 +8,10 @@ Rectangle {
     property real alpha: 1.0
 
     clip: true
+    border.width: 0
 
     function updateColor() {
+        border.color = themePalette.paletteColor(Palette.Highlight)
         if (useStyleTransparent) {
             color = themePalette.paletteColorWithTransparency(paletteRole,paletteGroup)
         } else {

qml/AppControls2/qmldir

@@ -6,3 +6,4 @@ AppItem 1.0 AppItem.qml
 FolderItem 1.0 FolderItem.qml
 LabelItem 1.0 LabelItem.qml
 IconLabel 1.0 IconLabel.qml
+RoundButton 1.0 RoundButton.qml

qml/AppUI/AppList.qml

@@ -31,9 +31,19 @@ Item {
         hoverEnabled: true
         anchors.fill: parent
 
+        AppControls2.StyleBackground {
+            anchors.top: parent.top
+            width: parent.width; height: 1
+            useStyleTransparent: false
+            alpha: 0.15
+            paletteRole: Palette.Text
+            visible: appListView.contentY > 0
+        }
+
         RowLayout {
             anchors.fill: parent
             spacing: 0
+            anchors.leftMargin: 4
 
             ListView {
                 id: appListView

qml/AppUI/AppPage.qml

@@ -29,7 +29,7 @@ AppControls2.StyleBackground {
     ColumnLayout {
         anchors.fill: parent
         anchors.topMargin: parent.radius
-        spacing: 4
+        spacing: 0
 
         AppPageHeader {
             Layout.fillWidth: true
@@ -40,7 +40,6 @@ AppControls2.StyleBackground {
             clip: true
             Layout.fillWidth: true
             Layout.fillHeight: true
-            Layout.leftMargin: 4
         }
     }
 }

qml/AppUI/AppPageHeader.qml

@@ -19,7 +19,6 @@
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import QtQuick.Controls 2.5
-
 import AppControls2 1.0 as AppControls2
 import org.ukui.menu.core 1.0
 import org.ukui.menu.utils 1.0
@@ -27,30 +26,44 @@ import org.ukui.menu.utils 1.0
 Item {
     id: appPageHeaderRoot
     property string title: ""
+    clip: true
 
     state: "normal"
     states: [
         State {
             name: "normal"
-            PropertyChanges { target: searchBar; visible: false }
+            PropertyChanges { target: searchBar; scale: 0.9; y: -pluginSelectionBar.height }
-            PropertyChanges { target: pluginSelectionBar; visible: true }
+            PropertyChanges { target: pluginSelectionBar; scale: 1.0; y: 0 }
-            StateChangeScript {
+            StateChangeScript { script: sortMenu.sortMenuModel.reactivateProvider() }
-                script: {
-                    sortMenu.sortMenuModel.reactivateProvider();
-                }
-            }
         },
         State {
             name: "search"
-            PropertyChanges { target: searchBar; visible: true }
+            PropertyChanges { target: searchBar; scale: 1.0; y: 0 }
-            PropertyChanges { target: pluginSelectionBar; visible: false }
+            PropertyChanges { target: pluginSelectionBar; scale: 0.9; y: pluginSelectionBar.height }
+        }
+    ]
+
+    transitions:[
+        Transition {
+            to: "normal"
+            SequentialAnimation {
+                NumberAnimation { easing.type: Easing.InOutQuad; properties: "scale,y"; duration: 300 }
+                ScriptAction { script: searchBar.visible = false }
+            }
+        },
+        Transition {
+            to: "search"
+            SequentialAnimation {
+                ScriptAction { script: searchBar.visible = true }
+                NumberAnimation { easing.type: Easing.InOutQuad; properties: "scale,y"; duration: 300}
+            }
         }
     ]
 
     Item {
         id: searchBar
-        width: parent.width
+        width: parent.width; height: 30
-        height: 30
+
         RowLayout {
             anchors.fill: parent
             anchors.leftMargin: 15
@@ -59,29 +72,31 @@ Item {
 
             SearchInputBar {
                 id: searchInputBar
+                property string providerId: ""
+
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 radius: 16
                 useStyleTransparent: false
-                onTextChanged: appPageHeaderUtils.startSearch(text);
+                onTextChanged:
+                {
+                    if (text === "") {
+                        sortMenu.sortMenuModel.reactivateProvider();
+                    } else {
+                        appPageHeaderUtils.activateProvider(providerId);
+                        appPageHeaderUtils.startSearch(text);
+                    }
+                }
+
             }
 
-            AppControls2.StyleBackground {
+            AppControls2.RoundButton {
-                Layout.preferredWidth: parent.height
+                Layout.preferredWidth: parent.height; Layout.preferredHeight: parent.height
-                Layout.preferredHeight: parent.height
+                buttonIcon: "image://appicon/edit-clear-symbolic"
-                radius: height / 2
+
-                useStyleTransparent: false
+                onClicked: {
-                Image {
+                    searchInputBar.clear();
-                    anchors.centerIn: parent
+                    appPageHeaderRoot.state = "normal";
-                    width: 16; height: 16
-                    source: "image://appicon/edit-clear-symbolic"
-                }
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        searchInputBar.clear();
-                        appPageHeaderRoot.state = "normal"
-                    }
                 }
             }
         }
@@ -99,6 +114,7 @@ Item {
                 Layout.fillHeight: true
                 verticalAlignment: Qt.AlignVCenter
                 text: appPageHeaderRoot.title
+                font.bold: true
             }
 
             ListView {
@@ -112,23 +128,13 @@ Item {
                 orientation: ListView.Horizontal
 
                 model: appPageHeaderUtils.model(PluginGroup.Button)
-                delegate: AppControls2.StyleBackground {
+                delegate: AppControls2.RoundButton {
-                    width: height
+                    width: height; height: ListView.view ? ListView.view.height : 0
-                    height: ListView.view ? ListView.view.height : 0
+                    buttonIcon: model.icon
-                    radius: height / 2
+
-                    useStyleTransparent: false
+                    onClicked: {
-                    Image {
+                        appPageHeaderRoot.state = "search";
-                        width: parent.height / 2
+                        searchInputBar.providerId = model.id;
-                        height: parent.height / 2
-                        anchors.centerIn: parent
-                        source: model.icon
-                    }
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            appPageHeaderRoot.state = "search"
-                            appPageHeaderUtils.activateProvider(model.id);
-                        }
                     }
                 }
             }
@@ -139,23 +145,13 @@ Item {
                 Layout.rightMargin: 8
                 Layout.alignment: Qt.AlignVCenter
 
-                AppControls2.StyleBackground {
+                AppControls2.RoundButton {
-                    width: 32
+                    id: providerIcon
-                    height: width
+                    width: 32; height: width
-                    radius: height / 2
+                    buttonIcon: "image://appicon/ukui-selected"
-                    useStyleTransparent: false
+
-                    Image {
+                    onClicked: {
-                        id: providerIcon
+                        sortMenu.sortMenuModel.autoSwitchProvider();
-                        width: parent.height / 2
-                        height: parent.height / 2
-                        anchors.centerIn: parent
-                        source: "image://appicon/ukui-selected"
-                    }
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            sortMenu.sortMenuModel.autoSwitchProvider();
-                        }
                     }
                 }
 
@@ -175,7 +171,7 @@ Item {
                 }
 
                 function updateProviderIcon() {
-                    providerIcon.source = sortMenu.sortMenuModel.currentProviderIcon();
+                    providerIcon.buttonIcon = sortMenu.sortMenuModel.currentProviderIcon();
                 }
 
                 Component.onCompleted: {

qml/AppUI/SearchInputBar.qml

@@ -19,7 +19,7 @@
 import QtQuick 2.0
 import QtQuick.Controls 2.5
 import QtQuick.Layouts 1.12
-
+import org.ukui.menu.core 1.0
 import AppControls2 1.0 as AppControls2
 
 AppControls2.StyleBackground {
@@ -27,6 +27,10 @@ AppControls2.StyleBackground {
     function clear() {
         textInput.clear();
     }
+    alpha: 0.04
+    useStyleTransparent: false
+    paletteRole: Palette.Text
+    border.width: textInput.activeFocus ? 1 : 0
 
     RowLayout {
         anchors.fill: parent
@@ -49,14 +53,25 @@ AppControls2.StyleBackground {
         Item {
             Layout.fillWidth: true
             Layout.fillHeight: true
-            clip: true
+
             TextInput {
                 id: textInput
+                clip: true
                 anchors.fill: parent
                 selectByMouse: true
-                selectionColor: "red"
+                selectionColor: "lightblue"
                 verticalAlignment: TextInput.AlignVCenter
                 font.pixelSize: 14
+                focus: parent.visible;
+            }
+
+            Text {
+                anchors.fill: parent
+                text: qsTr("Search App")
+                visible: textInput.contentWidth === 0
+                font.pixelSize: textInput.font.pixelSize
+                verticalAlignment: TextInput.AlignVCenter
+                color: Qt.rgba(0,0,0,0.25)
             }
         }
     }

qml/AppUI/Sidebar.qml

@@ -63,14 +63,6 @@ Item {
             }
         }
 
-        AppControls2.StyleBackground {
-            Layout.fillWidth: true
-            Layout.preferredHeight: 1
-            useStyleTransparent: false
-            alpha: 0.15
-            paletteRole: Palette.Text
-        }
-
         Item {
             Layout.fillWidth: true
             Layout.fillHeight: true

qml/extensions/FavoriteExtension.qml

@@ -33,6 +33,16 @@ UkuiMenuExtension {
         anchors.fill: parent
         hoverEnabled: true
 
+        AppControls2.StyleBackground {
+            anchors.top: parent.top
+            width: parent.width; height: 1
+            useStyleTransparent: false
+            alpha: 0.15
+            paletteRole: Palette.Text
+            visible: favoriteView.contentY > 0
+            z: 1
+        }
+
         GridView {
             id: favoriteView
             anchors.fill: parent

qml/extensions/RecentFileExtension.qml

@@ -19,6 +19,7 @@
 import QtQuick 2.0
 import QtQuick.Controls 2.5
 import org.ukui.menu.extension 1.0
+import org.ukui.menu.core 1.0
 import AppControls2 1.0 as AppControls2
 
 UkuiMenuExtension {
@@ -43,6 +44,16 @@ UkuiMenuExtension {
                 }
             }
 
+            AppControls2.StyleBackground {
+                anchors.top: parent.top
+                width: parent.width; height: 1
+                useStyleTransparent: false
+                alpha: 0.15
+                paletteRole: Palette.Text
+                visible: recentFileView.contentY > 0
+                z: 1
+            }
+
             ListView {
                 id: recentFileView
                 anchors.fill: parent

qml/qml.qrc

@@ -24,5 +24,6 @@
         <file>extensions/FolderExtension.qml</file>
         <file>extensions/RecentFileExtension.qml</file>
         <file>extensions/FavoriteExtension.qml</file>
+        <file>AppControls2/RoundButton.qml</file>
     </qresource>
 </RCC>