@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnInpNum/BnInpNum.vue

@@ -0,0 +1,165 @@
+<template>
+  <el-input :placeholder="placeholder" v-model="val" :disabled="disabled" :clearable="clearable"
+            :class="[underline ?'bnInput-underline':'']"
+            @input="valInput" @change="valChange" @blur="inputBlur" :size="size" :maxlength="maxlength">
+    <template #prefix>
+      <slot name="prefix"></slot>
+    </template>
+    <template #suffix>
+      <slot></slot>
+    </template>
+  </el-input>
+</template>
+
+<script>
+import {debounce} from "lodash";
+
+export default {
+  name: "BnInpNum",
+  props: {
+    modelValue: [String, Number],
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    size: String,
+    underline: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    max: {
+      type: [String, Number],
+    },
+    min: {
+      type: [String, Number],
+    },
+    maxlength: {
+      type: [String, Number],
+    },
+    precision: {
+      type: [String, Number],
+    },
+  },
+  computed: {
+    val: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+  },
+  methods: {
+    /**
+     * input事件 实时变化
+     * */
+    valInput:debounce(function(val) {
+      // 快速处理空值
+      if (!val) {
+        this.val = '';
+        return;
+      }
+
+      let value = val;
+      
+      // 移除无效字符（一次性处理）
+      value = value.replace(/[^0-9.-]/g, '');
+      
+      // 处理负号：只保留开头的第一个负号
+      if (value.startsWith('-')) {
+        value = '-' + value.slice(1).replace(/-/g, '');
+      } else {
+        value = value.replace(/-/g, '');
+      }
+      
+      // 处理小数点：移除开头的点，保留第一个点
+      if (value.startsWith('.')) {
+        value = value.slice(1).replace(/\./g, '');
+      } else {
+        const dotIndex = value.indexOf('.');
+        if (dotIndex > 0) {
+          const parts = value.split('.');
+          value = parts[0] + '.' + parts.slice(1).join('');
+        }
+      }
+      
+      // 处理精度
+      if (value && value !== '-' && this.precision != null && this.precision >= 0) {
+        const dotIndex = value.indexOf('.');
+        if (this.precision === 0) {
+          // 精度为0时，移除小数点及之后的内容
+          value = dotIndex > 0 ? value.slice(0, dotIndex) : value;
+        } else if (dotIndex > 0) {
+          // 限制小数位数
+          const decimalPart = value.slice(dotIndex + 1);
+          if (decimalPart.length > this.precision) {
+            value = value.slice(0, dotIndex + 1 + this.precision);
+          }
+        }
+      }
+      
+      // 实时校验最大值和最小值
+      if (value && value !== '-') {
+        const numValue = parseFloat(value);
+        if (!isNaN(numValue)) {
+          // 校验最大值
+          if (this.max != null && numValue > parseFloat(this.max)) {
+            value = String(this.max);
+          }
+          // 校验最小值
+          if (this.min != null && numValue < parseFloat(this.min)) {
+            value = String(this.min);
+          }
+        }
+      }
+      
+      this.val = value;
+    },200),
+    /**
+     * change事件上报
+     * */
+    valChange() {
+      // 处理只输入负号的情况
+      if (this.val === '-') {
+        this.val = '';
+      }
+      // 最大值最小值校验已在valInput中实时处理，这里保留作为兜底
+      if (this.val) {
+        const numValue = parseFloat(this.val);
+        if (!isNaN(numValue)) {
+          if (this.max != null && numValue > parseFloat(this.max)) {
+            this.val = String(this.max);
+          }
+          if (this.min != null && numValue < parseFloat(this.min)) {
+            this.val = String(this.min);
+          }
+        }
+      }
+    },
+    /**
+     * blur事件上报
+     * */
+    inputBlur() {
+      this.$emit('blur', this.val);
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.bnInput-underline {
+  :deep(.el-input__wrapper) {
+    box-shadow: none;
+    border-bottom: 1px solid #dcdfe6;
+    border-radius: 0;
+  }
+}
+</style>

package/packages/BnMenus/BnMenus.vue

@@ -0,0 +1,502 @@
+<!--
+  @Description: 侧边导航栏组件，纯自研实现，支持多级嵌套、矢量图标及 smart 智能路由模式
+  @VERSION: 1.0
+-->
+<template>
+  <div class="BnMenu" :class="{ 'BnMenu--collapsed': isCollapsed }">
+    <!-- 收起态：隐藏导航内容，仅保留边缘展开按钮 -->
+    <div
+      v-if="isCollapsed"
+      class="BnMenu-edge-open bnUIcon bnUIcon-enlarge"
+      title="展开"
+      @click="toggleCollapse"
+    ></div>
+    <!-- 展开态：完整导航栏 -->
+    <template v-else>
+      <!-- Logo / 标题区域，可通过 #menuLogo 插槽自定义 -->
+      <div class="BnMenu-logo">
+        <div class="BnMenu-logo-main">
+          <slot name="menuLogo" :collapsed="isCollapsed">
+            <div class="BnMenu-logo-title">{{ title }}</div>
+          </slot>
+        </div>
+        <!-- 收起按钮 -->
+        <span
+          class="BnMenu-logo-toggle bnUIcon bnUIcon-shrink"
+          title="收起"
+          @click="toggleCollapse"
+        ></span>
+      </div>
+      <!-- 可滚动菜单列表 -->
+      <div class="BnMenu-list">
+        <el-scrollbar height="100%">
+          <div class="BnMenu-body">
+            <menu-item
+              v-for="(menu, index) in menuList"
+              :key="getMenuIndex(menu) || index"
+              :menu="menu"
+              :level="1"
+              :theme-index="index"
+            />
+          </div>
+        </el-scrollbar>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import MenuItem from './MenuItem.vue'
+import { isEmpty } from 'lodash'
+
+/** 一级菜单主题色循环列表，选中高亮按此顺序依次取用，超出后从头循环 */
+const THEME_COLORS = [
+  '#1890ff', // 蓝
+  '#4f46e5', // 靛紫
+  '#d97706', // 琥珀
+  '#059669', // 祖母绿
+  '#db2777', // 玫红
+  '#0891b2', // 青
+  '#7c3aed', // 紫
+  '#e11d48',  // 玫瑰红
+  '#009966'  // 玫瑰红
+]
+
+export default {
+  name: "BnMenus",
+  components: {
+    MenuItem
+  },
+  /**
+   * 向子组件 MenuItem 注入当前实例，供其调用菜单状态与方法
+   */
+  provide() {
+    return {
+      bnMenus: this
+    }
+  },
+  props: {
+    // Logo 区域标题文字，使用 #menuLogo 插槽后失效
+    title: String,
+    // 智能模式：自动高亮路由、自动跳转、自动缓存、根路径自动重定向首菜单
+    smart: Boolean,
+    // 智能模式下的 localStorage 缓存主键，用于刷新后恢复上次路由
+    cacheKey: String,
+    // 导航菜单数据，通过 children 字段实现子菜单嵌套；每项可配置 icon、meta.title 等
+    menuList: {
+      default() {
+        return []
+      }
+    },
+    // 默认展开的子菜单 name 数组，如 ['company', 'actionEngine']
+    defaultOpens: Array,
+    // 当前选中项，支持 v-model:activeNav；可为字符串（activeKey 值）或对象（完整菜单项）
+    activeNav: {},
+    // 匹配选中项的字段名，默认按 name 匹配
+    activeKey: { default: 'name' },
+    // 是否收起导航栏，支持 v-model:collapsed；收起后宽度为 0，展开按钮绝对定位悬浮在边缘
+    collapsed: { type: Boolean, default: undefined },
+    // 禁止所有子菜单展开/收起，默认全部展开且不可折叠
+    disableFold: { type: Boolean, default: false }
+  },
+  emits: ['update:activeNav', 'update:collapsed', 'collapse-change', 'change'],
+  data() {
+    return {
+      // 未受控时的内部收起状态
+      innerCollapsed: false,
+      // 当前已展开的子菜单 name 列表
+      openedKeys: []
+    }
+  },
+  watch: {
+    /**
+     * 监听 defaultOpens，合并到 openedKeys 作为初始展开项
+     */
+    defaultOpens: {
+      immediate: true,
+      handler(opens) {
+        if (opens?.length) {
+          this.openedKeys = [...new Set([...this.openedKeys, ...opens])]
+        }
+      }
+    },
+    /**
+     * 选中项变化时，自动展开其所有父级子菜单，确保高亮项可见
+     */
+    activeKeys: {
+      immediate: true,
+      handler(keys) {
+        keys.forEach(key => {
+          const path = this.findMenuPath(this.menuList, key)
+          if (path?.length > 1) {
+            path.slice(0, -1).forEach(name => this.openSubMenu(name))
+          }
+        })
+      }
+    }
+  },
+  methods: {
+    /**
+     * 切换导航栏收起 / 展开
+     */
+    toggleCollapse() {
+      const next = !this.isCollapsed
+      if (this.collapsed !== undefined) {
+        this.$emit('update:collapsed', next)
+      } else {
+        this.innerCollapsed = next
+      }
+      this.$emit('collapse-change', next)
+    },
+    /**
+     * 根据一级菜单索引获取主题色
+     * @param {Number} index 一级菜单在 menuList 中的索引
+     * @returns {String} 十六进制颜色值
+     */
+    getThemeColor(index) {
+      return THEME_COLORS[index % THEME_COLORS.length]
+    },
+    /**
+     * 根据一级菜单索引获取选中背景色（主题色 20% 透明度）
+     * @param {Number} index 一级菜单在 menuList 中的索引
+     * @returns {String} rgba 颜色值
+     */
+    getThemeBg(index) {
+      const hex = this.getThemeColor(index)
+      const r = parseInt(hex.slice(1, 3), 16)
+      const g = parseInt(hex.slice(3, 5), 16)
+      const b = parseInt(hex.slice(5, 7), 16)
+      return `rgba(${r}, ${g}, ${b}, 0.1)`
+    },
+    /**
+     * 生成菜单项唯一标识，用于高亮匹配与 v-for key
+     * @param {Object} menu 菜单项对象
+     * @returns {String} name 与 id 拼接后的唯一标识
+     */
+    getMenuIndex(menu) {
+      return `${menu.name}${menu.id || ''}`
+    },
+    /**
+     * 按菜单声明的字段子集匹配路由 params / query（值统一转字符串比较）
+     * @param {Object} expected 菜单项上的 params 或 query
+     * @param {Object} actual 当前路由上的 params 或 query
+     * @returns {Boolean}
+     */
+    matchRouteRecord(expected, actual = {}) {
+      return Object.keys(expected).every(key => String(actual[key]) === String(expected[key]))
+    },
+    /**
+     * smart 模式下判断菜单项是否与当前路由匹配（支持同 name 多项靠 query / id 区分）
+     * @param {Object} menu 菜单项对象
+     * @param {Object} route 当前路由
+     * @returns {Boolean}
+     */
+    isRouteMatch(menu, route) {
+      if (menu.name !== route.name) return false
+      const routeParams = route.params || {}
+      const routeQuery = route.query || {}
+      const hasMenuParams = !isEmpty(menu.params)
+      const hasMenuQuery = !isEmpty(menu.query)
+      const hasMenuId = menu.id != null && menu.id !== ''
+      const hasRouteParams = !isEmpty(routeParams)
+      const hasRouteQuery = !isEmpty(routeQuery)
+
+      if (hasMenuParams) {
+        if (!this.matchRouteRecord(menu.params, routeParams)) return false
+      } else if (hasRouteParams) {
+        return false
+      }
+
+      if (hasMenuQuery) {
+        if (!this.matchRouteRecord(menu.query, routeQuery)) return false
+      } else if (hasMenuId) {
+        const routeId = routeQuery.id ?? routeParams.id
+        if (routeId == null) return !hasRouteQuery
+        return String(routeId) === String(menu.id)
+      } else if (hasRouteQuery || hasRouteParams) {
+        return false
+      }
+      return true
+    },
+    /**
+     * 菜单项是否具备路由区分标识（同 name 多项时不应仅靠 name 高亮）
+     * @param {Object} menu 菜单项对象
+     * @returns {Boolean}
+     */
+    hasRouteIdentity(menu) {
+      return menu.id != null && menu.id !== '' || !isEmpty(menu.query) || !isEmpty(menu.params)
+    },
+    /**
+     * 判断菜单项是否处于选中高亮状态
+     * @param {Object} menu 菜单项对象
+     * @returns {Boolean}
+     */
+    isActive(menu) {
+      const index = this.getMenuIndex(menu)
+      if (this.activeKeys.includes(index)) return true
+      const key = menu[this.activeKey]
+      // 看板等同 name 多项场景：禁止仅用 name 匹配，避免全部高亮
+      return !!(key && !this.hasRouteIdentity(menu) && this.activeKeys.includes(key))
+    },
+    /**
+     * 判断菜单项是否禁止展开/收起
+     * 全局 disableFold 为 true 时全部禁止；单项可通过 menu.disableFold 或 menu.meta.disableFold 单独禁止
+     * @param {Object} menu 菜单项对象
+     * @returns {Boolean}
+     */
+    isDisableFold(menu) {
+      if (this.disableFold) return true
+      return !!(menu.disableFold || menu.meta?.disableFold)
+    },
+    /**
+     * 判断子菜单是否已展开
+     * @param {Object} menu 菜单项对象
+     * @returns {Boolean}
+     */
+    isOpen(menu) {
+      if (this.isDisableFold(menu)) return true
+      return this.openedKeys.includes(menu.name)
+    },
+    /**
+     * 切换子菜单展开 / 收起状态
+     * @param {Object} menu 菜单项对象
+     */
+    toggleSubMenu(menu) {
+      if (this.isDisableFold(menu)) return
+      const name = menu.name
+      if (this.openedKeys.includes(name)) {
+        this.openedKeys = this.openedKeys.filter(k => k !== name)
+      } else {
+        this.openedKeys = [...this.openedKeys, name]
+      }
+    },
+    /**
+     * 展开指定子菜单（若已展开则忽略）
+     * @param {String} name 子菜单 name
+     */
+    openSubMenu(name) {
+      if (!this.openedKeys.includes(name)) {
+        this.openedKeys = [...this.openedKeys, name]
+      }
+    },
+    /**
+     * 选中导航项
+     * smart 模式：自动路由跳转并可选缓存到 localStorage
+     * 普通模式：更新 v-model:activeNav 并触发 change 事件
+     * @param {Object} item 被点击的菜单项完整对象
+     */
+    selectMenu(item) {
+      const navVal = typeof this.activeNav === 'string'
+        ? item[this.activeKey]
+        : item
+      if (this.smart) {
+        const routeData = { name: item.name, params: item.params, query: item.query }
+        if (this.cacheKey) {
+          localStorage.setItem(this.cacheKey, JSON.stringify(routeData))
+        }
+        this.$router.push(routeData)
+      } else {
+        this.$emit('update:activeNav', navVal)
+      }
+      // 等待父级 v-model:activeNav 完成同步后再触发 change
+      this.$nextTick(() => {
+        this.$emit('change', item, navVal)
+      })
+    },
+    /**
+     * 深度优先获取第一个可跳转的叶子菜单项（无 children 且含 name）
+     * @param {Array} list 菜单树
+     * @returns {Object|null}
+     */
+    getFirstMenu(list) {
+      const queue = [...list]
+      while (queue.length) {
+        const item = queue.shift()
+        if (!item.children || !item.children.length) {
+          if (item.name) return item
+        } else {
+          queue.unshift(...item.children)
+        }
+      }
+      return null
+    },
+    /**
+     * 迭代平铺树形菜单为一维数组（避免递归栈溢出）
+     * @param {Array} list 菜单树
+     * @returns {Array} 不含 children 的菜单项数组
+     */
+    flatTree(list) {
+      const result = []
+      const stack = [...list]
+      while (stack.length) {
+        const { children, ...rest } = stack.pop()
+        result.push(rest)
+        if (children?.length) {
+          stack.push(...children)
+        }
+      }
+      return result
+    },
+    /**
+     * 在菜单树中查找目标项的 name 路径（从根到目标）
+     * @param {Array} list 菜单树
+     * @param {String} targetKey 目标标识（getMenuIndex 或 activeKey 值）
+     * @param {Array} path 当前递归路径
+     * @returns {Array|null} name 路径数组，未找到返回 null
+     */
+    findMenuPath(list, targetKey, path = []) {
+      for (const menu of list) {
+        const index = this.getMenuIndex(menu)
+        const key = menu[this.activeKey]
+        const currentPath = [...path, menu.name]
+        if (index === targetKey || key === targetKey) return currentPath
+        if (menu.children?.length) {
+          const found = this.findMenuPath(menu.children, targetKey, currentPath)
+          if (found) return found
+        }
+      }
+      return null
+    }
+  },
+  mounted() {
+    if (!this.smart) return
+    // 尝试从 localStorage 恢复上次路由
+    if (this.cacheKey) {
+      try {
+        const cached = localStorage.getItem(this.cacheKey)
+        if (cached) {
+          this.$router.push(JSON.parse(cached))
+          return
+        }
+      } catch (e) {
+        // 缓存数据损坏时清除，避免持续报错
+        localStorage.removeItem(this.cacheKey)
+      }
+    }
+    // 无缓存且当前在根路径时，自动跳转到第一个可用菜单
+    if (this.$route?.path === '/') {
+      const first = this.getFirstMenu(this.menuList)
+      if (first) {
+        this.$router.push({ name: first.name, params: first.params, query: first.query })
+      }
+    }
+  },
+  computed: {
+    /** 导航栏是否处于收起状态（支持受控与非受控） */
+    isCollapsed() {
+      return this.collapsed !== undefined ? this.collapsed : this.innerCollapsed
+    },
+    /**
+     * 当前所有选中高亮项的标识列表（统一为字符串数组）
+     * smart 模式：根据 $route 自动匹配
+     * 普通模式：由 activeNav 转换而来
+     */
+    activeKeys() {
+      if (this.smart && this.$route?.name) {
+        const matched = this.menuMap.find(menu => this.isRouteMatch(menu, this.$route))
+        return matched ? [this.getMenuIndex(matched)] : []
+      }
+      if (typeof this.activeNav === 'string') {
+        return this.activeNav ? [this.activeNav] : []
+      }
+      if (this.activeNav && typeof this.activeNav === 'object') {
+        return [this.getMenuIndex(this.activeNav)]
+      }
+      return []
+    },
+    /** 拍平后的菜单列表，用于 smart 模式路由匹配 */
+    menuMap() {
+      return this.flatTree(this.menuList)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../font/iconfont.css";
+
+.BnMenu {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 200px;
+  height: 100%;
+  position: relative;
+
+  &-logo {
+    position: relative;
+    flex-shrink: 0;
+
+    &-main {
+      min-height: 56px;
+      padding-right: 36px;
+    }
+
+    &-title {
+      height: 56px;
+      padding: 16px 20px;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    &-toggle {
+      position: absolute;
+      top: 20px;
+      right: 10px;
+      z-index: 1;
+      font-size: 16px;
+      line-height: 1;
+      color: #86909c;
+      cursor: pointer;
+      transition: color 0.2s;
+
+      &:hover {
+        color: #1890ff;
+      }
+    }
+  }
+
+  // flex 子项占满剩余高度，height: 0 触发 flex 收缩以启用滚动
+  &-list {
+    flex: 1;
+    height: 0;
+  }
+
+  &-body {
+    border: none;
+    padding: 0;
+  }
+
+  // 收起态：不占宽度，展开按钮绝对定位悬浮在边缘
+  &--collapsed {
+    width: 0;
+    min-width: 0;
+    overflow: visible;
+  }
+
+  &-edge-open {
+    position: absolute;
+    top: 16px;
+    left: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+    line-height: 1;
+    color: #86909c;
+    cursor: pointer;
+    border: 1px solid #e8eaed;
+    border-left: none;
+    border-radius: 0 6px 6px 0;
+    background: rgba(255,255,255,.5);
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
+    transition: color 0.2s;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+}
+</style>