优化界面

2026-03-15 08:13:16 +08:00 · 2026-01-21 16:45:59 +08:00
parent 43e2494f08
commit f686a15fd3
3 changed files with 254 additions and 128 deletions
--- a/xiaomusic/static/default/setting.css
+++ b/xiaomusic/static/default/setting.css
@@ -7,7 +7,9 @@ body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
@@ -195,7 +197,9 @@ body {
  font-size: 14px;
  color: #333;
  background-color: #fff;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
 }

 .setting-card input[type="text"]:focus,
@@ -225,7 +229,9 @@ body {
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
-  transition: background-color 0.3s ease, transform 0.1s ease;
+  transition:
+    background-color 0.3s ease,
+    transform 0.1s ease;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
@@ -354,7 +360,9 @@ button.mini-button {
 .advanced-config-content {
  max-height: 10000px;
  overflow: hidden;
-  transition: max-height 0.5s ease, opacity 0.3s ease;
+  transition:
+    max-height 0.5s ease,
+    opacity 0.3s ease;
  opacity: 1;
 }

@@ -395,7 +403,7 @@ button.mini-button {
 }

 .auth-tab-button::before {
-  content: '';
+  content: "";
  position: absolute;
  top: 0;
  left: 0;
@@ -504,13 +512,56 @@ button.mini-button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }

+/* 可折叠区域头部 */
+.section-header {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #f0f0f0;
+  transition: all 0.3s ease;
+}
+
+.section-header:hover {
+  border-bottom-color: #007bff;
+}
+
 .button-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
-  margin: 0 0 15px 0;
-  padding-bottom: 10px;
-  border-bottom: 2px solid #f0f0f0;
+  margin: 0;
+}
+
+.section-toggle-icon {
+  font-size: 16px;
+  font-weight: bold;
+  color: #007bff;
+  transition: transform 0.3s ease;
+  flex-shrink: 0;
+  margin-left: 10px;
+}
+
+.section-header.collapsed .section-toggle-icon {
+  transform: rotate(-90deg);
+}
+
+/* 可折叠内容区域 */
+.section-content {
+  max-height: 5000px;
+  overflow: hidden;
+  transition:
+    max-height 0.4s ease,
+    opacity 0.3s ease;
+  opacity: 1;
+}
+
+.section-content.collapsed {
+  max-height: 0;
+  opacity: 0;
 }

 .button-grid {
@@ -735,7 +786,9 @@ footer a:hover {
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
 }

 .qrcode:hover {
@@ -805,7 +858,9 @@ hr {
  color: #333;
  background-color: #fff;
  cursor: pointer;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
 }

 .file-upload-section input[type="file"]:hover {
@@ -920,21 +975,21 @@ hr {

 /* Material Icons 字体 */
@font-face {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
-  src: url(./materialicons.woff2) format('woff2');
+  src: url(./materialicons.woff2) format("woff2");
 }

@font-face {
-  font-family: 'Material Icons Outlined';
+  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
-  src: url(./materialiconsoutlined.woff2) format('woff2');
+  src: url(./materialiconsoutlined.woff2) format("woff2");
 }

 .material-icons {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
@@ -945,12 +1000,12 @@ hr {
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
+  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
 }

 .material-icons-outlined {
-  font-family: 'Material Icons Outlined';
+  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
@@ -961,6 +1016,6 @@ hr {
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
+  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
 }
--- a/xiaomusic/static/default/setting.html
+++ b/xiaomusic/static/default/setting.html
@@ -631,7 +631,11 @@

    <div class="setting-footer">
      <div class="button-section">
+        <div class="section-header collapsed" id="operationToggle">
          <h3 class="button-section-title">功能操作</h3>
+          <span class="section-toggle-icon">▼</span>
+        </div>
+        <div class="section-content collapsed" id="operationContent">
          <div class="button-grid">
            <button id="refresh_music_tag">
              <span class="material-icons">refresh</span>
@@ -653,9 +657,14 @@
            </a>
          </div>
        </div>
+      </div>

      <div class="button-section">
+        <div class="section-header collapsed" id="toolsToggle">
          <h3 class="button-section-title">工具链接</h3>
+          <span class="section-toggle-icon">▼</span>
+        </div>
+        <div class="section-content collapsed" id="toolsContent">
          <div class="link-grid">
            <a href="/docs" target="_blank" class="link-card">
              <div class="link-card-icon">
@@ -695,6 +704,7 @@
            </a>
          </div>
        </div>
+      </div>

      <div class="button-section">
        <h3 class="button-section-title">社区支持</h3>
--- a/xiaomusic/static/default/setting.js
+++ b/xiaomusic/static/default/setting.js
@@ -7,11 +7,11 @@ $(function () {

  // 遍历所有的select元素，默认选中只有1个选项的
  const autoSelectOne = () => {
-    $('select').each(function () {
+    $("select").each(function () {
      // 如果select元素仅有一个option子元素
-      if ($(this).children('option').length === 1) {
+      if ($(this).children("option").length === 1) {
        // 选中这个option
-        $(this).find('option').prop('selected', true);
+        $(this).find("option").prop("selected", true);
      }
    });
  };
@@ -21,11 +21,13 @@ $(function () {
    $(selector).empty();

    // 将 mi_did 字符串通过逗号分割转换为数组，以便于判断默认选中项
-    var selected_dids = mi_did.split(',');
+    var selected_dids = mi_did.split(",");

    //如果device_list为空，则可能是未设置小米账号密码或者已设置密码，但是没有过小米验证，此处需要提示用户
    if (device_list.length == 0) {
-      const loginTips = accountPassValid ? `<div class="login-tips">未发现可用的小爱设备，请检查账号密码是否输错，并关闭加速代理或在<a href="https://www.mi.com">小米官网</a>登陆过人脸或滑块验证。如仍未解决。请根据<a href="https://github.com/hanxi/xiaomusic/issues/99">FAQ</a>的内容解决问题。</div>` : `<div class="login-tips">未发现可用的小爱设备，请先在下面的输入框中设置小米的<b>账号、密码或者cookie</b></div>`;
+      const loginTips = accountPassValid
+        ? `<div class="login-tips">未发现可用的小爱设备，请检查账号密码是否输错，并关闭加速代理或在<a href="https://www.mi.com">小米官网</a>登陆过人脸或滑块验证。如仍未解决。请根据<a href="https://github.com/hanxi/xiaomusic/issues/99">FAQ</a>的内容解决问题。</div>`
+        : `<div class="login-tips">未发现可用的小爱设备，请先在下面的输入框中设置小米的<b>账号、密码或者cookie</b></div>`;
      $(selector).append(loginTips);
      return;
    }
@@ -34,20 +36,20 @@ $(function () {
      var hardware = device.hardware;
      var name = device.name;
      // 创建复选框元素
-      var checkbox = $('<input>', {
-        type: 'checkbox',
+      var checkbox = $("<input>", {
+        type: "checkbox",
        id: did,
        value: `${did}`,
-        class: 'custom-checkbox', // 添加样式类
+        class: "custom-checkbox", // 添加样式类
        // 如果mi_did中包含了该did，则默认选中
-        checked: selected_dids.indexOf(did) !== -1
+        checked: selected_dids.indexOf(did) !== -1,
      });

      // 创建标签元素
-      var label = $('<label>', {
+      var label = $("<label>", {
        for: did,
-        class: 'checkbox-label', // 添加样式类
-        text: `【${hardware} ${did}】${name}` // 设定标签内容
+        class: "checkbox-label", // 添加样式类
+        text: `【${hardware} ${did}】${name}`, // 设定标签内容
      });

      // 将复选框和标签添加到目标选择器元素中
@@ -59,12 +61,12 @@ $(function () {
    var selectedDids = [];

    // 仅选择给定容器中选中的复选框
-    $(containerSelector + ' .custom-checkbox:checked').each(function () {
+    $(containerSelector + " .custom-checkbox:checked").each(function () {
      var did = this.value;
      selectedDids.push(did);
    });

-    return selectedDids.join(',');
+    return selectedDids.join(",");
  }

  // 拉取现有配置
@@ -78,9 +80,9 @@ $(function () {
      const $element = $("#" + key);
      if ($element.length) {
        if (data[key] === true) {
-          $element.val('true');
+          $element.val("true");
        } else if (data[key] === false) {
-          $element.val('false');
+          $element.val("false");
        } else {
          $element.val(data[key]);
        }
@@ -91,8 +93,8 @@ $(function () {
  });

  $(".save-button").on("click", () => {
-    var setting = $('#setting');
-    var inputs = setting.find('input, select, textarea');
+    var setting = $("#setting");
+    var inputs = setting.find("input, select, textarea");
    var data = {};
    inputs.each(function () {
      var id = this.id;
@@ -102,7 +104,7 @@ $(function () {
    });
    var did_list = getSelectedDids("#mi_did");
    data["mi_did"] = did_list;
-    console.log(data)
+    console.log(data);

    $.ajax({
      type: "POST",
@@ -115,7 +117,7 @@ $(function () {
      },
      error: (msg) => {
        alert(msg);
-      }
+      },
    });
  });

@@ -141,7 +143,7 @@ $(function () {
      error: (res) => {
        console.log(res);
        alert(res);
-      }
+      },
    });
  });

@@ -157,12 +159,12 @@ $(function () {
      error: (res) => {
        console.log(res);
        alert(res);
-      }
+      },
    });
  });

  $("#upload_yt_dlp_cookie").on("click", () => {
-    var fileInput = document.getElementById('yt_dlp_cookies_file');
+    var fileInput = document.getElementById("yt_dlp_cookies_file");
    var file = fileInput.files[0]; // 获取文件对象
    if (file) {
      var formData = new FormData();
@@ -180,14 +182,13 @@ $(function () {
        error: function (jqXHR, textStatus, errorThrown) {
          console.log(res);
          alert("上传失败");
-        }
+        },
      });
    } else {
      alert("请选择一个文件");
    }
  });

-
  $("#clear_cache").on("click", () => {
    localStorage.clear();
    alert("清除成功");
@@ -204,7 +205,7 @@ $(function () {
      },
      error: (msg) => {
        alert(msg);
-      }
+      },
    });
  });

@@ -218,11 +219,10 @@ $(function () {
    }
  });

-
  $("#auto-hostname").on("click", () => {
    const protocol = window.location.protocol;
    const hostname = window.location.hostname;
-    if (hostname == '127.0.0.1' || hostname == 'localhost') {
+    if (hostname == "127.0.0.1" || hostname == "localhost") {
      alert("hostname 不能是 127.0.0.1 或者 localhost");
    }
    const baseUrl = `${protocol}//${hostname}`;
@@ -234,7 +234,7 @@ $(function () {
    const port = window.location.port;
    if (port == 0) {
      const protocol = window.location.protocol;
-      if (protocol == 'https:') {
+      if (protocol == "https:") {
        port = 443;
      } else {
        port = 80;
@@ -286,4 +286,65 @@ $(function () {
    $("#tab-" + tabName).addClass("active");
  });

+  // 功能操作区域折叠功能
+  const operationToggle = $("#operationToggle");
+  const operationContent = $("#operationContent");
+
+  // 从localStorage读取折叠状态，默认折叠
+  const operationCollapsedState = localStorage.getItem("operationCollapsed");
+  const isOperationCollapsed =
+    operationCollapsedState === null || operationCollapsedState === "true";
+
+  // 初始化状态
+  if (!isOperationCollapsed) {
+    // 如果用户之前展开过，则移除 collapsed 类
+    operationToggle.removeClass("collapsed");
+    operationContent.removeClass("collapsed");
+  }
+
+  // 点击切换折叠状态
+  operationToggle.on("click", function () {
+    const willCollapse = !operationToggle.hasClass("collapsed");
+
+    if (willCollapse) {
+      operationToggle.addClass("collapsed");
+      operationContent.addClass("collapsed");
+      localStorage.setItem("operationCollapsed", "true");
+    } else {
+      operationToggle.removeClass("collapsed");
+      operationContent.removeClass("collapsed");
+      localStorage.setItem("operationCollapsed", "false");
+    }
+  });
+
+  // 工具链接区域折叠功能
+  const toolsToggle = $("#toolsToggle");
+  const toolsContent = $("#toolsContent");
+
+  // 从localStorage读取折叠状态，默认折叠
+  const toolsCollapsedState = localStorage.getItem("toolsCollapsed");
+  const isToolsCollapsed =
+    toolsCollapsedState === null || toolsCollapsedState === "true";
+
+  // 初始化状态
+  if (!isToolsCollapsed) {
+    // 如果用户之前展开过，则移除 collapsed 类
+    toolsToggle.removeClass("collapsed");
+    toolsContent.removeClass("collapsed");
+  }
+
+  // 点击切换折叠状态
+  toolsToggle.on("click", function () {
+    const willCollapse = !toolsToggle.hasClass("collapsed");
+
+    if (willCollapse) {
+      toolsToggle.addClass("collapsed");
+      toolsContent.addClass("collapsed");
+      localStorage.setItem("toolsCollapsed", "true");
+    } else {
+      toolsToggle.removeClass("collapsed");
+      toolsContent.removeClass("collapsed");
+      localStorage.setItem("toolsCollapsed", "false");
+    }
+  });
 });