PC实现全屏预览

全屏预览时取消了侧边栏和页面头部。具体实现如下：只保留了实现全屏预览功能的部分代码，其他省略

<template>
<ghy-button type="text" @click="handleFullscreen">
                    <template #icon>
                        <img v-if="isFullscreen" src="~@/assets/image/tuichu.svg" alt="" />
                        <img v-else src="~@/assets/image/zhankai.svg" alt="" />
                    </template>
                    {{ isFullscreen ? '退出全屏' : '全屏预览' }}</ghy-button
                >
</template>

<script setup lang="jsx">
let isFullscreen = ref(false);
const handleFullscreen = () => {
    const flag = document.body.classList.contains('fullscreen');
    if (flag) {
        document.body.classList.remove('fullscreen');
    } else {
        document.body.classList.add('fullscreen');
    }
    isFullscreen.value = !flag;
};
</script>
<style lang="less">
body.fullscreen {
    .ghy-layout {
        .ghy-app-header {
            display: none;
        }
        .ghy-app-left {
            display: none;
        }
        .ghy-app-right {
            margin-top: 20px;
        }
    }
}
</style>

**样式-**定义了一个针对 body.fullscreen 的样式规则：
当 body 具有 fullscreen 类名时，隐藏 .ghy-app-header 和 .ghy-app-left 元素。
.ghy-app-right 元素的上边距设置为 20px，以便在全屏模式下调整布局。

**函数-**定义了一个 handleFullscreen 函数，用于切换全屏状态：
使用 document.body.classList.contains(‘fullscreen’) 方法检查当前 body 元素是否包含 fullscreen 类名。
根据当前状态切换 body 的 fullscreen 类名，以实现全屏和普通模式之间的切换。如果 flag 为 true（即当前处于全屏状态）：
调用 document.body.classList.remove(‘fullscreen’)，从 body 元素中移除 fullscreen 类名，表示退出全屏模式。
如果 flag 为 false（即当前不在全屏状态）：
调用 document.body.classList.add(‘fullscreen’)，向 body 元素添加 fullscreen 类名，表示进入全屏模式。
最后，更新 isFullscreen 的值为相反的状态。
补充一下其中flex:1即为flex-grow:1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。