初始化

src/App.vue

@@ -0,0 +1,180 @@
+<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");
+
+//处理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;
+
+  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 12px 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>