✨ feat: 优化设置页面拆分组件

2026-04-25 00:37:24 +08:00 · 2025-04-29 23:38:17 +08:00
parent 16d6ff39c8
commit c98fa20a74
6 changed files with 437 additions and 241 deletions
@@ -0,0 +1,120 @@
+<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', 'youtube']
+  }
+});
+
+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: 'YouTube', value: 'youtube' },
+  { 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', 'youtube'];
+  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>