component_ryl_v3 1.1.0

package/src/packages/handHeader/handHeader.vue

@@ -0,0 +1,572 @@
+<template>
+  <ElContainer class="handHeaderContent">
+    <!-- 左右两边分 -->
+    <div class="ieBro flex flex_row" v-if="isIE">
+      <span>
+        当前浏览器版本过低，使用效果可能欠佳，建议前往下载
+        <a href="http://chrome.wlxb49.cn/" target="_blank" class="color"
+          >谷歌浏览器</a
+        ></span
+      >
+      <span>
+        <a href="javascript:;" @click="closeIETips">x</a>
+      </span>
+    </div>
+    <!-- el-aside -->
+    <ElAside class="aside" :class="{'hideMenu': hideMenu}" :width="completeWidth" :style="`backgroundColor:${menuColor.backgroundColor}`">
+      <!-- 侧边栏系统名称展示区域 -->
+      <slot name="headElseTitle"></slot>
+      <ElMenu
+        class="el-menu-vertical-demo init-el-menu"
+        :text-color="menuColor.color"
+        :active-text-color="menuColor.activeColor"
+        :background-color="menuColor.backgroundColor"
+        :default-active="localDefaultActive"
+        router
+        :default-openeds="defaultOpen"
+        :collapse="hideMenu"
+        :collapse-transition="false"
+      >
+        <sidebar-item v-for="menu in newMenuList" :key="menu.path" :item="menu" :hideMenu="hideMenu" />
+      </ElMenu>
+    </ElAside>
+    <ElMain :class="['main main_container',{ scroll: addClass, scrollX: isScrollX}]" ref="mainRef">
+      <ElHeader class="header flex flex_row inner_header">
+        <div class="imLeft flex flex_row">
+          <template v-if="collapse">
+            <div class="colSpan flex flex_row" @click="toggleHide">
+              <i :class="['hide', { rotate: hideMenu }]"></i>
+            </div>
+          </template>
+          <!-- 头部信息补充展示区域 -- 左边 -->
+          <slot name="headElseInfo"></slot>
+        </div>
+        <ul class="saasInfo flex flex_row">
+          <!-- 头部信息补充展示区域 -- 右边 -->
+          <slot name="headElseInfoRight"></slot>
+          <li class="img flex flex_row">
+            <img src="@/assets/img/portrait.jpg" alt />
+            <i class="el-icon-arrow-down"></i>
+            <!-- 下拉框 -->
+            <div class="dropDown">
+              <em class="san"></em>
+              <div class="user flex flex_row">
+                <img src="@/assets/img/portrait.jpg" alt />
+                <span>{{ userInfo.name }}</span>
+              </div>
+              <!-- 头部信息操作展示区域 -->
+              <slot name="headElseHand"></slot>
+              <div class="exit" @click="outSystem">退出</div>
+            </div>
+          </li>
+        </ul>
+      </ElHeader>
+      <div class="content_mar">
+        <div class="content inner_content">
+          <!-- 内容展示区域 -->
+          <slot name="content"></slot>
+        </div>
+        <div class="footer flex flex_col inner_footer" v-html="userInfo.copyRight" v-if="showFooter"></div>
+      </div>
+    </ElMain>
+  </ElContainer>
+</template>
+
+<script setup>
+/**
+ * 头部布局组件
+ * 功能：包含侧边栏菜单、头部导航、用户信息和内容区域的完整布局
+ */
+
+// 导入Vue响应式API
+import { ref, computed, onMounted, nextTick } from 'vue'
+// 导入Element Plus组件
+import { ElContainer, ElAside, ElMenu, ElMain, ElHeader } from 'element-plus'
+// 导入子组件
+import sidebarItem from './sidebarItem.vue'
+
+/**
+ * 组件属性定义
+ * @property {Object} menuList - 导航列表（包含name系统名称和list菜单列表）
+ * @property {Object} menuColor - 菜单栏颜色配置（color/activeColor/backgroundColor）
+ * @property {string} defaultActive - 默认选中的菜单路径
+ * @property {boolean} collapse - 是否启用折叠功能
+ * @property {number} width - 侧边栏宽度
+ * @property {Object} userInfo - 用户信息
+ * @property {boolean} showDefaltOpen - 是否默认展开所有菜单项
+ */
+const props = defineProps({
+  menuList: {
+    type: Object,
+    default: () => ({})
+  },
+  menuColor: {
+    type: Object,
+    default: () => ({
+      color: "#C0C5C7",
+      activeColor: "#fff",
+      backgroundColor: "#1e222d",
+    })
+  },
+  defaultActive: {
+    type: String,
+    default: "/"
+  },
+  collapse: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: Number,
+    default: 180
+  },
+  userInfo: {
+    type: Object,
+    default: () => ({})
+  },
+  showDefaltOpen: {
+    type: Boolean,
+    default: true
+  }
+})
+
+/**
+ * 事件定义
+ * @event toggleHide - 折叠/展开事件
+ * @event exitSystem - 退出系统事件
+ */
+const emit = defineEmits(['toggleHide', 'exitSystem'])
+
+// 响应式数据定义
+const addClass = ref(false)           // 动态添加是否有滚动
+const isScrollX = ref(false)          // 判断是否出现横向滚动条
+const newMenuList = ref([])           // 获取新的菜单
+const defaultOpen = ref([])           // 默认打开的菜单
+const isIE = ref(false)               // 是否是ie浏览器
+const hideMenu = ref(false)           // 是否隐藏菜单
+const showFooter = ref(false)         // 效果展示优化
+const minWidth = ref(0)               // 内容模块的默认最小宽度
+const localDefaultActive = ref(props.defaultActive)  // 本地默认选中菜单
+const mainRef = ref(null)             // main容器引用
+
+/**
+ * 收起和展开时 aside 的宽度
+ * @returns {string} 宽度值
+ */
+const completeWidth = computed(() => {
+  return hideMenu.value ? '64px' : `${props.width}px`
+})
+
+/**
+ * 主模块默认宽度
+ * @type {number}
+ */
+let mainDefalutWidth = document.body.clientWidth - props.width
+
+/**
+ * 函数防抖
+ * @param {Function} fn - 需要防抖的函数
+ * @param {number} delay - 延迟时间（默认200ms）
+ * @returns {Function} 防抖后的函数
+ */
+const debounce = (fn, delay = 200) => {
+  let timer = null
+  return function () {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      fn.apply(this, arguments)
+    }, delay)
+  }
+}
+
+/**
+ * 过滤隐藏的菜单项并递归处理子菜单
+ * @param {Array} datas - 菜单数据
+ * @returns {Array} 过滤后的菜单列表
+ */
+const getAllName = (datas) => {
+  return datas.filter(item => !item.hidden).map(item => {
+    item = Object.assign({}, item)
+    if (item.children) {
+      item.children = getAllName(item.children)
+    }
+    return item
+  })
+}
+
+/**
+ * 处理传入的导航菜单
+ */
+const getMenu = () => {
+  newMenuList.value = getAllName(props.menuList.list || [])
+  defaultOpen.value = []
+  getOpen()
+}
+
+/**
+ * 折叠/展开菜单
+ */
+const toggleHide = () => {
+  hideMenu.value = !hideMenu.value
+  defaultOpen.value = []
+  getOpen()
+  emit('toggleHide', hideMenu.value)
+}
+
+/**
+ * 获取默认打开的菜单项
+ * @param {Array} datas - 菜单数据（默认为newMenuList）
+ */
+const getOpen = (datas = newMenuList.value) => {
+  if (props.showDefaltOpen) {
+    for (const i in datas) {
+      defaultOpen.value.push(datas[i].path)
+      if (datas[i].children) {
+        getOpen(datas[i].children)
+      }
+    }
+  }
+}
+
+/**
+ * 等待图片加载完成后获取主容器高度
+ * @param {string} content - HTML内容
+ */
+const loadImg = (content) => {
+  let mulitImg = []
+  if (content.includes("<img")) {
+    content.replace(
+      /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
+      (matcherStr, capture) => {
+        mulitImg.push(capture)
+      }
+    )
+    let promiseAll = [], img = []
+    for (let i = 0; i < mulitImg.length; i++) {
+      promiseAll[i] = new Promise((resolve) => {
+        img[i] = new Image()
+        img[i].src = mulitImg[i]
+        img[i].onload = function () {
+          resolve(img[i])
+        }
+      })
+    }
+    Promise.all(promiseAll).then(() => {
+      getMainHeight()
+    })
+  } else {
+    getMainHeight()
+  }
+}
+
+/**
+ * 获取内容模块的滚动条状态
+ * @param {boolean} flag - 是否跳过滚动条置顶
+ */
+const getMainHeight = (flag) => {
+  addClass.value = false
+  setTimeout(() => {
+    const mainContainer = document.querySelector(".main_container")
+    if (mainContainer) {
+      const innerContent = document.querySelector(".main_container .inner_content")
+      const contentDiv = document.querySelector(".main_container .inner_content>div")
+      
+      if (innerContent && contentDiv) {
+        const mainHeight = innerContent.offsetHeight
+        const conHeight = contentDiv.offsetHeight
+        
+        addClass.value = conHeight > mainHeight
+        showFooter.value = true
+        
+        if (!flag && addClass.value && mainRef.value) {
+          mainRef.value.scrollTop = 0
+        }
+      }
+    }
+  }, 0)
+}
+
+/**
+ * 设置内容模块最小宽度
+ * @param {number} width - 当前窗口宽度
+ */
+const setMinWidth = (width) => {
+  isScrollX.value = width < minWidth.value
+  
+  const innerHeader = document.querySelector(".main_container .inner_header")
+  const contentMar = document.querySelector(".main_container .content_mar")
+  
+  if (isScrollX.value) {
+    if (innerHeader) {
+      innerHeader.setAttribute("style", `min-width:${minWidth.value}px;`)
+    }
+    if (contentMar) {
+      contentMar.setAttribute("style", `min-width:${minWidth.value - 36}px;`)
+    }
+  } else {
+    if (innerHeader) {
+      innerHeader.removeAttribute("style")
+    }
+    if (contentMar) {
+      contentMar.removeAttribute("style")
+    }
+  }
+}
+
+/**
+ * 设置菜单选中状态
+ * @param {string} path - 菜单路径
+ */
+const setMenuActive = (path) => {
+  localDefaultActive.value = ''
+  nextTick(() => {
+    localDefaultActive.value = path
+  })
+}
+
+/**
+ * 判断是否在 content inner_content 类名上添加 normal 类名
+ */
+const isAddNormal = () => {
+  const innerContent = document.querySelector(".main_container .inner_content")
+  if (innerContent) {
+    if (document.getElementById('setNormal')) {
+      innerContent.classList.add('normal')
+    } else {
+      innerContent.classList.remove('normal')
+    }
+  }
+}
+
+/**
+ * 退出系统
+ */
+const outSystem = () => {
+  emit('exitSystem')
+}
+
+/**
+ * 判断是否是 IE 浏览器
+ */
+const browser = () => {
+  isIE.value = !!window.ActiveXObject || "ActiveXObject" in window
+}
+
+/**
+ * 关闭 IE 提示
+ */
+const closeIETips = () => {
+  isIE.value = false
+}
+
+/**
+ * 组件挂载时初始化
+ */
+onMounted(() => {
+  const windowWidth = window.screen.availWidth
+  minWidth.value = windowWidth > 1800 ? (1800 - props.width) : (windowWidth - props.width)
+  
+  browser()
+  
+  nextTick(() => {
+    getMenu()
+    setMinWidth(mainDefalutWidth)
+    // 监听窗口大小变化
+    window.addEventListener('resize', debounce(() => {
+      mainDefalutWidth = document.body.clientWidth - props.width
+      setMinWidth(mainDefalutWidth)
+      setTimeout(() => {
+        getMainHeight()
+      }, 0)
+    }))
+  })
+})
+
+/**
+ * 暴露方法给父组件调用
+ */
+defineExpose({
+  setMenuActive,
+  isAddNormal
+})
+</script>
+
+<style lang="scss">
+.handHeaderContent {
+  position: relative;
+  z-index: 999;
+  height: 100vh;
+  .el-container.is-vertical{
+    position: relative;
+  }
+  .inner_header {
+    padding: 0;
+    background: #fff;
+    justify-content: space-between;
+    height: 50px !important;
+    .colSpan {
+      width: 60px;
+      background-color: transparent;
+      justify-content: center;
+      align-items: center;
+      .hide {
+        width: 16px;
+        height: 16px;
+        background: url("@/assets/img/hide.png") no-repeat;
+        background-size: contain;
+        cursor: pointer;
+        transition: all 0.2s;
+        &.rotate {
+          transform: rotateZ(180deg);
+        }
+      }
+    }
+    .saasInfo {
+      .img {
+        align-items: center;
+        justify-content: center;
+        height: 50px;
+        margin-right: 20px;
+        cursor: pointer;
+        &:hover .dropDown {
+          display: block;
+        }
+        img {
+          width: 33px;
+          height: 33px;
+          border-radius: 50%;
+          margin-right: 5px;
+          border: 1px solid #eff2f5;
+        }
+        i {
+          font-size: 14px;
+          font-weight: bold;
+          color: #5a5a5a;
+        }
+      }
+    }
+  }
+  .dropDown {
+    position: absolute;
+    right: 10px;
+    top: 50px;
+    width: 170px;
+    background: #ffffff;
+    box-shadow: 0px 0px 4px 0px rgba(25, 25, 25, 0.1);
+    border-radius: 2px;
+    display: none;
+    z-index: 999;
+    .san {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border: 1px solid #fff;
+      border-top-style: none;
+      border-right-style: none;
+      transform: rotate(135deg);
+      position: absolute;
+      top: -4px;
+      right: 38px;
+      background: #fff;
+    }
+    .user {
+      padding: 11px;
+      align-items: center;
+      border-bottom: 1px solid #f5f5f5;
+      span {
+        line-height: normal;
+        font-size: 14px;
+      }
+    }
+    .exit {
+      font-size: 14px;
+      line-height: 39px;
+      height: 39px;
+      border-top: 1px solid #EFF2F5;
+      text-align: center;
+      padding: 0;
+      color: #5a5a5a;
+    }
+  }
+  .aside {
+    height: 100%;
+    transition: all .2s;
+    overflow: overlay;
+    .init-el-menu{
+      padding-bottom: 38px;
+    }
+    &.hideMenu{
+      .el-tooltip{
+        text-align: center;
+      }
+      .el-submenu__title{
+        text-align: center !important;
+      }
+      i.iconfont{
+        margin-right: 0;
+      }
+      .deldom,.el-submenu__icon-arrow{
+        display: none;
+      }
+    }
+    i.iconfont {
+      font-size: 16px;
+      display: inline-block;
+      width: 18px;
+      margin-right: 4px;
+      color: #747C81;
+    }
+  }
+  .main {
+    padding: 0;
+    background-color: #eff2f5;
+    &.scroll {
+      overflow-y: scroll;
+      .inner_content {
+        height: auto;
+        &.normal {
+          height: auto;
+        }
+      }
+    }
+    &.scrollX {
+      overflow-x: scroll;
+    }
+    .content_mar{
+      padding: 18px;
+    }
+    .inner_content {
+      background-color: #fff;
+      height: calc(100vh - 50px - 36px);
+      border-radius: 4px;
+      &.normal {
+        background-color: transparent;
+      }
+    }
+  }
+  .inner_footer {
+    color: #666666;
+    text-align: center;
+    padding-top: 18px;
+    justify-content: center;
+  }
+}
+
+@keyframes changeRun {
+	0% {
+		transform: translateY(0) scale(.9);
+	}
+  25% {
+		transform: translateY(-6px) scale(.9);
+	}
+	50% {
+		transform: translateY(0) scale(.9);
+	}
+  75% {
+		transform: translateY(-2px) scale(.9);
+	}
+	100% {
+		transform: translateY(0) scale(.9);
+	}
+}
+</style>