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

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 {}
    }

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

                    ColumnLayout {
                        anchors.fill: parent
                        anchors.margins: 5
                        spacing: 2
                        Text {
                            text: name
                        }

                        FluProgressBar {
                            Layout.fillWidth: true
                            progress: completedSize / totalSize
                            indeterminate: false
                        }

                        Text {
                            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: 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)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}