feat: 添加清除自定义音源功能

This commit is contained in:
algerkong
2025-06-28 17:26:07 +08:00
parent e8cf253567
commit 694dff425b
3 changed files with 22 additions and 8 deletions

View File

@@ -38,7 +38,8 @@ export default {
failed: 'Reparse failed',
warning: 'Please select a music source',
bilibiliNotSupported: 'Bilibili videos do not support reparsing',
processing: 'Processing...'
processing: 'Processing...',
clear: 'Clear Custom Source'
},
playBar: {
expand: 'Expand Lyrics',

View File

@@ -38,7 +38,8 @@ export default {
failed: '重新解析失败',
warning: '请选择一个音源',
bilibiliNotSupported: 'B站视频不支持重新解析',
processing: '解析中...'
processing: '解析中...',
clear: '清除自定义音源'
},
playBar: {
expand: '展开歌词',

View File

@@ -52,12 +52,21 @@
<div v-if="playMusic.source === 'bilibili'" class="text-red-500 text-sm">
{{ t('player.reparse.bilibiliNotSupported') }}
</div>
<!-- 清除自定义音源 -->
<div class="text-red-500 text-sm flex items-center bg-light-200 dark:bg-dark-200 rounded-lg p-2 cursor-pointer" @click="clearCustomSource">
<div class="flex items-center justify-center w-6 h-6 mr-3 text-lg">
<i class="ri-close-circle-line"></i>
</div>
<div>
{{ t('player.reparse.clear') }}
</div>
</div>
</div>
</n-popover>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage } from 'naive-ui';
import { playMusic } from '@/hooks/MusicHook';
@@ -76,11 +85,7 @@ const currentReparsingSource = ref<Platform | null>(null);
// 实际存储选中音源的值
const selectedSourcesValue = ref<Platform[]>([]);
// 判断当前歌曲是否有自定义解析记录
const isReparse = computed(() => {
const songId = String(playMusic.value.id);
return localStorage.getItem(`song_source_${songId}`) !== null;
});
const isReparse = ref(localStorage.getItem(`song_source_${String(playMusic.value.id)}`) !== null);
// 可选音源列表
const musicSourceOptions = ref([
@@ -127,6 +132,13 @@ const initSelectedSources = () => {
}
};
// 清除自定义音源
const clearCustomSource = () => {
localStorage.removeItem(`song_source_${String(playMusic.value.id)}`);
selectedSourcesValue.value = [];
isReparse.value = false;
};
// 直接重新解析当前歌曲
const directReparseMusic = async (source: Platform) => {
if (isReparsing.value || playMusic.value.source === 'bilibili') {