dmc
/
test-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<template>
  <!-- :sources="[bgVideo]" -->
  <video-bg :sources="[]">
    <div class="as-layout-horizontal" style="width: 100%; height: 100%;opacity: 0.9;">
      <!-- 此处先划出布局形式(按左右布局划分，左边菜单，右边内容) -->
      <!-- 菜单部分 -->
      <div class="bg-theme" style="height: 100%;">
        <!-- 菜单头部部分 -->
        <div class="as-gravity-center-start" style="height: 10%;">
          <img rel="icon" src="/logo2.png" style="width: 60px;height: 60px;" />
          <span class="as-bold" style="font-size:18px;color: #FFFFFF" v-show="menuStart.menuIsExpansion">D-UI框架模板</span>
        </div>

        <!-- 菜单主体部分 -->
        <el-menu :default-active="menuIndex.menuIndex" width="280" style="height: 100%" mode="vertical" :router="false"
          @select="select" :collapse="!menuStart.menuIsExpansion" class="el-menu-vertical-demo">
          <SidebarItem :list="list" />
        </el-menu>

      </div>

      <div class="as-weight as-layout-vertical">
        <!-- 头部选项 -->
        <div class="bg-theme" style="padding: 0px 10px 0px 10px; height: 10%;">

          <Head></Head>
        </div>
        <div class="as-layout-vertical">
          <!-- 头部 height: 8%;-->
          <div style=" background-color: #ffffff; padding: 10px 0px 10px 0px">
            <!-- 选项卡 -->
            <TabContainer>
            </TabContainer>

            <!-- 主体内容页面 -->
            <router-view name="key"></router-view>
            <!-- 路由缓存 https://blog.csdn.net/kDevelop/article/details/122036896 -->
            <!-- <router-view name="key" v-slot="{ Component }">
              <keep-alive style="height:100vh">
                <component :is="Component" />
              </keep-alive>
            </router-view> -->
          </div>
        </div>
      </div>
    </div>
  </video-bg>
</template>

<script setup lang="ts">
  import SidebarItem from './components/SidebarItem.vue' //选项菜单
  import Head from './components/Head.vue' //选项头部
  import TabContainer from './components/TabControl.vue' //Tab选项
  import VideoBg from '@/components/VideoBackround/VideoBackground.vue' //视频背景组件
  import BgTwo from '@/assets/video/homeBg.mp4' //视频资源
  import $store from "@/store/index" // 引入vuex
  import $storeTab from '@/store/tabValue' //引入tab vuex
  import {
    list
  } from '@/data/menuData.ts'
  import {
    ref,
    reactive,
    onMounted
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'

  const bgVideo = BgTwo
  const router = useRouter()
  //默认菜单为打开状态
  let menuStart = ref($store.state.data)
  let menuIndex = ref($storeTab.state.editableTabsValue)
  //处理刷新页面重置问题
  onMounted(() => {
    const newTab = sessionStorage.getItem('newTab')
    if (newTab) {
      let dataTabs = JSON.parse(newTab)
      dataTabs.name = '1'
      let value = {
        type: 1,
        data: dataTabs
      }
      $storeTab.dispatch('addTab', value)
      $storeTab.dispatch('updateETV', dataTabs.name)
    } else {
      router.replace({
        name: 'home'
      })
    }
    sessionStorage.removeItem('newTab')
  })
  //菜单选择监听(添加选项卡成功则添加，有就进行跳转)
  //data(菜单名称,菜单路径)
  function select(data) { //这里只负责tab，不负责跳转
    let value = {
      type: 2,
      data: data
    }
    $storeTab.dispatch('addTab', value)
  }
</script>

<style lang="scss" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .bg-theme {
    background-color: $test-color;
  }
</style>