feat: 支持自动填 ip 和端口

hanxi · Jan 7, 2025 · d244575 · d244575
1 parent a816157
commit d244575
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 36 deletions.
diff --git a/xiaomusic/static/default/debug.html b/xiaomusic/static/default/debug.html
@@ -6,9 +6,9 @@
     <meta name="viewport" content="width=device-width">
     <title>Debug For XiaoMusic</title>
 
-    <link rel="stylesheet" type="text/css" href="./main.css?version=1735989367">
+    <link rel="stylesheet" type="text/css" href="./main.css?version=1736209939">
     <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
-    <script src="./jquery-3.7.1.min.js?version=1735989367"></script>
+    <script src="./jquery-3.7.1.min.js?version=1736209939"></script>
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

diff --git a/xiaomusic/static/default/downloadtool.html b/xiaomusic/static/default/downloadtool.html
@@ -4,8 +4,8 @@
 		<meta charset="UTF-8">
     <meta name="viewport" content="width=device-width">
 		<title>歌曲下载工具</title>
-    <link rel="stylesheet" type="text/css" href="./main.css?version=1735989367">
-    <script src="./jquery-3.7.1.min.js?version=1735989367"></script>
+    <link rel="stylesheet" type="text/css" href="./main.css?version=1736209939">
+    <script src="./jquery-3.7.1.min.js?version=1736209939"></script>
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

diff --git a/xiaomusic/static/default/index.html b/xiaomusic/static/default/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>小爱音箱操控面板</title>
     <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
-    <script src="./jquery-3.7.1.min.js?version=1735989367"></script>
-    <link rel="stylesheet" href="./main.css?version=1735989367">
+    <script src="./jquery-3.7.1.min.js?version=1736209939"></script>
+    <link rel="stylesheet" href="./main.css?version=1736209939">
     <link rel="icon" href="./favicon.ico">
 
     <!-- Google tag (gtag.js) -->
@@ -220,7 +220,7 @@ <h2>更新</h2>
       Powered by XiaoMusic
     </div>
 
-    <script src="./md.js?version=1735989367">
+    <script src="./md.js?version=1736209939">
     </script>
 </body>
 

diff --git a/xiaomusic/static/default/m3u.html b/xiaomusic/static/default/m3u.html
@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width">
     <title>M3U to JSON Converter</title>
-    <link rel="stylesheet" type="text/css" href="./main.css?version=1735989367">
+    <link rel="stylesheet" type="text/css" href="./main.css?version=1736209939">
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

diff --git a/xiaomusic/static/default/main.css b/xiaomusic/static/default/main.css
@@ -351,3 +351,8 @@ span,p {
   margin-left: auto;
   text-decoration: none;
 }
+
+.setting-label {
+  display: flex;
+  align-items: center;
+}
diff --git a/xiaomusic/static/default/setting.html b/xiaomusic/static/default/setting.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width">
     <title>小爱音箱操控面板</title>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <script src="./jquery-3.7.1.min.js?version=1735989367"></script>
-    <script src="./setting.js?version=1735989367"></script>
-    <link rel="stylesheet" type="text/css" href="./main.css?version=1735989367">
+    <script src="./jquery-3.7.1.min.js?version=1736209939"></script>
+    <script src="./setting.js?version=1736209939"></script>
+    <link rel="stylesheet" type="text/css" href="./main.css?version=1736209939">
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>
@@ -50,10 +50,20 @@ <h2>小爱音箱设置面板
         <label for="password">*小米密码:</label>
         <input id="password" type="password" placeholder="填写小米登录密码" />
 
-        <label for="hostname">*XIAOMUSIC_HOSTNAME(NAS的IP或域名):</label>
+        <label for="hostname" class="setting-label">*NAS的IP或域名:
+          <button class="option-inline mini-button" id="auto-hostname">
+            <span class="material-icons">sync_alt</span>
+            <span>自动填</span>
+          </button>
+        </label>
         <input id="hostname" type="text" />
 
-        <label for="public_port">*本地端口(0表示跟容器端口一致):</label>
+        <label for="public_port" class="setting-label">*本地端口:
+          <button class="option-inline mini-button" id="auto-port">
+            <span class="material-icons">sync_alt</span>
+            <span>自动填</span>
+          </button>
+        </label>
         <input id="public_port" type="number" value="0" />
       </div>
       <hr>
@@ -229,7 +239,7 @@ <h2>小爱音箱设置面板
         <label for="recently_added_playlist_len">最近新增的歌曲数量:</label>
         <input id="recently_added_playlist_len" type="number" value="50" />
 
-        <label for="music_list_url" style="display: flex;align-items: center;">歌单地址:
+        <label for="music_list_url"  class="setting-label">歌单地址:
           <button class="option-inline mini-button" id="get_music_list">
             <span class="material-icons">sync_alt</span>
             <span>获取歌单</span>

diff --git a/xiaomusic/static/default/setting.js b/xiaomusic/static/default/setting.js
@@ -1,13 +1,13 @@
-$(function(){
+$(function () {
   // 拉取版本
-  $.get("/getversion", function(data, status) {
+  $.get("/getversion", function (data, status) {
     console.log(data, status, data["version"]);
     $("#version").text(`${data.version}`);
   });
 
   // 遍历所有的select元素，默认选中只有1个选项的
   const autoSelectOne = () => {
-    $('select').each(function() {
+    $('select').each(function () {
       // 如果select元素仅有一个option子元素
       if ($(this).children('option').length === 1) {
         // 选中这个option
@@ -16,7 +16,7 @@ $(function(){
     });
   };
 
-  function updateCheckbox(selector, mi_did, device_list,accountPassValid) {
+  function updateCheckbox(selector, mi_did, device_list, accountPassValid) {
     // 清除现有的内容
     $(selector).empty();
 
@@ -29,7 +29,7 @@ $(function(){
       $(selector).append(loginTips);
       return;
     }
-    $.each(device_list, function(index, device) {
+    $.each(device_list, function (index, device) {
       var did = device.miotDID;
       var hardware = device.hardware;
       var name = device.name;
@@ -59,7 +59,7 @@ $(function(){
     var selectedDids = [];
 
     // 仅选择给定容器中选中的复选框
-    $(containerSelector + ' .custom-checkbox:checked').each(function() {
+    $(containerSelector + ' .custom-checkbox:checked').each(function () {
       var did = this.value;
       selectedDids.push(did);
     });
@@ -68,23 +68,23 @@ $(function(){
   }
 
   // 拉取现有配置
-  $.get("/getsetting?need_device_list=true", function(data, status) {
+  $.get("/getsetting?need_device_list=true", function (data, status) {
     console.log(data, status);
     const accountPassValid = data.account && data.password;
     updateCheckbox("#mi_did", data.mi_did, data.device_list, accountPassValid);
 
     // 初始化显示
     for (const key in data) {
-        const $element = $("#" + key);
-        if ($element.length) {
-          if (data[key] === true) {
-            $element.val('true');
-          } else if (data[key] === false) {
-            $element.val('false');
-          } else {
-            $element.val(data[key]);
-          }
+      const $element = $("#" + key);
+      if ($element.length) {
+        if (data[key] === true) {
+          $element.val('true');
+        } else if (data[key] === false) {
+          $element.val('false');
+        } else {
+          $element.val(data[key]);
         }
+      }
     }
 
     autoSelectOne();
@@ -94,7 +94,7 @@ $(function(){
     var setting = $('#setting');
     var inputs = setting.find('input, select, textarea');
     var data = {};
-    inputs.each(function() {
+    inputs.each(function () {
       var id = this.id;
       if (id) {
         data[id] = $(this).val();
@@ -173,32 +173,47 @@ $(function(){
         data: formData,
         processData: false,
         contentType: false,
-        success: function(res) {
+        success: function (res) {
           console.log(res);
           alert("上传成功");
         },
-        error: function(jqXHR, textStatus, errorThrown) {
+        error: function (jqXHR, textStatus, errorThrown) {
           console.log(res);
           alert("上传失败");
         }
       });
     } else {
-        alert("请选择一个文件");
+      alert("请选择一个文件");
     }
   });
 
 
   $("#clear_cache").on("click", () => {
     localStorage.clear();
   });
-  $("#hostname").on("change", function(){
+  $("#hostname").on("change", function () {
     const hostname = $(this).val();
     // 检查是否包含端口号（1到5位数字）
     if (hostname.match(/:\d{1,5}$/)) {
       alert("hostname禁止带端口号");
       // 移除端口号
-      $(this).val(hostname.replace(/:\d{1,5}$/,""));
+      $(this).val(hostname.replace(/:\d{1,5}$/, ""));
     }
   });
 
+
+  $("#auto-hostname").on("click", () => {
+    const protocol = window.location.protocol;
+    const hostname = window.location.hostname;
+    const baseUrl = `${protocol}//${hostname}`;
+    console.log(baseUrl);
+    $("#hostname").val(baseUrl);
+  });
+
+  $("#auto-port").on("click", () => {
+    const port = window.location.port;
+    console.log(port);
+    $("#public_port").val(port);
+  });
+
 });