AicsKnowledgeBase_client/AicsKnowledgeBase/qml/component/TransferListPopup.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Window
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import FluentUI
import AicsKB.FileTransferManager
import "qrc:///AicsKnowledgeBase/qml/global"

Popup {
    id: transfer_popup
    x: parent ? (parent.width - implicitWidth) / 2 : 0
    y: parent ? parent.height : 0
    background: FluArea {
        implicitWidth: 300
        implicitHeight: 200
        color: "#f8f8f8"
        radius: 5
        FluShadow {}
    }

    Connections {
        target: FileTransferManager
        onTransferComplete: (download, fileId, fileName) => {
                                console.log("onTransferComplete")
                                UserData.downloadedFiles.push(fileId)
                                console.log(UserData.downloadedFiles)
                            }
    }

    contentItem: FluScrollablePage {
        anchors.fill: parent
        anchors.topMargin: 10
        ColumnLayout {
            Layout.fillWidth: true
            spacing: 0
            Repeater {
                model: FileTransferListModel
                delegate: Item {
                    Layout.fillWidth: true
                    height: 50

                    Item {
                        anchors.fill: parent
                        anchors.topMargin: 5
                        anchors.bottomMargin: 5
                        anchors.leftMargin: 0
                        Image {
                            id: icon
                            anchors.verticalCenter: parent.verticalCenter
                            width: 32
                            height: 32
                            source: download ? "qrc:/AicsKnowledgeBase/res/download.png" : "qrc:/AicsKnowledgeBase/res/upload.png"
                        }

                        ColumnLayout {
                            anchors.left: icon.right
                            anchors.right: parent.right
                            anchors.leftMargin: 5
                            spacing: 2
                            Text {
                                text: name
                            }
                            Text {
                                visible: completedSize >= totalSize
                                text: "已完成"
                                color: FluColors.Grey130
                            }
                            FluProgressBar {
                                Layout.fillWidth: true
                                progress: completedSize / totalSize
                                indeterminate: false
                                visible: completedSize < totalSize
                            }

                            Text {
                                visible: completedSize < totalSize
                                color: FluColors.Grey130
                                text: formatSize(speed) + "/s - " + formatSize(
                                          completedSize) + "/" + formatSize(
                                          totalSize)


                                /**
                                 * 格式化文件大小, 输出成带单位的字符串
                                 * @param {Number} size 文件大小
                                 * @param {Number} [pointLength=1] 精确到的小数点数。
                                 * @param {Array} [units=[ 'B', 'K', 'M', 'G', 'TB' ]] 单位数组。从字节，到千字节，一直往上指定。
                                 *    如果单位数组里面只指定了到了K(千字节)，同时文件大小大于M, 此方法的输出将还是显示成多少K.
                                 */
                                function formatSize(size, pointLength, units) {
                                    var unit
                                    units = units
                                            || ['B', 'KB', 'MB', 'GB', 'TB']
                                    while ((unit = units.shift())
                                           && size > 1024) {
                                        size = size / 1024
                                    }
                                    return (unit === 'B' ? size : size.toFixed(
                                                               pointLength === undefined ? 1 : pointLength)) + ' ' + unit
                                }
                            }
                        }
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            if (completedSize < totalSize)
                                file_buttons.visible = true
                        }
                        onExited: file_buttons.visible = false

                        LinearGradient {
                            anchors.fill: file_buttons
                            visible: file_buttons.visible

                            start: Qt.point(0, 0)
                            end: Qt.point(20, 0)
                            gradient: Gradient {
                                GradientStop {
                                    position: 0.0
                                    color: "transparent"
                                }
                                GradientStop {
                                    position: 1.0
                                    color: "#f8f8f8"
                                }
                            }
                        }
                        RowLayout {
                            id: file_buttons
                            anchors.right: parent.right
                            anchors.top: parent.top
                            anchors.bottom: parent.bottom
                            layoutDirection: Qt.RightToLeft
                            visible: false

                            FluIconButton {
                                iconSource: FluentIcons.Cancel
                            }

                            FluIconButton {
                                Layout.leftMargin: 20
                                iconSource: paused ? FluentIcons.Play : FluentIcons.Pause
                                onClicked: {
                                    if (!paused) {
                                        console.log("pause")
                                        FileTransferManager.pause(fileId)
                                    } else {
                                        FileTransferManager.download(fileId,
                                                                     name, true)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}