@中文描述: 优化侧边栏菜单结构 @版本号: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述: 优化侧边栏菜单结构 @版本号: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 6f3536c commit f5709f7a0247660b8e89a12cb319c525941fe092 ganyi authored 3 days ago

Showing 2 changed files

Ignore Space Show notes View project/hivuiMain/views/layout/components/conciseSidebar/concisemenu.vue
<template> <div class="concise-menu" ref="conciseMenu" :style="menuStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" > <div class="menu-search"> <div class="menu-title"> <div class="title">功能搜索:</div> </div> <div class="menu-search-box"> <input type="text" class="menu-search-input" placeholder="支持拼音首字母搜索" v-model.trim="searchWord" /> <i class="iconfont icon-search"></i> </div> </div> <div class="menu-content"> <div class="level1List" v-if="searchWord == ''"> <!-- 一级菜单列表 --> <ul class="area"> <li v-for="item in menus" :key="item.resId"> <div class="menu-item"> <div class="level first-level" :class="{ active: curresId == item.resId, noChild: !item.children \|\| !item.children.length, }" @click="handleFirstLevelClick(item)" @mouseenter="handleFirstLevelMouseEnter(item)" > <span class="title">{{ item.name }}</span> <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> </ul> <!-- 二级及以下菜单列表 --> <ul class="area child-menu"> <li v-for="item in childrenData" :key="item.resId"> <div class="menu-item"> <div> <div class="level second-level" :class="{ active: curresId == item.parentId && item.children && item.children.length, noChild: !item.children \|\| !item.children.length, }" @click="handleSecondLevelClick(item)" > <span class="title">{{ item.name }}</span> <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> <!-- 三级菜单 --> <ul class="child-area" v-if="item.children && item.children.length" > <template v-for="child in item.children"> <!-- 普通三级菜单项 --> <li :key="child.resId" v-if=" child.isShow && !(child.children && child.children.length) " > <div class="menu-item"> <div class="third-level" @click="handleOpenFunc(child)"> <span class="title">{{ child.name }}</span> <i v-if="child.children && child.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> <!-- 嵌套子菜单组件 --> <nav-sub-menus :level="0" :menuitem="child" :parent="conciseMenu" v-if=" child.isShow && child.children && child.children.length " :key="child.resId" > </nav-sub-menus> </template> </ul> </div> </li> </ul> </div> <div class="searchResultList" v-else> <ul> <li v-for="(searchItem, index) in searchList" :key="'search-' + index" :data-index="index" :title="searchItem.name" @click="handleOpenFunc(searchItem)" > <itemIcon :item="searchItem"></itemIcon> <span>{{ searchItem.name }}</span> </li> <li v-show="searchList.length == 0"> {{ $t("hivuiMain_nodata") }} </li> </ul> </div> </div> </div> </template> <script> import itemIcon from "@main/views/layout/components/allFuncMenu/itemIcon"; import NavSubMenus from "@main/views/layout/components/kyMenus/menus.vue"; import pinyin from "js-pinyin"; import cloneDeep from "lodash/cloneDeep"; export default { name: "ConciseMenu", inject: ["addTab"], provide() { let me = this; return { hideMenus() { me.handleMouseLeave(); }, }; }, components: { NavSubMenus, itemIcon }, props: { targetElRect: { type: Object, required: true, }, }, data() { return { searchWord: "", searchList: [], isVisible: false, isMouseOverMenu: false, curresId: "", childrenData: [], }; }, watch: { targetElRect: { handler() { this.updatePosition(); }, deep: true, }, searchWord(newVal, oldVal) { this.seldIndex = 0; this.doSearch(newVal); }, }, computed: { menuStyle() { return { position: "absolute", top: this.isVisible ? this.position.top + "px" : "-9999px", left: this.position.left + "px", opacity: this.isVisible ? 1 : 0, visibility: this.isVisible ? "visible" : "hidden", width: this.isVisible ? "600px" : "0", transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s", backgroundColor: "#fff", border: "1px solid #ddd", boxShadow: "0 2px 10px 0 #ddd", boxSizing: "border-box", overflow: "hidden", zIndex: 1000, }; }, position() { return { top: 0, left: 0, }; }, menus() { function sort(list) { let dirList = list.filter((item) => { return item.type == "dir"; }); let funcList = list.filter((item) => { return item.type != "dir"; }); list = funcList.concat(dirList); for (let item of list) { if (item.type == "dir") { if (item.children && item.children.length > 0) { item.children = sort(item.children); } } } return list; } return cloneDeep(this.$store.getters.menus); }, }, methods: { /** * 显示菜单 / show() { this.isVisible = true; this.$nextTick(() => { this.updatePosition(); }); }, /* * 隐藏菜单 / hide() { this.isVisible = false; }, /* * 更新菜单位置 / updatePosition() { if (!this.isVisible) return; this.$nextTick(() => { const menuEl = this.$el; if (!menuEl) return; const rect = this.targetElRect; if (!rect) return; let top = rect.top; let left = rect.right; // 应用位置 menuEl.style.top = top + "px"; menuEl.style.left = left + "px"; }); }, /* * 鼠标进入菜单区域处理 / handleMouseEnter(e) { if (e) { const target = e.target \|\| e.srcElement; if (target.closest && target.closest(".pl-menus-item")) { this.isMouseOverMenu = true; return; } } this.isMouseOverMenu = true; }, /* * 鼠标离开菜单区域处理 / handleMouseLeave(e) { if (e) { // 检查鼠标是否移向.pl-menus-item类元素 const relatedTarget = e.relatedTarget \|\| e.toElement; if ( relatedTarget && relatedTarget.closest && relatedTarget.closest(".pl-menus-item") ) { this.isMouseOverMenu = true; return; } } this.isMouseOverMenu = false; this.hide(); }, /* * 处理一级菜单点击事件 / handleFirstLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 处理一级菜单鼠标悬停事件 / handleFirstLevelMouseEnter(item) { if (item.children && item.children.length) { this.handleOpenFunc(item, true); } }, /* * 处理二级菜单点击事件 / handleSecondLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 打开功能页面 * @param {Object} item - 菜单项 * @param {Boolean} isTabClick - 是否是标签页点击（仅设置子菜单数据） / async handleOpenFunc(item, isTabClick) { let me = this; if (isTabClick) { this.setChildrenData(item.resId); return; } if (item.type == "link") { window.open(item.resUrl, item.name); return; } else if (item.type == "sso") { item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", { serviceUrl: item.resUrl, }); } // 添加标签页 me.addTab(item); setTimeout(() => { me.handleMouseLeave && me.handleMouseLeave(); }, 100); }, /* * 设置子菜单数据 * @param {String} resId - 菜单资源ID / setChildrenData(resId) { this.curresId = resId; const menu = this.menus.find((m) => m.resId === resId); if (menu && menu.children) { this.childrenData = menu.children; } else { this.childrenData = []; } }, //获取搜索列表数据 doSearch(cnKey) { let me = this; let list = [], records = me.$store.getters.menusList, hideMenuItemList = me.$store.getters.hideMenuItemList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for (let i = 0, l = records.length; i < l; i++) { let item = records[i]; if (!(!item.isShow \|\| hideMenuItemList.indexOf(item.parentId) != -1)) { if (item.parentId == -1 && item.type == "root") { continue; } if (re.test(cnKey)) { let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); if (y.indexOf(py) > -1 && item.type != "dir") { list.push(item); } } else { if (item.name.indexOf(cnKey) > -1 && item.type != "dir") { list.push(item); } } } } me.$set(me, "searchList", list); // me.$nextTick(() => { // me.countHeight(); // me.$refs.listBox.scrollTo({ // top: 0, // }); // }); }, }, mounted() { if (this.menus.length > 0) { const menu = this.menus[0]; this.setChildrenData(menu.resId); } }, }; </script> <style lang="less" scoped> .concise-menu { border-radius: 5px; ul, li { padding: 0; margin: 0; list-style: none; } { box-sizing: border-box; } .menu-search { display: flex; background-color: #ebf1f7; border-bottom: 1px solid #ced7e0; padding: 5px 10px; align-items: center; .menu-title { // width: 110px; text-align: right; padding-right: 10px; } .menu-search-box { flex: 1; display: flex; align-items: center; background-color: #fff; padding-right: 10px; border-radius: 5px; input { flex: 1; border: none; outline: none; line-height: 30px; padding: 0 15px; border-radius: 5px; } i { font-size: 20px; cursor: pointer; } } } .menu-content { position: relative; .level1List{ min-height: 100px; max-height: calc(100vh - 200px); overflow: auto; } .area { display: flex; flex-direction: column; li{ &:first-child{ .menu-item{ .first-level{ border-top: none; } } } } &.child-menu { width: calc(100% - 120px); height: 100%; position: absolute; top: 0; right: 0; background-color: #fff; overflow: auto; } .menu-item { display: flex; .level { position: relative; width: 120px; text-align: right; padding-right: 30px; i { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } &.noChild { cursor: pointer; } &.first-level { cursor: pointer; background-color: #ebf1f7; border: 1px solid #ced7e0; border-bottom: none; line-height: 32px; &.active { color: #0066cc; background-color: #fff; border-right-color: transparent; cursor: default; } &:hover { color: #0066cc; } } &.second-level { flex: 0 0 120px; padding-top: 5px; padding-left: 5px; padding-bottom: 5px; &.active { color: #0066cc; background-color: #fff; border-color: transparent; } &:hover { color: #0066cc; } } } } .child-area { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-bottom: 1px solid #ced7e0; .third-level { padding: 0 8px; border-left: 1px solid #ced7e0; cursor: pointer; &:hover { color: #0066cc; } } ::v-deep .pl-menus-item { padding: 0 8px; border-left: 1px solid #ced7e0; &.pl-menus-itemSeld { color: #0066cc; } .title { position: relative; .txt { display: inline-block; padding-right: 10px; i { position: absolute; right: -5px; top: 50%; transform: translateY(-50%); } } } } } } .searchResultList { width: 100%; min-height: 100px; max-height: calc(100vh - 200px); overflow: auto; padding: 5px 10px; ul { display: flex; flex-wrap: wrap; padding-bottom: 10px; li { flex: 0 0 33.3%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; font-size: 14px; display: flex; align-items: center; cursor: pointer; &:hover { color: #06c; } } .itemSeld { color: #f00; } } } } } </style> <template> <div class="concise-menu" ref="conciseMenu" :style="menuStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" > <div class="menu-search"> <div class="menu-title"> <div class="title">功能搜索:</div> </div> <div class="menu-search-box"> <input type="text" class="menu-search-input" placeholder="支持拼音首字母搜索" v-model.trim="searchWord" /> <i class="iconfont icon-search"></i> </div> </div> <div class="menu-content"> <div class="level1List" v-if="searchWord == ''"> <!-- 一级菜单列表 --> <ul class="area"> <li v-for="item in menus" :key="item.resId"> <div class="menu-item"> <div class="level first-level" :class="{ active: curresId == item.resId, noChild: !item.children \|\| !item.children.length, }" @click="handleFirstLevelClick(item)" @mouseenter="handleFirstLevelMouseEnter(item)" > <span class="title">{{ item.name }}</span> <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> </ul> <!-- 二级及以下菜单列表 --> <ul class="area child-menu"> <li v-for="item in childrenData" :key="item.resId"> <div class="menu-item"> <div> <div class="level second-level" :class="{ active: curresId == item.parentId && item.children && item.children.length, noChild: !item.children \|\| !item.children.length, }" @click="handleSecondLevelClick(item)" > <span class="title">{{ item.name }}</span> <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> <!-- 三级菜单 --> <ul class="child-area" v-if="item.children && item.children.length" > <template v-for="child in item.children"> <!-- 普通三级菜单项 --> <li :key="child.resId" v-if=" child.isShow && !(child.children && child.children.length) " > <div class="menu-item"> <div class="third-level" @click="handleOpenFunc(child)"> <span class="title">{{ child.name }}</span> <i v-if="child.children && child.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> <!-- 嵌套子菜单组件 --> <nav-sub-menus :level="0" :menuitem="child" :parent="conciseMenu" v-if=" child.isShow && child.children && child.children.length " :key="child.resId" > </nav-sub-menus> </template> </ul> </div> </li> </ul> </div> <div class="searchResultList" v-else> <ul> <li v-for="(searchItem, index) in searchList" :key="'search-' + index" :data-index="index" :title="searchItem.name" @click="handleOpenFunc(searchItem)" > <itemIcon :item="searchItem"></itemIcon> <span>{{ searchItem.name }}</span> </li> <li v-show="searchList.length == 0"> {{ $t("hivuiMain_nodata") }} </li> </ul> </div> </div> </div> </template> <script> import itemIcon from "@main/views/layout/components/allFuncMenu/itemIcon"; import NavSubMenus from "@main/views/layout/components/kyMenus/menus.vue"; import pinyin from "js-pinyin"; import cloneDeep from "lodash/cloneDeep"; export default { name: "ConciseMenu", inject: ["addTab"], provide() { let me = this; return { hideMenus() { me.handleMouseLeave(); }, }; }, components: { NavSubMenus, itemIcon }, props: { targetElRect: { type: Object, required: true, }, }, data() { return { searchWord: "", searchList: [], isVisible: false, isMouseOverMenu: false, curresId: "", childrenData: [], }; }, watch: { targetElRect: { handler() { this.updatePosition(); }, deep: true, }, searchWord(newVal, oldVal) { this.seldIndex = 0; this.doSearch(newVal); }, }, computed: { menuStyle() { return { position: "absolute", top: this.isVisible ? this.position.top + "px" : "-9999px", left: this.position.left + "px", opacity: this.isVisible ? 1 : 0, visibility: this.isVisible ? "visible" : "hidden", width: this.isVisible ? "600px" : "0", transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s", backgroundColor: "#fff", border: "1px solid #ddd", boxShadow: "0 2px 10px 0 #ddd", boxSizing: "border-box", overflow: "hidden", zIndex: 1000, }; }, position() { return { top: 0, left: 0, }; }, menus() { function sort(list) { let dirList = list.filter((item) => { return item.type == "dir"; }); let funcList = list.filter((item) => { return item.type != "dir"; }); list = funcList.concat(dirList); for (let item of list) { if (item.type == "dir") { if (item.children && item.children.length > 0) { item.children = sort(item.children); } } } return list; } return cloneDeep(this.$store.getters.menus); }, }, methods: { /** * 显示菜单 / show() { this.isVisible = true; this.$nextTick(() => { this.updatePosition(); }); }, /* * 隐藏菜单 / hide() { this.isVisible = false; }, /* * 更新菜单位置 / updatePosition() { if (!this.isVisible) return; this.$nextTick(() => { const menuEl = this.$el; if (!menuEl) return; const rect = this.targetElRect; if (!rect) return; let top = rect.top; let left = rect.right; // 应用位置 menuEl.style.top = top + "px"; menuEl.style.left = left + "px"; }); }, /* * 鼠标进入菜单区域处理 / handleMouseEnter(e) { if (e) { const target = e.target \|\| e.srcElement; if (target.closest && target.closest(".pl-menus-item")) { this.isMouseOverMenu = true; return; } } this.isMouseOverMenu = true; }, /* * 鼠标离开菜单区域处理 / handleMouseLeave(e) { if (e) { // 检查鼠标是否移向.pl-menus-item类元素 const relatedTarget = e.relatedTarget \|\| e.toElement; if ( relatedTarget && relatedTarget.closest && relatedTarget.closest(".pl-menus-item") ) { this.isMouseOverMenu = true; return; } } this.isMouseOverMenu = false; this.hide(); }, /* * 处理一级菜单点击事件 / handleFirstLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 处理一级菜单鼠标悬停事件 / handleFirstLevelMouseEnter(item) { if (item.children && item.children.length) { this.handleOpenFunc(item, true); } }, /* * 处理二级菜单点击事件 / handleSecondLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 打开功能页面 * @param {Object} item - 菜单项 * @param {Boolean} isTabClick - 是否是标签页点击（仅设置子菜单数据） / async handleOpenFunc(item, isTabClick) { let me = this; if (isTabClick) { this.setChildrenData(item.resId); return; } if (item.type == "link") { window.open(item.resUrl, item.name); return; } else if (item.type == "sso") { item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", { serviceUrl: item.resUrl, }); } // 添加标签页 me.addTab(item); setTimeout(() => { me.handleMouseLeave && me.handleMouseLeave(); }, 100); }, /* * 设置子菜单数据 * @param {String} resId - 菜单资源ID / setChildrenData(resId) { this.curresId = resId; const menu = this.menus.find((m) => m.resId === resId); if (menu && menu.children) { this.childrenData = menu.children; } else { this.childrenData = []; } }, //获取搜索列表数据 doSearch(cnKey) { let me = this; let list = [], records = me.$store.getters.menusList, hideMenuItemList = me.$store.getters.hideMenuItemList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for (let i = 0, l = records.length; i < l; i++) { let item = records[i]; if (!(!item.isShow \|\| hideMenuItemList.indexOf(item.parentId) != -1)) { if (item.parentId == -1 && item.type == "root") { continue; } if (re.test(cnKey)) { let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); if (y.indexOf(py) > -1 && item.type != "dir") { list.push(item); } } else { if (item.name.indexOf(cnKey) > -1 && item.type != "dir") { list.push(item); } } } } me.$set(me, "searchList", list); // me.$nextTick(() => { // me.countHeight(); // me.$refs.listBox.scrollTo({ // top: 0, // }); // }); }, }, mounted() { if (this.menus.length > 0) { const menu = this.menus[0]; this.setChildrenData(menu.resId); } }, }; </script> <style lang="less" scoped> .concise-menu { border-radius: 5px; ul, li { padding: 0; margin: 0; list-style: none; } { box-sizing: border-box; } .menu-search { display: flex; background-color: #ebf1f7; border-bottom: 1px solid #ced7e0; padding: 5px 10px; align-items: center; .menu-title { // width: 110px; text-align: right; padding-right: 10px; } .menu-search-box { flex: 1; display: flex; align-items: center; background-color: #fff; padding-right: 10px; border-radius: 5px; input { flex: 1; border: none; outline: none; line-height: 30px; padding: 0 15px; border-radius: 5px; } i { font-size: 20px; cursor: pointer; } } } .menu-content { position: relative; .level1List{ min-height: 100px; max-height: calc(100vh - 200px); overflow: auto; } .area { display: flex; flex-direction: column; li{ &:first-child{ .menu-item{ .first-level{ border-top: none; } } } } &.child-menu { width: calc(100% - 120px); height: 100%; position: absolute; top: 0; right: 0; background-color: #fff; overflow: auto; } .menu-item { display: flex; .level { position: relative; width: 120px; text-align: right; padding-right: 30px; i { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } &.noChild { cursor: pointer; } &.first-level { cursor: pointer; background-color: #ebf1f7; border: 1px solid #ced7e0; border-bottom: none; line-height: 32px; &.active { color: #0066cc; background-color: #fff; border-right-color: transparent; cursor: default; } &:hover { color: #0066cc; } } &.second-level { flex: 0 0 120px; padding-top: 5px; padding-left: 5px; padding-bottom: 5px; &.active { color: #0066cc; background-color: #fff; border-color: transparent; } &:hover { color: #0066cc; } } } } .child-area { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-bottom: 1px solid #ced7e0; .third-level { padding: 0 8px; border-left: 1px solid #ced7e0; cursor: pointer; &:hover { color: #0066cc; } } ::v-deep .pl-menus-item { padding: 0 8px; border-left: 1px solid #ced7e0; &.pl-menus-itemSeld { color: #0066cc; } .title { position: relative; .txt { display: inline-block; padding-right: 10px; i { position: absolute; right: -5px; top: 50%; transform: translateY(-50%); } } } } } } .searchResultList { width: 100%; min-height: 100px; max-height: calc(100vh - 200px); overflow: auto; padding: 5px 10px; ul { display: flex; flex-wrap: wrap; padding-bottom: 10px; li { flex: 0 0 33.3%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; font-size: 14px; display: flex; align-items: center; cursor: pointer; &:hover { color: #06c; } } .itemSeld { color: #f00; } } } } } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/conciseSidebar/concisemenu.vue

<ul
                class="child-area"
                v-if="item.children && item.children.length"
              >
                <template v-for="child in item.children">
                  
                  <li
                    :key="child.resId"
                    v-if="
                      child.isShow && !(child.children && child.children.length)
                    "
                  >
                    <div class="menu-item">
                      <div class="third-level" @click="handleOpenFunc(child)">
                        <span class="title">{{ child.name }}</span>
                        <i
                          v-if="child.children && child.children.length"
                          class="iconfont icon-arrow-right"
                        ></i>
                      </div>
                    </div>
                  </li>

<nav-sub-menus
                    :level="0"
                    :menuitem="child"
                    :parent="conciseMenu"
                    v-if="
                      child.isShow && child.children && child.children.length
                    "
                    :key="child.resId"
                  >
                  </nav-sub-menus>
                </template>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="searchResultList" v-else>
        <ul>
          <li
            v-for="(searchItem, index) in searchList"
            :key="'search-' + index"
            :data-index="index"
            :title="searchItem.name"
            @click="handleOpenFunc(searchItem)"
          >
            <itemIcon :item="searchItem"></itemIcon>
            <span>{{ searchItem.name }}</span>
          </li>
          <li v-show="searchList.length == 0">
            {{ $t("hivuiMain_nodata") }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

isVisible: false,
      isMouseOverMenu: false,
      curresId: "",
      childrenData: [],
    };
  },
  watch: {
    targetElRect: {
      handler() {
        this.updatePosition();
      },
      deep: true,
    },
    searchWord(newVal, oldVal) {
      this.seldIndex = 0;
      this.doSearch(newVal);
    },
  },
  computed: {
    menuStyle() {
      return {
        position: "absolute",
        top: this.isVisible ? this.position.top + "px" : "-9999px",
        left: this.position.left + "px",
        opacity: this.isVisible ? 1 : 0,
        visibility: this.isVisible ? "visible" : "hidden",
        width: this.isVisible ? "600px" : "0",
        transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s",
        backgroundColor: "#fff",
        border: "1px solid #ddd",
        boxShadow: "0 2px 10px 0 #ddd",
        boxSizing: "border-box",
        overflow: "hidden",
        zIndex: 1000,
      };
    },
    position() {
      return {
        top: 0,
        left: 0,
      };
    },
    menus() {
      function sort(list) {
        let dirList = list.filter((item) => {
          return item.type == "dir";
        });
        let funcList = list.filter((item) => {
          return item.type != "dir";
        });
        list = funcList.concat(dirList);
        for (let item of list) {
          if (item.type == "dir") {
            if (item.children && item.children.length > 0) {
              item.children = sort(item.children);
            }
          }
        }
        return list;
      }
      return cloneDeep(this.$store.getters.menus);
    },
  },
  methods: {
    /**
     * 显示菜单
     */
    show() {
      this.isVisible = true;
      this.$nextTick(() => {
        this.updatePosition();
      });
    },

/**
     * 隐藏菜单
     */
    hide() {
      this.isVisible = false;
    },

/**
     * 更新菜单位置
     */
    updatePosition() {
      if (!this.isVisible) return;

this.$nextTick(() => {
        const menuEl = this.$el;
        if (!menuEl) return;

const rect = this.targetElRect;
        if (!rect) return;

let top = rect.top;
        let left = rect.right;

// 应用位置
        menuEl.style.top = top + "px";
        menuEl.style.left = left + "px";
      });
    },

/**
     * 鼠标进入菜单区域处理
     */
    handleMouseEnter(e) {
      if (e) {
        const target = e.target || e.srcElement;
        if (target.closest && target.closest(".pl-menus-item")) {
          this.isMouseOverMenu = true;
          return;
        }
      }
      this.isMouseOverMenu = true;
    },

/**
     * 鼠标离开菜单区域处理
     */
    handleMouseLeave(e) {
      if (e) {
        // 检查鼠标是否移向.pl-menus-item类元素
        const relatedTarget = e.relatedTarget || e.toElement;
        if (
          relatedTarget &&
          relatedTarget.closest &&
          relatedTarget.closest(".pl-menus-item")
        ) {
          this.isMouseOverMenu = true;
          return;
        }
      }
      this.isMouseOverMenu = false;
      this.hide();
    },

/**
     * 处理一级菜单点击事件
     */
    handleFirstLevelClick(item) {
      if (!item.children || !item.children.length) {
        this.handleOpenFunc(item);
      }
    },

/**
     * 处理一级菜单鼠标悬停事件
     */
    handleFirstLevelMouseEnter(item) {
      if (item.children && item.children.length) {
        this.handleOpenFunc(item, true);
      }
    },

/**
     * 处理二级菜单点击事件
     */
    handleSecondLevelClick(item) {
      if (!item.children || !item.children.length) {
        this.handleOpenFunc(item);
      }
    },

/**
     * 打开功能页面
     * @param {Object} item - 菜单项
     * @param {Boolean} isTabClick - 是否是标签页点击（仅设置子菜单数据）
     */
    async handleOpenFunc(item, isTabClick) {
      let me = this;
      if (isTabClick) {
        this.setChildrenData(item.resId);
        return;
      }

if (item.type == "link") {
        window.open(item.resUrl, item.name);
        return;
      } else if (item.type == "sso") {
        item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", {
          serviceUrl: item.resUrl,
        });
      }

// 添加标签页
      me.addTab(item);

setTimeout(() => {
        me.handleMouseLeave && me.handleMouseLeave();
      }, 100);
    },

/**
     * 设置子菜单数据
     * @param {String} resId - 菜单资源ID
     */
    setChildrenData(resId) {
      this.curresId = resId;
      const menu = this.menus.find((m) => m.resId === resId);
      if (menu && menu.children) {
        this.childrenData = menu.children;
      } else {
        this.childrenData = [];
      }
    },
    //获取搜索列表数据
    doSearch(cnKey) {
      let me = this;
      let list = [],
        records = me.$store.getters.menusList,
        hideMenuItemList = me.$store.getters.hideMenuItemList;
      let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
      let re = new RegExp("^[a-zA-Z]+$");
      for (let i = 0, l = records.length; i < l; i++) {
        let item = records[i];
        if (!(!item.isShow || hideMenuItemList.indexOf(item.parentId) != -1)) {
          if (item.parentId == -1 && item.type == "root") {
            continue;
          }
          if (re.test(cnKey)) {
            let y = pinyin.getCamelChars(item.name).toLocaleLowerCase();
            if (y.indexOf(py) > -1 && item.type != "dir") {
              list.push(item);
            }
          } else {
            if (item.name.indexOf(cnKey) > -1 && item.type != "dir") {
              list.push(item);
            }
          }
        }
      }
      me.$set(me, "searchList", list);
      // me.$nextTick(() => {
      //   me.countHeight();
      //   me.$refs.listBox.scrollTo({
      //     top: 0,
      //   });
      // });
    },
  },
  mounted() {
    if (this.menus.length > 0) {
      const menu = this.menus[0];
      this.setChildrenData(menu.resId);
    }
  },
};
</script>

ul,
  li {
    padding: 0;
    margin: 0;
    list-style: none;
  }

* {
    box-sizing: border-box;
  }
  .menu-search {
    display: flex;
    background-color: #ebf1f7;
    border-bottom: 1px solid #ced7e0;
    padding: 5px 10px;
    align-items: center;

.menu-title {
      // width: 110px;
      text-align: right;
      padding-right: 10px;
    }
    .menu-search-box {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding-right: 10px;
      border-radius: 5px;
      input {
        flex: 1;
        border: none;
        outline: none;
        line-height: 30px;
        padding: 0 15px;
        border-radius: 5px;
      }
      i {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }

.menu-content {
    position: relative;
    .level1List{
      min-height: 100px;
      max-height: calc(100vh - 200px);
      overflow: auto;
    }
    .area {
      display: flex;
      flex-direction: column;

li{
        &:first-child{
          .menu-item{
            .first-level{
              border-top: none;
            }
          }
        }
      }

&.child-menu {
        width: calc(100% - 120px);
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #fff;
        overflow: auto;
      }

.menu-item {
        display: flex;

.level {
          position: relative;
          width: 120px;
          text-align: right;
          padding-right: 30px;
          i {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
          }

&.noChild {
            cursor: pointer;
          }

&.first-level {
            cursor: pointer;
            background-color: #ebf1f7;
            border: 1px solid #ced7e0;
            border-bottom: none;
            line-height: 32px;
          
            &.active {
              color: #0066cc;
              background-color: #fff;
              border-right-color: transparent;
              cursor: default;
            }

&:hover {
              color: #0066cc;
            }
          }

&.second-level {
            flex: 0 0 120px;
            padding-top: 5px;
            padding-left: 5px;
            padding-bottom: 5px;

&.active {
              color: #0066cc;
              background-color: #fff;
              border-color: transparent;
            }

&:hover {
              color: #0066cc;
            }
          }
        }
      }

.child-area {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid #ced7e0;

.third-level {
          padding: 0 8px;
          border-left: 1px solid #ced7e0;
          cursor: pointer;

&:hover {
            color: #0066cc;
          }
        }

::v-deep .pl-menus-item {
          padding: 0 8px;
          border-left: 1px solid #ced7e0;

&.pl-menus-itemSeld {
            color: #0066cc;
          }

.title {
            position: relative;

.txt {
              display: inline-block;
              padding-right: 10px;

i {
                position: absolute;
                right: -5px;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }
      }
    }

.searchResultList {
      width: 100%;
      min-height: 100px;
      max-height: calc(100vh - 200px);
      overflow: auto;
      padding: 5px 10px;
      ul {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 10px;
        li {
          flex: 0 0 33.3%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 32px;
          font-size: 14px;
          display: flex;
          align-items: center;
          cursor: pointer;
          &:hover {
            color: #06c;
          }
        }
        .itemSeld {
          color: #f00;
        }
      }
    }
  }
}
</style>

/**
     * 隐藏菜单
     */
    hide() {
      this.isVisible = false;
    },

/**
     * 更新菜单位置
     */
    updatePosition() {
      if (!this.isVisible) return;

this.$nextTick(() => {
        const menuEl = this.$el;
        if (!menuEl) return;

const rect = this.targetElRect;
        if (!rect) return;

let top = rect.top;
        let left = rect.right;

// 应用位置
        menuEl.style.top = top + "px";
        menuEl.style.left = left + "px";
      });
    },

/**
     * 处理一级菜单点击事件
     */
    handleFirstLevelClick(item) {
      if (!item.children || !item.children.length) {
        this.handleOpenFunc(item);
      }
    },

/**
     * 处理二级菜单点击事件
     */
    handleSecondLevelClick(item) {
      if (!item.children || !item.children.length) {
        this.handleOpenFunc(item);
      }
    },

// 添加标签页
      me.addTab(item);

setTimeout(() => {
        me.handleMouseLeave && me.handleMouseLeave();
      }, 100);
    },

ul,
  li {
    padding: 0;
    margin: 0;
    list-style: none;
  }

* {
    box-sizing: border-box;
  }
  .menu-search {
    display: flex;
    background-color: #ebf1f7;
    border-bottom: 1px solid #ced7e0;
    padding: 5px 10px;
    align-items: center;

li{
        &:first-child{
          .menu-item{
            .first-level{
              border-top: none;
            }
          }
        }
      }

&.child-menu {
        width: calc(100% - 120px);
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #fff;
        overflow: auto;
      }

.menu-item {
        display: flex;

&.noChild {
            cursor: pointer;
          }

&:hover {
              color: #0066cc;
            }
          }

&.second-level {
            flex: 0 0 120px;
            padding-top: 5px;
            padding-left: 5px;
            padding-bottom: 5px;

&.active {
              color: #0066cc;
              background-color: #fff;
              border-color: transparent;
            }

&:hover {
              color: #0066cc;
            }
          }
        }
      }

.child-area {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid #ced7e0;

.third-level {
          padding: 0 8px;
          border-left: 1px solid #ced7e0;
          cursor: pointer;

&:hover {
            color: #0066cc;
          }
        }

::v-deep .pl-menus-item {
          padding: 0 8px;
          border-left: 1px solid #ced7e0;

&.pl-menus-itemSeld {
            color: #0066cc;
          }

.title {
            position: relative;

.txt {
              display: inline-block;
              padding-right: 10px;

Ignore Space Show notes View project/hivuiMain/views/layout/components/conciseSidebar/index.vue
<template> <div class="pl-concise-sidebar"> <div ref="conciseHead" class="pl-tabs-hd concise"></div> <div class="menus"> <!-- 主菜单区域 --> <ul class="area"> <!-- 全部功能按钮 --> <li> <div title="全部功能" ref="navMenuBtn" @mouseenter="handleNavMenuBtnMouseEnter" @mouseleave="handleNavMenuBtnMouseLeave" > <div class="tip"> <i class="iconfont icon-func"></i> </div> </div> </li> <!-- 用户信息菜单项 --> <li> <template v-if="sysUserInfo.children && sysUserInfo.children.length"> <div class="item" :title="sysUserInfo.name" @mouseenter="handleFuncMenus(sysUserInfo, $event)" > <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> </div> </template> </li> <!-- 系统功能菜单项 --> <template v-for="item in sysFuncMenus"> <li v-if="item.type != 'split'" :key="item.resId"> <template v-if="item.type == 'withNumTips'"> <div class="item" :title="item.name" @click.prevent="handleFuncMenus(item, $event)" @mouseenter="handleFuncMenus(item, $event, true)" > <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> </div> </template> <!-- 普通菜单项 --> <template v-else> <!-- 有子菜单的项 --> <template v-if="item.children && item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item, $event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> </div> </template> <!-- 无子菜单的项 --> <template v-else> <div class="item" @click.prevent="handleFuncMenus(item, $event)" > <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> </div> </template> </template> </li> </template> </ul> <!-- 系统功能菜单区域 --> <ul class="area"> <!-- 项目管理菜单项 --> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target="_blank" class="item" :title="sysProjectManage.name" > <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{ sysProjectManage.name }}</span> </a> </li> <!-- 语言切换菜单项 --> <li v-if="langList"> <template v-if="langList.children && langList.children.length"> <div class="item" :title="langList.name" @mouseenter="handleFuncMenus(langList, $event)" > <div class="tip"> <i class="iconfont" :class="langList.iconClass"></i> </div> </div> </template> </li> <!-- 设置菜单项 --> <li v-if="hasSetting"> <div class="item" :title="$t('hivuiMain_customWorkbench')"> <a href="#design" target="_blank" ><i class="iconfont icon-set-fill"></i ></a> </div> </li> <!-- 退出登录菜单项 --> <li> <div class="item" :title="$t('hivuiMain_logout')" @click="handleLogout" @mouseenter="handleFuncMenus(null, null, true)" > <a><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> </div> <!-- 右键上下文菜单组件 --> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name" :is-bottom="true" ></vueContextMenu> <modifyPw></modifyPw> <!-- 导航菜单组件 --> <navmenu ref="navmenu" :targetElRect="navMenuBtnRect" @mouseenter.native="handleNavMenuMouseEnter" @mouseleave.native="handleNavMenuMouseLeave($event)" ></navmenu> </div> </template> <script> import vueContextMenu from "@main/components/contextMenu"; import modifyPw from "@main/views/layout/components/modifyPw"; import navmenu from "./concisemenu.vue"; import { sortMapTurnArr } from "@main/utils/index"; import screenfull from "screenfull"; export default { components: { vueContextMenu, modifyPw, navmenu }, inject: ["addTab", "showTab", "hideTab"], props: {}, data() { return { menuItems: [], // 菜单项数据 navMenuBtnRect: {}, // 导航菜单按钮位置信息 }; }, computed: { /** * 是否显示设置按钮 / hasSetting() { let cfg = this.$store.state.app.config \|\| {}; if (cfg.hideSettingBtn) { return false; } let _arr = sortMapTurnArr(cfg.sysSetTabs); return _arr && _arr.length; }, /* * 系统列表 / sysList() { let cfg = this.$store.state.app.config \|\| {}; return cfg.sysList \|\| []; }, /* * 语言列表 / langList() { let cfg = this.$store.state.app.config \|\| {}; if (!cfg.showChangeLangBtn) { return; } let menus = cfg.langList \|\| []; return menus; }, /* * 用户信息菜单 / sysUserInfo() { let me = this; let cfg = this.$store.state.app.config \|\| {}; // 替换数据中的变量 function replaceData(str) { if (!str) return ["", false]; var _arr = str.match(/\${(\S?)}/g); var nullNum = 0; if (_arr && _arr.length > 0) { for (let i of _arr) { var _data = me.userInfo[i.match(/\${(\S)}/)[1]]; if (typeof _data != "undefined") { str = str.replace(i, _data); } else { str = str.replace(i, me.$t("hivuiMain_header_null")); nullNum++; } } return [str, nullNum == _arr.length ? false : true]; } return [str, true]; } // 多岗位信息文字模板格式化 function orgBzTplFormat(str, item) { let fieldArr = str.match(/(?<=\${).?(?=})/g); fieldArr.forEach((_i) => { if (typeof item[_i] != "undefined") { str = str.replaceAll("${" + _i + "}", item[_i]); } }); return str; } let _userInfo = cfg.userInfo; if (_userInfo) { _userInfo.name = replaceData(_userInfo.name)[0]; if (_userInfo.children && _userInfo.children.length > 0) { _userInfo.children = _userInfo.children.filter((item) => { let _rData = replaceData(item.name); item.name = _rData[0]; // 根据不同类型设置处理函数 switch (item.type) { case "modifyUserInfo": item.handler = me.modifyUserInfo; break; case "modifyPw": item.handler = me.modifyPw; break; case "personalCenter": item.handler = me.personalCenter; break; case "orgBz": if (Array.isArray(me.bzList) && me.bzList.length > 1) { item.children = []; for (let i of me.bzList) { let _pushData = { iconClass: "icon-user", name: cfg.orgBzTpl ? orgBzTplFormat(cfg.orgBzTpl, i) : `${i.fbzname}/${i.fbzid}`, handler: function () { me.__changeOrgBz(`${i.fbzid}`); }, }; item.children.push(_pushData); } } break; } // 只返回有效的菜单项 if (_rData[1]) { return item; } }); } } return _userInfo \|\| []; }, /** * 系统功能菜单 / sysFuncMenus() { let cfg = this.$store.state.app.config \|\| {}; let menus = sortMapTurnArr(cfg.sysFuncMenus) \|\| []; return menus; }, /* * 项目管理菜单 / sysProjectManage() { let cfg = this.$store.state.app.config \|\| {}; let item = cfg.sysProjectMange \|\| {}, flag = false; this.$store.state.app.powerList.forEach((p) => { if (p.resUrl.indexOf(item.uri) > -1) { flag = true; return true; } }); if (flag) { return cfg.sysProjectMange; } else { return null; } }, /* * 用户信息 / userInfo() { return this.$store.state.user.userInfo; }, isFullscreen() { return screenfull.isFullscreen; }, }, methods: { /* * 更新导航菜单按钮位置信息 / updateNavMenuBtnRect() { if (this.$refs && this.$refs.navMenuBtn) { this.navMenuBtnRect = this.$refs.navMenuBtn.getBoundingClientRect(); } }, /* * 鼠标进入导航菜单按钮处理 / handleNavMenuBtnMouseEnter() { this.$refs["cmp-funcMenu"].close(); if (this.$refs.navmenu) { this.$refs.navmenu.show(); } }, /* * 鼠标离开导航菜单按钮处理 / handleNavMenuBtnMouseLeave() { // 延迟隐藏导航菜单 setTimeout(() => { if (this.$refs.navmenu && !this.$refs.navmenu.isMouseOverMenu) { this.$refs.navmenu.hide(); } }, 100); }, /* * 鼠标进入导航菜单处理 / handleNavMenuMouseEnter() { // 鼠标进入菜单区域，取消隐藏 if (this.$refs.navmenu) { this.$refs.navmenu.isMouseOverMenu = true; } }, /* * 鼠标离开导航菜单处理 / handleNavMenuMouseLeave(e) { // 鼠标离开菜单区域，检查是否移向.pl-menus-item元素 if (e) { const relatedTarget = e.relatedTarget \|\| e.toElement; if ( relatedTarget && relatedTarget.closest && relatedTarget.closest(".pl-menus-item") ) { // 如果移向.pl-menus-item元素，保持菜单显示 if (this.$refs.navmenu) { this.$refs.navmenu.isMouseOverMenu = true; } return; } } if (this.$refs.navmenu) { this.$refs.navmenu.isMouseOverMenu = false; this.$refs.navmenu.hide(); } }, /* * 处理功能菜单点击 * @param {Object} item - 菜单项 * @param {Event} $event - 事件对象 * @param {Boolean} isClose - 是否关闭菜单 / handleFuncMenus(item, $event, isClose) { if (isClose) { this.$refs["cmp-funcMenu"].close(); return; } $event && $event.stopPropagation(); // 处理链接类型菜单 if (item && item.type == "link") { window.open(item.resUrl, item.name); return; } // 处理带token的URL var _url = item ? item.url : ""; if (item && (item.type == "widthToken" \|\| item.type == "withToken")) { _url = item.url + "&access_token=" + this.token; } // 处理有URL的菜单项 if (item && item.url) { item.target == "tab" ? this.addTab({ resUrl: _url, name: item.name, resId: item.id, openType: item.openType, }) : window.open(_url); return; } else { item && item.handler && item.handler(); } if (item && item.children && item.children.length) { this.menuItems = item.children; this.$refs["cmp-funcMenu"].open($event); if (item.type == "lang") { item.children.forEach((__item, index) => { if (!__item.handler) { __item.handler = () => { window.localStorage.setItem( "locale", JSON.stringify({ desc: __item.name, name: __item.key, }) ); Cookies.set("locale", __item.key); window.location.reload(); }; } }); } } }, /* * 处理退出登录 / async handleLogout() { if (window.customSysCofig.logoutBeforeCallback) { const bool = window.customSysCofig.logoutBeforeCallback(); if (bool) { return; } } await this.$store.dispatch("user/logout").then(() => { window.sessionStorage.removeItem("bzid"); if (window.customSysCofig.logoutCallback) { window.customSysCofig.logoutCallback(); } else { if ( window.HIVUI_SETTING.isSingleLogin && window.HIVUI_SETTING.singleLogoutUrl ) { location = window.HIVUI_SETTING.singleLogoutUrl; } else { location = window.HIVUI_SETTING.loginUrl; } } }); }, }, mounted() { this.updateNavMenuBtnRect(); this.$store.dispatch("app/getSysConfig"); this.sysFuncMenus.filter((item) => { if (item.type == "withNumTips" && item.numFunc) { const intervalFunc = () => { item .numFunc() .then((res) => { this.msgCount = res.num; if (res.num && !item.hideNotific) { window.SysPage.notificationFunc( this.$t("hivuiMain_header_notification_title"), item.messageText(res), () => { this.handleFuncMenus(item); } ); } }) .catch((err) => { clearInterval(this.numTipTimer); }); }; clearInterval(this.numTipTimer); this.numTipTimer = setInterval( intervalFunc, item.numIntervalTime \|\| 1000 30 ); intervalFunc(); } }); }, }; </script> <style lang="less" scoped> .pl-concise-sidebar { display: flex; flex-direction: column; position: absolute; top: 0; left: 0; bottom: 0; width: 36px; background: rgba(235, 241, 247, 1); border-right: 1px solid rgba(235, 241, 247, 1); // 重置默认样式 ul, li { margin: 0; padding: 0; list-style: none; } &.showFuncMenu { .menus { margin-top: 40px; } } .menus { flex: 1; padding: 8px 4px; display: flex; flex-direction: column; justify-content: space-between; .area { display: flex; flex-direction: column; gap: 8px; color: #4e5969; li { cursor: pointer; line-height: 30px; background-color: transparent; transition: all 0.3s; &:hover { background-color: #c7d5e2; border-radius: 5px; } > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .item { display: flex; align-items: center; } } } } } </style> <template> <div class="pl-concise-sidebar"> <div ref="conciseHead" class="pl-tabs-hd concise"></div> <div class="menus"> <!-- 主菜单区域 --> <ul class="area"> <li> <!-- 全部功能按钮 --> <div title="全部功能" ref="navMenuBtn" @mouseenter="handleNavMenuBtnMouseEnter" @mouseleave="handleNavMenuBtnMouseLeave" > <div class="tip"> <i class="iconfont icon-func"></i> </div> </div> </li> </ul> <!-- 系统功能菜单区域 --> <ul class="area"> <!-- 项目管理菜单项 --> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target="_blank" class="item" :title="sysProjectManage.name" > <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{ sysProjectManage.name }}</span> </a> </li> <!-- 系统功能菜单项 --> <template v-for="item in sysFuncMenus"> <li v-if="item.type != 'split'" :key="item.resId"> <template v-if="item.type == 'withNumTips'"> <div class="item" :title="item.name" @click.prevent="handleFuncMenus(item, $event)" @mouseenter="handleFuncMenus(item, $event, true)" > <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> </div> </template> <!-- 普通菜单项 --> <template v-else> <!-- 有子菜单的项 --> <template v-if="item.children && item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item, $event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> </div> </template> <!-- 无子菜单的项 --> <template v-else> <div class="item" @click.prevent="handleFuncMenus(item, $event)" > <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> </div> </template> </template> </li> </template> <!-- 语言切换菜单项 --> <li v-if="langList"> <template v-if="langList.children && langList.children.length"> <div class="item" :title="langList.name" @mouseenter="handleFuncMenus(langList, $event)" > <div class="tip"> <i class="iconfont" :class="langList.iconClass"></i> </div> </div> </template> </li> <!-- 用户信息菜单项 --> <li> <template v-if="sysUserInfo.children && sysUserInfo.children.length"> <div class="item" :title="sysUserInfo.name" @mouseenter="handleFuncMenus(sysUserInfo, $event)" > <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> </div> </template> </li> <!-- 设置菜单项 --> <li v-if="hasSetting"> <div class="item" :title="$t('hivuiMain_customWorkbench')"> <a href="#design" target="_blank" ><i class="iconfont icon-set-fill"></i ></a> </div> </li> <!-- 退出登录菜单项 --> <li> <div class="item" :title="$t('hivuiMain_logout')" @click="handleLogout" @mouseenter="handleFuncMenus(null, null, true)" > <a><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> </div> <!-- 右键上下文菜单组件 --> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name" :is-bottom="true" ></vueContextMenu> <modifyPw></modifyPw> <!-- 导航菜单组件 --> <navmenu ref="navmenu" :targetElRect="navMenuBtnRect" @mouseenter.native="handleNavMenuMouseEnter" @mouseleave.native="handleNavMenuMouseLeave($event)" ></navmenu> </div> </template> <script> import vueContextMenu from "@main/components/contextMenu"; import modifyPw from "@main/views/layout/components/modifyPw"; import navmenu from "./concisemenu.vue"; import { sortMapTurnArr } from "@main/utils/index"; import screenfull from 'screenfull' export default { components: { vueContextMenu, modifyPw, navmenu }, inject: ["addTab", "showTab", "hideTab"], props: {}, data() { return { menuItems: [], // 菜单项数据 navMenuBtnRect: {}, // 导航菜单按钮位置信息 }; }, computed: { /** * 是否显示设置按钮 / hasSetting() { let cfg = this.$store.state.app.config \|\| {}; if (cfg.hideSettingBtn) { return false; } let _arr = sortMapTurnArr(cfg.sysSetTabs); return _arr && _arr.length; }, /* * 系统列表 / sysList() { let cfg = this.$store.state.app.config \|\| {}; return cfg.sysList \|\| []; }, /* * 语言列表 / langList() { let cfg = this.$store.state.app.config \|\| {}; if (!cfg.showChangeLangBtn) { return; } let menus = cfg.langList \|\| []; return menus; }, /* * 用户信息菜单 / sysUserInfo() { let me = this; let cfg = this.$store.state.app.config \|\| {}; // 替换数据中的变量 function replaceData(str) { if (!str) return ["", false]; var _arr = str.match(/\${(\S?)}/g); var nullNum = 0; if (_arr && _arr.length > 0) { for (let i of _arr) { var _data = me.userInfo[i.match(/\${(\S)}/)[1]]; if (typeof _data != "undefined") { str = str.replace(i, _data); } else { str = str.replace(i, me.$t("hivuiMain_header_null")); nullNum++; } } return [str, nullNum == _arr.length ? false : true]; } return [str, true]; } // 多岗位信息文字模板格式化 function orgBzTplFormat(str, item) { let fieldArr = str.match(/(?<=\${).?(?=})/g); fieldArr.forEach((_i) => { if (typeof item[_i] != "undefined") { str = str.replaceAll("${" + _i + "}", item[_i]); } }); return str; } let _userInfo = cfg.userInfo; if (_userInfo) { _userInfo.name = replaceData(_userInfo.name)[0]; if (_userInfo.children && _userInfo.children.length > 0) { _userInfo.children = _userInfo.children.filter((item) => { let _rData = replaceData(item.name); item.name = _rData[0]; // 根据不同类型设置处理函数 switch (item.type) { case "modifyUserInfo": item.handler = me.modifyUserInfo; break; case "modifyPw": item.handler = me.modifyPw; break; case "personalCenter": item.handler = me.personalCenter; break; case "orgBz": if (Array.isArray(me.bzList) && me.bzList.length > 1) { item.children = []; for (let i of me.bzList) { let _pushData = { iconClass: "icon-user", name: cfg.orgBzTpl ? orgBzTplFormat(cfg.orgBzTpl, i) : `${i.fbzname}/${i.fbzid}`, handler: function () { me.__changeOrgBz(`${i.fbzid}`); }, }; item.children.push(_pushData); } } break; } // 只返回有效的菜单项 if (_rData[1]) { return item; } }); } } return _userInfo \|\| []; }, /** * 系统功能菜单 / sysFuncMenus() { let cfg = this.$store.state.app.config \|\| {}; let menus = sortMapTurnArr(cfg.sysFuncMenus) \|\| []; return menus; }, /* * 项目管理菜单 / sysProjectManage() { let cfg = this.$store.state.app.config \|\| {}; let item = cfg.sysProjectMange \|\| {}, flag = false; this.$store.state.app.powerList.forEach((p) => { if (p.resUrl.indexOf(item.uri) > -1) { flag = true; return true; } }); if (flag) { return cfg.sysProjectMange; } else { return null; } }, /* * 用户信息 / userInfo() { return this.$store.state.user.userInfo; }, isFullscreen(){ return screenfull.isFullscreen } }, methods: { /* * 更新导航菜单按钮位置信息 / updateNavMenuBtnRect() { if (this.$refs && this.$refs.navMenuBtn) { this.navMenuBtnRect = this.$refs.navMenuBtn.getBoundingClientRect(); } }, /* * 鼠标进入导航菜单按钮处理 / handleNavMenuBtnMouseEnter() { if (this.$refs.navmenu) { this.$refs.navmenu.show(); } }, /* * 鼠标离开导航菜单按钮处理 / handleNavMenuBtnMouseLeave() { // 延迟隐藏导航菜单 setTimeout(() => { if (this.$refs.navmenu && !this.$refs.navmenu.isMouseOverMenu) { this.$refs.navmenu.hide(); } }, 100); }, /* * 鼠标进入导航菜单处理 / handleNavMenuMouseEnter() { // 鼠标进入菜单区域，取消隐藏 if (this.$refs.navmenu) { this.$refs.navmenu.isMouseOverMenu = true; } }, /* * 鼠标离开导航菜单处理 / handleNavMenuMouseLeave(e) { // 鼠标离开菜单区域，检查是否移向.pl-menus-item元素 if (e) { const relatedTarget = e.relatedTarget \|\| e.toElement; if ( relatedTarget && relatedTarget.closest && relatedTarget.closest(".pl-menus-item") ) { // 如果移向.pl-menus-item元素，保持菜单显示 if (this.$refs.navmenu) { this.$refs.navmenu.isMouseOverMenu = true; } return; } } if (this.$refs.navmenu) { this.$refs.navmenu.isMouseOverMenu = false; this.$refs.navmenu.hide(); } }, /* * 处理功能菜单点击 * @param {Object} item - 菜单项 * @param {Event} $event - 事件对象 * @param {Boolean} isClose - 是否关闭菜单 / handleFuncMenus(item, $event, isClose) { if (isClose) { this.$refs["cmp-funcMenu"].close(); return; } $event && $event.stopPropagation(); // 处理链接类型菜单 if (item && item.type == "link") { window.open(item.resUrl, item.name); return; } // 处理带token的URL var _url = item ? item.url : ''; if (item && (item.type == "widthToken" \|\| item.type == "withToken")) { _url = item.url + "&access_token=" + this.token; } // 处理有URL的菜单项 if (item && item.url) { item.target == "tab" ? this.addTab({ resUrl: _url, name: item.name, resId: item.id, openType: item.openType, }) : window.open(_url); return; } else { item && item.handler && item.handler(); } if (item && item.children && item.children.length) { this.menuItems = item.children; this.$refs["cmp-funcMenu"].open($event); if (item.type == "lang") { item.children.forEach((__item, index) => { if (!__item.handler) { __item.handler = () => { window.localStorage.setItem( "locale", JSON.stringify({ desc: __item.name, name: __item.key, }) ); Cookies.set("locale", __item.key); window.location.reload(); }; } }); } } }, /* * 处理退出登录 / async handleLogout() { if (window.customSysCofig.logoutBeforeCallback) { const bool = window.customSysCofig.logoutBeforeCallback(); if (bool) { return; } } await this.$store.dispatch("user/logout").then(() => { window.sessionStorage.removeItem("bzid"); if (window.customSysCofig.logoutCallback) { window.customSysCofig.logoutCallback(); } else { if ( window.HIVUI_SETTING.isSingleLogin && window.HIVUI_SETTING.singleLogoutUrl ) { location = window.HIVUI_SETTING.singleLogoutUrl; } else { location = window.HIVUI_SETTING.loginUrl; } } }); }, }, mounted() { this.updateNavMenuBtnRect(); this.$store.dispatch("app/getSysConfig"); this.sysFuncMenus.filter((item) => { if (item.type == "withNumTips" && item.numFunc) { const intervalFunc = () => { item .numFunc() .then((res) => { this.msgCount = res.num; if (res.num && !item.hideNotific) { window.SysPage.notificationFunc( this.$t("hivuiMain_header_notification_title"), item.messageText(res), () => { this.handleFuncMenus(item); } ); } }) .catch((err) => { clearInterval(this.numTipTimer); }); }; clearInterval(this.numTipTimer); this.numTipTimer = setInterval( intervalFunc, item.numIntervalTime \|\| 1000 30 ); intervalFunc(); } }); }, }; </script> <style lang="less" scoped> .pl-concise-sidebar { display: flex; flex-direction: column; position: absolute; top: 0; left: 0; bottom: 0; width: 36px; background: rgba(235, 241, 247, 1); border-right: 1px solid rgba(235, 241, 247, 1); // 重置默认样式 ul, li { margin: 0; padding: 0; list-style: none; } &.showFuncMenu{ .menus{ margin-top: 40px; } } .menus { flex: 1; padding: 8px 4px; display: flex; flex-direction: column; justify-content: space-between; .area { display: flex; flex-direction: column; gap: 8px; li { cursor: pointer; line-height: 30px; background-color: transparent; transition: all 0.3s; &:hover { background-color: #c7d5e2; border-radius: 5px; } > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .item { display: flex; align-items: center; } } } } } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/conciseSidebar/index.vue

<template v-else>
              
              <template v-if="item.children && item.children.length">
                <div class="item" @mouseenter="handleFuncMenus(item, $event)">
                  <div class="tip">
                    <i class="iconfont" :class="item.iconClass"></i>
                  </div>
                </div>
              </template>

<template v-else>
                <div
                  class="item"
                  @click.prevent="handleFuncMenus(item, $event)"
                >
                  <div class="tip">
                    <i class="iconfont" :class="item.iconClass"></i>
                  </div>
                </div>
              </template>
            </template>
          </li>
        </template>
      </ul>

<ul class="area">
        
        <li v-if="sysProjectManage">
          <a
            :href="sysProjectManage.url"
            target="_blank"
            class="item"
            :title="sysProjectManage.name"
          >
            <i class="iconfont" :class="sysProjectManage.iconClass"></i>
            <span class="title">{{ sysProjectManage.name }}</span>
          </a>
        </li>

<li v-if="langList">
          <template v-if="langList.children && langList.children.length">
            <div
              class="item"
              :title="langList.name"
              @mouseenter="handleFuncMenus(langList, $event)"
            >
              <div class="tip">
                <i class="iconfont" :class="langList.iconClass"></i>
              </div>
            </div>
          </template>
        </li>

<li v-if="hasSetting">
          <div class="item" :title="$t('hivuiMain_customWorkbench')">
            <a href="#design" target="_blank"
              ><i class="iconfont icon-set-fill"></i
            ></a>
          </div>
        </li>

<li>
          <div
            class="item"
            :title="$t('hivuiMain_logout')"
            @click="handleLogout"
            @mouseenter="handleFuncMenus(null, null, true)"
          >
            <a><i class="iconfont icon-tuichu"></i></a>
          </div>
        </li>
      </ul>
    </div>

<vueContextMenu
      ref="cmp-funcMenu"
      :menu-items="menuItems"
      field="name"
      :is-bottom="true"
    ></vueContextMenu>

<navmenu
      ref="navmenu"
      :targetElRect="navMenuBtnRect"
      @mouseenter.native="handleNavMenuMouseEnter"
      @mouseleave.native="handleNavMenuMouseLeave($event)"
    ></navmenu>
  </div>
</template>

data() {
    return {
      menuItems: [], // 菜单项数据
      navMenuBtnRect: {}, // 导航菜单按钮位置信息
    };
  },

computed: {
    /**
     * 是否显示设置按钮
     */
    hasSetting() {
      let cfg = this.$store.state.app.config || {};
      if (cfg.hideSettingBtn) {
        return false;
      }
      let _arr = sortMapTurnArr(cfg.sysSetTabs);
      return _arr && _arr.length;
    },

/**
     * 系统列表
     */
    sysList() {
      let cfg = this.$store.state.app.config || {};
      return cfg.sysList || [];
    },

/**
     * 语言列表
     */
    langList() {
      let cfg = this.$store.state.app.config || {};
      if (!cfg.showChangeLangBtn) {
        return;
      }
      let menus = cfg.langList || [];
      return menus;
    },

/**
     * 用户信息菜单
     */
    sysUserInfo() {
      let me = this;
      let cfg = this.$store.state.app.config || {};

// 替换数据中的变量
      function replaceData(str) {
        if (!str) return ["", false];
        var _arr = str.match(/\${(\S*?)}/g);
        var nullNum = 0;

// 多岗位信息文字模板格式化
      function orgBzTplFormat(str, item) {
        let fieldArr = str.match(/(?<=\${).*?(?=})/g);
        fieldArr.forEach((_i) => {
          if (typeof item[_i] != "undefined") {
            str = str.replaceAll("${" + _i + "}", item[_i]);
          }
        });
        return str;
      }

let _userInfo = cfg.userInfo;
      if (_userInfo) {
        _userInfo.name = replaceData(_userInfo.name)[0];
        if (_userInfo.children && _userInfo.children.length > 0) {
          _userInfo.children = _userInfo.children.filter((item) => {
            let _rData = replaceData(item.name);
            item.name = _rData[0];

// 根据不同类型设置处理函数
            switch (item.type) {
              case "modifyUserInfo":
                item.handler = me.modifyUserInfo;
                break;
              case "modifyPw":
                item.handler = me.modifyPw;
                break;
              case "personalCenter":
                item.handler = me.personalCenter;
                break;
              case "orgBz":
                if (Array.isArray(me.bzList) && me.bzList.length > 1) {
                  item.children = [];
                  for (let i of me.bzList) {
                    let _pushData = {
                      iconClass: "icon-user",
                      name: cfg.orgBzTpl
                        ? orgBzTplFormat(cfg.orgBzTpl, i)
                        : `${i.fbzname}/${i.fbzid}`,
                      handler: function () {
                        me.__changeOrgBz(`${i.fbzid}`);
                      },
                    };
                    item.children.push(_pushData);
                  }
                }
                break;
            }

// 只返回有效的菜单项
            if (_rData[1]) {
              return item;
            }
          });
        }
      }
      return _userInfo || [];
    },

/**
     * 系统功能菜单
     */
    sysFuncMenus() {
      let cfg = this.$store.state.app.config || {};
      let menus = sortMapTurnArr(cfg.sysFuncMenus) || [];
      return menus;
    },

/**
     * 项目管理菜单
     */
    sysProjectManage() {
      let cfg = this.$store.state.app.config || {};
      let item = cfg.sysProjectMange || {},
        flag = false;

this.$store.state.app.powerList.forEach((p) => {
        if (p.resUrl.indexOf(item.uri) > -1) {
          flag = true;
          return true;
        }
      });

if (flag) {
        return cfg.sysProjectMange;
      } else {
        return null;
      }
    },

/**
     * 用户信息
     */
    userInfo() {
      return this.$store.state.user.userInfo;
    },
    isFullscreen() {
      return screenfull.isFullscreen;
    },
  },

methods: {
    /**
     * 更新导航菜单按钮位置信息
     */
    updateNavMenuBtnRect() {
      if (this.$refs && this.$refs.navMenuBtn) {
        this.navMenuBtnRect = this.$refs.navMenuBtn.getBoundingClientRect();
      }
    },

/**
     * 鼠标进入导航菜单按钮处理
     */
    handleNavMenuBtnMouseEnter() {
      this.$refs["cmp-funcMenu"].close();
      if (this.$refs.navmenu) {
        this.$refs.navmenu.show();
      }
    },

/**
     * 鼠标离开导航菜单按钮处理
     */
    handleNavMenuBtnMouseLeave() {
      // 延迟隐藏导航菜单
      setTimeout(() => {
        if (this.$refs.navmenu && !this.$refs.navmenu.isMouseOverMenu) {
          this.$refs.navmenu.hide();
        }
      }, 100);
    },

/**
     * 鼠标进入导航菜单处理
     */
    handleNavMenuMouseEnter() {
      // 鼠标进入菜单区域，取消隐藏
      if (this.$refs.navmenu) {
        this.$refs.navmenu.isMouseOverMenu = true;
      }
    },

/**
     * 鼠标离开导航菜单处理
     */
    handleNavMenuMouseLeave(e) {
      // 鼠标离开菜单区域，检查是否移向.pl-menus-item元素
      if (e) {
        const relatedTarget = e.relatedTarget || e.toElement;
        if (
          relatedTarget &&
          relatedTarget.closest &&
          relatedTarget.closest(".pl-menus-item")
        ) {
          // 如果移向.pl-menus-item元素，保持菜单显示
          if (this.$refs.navmenu) {
            this.$refs.navmenu.isMouseOverMenu = true;
          }
          return;
        }
      }

if (this.$refs.navmenu) {
        this.$refs.navmenu.isMouseOverMenu = false;
        this.$refs.navmenu.hide();
      }
    },

/**
     * 处理功能菜单点击
     * @param {Object} item - 菜单项
     * @param {Event} $event - 事件对象
     * @param {Boolean} isClose - 是否关闭菜单
     */
    handleFuncMenus(item, $event, isClose) {
      if (isClose) {
        this.$refs["cmp-funcMenu"].close();
        return;
      }

$event && $event.stopPropagation();

// 处理链接类型菜单
      if (item && item.type == "link") {
        window.open(item.resUrl, item.name);
        return;
      }

// 处理带token的URL
      var _url = item ? item.url : "";
      if (item && (item.type == "widthToken" || item.type == "withToken")) {
        _url = item.url + "&access_token=" + this.token;
      }

// 处理有URL的菜单项
      if (item && item.url) {
        item.target == "tab"
          ? this.addTab({
              resUrl: _url,
              name: item.name,
              resId: item.id,
              openType: item.openType,
            })
          : window.open(_url);
        return;
      } else {
        item && item.handler && item.handler();
      }

if (item && item.children && item.children.length) {
        this.menuItems = item.children;
        this.$refs["cmp-funcMenu"].open($event);

if (item.type == "lang") {
          item.children.forEach((__item, index) => {
            if (!__item.handler) {
              __item.handler = () => {
                window.localStorage.setItem(
                  "locale",
                  JSON.stringify({
                    desc: __item.name,
                    name: __item.key,
                  })
                );
                Cookies.set("locale", __item.key);
                window.location.reload();
              };
            }
          });
        }
      }
    },

/**
     * 处理退出登录
     */
    async handleLogout() {
      if (window.customSysCofig.logoutBeforeCallback) {
        const bool = window.customSysCofig.logoutBeforeCallback();
        if (bool) {
          return;
        }
      }

await this.$store.dispatch("user/logout").then(() => {
        window.sessionStorage.removeItem("bzid");

if (window.customSysCofig.logoutCallback) {
          window.customSysCofig.logoutCallback();
        } else {
          if (
            window.HIVUI_SETTING.isSingleLogin &&
            window.HIVUI_SETTING.singleLogoutUrl
          ) {
            location = window.HIVUI_SETTING.singleLogoutUrl;
          } else {
            location = window.HIVUI_SETTING.loginUrl;
          }
        }
      });
    },
  },

mounted() {
    this.updateNavMenuBtnRect();

this.$store.dispatch("app/getSysConfig");

this.sysFuncMenus.filter((item) => {
      if (item.type == "withNumTips" && item.numFunc) {
        const intervalFunc = () => {
          item
            .numFunc()
            .then((res) => {
              this.msgCount = res.num;
              if (res.num && !item.hideNotific) {
                window.SysPage.notificationFunc(
                  this.$t("hivuiMain_header_notification_title"),
                  item.messageText(res),
                  () => {
                    this.handleFuncMenus(item);
                  }
                );
              }
            })
            .catch((err) => {
              clearInterval(this.numTipTimer);
            });
        };

clearInterval(this.numTipTimer);
        this.numTipTimer = setInterval(
          intervalFunc,
          item.numIntervalTime || 1000 * 30
        );
        intervalFunc();
      }
    });
  },
};
</script>

.area {
      display: flex;
      flex-direction: column;
      gap: 8px;
      color: #4e5969;
      li {
        cursor: pointer;
        line-height: 30px;
        background-color: transparent;
        transition: all 0.3s;

&:hover {
          background-color: #c7d5e2;
          border-radius: 5px;
        }

> div {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

.item {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>

<template>
  <div class="pl-concise-sidebar">
    <div ref="conciseHead" class="pl-tabs-hd concise"></div>
    <div class="menus">
      
      <ul class="area">
        <li>
          
          <div
            title="全部功能"
            ref="navMenuBtn"
            @mouseenter="handleNavMenuBtnMouseEnter"
            @mouseleave="handleNavMenuBtnMouseLeave"
          >
            <div class="tip">
              <i class="iconfont icon-func"></i>
            </div>
          </div>
        </li>
      </ul>
      
      
      <ul class="area">
        
        <li v-if="sysProjectManage">
          <a
            :href="sysProjectManage.url"
            target="_blank"
            class="item"
            :title="sysProjectManage.name"
          >
            <i class="iconfont" :class="sysProjectManage.iconClass"></i>
            <span class="title">{{ sysProjectManage.name }}</span>
          </a>
        </li>
        
        
        <template v-for="item in sysFuncMenus">
          <li v-if="item.type != 'split'" :key="item.resId">
            <template v-if="item.type == 'withNumTips'">
              <div
                class="item"
                :title="item.name"
                @click.prevent="handleFuncMenus(item, $event)"
                @mouseenter="handleFuncMenus(item, $event, true)"
              >
                <div class="tip">
                  <i class="iconfont" :class="item.iconClass"></i>
                </div>
              </div>
            </template>
            
            
            <template v-else>
              
              <template v-if="item.children && item.children.length">
                <div class="item" @mouseenter="handleFuncMenus(item, $event)">
                  <div class="tip">
                    <i class="iconfont" :class="item.iconClass"></i>
                  </div>
                </div>
              </template>
              
              
              <template v-else>
                <div
                  class="item"
                  @click.prevent="handleFuncMenus(item, $event)"
                >
                  <div class="tip">
                    <i class="iconfont" :class="item.iconClass"></i>
                  </div>
                </div>
              </template>
            </template>
          </li>
        </template>
        
        
        <li v-if="langList">
          <template v-if="langList.children && langList.children.length">
            <div
              class="item"
              :title="langList.name"
              @mouseenter="handleFuncMenus(langList, $event)"
            >
              <div class="tip">
                <i class="iconfont" :class="langList.iconClass"></i>
              </div>
            </div>
          </template>
        </li>
        
        
        <li>
          <template v-if="sysUserInfo.children && sysUserInfo.children.length">
            <div
              class="item"
              :title="sysUserInfo.name"
              @mouseenter="handleFuncMenus(sysUserInfo, $event)"
            >
              <div class="tip">
                <i class="iconfont" :class="sysUserInfo.iconClass"></i>
              </div>
            </div>
          </template>
        </li>
        
        
        <li v-if="hasSetting">
          <div class="item" :title="$t('hivuiMain_customWorkbench')">
            <a href="#design" target="_blank"
              ><i class="iconfont icon-set-fill"></i
            ></a>
          </div>
        </li>
        
        
        <li>
          <div
            class="item"
            :title="$t('hivuiMain_logout')"
            @click="handleLogout"
            @mouseenter="handleFuncMenus(null, null, true)"
          >
            <a><i class="iconfont icon-tuichu"></i></a>
          </div>
        </li>
      </ul>
    </div>
    
    
    <vueContextMenu
      ref="cmp-funcMenu"
      :menu-items="menuItems"
      field="name"
      :is-bottom="true"
    ></vueContextMenu>
    
    <modifyPw></modifyPw>
    
    
    <navmenu
      ref="navmenu"
      :targetElRect="navMenuBtnRect"
      @mouseenter.native="handleNavMenuMouseEnter"
      @mouseleave.native="handleNavMenuMouseLeave($event)"
    ></navmenu>
  </div>
</template>

data() {
    return {
      menuItems: [], // 菜单项数据
      navMenuBtnRect: {}, // 导航菜单按钮位置信息
    };
  },
  
  computed: {
    /**
     * 是否显示设置按钮
     */
    hasSetting() {
      let cfg = this.$store.state.app.config || {};
      if (cfg.hideSettingBtn) {
        return false;
      }
      let _arr = sortMapTurnArr(cfg.sysSetTabs);
      return _arr && _arr.length;
    },
    
    /**
     * 系统列表
     */
    sysList() {
      let cfg = this.$store.state.app.config || {};
      return cfg.sysList || [];
    },
    
    /**
     * 语言列表
     */
    langList() {
      let cfg = this.$store.state.app.config || {};
      if (!cfg.showChangeLangBtn) {
        return;
      }
      let menus = cfg.langList || [];
      return menus;
    },
    
    /**
     * 用户信息菜单
     */
    sysUserInfo() {
      let me = this;
      let cfg = this.$store.state.app.config || {};
      
      // 替换数据中的变量
      function replaceData(str) {
        if (!str) return ["", false];
        var _arr = str.match(/\${(\S*?)}/g);
        var nullNum = 0;

if (_arr && _arr.length > 0) {
          for (let i of _arr) {
            var _data = me.userInfo[i.match(/\${(\S*)}/)[1]];
            if (typeof _data != "undefined") {
              str = str.replace(i, _data);
            } else {
              str = str.replace(i, me.$t("hivuiMain_header_null"));
              nullNum++;
            }
          }
          return [str, nullNum == _arr.length ? false : true];
        }
        return [str, true];
      }
      
      // 多岗位信息文字模板格式化
      function orgBzTplFormat(str, item) {
        let fieldArr = str.match(/(?<=\${).*?(?=})/g);
        fieldArr.forEach((_i) => {
          if (typeof item[_i] != "undefined") {
            str = str.replaceAll("${" + _i + "}", item[_i]);
          }
        });
        return str;
      }
      
      let _userInfo = cfg.userInfo;
      if (_userInfo) {
        _userInfo.name = replaceData(_userInfo.name)[0];
        if (_userInfo.children && _userInfo.children.length > 0) {
          _userInfo.children = _userInfo.children.filter((item) => {
            let _rData = replaceData(item.name);
            item.name = _rData[0];
            
            // 根据不同类型设置处理函数
            switch (item.type) {
              case "modifyUserInfo":
                item.handler = me.modifyUserInfo;
                break;
              case "modifyPw":
                item.handler = me.modifyPw;
                break;
              case "personalCenter":
                item.handler = me.personalCenter;
                break;
              case "orgBz":
                if (Array.isArray(me.bzList) && me.bzList.length > 1) {
                  item.children = [];
                  for (let i of me.bzList) {
                    let _pushData = {
                      iconClass: "icon-user",
                      name: cfg.orgBzTpl
                        ? orgBzTplFormat(cfg.orgBzTpl, i)
                        : `${i.fbzname}/${i.fbzid}`,
                      handler: function () {
                        me.__changeOrgBz(`${i.fbzid}`);
                      },
                    };
                    item.children.push(_pushData);
                  }
                }
                break;
            }
            
            // 只返回有效的菜单项
            if (_rData[1]) {
              return item;
            }
          });
        }
      }
      return _userInfo || [];
    },
    
    /**
     * 系统功能菜单
     */
    sysFuncMenus() {
      let cfg = this.$store.state.app.config || {};
      let menus = sortMapTurnArr(cfg.sysFuncMenus) || [];
      return menus;
    },
    
    /**
     * 项目管理菜单
     */
    sysProjectManage() {
      let cfg = this.$store.state.app.config || {};
      let item = cfg.sysProjectMange || {},
        flag = false;
        
      this.$store.state.app.powerList.forEach((p) => {
        if (p.resUrl.indexOf(item.uri) > -1) {
          flag = true;
          return true;
        }
      });
      
      if (flag) {
        return cfg.sysProjectMange;
      } else {
        return null;
      }
    },
    
    /**
     * 用户信息
     */
    userInfo() {
      return this.$store.state.user.userInfo;
    },
    isFullscreen(){
      return screenfull.isFullscreen
    }
  },
  
  methods: {
    /**
     * 更新导航菜单按钮位置信息
     */
    updateNavMenuBtnRect() {
      if (this.$refs && this.$refs.navMenuBtn) {
        this.navMenuBtnRect = this.$refs.navMenuBtn.getBoundingClientRect();
      }
    },
    
    /**
     * 鼠标进入导航菜单按钮处理
     */
    handleNavMenuBtnMouseEnter() {
      if (this.$refs.navmenu) {
        this.$refs.navmenu.show();
      }
    },
    
    /**
     * 鼠标离开导航菜单按钮处理
     */
    handleNavMenuBtnMouseLeave() {
      // 延迟隐藏导航菜单
      setTimeout(() => {
        if (this.$refs.navmenu && !this.$refs.navmenu.isMouseOverMenu) {
          this.$refs.navmenu.hide();
        }
      }, 100);
    },
    
    /**
     * 鼠标进入导航菜单处理
     */
    handleNavMenuMouseEnter() {
      // 鼠标进入菜单区域，取消隐藏
      if (this.$refs.navmenu) {
        this.$refs.navmenu.isMouseOverMenu = true;
      }
    },
    
    /**
     * 鼠标离开导航菜单处理
     */
    handleNavMenuMouseLeave(e) {
      // 鼠标离开菜单区域，检查是否移向.pl-menus-item元素
      if (e) {
        const relatedTarget = e.relatedTarget || e.toElement;
        if (
          relatedTarget &&
          relatedTarget.closest &&
          relatedTarget.closest(".pl-menus-item")
        ) {
          // 如果移向.pl-menus-item元素，保持菜单显示
          if (this.$refs.navmenu) {
            this.$refs.navmenu.isMouseOverMenu = true;
          }
          return;
        }
      }
      
      if (this.$refs.navmenu) {
        this.$refs.navmenu.isMouseOverMenu = false;
        this.$refs.navmenu.hide();
      }
    },
    
    /**
     * 处理功能菜单点击
     * @param {Object} item - 菜单项
     * @param {Event} $event - 事件对象
     * @param {Boolean} isClose - 是否关闭菜单
     */
    handleFuncMenus(item, $event, isClose) {
      if (isClose) {
        this.$refs["cmp-funcMenu"].close();
        return;
      }
      
      $event && $event.stopPropagation();
      
      // 处理链接类型菜单
      if (item && item.type == "link") {
        window.open(item.resUrl, item.name);
        return;
      }
      
      // 处理带token的URL
      var _url = item ? item.url : '';
      if (item && (item.type == "widthToken" || item.type == "withToken")) {
        _url = item.url + "&access_token=" + this.token;
      }
      
      // 处理有URL的菜单项
      if (item && item.url) {
        item.target == "tab"
          ? this.addTab({
              resUrl: _url,
              name: item.name,
              resId: item.id,
              openType: item.openType,
            })
          : window.open(_url);
        return;
      } else {
        item && item.handler && item.handler();
      }
      
      if (item && item.children && item.children.length) {
        this.menuItems = item.children;
        this.$refs["cmp-funcMenu"].open($event);
        
        if (item.type == "lang") {
          item.children.forEach((__item, index) => {
            if (!__item.handler) {
              __item.handler = () => {
                window.localStorage.setItem(
                  "locale",
                  JSON.stringify({
                    desc: __item.name,
                    name: __item.key,
                  })
                );
                Cookies.set("locale", __item.key);
                window.location.reload();
              };
            }
          });
        }
      }
    },
    
    /**
     * 处理退出登录
     */
    async handleLogout() {
      if (window.customSysCofig.logoutBeforeCallback) {
        const bool = window.customSysCofig.logoutBeforeCallback();
        if (bool) {
          return;
        }
      }
      
      await this.$store.dispatch("user/logout").then(() => {
        window.sessionStorage.removeItem("bzid");
        
        if (window.customSysCofig.logoutCallback) {
          window.customSysCofig.logoutCallback();
        } else {
          if (
            window.HIVUI_SETTING.isSingleLogin &&
            window.HIVUI_SETTING.singleLogoutUrl
          ) {
            location = window.HIVUI_SETTING.singleLogoutUrl;
          } else {
            location = window.HIVUI_SETTING.loginUrl;
          }
        }
      });
    },
  },
  
  mounted() {
    this.updateNavMenuBtnRect();

this.$store.dispatch("app/getSysConfig");
    
    this.sysFuncMenus.filter((item) => {
      if (item.type == "withNumTips" && item.numFunc) {
        const intervalFunc = () => {
          item
            .numFunc()
            .then((res) => {
              this.msgCount = res.num;
              if (res.num && !item.hideNotific) {
                window.SysPage.notificationFunc(
                  this.$t("hivuiMain_header_notification_title"),
                  item.messageText(res),
                  () => {
                    this.handleFuncMenus(item);
                  }
                );
              }
            })
            .catch((err) => {
              clearInterval(this.numTipTimer);
            });
        };
        
        clearInterval(this.numTipTimer);
        this.numTipTimer = setInterval(
          intervalFunc,
          item.numIntervalTime || 1000 * 30
        );
        intervalFunc();
      }
    });
  },
};
</script>

Show line notes below