应用入口操作相关交互更新

hanbaoshan

2020-08-04 f35be1c7fbfc3b121ac68e88629a500af0b1a782

应用入口操作相关交互更新

 src/pages/desktop/index/components/DFrame.vue

@@ -102,10 +102,10 @@
      this.fullScreen = !this.fullScreen;
    },
    frameClick: function () {
      debugger
      this.$store.commit('desktop/refreshFrame', this.data);
    },
    minFrame (data,e) {
      //e.stopPropagation()
      //找到当前的iframe
      let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(data.url) >= 0);
      //保存当前应用快照
@@ -124,8 +124,8 @@
          type: "3",
          screenshot: shotSrc
        });
      })

      });
      return false;
      //this.refreshDock();
    },
    refreshDock: function () {
@@ -237,6 +237,7 @@
  top: 0;
  right: 0;
  height: 30px;
  z-index: 2;
}

.d-frame-title-operation i {
@@ -246,7 +247,9 @@
  width: 46px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.d-frame-title-operation i:hover{
  background-color: #c7cacf;
}

 src/pages/desktop/index/components/Tools.vue

@@ -12,7 +12,7 @@
      </div>
    </div>
    <div class="tools-middle">
      <div v-for="dock in this.$store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap">
      <div v-for="dock in this.$store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap" :class="{'actived':dock.highlight}">
        <a @click="dockClick(dock)">
          <img class="dock-item" :src="dock.src" :alt="dock.alt" />
          <img class="dock-shot" :src="dock.screenshot" :alt="dock.name" />
@@ -44,7 +44,9 @@
    return {
      publicPath: process.env.BASE_URL,
      notificationCenterVisible: false,
      notificationCenterMessageCount: 0
      notificationCenterMessageCount: 0,
      maxOrder: 0,
      maxOrderOne: ''
    };
  },
  created() {
@@ -58,6 +60,22 @@
      }, 600)
    ];
  },
  // watch:{
  //   '$store.state.desktop.frames':{
  //     handler(n,o){
  //       if(n){
  //         debugger;
  //         n.forEach((item,index) => {
  //           if(item.order >= this.maxOrder){
  //             this.maxOrderOne = item.id;
  //           }
  //         });
  //       }
  //     },
  //     deep: true
  //   }
  // },
  
  methods: {
    notificationCenterClick: function () {
      this.notificationCenterVisible = !this.notificationCenterVisible;
@@ -102,6 +120,9 @@
        });
      } else if (dock.type === "3") {
        this.$store.commit("desktop/resetMinFrame", dock.id);
        //点击的iframe置顶并高亮
        debugger
        //this.$store.commit("desktop/refreshFrame", dock);
      }
    }
  }
@@ -153,10 +174,11 @@
  border-bottom: 2px solid transparent;
  position: relative;
}
.tools .tools-middle .dock-item-wrap:hover,
.tools .tools-middle .dock-item-wrap.clicked {
.tools .tools-middle .dock-item-wrap:hover{
  color: white;
  background-color: #98aabe;
}
.tools-middle .dock-item-wrap.actived{
  border-color: #40c3ff;
}
.dock-item-wrap a {

 src/pages/desktop/index/components/ToolsEntry.vue

@@ -40,6 +40,15 @@
          title: dock.name,

          url: dock.url

        });

        debugger

        this.$store.commit('desktop/addMinDock', {

          id: dock.id,

          src: dock.src,

          alt: dock.title,

          type: "3",

          highlight: true,

          isOpen: dock.isOpen

        });

      } else if (dock.type === '2' && dock.isOpen) {

        this.$store.commit('desktop/resetMinFrame', dock.id);

      }


 src/pages/desktop/index/store/modules/desktop.js

@@ -103,21 +103,24 @@
    return true;
  },
  addMinDock: (state, dock) => {
    debugger
    let ids = state.minDocks.map(item => item.id);
    if (ids.indexOf(dock.id) > -1) {
      //已经在mindock里
      let curFrame = state.frames.find(frame => frame.id == dock.id);
      curFrame.isShow = false;
      return;
    }
    state.frames.find(function (it) {
      if (it.id === dock.id) {
        it.isShow = false;
        return true;
      }
      return false;
    });
    // state.frames.find(function (it) {
    //   if (it.id === dock.id) {
    //     it.isShow = false;
    //     return true;
    //   }
    //   return false;
    // });
    debugger
    state.minDocks.push(dock);
    if (dock.id === 'safari') {
      state.safari.isShow = false;
    }
    
  },
  addMessageNotice: (state, msg) => {
    let ids = state.messageNotices.map(item => item.id);
@@ -163,18 +166,25 @@
    state.safari.isShow = true;
  },
  refreshFrame: (state, item) => {
    debugger
    state.frames.forEach(function (it) {
      debugger
      if (it.id === item.id) {
        it.order = 1;

        state.minDocks.forEach(min=>{
          if(min.id == it.id){
            debugger
            min.highlight = true;
          }else{
            min.highlight = false;
          }
        })
      } else {
        it.order = 0;
      }
    });
    if (item.id === 'safari') {
      state.safari.order = 1;
    } else {
      state.safari.order = 0;
    }
    
  },
  refreshTime: (state) => {
    state.currentDate = new Date();
@@ -187,16 +197,14 @@
      }
      return false;
    });
    state.minDocks.find(function (it, idx) {
      if (it.id === id) {
        state.minDocks.splice(idx, 1);
        return true;
      }
      return false;
    });
    if (id === 'safari') {
      state.safari.isShow = true;
    }
    // state.minDocks.find(function (it, idx) {
    //   if (it.id === id) {
    //     state.minDocks.splice(idx, 1);
    //     return true;
    //   }
    //   return false;
    // });
    
  },
  removeMessageById: (state, id) => {
    state.messageNotices.find(function (item, idx) {