vite-zmusic/src/App.vue

<script setup>
import { h, ref, onMounted, onUnmounted } 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 pubsub from "pubsub-js";
import { NConfigProvider, darkTheme } from "naive-ui";
// 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.commit("loadCaches");

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

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

<template>
  <n-config-provider
    theme
    :theme-overrides="store.state.theme.themeOverrides"
  >
    <div id="wp">
      <!-- <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 />
        </div>
      </div>
      <div id="footer">
        <div id="songDetail"></div>
        <div id="songProgress">
          <SongProgress/>
        </div>
        <div id="songCtrl">
          <SongInfo />
          <SongCtrl />
          <SongStatus />
        </div>
      </div>
    </div>
  </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;
    }
  }
  #footer {
    display: flex;
    flex-direction: column;
    #songDetail{

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