vite-zmusic/src/App.vue

<script setup>
import { h, ref, onMounted, onUnmounted, toRaw, watch } from "vue";
import { useStore } from "vuex";
import styled from "vue3-styled-components";
import Nav from "@/views/common/Nav.vue";
import TopMenu from "./views/common/TopMenu.vue";
import Search from "./views/common/Search.vue";
import Settings from "./views/common/Settings.vue";
import MainMenu from "./views/common/MainMenu.vue";
import SongInfo from "./views/common/SongInfo.vue";
import SongCtrl from "./views/common/SongCtrl.vue";
import SongStatus from "./views/common/SongStatus.vue";
import SongProgress from "@/views/common/SongProgress.vue";
import PlayingList from "@/views/common/PlayingList.vue";
import ZPlayingList from "@/views/common/ZPlayingList.vue";
import SongDetail from "@/views/common/SongDetail.vue";
import pubsub from "pubsub-js";
import {
  NConfigProvider,
  darkTheme,
  NMessageProvider,
} from "naive-ui";
import router from "./router";
// import { CloudCircleSharp } from "@vicons/ionicons5";

const store = useStore();

/**
 * @type import('naive-ui').GlobalThemeOverrides
 */
// const themeOverrides = {
//   common: {
//     primaryColor: "#5C18A0FF",
//     primaryColorHover: "#7536ADFF",
//     primaryColorPressed: "#690D7EFF",
//     primaryColorSuppl: "#511D77FF",
//     textColorBase: "#1F1F1FFF",
//   },
// };

//载入localstorage的设置
store.commit("loadSettings");
store.state.settings.playing = false; //默认停止播放
store.commit("loadCaches");

// router.replace('/discover/recommend')

const showPlaying = ref(false); //是否显示播放列表
const showSongDetail = ref(false); //是否显示歌曲详细信息

watch(
  ()=> store.state.showSongDetail,
  ()=>{
    showSongDetail.value = toRaw(store.state.showSongDetail)
  },
  {
    immediate: true,
  }
)

//处理route消息
const routeToken = pubsub.subscribe("router", (msg, data) => {
  switch (msg) {
    case "router.beforeEach":
    case "router.afterEach":
      store.commit("saveSettings", {
        currentRoute: data.to.fullPath,
      });
      break;
  }
});

const token = pubsub.subscribe("zp", (msg, data) => {
  switch (msg) {
    case "zp.togglePlaying":
      showPlaying.value = !showPlaying.value;
      break;
    case "zp.toggleSongDetail":
      showSongDetail.value = store.state.showSongDetail = !showSongDetail.value;
      break;
  }
});

//卸载组件
onUnmounted(() => {
  pubsub.unsubscribe(routeToken);
  pubsub.unsubscribe(token);
});


const wpEl = ref('')
const hideWins = (e) => {
  // console.log(e.clientX > 0,e, wpEl.value.clientWidth);
  if (showPlaying.value 
    && e.clientX > 0
    && e.clientX < wpEl.value.clientWidth - 500
    && e.clientY > 40
    && e.clientY < wpEl.value.clientHeight - 64
  ) {
    showPlaying.value = false;
  }
};
</script>

<template>
  <n-config-provider
    :theme-overrides="store.state.theme.themeOverrides"
  >
    <n-message-provider>
      <div id="wp" ref="wpEl" @click="hideWins">
        <!-- <NThemeEditor/> -->
        <div id="top">
          <Nav></Nav>
          <TopMenu></TopMenu>
          <Search></Search>
          <Settings></Settings>
        </div>
        <div id="content">
          <div id="side">
            <!-- <Personal></Personal> -->
            <MainMenu></MainMenu>
          </div>
          <div id="main">
            <router-view v-slot="{ Component, route }">
              <keep-alive exclude="FM,Friends">
                <component :is="Component" />
              </keep-alive>
            </router-view>
            <!-- <router-view v-slot="{ Component, route }">
            <keep-alive v-if="route.meta.keepAlive">
              <component :is="Component" />
            </keep-alive>
            <component :is="Component" v-else />
          </router-view> -->
            <!-- <router-view>
          </router-view> -->
          </div>
        </div>
        <div id="wpSongDetail" v-show="showSongDetail">
          <SongDetail/>
        </div>
        <div id="wpPlayingList" v-show="showPlaying">
          <div id="playingList">
            <ZPlayingList />
          </div>
        </div>
        <div id="footer">
          <div id="songDetail"></div>
          <div id="songProgress">
            <SongProgress />
          </div>
          <div id="songCtrl">
            <SongInfo />
            <SongCtrl />
            <SongStatus />
          </div>
        </div>
      </div>
    </n-message-provider>
  </n-config-provider>
</template>

<style lang="less">
@import "@/assets/css/common.less";
body {
  // margin: 0;
  // padding: 0;
  font-size: 15px;
  color: #333;
  // line-height: 1.3;
  overflow-y: hidden;

  img {
    display: block;
  }
}
* {
  box-sizing: border-box;
}

.top-menu {
  margin-top: -44px;
  position: absolute;

  .zm-top-menu.n-menu.n-menu--horizontal .n-menu-item-content {
    padding: 0 12px;
  }
}
.main-content {
  position: absolute;
  top: 40px;
  left: 160px;
  right: 0;
  bottom: 64px;
  overflow-y: auto;

  padding-right: 2px;

  .lmt-width {
    margin: 0 auto;
    padding: 8px 6px 8px 8px;
    max-width: 800px;
  }
}
</style>
<style lang="less" scoped>
#wp {
  display: flex;
  flex-direction: column;
  height: 100vh;
  #top {
    height: 40px;
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
  }
  #content {
    flex: 1;
    display: flex;

    #side {
      width: 160px;
      background-color: #f6f6f6;
    }
    #main {
      flex: 1;
      padding: 6px;
    }
  }
  #wpSongDetail {
    z-index: 100;
  }
  #wpPlayingList {
    // position: absolute;
    // left: 0;
    // top: 0;
    // right: 0;
    // bottom: 0;

    #playingList {
      position: absolute;
      top: 40px;
      right: 0;
      bottom: 64px;
      // left: 0;
      width: 500px;
      background-color: #fff;
      z-index: 1000;
      border: #ddd solid 1px;
      // border-top-left-radius: 8px;
      // border-bottom-left-radius: 8px;
    }
  }

  #footer {
    display: flex;
    flex-direction: column;
    #songDetail {
    }
    #songProgress {
      height: 3px;
      // background-color: red;
      z-index: 2000;
    }
    #songCtrl {
      height: 64px;
      display: flex;
      align-items: center;
      background-color: #f9f9f9;
    }
  }
}
</style>