AicsKnowledgeBase_client/AicsKnowledgeBase/qml/page/ContentPage.qml

import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtWebEngine 1.2
import FluentUI

FluScrollablePage {
    id: contentPage
    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 double fileSize: 455
    property list<string> tags: ["tage 1", "tage 2", "tage 3"]
    property date publishTime: new Date()
    property string brief: "这是一个简介"
    property string type: null
    property var contentShow

    Component.onCompleted: {

    }

    FluArea {
        Layout.fillWidth: true
        implicitHeight: 50
        Layout.topMargin: 15

        FluText {
            id: text_title
            padding: 10
            text: "文章标题"
            font{
                pointSize: 15
                bold: true
            }
        }
        ColumnLayout {
            id: layout_share
            FluIconButton {
                id: button_share
                iconSize: 15
                iconSource: FluentIcons.Share
                text: contentPage.shareCount.toString()
            }
            FluText {
                id: text_share
                text: contentPage.shareCount
                font.pointSize: 8
                anchors {
                    horizontalCenter: button_share.horizontalCenter
                    top: button_share.bottom
                }
            }
            anchors{
                verticalCenter: text_title.verticalCenter
                right: parent.right
            }
        }
        ColumnLayout {
            id: layout_favorite
            FluIconButton {
                id: button_favorite
                iconSize: 15
                iconSource: contentPage.isFavorite ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
            }
            FluText {
                id: text_favorite
                text: contentPage.favoriteCount
                font.pointSize: 8
                anchors {
                    horizontalCenter: button_favorite.horizontalCenter
                    top: button_favorite.bottom
                }
            }
            anchors{
                verticalCenter: text_title.verticalCenter
                right: layout_share.left
            }
        }
        ColumnLayout {
            id: layout_like
            FluIconButton {
                id: button_like
                iconSize: 15
                iconSource: contentPage.isLike ? FluentIcons.HeartFill : FluentIcons.Heart
            }
            FluText {
                id: text_like
                text: contentPage.favoriteCount
                font.pointSize: 8
                anchors {
                    horizontalCenter: button_like.horizontalCenter
                    top: button_like.bottom
                }
            }
            anchors{
                verticalCenter: text_title.verticalCenter
                right: layout_favorite.left
            }
        }
        FluIconButton {
            id: button_download
            iconSize: 25
            iconSource: FluentIcons.Download
            anchors {
                verticalCenter: text_title.verticalCenter
                right: layout_like.left
                rightMargin: 20
            }
        }
    }

    FluMediaPlayer {
        Layout.fillWidth: true
    }

    Text {
        id: textMd
        text: contentPage.contentMd
        textFormat: TextEdit.MarkdownText
        focus: true
    }
    WebEngineView {
        id: sitemonitoryView
        backgroundColor: "transparent"
        implicitHeight: 200
        Layout.fillWidth: true
        settings.javascriptEnabled : true
        settings.pluginsEnabled:true
        url:"https://www.qt.io"
    }

    FluArea {
        Layout.fillWidth: true
        implicitHeight: 100
        ColumnLayout {
            RowLayout {
                FluText{
                    padding: 10
                    text: contentPage.publishTime.toDateString()
                }
                FluText{
                    padding: 10
                    text: contentPage.fileSize.toString() + "Mb"
                }
                FluText{
                    padding: 10
                    text: contentPage.browsCount.toString()+"浏览量"
                }
            }
            FluText{
                Layout.topMargin: -2
                Layout.leftMargin: 10
                text: contentPage.brief
            }
            RowLayout{
                Layout.topMargin: 2
                Layout.leftMargin: 5
                Repeater {
                    model: contentPage.tags
                    delegate: Button {
                        Layout.margins: 2
                        text: "#"+contentPage.tags[index]
                        background: Rectangle {
                            implicitHeight: 10
                            implicitWidth: 10
                            color: FluColors.Grey20
                            radius: 10
                        }
                    }
                }
            }
        }
    }
    FluText {
        Layout.topMargin: 10
        text: "笔记"
        font {
            pointSize: 15
            bold: true
        }
    }
}