@lambo-design/pro-layout 1.0.0-beta.193 → 1.0.0-beta.196

package/package.json

@@ -1,17 +1,17 @@
-{
-  "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.193",
-  "description": "",
-  "main": "index.js",
-  "author": "lambo",
-  "license": "ISC",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "devDependencies": {
-    "@lambo-design/core": "^4.7.1-beta.114",
-    "@lambo-design/shared": "^1.0.0-beta.101"
-  },
-  "scripts": {}
-}
+{
+  "name": "@lambo-design/pro-layout",
+  "version": "1.0.0-beta.196",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@lambo-design/core": "workspace:^",
+    "@lambo-design/shared": "workspace:^"
+  }
+}

package/src/components/search-fast.vue

@@ -325,7 +325,10 @@ export default {
 //  margin-top: -1000px;
 //}
 .search-fast-con-modal .ivu-modal{
-  margin-right: 100px;
+  width: 350px;
+  height: 200px;
+  margin-right: 800px;
+  margin-left: 500px;
 }
 .search-fast-con-side-modal .ivu-modal{
   padding-top: 1px;
@@ -339,7 +342,7 @@ export default {
   height: 270px;
 }
 .search-fast-con-modal .ivu-modal-content{
-  width: 290px;
+  width: 350px;
   height: 200px;
   margin-right: 1px;
 }
@@ -376,7 +379,7 @@ export default {
   border: none;
   background-color: var(--legend-color ,@legend-color);//修改这里
   text-align:left; /* 确保文本默认左对齐 */
-  color: var(--head-bg  ,@head-bg );
+  color: var(--avatar-color  ,@avatar-color );
   padding-right: 90px;
   padding-left: 50px;
 }
@@ -395,21 +398,41 @@ export default {
 .search-fast-con-side-modal .ivu-modal-body .modal1-content::-webkit-scrollbar {
   display: none;  /* Chrome, Safari 和 Opera */
 }
+
+
 .search-fast-con-modal .ivu-modal-body{
   height: 280px;
   padding: 16px;
   font-size: var(--font-size-base, 14px);
   line-height: 1.5;
-  margin-top: -2px;
+  margin-top: 55px;
   background-color: white;
+  overflow: hidden !important;
+  scrollbar-width: none !important;
 }
-search-fast-con-modal .ivu-modal-body .modal-content {
+.search-fast-con-modal .ivu-modal-body .modal-content {
   padding-top: 6px;
-  height: 270px;
-  width: 200px;
+  height: 200px;
+  width: 350px;
+  margin-right: 400px;
   overflow-x: hidden;
   overflow-y: auto;
   background-color: white;
+  -ms-overflow-style: none !important;  /* Internet Explorer 10+ */
+  scrollbar-width: none !important;  /* Firefox */
+}
+.search-fast-con-modal .ivu-modal-body ::-webkit-scrollbar {
+  display: none !important;  /* Chrome, Safari 和 Opera */
+}
+
+.v-transfer-dom ::-webkit-scrollbar {
+  display: none;  /* Chrome, Safari 和 Opera */
+  overflow: hidden !important;
+}
+.v-transfer-dom{
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  scrollbar-width: none;  /* Firefox */
+  overflow: hidden !important;
 }
 
 
@@ -428,7 +451,7 @@ search-fast-con-side-modal .ivu-modal-body{
 .search-fast-con-side .ivu-icon-ios-search:before {
   margin-right: -50px; /* 向右移动10像素 */
   //color: rgba(42, 97 ,200);
-  color: var(--head-bg  ,@head-bg );
+  color: var(--avatar-color  ,@avatar-color );
   line-height: 1.6
 }
 .search-fast-con-top .ivu-icon-ios-search-outline:before {
@@ -447,7 +470,7 @@ search-fast-con-side-modal .ivu-modal-body{
   font-family: Microsoft YaHei;
   font-weight: 400;
   // color: rgba(42, 97 ,200)!important;
-  color: var(--head-bg  ,@head-bg ) !important;;
+  color: var(--avatar-color  ,@avatar-color ) !important;;
 
 }
 .search-fast-con-top .ivu-input {

package/src/components/search-menu.vue

@@ -0,0 +1,477 @@
+<template>
+  <div class="search-fast-con">
+    <div class="search-fast-con-top" >
+        <div class="topInput"  id="modalTopInput"  @click="handleTopClick">
+          <Input   v-if="searchType === 1"  v-model="searchTopText"   clearable placeholder="搜索菜单" font-size="8px"  ref="topInput"
+                  :border="false"  @on-change="handleTopInput" @on-blur="handleTopBlur">
+            <template #prefix>
+              <Icon type="ios-search" size="23"/>
+            </template>
+          </Input>
+        </div>
+      <Modal
+        v-model="searchTopModal"  class="search-fast-con-modal" footer-hide :closable="false" :mask="false" scrollable id="TopModalId"
+        :styles="{top: '55px',width: '350px'}">
+        <div class="sideCloseIcon" @click="handleCloseTopModal" style="text-align: right;margin-right: -6px;margin-top: -2px;padding-bottom: 3px">
+          <Icon type="ios-close-circle" size="18" />
+        </div>
+        <div class="modal-block1">
+          <div class="modal-title">
+            <Icon type="ios-apps-outline" size="19" color="red"/>
+            <span style="margin-left: 3px;font-size: 18px">菜单</span>
+          </div>
+          <div v-if="spinShowTop1">
+            <Spin size="large"  v-if="spinShowTop1" :show="spinShowTop1">
+              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
+              <div>加载中</div>
+            </Spin>
+          </div>
+          <div v-else class="modal-content">
+            <div v-for="(item,index) in menuData1" :key="index" >
+              <div class="menu-side-style1" @click="handleSelect1(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" />
+                  <span style="margin-left: 3px">{{ item.label }}</span>
+                </div>
+              </div>
+            </div>
+            <div v-if="menuData1.length === 0">
+              <span style="display: flex;justify-content: center;align-items: center;color: black">暂无数据</span>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  </div>
+</template>
+<script>
+
+import SearchMenu from "./search-list";
+import SearchList from "./search-list";
+import Bus from "@lambo-design/shared/utils/bus";
+import {deepCopy} from "@lambo-design/shared/utils/assist";
+import config from "@lambo-design/shared/config/config";
+import { mapActions } from 'vuex'
+import { debounce } from 'lodash';
+//import {getSessionStorage} from '@/libs/platformUtil';
+export default {
+  name: "Searchmenu",
+  components: {SearchList, SearchMenu},
+  props: {
+    searchType: '',
+    menuList: {
+      type: Array,
+      default: () => []
+    },
+  },
+  data () {
+    return {
+      searchText:'',
+      appId:'',
+      searchTopText:'',
+      showTopInput:false,
+      option: [],
+      menuData:[],
+      menuData1:[],
+      noticeData:[],
+      isHovered: [],
+      select:'',
+      searchTopModal:false,
+      searchSideModal:false,
+      showSearchIcon:true,
+      maxWidth: 190,
+      spinShow:false,
+      spinShowTop1:false,
+      spinShowTop2:false,
+      originMenuList: [],
+      originMenuList1: []
+    }
+  },
+  // mounted() {
+  //   window.addEventListener("click", this.handleOutsideClick);
+  // },
+  // beforeDestroy() {
+  //   window.removeEventListener("click", this.handleOutsideClick);
+  // },
+  methods:{
+    initListener(){
+      // Bus.$on('menu-list',(data)=>{
+        this.initMenu(this.menuList)
+      // });
+    },
+    destroyListener(){
+      Bus.$off('menu-list')
+    },
+    initMenu(data){
+      this.originMenuList = deepCopy(data);
+      this.originMenuList1 = this.originMenuList.filter(function(menuItem) {
+        return menuItem.type === 1|| menuItem.type === 2 && menuItem.uri !=='';
+      });
+      this.menuData1=this.originMenuList1;
+    },
+
+    handleSelect(item){
+      console.log('search-handleSelect',item.name)
+      console.log('search-handleSelect',item.uri)
+      console.log('search-handleSelect',item.pid)
+      this.$emit('on-select', item.name,item.uri,item.pid)
+      this.searchSideModal = false
+    },
+    handleSelect1(item){
+      this.$emit('on-select', item.name,item.uri,item.pid)
+      this.searchTopModal = false
+      this.showTopInput = false
+      this.showSearchIcon = true
+    },
+    handleNoticeSelect(e,f){
+      let self = this
+      self.$router.replace({
+        name: '消息通知预览',
+        query: {noticeId: e, confirmed: f,homeFlag:true}
+      })
+      self.searchTopModal = false
+    },
+
+    handleTopInput() {
+      let self = this;
+      self.searchTopModal = true
+      // 使用 filter 方法找到所有匹配的菜单项
+      const regex = new RegExp(this.searchTopText, "i");
+      self.menuData1 = self.originMenuList1.filter(menuItem => {
+        return menuItem.label.match(regex);
+      });
+      //console.log('menuData:', self.menuData);
+    },
+    handleSideClick(){
+      let self= this
+      // console.log('searchText:'+self.searchText)
+      if(self.searchText){
+        self.searchSideModal = true
+      }
+      self.handleInput()
+      //self.handleSelect(self.menuData[0])
+    },
+    handleIconClick(){
+      let self = this
+      self.showTopInput = true
+      self.showSearchIcon = false
+      self.searchTopModal = false
+    },
+    handleTopClick(){
+      let self= this
+      if(self.searchTopText){
+        self.searchTopModal = true
+      }
+      self.handleTopInput()
+      self.showTopInput=true
+      //self.handleSelect(self.menuData[0])
+    },
+    handleTopBlur(){
+      let self = this
+      self.searchTopModal = false
+      self.showTopInput = true;
+      self.showSearchIcon = true
+
+    },
+    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`,
+        }
+      }
+    },
+    handleCloseModal(){
+      let self = this
+      this.searchSideModal = false
+    },
+    handleCloseTopModal(){
+      let self = this
+      this.searchTopModal = false
+    }
+  },
+  created(){
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+  }
+}
+</script>
+
+<style lang="less" >
+@import "@lambo-design/shared/config/themes/blue/blue.less";
+@import "@lambo-design/shared/config/themes/default/default.less";
+@import "@lambo-design/shared/config/themes/gold/gold.less";
+@import "@lambo-design/shared/config/themes/atrovirens/atrovirens.less";
+@import "@lambo-design/shared/config/themes/eap/eap.less";
+@import "@lambo-design/shared/config/themes/lime/lime.less";
+@import "@lambo-design/shared/config/themes/orange/orange.less";
+@import "@lambo-design/shared/config/themes/red/red.less";
+.search-fast-con-top .ivu-tooltip-rel {
+  float: left;
+  height: 64px;
+  line-height: 56px;
+  margin-top: 3px;
+  margin-right: -1000px;
+  i {
+    cursor: pointer;
+  }
+}
+.ivu-tooltip-popper[x-placement^="bottom"]{
+  margin-top: -1000px;
+}
+.search-fast-con-modal .ivu-modal{
+  margin-right: 500px;
+}
+.search-fast-con-side-modal .ivu-modal{
+  padding-top: 1px;
+  margin-left: 0px;
+  margin-top: 1px;
+}
+.search-fast-con-side-modal .ivu-modal-content{
+  background-color: var(--menu-dark-active-bg  ,@menu-dark-active-bg );
+  width: 218px;
+  margin-top: -18px;
+  height: 270px;
+}
+.search-fast-con-modal .ivu-modal-content{
+  width: 290px;
+  height: 200px;
+  margin-right: 1px;
+}
+
+.modal-title{
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #333333;
+  font-size: 17px;
+}
+//.line{
+//  border-top: 1px solid lightgray;
+//  margin:10px
+//}
+.more-content{
+  margin-left: 140px;
+  margin-top: 15px;
+  a{font-size:14px;color:#999;font-family: Microsoft YaHei-Regular, Microsoft YaHei;}
+}
+.search-fast-con-side{
+  width: 97%;
+  position: absolute;
+  top: 0px;
+  z-index: 2000;
+  //background: #22262f;
+}
+.search-fast-con-side .ivu-input{
+  font-size: 13px;
+  margin-top: -4px;
+  width: 228.5px;
+  height: 40px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  border: none;
+  background-color: var(--legend-color ,@legend-color);//修改这里
+  text-align:left; /* 确保文本默认左对齐 */
+  color: var(--head-bg  ,@head-bg );
+  padding-right: 90px;
+  padding-left: 50px;
+}
+.search-fast-con-side-modal .ivu-modal-body .modal1-content {
+  padding-top: 6px;
+  padding-left: 10px;
+  height: 270px;
+  width: 211px;
+  margin-left: -13px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color:  var(--menu-dark-active-bg  ,@menu-dark-active-bg );
+}
+.search-fast-con-modal .ivu-modal-body{
+  height: 280px;
+  padding: 16px;
+  font-size: var(--font-size-base, 14px);
+  line-height: 1.5;
+  margin-top: -2px;
+  background-color: white;
+}
+search-fast-con-modal .ivu-modal-body .modal-content {
+  padding-top: 6px;
+  height: 270px;
+  width: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: white;
+}
+
+
+search-fast-con-side-modal .ivu-modal-body{
+  height: 250px;
+  padding: 16px;
+  font-size: var(--font-size-base, 14px);
+  line-height: 1.5;
+  margin-top: -2px;
+  //background-color: white;
+
+}
+.search-fast-con-side .ivu-icon-ios-search:before {
+  margin-right: -33px; /* 向右移动10像素 */
+  //color: rgba(42, 97 ,200);
+  color: var(--head-bg  ,@head-bg );
+  line-height: 1.6
+}
+.search-fast-con-top .ivu-icon-ios-search-outline:before {
+  //margin-right: -1000px;
+  color: rgba(255, 255, 255,0.7);
+  position: fixed; /* 使用fixed定位 */
+  right: 180px; /* 设置距离浏览器窗口右侧边缘的距离 */
+  margin-right: 0;
+  top:15px;
+}
+.search-fast-con-top .ivu-icon-ios-search:before {
+  color: rgba(255, 255, 255,0.7);
+}
+.search-fast-con-side .ivu-input::placeholder{
+  font-size: 13px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  // color: rgba(42, 97 ,200)!important;
+  color: var(--head-bg  ,@head-bg ) !important;;
+
+}
+.search-fast-con-top .ivu-input {
+  font-size: 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: rgba(255, 255, 255,0.7);
+  border: none;
+  background-color: transparent;
+}
+.search-fast-con-top .ivu-input::placeholder{
+  font-size: 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: rgba(255, 255, 255,0.7)!important;
+}
+//.modal1-content {
+//  overflow-x: hidden;
+//  overflow-y: auto;
+//  height: 270px;
+//}
+.modal-content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 210px;
+  background-color: white;
+  width: 273px;
+}
+.menu-side-style{
+  font-size: 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  width: 200px;
+  color:#EBEBEB;
+  margin-top: 8px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.menu-side-style1{
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  width: 200px;
+  color:black;
+  margin-top: 10px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.menu-side-style:hover {
+  overflow: visible;
+  cursor: pointer;
+  color: red;
+}
+.menu-side-style1:hover {
+  overflow: visible;
+  cursor: pointer;
+  color: red;
+}
+.sideInput{
+  width: 221px;
+  transform: translateX(-13px);
+}
+.topInput{
+  float: right;
+  position: relative;
+  z-index: 1000;
+  width: 1000px;
+  margin-top: 80px;
+  margin-left: 4000px;
+  margin-bottom: 30px;
+}
+.slide-enter-active,
+.slide-leave-active{
+  transition: transform 0.5s;
+}
+.slide-enter{
+  transform: translateX(100%);
+}
+.slide-leave-to{
+  transform: translateX(175px);
+}
+.text {
+  display: inline-block;
+}
+.text.scrolling {
+  animation: scrollText linear infinite;
+  animation-duration: 2s; /* 调整滚动速度和持续时间 */
+}
+
+@keyframes scrollText {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(var(--scroll-distance, 0)); /* 调整滚动的距离 */
+  }
+}
+
+.menu-side-style:hover .text {
+  animation-play-state: running;
+}
+.demo-spin-icon-load{
+  animation: ani-demo-spin 1s linear infinite;
+}
+@keyframes ani-demo-spin {
+  from { transform: rotate(0deg);}
+  50%  { transform: rotate(180deg);}
+  to   { transform: rotate(360deg);}
+}
+</style>