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

package/src/components/pro-layout-sider/components/pro-layout-sider-search.vue

@@ -0,0 +1,345 @@
+<template>
+  <div class="search-fast-con" :class="tabsHeight != 46 ? 'custom-tabs' : ''">
+    <div class="search-fast-con-side" >
+      <div class="sideInput" @click="handleSideClick">
+        <Input v-if="searchType === 0" v-model="searchText" clearable :placeholder="t('pro-layout.side.search-menu')" font-size="8px"
+               @on-change="handleInput" :border="false" @on-blur="searchSideModal = false">
+          <template #prefix>
+            <Icon type="ios-search"  size="16"/>
+          </template>
+        </Input>
+      </div>
+    </div>
+    <Modal v-model="searchSideModal" class="search-fast-con-side-modal" :class="[defaultClass,tabsHeight != 46 ? 'custom-tabs' : '']"
+           footer-hide :closable="false" :mask="false"
+           scrollable width="255px">
+      <div v-if="spinShow" style="height: 300px;font-size: 19px;">
+        <Spin size="large" :show="spinShow">
+          <Icon type="ios-loading" size=18 class="search-spin-icon-load"></Icon>
+          <div>{{ t('pro-layout.side.search-loading') }}</div>
+        </Spin>
+      </div>
+      <div v-else class="search-content">
+        <div v-for="(item,index) in menuData"  :key="index" >
+          <div class="menu-side-style" @click="handleSelect(item)" @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)">
+            <div :style="getScrollingStyle(item.label)"  class="text" :class="{ 'scrolling': isHovered[index] && shouldScroll(item.label) }">
+              <Icon :type="item.icon" style="margin-left: 10.6px;min-width: 14px" size="14"></Icon>
+              <span style="margin-left: 9.5px">{{ item.label }}</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="menuData.length === 0">
+          <span class="no-result">{{ t('pro-layout.side.search-no-data') }}</span>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+import Bus from "@lambo-design/shared/utils/bus";
+import {deepCopy} from "@lambo-design/shared/utils/assist";
+import {getThemeVarByKey} from "@lambo-design/shared/utils/theme";
+import {getAllElements} from "@lambo-design/shared/utils/platform"
+import Locale from "@lambo-design/core/src/mixins/locale";
+
+export default {
+  name: "FastSearch",
+  mixins: [Locale],
+  props: {
+    searchType: '',
+    menuList: {
+      type: Array,
+      default: () => []
+    },
+  },
+  data () {
+    return {
+      searchText:'',
+      appId:'',
+      option: [],
+      menuData:[],
+      noticeData:[],
+      isHovered: [],
+      select:'',
+      searchTopModal:false,
+      searchSideModal:false,
+      showSearchIcon:true,
+      maxWidth: 190,
+      spinShow:false,
+      systemInfo: {},
+      originMenuList: [],
+      searchMenuList: [],
+      tabsHeight: 46
+    }
+  },
+  computed:{
+    defaultClass(){
+      if (this.systemInfo && this.systemInfo.layoutSize) {
+        let layoutSize = this.systemInfo.layoutSize;
+        if (layoutSize == 'default') {
+          return 'large';
+        } else {
+          return '';
+        }
+      }
+      return '';
+    }
+  },
+  watch:{
+    treeMenuList(){
+      this.filterMenu();
+    },
+    originMenuList(){
+      this.filterMenu();
+    }
+  },
+  methods:{
+    initListener(){
+      Bus.$on('system-info',(data)=>{
+        this.initSystemInfo(data)
+      })
+      Bus.$on('menu-list',(data)=>{
+        this.initMenu(data)
+      });
+      Bus.$on('tree-menu-list',(data)=>{
+        this.initTreeMenu(data);
+      })
+    },
+    destroyListener(){
+      Bus.$off('system-info')
+      Bus.$off('menu-list')
+      Bus.$off('tree-menu-list')
+    },
+    initSystemInfo(data){
+      this.systemInfo = deepCopy(data)
+    },
+    initMenu(data){
+      this.originMenuList = deepCopy(data);
+    },
+    initTreeMenu(data){
+      this.treeMenuList = deepCopy(data);
+    },
+    filterMenu(){
+      let result = []
+      getAllElements(this.treeMenuList,result)
+      this.searchMenuList = this.originMenuList.filter(menuItem => menuItem.type === 2 && menuItem.permissionId && result.includes(menuItem.permissionId))
+          .map(menuItem => {
+            // 检查menuItem对象的icon属性是否为'icon'或'1'
+            if (!menuItem.icon) {
+              // 如果是，则修改icon属性为'ios-folder-open-outline'
+              menuItem.icon = 'ios-folder-open-outline';
+            }
+            return menuItem;
+          });
+    },
+    handleSelect(item){
+      this.$emit('select-menu', item.name,item)
+      this.searchSideModal = false
+    },
+    handleInput() {
+      // 使用 filter 方法找到所有匹配的菜单项
+      const regex = new RegExp(this.searchText, "i");
+      this.menuData = this.searchMenuList.filter(menuItem => {
+        return menuItem.label.match(regex);
+      });
+    },
+    handleSideClick(){
+      this.searchSideModal = true
+      this.handleInput()
+    },
+    handleMouseEnter(index) {
+      this.$set(this.isHovered, index, true); // 将当前菜单项设置为被悬停状态
+    },
+    handleMouseLeave(index) {
+      this.$set(this.isHovered, index, false); // 将当前菜单项设置为非悬停状态
+    },
+    shouldScroll(text) {
+      const span = document.createElement("span");
+      span.style.fontSize = "15px"; // 根据实际情况设置字体大小
+      span.textContent = text;
+      document.body.appendChild(span);
+      const shouldScroll = span.offsetWidth  > this.maxWidth;
+      document.body.removeChild(span);
+      return shouldScroll;
+    },
+    getScrollingStyle(text) {
+      const span = document.createElement("span");
+      span.style.fontSize = "15px"; // 根据实际情况设置字体大小
+      span.textContent = text;
+      document.body.appendChild(span);
+      let scrollDistance = span.offsetWidth  - this.maxWidth;
+      document.body.removeChild(span);
+      if (scrollDistance > 0) {
+        scrollDistance += 15
+        return {
+          "--scroll-distance": `-${scrollDistance}px`,
+        };
+      }
+      else{
+        return{
+          "--scroll-duration": `0s`,
+        }
+      }
+    },
+    loadingCustomStyle(){
+      let themeKey = localStorage.getItem("theme") ? localStorage.getItem("theme") : "default"
+      let tabsHeight = getThemeVarByKey(themeKey,'--layout-tabs-height');
+      if (tabsHeight) {
+        this.tabsHeight = tabsHeight;
+      }
+    }
+  },
+  created(){
+    this.initListener();
+    this.loadingCustomStyle();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "@lambo-design/core/src/styles/default.less";
+.search-fast-con{
+  width: 100%;
+  position: absolute;
+  top: 0px;
+  z-index: 1000;
+  .search-fast-con-side{
+    width: 100%;
+    .sideInput{
+      width: 100%;
+      padding: 3px 0 4px 0;
+      transform: translateX(-14px);
+      /deep/.ivu-icon{
+        height: 40px;
+        line-height: 40px;
+        font-weight: 400;
+      }
+    }
+    /deep/.ivu-input{
+      font-size: 14px;
+      width: 100%;
+      height: 40px;
+      font-weight: 400;
+      border: none;
+      text-align:left; /* 确保文本默认左对齐 */
+      padding-left: 62px;
+      &::placeholder{
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+    /deep/.ivu-icon-ios-search:before {
+      margin-right: -54px; /* 向右移动10像素 */
+      line-height: 1.6
+    }
+  }
+  &.custom-tabs{
+    .search-fast-con-side{
+      .sideInput {
+        height: 30px;
+        /deep/.ivu-icon{
+          height: 36px;
+          line-height: 36px;
+        }
+      }
+      /deep/.ivu-input{
+        height: 36px;
+      }
+    }
+  }
+}
+.search-fast-con-side-modal {
+  .search-spin-icon-load{
+    animation: ani-search-spin 1s linear infinite;
+  }
+  .search-content {
+    padding-left: 10px;
+    padding-top: 8px;
+    height: 270px;
+    width: 211px;
+    margin-left: -13px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    scrollbar-width: none;  /* Firefox */
+    &::-webkit-scrollbar {
+      display: none;  /* Chrome, Safari 和 Opera */
+    }
+    .menu-side-style{
+      font-size: 14px;
+      font-weight: 400;
+      width: 200px;
+      margin-bottom: 8px;
+      padding: 2px 0px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      .text {
+        display: inline-block;
+        &.scrolling {
+          animation: scrollText linear infinite;
+          animation-duration: 2s; /* 调整滚动速度和持续时间 */
+        }
+      }
+      &:hover {
+        overflow: visible;
+        cursor: pointer;
+        .text {
+          animation-play-state: running;
+        }
+      }
+    }
+    .no-result{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: var(--font-size-base,@_font-size-base);
+    }
+  }
+}
+
+</style>
+<style lang="less">
+@import "@lambo-design/core/src/styles/default.less";
+.search-fast-con-side-modal {
+  .ivu-modal{
+    margin-left: 0px;
+    margin-top: 14px;
+    .ivu-modal-content{
+      width: 220px;
+      margin-top: -18px;
+      height: 270px;
+      .ivu-modal-body{
+        padding: 0px 16px 16px 16px;
+      }
+    }
+  }
+  &.large{
+    .ivu-modal {
+      margin-left : 0px;
+      margin-top  : 28px;
+    }
+  }
+  &.custom-tabs{
+    .ivu-modal {
+      margin-top  : 5px;
+    }
+  }
+}
+@keyframes scrollText {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(var(--scroll-distance, 0)); /* 调整滚动的距离 */
+  }
+}
+@keyframes ani-search-spin {
+  from { transform: rotate(0deg);}
+  50%  { transform: rotate(180deg);}
+  to   { transform: rotate(360deg);}
+}
+</style>