ar0c/xiaomusic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化配置界面，支持配置分组

Browse Source
This commit is contained in:
涵曦 2024-07-11 03:40:10 +00:00
parent 043a9303a5
commit e9b1d94fb3
5 changed files with 20 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
xiaomusic/config.py
View File

@ -132,7 +132,7 @@ class Config:
devices: dict[str, Device] = field(default_factory=dict)
group_list: str = os.getenv(
"XIAOMUSIC_GROUP_LIST", ""
) # did2:group_name,did2:group_name
) # did1:group_name,did2:group_name
def append_keyword(self, keys, action):
for key in keys.split(","):

2
xiaomusic/static/index.html
View File

@ -7,10 +7,12 @@
<script src="/static/app.js"></script>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<!--
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
var vConsole = new window.VConsole();
</script>
-->
</head>
<body>

3
xiaomusic/static/setting.html
View File

@ -46,6 +46,9 @@ var vConsole = new window.VConsole();
<option value="false">false</option>
</select>
<label for="group_list">设备分组配置:</label>
<input id="group_list" type="text" placeholder="did1:组名1,did2:组名1,did3:组名2"></input>
<label for="music_path">音乐目录:</label>
<input id="music_path" type="text" value="music"></input>

2
xiaomusic/static/setting.js
View File

@ -41,7 +41,7 @@ $(function(){
var label = $('<label>', {
for: did,
class: 'checkbox-label', // 添加样式类
text: `【${hardware}】${name}` // 设定标签内容
text: `【${hardware} ${did}】${name}` // 设定标签内容
});
// 将复选框和标签添加到目标选择器元素中

44
xiaomusic/static/style.css
View File

@ -78,40 +78,22 @@ footer {
height: 200px;
}
/* 隐藏原生复选框 */
.custom-checkbox {
display: none;
display: inline-block;
margin: 10px;
width: 20px;
height: 20px;
vertical-align: middle; /* 确保与标签垂直居中对齐 */
}
/* 修改后的自定义复选框外观 */
.checkbox-label {
display: inline-block;
width: 200px; /* 宽度 */
height: 20px; /* 高度 */
background-color: #fff; /* 背景颜色 */
border: 0px solid #ccc; /* 边框 */
border-radius: 3px; /* 圆角边框 */
position: relative; /* 设置相对定位 */
cursor: pointer; /* 鼠标形状 */
padding-left: 40px; /* 给左边的复选框图标留下空位 */
width: 260px;
background-color: #fff;
border: 0px solid #ccc;
border-radius: 3px;
position: relative;
cursor: pointer;
vertical-align: middle; /* 确保与复选框垂直居中对齐 */
margin-left: 1px; /* 给复选框和标签之间一些距离，如果需要的话 */
}
/* 对勾的样式 */
.custom-checkbox:checked + .checkbox-label::after {
content: '✔';
position: absolute;
left: 10px; /* 对勾图标靠左侧位置 */
color: #000; /* 对勾颜色 */
font-size: 18px; /* 对勾字体大小，视清晰度需调整 */
}
/* 标签文本样式，使用 ::before 伪元素表示复选框未选中时的样式 */
.custom-checkbox + .checkbox-label::before {
content: '⬜'; /* 表示未选中时的复选框样式，这里用了白色方块 */
position: absolute;
left: 8px; /* 方块图标靠左侧位置 */
top: 1px; /* 方块图标顶部位置 */
color: #000; /* 方块颜色 */
font-size: 18px; /* 方块字体大小，视清晰度需调整 */
}