feat: 支持关闭侧边栏

imsyy · Dec 11, 2023 · 750d570 · 750d570
1 parent b811b00
commit 750d570
Show file tree

Hide file tree

Showing 16 changed files with 295 additions and 96 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -22,6 +22,7 @@ declare module 'vue' {
     Lyric: typeof import('./src/components/Player/Lyric.vue')['default']
     MainControl: typeof import('./src/components/Player/MainControl.vue')['default']
     MainCover: typeof import('./src/components/Cover/MainCover.vue')['default']
+    MainLayout: typeof import('./src/components/Global/MainLayout.vue')['default']
     MainNav: typeof import('./src/components/Nav/MainNav.vue')['default']
     Menu: typeof import('./src/components/Global/Menu.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
@@ -53,6 +54,7 @@ declare module 'vue' {
     NInput: typeof import('naive-ui')['NInput']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
+    NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NList: typeof import('naive-ui')['NList']

diff --git a/src/App.vue b/src/App.vue
@@ -5,62 +5,59 @@
       <!-- 导航栏 -->
       <n-layout-header bordered>
         <MainNav />
-        <TitleBar v-if="checkPlatform.electron()" />
       </n-layout-header>
-      <!-- 主内容 -->
+      <!-- 主内容 - 有侧边栏 -->
       <n-layout
+        v-if="showSider"
         :class="{
           'body-layout': true,
-          'player-bar': Object.keys(music.playSongData)?.length && status.showPlayBar,
+          'player-bar': Object.keys(music.getPlaySongData)?.length && showPlayBar,
         }"
         position="absolute"
         has-sider
       >
         <!-- 侧边栏 -->
         <n-layout-sider
-          class="main-sider"
-          :collapsed="status.asideMenuCollapsed"
+          :collapsed="asideMenuCollapsed"
           :native-scrollbar="false"
           :collapsed-width="64"
           :width="240"
+          class="main-sider"
           show-trigger="bar"
           collapse-mode="width"
           bordered
-          @collapse="status.asideMenuCollapsed = true"
-          @expand="status.asideMenuCollapsed = false"
+          @collapse="asideMenuCollapsed = true"
+          @expand="asideMenuCollapsed = false"
         >
           <div class="sider-all">
             <Menu />
           </div>
         </n-layout-sider>
         <!-- 页面区 -->
         <n-layout :native-scrollbar="false" embedded>
-          <main id="main-layout" class="main-layout">
-            {{ music.getplaySongData }}
-            <!-- 回顶 -->
-            <n-back-top bottom="110">
-              <n-icon size="26">
-                <SvgIcon icon="chevron-up" />
-              </n-icon>
-            </n-back-top>
-            <!-- 路由页面 -->
-            <router-view v-slot="{ Component }">
-              <keep-alive>
-                <Transition name="router" mode="out-in">
-                  <component :is="Component" />
-                </Transition>
-              </keep-alive>
-            </router-view>
-          </main>
+          <MainLayout />
         </n-layout>
       </n-layout>
+      <!-- 主内容 - 无侧边栏 -->
+      <n-layout-content
+        v-else
+        :class="{
+          'body-layout': true,
+          'player-bar': Object.keys(music.getPlaySongData)?.length && showPlayBar,
+        }"
+        :native-scrollbar="false"
+        position="absolute"
+        embedded
+      >
+        <MainLayout />
+      </n-layout-content>
     </n-layout>
     <!-- 主播放器 -->
     <MainControl />
     <!-- 全屏播放器 -->
     <FullPlayer />
     <!-- 全局播放列表 -->
-    <n-config-provider v-if="status.showFullPlayer" :theme="darkTheme">
+    <n-config-provider v-if="showFullPlayer" :theme="darkTheme">
       <Playlist />
     </n-config-provider>
     <Playlist v-else />
@@ -81,6 +78,7 @@
 </template>
 
 <script setup>
+import { storeToRefs } from "pinia";
 import { darkTheme } from "naive-ui";
 import { useRouter } from "vue-router";
 import { musicData, siteStatus, siteSettings } from "@/stores";
@@ -93,6 +91,8 @@ const router = useRouter();
 const music = musicData();
 const status = siteStatus();
 const settings = siteSettings();
+const { autoPlay, showSider } = storeToRefs(settings);
+const { showPlayBar, asideMenuCollapsed, showFullPlayer } = storeToRefs(status);
 
 // 公告数据
 const annShow =
@@ -123,12 +123,12 @@ const canNotConnect = (error) => {
     title: "网络连接错误",
     content: "网络连接错误，请检查您当前的网络状态",
     positiveText: "重试",
-    negativeText: "前往本地歌曲",
+    negativeText: checkPlatform.electron() ? "前往本地歌曲" : "取消",
     onPositiveClick: () => {
       location.reload();
     },
     onNegativeClick: () => {
-      router.push("/local");
+      if (checkPlatform.electron()) router.push("/local");
     },
   });
 };
@@ -137,7 +137,7 @@ onMounted(() => {
   // 挂载方法
   window.$canNotConnect = canNotConnect;
   // 主播放器
-  initPlayer(settings.autoPlay);
+  initPlayer(autoPlay.value);
   // 全局事件
   globalEvents(router);
   // 键盘监听
@@ -165,9 +165,6 @@ onUnmounted(() => {
   .body-layout {
     top: 60px;
     transition: bottom 0.3s;
-    &.player-bar {
-      bottom: 80px;
-    }
     .main-sider {
       :deep(.n-scrollbar-content) {
         height: 100%;
@@ -179,8 +176,8 @@ onUnmounted(() => {
         display: none;
       }
     }
-    .main-layout {
-      padding: 24px;
+    &.player-bar {
+      bottom: 80px;
     }
   }
 }

diff --git a/src/assets/icon.json b/src/assets/icon.json
@@ -22,6 +22,7 @@
   "chevron-right": "M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42Z",
   "account-circle": "M12 19.2c-2.5 0-4.71-1.28-6-3.2c.03-2 4-3.1 6-3.1s5.97 1.1 6 3.1a7.232 7.232 0 0 1-6 3.2M12 5a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-3A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10c0-5.53-4.5-10-10-10Z",
   "menu-down": "m7 10l5 5l5-5H7Z",
+  "menu": "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5s1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5S5.5 6.83 5.5 6S4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5s1.5-.68 1.5-1.5s-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z",
   "calendar-check": "M19 19H5V8h14m0-5h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-2.47 8.06L15.47 10l-4.88 4.88l-2.12-2.12l-1.06 1.06L10.59 17l5.94-5.94Z",
   "calendar-badge": "M19.5 16c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5s3.5-1.6 3.5-3.5s-1.6-3.5-3.5-3.5m-5.29 5H5a2 2 0 0 1-2-2V5c0-1.11.89-2 2-2h1V1h2v2h8V1h2v2h1a2 2 0 0 1 2 2v9.21c-.5-.13-1-.21-1.5-.21c-.17 0-.33 0-.5.03V8H5v11h9.03c-.03.17-.03.33-.03.5c0 .5.08 1 .21 1.5Z",
   "round-wb-sunny": "m6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z",

diff --git a/src/components/Global/MainLayout.vue b/src/components/Global/MainLayout.vue
@@ -0,0 +1,50 @@
+<template>
+  <main id="main-layout" :class="['main-layout', { 'no-sider': !showSider }]">
+    <!-- 回顶 -->
+    <n-back-top
+      :bottom="Object.keys(music.getPlaySongData)?.length && showPlayBar ? 110 : 50"
+      style="transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+    >
+      <n-icon size="26">
+        <SvgIcon icon="chevron-up" />
+      </n-icon>
+    </n-back-top>
+    <!-- 路由页面 -->
+    <router-view v-slot="{ Component }" class="main-router">
+      <keep-alive>
+        <Transition name="router" mode="out-in">
+          <component :is="Component" />
+        </Transition>
+      </keep-alive>
+    </router-view>
+  </main>
+</template>
+
+<script setup>
+import { storeToRefs } from "pinia";
+import { musicData, siteStatus, siteSettings } from "@/stores";
+
+const music = musicData();
+const status = siteStatus();
+const settings = siteSettings();
+const { showPlayBar } = storeToRefs(status);
+const { showSider } = storeToRefs(settings);
+</script>
+
+<style lang="scss" scoped>
+.main-layout {
+  padding: 24px;
+  &.no-sider {
+    padding: 0;
+    background-color: var(--n-color);
+    .main-router {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px 10vw;
+      @media (max-width: 1200px) {
+        padding: 24px 5vw;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/Global/Menu.vue b/src/components/Global/Menu.vue
@@ -4,7 +4,7 @@
     ref="mainMenuRef"
     v-model:value="menuActiveKey"
     class="main-menu"
-    :root-indent="36"
+    :root-indent="showSider ? 36 : 28"
     :indent="0"
     :collapsed="asideMenuCollapsed.value"
     :defaultExpandedKeys="['user-playlists', 'favorite-playlists']"
@@ -36,7 +36,7 @@ const router = useRouter();
 const data = siteData();
 const music = musicData();
 const status = siteStatus();
-const { asideMenuCollapsed } = storeToRefs(status);
+const { asideMenuCollapsed, showSider } = storeToRefs(status);
 const { userData, userLikeData, userLoginStatus } = storeToRefs(data);
 const { playList, playListOld, playIndex, playSongData, playHeartbeatMode, playMode } =
   storeToRefs(music);

diff --git a/src/components/Global/Provider.vue b/src/components/Global/Provider.vue
@@ -81,7 +81,7 @@ const changeThemeColor = (val, isCover = false) => {
     const coverAutobgCover = isCover
       ? themeType.value === "dark"
         ? val.light.bg
-        : "239, 239, 239"
+        : "250, 250, 252"
       : null;
     // 更新主题覆盖
     themeOverrides.value = {
@@ -95,7 +95,7 @@ const changeThemeColor = (val, isCover = false) => {
               textColor1: `rgba(${mainColorData.bg}, 0.9)`,
               textColor2: `rgba(${mainColorData.bg}, 0.82)`,
               textColor3: `rgba(${mainColorData.bg}, 0.52)`,
-              bodyColor: `rgba(${val.dark.mainBg}, 0.52)`,
+              bodyColor: `rgb(${val.dark.mainBg})`,
               cardColor: `rgb(${coverAutobgCover})`,
               tagColor: `rgb(${coverAutobgCover})`,
               modalColor: `rgb(${coverAutobgCover})`,