yvan-window/src/component/Container/DesktopAppView/index.vue

<template>
  <div>
    <div>
      <!-- 主菜单界面 -->
      <div
        class="syno-sds-appview"
        :class="cls"
        style="width: 100%; height: 100%"
        :style="{ display: display }"
        @contextmenu.prevent=""
      >
        <div class="syno-sds-appview-container">
          <div class="search-field" style="width: 278px">
            <input
              type="text"
              size="16"
              placeholder="搜索"
              class="search-field-input"
              v-model="keyword"
              @click.stop="searchInputFocus"
              @input="searchAppView"
            />
            <button
              type="button"
              class="search-field-clear-btn"
              style="display: none"
            ></button>
          </div>
        </div>
        <div class="sds-shortcut-wrapper">
          <div class="shortcut-zone" style="width: 13%"></div>
          <div class="shortcut-zone right-zone" style="width: 13%"></div>
        </div>
        <div class="sds-app-panel">
          <div
            class="v-ps ps ps--active-y"
            v-if="desktopAppViewDetail.detailMessageList.length"
          >
            <div class="app-layout-wrapper" style="width: 74%; height: 100%">
              <div
                class="sds-desktop-layout search-layout"
                style="display: none"
              ></div>
              <div class="sds-desktop-layout">
                <li
                  class="launch-icon app-item-icon"
                  v-for="detailMessage in desktopAppViewDetail.detailMessageList"
                  :key="detailMessage.id"
                  @click.stop="clickAppViewItem(detailMessage.id)"
                  @contextmenu.prevent="
                    contextmenuAppViewItem(
                      $event,
                      detailMessage,
                      detailMessage.selectList
                    )
                  "
                >
                  <div
                    class="image"
                    :style="{
                      backgroundImage: `url(${detailMessage.titleImgUrl})`,
                    }"
                  >
                    <div
                      id="ext-gen50"
                      class="sds-application-notify-badge-num"
                      :class="detailMessage.unReadyMessageCls"
                      v-if="detailMessage.unReadyMessage.length"
                    ></div>
                  </div>
                  <div class="text">{{ detailMessage.title }}</div>
                </li>
              </div>
            </div>
          </div>
          <div class="sds-desktop-no-result" v-else>找不到符合的项目。</div>
        </div>
        <PortalTarget></PortalTarget>
      </div>
    </div>
    <AppViewItem
      :defaultZIndex="defaultZIndex"
      :detailMessageList="desktopAppViewDetail.detailMessageList"
    ></AppViewItem>
  </div>
</template>

<script>
import AppViewItem from "./AppViewItem";
import PortalTarget from "./PortalTarget";
export default {
  props: ["defaultZIndex", "appViewData"],
  data() {
    return {
      desktopAppViewDetail: {
        detailMessageList: [],
      },
      display: "none",
      keyword: "",
      cls: "",
      firstOpen: true,
    };
  },
  created() {
    this.desktopAppViewDetail.detailMessageList = this.appViewData;
  },
  mounted() {
    this.$bus.on("showAppView", this.showAppView);
  },
  methods: {
    // 显示appView页面
    showAppView() {
      this.display = "block";
      this.$bus.emit("hiddenOrShowOtherWindow", true);
      this.$bus.emit("hiddenPortalTarget");
      window.addEventListener("click", this.WindowClick);
      if (this.firstOpen) {
        this.desktopAppViewDetail.detailMessageList.forEach((item) => {
          if (item.unReadyMessage.length) {
            item.unReadyMessageCls = "bounce-effect";
          }
        });
        setTimeout(() => {
          this.desktopAppViewDetail.detailMessageList.forEach((item) => {
            if (item.unReadyMessageCls === "bounce-effect") {
              item.unReadyMessageCls = "";
            }
          });
        }, 800);
      }
      setTimeout(() => {
        this.cls = "syno-sds-appview-animate";
      }, 0);
      this.firstOpen = false;
    },
    // 搜索框聚焦
    searchInputFocus(e) {
      if (
        !e.srcElement.parentElement.className.includes(" search-field-focused")
      ) {
        e.srcElement.parentElement.className =
          e.srcElement.parentElement.className + " search-field-focused";
      }
    },
    // 输入关键字搜索
    searchAppView() {
      let appViewData = JSON.parse(JSON.stringify(this.appViewData));
      this.desktopAppViewDetail.detailMessageList = appViewData.filter(
        (item) => {
          return item.title.includes(this.keyword);
        }
      );
    },
    // 点击页面关闭本页面
    WindowClick() {
      let el = document.querySelector(".search-field-focused");
      if (el) {
        el.className = el.className.replace(" search-field-focused", "");
      }
      this.keyword = "";
      this.display = "none";
      this.cls = "";
      this.desktopAppViewDetail.detailMessageList = this.appViewData;
      this.$bus.emit("hiddenOrShowOtherWindow", false);
      window.removeEventListener("click", this.WindowClick);
      this.$bus.emit("showDialogWindow");
      this.$bus.emit("hiddenPortalTarget");
    },
    // 点击appViewItem
    clickAppViewItem(id) {
      this.$bus.emit("clickAppViewItem", id);
      this.WindowClick();
    },
    // 鼠标点击右键
    contextmenuAppViewItem(e, item, selectList) {
      e.preventDefault();
      console.log(e, item, selectList);
      let obj = { left: e.clientX, top: e.clientY, item, selectList };
      this.$bus.emit("showPortalTarget", obj);
    },
  },
  components: {
    AppViewItem,
    PortalTarget,
  },
  name: "DesktopAppView",
};
</script>

<style lang="css" scoped>
.sds-desktop-layout {
  display: grid;
  flex-direction: row;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 172px);
  overflow: -moz-scrollbars-none;
}
.app-layout-wrapper::-webkit-scrollbar {
  width: 0 !important;
}

.app-layout-wrapper {
  overflow: scroll;
}

.syno-sds-appview .sds-app-panel .sds-desktop-layout {
  justify-content: center;
}

.syno-sds-appview .sds-app-panel .sds-desktop-layout .app-item-icon {
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.search-field input::-webkit-input-placeholder {
  color: rgb(102 111 122);
}

.search-field input:-moz-placeholder {
  color: rgb(102 111 122);
}

.search-field input:-ms-input-placeholder {
  color: rgb(102 111 122);
}
</style>