内容详情界面布局

AicsKnowledgeBase/CMakeLists.txt

@@ -6,7 +6,7 @@ set(CMAKE_AUTOMOC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 set(CMAKE_CXX_STANDARD 20)
 
-find_package(Qt6 COMPONENTS Quick REQUIRED)
+find_package(Qt6 COMPONENTS Quick WebEngineQuick REQUIRED)
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES src/*.cpp src/*.h)
@@ -52,6 +52,7 @@ target_include_directories(AicsKnowledgeBase PRIVATE
 
 target_link_libraries(AicsKnowledgeBase PRIVATE
         Qt6::Quick
+        Qt::WebEngineQuick
         fluentuiplugin
         FramelessHelper::Core
         FramelessHelper::Quick

AicsKnowledgeBase/qml/MainWindow.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls.Basic
 import FluentUI
 import org.wangwenx190.FramelessHelper
 import "qrc:///AicsKnowledgeBase/qml/global"
+import "qrc:///AicsKnowledgeBase/qml/page"
 
 FluWindow {
     id: window
@@ -52,6 +53,14 @@ FluWindow {
             }
         }
 
+        ContentPage{
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            topPadding: 10
+            Layout.topMargin: 20
+
+        }
+        /*
         FluArea {
             Layout.fillHeight: true
             Layout.fillWidth: true
@@ -64,7 +73,7 @@ FluWindow {
                 Layout.topMargin: 20
                 text: "Content"
             }
-        }
+        }*/
     }
 
     FramelessHelper {

AicsKnowledgeBase/qml/page/ContentPage.qml

@@ -0,0 +1,189 @@
+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
+        }
+    }
+}

AicsKnowledgeBase/src/main.cpp

@@ -4,6 +4,7 @@
 #include <QDir>
 #include <QQuickWindow>
 #include <QProcess>
+#include <QtWebEngineQuick/qtwebenginequickglobal.h>
 #include <FramelessHelper/Quick/framelessquickmodule.h>
 #include <FramelessHelper/Core/private/framelessconfig_p.h>
 #include "HttpClient.h"
@@ -14,6 +15,10 @@ int main(int argc, char* argv[])
 {
     //将样式设置为Basic，不然会导致组件显示异常
     qputenv("QT_QUICK_CONTROLS_STYLE", "Basic");
+
+    QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
+    QtWebEngineQuick::initialize();
+
     FramelessHelper::Quick::initialize();
     QGuiApplication app(argc, argv);
     app.setOrganizationName("HFUT Software");
@@ -36,7 +41,7 @@ int main(int argc, char* argv[])
 	qmlRegisterSingletonInstance<HttpClient>("AicsKB.HttpClient", 1, 0, "HttpClient", httpClient);
 
 
-    const QUrl url(u"qrc:/AicsKnowledgeBase/qml/component/FileList.qml"_qs);
+    const QUrl url(u"qrc:/AicsKnowledgeBase/qml/App.qml"_qs);
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
         &app, [url](QObject* obj, const QUrl& objUrl) {
             if (!obj && url == objUrl)

AicsKnowledgeBase/test.md

@@ -0,0 +1,21 @@
+### 欢迎使用Markdown
+
+##### 新增图片上传功能
+
+现在可以在文章中插入图片！
+
+- 您可以插入外链图片，或上传本地图片到文档中。
+- 可上传的单张图片最大20M，支持PNG、JPG格式。
+- 若有其他疑问，欢迎咨询官网在线客服。
+
+ 
+
+### Welcome to the Markdown
+
+##### New feature! Insert pictures in your articles now!
+
+You can insert pictures from external links, or upload ones.
+
+The maximum size of the picture to upload is 20M. PNG and JPG are better.
+
+Have any other questions, please contact our official customer service.