内容界面

AicsKnowledgeBase/qml/MainWindow.qml

@@ -92,6 +92,7 @@ FluWindow {
             Layout.topMargin: 45
             Layout.bottomMargin: 4
             Layout.rightMargin: 4
+            type: "video"
         }
 
 

AicsKnowledgeBase/qml/component/NoteItem.qml

@@ -0,0 +1,78 @@
+import QtQuick 2.15
+import FluentUI
+import QtQuick.Layouts
+
+FluArea {
+    id: fileItem
+    property string uuid
+    property string title
+    property string brief
+    property string date
+    property int pageView
+    property var tags: []
+    property var notes: []
+    property int stars
+    property var colorList: ["blue", "green", "orange", "red", "yellow", "purple", "pink", "brown", "teal", "cyan", "gray", "darkgray"]
+    signal tagClicked(string tag)
+
+    ColumnLayout {
+        id: row
+        anchors.fill: parent
+        anchors.margins: 10
+        spacing: 10
+
+        ColumnLayout {
+            id: clickable
+            anchors.fill: parent
+            MouseArea {
+                anchors.fill: parent
+                onDoubleClicked: {
+                    fileItem.parent.doubleClicked()
+                }
+            }
+            FluText {
+                id: title
+                text: fileItem.title
+                font{
+                    pointSize: 12
+                    bold: true
+                }
+            }
+            FluText {
+                id: brief
+                text: fileItem.brief
+            }
+            RowLayout {
+                id: infoRow
+                visible: !fileItem.isDir
+                FluText {
+                    id: date
+                    text: fileItem.date
+                }
+                FluText {
+                    id: pageView
+                    text: fileItem.pageView + "浏览"
+                }
+                FluText {
+                    id: stars
+                    text: fileItem.stars + "收藏"
+                }
+            }
+        }
+        RowLayout {
+            visible: !fileItem.isDir
+            Repeater {
+                model: fileItem.tags
+                delegate: FluTextButton {
+                    text: "#" + fileItem.tags[index]
+                    normalColor: colorList[index % colorList.length]
+                    font.pixelSize: 12
+                    Layout.preferredWidth: 50
+                    onClicked: {
+                        emit: tagClicked(text)
+                    }
+                }
+            }
+        }
+    }
+}

AicsKnowledgeBase/qml/page/ContentPage.qml

@@ -7,8 +7,13 @@ import QtWebEngine 1.2
 import FluentUI
 
 FluArea {
+    id: content_area
     paddings: 0
     color: "#f9f9f9"
+    property string type: null
+    property int knowledgeFileId
+    signal download(string knowledgeFileId)
+    signal clickTags(string tagName)
 
     //    paddings: {
     //        top: 10
@@ -17,28 +22,33 @@ FluArea {
     //        left: 10
     //    }
     FluScrollablePage {
-        id: contentPage
+        id: content_page
         anchors.fill: parent
         leftPadding: 10
         topPadding: 10
         rightPadding: 10
         bottomPadding: 0
 
-        property int knowledgeFileId
         property int likeCount: 0
         property int favoriteCount: 0
         property int shareCount: 0
         property int browsCount: 555
         property bool isLike: false
         property bool isFavorite: false
+        property bool isDownload: false
         property double fileSize: 455
         property list<string> tags: ["tag 1", "tag 2", "tag 3"]
         property date publishTime: new Date()
         property string brief: "这是一个简介"
-        property string type: null
-        property var contentShow
 
         Component.onCompleted: {
+            if(content_area.type == "video") {
+                content_view.sourceComponent = video_view
+            } else if(content_area.type == "md") {
+                content_view.sourceComponent = text_view
+            } else {
+                content_view.sourceComponent = other_view
+            }
 
         }
 
@@ -61,16 +71,14 @@ FluArea {
                     id: button_share
                     iconSize: 15
                     iconSource: FluentIcons.Share
-                    text: contentPage.shareCount.toString()
+                    text: content_page.shareCount.toString()
                 }
                 FluText {
                     id: text_share
-                    text: contentPage.shareCount
+                    text: content_page.shareCount
                     font.pointSize: 8
-                    anchors {
+                    Layout.alignment: button_share.Center
-                        horizontalCenter: button_share.horizontalCenter
+                    Layout.topMargin: -5
-                        top: button_share.bottom
-                    }
                 }
                 anchors {
                     verticalCenter: text_title.verticalCenter
@@ -82,16 +90,14 @@ FluArea {
                 FluIconButton {
                     id: button_favorite
                     iconSize: 15
-                    iconSource: contentPage.isFavorite ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
+                    iconSource: content_page.isFavorite ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
                 }
                 FluText {
                     id: text_favorite
-                    text: contentPage.favoriteCount
+                    text: content_page.favoriteCount
                     font.pointSize: 8
-                    anchors {
+                    Layout.alignment: button_favorite.Center
-                        horizontalCenter: button_favorite.horizontalCenter
+                    Layout.topMargin: -5
-                        top: button_favorite.bottom
-                    }
                 }
                 anchors {
                     verticalCenter: text_title.verticalCenter
@@ -103,16 +109,14 @@ FluArea {
                 FluIconButton {
                     id: button_like
                     iconSize: 15
-                    iconSource: contentPage.isLike ? FluentIcons.HeartFill : FluentIcons.Heart
+                    iconSource: content_page.isLike ? FluentIcons.HeartFill : FluentIcons.Heart
                 }
                 FluText {
                     id: text_like
-                    text: contentPage.favoriteCount
+                    text: content_page.favoriteCount
                     font.pointSize: 8
-                    anchors {
+                    Layout.alignment: button_like.Center
-                        horizontalCenter: button_like.horizontalCenter
+                    Layout.topMargin: -5
-                        top: button_like.bottom
-                    }
                 }
                 anchors {
                     verticalCenter: text_title.verticalCenter
@@ -122,35 +126,51 @@ FluArea {
             FluIconButton {
                 id: button_download
                 iconSize: 25
-                iconSource: FluentIcons.Download
+                iconSource: content_page.isDownload ? FluentIcons.OEM : FluentIcons.Download
                 anchors {
                     verticalCenter: text_title.verticalCenter
                     right: layout_like.left
                     rightMargin: 20
                 }
-                onClicked: function () {}
+                onClicked: {
+                    emit:  content_area.download(content_area.knowledgeFileId);
+                }
             }
         }
 
+        Loader {
+            id: content_view
+            Layout.fillWidth: true
+            sourceComponent: video_view
+        }
+
+        Component {
+            id: video_view
             FluMediaPlayer {
                 Layout.fillWidth: true
             }
-
+        }
+        Component {
+            id: text_view
             Text {
-            id: textMd
+                id: text_md
-            text: contentPage.contentMd
+                text: content_page.contentMd
                 textFormat: TextEdit.MarkdownText
                 focus: true
             }
+        }
+        Component {
+            id: other_view
             WebEngineView {
-            id: sitemonitoryView
+                Layout.fillWidth: true
+                id: sitemonitory_view
                 backgroundColor: "transparent"
                 implicitHeight: 200
-            Layout.fillWidth: true
                 settings.javascriptEnabled: true
                 settings.pluginsEnabled: true
                 url: "https://www.baidu.com"
             }
+        }
 
         FluArea {
             Layout.fillWidth: true
@@ -159,48 +179,69 @@ FluArea {
                 RowLayout {
                     FluText {
                         padding: 10
-                        text: contentPage.publishTime.toDateString()
+                        text: content_page.publishTime.toDateString()
                     }
                     FluText {
                         padding: 10
-                        text: contentPage.fileSize.toString() + "MB"
+                        text: content_page.fileSize.toString() + "MB"
                     }
                     FluText {
                         padding: 10
-                        text: contentPage.browsCount.toString() + "浏览量"
+                        text: content_page.browsCount.toString() + "浏览量"
                     }
                 }
                 FluText {
                     Layout.topMargin: -2
                     Layout.leftMargin: 10
-                    text: contentPage.brief
+                    text: content_page.brief
                 }
                 RowLayout {
                     Layout.topMargin: 2
                     Layout.leftMargin: 5
                     Repeater {
-                        model: contentPage.tags
+                        model: content_page.tags
                         delegate: Button {
                             Layout.margins: 2
-                            text: "#" + contentPage.tags[index]
+                            text: "#" + content_page.tags[index]
                             background: Rectangle {
                                 implicitHeight: 10
                                 implicitWidth: 10
                                 color: FluColors.Grey20
                                 radius: 10
                             }
+                            onClicked: {
+                                emit: content_area.clickTags(text)
                             }
                         }
                     }
                 }
             }
+        }
+        Item {
+            Layout.fillWidth: true
+            implicitHeight: 50
             FluText {
-            Layout.topMargin: 10
+                id: text_note
                 text: "笔记"
+                padding: 10
                 font{
                     pointSize: 15
                     bold: true
                 }
             }
+            FluTextButton {
+                id: button_publish
+                text: "发布笔记"
+                hoverColor: "blue"
+                normalColor: "black"
+                anchors{
+                    verticalCenter: text_note.verticalCenter
+                    right: parent.right
+                }
+            }
+        }
+
+
+
     }
 }