diff --git a/AicsKnowledgeBase/qml/component/Tag.qml b/AicsKnowledgeBase/qml/component/Tag.qml
index 47cb448..5a609ab 100644
--- a/AicsKnowledgeBase/qml/component/Tag.qml
+++ b/AicsKnowledgeBase/qml/component/Tag.qml
@@ -4,6 +4,8 @@ import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
+import QtQml
+import "qrc:///AicsKnowledgeBase/qml/global"
 
 Rectangle {
     id: input
@@ -13,10 +15,32 @@ Rectangle {
 
     radius: 5
     clip: true
-    border.color: textInput.activeFocus ? "#268CDC":"#979592" //gray100
+
     ListModel { id: tagListModel }
     property ListModel tagList: tagListModel
+    property var tagMap:[]
+    property var presetsTags:[]
+    property var presetsTagsItem:[]
 
+    Component.onCompleted: {
+        Request.get("tag?name",
+                    function(result, data){
+//                        console.log("success")
+//                        console.log(result)
+//                        console.log(data.length)
+                        for(var i =0;i<data.length;i++){
+                            tagMap.push([data[i].id,data[i].name])
+                            presetsTags.push(data[i].name)
+                            presetsTagsItem.push({title:data[i].name})
+                        }
+//                        console.log(tagMap)
+//                        console.log(presetsTags)
+                    },function (p1, p2) {
+//                        console.log("failure")
+//                        console.log(p1)
+//                        console.log(p2)
+                    })
+    }
 
     Row {
         x: 5
@@ -48,23 +72,23 @@ Rectangle {
             width: input.width - rowTag.width
             height: parent.height
 
-            TextField {
+            FluAutoSuggestBox{
                 id:textInput
-                placeholderText: qsTr("按回车键Enter创建标签")
+                anchors.verticalCenter: parent.verticalCenter
+                width: parent.width
+
+
+                placeholderText: "按回车键Enter创建标签"
+                Layout.preferredWidth: 300
+                //items:[{title:"前端"},{title:"后端"},{title:"数据库"}]
+                items: presetsTagsItem
 
                 onFocusChanged: {
                     text =""
                 }
 
-                anchors.verticalCenter: parent.verticalCenter
-                width: parent.width - 15
-                clip: true
-
-                background: Rectangle {
-                }
-
                 Keys.onReturnPressed: {
-                    var presetsTags = ["前端","后端","数据库"]
+
                     if (text.length === 0)
                         return
 
@@ -72,12 +96,10 @@ Rectangle {
                         text = ""
                         return
                     }
-
                     tagListModel.append({"tag": text})
                     //console.log(tagListModel.get(0))
                     text = ""
                 }
-
                 Keys.onPressed: {
                     if (event.key === Qt.Key_Backspace) {
                         if (text.length === 0 && tagListModel.count) {
@@ -86,7 +108,6 @@ Rectangle {
                     }
                 }
             }
-
         }
     }
 
diff --git a/AicsKnowledgeBase/qml/page/SearchPage.qml b/AicsKnowledgeBase/qml/page/SearchPage.qml
index 56cad27..677d2cb 100644
--- a/AicsKnowledgeBase/qml/page/SearchPage.qml
+++ b/AicsKnowledgeBase/qml/page/SearchPage.qml
@@ -8,6 +8,7 @@ import "qrc:///AicsKnowledgeBase/qml/global"
 import "qrc:///AicsKnowledgeBase/qml/component"
 
 FluArea {
+    id: searchPage
     property string url: ''
     backgroundColor: "#f9f9f9"
     Layout.fillHeight: true
@@ -19,14 +20,16 @@ FluArea {
     //        Layout.topMargin: 20
     //        text: "Search"
     //    }
+
     /*
        按标题，内容搜索
     */
-    ColumnLayout{
+    ColumnLayout {
 
         width: parent.width
-        RowLayout{
-            width:parent.width
+        RowLayout {
+            width: parent.width
+
             //            FluDropDownButton{
             //                id:select_model
             //                Layout.alignment: Qt.AlignLeft
@@ -52,105 +55,100 @@ FluArea {
             //                    }
             //                ]
             //            }
-
-            FluTextBox{
-                placeholderText:"对标题进行搜索……"
+            FluTextBox {
+                placeholderText: "对标题进行搜索……"
                 Layout.fillWidth: true
-
             }
-            FluIconButton{
+            FluIconButton {
                 Layout.alignment: Qt.AlignRight
-                iconSource:FluentIcons.Search
-                onClicked:{
+                iconSource: FluentIcons.Search
+                onClicked: {
                     var allTags = inputTags.getAllTags(tags.tagList)
-                    var allTagId =[]
+                    var allTagId = []
                     console.log(allTags)
 
                     for (var i = 0; i < allTags.length; i++) {
                         var url = "?name="
                         url = url + allTags[i]
                         console.log(url)
-                        Request.get(url,
-                                    function(result, data){
-                                        allTagId.push()
-                                    }
-
-                                    )
+                        Request.get(url, function (result, data) {
+                            allTagId.push()
+                        })
                     }
                 }
             }
-
         }
-        FluCheckBox{
-            id:searchTitleAndContent
-            text:"同时搜索简介和内容"
+        FluCheckBox {
+            id: searchTitleAndContent
+            text: "同时搜索简介和内容"
         }
 
         //按文件类型
-        RowLayout{
-            id:selectFormat
-            width:parent.width
-            FluText{
+        RowLayout {
+            id: selectFormat
+            width: parent.width
+            FluText {
                 Layout.alignment: Qt.AlignLeft
-                text:"类型: "
+                text: "类型: "
             }
-            FluCheckBox{
-                id:selectAllFormat
-                text:"all"
-                Component.onCompleted:{
+            FluCheckBox {
+                id: selectAllFormat
+                text: "all"
+                Component.onCompleted: {
                     clicked()
                 }
-                onClicked:{
-                    selectVideo.checked=true
-                    selectDoc.checked=true
-                    selectAudio.checked=true
+                onClicked: {
+                    selectVideo.checked = true
+                    selectDoc.checked = true
+                    selectAudio.checked = true
                 }
             }
-            FluCheckBox{
-                id:selectVideo
-                text:"Video"
-                onClicked:{
+            FluCheckBox {
+                id: selectVideo
+                text: "Video"
+                onClicked: {
                     selectFormat.setAllStatus()
                 }
             }
-            FluCheckBox{
-                id:selectDoc
-                text:"Doc"
-                onClicked:{
+            FluCheckBox {
+                id: selectDoc
+                text: "Doc"
+                onClicked: {
                     selectFormat.setAllStatus()
                 }
             }
 
-            FluCheckBox{
-                id:selectAudio
-                text:"Audio"
-                onClicked:{
+            FluCheckBox {
+                id: selectAudio
+                text: "Audio"
+                onClicked: {
                     selectFormat.setAllStatus()
                 }
             }
 
             function setAllStatus() {
-                selectAllFormat.checked = selectVideo.checked && selectDoc.checked && selectAudio.checked
+                selectAllFormat.checked = selectVideo.checked
+                        && selectDoc.checked && selectAudio.checked
             }
         }
 
-        RowLayout{
-            id:inputTags
-            width:parent.width
+        RowLayout {
+            id: inputTags
+            width: parent.width
             height: 32
-            FluText{
+            FluText {
                 Layout.alignment: Qt.AlignLeft
-                text:"标签: "
+                text: "标签: "
             }
 
-            Tag{
-                id:tags
+            Tag {
+                id: tags
                 width: 290
             }
-            function getAllTags(tagList){
-                var allTags=[];
+            function getAllTags(tagList) {
+                var allTags = []
                 for (var i = 0; i < tagList.count; i++) {
-                    var item = tagList.get(i);
+                    var item = tagList.get(i)
                     allTags.push(item.tag)
                 }
                 return allTags
@@ -200,4 +198,45 @@ FluArea {
             }
         }
     }
+    function getKnowledgeDetail(uuid, title, brief, tags) {
+        var raw = Request.getAwait("/knowledget/" + uuid)
+        var data = JSON.parse(raw)
+        var item = {
+            "uuid": uuid,
+            "title": title,
+            "brief": brief,
+            "isDir": false,
+            "date": data.createTime,
+            "fuuid": data.parent.id,
+            "pageView": data.knowledgeFileAttribute.pageView,
+            "stars": data.knowledgeFileAttribute.stars,
+            "size": data.knowledgeFileAttribute.size,
+            "type": getType(data.knowledgeFileAttribute.suffix),
+            "tags": tags
+        }
+    }
+    function getType(suffix) {
+        if (suffix === "ppt" || suffix === "pptx")
+            return "PPT"
+        else if (suffix === "doc" || suffix === "docx")
+            return "WORD"
+        else if (suffix === "pdf")
+            return "PDF"
+        else if (suffix === "txt")
+            return "TXT"
+        else if (suffix === "xls" || suffix === "xlsx")
+            return "EXCEL"
+        else if (suffix === "zip" || suffix === "rar")
+            return "ZIP"
+        else if (suffix === "png" || suffix === "jpg" || suffix === "jpeg"
+                 || suffix === "gif")
+            return "IMAGE"
+        else if (suffix === "mp3" || suffix === "wav")
+            return "AUDIO"
+        else if (suffix === "mp4" || suffix === "avi" || suffix === "rmvb"
+                 || suffix === "rm" || suffix === "wmv" || suffix === "mkv")
+            return "VIDEO"
+        else
+            return "OTHER"
+    }
 }