feat: 默认UI搜索框动态显示 (#228)

xiaomusic/static/default/app.js

@@ -117,8 +117,7 @@ $(function(){
     });
   });
 
-  // 拉取播放列表
+  function _refresh_music_list(callback) {
-  function refresh_music_list() {
     $('#music_list').empty();
     $.get("/musiclist", function(data, status) {
       console.log(data, status);
@@ -151,13 +150,35 @@ $(function(){
           }
         }
       })
+      callback();
     })
+  }
 
+  // 拉取播放列表
+  function refresh_music_list() {
+    // 刷新列表时清空并临时禁用搜索框
+    const searchInput = document.getElementById('search');
+    const oriPlaceHolder = searchInput.placeholder
+    const oriValue = searchInput.value
+    const inputEvent = new Event('input', { bubbles: true });
+    searchInput.value = '';
+    // 分发事件，让其他控件改变状态
+    searchInput.dispatchEvent(inputEvent);
+    searchInput.disabled = true;
+    searchInput.placeholder = '请等待...';
+
+    _refresh_music_list(() => {
+      // 刷新完成再启用
+      searchInput.disabled = false;
+      searchInput.value = oriValue
+      searchInput.dispatchEvent(inputEvent);
+      searchInput.placeholder = oriPlaceHolder;
       // 每3秒获取下正在播放的音乐
       get_playing_music();
       setInterval(() => {
         get_playing_music();
       }, 3000);
+    });
   }
 
   $("#play_music_list").on("click", () => {
@@ -291,32 +312,27 @@ $(function(){
 
   const searchInput = document.getElementById('search');
   const musicSelect = document.getElementById('music-name');
+  const musicSelectLabel = document.getElementById('music-name-label');
 
   searchInput.addEventListener('input', debounce(function() {
     const query = searchInput.value.trim();
 
     if (query.length === 0) {
       musicSelect.innerHTML = '';
+      musicSelect.style.display = 'none'
+      musicSelectLabel.style.display = 'none'
       return;
     }
 
+    musicSelect.style.display = 'block'
+    musicSelectLabel.style.display = 'block'
     fetch(`/searchmusic?name=${encodeURIComponent(query)}`)
       .then(response => response.json())
       .then(data => {
         musicSelect.innerHTML = ''; // 清空现有选项
 
-        // 添加用户输入作为一个选项
+        // 找到的优先显示
-        const userOption = document.createElement('option');
+        if (data.length > 0) {
-        userOption.value = query;
-        userOption.textContent = `使用关键词联网搜索: ${query}`;
-        musicSelect.appendChild(userOption);
-
-        if (data.length === 0) {
-          const option = document.createElement('option');
-          option.textContent = '没有匹配的结果';
-          option.disabled = true;
-          musicSelect.appendChild(option);
-        } else {
           data.forEach(song => {
             const option = document.createElement('option');
             option.value = song
@@ -324,12 +340,57 @@ $(function(){
             musicSelect.appendChild(option);
           });
         }
+
+        // 添加用户输入作为一个选项
+        const userOption = document.createElement('option');
+        userOption.value = query;
+        userOption.textContent = `使用关键词联网搜索: ${query}`;
+        musicSelect.appendChild(userOption);
+
+        // 提示没找到
+        if (data.length === 0) {
+          const option = document.createElement('option');
+          option.textContent = '没有匹配的结果';
+          option.disabled = true;
+          musicSelect.appendChild(option);
+        }
       })
       .catch(error => {
           console.error('Error fetching data:', error);
       });
   }, 300));
 
+  // 动态显示保存文件名输入框
+  const musicNameSelect = document.getElementById('music-name');
+  const musicFilenameInput = document.getElementById('music-filename');
+  function updateInputVisibility() {
+    const selectedOption = musicNameSelect.options[musicNameSelect.selectedIndex];
+    var startsWithKeyword;
+    if (musicNameSelect.options.length === 0) {
+      startsWithKeyword = false;
+    } else {
+      startsWithKeyword = selectedOption.text.startsWith('使用关键词联网搜索:');
+    }
+    
+    if (startsWithKeyword) {
+      musicFilenameInput.style.display = 'block';
+      musicFilenameInput.placeholder = '请输入保存为的文件名称(默认:' + selectedOption.value + ')';
+    } else {
+      musicFilenameInput.style.display = 'none';
+    }
+  }
+  // 观察元素修改
+  const observer = new MutationObserver((mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (mutation.type === 'childList') {
+        updateInputVisibility()
+      }
+    }
+  });
+  observer.observe(musicNameSelect, { childList: true });
+  // 监听用户输入
+  musicNameSelect.addEventListener('change', updateInputVisibility);
+
   function get_playing_music() {
     $.get(`/playingmusic?did=${did}`, function(data, status) {
       console.log(data);

xiaomusic/static/default/index.html

@@ -53,12 +53,12 @@ var vConsole = new window.VConsole();
       <label for="search">搜索歌曲:</label>
       <input type="text" id="search" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)">
 
-      <label for="music-name">确认选择:</label>
+      <label for="music-name" id="music-name-label" style="display: none;">确认选择:</label>
-      <select id="music-name">
+      <select id="music-name" style="display: none;">
           <!-- 动态生成选项 -->
       </select>
 
-      <input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)"></input>
+      <input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)" style="display: none;"></input>
       <div style="display: flex; align-items: center">
         <progress id="progress" value="0" max="100" style="width: 270px"></progress>
         <div id="play-time" style="margin-left: 10px">00:00/00:00</div>