on-site-robots-screen/src/views/home/index.vue

<template>
    <!-- 非全屏状态 -->
    <div ref="appRef" class="app-container">
        <!-- 机器人首页 -->
        <!-- 使用grid布局 -->
        <!-- 非全屏模式 -->
        <div class="robot-container" v-if="!fullScreenVisible">
            <!-- 左一 -->
            <div class="robot-1">
                <LeftOne
                    @onHandleOperationPanel="onHandleOperationPanel"
                    @onHandleFullScreenToggle="onHandleFullScreenToggle"
                />
            </div>
            <!-- 左二 -->
            <div class="robot-2">
                <LeftTwo />
            </div>

            <!-- 中一 -->
            <div class="robot-3">
                <CenterOne />
            </div>
            <!-- 中二 -->
            <div class="robot-4">
                <CenterTwo />
            </div>

            <!-- 右一 -->
            <div class="robot-5">
                <RightOne />
            </div>
            <!-- 右二 -->
            <div class="robot-6">
                <RightTwo />
            </div>
        </div>

        <!-- 全屏模式 -->
        <div class="full-screen-container" v-if="fullScreenVisible">
            <div class="full-screen-left1">
                <LeftOne
                    :fullScreenVisible="fullScreenVisible"
                    @onHandleFullScreenToggle="onHandleFullScreenToggle"
                />
            </div>
            <div class="full-screen-right1">
                <LeftOne
                    :isShowAllBtns="false"
                    :fullScreenVisible="fullScreenVisible"
                    @onHandleFullScreenToggle="onHandleFullScreenToggle"
                />
            </div>
            <div class="full-screen-right2">
                <ControlDeck />
            </div>
        </div>
    </div>

    <!-- 操作面板 -->
    <n-drawer
        resizable
        placement="right"
        :default-width="502"
        v-model:show="operationPanelVisible"
        class="operation-panel"
    >
        这里是机器人的操作面板
    </n-drawer>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useScale } from '@/hooks/useScale' // 引入自定义 Hook
import LeftOne from './components/left-one.vue'
import LeftTwo from './components/left-two.vue'
import CenterOne from './components/center-one.vue'
import CenterTwo from './components/center-two.vue'
import RightOne from './components/right-one.vue'
import RightTwo from './components/right-two.vue'
import ControlDeck from './components/control-deck.vue'

const appRef = ref(null) // 获取 DOM 引用
const fullScreenVisible = ref(true) // 全屏状态

// 使用 useScale Hook（直接调用，无需在 setup() 里）
const { baseWidth, baseHeight, scale } = useScale(appRef)

const operationPanelVisible = ref(false) // 操作面板是否显示

// 打开操作面板
const onHandleOperationPanel = (visible) => {
    operationPanelVisible.value = visible
}
// 全屏控制
const onHandleFullScreenToggle = (visible) => {
    fullScreenVisible.value = visible
}
</script>

<style lang="scss">
.app-container {
    .robot-container,
    .full-screen-container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: repeat(12, 1fr);
        grid-template-columns: repeat(12, 1fr);
        // gap: 10px;
    }

    // 左侧
    .robot-1 {
        grid-column: 1 / 4;
        grid-row: 1 / 7;
    }
    .robot-2 {
        grid-column: 1 / 4;
        grid-row: 7 / 13;
    }

    // 中间
    .robot-3 {
        grid-column: 4 / 10;
        grid-row: 1 / 8;
    }
    .robot-4 {
        grid-column: 4 / 10;
        grid-row: 8 / 13;
    }

    // 右侧
    .robot-5 {
        grid-column: 10 / 13;
        grid-row: 1 / 8;
    }
    .robot-6 {
        grid-column: 10 / 13;
        grid-row: 8 / 13;
    }

    .full-screen-left1 {
        grid-column: 1 / 9;
        grid-row: 1 / 13;
    }
    .full-screen-right1 {
        grid-column: 9 / 13;
        grid-row: 1 / 7;
    }
    .full-screen-right2 {
        grid-column: 9 / 13;
        grid-row: 7 / 13;
    }
}

.n-drawer.n-drawer--right-placement {
    top: 50% !important;
    bottom: 10px !important;
    right: 10px !important;
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-right: 10px;
}

.child-container {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.more-btn {
    width: 58px;
    height: 24px;
    border-radius: 12px;
    color: #d6fdff;
    background: linear-gradient(to bottom, rgba(15, 47, 78, 0.5) 0%, rgba(0, 222, 255, 0.5) 100%);
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}
</style>