优化UI

components.d.ts

@@ -28,6 +28,7 @@ declare module 'vue' {
     ExcludeLyrics: typeof import('./src/components/Modal/ExcludeLyrics.vue')['default']
     FullPlayer: typeof import('./src/components/Player/FullPlayer.vue')['default']
     GeneralSetting: typeof import('./src/components/Setting/GeneralSetting.vue')['default']
+    HomePageSectionManager: typeof import('./src/components/Modal/HomePageSectionManager.vue')['default']
     JumpArtist: typeof import('./src/components/Modal/JumpArtist.vue')['default']
     KeyboardSetting: typeof import('./src/components/Setting/KeyboardSetting.vue')['default']
     LocalSetting: typeof import('./src/components/Setting/LocalSetting.vue')['default']

src/components/Modal/HomePageSectionManager.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="home-page-section-manager">
+    <div ref="sortableRef" class="sortable-list">
+      <n-card
+        v-for="item in settingStore.homePageSections"
+        :key="item.key"
+        :content-style="{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+          padding: '16px',
+        }"
+        class="sortable-item"
+      >
+        <SvgIcon :depth="3" name="Menu" />
+        <n-text class="name">{{ item.name }}</n-text>
+        <n-switch v-model:value="item.visible" :round="false" />
+      </n-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSettingStore } from "@/stores";
+import { useSortable } from "@vueuse/integrations/useSortable";
+import SvgIcon from "@/components/Global/SvgIcon.vue";
+
+const settingStore = useSettingStore();
+
+const sortableRef = ref<HTMLElement | null>(null);
+
+// 更新排序值
+const updateSortOrder = () => {
+  settingStore.homePageSections.forEach((item, index) => {
+    item.order = index;
+  });
+};
+
+// 拖拽
+useSortable(sortableRef, settingStore.homePageSections, {
+  animation: 150,
+  handle: ".n-icon",
+  onEnd: updateSortOrder,
+});
+
+onMounted(() => {
+  // 初始化排序值
+  updateSortOrder();
+});
+</script>
+
+<style scoped lang="scss">
+.sortable-list {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  .sortable-item {
+    border-radius: 8px;
+    .n-icon {
+      font-size: 16px;
+      cursor: move;
+    }
+    .name {
+      font-size: 16px;
+      line-height: normal;
+    }
+    .n-switch {
+      margin-left: auto;
+    }
+  }
+}
+</style>

src/components/Setting/GeneralSetting.vue

@@ -116,6 +116,20 @@
           配置
         </n-button>
       </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="openHomePageSectionManager"
+        >
+          配置
+        </n-button>
+      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">显示歌曲音质</n-text>
@@ -331,7 +345,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";
+import { openSidebarHideManager, openHomePageSectionManager } from "@/utils/modal";
 
 const dataStore = useDataStore();
 const musicStore = useMusicStore();

src/stores/setting.ts

@@ -208,6 +208,13 @@ export interface SettingState {
   appLaunchCount: number;
   /** 隐藏 Star 弹窗 */
   hideStarPopup: boolean;
+  /** 首页栏目顺序和显示配置 */
+  homePageSections: Array<{
+    key: "playlist" | "radar" | "artist" | "video" | "radio" | "album";
+    name: string;
+    visible: boolean;
+    order: number;
+  }>;
 }
 
 export const useSettingStore = defineStore("setting", {
@@ -309,6 +316,14 @@ export const useSettingStore = defineStore("setting", {
     enableSearchKeyword: true,
     appLaunchCount: 0,
     hideStarPopup: true,
+    homePageSections: [
+      { key: "playlist", name: "专属歌单", visible: true, order: 0 },
+      { key: "radar", name: "雷达歌单", visible: true, order: 1 },
+      { key: "artist", name: "歌手推荐", visible: true, order: 2 },
+      { key: "video", name: "推荐 MV", visible: true, order: 3 },
+      { key: "radio", name: "推荐播客", visible: true, order: 4 },
+      { key: "album", name: "新碟上架", visible: true, order: 5 },
+    ],
   }),
   getters: {
     /**

src/utils/modal.ts

@@ -22,6 +22,7 @@ import AutoClose from "@/components/Modal/AutoClose.vue";
 import Equalizer from "@/components/Modal/Equalizer.vue";
 import SongUnlockManager from "@/components/Modal/SongUnlockManager.vue";
 import SidebarHideManager from "@/components/Modal/SidebarHideManager.vue";
+import HomePageSectionManager from "@/components/Modal/HomePageSectionManager.vue";
 import { NScrollbar } from "naive-ui";
 
 // 用户协议
@@ -349,3 +350,17 @@ export const openSidebarHideManager = () => {
     },
   });
 };
+
+/** 打开首页栏目配置弹窗 */
+export const openHomePageSectionManager = () => {
+  window.$modal.create({
+    preset: "card",
+    transformOrigin: "center",
+    autoFocus: false,
+    style: { width: "500px" },
+    title: "首页栏目配置",
+    content: () => {
+      return h(HomePageSectionManager);
+    },
+  });
+};

src/views/Home/HomeOnline.vue

@@ -30,7 +30,7 @@
       </n-gi>
     </n-grid>
     <!-- 公共推荐 -->
-    <div v-for="(item, index) in recData" :key="index" class="rec-public">
+    <div v-for="(item, index) in sortedRecData" :key="index" class="rec-public">
       <n-flex
         class="title"
         align="center"
@@ -52,7 +52,7 @@
 <script setup lang="ts">
 import type { ArtistType, CoverType } from "@/types/main";
 import { NText } from "naive-ui";
-import { useDataStore, useMusicStore } from "@/stores";
+import { useDataStore, useMusicStore, useSettingStore } from "@/stores";
 import { newAlbumsAll, personalized, radarPlaylist, topArtists } from "@/api/rec";
 import { allMv } from "@/api/video";
 import { radioRecommend } from "@/api/radio";
@@ -82,6 +82,7 @@ interface RecDataType {
 const router = useRouter();
 const dataStore = useDataStore();
 const musicStore = useMusicStore();
+const settingStore = useSettingStore();
 
 // 日推标题
 const dailySongsTitle = computed(() => {
@@ -133,6 +134,19 @@ const recData = ref<RecDataType>({
   },
 });
 
+// 根据设置过滤和排序推荐数据
+const sortedRecData = computed(() => {
+  const sections = settingStore.homePageSections
+    .filter((section) => section.visible)
+    .sort((a, b) => a.order - b.order)
+    .map((section) => {
+      const key = section.key as keyof RecDataType;
+      return recData.value[key];
+    })
+    .filter((item) => item);
+  return sections;
+});
+
 // 获取全部推荐
 const getAllRecData = async () => {
   try {

src/views/List/liked.vue

@@ -111,7 +111,7 @@
                 </n-button>
               </n-dropdown>
             </n-flex>
-            <n-flex class="right">
+            <n-flex class="right" align="center">
               <!-- 模糊搜索 -->
               <n-input
                 v-if="playlistData?.length"

src/views/List/playlist.vue

@@ -156,7 +156,7 @@
                 </n-button>
               </n-dropdown>
             </n-flex>
-            <n-flex class="right">
+            <n-flex class="right" align="center">
               <!-- 模糊搜索 -->
               <n-input
                 v-if="playlistData?.length"