njzscloud-dispose-web/src/pages/a-frame/AFrame.vue

<script lang="ts" setup>
import AAside from '@/pages/a-frame/AAside.tsx'
import AAvatar from '@/pages/a-frame/AAvatar.vue'
import Evt from '@/common/utils/evt.ts'
import AIcon from '@/components/a-icon/AIcon.vue'
import { useAppPageStore } from '@/common/app/app-page-store.ts'
import { elIcons } from '@/common/element/element.ts'
import ATabbar from '@/pages/a-frame/ATabbar.vue'

const appPageStore = useAppPageStore()
const isCollapse = ref(false)


onMounted(() => {
  Evt.emit('connect_ws')
})

onUnmounted(() => {
  Evt.emit('disconnect_ws')
})
</script>

<template>
  <ElContainer class="a-frame">
    <ElAside class="a-frame-aside">
      <AAside :is-collapse="isCollapse"/>
    </ElAside>
    <ElContainer>
      <ElHeader class="a-frame-header">
        <div>
          <div>
            <ElButton :icon="isCollapse?elIcons.Fold:elIcons.Expand" text @click="isCollapse = !isCollapse"/>
            <ElBreadcrumb :separator-icon="elIcons.ArrowRight">
              <ElBreadcrumbItem v-for="(item, i) in appPageStore?.currentPage?.breadcrumb??[]" :key="'a-frame-header-breadcrumb'+i">{{ item }}</ElBreadcrumbItem>
            </ElBreadcrumb>
          </div>
          <div>
            <div>
              <ElButton text>
                <AIcon name="bell"/>
              </ElButton>
              <ElButton text>
                <AIcon name="settings"/>
              </ElButton>
            </div>
            <AAvatar/>
          </div>
        </div>
        <ATabbar/>
      </ElHeader>
      <ElMain class="a-frame-main">
        <RouterView #="{ Component }">
          <Transition name="slide-fade">
            <KeepAlive :include="appPageStore?.keepAliveInclude">
              <component :is="Component"/>
            </KeepAlive>
          </Transition>
        </RouterView>
      </ElMain>
    </ElContainer>
  </ElContainer>
</template>

<style lang="stylus" scoped>
.a-frame {
  height 100%
  width 100%;
  overflow hidden
  box-shadow: inset #0000001F 0 0 12px 0;
  background-color #F7F9FC

  .a-frame-aside {
    height 100%;
    width auto
    position relative
    border-right: solid 1px var(--el-border-color-light);
    //border-right: solid 1px var(--el-menu-border-color);
    background-color white
    box-sizing border-box
  }

  & > section {
    height 100%
    //padding-right 20px

    .a-frame-header {
      height 110px
      padding 0 10px 0 0
      background-color: #FAFBFC;

      & > div:nth-child(1) {
        height 60px
        width 100%
        background-color white
        display flex
        justify-content space-between
        box-sizing border-box
        border-bottom 1px solid var(--el-border-color-light);
        padding-right 5px

        & > div:nth-child(1) {
          height: 100%;
          min-width 300px;
          display: flex;
          align-items: center;
          box-sizing border-box

          :deep(.el-breadcrumb) {
            .el-breadcrumb__inner {
              color #7987A1
              cursor default
            }

            .el-breadcrumb__separator {
              color #7987A1
            }
          }
        }

        & > div:nth-child(2) {
          height: 100%;
          min-width 400px;
          display: flex;
          align-items: center;
          justify-content end
          box-sizing border-box
          gap 20px

          & > div:first-child {
            display flex
            gap 10px

            & > button {
              margin 0
            }
          }
        }
      }

    }

    .a-frame-main {
      height calc(100% - 60px)
      width 100%;
      padding 0 10px 0 0
      overflow hidden
      background-color rgb(250, 251, 252)
    }
  }
}

/*.slide-fade-enter-active {
  transition:
    transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.4s ease-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

.slide-fade-leave-active {
  transition:
    transform 0.3s cubic-bezier(0.5, 0, 0.2, 1),
    opacity 0.3s ease-in;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: scaleY(0);
  opacity: 0;
  overflow: hidden;
}

.slide-fade-enter-to,
.slide-fade-leave-from {
  transform: scaleY(1);
  opacity: 1;
}*/

.slide-fade-enter-active {
  //transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
  //  opacity 0.3s ease-out;
  transition: transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
  will-change: transform, opacity;
}

.slide-fade-leave-active {
  //transition: transform 0.3s cubic-bezier(0.5, 0, 0.2, 1),
  //  opacity 0.3s ease-in;
  transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1),
    opacity 0.3s ease-in-out;
  will-change: transform, opacity;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
  backface-visibility: hidden;
}
</style>