@lambo-design/pro-layout 1.0.0-beta.45 → 1.0.0-beta.451

package/src/components/pro-layout-header/pro-layout-nav/index.vue

@@ -0,0 +1,565 @@
+<template>
+  <div class="pro-layout-nav-wrapper">
+    <Menu
+        ref="topNav"
+        mode="horizontal"
+        theme="dark"
+        :active-name="getActiveName()"
+        @on-select="selectApp"
+    >
+      <template v-for="item in topMenList">
+        <MenuItem v-if="!item.children" :key="item.appId" :name="item.appId" class="top-menu">
+          <Icon
+              v-bind="getIcon(item)"
+              :size="20"
+              v-show="systemInfo.navLogo === '1'"
+          ></Icon
+          >{{ item.name }}
+          <div class="line"></div>
+        </MenuItem>
+        <Submenu
+            class="ibp-nav-sub-menu"
+            v-else
+            :name="item.name"
+            :key="item.name"
+        >
+          <template slot="title">
+            {{ item.name }}
+          </template>
+          <MenuItem
+              v-for="itemL2 in item.children"
+              :key="itemL2.appId"
+              :name="itemL2.appId"
+          ><Icon
+              :type="itemL2.icon"
+              :size="20"
+              v-show="systemInfo.navLogo === '1'"
+          ></Icon
+          >{{ itemL2.name }}</MenuItem
+          >
+        </Submenu>
+      </template>
+      <Submenu name="other" v-if="otherList.length > 0">
+        <template slot="title"> ... </template>
+        <MenuItem
+            :name="item.appId"
+            v-for="item in otherList"
+            :key="item.appId"
+        >
+          <Icon
+              v-bind="getIcon(item)"
+              :size="20"
+              v-show="systemInfo.navLogo === '1'"
+          ></Icon
+          >{{ item.name }}
+        </MenuItem>
+      </Submenu>
+    </Menu>
+  </div>
+</template>
+
+<script>
+import Bus from "@lambo-design/shared/utils/bus";
+import { deepCopy } from "@lambo-design/shared/utils/assist";
+import { arraysEqual } from "@lambo-design/shared/utils/platform";
+import _ from "lodash";
+import {getSessionStorage} from "@lambo-design/shared/utils/n";
+
+export default {
+  name: "pro-layout-nav",
+  props: {
+    availableWidth: {
+      type: Number,
+      default: 800
+    },
+    notHomeIndex: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      systemInfo: {},
+      originNavList: [], // 原始顶部菜单列表，用于判断是否要重复触发initNav
+      navList: [],
+      topMenList: [],
+      otherList: [],
+      activeName: "",
+      topMenuNum: 4,
+      lastTopMenuNum: -1,
+      acceptAppId: "",
+      originMenuList: [],
+      // 新增响应式相关状态
+      resizeObserver: null,
+      menuActualWidth: 0,
+      shouldShowMore: false,
+      autoCalculateWidth: true
+    };
+  },
+  methods: {
+    initListener() {
+      Bus.$on("system-info", (data) => {
+        this.initSystemInfo(data);
+      });
+      Bus.$on("nav-list", (data) => {
+        this.initNav(data);
+      });
+      Bus.$on("change-app", ({ appId, appInfo }) => {
+        this.changeApp(appId, appInfo);
+      });
+      Bus.$on("menu-list", (data) => {
+        this.initMenu(data);
+      });
+      // 初始化响应式监听
+      this.initResizeObserver();
+    },
+    destroyListener() {
+      Bus.$off("system-info");
+      Bus.$off("nav-list");
+      Bus.$off("menu-list");
+      Bus.$off("change-app");
+      // 清理 ResizeObserver
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
+    },
+    initSystemInfo(data) {
+      if (data) {
+        this.systemInfo = data;
+        this.topMenuNum = Number.isInteger(data.topMenu) ? data.topMenu : 4;
+        this.acceptAppId = data.acceptAppId ? data.acceptAppId : "";
+        if (!this.activeName && this.notHomeIndex) {
+          this.activeName = this.acceptAppId;
+        }
+        this.initNav(this.navList);
+      }
+    },
+    initNav(data) {
+      // 过滤掉首页项，获取真实的业务数据
+      const realData = data.filter(item => item.appId !== 'backHome');
+      if (
+          _.some(realData, (app) => app.children?.length) || // 分组以后会死循环调用，中断一下
+          (arraysEqual(this.originNavList, realData) &&
+              this.topMenuNum === this.lastTopMenuNum)
+      ) {
+        return;
+      }
+      this.originNavList = realData;
+      let dataClone = _.cloneDeep(realData);
+
+      // 如果配置了显示首页且显示样式是应用式，在列表最前面添加首页项
+      if (dataClone && dataClone.length > 0 && this.systemInfo.backToHome === "1" && this.systemInfo.backToHomeStyle === "app") {
+        const homeItem = {
+          appId: 'backHome',
+          name: this.systemInfo.backToHomeText || '首页',
+          icon: 'ios-home',
+          selected: false
+        };
+        dataClone.unshift(homeItem);
+      }
+
+      let parentNameEnum = {};
+      _.forEach(dataClone, (app) => {
+        let extendProps = app.extendProps;
+        let extendPropsL2 = extendProps?.extendProps;
+        if (extendPropsL2) {
+          parentNameEnum[app.appId] = JSON.parse(extendPropsL2)?.parentName;
+        }
+        // app.parentName = extendPropsL2
+        //   ? JSON.parse(extendPropsL2)?.parentName
+        //   : "";
+      });
+      // 如果组织了二级菜单展现，则对菜单进行分组
+      if (!_.isEmpty(parentNameEnum)) {
+        let rlt = _.reduce(
+            dataClone,
+            (acc, cur) => {
+              let parentName = parentNameEnum[cur.appId];
+              if (parentName) {
+                let curApp = _.find(acc, { name: parentName });
+                if (curApp) {
+                  curApp.children.push(cur);
+                } else {
+                  acc.push({
+                    name: parentName,
+                    children: [cur],
+                  });
+                }
+              } else {
+                acc.push(cur);
+              }
+              return acc;
+            },
+            []
+        );
+        this.navList = rlt;
+      } else {
+        this.navList = dataClone;
+      }
+
+      this.lastTopMenuNum = this.topMenuNum;
+      if (this.navList.length > this.topMenuNum) {
+        let navList = deepCopy(this.navList);
+        this.topMenList = navList.splice(0, this.topMenuNum);
+        this.otherList = navList;
+      } else {
+        this.topMenList = this.navList;
+        this.otherList = [];
+      }
+      if (this.navList.length > 0) {
+        let appId = this.navList[0].appId;
+        if (this.systemInfo.backToHome === "1" && this.systemInfo.backToHomeStyle === "app") {
+          appId = this.navList[1].appId;
+        }
+        for (let i = 0; i < this.navList.length; i++) {
+          if (this.navList[i].selected == true) {
+            appId = this.navList[i].appId;
+          }
+        }
+        if (this.activeName) {
+          appId = this.activeName;
+        }
+        if (this.notHomeIndex) {
+          this.selectApp(appId);
+        } else if (this.systemInfo.backToHome === "1" && this.systemInfo.backToHomeStyle === "app") {
+          this.activeName = 'backHome'
+          sessionStorage.setItem('fromHomeIndex', 'true')
+        }
+      }
+      setTimeout(() => {
+        this.calcTopMenus();
+      }, 10);
+    },
+    initMenu(data) {
+      this.originMenuList = deepCopy(data);
+    },
+    selectApp(appId) {
+      if (appId) {
+        if (appId === 'backHome') {
+          Bus.$emit("change-app", {
+            appId,
+            appInfo: {}
+          });
+          return;
+        }
+        let res = this.originNavList.filter((app) => app.appId == appId);
+        if (res && res.length > 0) {
+          Bus.$emit("change-app", { appId, appInfo: res[0] });
+        }
+      }
+    },
+    changeApp(appId, appInfo) {
+      if (appId) {
+        this.activeName = appId;
+        this.$nextTick(() => {
+          this.$refs.topNav.updateActiveName();
+        });
+      }
+    },
+    // 顶部导航的导航配置多的话，分辨率低的场景下，需要计算一下剩余空间能展示多少，动态计算topMenuNum
+    calcTopMenus() {
+      // this.$nextTick(() => {
+      if (!this.autoCalculateWidth) {
+        return;
+      }
+
+      // 计算可用宽度
+      // this.calculateAvailableWidth();
+
+      // 计算实际菜单宽度
+      this.calculateMenuActualWidth();
+
+      // 预留"更多"按钮空间
+      const moreButtonSpace = 76.2;
+      const effectiveWidth = this.availableWidth - moreButtonSpace;
+
+      // 判断是否需要显示"更多"按钮
+      this.shouldShowMore = this.menuActualWidth > effectiveWidth;
+
+      // 根据可用宽度计算能显示的菜单数量
+      this.calculateTopMenuNum();
+
+      // 更新显示列表
+      this.updateMenuLists();
+
+      // 触发宽度变化事件
+      this.$emit('width-change', {
+        available: this.availableWidth,
+        actual: this.menuActualWidth,
+        needMore: this.shouldShowMore
+      });
+      // });
+    },
+
+    // 计算可用宽度
+    // calculateAvailableWidth() {
+    //   const appElement = document.getElementById("app");
+    //   if (!appElement) return;
+    //
+    //   const docWidth = appElement.clientWidth;
+    //   const triggerBoxWidth = this.getElementWidth("trigger-box");
+    //   const logoBoxWidth = this.getElementWidth("logo-box");
+    //   const toolsBoxWidth = this.getElementWidth("tools-box");
+    //   const othersWidth = 80; // 其他按钮的宽度
+    //
+    //   this.availableWidth = docWidth - triggerBoxWidth - logoBoxWidth - toolsBoxWidth - othersWidth;
+    // },
+
+    // 计算实际菜单宽度
+    calculateMenuActualWidth() {
+      const navWrapper = this.$el;
+      if (!navWrapper) return;
+
+      const menuContainer = navWrapper.querySelector('.ivu-menu');
+      if (menuContainer) {
+        // 计算所有菜单项的实际宽度
+        let totalWidth = 0;
+        const menuItems = menuContainer.querySelectorAll('li');
+        menuItems.forEach(item => {
+          totalWidth += item.offsetWidth;
+        });
+        this.menuActualWidth = totalWidth;
+      }
+    },
+
+    // 计算顶部菜单数量
+    calculateTopMenuNum() {
+      if (!this.navList || this.navList.length === 0) return;
+      let topMenuNum = 0;
+      let sumWidth = 0;
+
+      //加上submenu按钮宽度，避免submenu存在一个，浪费宽度
+      let availableWidth = this.availableWidth
+
+      // 模拟计算每个菜单项的宽度
+      this.navList.forEach((item, index) => {
+        // 估算每个菜单项的宽度（包括图标、文字、边距等）
+        const estimatedWidth = this.estimateMenuItemWidth(item);
+        if (sumWidth + estimatedWidth < availableWidth) {
+          topMenuNum++;
+          sumWidth += estimatedWidth;
+          if(sumWidth + 95 > availableWidth){
+            sumWidth -= estimatedWidth;
+            topMenuNum--;
+            return;
+          }
+        }
+      });
+      // 如果计算值为0，就不要触发事件，如果系统配置要展示少量，也不要触发事件
+      if (topMenuNum && (!this.systemInfo?.topMenu || this.systemInfo?.topMenu > topMenuNum)) {
+        this.topMenuNum = topMenuNum;
+      }else{
+        this.topMenuNum = this.systemInfo.topMenu;
+      }
+    },
+
+    // 估算菜单项宽度
+    estimateMenuItemWidth(item) {
+      // 基础宽度：内边距 + 边框
+      let baseWidth = 40;
+
+      // 图标宽度
+      if (item.icon && this.systemInfo.navLogo === '1') {
+        baseWidth += 26;
+      }
+
+      // 文字宽度估算（每个字符约14px）
+      // const fontSize = parseInt(window.getComputedStyle(document.querySelector('#customVars')).getPropertyValue('--font-size-base').replace("px",""))
+      var customVars=window.getComputedStyle(document.querySelector('#customVars'));
+      var fontSizeVar=customVars.getPropertyValue('--font-size-base');
+      var fontSize=parseInt(fontSizeVar.replace("px",""));
+
+      const textWidth = (item.name || '').length * fontSize;
+
+      return baseWidth + textWidth;
+    },
+
+    // 更新菜单列表
+    updateMenuLists() {
+      if (this.navList.length > this.topMenuNum) {
+        const navList = deepCopy(this.navList);
+        this.topMenList = navList.splice(0, this.topMenuNum);
+        this.otherList = navList;
+      } else {
+        this.topMenList = this.navList;
+        this.otherList = [];
+      }
+      // console.log("topMenList",this.topMenList.length)
+      // console.log("otherList",this.otherList.length)
+    },
+
+    // 获取元素宽度的辅助方法
+    getElementWidth(className) {
+      const element = document.getElementsByClassName(className)[0];
+      return element ? element.clientWidth : 0;
+    },
+
+    // 初始化 ResizeObserver
+    initResizeObserver() {
+      if (window.ResizeObserver) {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.calcTopMenus();
+        });
+      }
+    },
+
+    // 开始监听容器大小变化
+    startResizeObserving() {
+      if (this.resizeObserver && this.$el) {
+        this.resizeObserver.observe(this.$el);
+
+        // 同时监听父容器
+        const appElement = document.getElementById("app");
+        if (appElement) {
+          this.resizeObserver.observe(appElement);
+        }
+      }
+    },
+
+    // 停止监听容器大小变化
+    stopResizeObserving() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+    },
+
+    //获取icon图标
+    getIcon(item){
+      const icon = item.icon
+      if(!icon) return
+      if(icon.indexOf('iconfont')>=0){
+        return {
+          custom:this.activeName === item.appId?`${item.icon}-active`:item.icon
+        }
+      }
+      return {
+        type:item.icon
+      }
+    },
+    getActiveName() {
+      // 如果不是首页模式，直接返回 activeName
+      if (this.notHomeIndex) {
+        return this.activeName;
+      }
+
+      // 如果是首页模式，检查当前 activeName 对应的应用是否隐藏了左侧菜单
+      const appList = getSessionStorage('appList');
+      if (appList && Array.isArray(appList) && appList.length > 0) {
+        // 查找当前 activeName 对应的应用
+        const currentApp = appList.find(app => app.appId === this.activeName);
+        // 如果找到应用且隐藏了左侧菜单，返回 activeName
+        if (currentApp) {
+          let isHideLeftMenu;
+          if (currentApp.extendProps) {
+            if (typeof currentApp.extendProps === 'string') {
+              isHideLeftMenu = JSON.parse(currentApp.extendProps)?.is_hide_left_menu;
+            } else {
+              isHideLeftMenu = currentApp.extendProps.is_hide_left_menu;
+            }
+          }
+          if (!isHideLeftMenu && currentApp.setting) {
+            if (typeof currentApp.setting === 'string') {
+              isHideLeftMenu = JSON.parse(currentApp.setting)?.is_hide_left_menu;
+            } else {
+              isHideLeftMenu = currentApp.setting.is_hide_left_menu;
+            }
+          }
+          if (isHideLeftMenu === '1' || isHideLeftMenu === 1) {
+            return this.activeName;
+          }
+        }
+      }
+
+      // 否则返回首页
+      return 'backHome';
+    }
+  },
+  watch: {
+    activeName() {
+      this.$nextTick(() => {
+        this.$refs.topNav.updateActiveName();
+      });
+    },
+    // 监听可用宽度变化
+    availableWidth(newVal) {
+      this.calcTopMenus();
+    },
+    // 监听系统信息变化
+    systemInfo: {
+      handler() {
+        this.calcTopMenus();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.initListener();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.calcTopMenus();
+      this.startResizeObserving();
+    });
+  },
+  beforeDestroy() {
+    this.destroyListener();
+    this.stopResizeObserving();
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "@lambo-design/core/src/styles/default.less";
+.pro-layout-nav-wrapper {
+  .ivu-menu {
+    .ivu-menu-item {
+      &:hover {
+        .line {
+          position: absolute;
+          left: 0;
+          right: 0;
+        }
+      }
+      &.ivu-menu-item-active,
+      &.ivu-menu-item-selected {
+        .line {
+          position: absolute;
+          left: 0;
+          right: 0;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.pro-layout .pro-layout-header .pro-layout-nav-wrapper .ibp-nav-sub-menu .ivu-menu-dark .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item{
+  color: var(--text-color, #333) !important;
+  border-radius: 4px !important;
+  background-color: var(--background-color-base, #f5f7f9) !important;
+  margin-right: 10px !important;
+}
+.pro-layout-nav-wrapper {
+  .ibp-nav-sub-menu {
+    .ivu-select-dropdown {
+      margin-top: 0 !important;
+      width: fit-content !important;
+    }
+    .ivu-menu-drop-list {
+      padding: 10px !important;
+      display: flex !important;
+    }
+    .ivu-menu-item {
+      color: var(--text-color, #333) !important;
+      border-radius: 4px !important;
+      background-color: var(--background-color-base, #f5f7f9) !important;
+      margin-right: 10px !important;
+      &:hover {
+        color: var(--layout-active-color, #488aff) !important;
+      }
+    }
+  }
+}
+</style>

package/src/components/pro-layout-header/pro-layout-slogan/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="pro-layout-slogan-wrapper">
+    <div class="slogan-content">正直豁达 智慧精微</div>
+  </div>
+</template>
+
+<script>
+import Locale from '@lambo-design/core/src/mixins/locale';
+
+export default {
+  name: "pro-layout-slogan",
+  mixins: [Locale],
+  props:{
+    default:''
+  },
+  data(){
+    return {
+
+    }
+  },
+  computed:{
+  },
+  methods: {
+  },
+  created(){
+  },
+  beforeDestroy(){
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "@lambo-design/core/src/styles/default";
+.pro-layout-slogan-wrapper{
+  overflow: hidden;
+  .slogan-content{
+    font-size: 16px;
+  }
+}
+</style>

package/src/components/pro-layout-header/pro-layout-tools/components/pro-layout-tools-quick-collect.vue

@@ -0,0 +1,79 @@
+<template>
+  <Tooltip v-if="currentItem && currentItem.type == 2" :content="t('pro-layout.header.collect')" placement="bottom">
+    <Icon @click="collectEvent" :type=" isCollected ? 'ios-star' : 'ios-star-outline'" size="16" style="cursor: pointer"/>
+  </Tooltip>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import { deepCopy } from '@lambo-design/shared/utils/assist'
+import Locale from '@lambo-design/core/src/mixins/locale';
+
+export default {
+  name: 'pro-layout-tools-quick-collect',
+  mixins: [Locale],
+  data() {
+    return {
+      menuList: [],
+      currentName: '',
+      currentItem: {},
+      collectMenuList: [],
+      isCollected:false
+    }
+  },
+  watch: {
+    collectMenuList(){
+      this.changeCollectMenu();
+    },
+    currentName(){
+      this.changeCollectMenu();
+    }
+  },
+  methods: {
+    initListener() {
+      Bus.$on('menu-list', (data) => {
+        this.initMenu(data);
+      })
+      Bus.$on('menu-click',(name,item) => {
+        this.initMenuClick(name, item)
+      })
+      Bus.$on('collect-menu-list',(data)=>{
+        this.initCollectMenu(data)
+      });
+    },
+    destroyListener() {
+      Bus.$off('menu-list')
+      Bus.$off('menu-click')
+      Bus.$off('collect-menu-list')
+    },
+    initMenu(data){
+      this.menuList = deepCopy(data);
+    },
+    initMenuClick(name, item){
+      this.currentName = name
+      if(item) {
+        this.currentItem = item;
+      } else {
+        this.currentItem = this.menuList.find(menu => menu.name == name)
+      }
+    },
+    initCollectMenu(data){
+      this.collectMenuList = deepCopy(data);
+    },
+    changeCollectMenu(){
+      this.isCollected = false
+      let collectMenu = this.collectMenuList.find(item => item.name == this.currentName)
+      this.isCollected = !!collectMenu;
+    },
+    collectEvent(){
+      Bus.$emit('toggle-collect-menu',!this.isCollected,this.currentItem)
+    }
+  },
+  created() {
+    this.initListener()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  }
+}
+</script>