内容界面
parent
e5cb5eb901
commit
32198c2026
|
|
@ -92,6 +92,7 @@ FluWindow {
|
|||
Layout.topMargin: 45
|
||||
Layout.bottomMargin: 4
|
||||
Layout.rightMargin: 4
|
||||
type: "video"
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
horizontalCenter: button_share.horizontalCenter
|
||||
top: button_share.bottom
|
||||
}
|
||||
Layout.alignment: button_share.Center
|
||||
Layout.topMargin: -5
|
||||
}
|
||||
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 {
|
||||
horizontalCenter: button_favorite.horizontalCenter
|
||||
top: button_favorite.bottom
|
||||
}
|
||||
Layout.alignment: button_favorite.Center
|
||||
Layout.topMargin: -5
|
||||
}
|
||||
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 {
|
||||
horizontalCenter: button_like.horizontalCenter
|
||||
top: button_like.bottom
|
||||
}
|
||||
Layout.alignment: button_like.Center
|
||||
Layout.topMargin: -5
|
||||
}
|
||||
anchors {
|
||||
verticalCenter: text_title.verticalCenter
|
||||
|
|
@ -122,34 +126,50 @@ 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluMediaPlayer {
|
||||
Loader {
|
||||
id: content_view
|
||||
Layout.fillWidth: true
|
||||
sourceComponent: video_view
|
||||
}
|
||||
|
||||
Text {
|
||||
id: textMd
|
||||
text: contentPage.contentMd
|
||||
textFormat: TextEdit.MarkdownText
|
||||
focus: true
|
||||
Component {
|
||||
id: video_view
|
||||
FluMediaPlayer {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
WebEngineView {
|
||||
id: sitemonitoryView
|
||||
backgroundColor: "transparent"
|
||||
implicitHeight: 200
|
||||
Layout.fillWidth: true
|
||||
settings.javascriptEnabled: true
|
||||
settings.pluginsEnabled: true
|
||||
url: "https://www.baidu.com"
|
||||
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"
|
||||
}
|
||||
}
|
||||
|
||||
FluArea {
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText {
|
||||
Layout.topMargin: 10
|
||||
text: "笔记"
|
||||
font {
|
||||
pointSize: 15
|
||||
bold: true
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 50
|
||||
FluText {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue