AicsKnowledgeBase_client/AicsKnowledgeBase/qml/page/NoteEditPage.qml

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

FluArea {
    id: edit_area
    paddings: 0
    backgroundColor: "#f9f9f9"
    property string noteId: "234"
    property string contentMd: ""
    property bool isEditing: false
    property bool isEditable: false
    Layout.fillWidth: true

    FluScrollablePage {
        id: edit_page
        anchors.fill: parent
        leftPadding: 5
        topPadding: 5
        rightPadding: 5
        bottomPadding: 0

        Component.onCompleted: {
            if (isEditing) {
                button_edit.visible = false
                button_save.visible = true
                button_preview.visible = true
                button_subfield.visible = true
                button_editing.visible = true
                button_cancel.visible = true
                md_show_view.isEditShowing = true
                md_show_view.isPreviewShowing = false
            } else {
                button_edit.visible = edit_area.isEditable
                button_save.visible = false
                button_preview.visible = false
                button_subfield.visible = false
                button_editing.visible = false
                button_cancel.visible = false
                md_show_view.isEditShowing = false
                md_show_view.isPreviewShowing = true
            }

            textArea_edit.text = edit_area.contentMd

            edit_area.contentMd = Qt.binding(function () {
                return textArea_edit.text
            })
            textArea_preview.text = Qt.binding(function () {
                return edit_area.contentMd
            })
        }

        Item {
            Layout.fillWidth: true
            implicitHeight: 30

            FluIconButton {
                id: button_edit
                iconSource: FluentIcons.Edit
                iconSize: 12
                visible: edit_area.isEditable
                anchors {
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                }
                onClicked: {
                    button_edit.visible = false
                    button_save.visible = true
                    button_preview.visible = true
                    button_subfield.visible = true
                    button_editing.visible = true
                    button_cancel.visible = true
                }
            }

            FluIconButton {
                id: button_cancel
                iconSource: FluentIcons.Cancel
                iconSize: 12
                text: "取消"
                visible: false
                anchors {
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                }
                onClicked: {
                    button_edit.visible = edit_area.isEditable
                    button_save.visible = false
                    button_preview.visible = false
                    button_subfield.visible = false
                    button_editing.visible = false
                    button_cancel.visible = false
                }
            }

            FluIconButton {
                id: button_save
                iconSource: FluentIcons.Save
                iconSize: 12
                text: "保存"
                visible: false
                anchors {
                    right: button_cancel.left
                    verticalCenter: parent.verticalCenter
                }
            }

            FluIconButton {
                id: button_preview
                iconSource: FluentIcons.PreviewLink
                iconSize: 12
                text: "预览"
                visible: false
                onClicked: {
                    md_show_view.isEditShowing = false
                    md_show_view.isPreviewShowing = true
                }

                anchors {
                    right: button_save.left
                    verticalCenter: parent.verticalCenter
                }
            }

            FluIconButton {
                id: button_subfield
                iconSource: md_show_view.isPreviewShowing ? FluentIcons.ClosePane : FluentIcons.OpenPane
                iconSize: 12
                text: "分栏"
                visible: false
                onClicked: {
                    if (md_show_view.isEditShowing ^ md_show_view.isPreviewShowing) {
                        md_show_view.isEditShowing = true
                        md_show_view.isPreviewShowing = true
                    } else {
                        md_show_view.isEditShowing = true
                        md_show_view.isPreviewShowing = false
                    }
                }
                anchors {
                    right: button_preview.left
                    verticalCenter: parent.verticalCenter
                }
            }

            FluIconButton {
                id: button_editing
                iconSource: FluentIcons.ClipboardList
                iconSize: 12
                text: "编辑"
                visible: false
                onClicked: {
                    md_show_view.isEditShowing = true
                    md_show_view.isPreviewShowing = false
                }
                anchors {
                    right: button_subfield.left
                    verticalCenter: parent.verticalCenter
                }
            }
        }
        SplitView {
            id: md_show_view
            property bool isEditShowing: false
            property bool isPreviewShowing: true

            Layout.fillWidth: true
            implicitHeight: width * 8 / 16

            ScrollView {
                id: edit_show_view
                implicitWidth: parent.width / 2
                height: parent.height
                visible: md_show_view.isEditShowing
                TextArea {
                    id: textArea_edit
                    wrapMode: TextEdit.Wrap
                    background: Rectangle {
                        border.color: FluColors.Grey30
                        radius: 10
                    }
                }
            }

            ScrollView {
                id: preview_show_view
                implicitWidth: parent.width / 2
                height: parent.height
                visible: md_show_view.isPreviewShowing
                TextArea {
                    id: textArea_preview
                    wrapMode: TextEdit.Wrap
                    textFormat: TextEdit.MarkdownText
                    background: Rectangle {
                        border.color: FluColors.Grey30
                        radius: 10
                    }
                    readOnly: true
                    MouseArea {
                        anchors.fill: parent
                        enabled: false
                    }
                }
            }
        }
    }
}