MainWindow.qml 7.57 KB
import QtQuick
import QtQuick.Controls.Basic
import QtQuick.Layouts
import "components"
import "." as App

Rectangle {
    id: root
    color: App.Theme.bgCanvas

    RowLayout {
        anchors.fill: parent
        spacing: 0

        // ===== 主内容区 =====
        ColumnLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 0

            // Tab Bar
            Rectangle {
                Layout.fillWidth: true
                implicitHeight: 48
                color: App.Theme.bgCanvas

                Row {
                    anchors.left: parent.left
                    anchors.leftMargin: App.Theme.space5
                    anchors.bottom: parent.bottom
                    spacing: App.Theme.space2

                    Repeater {
                        model: ["图片生成", "款式设计", "历史记录"]
                        delegate: Rectangle {
                            width: tabText.implicitWidth + App.Theme.space5 * 2
                            height: 40
                            color: "transparent"

                            property bool isActive: index === appState.currentTab

                            Text {
                                id: tabText
                                anchors.centerIn: parent
                                text: modelData
                                font.family: App.Theme.fontFamily
                                font.pointSize: App.Theme.fontBase
                                font.weight: parent.isActive ? Font.DemiBold : Font.Normal
                                color: parent.isActive
                                    ? App.Theme.accent
                                    : (mouseArea.containsMouse
                                        ? App.Theme.textPrimary
                                        : App.Theme.textSecondary)
                            }

                            // 激活态下划线
                            Rectangle {
                                anchors.bottom: parent.bottom
                                anchors.left: parent.left
                                anchors.right: parent.right
                                anchors.leftMargin: App.Theme.space4
                                anchors.rightMargin: App.Theme.space4
                                height: 2
                                radius: 1
                                color: App.Theme.accent
                                visible: parent.isActive
                            }

                            MouseArea {
                                id: mouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                cursorShape: Qt.PointingHandCursor
                                onClicked: appState.setTab(index)
                            }
                        }
                    }
                }

                // 底部分隔线
                Rectangle {
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    height: 1
                    color: App.Theme.divider
                }
            }

            // Tab Content
            StackLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                currentIndex: appState.currentTab

                ImageGenTab {}

                // 款式设计 — 占位
                Item {
                    Text {
                        anchors.centerIn: parent
                        text: "款式设计 tab 内容\n(QML PoC 暂未实现)"
                        color: App.Theme.textTertiary
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontLg
                        horizontalAlignment: Text.AlignHCenter
                    }
                }

                // 历史记录 — 占位
                Item {
                    Text {
                        anchors.centerIn: parent
                        text: "历史记录 tab 内容\n(QML PoC 暂未实现)"
                        color: App.Theme.textTertiary
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontLg
                        horizontalAlignment: Text.AlignHCenter
                    }
                }
            }
        }

        // ===== 任务队列 sidebar =====
        Rectangle {
            Layout.preferredWidth: 200
            Layout.fillHeight: true
            color: App.Theme.bgSurface

            // 左侧分隔线
            Rectangle {
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: 1
                color: App.Theme.divider
            }

            ColumnLayout {
                anchors.fill: parent
                spacing: 0

                // Sidebar header(与主区 tab bar 等高 48px)
                Rectangle {
                    Layout.fillWidth: true
                    implicitHeight: 48
                    color: App.Theme.bgSurface

                    Label {
                        anchors.left: parent.left
                        anchors.leftMargin: App.Theme.space4
                        anchors.verticalCenter: parent.verticalCenter
                        text: "任务队列"
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontBase
                        font.weight: Font.DemiBold
                        color: App.Theme.textPrimary
                    }

                    // 底部分隔线
                    Rectangle {
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom
                        height: 1
                        color: App.Theme.divider
                    }
                }

                // 列表
                ListView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.margins: App.Theme.space2
                    spacing: 4
                    clip: true

                    model: ListModel {
                        ListElement { status: "执行中"; color: "#ff9500" }
                        ListElement { status: "等待中"; color: "#0071e3" }
                        ListElement { status: "已完成"; color: "#34c759" }
                    }

                    delegate: Rectangle {
                        width: ListView.view.width
                        height: 36
                        radius: App.Theme.radiusSm
                        color: itemMouse.containsMouse ? App.Theme.bgHover : "transparent"

                        Text {
                            anchors.left: parent.left
                            anchors.leftMargin: App.Theme.space3
                            anchors.verticalCenter: parent.verticalCenter
                            text: status
                            color: model.color
                            font.family: App.Theme.fontFamily
                            font.pointSize: App.Theme.fontSm
                        }

                        MouseArea {
                            id: itemMouse
                            anchors.fill: parent
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                        }
                    }
                }
            }
        }
    }
}