feat: allow customizing UNM's sources (#1134)

* feat(ipcMain/unm): allow passing customized source

* feat(utils/Player): pass settings.unmSource

According to c280221a44608777a69038306a6ea8e92953fb9a,
we can let users customize their desired source now.

* feat(views/settings): allow configuring sources

We haven't supported specifying the environment variable in YPM yet.

src/views/settings.vue

@@ -222,6 +222,58 @@
         </div>
       </div>
 
+      <section v-if="isElectron" class="unm-configuration">
+        <h3>UnblockNeteaseMusic 设定</h3>
+        <div class="item">
+          <div class="left">
+            <div class="title"
+              >启用
+              <a
+                href="https://github.com/UnblockNeteaseMusic/server"
+                target="blank"
+                >UnblockNeteaseMusic</a
+              ></div
+            >
+          </div>
+          <div class="right">
+            <div class="toggle">
+              <input
+                id="enable-unblock-netease-music"
+                v-model="enableUnblockNeteaseMusic"
+                type="checkbox"
+                name="enable-unblock-netease-music"
+              />
+              <label for="enable-unblock-netease-music"></label>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="left">
+            <div class="title"> 备选音源 </div>
+            <div class="description">
+              音源的具体代号
+              <a
+                href="https://github.com/UnblockNeteaseMusic/server#音源清单"
+                target="_blank"
+              >
+                可以点此到 UNM 的说明页面查询 </a
+              ><br />
+              多个音源请用 <code>,</code> 逗号分隔。<br />
+              留空则使用 UNM 内置的默认值。
+            </div>
+          </div>
+          <div class="right">
+            <input
+              id="unm-source"
+              v-model="unmSource"
+              class="text-input"
+              placeholder="例 bilibili, kuwo"
+            />
+            <label for="unm-source"></label>
+          </div>
+        </div>
+      </section>
+
       <h3>第三方</h3>
       <div class="item">
         <div class="left">
@@ -240,29 +292,6 @@
           <button v-else @click="lastfmConnect()"> 授权连接 </button>
         </div>
       </div>
-      <div v-if="isElectron" class="item">
-        <div class="left">
-          <div class="title"
-            >启用
-            <a
-              href="https://github.com/UnblockNeteaseMusic/server"
-              target="blank"
-              >UnblockNeteaseMusic</a
-            ></div
-          >
-        </div>
-        <div class="right">
-          <div class="toggle">
-            <input
-              id="enable-unblock-netease-music"
-              v-model="enableUnblockNeteaseMusic"
-              type="checkbox"
-              name="enable-unblock-netease-music"
-            />
-            <label for="enable-unblock-netease-music"></label>
-          </div>
-        </div>
-      </div>
       <div v-if="isElectron" class="item">
         <div class="left">
           <div class="title">
@@ -852,6 +881,21 @@ export default {
         });
       },
     },
+    unmSource: {
+      /**
+       * @returns {string}
+       */
+      get() {
+        return this.settings.unmSource || '';
+      },
+      /** @param {string?} value */
+      set(value) {
+        this.$store.commit('updateSettings', {
+          key: 'unmSource',
+          value: value.length ? value : null,
+        });
+      },
+    },
     isLastfmConnected() {
       return this.lastfm.key !== undefined;
     },
@@ -1128,6 +1172,12 @@ h3 {
     font-weight: 500;
     opacity: 0.78;
   }
+
+  .description {
+    font-size: 14px;
+    margin-top: 0.5em;
+    opacity: 0.7;
+  }
 }
 
 select {