Merge pull request #465 from souvenp/feat/add-custom-api

src/renderer/components/settings/MusicSourceSettings.vue

@@ -10,56 +10,77 @@
   >
     <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-grid-item v-for="source in regularMusicSources" :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-tooltip v-if="source.value === 'gdmusic'">
+                <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>
+            </n-checkbox>
+          </n-grid-item>
+
+          <!-- 单独处理自定义API选项 -->
+          <n-grid-item>
+            <n-checkbox value="custom" :disabled="!settingsStore.setData.customApiPlugin">
+              自定义 API
+              <n-tooltip v-if="!settingsStore.setData.customApiPlugin">
+                <template #trigger>
+                  <n-icon size="16" class="ml-1 text-gray-400 cursor-help">
+                    <i class="ri-question-line"></i>
+                  </n-icon>
+                </template>
+                请先导入JSON配置文件才能启用
+              </n-tooltip>
             </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 class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700"></div>
+
+      <!-- 自定义API导入区域 -->
+      <div>
+        <h3 class="text-base font-medium mb-2">自定义 API 设置</h3>
+        <div class="flex items-center gap-4">
+          <n-button @click="importPlugin" size="small"> 导入 JSON 配置 </n-button>
+          <p v-if="settingsStore.setData.customApiPluginName" class="text-sm">
+            当前: <span class="font-semibold">{{ settingsStore.setData.customApiPluginName }}</span>
+          </p>
+          <p v-else class="text-sm text-gray-500">尚未导入</p>
+        </div>
       </div>
     </n-space>
   </n-modal>
 </template>
 
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, watch } from 'vue';
+import { useMessage } from 'naive-ui';
+import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { useSettingsStore } from '@/store';
 import { type Platform } from '@/types/music';
 
+// 扩展 Platform 类型以包含 'custom'
+type ExtendedPlatform = Platform | 'custom';
+
 const props = defineProps({
   show: {
     type: Boolean,
     default: false
   },
   sources: {
-    type: Array as () => Platform[],
+    type: Array as () => ExtendedPlatform[],
     default: () => ['migu', 'kugou', 'pyncmd', 'bilibili']
   }
 });
@@ -67,10 +88,13 @@ const props = defineProps({
 const emit = defineEmits(['update:show', 'update:sources']);
 
 const { t } = useI18n();
+const settingsStore = useSettingsStore();
+const message = useMessage();
 const visible = ref(props.show);
-const selectedSources = ref<Platform[]>(props.sources);
+const selectedSources = ref<ExtendedPlatform[]>(props.sources);
 
-const musicSourceOptions = ref([
+// 将常规音源和自定义音源分开定义
+const regularMusicSources = ref([
   { label: 'MG', value: 'migu' },
   { label: 'KG', value: 'kugou' },
   { label: 'pyncmd', value: 'pyncmd' },
@@ -78,6 +102,35 @@ const musicSourceOptions = ref([
   { label: 'GD音乐台', value: 'gdmusic' }
 ]);
 
+const importPlugin = async () => {
+  try {
+    const result = await window.api.importCustomApiPlugin();
+    if (result && result.name && result.content) {
+      settingsStore.setCustomApiPlugin(result);
+      message.success(`成功导入音源: ${result.name}`);
+      // 导入成功后，如果用户还没勾选，则自动勾选上
+      if (!selectedSources.value.includes('custom')) {
+        selectedSources.value.push('custom');
+      }
+    }
+  } catch (error: any) {
+    message.error(`导入失败: ${error.message}`);
+  }
+};
+
+// 监听自定义插件内容的变化。如果用户清除了插件，要确保 'custom' 选项被取消勾选
+watch(
+  () => settingsStore.setData.customApiPlugin,
+  (newPluginContent) => {
+    if (!newPluginContent) {
+      const index = selectedSources.value.indexOf('custom');
+      if (index > -1) {
+        selectedSources.value.splice(index, 1);
+      }
+    }
+  }
+);
+
 // 同步外部show属性变化
 watch(
   () => props.show,
@@ -108,11 +161,9 @@ const handleConfirm = () => {
   const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili'];
   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];