AicsKnowledgeBase_client/AicsKnowledgeBase/qml/page/ContentPage.qml

246 lines
7.6 KiB
QML
Raw Normal View History

2023-06-30 21:30:04 +08:00
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtWebEngine 1.2
import FluentUI
2023-06-30 23:31:28 +08:00
FluArea {
2023-07-02 12:54:04 +08:00
id: content_area
2023-06-30 23:31:28 +08:00
paddings: 0
2023-07-02 15:58:02 +08:00
backgroundColor: "#f9f9f9"
property string type: ""
2023-07-02 12:54:04 +08:00
property int knowledgeFileId
signal download(string knowledgeFileId)
signal clickTags(string tagName)
2023-06-30 21:30:04 +08:00
2023-06-30 23:31:28 +08:00
// paddings: {
// top: 10
// right: 0
// bottom: 10
// left: 10
// }
FluScrollablePage {
2023-07-02 12:54:04 +08:00
id: content_page
2023-06-30 23:31:28 +08:00
anchors.fill: parent
leftPadding: 10
topPadding: 10
rightPadding: 10
bottomPadding: 0
2023-06-30 21:30:04 +08:00
2023-06-30 23:31:28 +08:00
property int likeCount: 0
property int favoriteCount: 0
property int shareCount: 0
property int browsCount: 555
property bool isLike: false
property bool isFavorite: false
2023-07-02 12:54:04 +08:00
property bool isDownload: false
2023-06-30 23:31:28 +08:00
property double fileSize: 455
property list<string> tags: ["tag 1", "tag 2", "tag 3"]
property date publishTime: new Date()
property string brief: "这是一个简介"
2023-06-30 21:30:04 +08:00
2023-06-30 23:31:28 +08:00
Component.onCompleted: {
console.log(content_area.type)
if (content_area.type == "video") {
2023-07-02 12:54:04 +08:00
content_view.sourceComponent = video_view
} else if (content_area.type == "md") {
2023-07-02 12:54:04 +08:00
content_view.sourceComponent = text_view
} else {
content_view.sourceComponent = other_view
}
2023-06-30 21:30:04 +08:00
}
2023-06-30 23:31:28 +08:00
Item {
Layout.fillWidth: true
implicitHeight: 50
2023-06-30 21:30:04 +08:00
FluText {
2023-06-30 23:31:28 +08:00
id: text_title
padding: 10
text: "文章标题"
font {
pointSize: 15
bold: true
2023-06-30 21:30:04 +08:00
}
}
2023-06-30 23:31:28 +08:00
ColumnLayout {
id: layout_share
FluIconButton {
id: button_share
iconSize: 15
iconSource: FluentIcons.Share
2023-07-02 12:54:04 +08:00
text: content_page.shareCount.toString()
2023-06-30 23:31:28 +08:00
}
FluText {
id: text_share
2023-07-02 12:54:04 +08:00
text: content_page.shareCount
2023-06-30 23:31:28 +08:00
font.pointSize: 8
2023-07-02 12:54:04 +08:00
Layout.alignment: button_share.Center
Layout.topMargin: -5
2023-06-30 23:31:28 +08:00
}
anchors {
verticalCenter: text_title.verticalCenter
right: parent.right
}
2023-06-30 21:30:04 +08:00
}
2023-06-30 23:31:28 +08:00
ColumnLayout {
id: layout_favorite
FluIconButton {
id: button_favorite
iconSize: 15
2023-07-02 12:54:04 +08:00
iconSource: content_page.isFavorite ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
2023-06-30 23:31:28 +08:00
}
FluText {
id: text_favorite
2023-07-02 12:54:04 +08:00
text: content_page.favoriteCount
2023-06-30 23:31:28 +08:00
font.pointSize: 8
2023-07-02 12:54:04 +08:00
Layout.alignment: button_favorite.Center
Layout.topMargin: -5
2023-06-30 23:31:28 +08:00
}
2023-06-30 21:30:04 +08:00
anchors {
2023-06-30 23:31:28 +08:00
verticalCenter: text_title.verticalCenter
right: layout_share.left
2023-06-30 21:30:04 +08:00
}
}
2023-06-30 23:31:28 +08:00
ColumnLayout {
id: layout_like
FluIconButton {
id: button_like
iconSize: 15
2023-07-02 12:54:04 +08:00
iconSource: content_page.isLike ? FluentIcons.HeartFill : FluentIcons.Heart
2023-06-30 23:31:28 +08:00
}
FluText {
id: text_like
2023-07-02 12:54:04 +08:00
text: content_page.favoriteCount
2023-06-30 23:31:28 +08:00
font.pointSize: 8
2023-07-02 12:54:04 +08:00
Layout.alignment: button_like.Center
Layout.topMargin: -5
2023-06-30 23:31:28 +08:00
}
anchors {
verticalCenter: text_title.verticalCenter
right: layout_favorite.left
}
2023-06-30 21:30:04 +08:00
}
FluIconButton {
2023-06-30 23:31:28 +08:00
id: button_download
iconSize: 25
2023-07-02 12:54:04 +08:00
iconSource: content_page.isDownload ? FluentIcons.OEM : FluentIcons.Download
2023-06-30 21:30:04 +08:00
anchors {
2023-06-30 23:31:28 +08:00
verticalCenter: text_title.verticalCenter
right: layout_like.left
rightMargin: 20
2023-06-30 21:30:04 +08:00
}
2023-07-02 12:54:04 +08:00
onClicked: {
emit: content_area.download(content_area.knowledgeFileId)
2023-07-02 12:54:04 +08:00
}
2023-06-30 21:30:04 +08:00
}
}
2023-07-02 12:54:04 +08:00
Loader {
id: content_view
2023-06-30 23:31:28 +08:00
Layout.fillWidth: true
2023-07-02 12:54:04 +08:00
sourceComponent: video_view
2023-06-30 23:31:28 +08:00
}
2023-06-30 21:30:04 +08:00
2023-07-02 12:54:04 +08:00
Component {
id: video_view
FluMediaPlayer {
Layout.fillWidth: true
implicitHeight: 270
2023-07-02 12:54:04 +08:00
}
2023-06-30 23:31:28 +08:00
}
2023-07-02 12:54:04 +08:00
Component {
id: text_view
Text {
id: text_md
text: content_page.contentMd
textFormat: TextEdit.MarkdownText
focus: true
}
}
Component {
id: other_view
WebEngineView {
Layout.fillWidth: true
id: sitemonitory_view
backgroundColor: "transparent"
implicitHeight: 200
settings.javascriptEnabled: true
settings.pluginsEnabled: true
url: "https://www.baidu.com"
}
2023-06-30 23:31:28 +08:00
}
2023-06-30 21:30:04 +08:00
2023-06-30 23:31:28 +08:00
FluArea {
Layout.fillWidth: true
implicitHeight: 100
ColumnLayout {
RowLayout {
FluText {
padding: 10
2023-07-02 12:54:04 +08:00
text: content_page.publishTime.toDateString()
2023-06-30 23:31:28 +08:00
}
FluText {
padding: 10
2023-07-02 12:54:04 +08:00
text: content_page.fileSize.toString() + "MB"
2023-06-30 23:31:28 +08:00
}
FluText {
padding: 10
2023-07-02 12:54:04 +08:00
text: content_page.browsCount.toString() + "浏览量"
2023-06-30 23:31:28 +08:00
}
2023-06-30 21:30:04 +08:00
}
2023-06-30 23:31:28 +08:00
FluText {
Layout.topMargin: -2
Layout.leftMargin: 10
2023-07-02 12:54:04 +08:00
text: content_page.brief
2023-06-30 21:30:04 +08:00
}
2023-06-30 23:31:28 +08:00
RowLayout {
Layout.topMargin: 2
Layout.leftMargin: 5
Repeater {
2023-07-02 12:54:04 +08:00
model: content_page.tags
2023-06-30 23:31:28 +08:00
delegate: Button {
Layout.margins: 2
2023-07-02 12:54:04 +08:00
text: "#" + content_page.tags[index]
2023-06-30 23:31:28 +08:00
background: Rectangle {
implicitHeight: 10
implicitWidth: 10
color: FluColors.Grey20
radius: 10
}
2023-07-02 12:54:04 +08:00
onClicked: {
emit: content_area.clickTags(text)
}
2023-06-30 21:30:04 +08:00
}
}
}
}
}
2023-07-02 12:54:04 +08:00
Item {
Layout.fillWidth: true
implicitHeight: 50
FluText {
id: text_note
text: "笔记"
padding: 10
font {
2023-07-02 12:54:04 +08:00
pointSize: 15
bold: true
}
}
FluTextButton {
id: button_publish
text: "发布笔记"
hoverColor: "blue"
normalColor: "black"
anchors {
2023-07-02 12:54:04 +08:00
verticalCenter: text_note.verticalCenter
right: parent.right
}
2023-06-30 23:31:28 +08:00
}
2023-06-30 21:30:04 +08:00
}
}
}