dtScreen/src/layouts/DashboardLayout.vue

<template>
    <div class="fluid-dashboard">
        <div class="frame-top">
            <div class="top-logo">
                <img src="@/assets/images/logo.png" />
            </div>
            <div class="title breathe-glow-text ">{{ title }}</div>
            <div class="top-right-user">
                <UserProfile />
            </div>
        </div>
        <div class="frame-left"></div>
        <div class="frame-right">
        </div>
        <div class="frame-bottom"></div>

        <slot name="map"></slot>

        <div class="ui-layer">

            <header class="top-header">
                <div class="header-left">
                    <slot name="header-left"></slot>
                </div>
                <div class="header-right">
                    <slot name="header-right"></slot>
                </div>
            </header>

            <main class="main-layout" :class="layoutClass">

                <aside class="left-sidebar">
                    <slot name="left"></slot>
                </aside>

                <section class="center-area">
                    <slot name="center"></slot>

                    <!-- 底部dock菜单-->
                    <BottomDock />
                </section>

                <aside class="right-sidebar">
                    <slot name="right"></slot>
                </aside>

            </main>
        </div>

        <!-- 弹窗层：由 Layout 统一渲染 -->
        <SmartDialog
            ref="dialogs"
            v-for="dialog in activeDialogs"
            :key="dialog.id"
            :id="dialog.id"
            :visible.sync="dialog.visible"
            :title="dialog.title"
            :defaultWidth="dialog.width || 400"
            :defaultHeight="dialog.height || 300"
            :center="dialog.center !== false"
            :position="dialog.position"
            :showClose="dialog.showClose"
            :enableDblclickExpand="dialog.enableDblclickExpand"
            :noPadding="dialog.noPadding"
            :draggable="dialog.draggable"
            :resizable="dialog.resizable"
            :minWidth="dialog.minWidth"
            :minHeight="dialog.minHeight"
            @close="handleDialogClose(dialog.id)"
            @expand="handleDialogExpand(dialog)">

            <template #header v-if="dialog.headerComponent">
                <component :is="dialog.headerComponent" v-bind="dialog.headerProps" />
            </template>

            <component :is="dialog.componentName" v-bind="dialog.data" />
        </SmartDialog>

    </div>
</template>

<script>
import BottomDock from '@/components/ui/BottomDock.vue';
import SmartDialog from '@/components/ui/SmartDialog.vue';
import dialogManager from '@/mixins/dialogManager';
import UserProfile from '@/components/ui/UserProfile.vue';

// 注册所有可能在弹窗中使用的内容组件
import DeviceStatusPanel from '@/components/ui/DeviceStatusPanel.vue';
import SecurityRoutePanel from '@/components/ui/SecurityRoutePanel.vue';
import IntersectionMapVideos from '@/components/ui/IntersectionMapVideos.vue';
import TrafficTimeSpace from '@/components/ui/TrafficTimeSpace.vue';
import RingDonutChart from '@/components/ui/RingDonutChart.vue';
import CrossingPanel from '@/components/ui/CrossingPanel.vue';
import CrossingDetailPanel from '@/components/ui/CrossingDetailPanel.vue';
import CrossingListPanel from '@/components/ui/CrossingListPanel.vue';
import SecurityRoutePanelSwitch from '@/components/ui/SecurityRoutePanelSwitch.vue';
import SecurityRoutePanelSwitchSmall from '@/components/ui/SecurityRoutePanelSwitchSmall.vue';
import DeviceRestart from '@/components/ui/DeviceRestart.vue';
import DeviceUpgrade from '@/components/ui/DeviceUpgrade.vue';
import OnlineStatusTabs from '@/components/ui/OnlineStatusTabs.vue';
import DeviceStatusTabs from '@/components/ui/DeviceStatusTabs.vue';
import TaskMonitorHeader from '@/components/ui/TaskMonitorHeader.vue';
import SpecialTaskMonitorPanel from '@/components/ui/SpecialTaskMonitorPanel.vue';
import ChangePassword from '@/components/ui/ChangePassword.vue';
import CrossingMultiView from '@/components/ui/CrossingMultiView.vue';

export default {
    name: 'DashboardLayout',
    mixins: [dialogManager],
    components: {
        BottomDock,
        SmartDialog,
        UserProfile,
        DeviceStatusPanel,
        SecurityRoutePanel,
        IntersectionMapVideos,
        TrafficTimeSpace,
        RingDonutChart,
        CrossingPanel,
        CrossingDetailPanel,
        CrossingListPanel,
        SecurityRoutePanelSwitch,
        SecurityRoutePanelSwitchSmall,
        DeviceRestart,
        DeviceUpgrade,
        OnlineStatusTabs,
        DeviceStatusTabs,
        TaskMonitorHeader,
        SpecialTaskMonitorPanel,
        ChangePassword,
        CrossingMultiView
    },
    provide() {
        return {
            dialogManager: {
                openDialog: this.openDialog,
                closeDialog: this.handleDialogClose,
                clearDialogs: this.clearDialogs,
                getDialogs: () => this.activeDialogs,
            }
        };
    },
    props: {
        // 接收外部传入的 class，用于动态切换 CSS 网格布局
        // 例如传入 "special-situation-monitoring"
        layoutClass: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            title: '灵智交通信号控制平台',
        }
    },
    methods: {
        handleDialogExpand(dialog) {
            if (dialog.data && typeof dialog.data.onExpand === 'function') {
                dialog.data.onExpand(dialog.data);
            }
        }
    }
}
</script>

<style scoped>
/* ================= 根容器 ================= */
.fluid-dashboard {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: #050a17;
    /* 兜底深色背景 */
}

/* ================= 大屏装饰边框 ================= */
.frame-top,
.frame-left,
.frame-right,
.frame-bottom {
    position: absolute;
    pointer-events: none;
    /* 【核心】鼠标事件穿透，不挡底层交互 */
    z-index: 50;
    /* 层级高于 UI，低于弹窗 */
}

.frame-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url('@/assets/images/layout-top.png') no-repeat center top;
    background-size: 100% 100%;
}

.frame-top .title {
    font-family: var(--title-font-family);
    font-size: 48px;
    color: #ffffff;
    line-height: 63px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.frame-left {
    top: 10px;
    left: 0;
    width: 16px;
    height: calc(100% - 10px - 40px);
    background: url('@/assets/images/layout-left.png') no-repeat left center;
    background-size: 100% 100%;
}

.frame-right {
    top: 10px;
    right: 0;
    width: 16px;
    height: calc(100% - 10px - 40px);
    background: url('@/assets/images/layout-right.png') no-repeat right center;
    background-size: 100% 100%;
}

.frame-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 17px;
    /* background: url('@/assets/images/layout-bottom.png') no-repeat center bottom; */ 
    background-size: 100% 100%;
}

/* ================= UI 层与网格布局 ================= */
.ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    /* 让鼠标穿透点到下层的地图 */
    display: grid;
    grid-template-rows: 80px 1fr;
    /* 头部 80px，其余给主体 */
}

/* 恢复具体功能区域的鼠标交互 */
.top-header {
    pointer-events: auto;
}

/* --- 头部 --- */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 50px;
    /* 左右内边距，避开边框图片 */
    position: relative;
}

.header-right {
    position: absolute;
    right: 50px;
    bottom: 0;
}

/* --- 主体网格 --- */
.main-layout {
    display: grid;
    /* 默认网格：左400，中间自适应，右400 */
    grid-template-columns: 400px 1fr 400px;
    gap: 20px;
    /* 【关键】给四周留出 padding，防止里面的图表被外围的装饰边框挡住！ */
    padding: 20px 50px 60px 50px;
    height: 100%;
    box-sizing: border-box;
}

/* 特殊模式下的网格变体 (通过 layoutClass 触发) */
.main-layout.special-situation-monitoring {
    grid-template-columns: 500px 1fr 480px;
}

/* --- 区域容器设定 --- */
.left-sidebar,
.right-sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- 中心区域保持事件穿透，让出地图的拖拽控制权 --- */
.center-area {
    position: relative;
    height: 100%;
    pointer-events: none; 
}

/* --- 恢复中心区域内部具体组件（如 BottomDock 和 slot 里的内容）的交互 --- */
.left-sidebar > *,
.right-sidebar > *,
.center-area > * {
    pointer-events: auto; 
}

.top-right-user {
    position: absolute;
    top: 2px;       /* 距离顶部的高度，可根据背景图微调 */
    right: 50px;     /* 距离右侧的距离 */
    pointer-events: auto; /* 【关键】因为 frame-top 是 none，必须在这里恢复鼠标交互，否则无法点击下拉 */
    z-index: 100;    /* 保证层级最高，下拉菜单不被遮挡 */
}
.top-logo {
    position: absolute;
    top: 10px;
    left: 100px;
    height: 30px;
}
.top-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
</style>