Skip to content

Commit 79452d6

Browse files
MoYingJiMoYingJi
authored
Merge pull request #599 from SUBearH/P403
优化UI
2 parents 12a162d + 8029b12 commit 79452d6

8 files changed

Lines changed: 137 additions & 5 deletions

File tree

‎components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ declare module 'vue' {
2828
ExcludeLyrics: typeof import('./src/components/Modal/ExcludeLyrics.vue')['default']
2929
FullPlayer: typeof import('./src/components/Player/FullPlayer.vue')['default']
3030
GeneralSetting: typeof import('./src/components/Setting/GeneralSetting.vue')['default']
31+
HomePageSectionManager: typeof import('./src/components/Modal/HomePageSectionManager.vue')['default']
3132
JumpArtist: typeof import('./src/components/Modal/JumpArtist.vue')['default']
3233
KeyboardSetting: typeof import('./src/components/Setting/KeyboardSetting.vue')['default']
3334
LocalSetting: typeof import('./src/components/Setting/LocalSetting.vue')['default']

‎src/components/Modal/HomePageSectionManager.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<div class="home-page-section-manager">
3+
<div ref="sortableRef" class="sortable-list">
4+
<n-card
5+
v-for="item in settingStore.homePageSections"
6+
:key="item.key"
7+
:content-style="{
8+
display: 'flex',
9+
alignItems: 'center',
10+
gap: '12px',
11+
padding: '16px',
12+
}"
13+
class="sortable-item"
14+
>
15+
<SvgIcon :depth="3" name="Menu" />
16+
<n-text class="name">{{ item.name }}</n-text>
17+
<n-switch v-model:value="item.visible" :round="false" />
18+
</n-card>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script setup lang="ts">
24+
import { useSettingStore } from "@/stores";
25+
import { useSortable } from "@vueuse/integrations/useSortable";
26+
import SvgIcon from "@/components/Global/SvgIcon.vue";
27+
28+
const settingStore = useSettingStore();
29+
30+
const sortableRef = ref<HTMLElement | null>(null);
31+
32+
// 更新排序值
33+
const updateSortOrder = () => {
34+
settingStore.homePageSections.forEach((item, index) => {
35+
item.order = index;
36+
});
37+
};
38+
39+
// 拖拽
40+
useSortable(sortableRef, settingStore.homePageSections, {
41+
animation: 150,
42+
handle: ".n-icon",
43+
onEnd: updateSortOrder,
44+
});
45+
46+
onMounted(() => {
47+
// 初始化排序值
48+
updateSortOrder();
49+
});
50+
</script>
51+
52+
<style scoped lang="scss">
53+
.sortable-list {
54+
margin-top: 12px;
55+
display: flex;
56+
flex-direction: column;
57+
gap: 12px;
58+
.sortable-item {
59+
border-radius: 8px;
60+
.n-icon {
61+
font-size: 16px;
62+
cursor: move;
63+
}
64+
.name {
65+
font-size: 16px;
66+
line-height: normal;
67+
}
68+
.n-switch {
69+
margin-left: auto;
70+
}
71+
}
72+
}
73+
</style>

‎src/components/Setting/GeneralSetting.vue‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,20 @@
116116
配置
117117
</n-button>
118118
</n-card>
119+
<n-card class="set-item">
120+
<div class="label">
121+
<n-text class="name">首页栏目配置</n-text>
122+
<n-text class="tip" :depth="3">调整首页各栏目的显示顺序或隐藏不需要的栏目</n-text>
123+
</div>
124+
<n-button
125+
type="primary"
126+
strong
127+
secondary
128+
@click="openHomePageSectionManager"
129+
>
130+
配置
131+
</n-button>
132+
</n-card>
119133
<n-card class="set-item">
120134
<div class="label">
121135
<n-text class="name">显示歌曲音质</n-text>
@@ -331,7 +345,7 @@ import { isDev, isElectron } from "@/utils/env";
331345
import { getCoverColor } from "@/utils/player-utils/song";
332346
import { isEmpty } from "lodash-es";
333347
import themeColor from "@/assets/data/themeColor.json";
334-
import { openSidebarHideManager } from "@/utils/modal";
348+
import { openSidebarHideManager, openHomePageSectionManager } from "@/utils/modal";
335349
336350
const dataStore = useDataStore();
337351
const musicStore = useMusicStore();

‎src/stores/setting.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,13 @@ export interface SettingState {
208208
appLaunchCount: number;
209209
/** 隐藏 Star 弹窗 */
210210
hideStarPopup: boolean;
211+
/** 首页栏目顺序和显示配置 */
212+
homePageSections: Array<{
213+
key: "playlist" | "radar" | "artist" | "video" | "radio" | "album";
214+
name: string;
215+
visible: boolean;
216+
order: number;
217+
}>;
211218
}
212219

213220
export const useSettingStore = defineStore("setting", {
@@ -309,6 +316,14 @@ export const useSettingStore = defineStore("setting", {
309316
enableSearchKeyword: true,
310317
appLaunchCount: 0,
311318
hideStarPopup: true,
319+
homePageSections: [
320+
{ key: "playlist", name: "专属歌单", visible: true, order: 0 },
321+
{ key: "radar", name: "雷达歌单", visible: true, order: 1 },
322+
{ key: "artist", name: "歌手推荐", visible: true, order: 2 },
323+
{ key: "video", name: "推荐 MV", visible: true, order: 3 },
324+
{ key: "radio", name: "推荐播客", visible: true, order: 4 },
325+
{ key: "album", name: "新碟上架", visible: true, order: 5 },
326+
],
312327
}),
313328
getters: {
314329
/**

‎src/utils/modal.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import AutoClose from "@/components/Modal/AutoClose.vue";
2222
import Equalizer from "@/components/Modal/Equalizer.vue";
2323
import SongUnlockManager from "@/components/Modal/SongUnlockManager.vue";
2424
import SidebarHideManager from "@/components/Modal/SidebarHideManager.vue";
25+
import HomePageSectionManager from "@/components/Modal/HomePageSectionManager.vue";
2526
import { NScrollbar } from "naive-ui";
2627

2728
// 用户协议
@@ -349,3 +350,17 @@ export const openSidebarHideManager = () => {
349350
},
350351
});
351352
};
353+
354+
/** 打开首页栏目配置弹窗 */
355+
export const openHomePageSectionManager = () => {
356+
window.$modal.create({
357+
preset: "card",
358+
transformOrigin: "center",
359+
autoFocus: false,
360+
style: { width: "500px" },
361+
title: "首页栏目配置",
362+
content: () => {
363+
return h(HomePageSectionManager);
364+
},
365+
});
366+
};

‎src/views/Home/HomeOnline.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</n-gi>
3131
</n-grid>
3232
<!-- 公共推荐 -->
33-
<div v-for="(item, index) in recData" :key="index" class="rec-public">
33+
<div v-for="(item, index) in sortedRecData" :key="index" class="rec-public">
3434
<n-flex
3535
class="title"
3636
align="center"
@@ -52,7 +52,7 @@
5252
<script setup lang="ts">
5353
import type { ArtistType, CoverType } from "@/types/main";
5454
import { NText } from "naive-ui";
55-
import { useDataStore, useMusicStore } from "@/stores";
55+
import { useDataStore, useMusicStore, useSettingStore } from "@/stores";
5656
import { newAlbumsAll, personalized, radarPlaylist, topArtists } from "@/api/rec";
5757
import { allMv } from "@/api/video";
5858
import { radioRecommend } from "@/api/radio";
@@ -82,6 +82,7 @@ interface RecDataType {
8282
const router = useRouter();
8383
const dataStore = useDataStore();
8484
const musicStore = useMusicStore();
85+
const settingStore = useSettingStore();
8586
8687
// 日推标题
8788
const dailySongsTitle = computed(() => {
@@ -133,6 +134,19 @@ const recData = ref<RecDataType>({
133134
},
134135
});
135136
137+
// 根据设置过滤和排序推荐数据
138+
const sortedRecData = computed(() => {
139+
const sections = settingStore.homePageSections
140+
.filter((section) => section.visible)
141+
.sort((a, b) => a.order - b.order)
142+
.map((section) => {
143+
const key = section.key as keyof RecDataType;
144+
return recData.value[key];
145+
})
146+
.filter((item) => item);
147+
return sections;
148+
});
149+
136150
// 获取全部推荐
137151
const getAllRecData = async () => {
138152
try {

‎src/views/List/liked.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
</n-button>
112112
</n-dropdown>
113113
</n-flex>
114-
<n-flex class="right">
114+
<n-flex class="right" align="center">
115115
<!-- 模糊搜索 -->
116116
<n-input
117117
v-if="playlistData?.length"

‎src/views/List/playlist.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
</n-button>
157157
</n-dropdown>
158158
</n-flex>
159-
<n-flex class="right">
159+
<n-flex class="right" align="center">
160160
<!-- 模糊搜索 -->
161161
<n-input
162162
v-if="playlistData?.length"

0 commit comments

Comments
 (0)