@weitutech/by-components 1.1.100 → 1.1.102

package/lib/by-components.umd.js

@@ -60519,6 +60519,7 @@ __webpack_require__.d(__webpack_exports__, {
   ByDatePickerRange: function() { return /* reexport */ date_picker_range; },
   ByDialog: function() { return /* reexport */ ByDialog; },
   ByDialogService: function() { return /* reexport */ by_dialog_ByDialogService; },
+  ByFloatingMenu: function() { return /* reexport */ ByFloatingMenu; },
   ByFoldSearch: function() { return /* reexport */ fold_search; },
   ByForm: function() { return /* reexport */ form_form; },
   ByPageSearch: function() { return /* reexport */ page_search; },
@@ -79031,6 +79032,548 @@ var ByCascaderPanel_component = normalizeComponent(
 )
 
 /* harmony default export */ var ByCascaderPanel = (ByCascaderPanel_component.exports);
+;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ffbc40de-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/floating-menu/ByFloatingMenu.vue?vue&type=template&id=08613879
+var ByFloatingMenuvue_type_template_id_08613879_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "by-floating-menu",
+    class: {
+      'is-hidden': _vm.isHidden
+    },
+    style: _vm.menuStyle,
+    on: {
+      "mousedown": _vm.startDrag
+    }
+  }, [_c('div', {
+    staticClass: "floating-main-btn",
+    class: {
+      'is-expanded': _vm.isExpanded
+    },
+    style: {
+      width: _vm.mainButtonSize + 'px',
+      height: _vm.mainButtonSize + 'px'
+    },
+    on: {
+      "click": _vm.toggleMenu
+    }
+  }, [_vm.mainButtonIcon ? _c('i', {
+    class: _vm.mainButtonIcon,
+    style: {
+      transform: 'none !important',
+      display: 'block !important',
+      textAlign: 'center !important',
+      lineHeight: _vm.mainButtonSize + 'px !important',
+      width: '100% !important',
+      height: '100% !important',
+      fontStyle: 'normal !important'
+    }
+  }) : _c('span', {
+    style: {
+      transform: 'none !important',
+      display: 'block !important',
+      textAlign: 'center !important',
+      lineHeight: _vm.mainButtonSize + 'px !important',
+      width: '100% !important',
+      height: '100% !important'
+    }
+  }, [_vm._v(_vm._s(_vm.mainButtonText))])]), !_vm.isHidden ? _c('div', {
+    staticClass: "hide-btn",
+    style: {
+      width: _vm.mainButtonSize * 0.33 + 'px',
+      height: _vm.mainButtonSize * 0.33 + 'px',
+      top: -_vm.mainButtonSize * 0.08 + 'px',
+      right: -_vm.mainButtonSize * 0.08 + 'px'
+    },
+    on: {
+      "click": _vm.toggleHide
+    }
+  }, [_c('i', {
+    staticClass: "icon-close",
+    style: {
+      transform: 'none !important',
+      display: 'block !important',
+      textAlign: 'center !important',
+      lineHeight: _vm.mainButtonSize * 0.33 + 'px !important',
+      width: '100% !important',
+      height: '100% !important',
+      fontStyle: 'normal !important'
+    }
+  })]) : _vm._e(), _c('transition', {
+    attrs: {
+      "name": "menu-fade"
+    }
+  }, [_c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.isExpanded && !_vm.isHidden,
+      expression: "isExpanded && !isHidden"
+    }],
+    staticClass: "menu-items"
+  }, _vm._l(_vm.menuItems, function (item, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "menu-item",
+      class: {
+        'is-disabled': item.disabled
+      },
+      style: {
+        width: _vm.mainButtonSize * 0.83 + 'px',
+        height: _vm.mainButtonSize * 0.83 + 'px'
+      },
+      attrs: {
+        "data-tooltip": item.title
+      },
+      on: {
+        "mousedown": function ($event) {
+          return _vm.startMenuItemDrag($event, item, index);
+        },
+        "click": function ($event) {
+          return _vm.handleMenuClick(item, index);
+        }
+      }
+    }, [item.title ? _c('div', {
+      staticClass: "menu-tooltip"
+    }, [_vm._v(_vm._s(item.title))]) : _vm._e(), item.icon ? _c('i', {
+      class: item.icon,
+      style: {
+        transform: 'none !important',
+        display: 'block !important',
+        textAlign: 'center !important',
+        lineHeight: _vm.mainButtonSize * 0.83 + 'px !important',
+        width: '100% !important',
+        height: '100% !important',
+        fontStyle: 'normal !important'
+      }
+    }) : _c('span', {
+      style: {
+        transform: 'none !important',
+        display: 'block !important',
+        textAlign: 'center !important',
+        lineHeight: _vm.mainButtonSize * 0.83 + 'px !important',
+        width: '100% !important',
+        height: '100% !important'
+      }
+    }, [_vm._v(_vm._s(item.text))])]);
+  }), 0)])], 1);
+};
+var ByFloatingMenuvue_type_template_id_08613879_staticRenderFns = [];
+
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/floating-menu/ByFloatingMenu.vue?vue&type=script&lang=js
+/* harmony default export */ var ByFloatingMenuvue_type_script_lang_js = ({
+  name: 'ByFloatingMenu',
+  props: {
+    // 主按钮图标
+    mainButtonIcon: {
+      type: String,
+      default: 'el-icon-s-operation'
+    },
+    // 主按钮文字（如果没图标，会显示文字）
+    mainButtonText: {
+      type: String,
+      default: ''
+    },
+    // 菜单项配置
+    menuItems: {
+      type: Array,
+      default: () => []
+    },
+    // 初始位置
+    position: {
+      type: Object,
+      default: () => ({
+        right: '20px',
+        bottom: '60px'
+      })
+    },
+    // 按钮大小
+    size: {
+      type: String,
+      default: 'small',
+      validator: value => ['mini', 'small', 'medium'].includes(value)
+    }
+  },
+  data() {
+    return {
+      isExpanded: false,
+      isHidden: false,
+      isDragging: false,
+      hasDragged: false,
+      dragStart: {
+        x: 0,
+        y: 0
+      },
+      currentPosition: {
+        x: 0,
+        y: 0
+      },
+      menuStyle: {},
+      // 菜单项拖动相关
+      menuItemDragStart: {
+        x: 0,
+        y: 0
+      },
+      menuItemHasDragged: false,
+      currentMenuItem: null
+    };
+  },
+  computed: {
+    // 根据size属性计算实际大小
+    mainButtonSize() {
+      const sizeMap = {
+        mini: 40,
+        small: 50,
+        medium: 60
+      };
+      return sizeMap[this.size] || 50;
+    }
+  },
+  mounted() {
+    this.initPosition();
+    this.bindEvents();
+    this.bindPageEvents();
+  },
+  beforeDestroy() {
+    this.unbindEvents();
+    this.unbindPageEvents();
+    this.removeShowButton();
+    // 清理菜单项拖动事件监听器
+    document.removeEventListener('mousemove', this.onMenuItemDrag);
+    document.removeEventListener('mouseup', this.endMenuItemDrag);
+  },
+  methods: {
+    // 初始化位置
+    initPosition() {
+      const {
+        right,
+        bottom
+      } = this.position;
+      this.menuStyle = {
+        right: right,
+        bottom: bottom
+      };
+
+      // 初始化当前位置
+      const windowHeight = window.innerHeight;
+      const bottomValue = parseInt(bottom) || 20;
+      this.currentPosition = {
+        x: 0,
+        y: windowHeight - bottomValue - this.mainButtonSize // 使用动态主按钮大小
+      };
+    },
+    // 切换菜单展开状态
+    toggleMenu() {
+      // 如果刚刚拖动了，则不切换菜单状态
+      if (this.hasDragged) {
+        this.hasDragged = false;
+        return;
+      }
+      this.isExpanded = !this.isExpanded;
+    },
+    // 切换隐藏状态
+    toggleHide() {
+      this.isHidden = !this.isHidden;
+      this.isExpanded = false;
+      if (this.isHidden) {
+        // 保持当前纵向位置，只隐藏横向
+        this.menuStyle = {
+          ...this.menuStyle,
+          right: '-100px',
+          transition: 'right 0.3s ease',
+          opacity: '0'
+        };
+        // 只有在页面可见时才创建显示按钮
+        if (!document.hidden) {
+          this.createShowButton();
+        }
+      } else {
+        // 显示主菜单，保持当前位置
+        this.menuStyle = {
+          ...this.menuStyle,
+          right: '20px',
+          transition: 'right 0.3s ease, opacity 0.3s ease',
+          opacity: '1'
+        };
+        // 移除显示按钮
+        this.removeShowButton();
+      }
+    },
+    // 处理菜单点击
+    handleMenuClick(item, index) {
+      if (item.disabled) return;
+
+      // 如果刚刚拖动了菜单项，则不触发点击
+      if (this.menuItemHasDragged && this.currentMenuItem && this.currentMenuItem.index === index) {
+        this.menuItemHasDragged = false;
+        this.currentMenuItem = null;
+        return;
+      }
+      this.$emit('menu-click', {
+        item,
+        index
+      });
+      this.isExpanded = false;
+    },
+    // 开始菜单项拖动
+    startMenuItemDrag(e, item, index) {
+      this.menuItemHasDragged = false;
+      this.currentMenuItem = {
+        item,
+        index
+      };
+      this.menuItemDragStart = {
+        x: e.clientX,
+        y: e.clientY
+      };
+
+      // 绑定菜单项拖动事件
+      document.addEventListener('mousemove', this.onMenuItemDrag);
+      document.addEventListener('mouseup', this.endMenuItemDrag);
+
+      // 阻止默认行为
+      e.preventDefault();
+    },
+    // 菜单项拖动中
+    onMenuItemDrag(e) {
+      const deltaX = e.clientX - this.menuItemDragStart.x;
+      const deltaY = e.clientY - this.menuItemDragStart.y;
+
+      // 如果移动距离超过阈值，标记为真正拖动
+      if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+        this.menuItemHasDragged = true;
+      }
+    },
+    // 结束菜单项拖动
+    endMenuItemDrag() {
+      // 解绑菜单项拖动事件
+      document.removeEventListener('mousemove', this.onMenuItemDrag);
+      document.removeEventListener('mouseup', this.endMenuItemDrag);
+    },
+    // 开始拖拽
+    startDrag(e) {
+      if (this.isHidden) return;
+      this.isDragging = true;
+      this.hasDragged = false; // 标记是否真正拖动了
+
+      // 如果当前位置未初始化，则从当前DOM位置计算
+      if (this.currentPosition.y === 0) {
+        const windowHeight = window.innerHeight;
+        const bottomValue = parseInt(this.menuStyle.bottom) || 20;
+        this.currentPosition.y = windowHeight - bottomValue - this.mainButtonSize;
+      }
+      this.dragStart = {
+        x: e.clientX,
+        y: e.clientY
+      };
+
+      // 阻止默认行为和事件传播
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    // 拖拽中
+    onDrag(e) {
+      if (!this.isDragging || this.isHidden) return;
+      const deltaX = e.clientX - this.dragStart.x;
+      const deltaY = e.clientY - this.dragStart.y;
+
+      // 如果移动距离超过阈值，标记为真正拖动
+      if (Math.abs(deltaY) > 5) {
+        this.hasDragged = true;
+      }
+
+      // 只允许垂直拖拽
+      const newY = this.currentPosition.y + deltaY;
+      const windowHeight = window.innerHeight;
+      const menuHeight = this.mainButtonSize; // 使用动态主按钮大小
+
+      // 限制在屏幕范围内
+      const clampedY = Math.max(0, Math.min(newY, windowHeight - menuHeight));
+      this.currentPosition = {
+        x: this.currentPosition.x,
+        y: clampedY
+      };
+      this.menuStyle = {
+        right: this.menuStyle.right || '20px',
+        bottom: 'auto',
+        top: `${clampedY}px`,
+        transition: 'none'
+      };
+      this.dragStart = {
+        x: e.clientX,
+        y: e.clientY
+      };
+    },
+    // 结束拖拽
+    endDrag() {
+      this.isDragging = false;
+
+      // 更新currentPosition以匹配当前DOM位置
+      if (this.menuStyle.top) {
+        this.currentPosition.y = parseInt(this.menuStyle.top);
+      }
+
+      // 保持当前位置，恢复过渡动画
+      this.menuStyle = {
+        ...this.menuStyle,
+        transition: 'right 0.3s ease, opacity 0.3s ease'
+      };
+    },
+    // 绑定事件
+    bindEvents() {
+      document.addEventListener('mousemove', this.onDrag);
+      document.addEventListener('mouseup', this.endDrag);
+    },
+    // 解绑事件
+    unbindEvents() {
+      document.removeEventListener('mousemove', this.onDrag);
+      document.removeEventListener('mouseup', this.endDrag);
+    },
+    // 绑定页面相关事件
+    bindPageEvents() {
+      // 监听页面可见性变化（切换 tab）
+      document.addEventListener('visibilitychange', this.onVisibilityChange);
+
+      // 监听页面卸载事件
+      window.addEventListener('beforeunload', this.onPageUnload);
+
+      // 监听路由变化（如果使用了 Vue Router）
+      if (this.$router) {
+        this.$router.beforeEach((to, from, next) => {
+          // 在路由切换前移除显示按钮
+          this.removeShowButton();
+          next();
+        });
+      }
+    },
+    // 解绑页面相关事件
+    unbindPageEvents() {
+      document.removeEventListener('visibilitychange', this.onVisibilityChange);
+      window.removeEventListener('beforeunload', this.onPageUnload);
+    },
+    // 页面可见性变化处理
+    onVisibilityChange() {
+      if (document.hidden) {
+        // 页面变为隐藏状态（切换 tab 或最小化），移除显示按钮
+        this.removeShowButton();
+      }
+    },
+    // 页面卸载处理
+    onPageUnload() {
+      // 页面卸载前移除显示按钮
+      this.removeShowButton();
+    },
+    // 创建显示按钮
+    createShowButton() {
+      // 先移除可能存在的显示按钮
+      this.removeShowButton();
+
+      // 如果页面不可见，不创建显示按钮
+      if (document.hidden) {
+        return;
+      }
+
+      // 计算当前主按钮的纵向位置
+      let topPosition = '50%';
+      if (this.menuStyle.top) {
+        // 如果使用top定位，直接使用
+        topPosition = this.menuStyle.top;
+      } else if (this.menuStyle.bottom) {
+        // 如果使用bottom定位，转换为top
+        const windowHeight = window.innerHeight;
+        const bottomValue = parseInt(this.menuStyle.bottom) || 20;
+        const menuHeight = this.mainButtonSize; // 主按钮高度
+        const showBtnHeight = this.mainButtonSize * 1.33; // 吸附按钮高度（主按钮的1.33倍）
+        // 计算主按钮顶部位置，然后让吸附按钮中心对齐主按钮中心
+        const mainBtnTop = windowHeight - bottomValue - menuHeight;
+        const showBtnTop = mainBtnTop + (menuHeight - showBtnHeight) / 2;
+        topPosition = `${showBtnTop}px`;
+      }
+
+      // 创建显示按钮元素
+      const showBtn = document.createElement('div');
+      showBtn.id = 'floating-show-btn-' + this._uid;
+      showBtn.innerHTML = '<span>◀</span>';
+
+      // 设置样式
+      showBtn.style.position = 'fixed';
+      showBtn.style.right = '0';
+      showBtn.style.top = topPosition;
+      showBtn.style.transform = topPosition.includes('%') ? 'translateY(-30%)' : 'none';
+      showBtn.style.width = this.mainButtonSize * 0.4 + 'px';
+      showBtn.style.height = this.mainButtonSize * 1.33 + 'px';
+      showBtn.style.background = '#409eff';
+      showBtn.style.color = 'white';
+      showBtn.style.display = 'flex';
+      showBtn.style.alignItems = 'center';
+      showBtn.style.justifyContent = 'center';
+      showBtn.style.cursor = 'pointer';
+      showBtn.style.borderRadius = '10px 0 0 10px';
+      showBtn.style.boxShadow = '-2px 0 8px rgba(64, 158, 255, 0.3)';
+      showBtn.style.zIndex = '10001';
+      showBtn.style.transition = 'all 0.3s ease';
+      showBtn.style.fontSize = '15px';
+      showBtn.style.fontWeight = 'bold';
+
+      // 设置span样式
+      const span = showBtn.querySelector('span');
+      if (span) {
+        span.style.fontSize = '15px';
+        span.style.fontWeight = 'bold';
+        span.style.transform = 'none';
+        span.style.display = 'block';
+      }
+
+      // 添加点击事件
+      showBtn.addEventListener('click', this.toggleHide);
+
+      // 添加悬停效果
+      const originalTransform = topPosition.includes('%') ? 'translateY(-30%)' : 'none';
+      showBtn.addEventListener('mouseenter', () => {
+        showBtn.style.background = '#66b1ff';
+        showBtn.style.transform = topPosition.includes('%') ? 'translateY(-50%) translateX(-4px)' : 'translateX(-4px)';
+        showBtn.style.boxShadow = '-4px 0 12px rgba(64, 158, 255, 0.4)';
+      });
+      showBtn.addEventListener('mouseleave', () => {
+        showBtn.style.background = '#409eff';
+        showBtn.style.transform = originalTransform;
+        showBtn.style.boxShadow = '-2px 0 8px rgba(64, 158, 255, 0.3)';
+      });
+
+      // 添加到body
+      document.body.appendChild(showBtn);
+    },
+    // 移除显示按钮
+    removeShowButton() {
+      const showBtn = document.getElementById('floating-show-btn-' + this._uid);
+      if (showBtn) {
+        showBtn.remove();
+      }
+    }
+  }
+});
+;// ./src/components/floating-menu/ByFloatingMenu.vue?vue&type=script&lang=js
+ /* harmony default export */ var floating_menu_ByFloatingMenuvue_type_script_lang_js = (ByFloatingMenuvue_type_script_lang_js); 
+;// ./src/components/floating-menu/ByFloatingMenu.vue
+
+
+
+
+
+/* normalize component */
+;
+var ByFloatingMenu_component = normalizeComponent(
+  floating_menu_ByFloatingMenuvue_type_script_lang_js,
+  ByFloatingMenuvue_type_template_id_08613879_render,
+  ByFloatingMenuvue_type_template_id_08613879_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var ByFloatingMenu = (ByFloatingMenu_component.exports);
 ;// ./src/index.js
 
 
@@ -79051,6 +79594,7 @@ var ByCascaderPanel_component = normalizeComponent(
 
 
 
+
 const components = {
   ByPager: pager,
   ByTable: table,
@@ -79065,7 +79609,8 @@ const components = {
   ByBatchQuerySelector: BatchQuerySelector,
   ByTreeSearch: ByTreeSearch,
   ByDialog: ByDialog,
-  ByCascaderPanel: ByCascaderPanel
+  ByCascaderPanel: ByCascaderPanel,
+  ByFloatingMenu: ByFloatingMenu
 };
 
 // 设置当前 z-index 起始值