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

hanxi · Jul 11, 2024 · e9b1d94 · e9b1d94
1 parent 043a930
commit e9b1d94
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 33 deletions.
diff --git a/xiaomusic/config.py b/xiaomusic/config.py
@@ -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(","):

diff --git a/xiaomusic/static/index.html b/xiaomusic/static/index.html
@@ -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>

diff --git a/xiaomusic/static/setting.html b/xiaomusic/static/setting.html
@@ -46,6 +46,9 @@ <h2>小爱音箱设置面板
         <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>
 

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

diff --git a/xiaomusic/static/style.css b/xiaomusic/static/style.css
@@ -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; /* 给左边的复选框图标留下空位 */
-}
-
-/* 对勾的样式 */
-.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; /* 方块字体大小，视清晰度需调整 */
+  width: 260px;
+  background-color: #fff;
+  border: 0px solid #ccc;
+  border-radius: 3px;
+  position: relative;
+  cursor: pointer;
+  vertical-align: middle; /* 确保与复选框垂直居中对齐 */
+  margin-left: 1px; /* 给复选框和标签之间一些距离，如果需要的话 */
 }
-