mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-14 06:30:49 +08:00
119 lines
3.5 KiB
Vue
119 lines
3.5 KiB
Vue
<template>
|
||
<n-modal
|
||
v-model:show="visible"
|
||
preset="dialog"
|
||
:title="t('settings.playback.musicSources')"
|
||
:positive-text="t('common.confirm')"
|
||
:negative-text="t('common.cancel')"
|
||
@positive-click="handleConfirm"
|
||
@negative-click="handleCancel"
|
||
>
|
||
<n-space vertical>
|
||
<p>{{ t('settings.playback.musicSourcesDesc') }}</p>
|
||
<n-checkbox-group v-model:value="selectedSources">
|
||
<n-grid :cols="2" :x-gap="12" :y-gap="8">
|
||
<n-grid-item v-for="source in musicSourceOptions" :key="source.value">
|
||
<n-checkbox :value="source.value">
|
||
{{ source.label }}
|
||
<template v-if="source.value === 'gdmusic'">
|
||
<n-tooltip>
|
||
<template #trigger>
|
||
<n-icon size="16" class="ml-1 text-blue-500 cursor-help">
|
||
<i class="ri-information-line"></i>
|
||
</n-icon>
|
||
</template>
|
||
{{ t('settings.playback.gdmusicInfo') }}
|
||
</n-tooltip>
|
||
</template>
|
||
</n-checkbox>
|
||
</n-grid-item>
|
||
</n-grid>
|
||
</n-checkbox-group>
|
||
<div v-if="selectedSources.length === 0" class="text-red-500 text-sm">
|
||
{{ t('settings.playback.musicSourcesWarning') }}
|
||
</div>
|
||
|
||
<!-- GD音乐台设置 -->
|
||
<div v-if="selectedSources.includes('gdmusic')" class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700">
|
||
<h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||
GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
|
||
</p>
|
||
</div>
|
||
</n-space>
|
||
</n-modal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||
import { useI18n } from 'vue-i18n';
|
||
import { type Platform } from '@/types/music';
|
||
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
sources: {
|
||
type: Array as () => Platform[],
|
||
default: () => ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo']
|
||
}
|
||
});
|
||
|
||
const emit = defineEmits(['update:show', 'update:sources']);
|
||
|
||
const { t } = useI18n();
|
||
const visible = ref(props.show);
|
||
const selectedSources = ref<Platform[]>(props.sources);
|
||
|
||
const musicSourceOptions = ref([
|
||
{ label: 'MiGu音乐', value: 'migu' },
|
||
{ label: '酷狗音乐', value: 'kugou' },
|
||
{ label: 'pyncmd', value: 'pyncmd' },
|
||
{ label: '酷我音乐', value: 'kuwo' },
|
||
{ label: 'Bilibili音乐', value: 'bilibili' },
|
||
{ label: 'GD音乐台', value: 'gdmusic' }
|
||
]);
|
||
|
||
// 同步外部show属性变化
|
||
watch(
|
||
() => props.show,
|
||
(newVal) => {
|
||
visible.value = newVal;
|
||
}
|
||
);
|
||
|
||
// 同步内部visible变化
|
||
watch(
|
||
() => visible.value,
|
||
(newVal) => {
|
||
emit('update:show', newVal);
|
||
}
|
||
);
|
||
|
||
// 同步外部sources属性变化
|
||
watch(
|
||
() => props.sources,
|
||
(newVal) => {
|
||
selectedSources.value = [...newVal];
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
const handleConfirm = () => {
|
||
// 确保至少选择一个音源
|
||
const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
|
||
const valuesToEmit = selectedSources.value.length > 0
|
||
? [...new Set(selectedSources.value)]
|
||
: defaultPlatforms;
|
||
|
||
emit('update:sources', valuesToEmit);
|
||
visible.value = false;
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
// 取消时还原为props传入的初始值
|
||
selectedSources.value = [...props.sources];
|
||
visible.value = false;
|
||
};
|
||
</script> |