新增在线自定义源导入功能，允许通过http/https链接导入自定义源

publish/changeLog.md

@@ -1,6 +1,7 @@
 ### 新增
 
 - 主题编辑器添加“深色字体”选项，启用后将减少字体颜色梯度，各类字体（正文、标签字体等）颜色将更接近，这有助于解决创建全透明主题时可能出现的字体配色问题（#1799）
+- 新增在线自定义源导入功能，允许通过http/https链接导入自定义源
 
 ### 优化
 

src/lang/en-us.json

@@ -5,6 +5,7 @@
   "audio_visualization": "Audio visualization (experimental)",
   "back": "Back",
   "btn_cancel": "Cancel",
+  "btn_close": "Closure",
   "btn_confirm": "Confirm",
   "btn_save": "Save",
   "cancel_button_text": "Cancel",
@@ -685,7 +686,8 @@
   "update__timeout_top": "Download time is too long prompt\n\nYour current network access to GitHub is slow, and the new version has been downloaded for an hour and has not been completed yet😳, you can still choose to continue waiting, but the wall crack recommends manually updating the version!",
   "user_api__allow_show_update_alert": "Allow update popup to show",
   "user_api__btn_export": "Export",
-  "user_api__btn_import": "Import",
+  "user_api__btn_import": "Local import",
+  "user_api__btn_import_online": "Online import",
   "user_api__btn_remove": "Remove",
   "user_api__import_file": "Select music API script file",
   "user_api__init_failed_alert": "Custom source [{name}] failed to initialize:",
@@ -695,5 +697,10 @@
   "user_api__readme": "Source writing instructions: ",
   "user_api__title": "Custom Source Management",
   "user_api__update_alert": "Custom source [{name}] found new version:",
-  "user_api__update_alert_open_url": "Open update address"
+  "user_api__update_alert_open_url": "Open update address",
+  "user_api_import__failed": "Custom source import failed:\n{message}",
+  "user_api_import_online__input_confirm": "Import",
+  "user_api_import_online__input_loading": "Importing...",
+  "user_api_import_online__input_tip": "Please enter HTTP link",
+  "user_api_import_online__title": "Import custom sources online"
 }

src/lang/zh-cn.json

@@ -5,6 +5,7 @@
   "audio_visualization": "音频可视化（实验性）",
   "back": "返回",
   "btn_cancel": "取消",
+  "btn_close": "关闭",
   "btn_confirm": "确定",
   "btn_save": "保存",
   "cancel_button_text": "我不",
@@ -685,7 +686,8 @@
   "update__timeout_top": "下载时间过长提示\n\n你当前所在网络访问GitHub较慢，新版本已经下了一个钟了还没完成😳，你仍可选择继续等，但墙裂建议手动更新版本！",
   "user_api__allow_show_update_alert": "允许显示更新弹窗",
   "user_api__btn_export": "导出",
-  "user_api__btn_import": "导入",
+  "user_api__btn_import": "本地导入",
+  "user_api__btn_import_online": "在线导入",
   "user_api__btn_remove": "移除",
   "user_api__import_file": "选择音乐API脚本文件",
   "user_api__init_failed_alert": "自定义源 [{name}] 初始化失败：",
@@ -695,5 +697,10 @@
   "user_api__readme": "源编写说明：",
   "user_api__title": "自定义源管理",
   "user_api__update_alert": "自定义源 [{name}] 发现新版本：",
-  "user_api__update_alert_open_url": "打开更新地址"
+  "user_api__update_alert_open_url": "打开更新地址",
+  "user_api_import__failed": "自定义源导入失败：\n{message}",
+  "user_api_import_online__input_confirm": "导入",
+  "user_api_import_online__input_loading": "导入中...",
+  "user_api_import_online__input_tip": "请输入 HTTP 链接",
+  "user_api_import_online__title": "在线导入自定义源"
 }

src/lang/zh-tw.json

@@ -5,6 +5,7 @@
   "audio_visualization": "音訊視覺化（實驗性）",
   "back": "返回",
   "btn_cancel": "取消",
+  "btn_close": "關閉",
   "btn_confirm": "確定",
   "btn_save": "儲存",
   "cancel_button_text": "取消",
@@ -685,7 +686,8 @@
   "update__timeout_top": "下載時間過長提示\n\n你目前所在網路訪問GitHub較慢，新版本已經下了一個鐘了還沒完成😳，你仍可選擇繼續等，但牆裂建議手動更新版本！",
   "user_api__allow_show_update_alert": "允許顯示更新彈窗",
   "user_api__btn_export": "匯出",
-  "user_api__btn_import": "導入",
+  "user_api__btn_import": "本地導入",
+  "user_api__btn_import_online": "線上匯入",
   "user_api__btn_remove": "移除",
   "user_api__import_file": "選擇音樂API腳本文件",
   "user_api__init_failed_alert": "自訂來源 [{name}] 初始化失敗：",
@@ -695,5 +697,10 @@
   "user_api__readme": "來源編寫說明：",
   "user_api__title": "自訂來源管理",
   "user_api__update_alert": "自訂來源 [{name}] 發現新版本：",
-  "user_api__update_alert_open_url": "開啟更新地址"
+  "user_api__update_alert_open_url": "開啟更新地址",
+  "user_api_import__failed": "自訂來源導入失敗：\n{message}",
+  "user_api_import_online__input_confirm": "導入",
+  "user_api_import_online__input_loading": "導入中...",
+  "user_api_import_online__input_tip": "請輸入 HTTP 連結",
+  "user_api_import_online__title": "線上導入自訂來源"
 }

src/renderer/views/Setting/components/UserApiModal.vue

@@ -23,8 +23,10 @@ material-modal(:show="modelValue" bg-close teleport="#view" @close="handleClose"
         span.hover.underline(aria-label="https://lxmusic.toside.cn/desktop/custom-source" @click="handleOpenUrl('https://lyswhut.github.io/lx-music-doc/desktop/custom-source')") FAQ
       p {{ $t('user_api__note') }}
     div(:class="$style.footer")
+      base-btn(:class="$style.footerBtn" @click="isShowOnlineImportModal = true") {{ $t('user_api__btn_import_online') }}
       base-btn(:class="$style.footerBtn" @click="handleImport") {{ $t('user_api__btn_import') }}
       //- base-btn(:class="$style.footerBtn" @click="handleExport") {{ $t('user_api__btn_export') }}
+    UserApiOnlineImportModal(v-model:show="isShowOnlineImportModal" @import="importUserApi")
 </template>
 
 <script>
@@ -34,8 +36,15 @@ import { openUrl } from '@common/utils/electron'
 import apiSourceInfo from '@renderer/utils/musicSdk/api-source-info'
 import { userApi } from '@renderer/store'
 import { appSetting, updateSetting } from '@renderer/store/setting'
+import { ref } from '@common/utils/vueTools'
+import { dialog } from '@renderer/plugins/Dialog'
+
+import UserApiOnlineImportModal from './UserApiOnlineImportModal.vue'
 
 export default {
+  components: {
+    UserApiOnlineImportModal,
+  },
   props: {
     modelValue: {
       type: Boolean,
@@ -44,9 +53,11 @@ export default {
   },
   emits: ['update:modelValue'],
   setup() {
+    const isShowOnlineImportModal = ref(false)
     return {
       userApi,
       appSetting,
+      isShowOnlineImportModal,
     }
   },
   computed: {
@@ -55,6 +66,13 @@ export default {
     },
   },
   methods: {
+    async importUserApi(script) {
+      return importUserApi(script).then(({ apiList }) => {
+        userApi.list = apiList
+      }).catch((err) => {
+        void dialog(this.$t('user_api_import__failed', { message: err.message }))
+      })
+    },
     handleImport() {
       if (this.userApi.list.length > 20) {
         this.$dialog({
@@ -73,9 +91,7 @@ export default {
       }).then(async result => {
         if (result.canceled) return
         return readFile(result.filePaths[0]).then(async data => {
-          return importUserApi(data.toString()).then(({ apiList }) => {
+          return this.importUserApi(data.toString())
-            userApi.list = apiList
-          })
         })
       })
     },
@@ -110,8 +126,8 @@ export default {
 @import '@renderer/assets/styles/layout.less';
 
 .main {
-  padding: 15px;
+  padding: 15px 8px;
-  max-width: 400px;
+  max-width: 550px;
   min-width: 300px;
   display: flex;
   flex-flow: column nowrap;
@@ -142,6 +158,7 @@ export default {
   min-height: 100px;
   max-height: 100%;
   margin-top: 15px;
+  padding: 0 7px;
 }
 .listItem {
   display: flex;
@@ -201,6 +218,7 @@ export default {
   }
 }
 .note {
+  padding: 0 7px;
   margin-top: 15px;
   font-size: 12px;
   line-height: 1.25;
@@ -212,6 +230,7 @@ export default {
   }
 }
 .footer {
+  padding: 0 7px;
   margin-top: 15px;
   display: flex;
   flex-flow: row nowrap;

src/renderer/views/Setting/components/UserApiOnlineImportModal.vue

@@ -0,0 +1,130 @@
+<template>
+  <material-modal :show="show" teleport="#view" @close="handleClose" @after-enter="$refs.input.focus()">
+    <main :class="$style.main">
+      <h2>{{ $t('user_api_import_online__title') }}</h2>
+      <base-input
+        ref="input"
+        v-model="url"
+        :class="$style.input"
+        type="url"
+        :placeholder="$t('user_api_import_online__input_tip')"
+        @submit="handleSubmit" @blur="verify"
+      />
+      <div :class="$style.footer">
+        <base-btn :class="$style.btn" @click="handleClose">{{ $t('btn_close') }}</base-btn>
+        <base-btn :class="$style.btn" :disabled="disabled" @click="handleSubmit">{{ btnText }}</base-btn>
+      </div>
+    </main>
+  </material-modal>
+</template>
+
+<script>
+import { dialog } from '@renderer/plugins/Dialog'
+import { httpFetch } from '@renderer/utils/request'
+
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:show', 'import'],
+  data() {
+    return {
+      url: '',
+      disabled: false,
+      btnText: '',
+    }
+  },
+  watch: {
+    show(n) {
+      if (n) {
+        this.url = ''
+        this.disabled = false
+        this.btnText = this.$t('user_api_import_online__input_confirm')
+      }
+    },
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:show', false)
+    },
+    verify() {
+      if (!/^https?:\/\//.test(this.url)) this.url = ''
+      return this.url
+    },
+    async handleSubmit() {
+      let url = this.verify()
+      if (!url) return
+      this.disabled = true
+      this.btnText = this.$t('user_api_import_online__input_loading')
+      let script
+      try {
+        script = await httpFetch(url, { follow_max: 3 }).promise.then(resp => resp.body)
+      } catch (err) {
+        void dialog(this.$t('user_api_import__failed', { message: err.message }))
+        return
+      } finally {
+        this.disabled = false
+        this.btnText = this.$t('user_api_import_online__input_confirm')
+      }
+      if (script.length > 90000) {
+        void dialog(this.$t('user_api_import__failed', { message: 'Too large script' }))
+        return
+      }
+      this.$emit('import', script)
+      this.handleClose()
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.main {
+  padding: 0 15px;
+  width: 450px;
+  min-width: 280px;
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 0;
+  // max-height: 100%;
+  // overflow: hidden;
+  h2 {
+    font-size: 13px;
+    color: var(--color-font);
+    line-height: 1.3;
+    word-break: break-all;
+    // text-align: center;
+    padding: 15px 0 8px;
+  }
+}
+
+.input {
+  // width: 100%;
+  // height: 26px;
+  padding: 8px 8px;
+}
+.footer {
+  margin: 20px 0 15px auto;
+}
+.btn {
+  // box-sizing: border-box;
+  // margin-left: 15px;
+  // margin-bottom: 15px;
+  // height: 36px;
+  // line-height: 36px;
+  // padding: 0 10px !important;
+  min-width: 70px;
+  // .mixin-ellipsis-1;
+
+  +.btn {
+    margin-left: 10px;
+  }
+}
+
+
+</style>