traffic-laser/src/components/main-panel/index.vue

<template>
  <UiEditorLayout class="layout" :class="layoutClass">
    <UiEditorHead class="header">
<!--      <div-->
<!--        class="menu"-->
<!--        :class="{ abs: isFull }"-->
<!--        @click="customMap.sysView = isFull ? 'auto' : 'full'"-->
<!--      >-->
<!--        <ui-icon :type="isFull ? 'menu' : 'close'" ctrl />-->
<!--      </div>-->
      <slot name="header" />
    </UiEditorHead>
    <slot/>

    <Menu
      :menu="menus"
      :active-key="activeMenuKey"
      @update:active-key="val => emit('update:activeMenuKey', val)"
    />
  </UiEditorLayout>
</template>

<script setup lang="ts">
import UiEditorLayout from "@/components/base/editor/layout/index.vue";
import UiEditorHead from "@/components/base/editor/layout/Head.vue";
import UiIcon from "@/components/base/components/icon/index.vue";
import Menu from '@/views/sys/menu'
import {MenuAtom, MenuRaw} from "@/views/sys/menu/menu.js";
import { customMap } from "@/hook/custom";
import { computed, ref } from "vue";
import "@/preset/pc.scss"
import "@/preset/style.scss"

const props = defineProps<{
  menus: MenuRaw,
  activeMenuKey: string,
}>();
const emit = defineEmits<{
  (e: 'update:activeMenuKey', t: MenuAtom['name']): void
}>()

const isFull = computed(() => customMap.sysView === 'full' )
const layoutClass = computed(() => ({
  ["sys-view-full"]: isFull.value
}))

</script>

<style scoped lang="scss">
.layout {
  --header-top: 0px;
  &.sys-view-full {
    --header-top: calc(-1 * var(--editor-head-height));
  }
}

.header {
  color: rgba(var(--colors-primary-fill), 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  transition: top 0.3s ease;
  top: var(--header-top);
}

.header .menu {
  transition: background 0.3s ease;
  position: absolute;
  left: 0;
  top: 0;
  margin: calc((var(--editor-head-height) - 42px) / 2)
  calc((var(--editor-menu-width) - 42px) / 2);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .icon {
    font-size: 16px;
  }
  &.abs {
    top: 100%;
    left: 0;
    background: rgba(27, 27, 28, 0.8);
    border-radius: 4px;
    border: 1px solid #000000;
    backdrop-filter: blur(4px);

    .icon {
      font-size: 24px;
    }
  }
}

.main {
  flex: 1;
  text-align: center;
  font-size: var(--big-size);

  .title {
    font-size: 1em;
    font-weight: bold;
    display: inline-block;

    span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
</style>