From 32198c2026b11f985337e7dd6c63c1fb7a94c134 Mon Sep 17 00:00:00 2001 From: "yang.yongquan" <3395816735@qq.com> Date: Sun, 2 Jul 2023 12:54:04 +0800 Subject: [PATCH] =?UTF-8?q?=E5=86=85=E5=AE=B9=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AicsKnowledgeBase/qml/MainWindow.qml | 1 + AicsKnowledgeBase/qml/component/NoteItem.qml | 78 ++++++++++ AicsKnowledgeBase/qml/page/ContentPage.qml | 141 ++++++++++++------- 3 files changed, 170 insertions(+), 50 deletions(-) create mode 100644 AicsKnowledgeBase/qml/component/NoteItem.qml diff --git a/AicsKnowledgeBase/qml/MainWindow.qml b/AicsKnowledgeBase/qml/MainWindow.qml index 79daf76..0ec77a2 100644 --- a/AicsKnowledgeBase/qml/MainWindow.qml +++ b/AicsKnowledgeBase/qml/MainWindow.qml @@ -92,6 +92,7 @@ FluWindow { Layout.topMargin: 45 Layout.bottomMargin: 4 Layout.rightMargin: 4 + type: "video" } diff --git a/AicsKnowledgeBase/qml/component/NoteItem.qml b/AicsKnowledgeBase/qml/component/NoteItem.qml new file mode 100644 index 0000000..94ffc06 --- /dev/null +++ b/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) + } + } + } + } + } +} diff --git a/AicsKnowledgeBase/qml/page/ContentPage.qml b/AicsKnowledgeBase/qml/page/ContentPage.qml index b00a766..a9c79a6 100644 --- a/AicsKnowledgeBase/qml/page/ContentPage.qml +++ b/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 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 + } } } + + + } }