GitHub/xiaomusic
1
0
Fork 0
mirror of https://github.com/hanxi/xiaomusic.git synced 2026-03-15 08:13:16 +08:00
Code Packages Releases Activity

优化界面

Browse Source
This commit is contained in:
涵曦
2026-01-21 16:45:59 +08:00
parent 43e2494f08
commit f686a15fd3
3 changed files with 254 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
xiaomusic/static/default/setting.css vendored
View File

@@ -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;
@@ -77,20 +79,20 @@ body {
.setting-header {
padding: 15px;
}
.header-inner {
flex-direction: column;
align-items: stretch;
}
.setting-header h2 {
font-size: 20px;
}
.header-buttons {
width: 100%;
}
.header-buttons button {
flex: 1;
min-width: 0;
@@ -142,7 +144,7 @@ body {
padding: 15px;
margin-bottom: 15px;
}
.card-title {
font-size: 16px;
}
@@ -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;
@@ -266,14 +272,14 @@ button.mini-button {
padding: 12px 16px;
min-height: 44px;
}
.setting-card button.mini-button,
button.mini-button {
padding: 8px 12px !important;
font-size: 13px !important;
min-height: 36px !important;
}
.mini-button .material-icons {
font-size: 16px !important;
}
@@ -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;
@@ -472,13 +480,13 @@ button.mini-button {
gap: 8px;
padding: 4px;
}
.auth-tab-button {
padding: 12px 12px !important;
font-size: 13px !important;
gap: 6px;
}
.auth-tab-button .material-icons {
font-size: 18px !important;
}
@@ -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 {
@@ -631,46 +682,46 @@ button.mini-button {
.setting-footer {
padding: 0 15px 30px;
}
.button-section {
padding: 15px;
margin-bottom: 15px;
}
.button-section-title {
font-size: 15px;
}
.button-grid {
grid-template-columns: repeat(2, 1fr);
}
.link-grid {
grid-template-columns: repeat(2, 1fr);
}
.button-grid button {
min-height: 44px;
}
.link-card {
padding: 14px;
min-height: 60px;
}
.link-card-icon {
width: 36px;
height: 36px;
}
.link-card-icon .material-icons {
font-size: 20px;
}
.link-card-title {
font-size: 14px;
}
.link-card-description {
font-size: 12px;
}
@@ -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 {
@@ -747,7 +800,7 @@ footer a:hover {
.community-buttons-grid {
grid-template-columns: 1fr;
}
.qrcode {
max-width: 240px;
}
@@ -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 {
@@ -839,12 +894,12 @@ hr {
.file-upload-section {
gap: 10px;
}
.file-upload-section input[type="file"] {
flex: 1;
min-width: 0;
}
.file-upload-section button {
flex-shrink: 0;
min-width: 120px;
@@ -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;
}

124
xiaomusic/static/default/setting.html vendored
View File

@@ -631,68 +631,78 @@
<div class="setting-footer">
<div class="button-section">
<h3 class="button-section-title">功能操作</h3>
<div class="button-grid">
<button id="refresh_music_tag">
<span class="material-icons">refresh</span>
<span>刷新tag</span>
</button>
<button id="clear_cache">
<span class="material-icons">delete_sweep</span>
<span>清空缓存</span>
</button>
<button id="cleantempdir">
<span class="material-icons">folder_delete</span>
<span>清空临时目录</span>
</button>
<a href="/downloadlog" download="xiaomusic.txt">
<button>
<span class="material-icons">download</span>
<span>下载日志文件</span>
<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>
<span>刷新tag</span>
</button>
</a>
<button id="clear_cache">
<span class="material-icons">delete_sweep</span>
<span>清空缓存</span>
</button>
<button id="cleantempdir">
<span class="material-icons">folder_delete</span>
<span>清空临时目录</span>
</button>
<a href="/downloadlog" download="xiaomusic.txt">
<button>
<span class="material-icons">download</span>
<span>下载日志文件</span>
</button>
</a>
</div>
</div>
</div>
<div class="button-section">
<h3 class="button-section-title">工具链接</h3>
<div class="link-grid">
<a href="/docs" target="_blank" class="link-card">
<div class="link-card-icon">
<span class="material-icons">description</span>
</div>
<div class="link-card-content">
<div class="link-card-title">接口文档</div>
<div class="link-card-description">查看 API 接口文档</div>
</div>
</a>
<a href="./m3u.html" target="_blank" class="link-card">
<div class="link-card-icon">
<span class="material-icons">swap_horiz</span>
</div>
<div class="link-card-content">
<div class="link-card-title">m3u转换</div>
<div class="link-card-description">转换 m3u 播放列表格式</div>
</div>
</a>
<a href="./downloadtool.html" target="_blank" class="link-card">
<div class="link-card-icon">
<span class="material-icons">cloud_download</span>
</div>
<div class="link-card-content">
<div class="link-card-title">歌曲下载工具</div>
<div class="link-card-description">在线搜索并下载歌曲</div>
</div>
</a>
<a href="./merge/index.html" target="_blank" class="link-card">
<div class="link-card-icon">
<span class="material-icons">merge_type</span>
</div>
<div class="link-card-content">
<div class="link-card-title">歌单合并工具</div>
<div class="link-card-description">合并多个歌单文件</div>
</div>
</a>
<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">
<span class="material-icons">description</span>
</div>
<div class="link-card-content">
<div class="link-card-title">接口文档</div>
<div class="link-card-description">查看 API 接口文档</div>
</div>
</a>
<a href="./m3u.html" target="_blank" class="link-card">
<div class="link-card-icon">
<span class="material-icons">swap_horiz</span>
</div>
<div class="link-card-content">
<div class="link-card-title">m3u转换</div>
<div class="link-card-description">转换 m3u 播放列表格式</div>
</div>
</a>
<a href="./downloadtool.html" target="_blank" class="link-card">
<div class="link-card-icon">
<span class="material-icons">cloud_download</span>
</div>
<div class="link-card-content">
<div class="link-card-title">歌曲下载工具</div>
<div class="link-card-description">在线搜索并下载歌曲</div>
</div>
</a>
<a href="./merge/index.html" target="_blank" class="link-card">
<div class="link-card-icon">
<span class="material-icons">merge_type</span>
</div>
<div class="link-card-content">
<div class="link-card-title">歌单合并工具</div>
<div class="link-card-description">合并多个歌单文件</div>
</div>
</a>
</div>
</div>
</div>

123
xiaomusic/static/default/setting.js vendored
View File

@@ -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;
@@ -276,14 +276,75 @@ $(function () {
// Tab 切换功能
$(".auth-tab-button").on("click", function () {
const tabName = $(this).data("tab");
// 移除所有 active 类
$(".auth-tab-button").removeClass("active");
$(".auth-tab-content").removeClass("active");
// 添加当前 active 类
$(this).addClass("active");
$("#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");
}
});
});