桌面添加交互(打开/最小化应用,显示桌面最小化已打开的应用,显示隐藏通知)

hanbaoshan

2020-07-23 0187673aed8ba72058ee74fbb7538cf040a43606

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

@@ -3,44 +3,52 @@
    <div class="center">
      <div class="tools-left">
        <div
          :class="['tools-icon', {clicked:this.$store.state.desktop.preferenceVisiable}]"
          :class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]"
          @click="togglePreference()"
        >
          <img class="system" :src="`${publicPath}images/header-icon/system.png`" />
          <!-- <span class="fa fa-apple"></span> -->
        </div>
        <div class="tools-icon" @click="openSafari()">
        <div class="tools-icon" >
          <!-- <span class="fa fa-safari"></span> -->
          <img class="smart-ai" :src="`${publicPath}images/header-icon/SmartAI.png`" alt="">
          <img class="smart-ai" :src="`${publicPath}images/header-icon/SmartAI.png`" alt />
        </div>
      </div>
      <div class="tools-middle"></div>
      <div class="tools-middle">
        <div
          v-for="dock in this.$store.state.desktop.minDocks"
          :key="dock.id"
          class="dock-item-wrap"
          
        >
          <a @click="dockClick(dock)">
            <img class="dock-item" :src="dock.src" :alt="dock.alt" />
          </a>
        </div>
      </div>
      <div class="tools-right">
        <div class="tools-icon">
          <!-- <span class="fa fa-battery-full"></span> -->
          <img :src="`${publicPath}images/header-icon/search.png`" alt="">
          <img :src="`${publicPath}images/header-icon/search.png`" alt />
        </div>
        <div class="tools-icon">
          <!-- <span class="fa fa-battery-full"></span> -->
          <img :src="`${publicPath}images/header-icon/help.png`" alt="">
          <img :src="`${publicPath}images/header-icon/help.png`" alt />
        </div>
        <div class="tools-icon" @click="notificationCenterClick()">
          <!-- <span class="fa fa-battery-full"></span> -->
          <img :src="`${publicPath}images/header-icon/notice.png`" alt />
        </div>
        <div class="tools-icon">
          <!-- <span class="fa fa-battery-full"></span> -->
          <img :src="`${publicPath}images/header-icon/notice.png`" alt="">
        </div>
        <div class="tools-icon">
          <!-- <span class="fa fa-battery-full"></span> -->
          <img :src="`${publicPath}images/header-icon/user.png`" alt="">
          <img :src="`${publicPath}images/header-icon/user.png`" alt />
        </div>
        <!-- <timer></timer> -->
        <div class="tools-icon tools-notification-center" @click="notificationCenterClick()">
        <!-- <div class="tools-icon tools-notification-center" @click="notificationCenterClick()">
          <span
            :class="['fa', {'fa-list-ul':notificationCenterNoMessage()}, {'fa-comment-o on-new-msg':!notificationCenterNoMessage()},{'fa-commenting-o':notificationCenterMessageFlicker()}]"
          ></span>
        </div>
        <div class="tools-icon tools-show-desktop">
          <span>&nbsp;</span>
        </div>
        </div> -->
      </div>
    </div>
  </div>
@@ -89,11 +97,33 @@
        !this.notificationCenterNoMessage()
      );
    },
    openSafari: function() {
      this.$store.commit("desktop/openSafari");

    togglePreference() {
      //this.$store.commit("desktop/togglePreference");
      //显示桌面,最小化已打开的应用
      debugger;
      this.$store.state.desktop.frames.forEach(frame=>{
        this.$store.commit('desktop/addMinDock', {
          id: frame.id,
          src: frame.icon,
          alt: frame.title,
          type: "3"
        });
      })
    },
    togglePreference: function() {
      this.$store.commit("desktop/togglePreference");
    dockClick(dock) {
      if (dock.type === "1") {
        window.open(dock.url);
      } else if (dock.type === "2") {
        this.$store.dispatch("desktop/addFrame", {
          id: dock.id,
          icon: dock.src,
          title: dock.name,
          url: dock.url
        });
      } else if (dock.type === "3") {
        this.$store.commit("desktop/resetMinFrame", dock.id);
      }
    }
  }
};
@@ -121,16 +151,49 @@
  height: 100%;
  float: left;
  margin-left: 8px;

}

.tools .tools-middle{
  float: left;
  position: relative;
}
.tools .tools-middle::before{
  width: 1px;
  height: 20px;
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
}
.tools .tools-middle .dock-item-wrap {
  display: inline-block;
  padding: 0 10px;
  height: 38px;
  line-height: 54px;
  margin-right: 1px;
  border-bottom: 2px solid transparent;
}
.tools .tools-middle .dock-item-wrap:hover,
.tools .tools-middle .dock-item-wrap.clicked{
  color: white;
  background-color: #98aabe;
  border-color: #40C3FF;
  cursor: pointer;
}
.dock-item-wrap a {
  height: 100%;
}
.dock-item-wrap img {
  width: auto;
  height: 70%;
}
.tools-icon {
  text-align: center;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  line-height: 56px;
  margin-right: 28px;
  padding: 0 15px;
}

.tools .tools-icon:hover,
@@ -143,11 +206,5 @@
.tools .tools-right {
  float: right;
  height: 100%;
}

.tools .tools-right .tools-show-desktop {
  border-left: grey 1px solid;
  width: 5px;
  margin-left: 3px;
}
</style>