@lambo-design/pro-layout 1.0.0-beta.279 → 1.0.0-beta.280

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.279",
+  "version": "1.0.0-beta.280",
   "description": "",
   "main": "index.js",
   "author": "lambo",

package/src/components/pro-layout-tools-quick-icons.vue

@@ -1,270 +1,58 @@
 <template>
   <Row class="pro-layout-tools-quick-icons">
-    <Col class="font-padding">
-      <Tooltip content="搜索菜单" placement="bottom">
-        <Icon v-show="showSearchIcon" @click="handleIconClick" type="ios-search-outline" size="16" style="cursor: pointer" id="searchIcon"/>
-      </Tooltip>
-      <transition name="slide">
-        <div class="topInput" id="modalTopInput"  v-show="showTopInput" @click="handleTopInput">
-          <Input v-model="searchTopText" clearable placeholder="搜索菜单" ref="topInput"
-                 :border="false" style="width: 200px;" @on-clear="handleTopInput"
-                 @on-change="handleTopInput" @on-blur="handleTopBlur">
-            <template #prefix>
-              <Icon type="ios-search" size="23"/>
-            </template>
-          </Input>
-        </div>
-      </transition>
-    </Col>
     <Col v-for="(item,index) in rightTopOptButtonList" :key="index" class="font-padding">
-      <Tooltip v-if="item === 'collect' && currentItem &&currentItem.type == 2" content="收藏" placement="bottom">
-        <Icon @click="collectEvent" :type=" isCollected ? 'ios-star' : 'ios-star-outline'" size="16" style="cursor: pointer"/>
-      </Tooltip>
-      <Tooltip v-if="item === 'fullScreen'" :content="isFullScreen ? '退出全屏' : '全屏'" placement="bottom">
-        <Icon  @click="handleFullScreen" :type="isFullScreen ? 'md-contract' : 'md-expand'" size="16" style="cursor: pointer"/>
-      </Tooltip>
-    </Col>
-    <Col>
-      <Modal v-model="searchTopModal"  class="quick-search-fast-con-modal" footer-hide :closable="false" :mask="false" id="topModalId"
-             :styles="{top: '55px',width: '420px',float:'right'}">
-        <div v-if="spinShowTop">
-          <Spin size="large"  v-if="spinShowTop" :show="spinShowTop">
-            <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 menuData" :key="index">
-            <div class="menu-style" @click="handleMenuClick(item)">
-              <Icon :type="item.icon"/>
-              <span class="label-style">{{ item.label }}</span>
-            </div>
-          </div>
-          <div v-if="menuData.length === 0">
-            <span class="no-result">暂无数据</span>
-          </div>
-        </div>
-      </Modal>
+      <ProLayoutToolsQuickSearch v-show="item === 'search'"></ProLayoutToolsQuickSearch>
+      <ProLayoutToolsQuickCollect v-show="item === 'collect'"></ProLayoutToolsQuickCollect>
+      <ProLayoutToolsQuickFullscreen v-show="item === 'fullScreen'"></ProLayoutToolsQuickFullscreen>
+      <ProLayoutToolsQuickTodo v-show="item === 'todo'"></ProLayoutToolsQuickTodo>
+      <ProLayoutToolsQuickNotice v-show="item === 'notice'"></ProLayoutToolsQuickNotice>
     </Col>
   </Row>
 </template>
 
 <script>
 import Bus from '@lambo-design/shared/utils/bus'
-import { deepCopy } from '@lambo-design/shared/utils/assist'
+import ProLayoutToolsQuickSearch from './pro-layout-tools-quick-search';
+import ProLayoutToolsQuickCollect from './pro-layout-tools-quick-collect';
+import ProLayoutToolsQuickFullscreen from './pro-layout-tools-quick-fullscreen';
+import ProLayoutToolsQuickTodo from './pro-layout-tools-quick-todo';
+import ProLayoutToolsQuickNotice from './pro-layout-tools-quick-notice';
+import {deepCopy} from "@lambo-design/shared/utils/assist";
 
 export default {
   name: 'pro-layout-tools-quick-icons',
   data() {
     return {
-      originAllMenuList:[],
-      menuList: [],
-      currentName: '',
-      currentItem: {},
-      collectMenuList: [],
-      isFullScreen:false,
-      isCollected:false,
-      rightTopOptButtonList: ['collect','fullScreen','search'],
-      showSearchIcon:true,
-      searchTopModal:false,
-      searchTopText:'',
-      showTopInput:false,
-      spinShowTop:false,
-      menuData:[]
+      rightTopOptButtonList: ['search','collect','fullScreen']
     }
   },
-  watch: {
-    collectMenuList(){
-      this.changeCollectMenu();
-    },
-    currentName(){
-      this.changeCollectMenu();
-    }
+  components:{
+    ProLayoutToolsQuickSearch,
+    ProLayoutToolsQuickCollect,
+    ProLayoutToolsQuickFullscreen,
+    ProLayoutToolsQuickTodo,
+    ProLayoutToolsQuickNotice
   },
   methods: {
     initListener() {
       Bus.$on('system-info',(data) => {
         this.initSystemInfo(data);
       })
-      Bus.$on('origin-all-menu-list', (data) => {
-        this.initOriginAllMenu(data);
-      })
-      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('system-info')
-      Bus.$off('origin-all-menu-list')
-      Bus.$off('menu-list')
-      Bus.$off('menu-click')
-      Bus.$off('collect-menu-list')
     },
     initSystemInfo(data){
       if (data && data.rightTopOptButtonList) {
         this.rightTopOptButtonList = deepCopy(data.rightTopOptButtonList)
       }
     },
-    initOriginAllMenu(data){
-      this.originAllMenuList = deepCopy(data);
-    },
-    initMenu(data){
-      this.menuList = deepCopy(data);
-      this.menuData = this.menuList.filter(menuItem => {
-        return menuItem.type === 2;
-      });
-    },
-    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)
-    },
-    handleKeyPress(event){
-      // 按下 F11 键时触发全屏切换
-      if (event.key === 'F11') {
-        event.preventDefault(); // 防止浏览器默认行为
-        this.handleFullScreen();
-      }
-    },
-    // 全屏事件
-    handleFullScreen() {
-      let element = document.documentElement;
-      // 如果是全屏，退出
-      if (this.isFullScreen) {
-        this.isFullScreen = !this.isFullScreen
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-      } else {    // 否则，进入全屏
-        this.isFullScreen = !this.isFullScreen
-        if (element.requestFullscreen) {
-          element.requestFullscreen();
-        } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen();
-        } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen();
-        } else if (element.msRequestFullscreen) {
-          // IE11
-          element.msRequestFullscreen();
-        }
-      }
-      // 改变当前全屏状态
-      // this.isFullScreen = !this.isFullScreen;
-    },
-    //判断浏览器是否处于全屏状态
-    checkFull() {
-      let isFull = document.mozFullScreen ||
-          document.fullScreen ||
-          document.webkitIsFullScreen ||
-          document.webkitRequestFullScreen ||
-          document.mozRequestFullScreen ||
-          document.msFullscreenEnabled;
-      if (isFull === undefined) isFull = false;
-      return isFull;
-    },
-
-    handleSelect(name,item){
-      Bus.$emit('select-menu',name,item)
-      this.searchTopModal = false
-    },
-    handleTopInput(){
-      this.searchTopModal = true
-      this.spinShowTop = true
-      // 使用 filter 方法找到所有匹配的菜单项
-      const regex = new RegExp(this.searchTopText, "i");
-      this.menuData = this.menuList.filter(menuItem => {
-        return menuItem.label.match(regex) && menuItem.type === 2;
-      });
-      this.spinShowTop = false
-    },
-    handleTopBlur(){
-      this.searchTopModal = false
-      this.showTopInput = false
-      this.showSearchIcon = true
-    },
-    handleIconClick(){
-      this.showTopInput = true
-      this.showSearchIcon = false
-      this.searchTopModal = true
-    },
-    handleOutsideClick(event) {
-      if(document.getElementById("topModalId") && !document.getElementById("topModalId").contains(event.target)
-          && document.getElementById("modalTopInput") && !document.getElementById("modalTopInput").contains(event.target)
-          && document.getElementById("searchIcon") && !document.getElementById("searchIcon").contains(event.target)){
-        let clearButton = event.target.closest(".ivu-icon-ios-close-circle");
-        if(clearButton){
-          this.searchTopModal = true;
-          this.showTopInput = true;
-          this.showSearchIcon = false;
-        } else {
-          setTimeout(() => {
-            this.searchTopModal = false;
-            this.showTopInput = false;
-            this.showSearchIcon = true
-          }, 525);
-        }
-      }
-    },
-    handleMenuClick(item){
-      Bus.$emit('select-menu',item.name,item)
-    }
   },
   created() {
     this.initListener()
   },
-  mounted() {
-    let self = this
-    document.addEventListener('keydown', this.handleKeyPress);
-    //由于 全屏状态下 ，按 "Esc" 键退出全屏，浏览器监听不到 "Esc" 键的事件，所以需要通过浏览器窗口大小改变的事件去触发退出全屏事件
-    window.addEventListener("resize", function () {
-      //增加 timer 定时器的原因是全屏和退出全屏的事件会触发两次窗口大小改变事件，做一次过滤
-      if (self.timer) return;
-      self.timer = setTimeout(() => {
-        // 如果是按 "Esc" 键退出全屏，窗口状态已经是非全屏，但是之前记录的状态还是全屏的状态
-        if (!self.checkFull() && self.isFullScreen) {
-          //退出全屏状态。。。
-          self.isFullScreen = false;
-          // self.pageExitFullScreen();
-        }else{
-
-          //进入全屏状态。。。
-        }
-        clearTimeout(self.timer);
-        self.timer = null;
-      }, 0);
-    });
-    window.addEventListener("click", this.handleOutsideClick);
-  },
   beforeDestroy() {
     this.destroyListener()
-    document.removeEventListener('keydown', this.handleKeyPress);
-    window.removeEventListener("click", this.handleOutsideClick);
   }
 }
 </script>
@@ -274,45 +62,5 @@ export default {
   .font-padding {
     padding-right: 10px
   }
-  .topInput{
-    float: right;
-    position: relative;
-    z-index: 1000;
-    margin-top: 0px;
-    margin-left: 10px;
-  }
-  .slide-enter-active,
-  .slide-leave-active{
-    transition: transform 0.5s;
-  }
-  .slide-enter{
-    transform: translateX(100%);
-  }
-  .slide-leave-to{
-    transform: translateX(175px);
-  }
-}
-</style>
-<style lang="less">
-@import '@lambo-design/core/src/styles/default.less';
-.quick-search-fast-con-modal {
-  .modal-content {
-    .menu-style {
-      margin    : 5px;
-      font-size : 16px;
-      display   : inline-block;
-      cursor    : pointer;
-      &:hover{
-        color: var(--primary-color,@_primary-color);
-      }
-    }
-    .label-style {
-      height      : 13px;
-      font-size   : 14px;
-      font-weight : 500;
-      margin-left : 5px;
-      line-height : 18px;
-    }
-  }
 }
 </style>