✨ feat: 添加自定义隐藏侧边栏

Author: kazukokawagawa

auto-eslint.mjs

@@ -59,7 +59,6 @@ export default {
     "isRef": true,
     "isShallow": true,
     "makeDestructurable": true,
-    "manualResetRef": true,
     "markRaw": true,
     "nextTick": true,
     "onActivated": true,
@@ -97,11 +96,11 @@ export default {
     "refAutoReset": true,
     "refDebounced": true,
     "refDefault": true,
-    "refManualReset": true,
     "refThrottled": true,
     "refWithControl": true,
     "resolveComponent": true,
     "resolveRef": true,
+    "resolveUnref": true,
     "shallowReactive": true,
     "shallowReadonly": true,
     "shallowRef": true,

components.d.ts

@@ -139,6 +139,7 @@ declare module 'vue' {
     SearchInp: typeof import('./src/components/Search/SearchInp.vue')['default']
     SearchInpMenu: typeof import('./src/components/Menu/SearchInpMenu.vue')['default']
     SearchSuggest: typeof import('./src/components/Search/SearchSuggest.vue')['default']
+    SidebarHideManager: typeof import('./src/components/Modal/SidebarHideManager.vue')['default']
     Sider: typeof import('./src/components/Layout/Sider.vue')['default']
     SImage: typeof import('./src/components/UI/s-image.vue')['default']
     SongCard: typeof import('./src/components/Card/SongCard.vue')['default']

src/components/Layout/Menu.vue

@@ -9,7 +9,7 @@
     :collapsed="statusStore.menuCollapsed"
     :collapsed-width="64"
     :collapsed-icon-size="22"
-    :default-expand-all="true"
+    v-model:expanded-keys="settingStore.menuExpandedKeys"
     :options="menuOptions"
     :render-label="renderMenuLabel"
     @update:value="menuUpdate"
@@ -65,6 +65,7 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
           key: "discover",
           link: "discover",
           label: "发现音乐",
+          show: !settingStore.hideDiscover,
           icon: renderIcon("Discover", {
             style: {
               transform: "translateY(-1px)",
@@ -74,7 +75,7 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
         {
           key: "personal-fm",
           label: "私人漫游",
-          show: isLogin() !== 0,
+          show: isLogin() !== 0 && !settingStore.hidePersonalFM,
           icon: renderIcon("Radio", {
             style: {
               transform: "translateY(-1px)",
@@ -85,6 +86,7 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
           key: "radio-hot",
           link: "radio-hot",
           label: "播客电台",
+          show: !settingStore.hideRadioHot,
           icon: renderIcon("Record", {
             style: {
               transform: "translateY(-1px)",
@@ -100,44 +102,48 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
           label: () =>
             h("div", { class: "user-liked" }, [
               h(NText, null, () => "我喜欢的音乐"),
-              h(NButton, {
-                type: "tertiary",
-                round: true,
-                strong: true,
-                secondary: true,
-                renderIcon: renderIcon("HeartBit"),
-                onClick: (event: Event) => {
-                  event.stopPropagation();
-                  openHeartMode();
-                },
-              }),
+              !settingStore.hideHeartbeatMode
+                ? h(NButton, {
+                    type: "tertiary",
+                    round: true,
+                    strong: true,
+                    secondary: true,
+                    renderIcon: renderIcon("HeartBit"),
+                    onClick: (event: Event) => {
+                      event.stopPropagation();
+                      openHeartMode();
+                    },
+                  })
+                : null,
             ]),
           icon: renderIcon("Favorite"),
         },
         {
           key: "like",
           link: "like",
           label: "我的收藏",
+          show: !settingStore.hideLike,
           icon: renderIcon("Star"),
         },
         {
           key: "cloud",
           link: "cloud",
           label: "我的云盘",
-          show: isLogin() === 1,
+          show: isLogin() === 1 && !settingStore.hideCloud,
           icon: renderIcon("Cloud"),
         },
         {
           key: "local",
           link: "local",
           label: "本地歌曲",
-          show: isElectron,
+          show: isElectron && !settingStore.hideLocal,
           icon: renderIcon("FolderMusic"),
         },
         {
           key: "history",
           link: "history",
           label: "最近播放",
+          show: !settingStore.hideHistory,
           icon: renderIcon("History"),
         },
         {
@@ -147,6 +153,7 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
         // 创建的歌单
         {
           key: "user-playlists",
+          show: !settingStore.hideUserPlaylists,
           icon: statusStore.menuCollapsed ? renderIcon("PlaylistAdd") : undefined,
           label: () =>
             h("div", { class: "user-list" }, [
@@ -168,6 +175,7 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
         // 收藏的歌单
         {
           key: "liked-playlists",
+          show: !settingStore.hideLikedPlaylists,
           icon: statusStore.menuCollapsed ? renderIcon("PlaylistAddCheck") : undefined,
           label: () =>
             h(

src/components/Modal/SidebarHideManager.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="sidebar-hide-manager">
+    <n-scrollbar style="max-height: 400px" trigger="none">
+      <div class="list">
+        <n-card
+          v-for="item in sidebarItems"
+          :key="item.key"
+          :content-style="{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            padding: '16px',
+          }"
+          class="item"
+        >
+          <n-text class="name">{{ item.label }}</n-text>
+          <n-switch
+            :value="settingStore[item.key]"
+            :round="false"
+            @update:value="(val) => updateSetting(item.key, val)"
+          />
+        </n-card>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar } from "naive-ui";
+import { useSettingStore } from "@/stores";
+
+const settingStore = useSettingStore();
+
+const sidebarItems = [
+  { label: "发现音乐", key: "hideDiscover" },
+  { label: "私人漫游", key: "hidePersonalFM" },
+  { label: "播客电台", key: "hideRadioHot" },
+  { label: "我的收藏", key: "hideLike" },
+  { label: "我的云盘", key: "hideCloud" },
+  { label: "本地歌曲", key: "hideLocal" },
+  { label: "最近播放", key: "hideHistory" },
+  { label: "创建的歌单", key: "hideUserPlaylists" },
+  { label: "收藏的歌单", key: "hideLikedPlaylists" },
+  { label: "心动模式", key: "hideHeartbeatMode" },
+] as const;
+
+const updateSetting = (key: keyof typeof settingStore, val: boolean) => {
+  // @ts-ignore
+  settingStore[key] = val;
+};
+</script>
+
+<style scoped lang="scss">
+.list {
+  margin-top: 12px;
+  padding-right: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  .item {
+    border-radius: 8px;
+    .name {
+      font-size: 16px;
+      line-height: normal;
+    }
+    .n-switch {
+      margin-left: auto;
+    }
+  }
+}
+</style>

src/components/Setting/GeneralSetting.vue

@@ -95,6 +95,20 @@
         </div>
         <n-switch class="set" v-model:value="settingStore.menuShowCover" :round="false" />
       </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">侧边栏隐藏</n-text>
+          <n-text class="tip" :depth="3">配置需要在侧边栏隐藏的菜单项</n-text>
+        </div>
+        <n-button
+          type="primary"
+          strong
+          secondary
+          @click="openSidebarHideManager"
+        >
+          配置
+        </n-button>
+      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">显示歌曲音质</n-text>
@@ -310,6 +324,7 @@ import { isDev, isElectron } from "@/utils/env";
 import { getCoverColor } from "@/utils/player-utils/song";
 import { isEmpty } from "lodash-es";
 import themeColor from "@/assets/data/themeColor.json";
+import { openSidebarHideManager } from "@/utils/modal";
 
 const dataStore = useDataStore();
 const musicStore = useMusicStore();

src/stores/setting.ts

@@ -7,17 +7,17 @@ export interface SettingState {
   themeMode: "light" | "dark" | "auto";
   /** 主题类别 */
   themeColorType:
-    | "default"
-    | "orange"
-    | "blue"
-    | "pink"
-    | "brown"
-    | "indigo"
-    | "green"
-    | "purple"
-    | "yellow"
-    | "teal"
-    | "custom";
+  | "default"
+  | "orange"
+  | "blue"
+  | "pink"
+  | "brown"
+  | "indigo"
+  | "green"
+  | "purple"
+  | "yellow"
+  | "teal"
+  | "custom";
   /** 主题自定义颜色 */
   themeCustomColor: string;
   /** 全局着色 */
@@ -82,14 +82,14 @@ export interface SettingState {
   proxyPort: number;
   /** 歌曲音质 */
   songLevel:
-    | "standard"
-    | "higher"
-    | "exhigh"
-    | "lossless"
-    | "hires"
-    | "jyeffect"
-    | "sky"
-    | "jymaster";
+  | "standard"
+  | "higher"
+  | "exhigh"
+  | "lossless"
+  | "hires"
+  | "jyeffect"
+  | "sky"
+  | "jymaster";
   /** 播放设备 */
   playDevice: "default" | string;
   /** 自动播放 */
@@ -138,6 +138,8 @@ export interface SettingState {
   enableTTMLLyric: boolean;
   /** 菜单显示封面 */
   menuShowCover: boolean;
+  /** 菜单展开项 */
+  menuExpandedKeys: string[];
   /** 是否禁止休眠 */
   preventSleep: boolean;
   /** 本地文件路径 */
@@ -180,6 +182,26 @@ export interface SettingState {
   showSongPrivilegeTag: boolean;
   /** 显示原唱翻唱标签 */
   showSongOriginalTag: boolean;
+  /** 隐藏发现音乐 */
+  hideDiscover: boolean;
+  /** 隐藏私人漫游 */
+  hidePersonalFM: boolean;
+  /** 隐藏播客电台 */
+  hideRadioHot: boolean;
+  /** 隐藏我的收藏 */
+  hideLike: boolean;
+  /** 隐藏我的云盘 */
+  hideCloud: boolean;
+  /** 隐藏本地歌曲 */
+  hideLocal: boolean;
+  /** 隐藏最近播放 */
+  hideHistory: boolean;
+  /** 隐藏创建的歌单 */
+  hideUserPlaylists: boolean;
+  /** 隐藏收藏的歌单 */
+  hideLikedPlaylists: boolean;
+  /** 隐藏心动模式 */
+  hideHeartbeatMode: boolean;
 }
 
 export const useSettingStore = defineStore("setting", {
@@ -195,6 +217,7 @@ export const useSettingStore = defineStore("setting", {
     hideVipTag: false,
     showSearchHistory: true,
     menuShowCover: true,
+    menuExpandedKeys: [],
     routeAnimation: "slide",
     useOnlineService: true,
     showCloseAppTip: true,
@@ -267,6 +290,16 @@ export const useSettingStore = defineStore("setting", {
     showSongQuality: true,
     showSongPrivilegeTag: true,
     showSongOriginalTag: true,
+    hideDiscover: false,
+    hidePersonalFM: false,
+    hideRadioHot: false,
+    hideLike: false,
+    hideCloud: false,
+    hideLocal: false,
+    hideHistory: false,
+    hideUserPlaylists: false,
+    hideLikedPlaylists: false,
+    hideHeartbeatMode: false,
   }),
   getters: {
     /**
@@ -294,12 +327,11 @@ export const useSettingStore = defineStore("setting", {
       }
       window.$message.info(
         `已切换至
-        ${
-          this.themeMode === "auto"
-            ? "跟随系统"
-            : this.themeMode === "light"
-              ? "浅色模式"
-              : "深色模式"
+        ${this.themeMode === "auto"
+          ? "跟随系统"
+          : this.themeMode === "light"
+            ? "浅色模式"
+            : "深色模式"
         }`,
         {
           showIcon: false,