From f6e80dd287fc75127ebbd6016c648d72102e60e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B6=B5=E6=9B=A6?= <im.hanxi@gmail.com>
Date: Fri, 23 Jan 2026 11:46:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E7=95=8C=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 xiaomusic/static/default/index.html   |  36 +-
 xiaomusic/static/default/main.css     | 895 +++++++++++++++++++++-----
 xiaomusic/static/default/md.js        |  57 +-
 xiaomusic/static/default/setting.css  |  32 +
 xiaomusic/static/default/setting.html |   3 +
 xiaomusic/static/default/setting.js   |  25 +
 6 files changed, 853 insertions(+), 195 deletions(-)
diff --git a/xiaomusic/static/default/index.html b/xiaomusic/static/default/index.html
index 4ca9602..110729e 100644
--- a/xiaomusic/static/default/index.html
+++ b/xiaomusic/static/default/index.html
@@ -5,6 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>小爱音箱操控面板</title>
+    <!-- 预加载字体文件，减少加载延迟 -->
+    <link rel="preload" href="./materialicons.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="./materialiconsoutlined.woff2" as="font" type="font/woff2" crossorigin>
     <script src="./jquery-3.7.1.min.js?version=1769128214"></script>
     <link rel="stylesheet" href="./main.css?version=1769128214">
     <link rel="icon" href="./favicon.ico">
@@ -25,11 +28,11 @@
 <body class="index_page">
     <div class="player" role="main" aria-label="音乐播放器">
         <h1>小爱音箱播放器
-            <a href="https://xdocs.hanxi.cc/issues/changelog.html" target="_blank" style="position: relative;"><span  id="version">0.4.0</span><span id="versionnew" class="new-badge"></span></a>
+            <a href="https://xdocs.hanxi.cc/issues/changelog.html" target="_blank" class="version-link"><span id="version">0.4.0</span><span id="versionnew" class="new-badge"></span></a>
         </h1>
 
-        <label for="did" style="display: flex;align-items: center;">选择播放设备:
-            <div class="toggle-switch-container" style="margin-left: auto;">
+        <label for="did" class="label-with-toggle">选择播放设备:
+            <div class="toggle-switch-container">
                 <label class="toggle-label">语音口令</label>
                 <div id="pullAskToggle" class="toggle-switch" role="switch" aria-checked="false" aria-label="语音口令开关" onclick="togglePullAsk()" tabindex="0">
                     <div class="toggle-slider"></div>
@@ -40,7 +43,7 @@
             <option value="default">默认设备</option>
         </select>
 
-        <label for="music_list" style="display: flex;align-items: center;">选择播放列表:
+        <label for="music_list" class="label-with-action">选择播放列表:
             <div class="option-inline" onclick="refreshlist()" role="button" aria-label="刷新播放列表" tabindex="0">
                 <span class="material-icons" aria-hidden="true">refresh</span>
                 <span class="tooltip">刷新列表</span>
@@ -49,8 +52,8 @@
         <select id="music_list" class="playlist-selector">
         </select>
 
-        <label for="music_name" style="display: flex;align-items: center;">选择歌曲:
-            <div style="display: flex;align-items: center;margin-left: auto;">
+        <label for="music_name" class="label-with-action">选择歌曲:
+            <div class="action-buttons">
                 <div class="option-inline" onclick="triggerUpload()" role="button" aria-label="上传歌曲" tabindex="0">
                     <span class="material-icons" aria-hidden="true">file_upload</span>
                     <span class="tooltip">上传歌曲</span>
@@ -64,17 +67,17 @@
         <select id="music_name" class="song-selector">
         </select>
 
-        <input id="upload-file" type="file" accept=".mp3,.m4a,.wav,.flac,.aac,.ogg,.ape" style="display:none" />
+        <input id="upload-file" type="file" accept=".mp3,.m4a,.wav,.flac,.aac,.ogg,.ape" class="hidden-input" />
 
-        <div id="device-audio">
+        <div id="device-audio" class="audio-section">
             <progress class="progress" id="progress" value="0" max="100" role="progressbar" aria-label="播放进度" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="未播放"></progress>
-            <div style="display: flex; justify-content: space-between; width: 100%;">
+            <div class="time-info">
                 <span class="current-time" id="current-time">0:00</span>
                 <div class="current-song" id="playering-music">当前播放歌曲：无</div>
                 <span class="duration" id="duration">00:00</span>
             </div>
         </div>
-        <audio id="audio" controls src="" autoplay></audio>
+        <audio id="audio" controls src="" autoplay class="hidden-audio"></audio>
 
         <div class="buttons">
             <div class="player-controls button-group">
@@ -129,15 +132,18 @@
         </div>
     </div>
 
+    <!-- 弹窗遮罩层 -->
+    <div class="component-overlay" id="component-overlay" onclick="closeAllDialogs()"></div>
+
     <!-- 搜索组件 -->
     <div class="component" id="search-component" role="dialog" aria-modal="true" aria-labelledby="search-title">
         <h2 id="search-title">搜索歌曲</h2>
         <input type="text" id="search" class="search-input" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)">
-        <label for="music-name" id="music-name-label" style="display: none;">确认选择:</label>
-        <select id="music-name" style="display: none;">
+        <label for="music-name" id="music-name-label" class="hidden-element">确认选择:</label>
+        <select id="music-name" class="hidden-element">
             <!-- 动态生成选项 -->
         </select>
-        <input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)" style="display: none;"></input>
+        <input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)" class="hidden-element"></input>
         <div class="component-button-group">
             <button onclick="confirmSearch()">确定</button>
             <button onclick="toggleSearch()" class="close-button">关闭</button>
@@ -151,7 +157,7 @@
         <button onclick="timedShutDown('10分钟后关机')">10分钟后关机</button>
         <button onclick="timedShutDown('30分钟后关机')">30分钟后关机</button>
         <button onclick="timedShutDown('60分钟后关机')">60分钟后关机</button>
-        <span class="tooltip timer-tooltip" style="display: none;">已发送指令</span>
+        <span class="tooltip timer-tooltip hidden-element">已发送指令</span>
         <div class="component-button-one">
             <button onclick="toggleTimer()" class="close-button">关闭</button>
         </div>
@@ -208,7 +214,7 @@
     <div class="component" id="delete-component" role="dialog" aria-modal="true" aria-labelledby="delete-title">
         <h2 id="delete-title">警告</h2>
         <p>你确定要删除歌曲 <span id="delete-music-name"></span> 吗？</p>
-        <p style="font-weight: bold;">注意：该操作会永久删除该歌曲且不可撤销</p>
+        <p class="warning-text">注意：该操作会永久删除该歌曲且不可撤销</p>
         <div class="component-button-group">
             <button onclick="confirmDelete()">确定</button>
             <button onclick="toggleDelete()" class="close-button">关闭</button>
diff --git a/xiaomusic/static/default/main.css b/xiaomusic/static/default/main.css
index 6e71b9a..c004bbc 100644
--- a/xiaomusic/static/default/main.css
+++ b/xiaomusic/static/default/main.css
@@ -1,93 +1,195 @@
+/* ==================== CSS 变量系统 ==================== */
+:root {
+  /* 主色调 - 与 setting.html 保持一致 */
+  --primary-color: #007bff;
+  --primary-hover: #0056b3;
+  --primary-light: rgba(0, 123, 255, 0.1);
+
+  /* 功能色 */
+  --success-color: #28a745;
+  --warning-color: #ffc107;
+  --error-color: #dc3545;
+  --info-color: #17a2b8;
+
+  /* 中性色 */
+  --text-primary: #333;
+  --text-secondary: #555;
+  --text-tertiary: #999;
+  --text-inverse: #ffffff;
+
+  /* 背景色 */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #f0f0f0;
+  --bg-overlay: rgba(0, 0, 0, 0.5);
+  --bg-page: #f5f5f5;
+
+  /* 边框色 */
+  --border-color: #ddd;
+  --border-hover: #ccc;
+
+  /* 阴影 */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --shadow-xl: 0 4px 20px rgba(0, 0, 0, 0.15);
+
+  /* 间距系统 (4px 基准) */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-2xl: 24px;
+  --spacing-3xl: 32px;
+  --spacing-4xl: 40px;
+
+  /* 圆角 */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* 字体 */
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-base: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 28px;
+
+  /* 过渡动画 */
+  --transition-fast: 0.15s ease;
+  --transition-base: 0.3s ease;
+  --transition-slow: 0.5s ease;
+}
+
+/* ==================== 基础样式 ==================== */
+* {
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  overflow-x: hidden;
+}
+
 body {
-  font-family: Arial, sans-serif;
-  background-color: #f0f0f0;
+  font-family: var(--font-family);
+  background-color: var(--bg-page);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
+  height: auto;
   margin: 0;
-  padding: 0;
-  padding-bottom: 60px;
+  padding: 20px 0;
+  color: var(--text-primary);
+  overflow-x: hidden;
+  width: 100%;
 }
+
 .index_page {
   min-height: 100vh;
+  height: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  width: 100%;
+  overflow-x: hidden;
+  padding-top: 20px;
+  padding-bottom: 80px;
 }
 
 .player {
-  background-color: #ffffff;
-  padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  background-color: var(--bg-primary);
+  padding: var(--spacing-xl);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
   text-align: center;
-  max-width: 360px;
+  max-width: 400px;
+  width: calc(100% - 40px);
+  margin: 20px;
   position: relative;
+  transition: box-shadow var(--transition-base);
+  box-sizing: border-box;
+}
+
+.player:hover {
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
 }
 
 h1 {
-  font-size: 28px;
-  margin-bottom: 15px;
-  color: #333;
+  font-size: var(--font-size-3xl);
+  margin-bottom: var(--spacing-xl);
+  color: var(--text-primary);
   display: flex;
   justify-content: center;
+  align-items: center;
+  font-weight: 600;
 }
 
 .component h2 {
-  font-size: 18px;
-  color: #333;
-  margin: 0 0 15px 0;
-  padding-bottom: 10px;
-  border-bottom: 2px solid #f0f0f0;
+  font-size: var(--font-size-xl);
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-xl) 0;
+  padding-bottom: var(--spacing-md);
+  border-bottom: 2px solid var(--border-color);
   text-align: center;
+  font-weight: 700;
 }
 
 .card-section {
-  background-color: #f8f9fa;
-  border-radius: 8px;
-  padding: 12px;
-  margin-bottom: 12px;
-  transition: all 0.3s ease;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-lg);
+  margin-bottom: var(--spacing-md);
+  transition: all var(--transition-base);
+  border: 2px solid transparent;
 }
 
 .card-section:last-of-type {
-  margin-bottom: 8px;
+  margin-bottom: var(--spacing-sm);
 }
 
 .card-section:hover {
-  background-color: #f0f2f5;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  background: var(--bg-tertiary);
+  border-color: var(--border-hover);
+  box-shadow: var(--shadow-sm);
 }
 
 .card-title {
-  font-size: 15px;
+  font-size: var(--font-size-base);
   font-weight: 600;
-  color: #555;
-  margin: 0 0 10px 0;
+  color: var(--text-secondary);
+  margin: 0 0 var(--spacing-md) 0;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--spacing-sm);
 }
 
 .close-button {
-  background-color: #6c757d !important;
+  background: var(--text-secondary) !important;
 }
 
 .close-button:hover {
-  background-color: #5a6268 !important;
+  background: var(--text-primary) !important;
 }
 
 h1 a {
-  margin-left: 10px;
-  font-size: 14px;
-  color: #007bff;
+  margin-left: var(--spacing-md);
+  font-size: var(--font-size-sm);
+  color: var(--primary-color);
   text-decoration: none;
+  transition: color var(--transition-fast);
 }
 
 h1 a:hover {
+  color: var(--primary-hover);
   text-decoration: underline;
 }
 
@@ -95,22 +197,37 @@ h1 a:hover {
   position: absolute;
   top: -8px;
   right: -35px;
-  background-color: #ff4757;
-  color: white;
-  border-radius: 12px;
-  padding: 3px 7px;
+  background: var(--error-color);
+  color: var(--text-inverse);
+  border-radius: var(--radius-full);
+  padding: 3px 8px;
   font-size: 11px;
   font-weight: bold;
   display: none;
   z-index: 10;
+  box-shadow: var(--shadow-sm);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.05);
+  }
 }
 
 label {
-  font-size: 14px;
-  color: #555;
-  margin: 5px 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  margin: var(--spacing-sm) 0;
   display: block;
   text-align: left;
+  font-weight: 500;
 }
 
 select,
@@ -118,96 +235,182 @@ input[type="range"],
 input[type="text"],
 input[type="password"],
 input[type="number"] {
-  padding: 10px;
-  border: 1px solid #cccccc;
-  border-radius: 6px;
-  margin-bottom: 12px;
-  font-size: 14px;
-  transition: border 0.2s ease;
-  box-sizing: border-box
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border: 2px solid var(--border-color);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--spacing-md);
+  font-size: var(--font-size-sm);
+  transition: all var(--transition-base);
+  box-sizing: border-box;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  max-width: 100%;
+}
+
+select:hover,
+input[type="text"]:hover,
+input[type="password"]:hover,
+input[type="number"]:hover {
+  border-color: var(--border-hover);
 }
 
 select:focus,
-input[type="text"]:focus {
-  border-color: #007bff;
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="number"]:focus {
+  border-color: var(--primary-color);
   outline: none;
+  background: var(--bg-primary);
+  box-shadow: 0 0 0 3px var(--primary-light);
 }
+
 select {
   overflow: hidden;
 }
+
 button {
-  background-color: #007bff;
-  color: white;
+  background-color: var(--primary-color);
+  color: var(--text-inverse);
   border: none;
-  border-radius: 6px;
-  padding: 10px 15px;
+  border-radius: var(--radius-sm);
+  padding: 10px 20px;
   cursor: pointer;
-  margin: 5px;
-  font-size: 16px;
-  transition: background-color 0.3s;
-  position: relative; /* 为tooltip绝对定位做准备 */
+  margin: var(--spacing-sm);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  transition: background-color var(--transition-base);
+  position: relative;
+  font-family: var(--font-family);
 }
 
 button:hover {
-  background-color: #0056b3;
+  background-color: var(--primary-hover);
 }
+
+button:active {
+  transform: translateY(1px);
+}
+
 .tooltip {
   visibility: hidden;
-  background-color: #555;
-  color: #fff;
+  background: var(--text-primary);
+  color: var(--text-inverse);
   text-align: center;
-  border-radius: 6px;
-  padding: 5px;
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-xs) var(--spacing-sm);
   position: absolute;
-  z-index: 1;
-  bottom: 150%; /* 控制tooltip相对按钮的位置 */
+  z-index: 10;
+  bottom: 150%;
   left: 50%;
-  margin-left: -50px; /* 调整位置以居中显示 Tooltip */
-  width: 80px; /* 设置固定宽度以保证足够的显示空间 */
-  white-space: nowrap; /* 防止换行 */
+  margin-left: -50px;
+  width: 80px;
+  white-space: nowrap;
   opacity: 0;
-  transition: opacity 0.3s;
+  transition: opacity var(--transition-base);
+  font-size: var(--font-size-xs);
+  box-shadow: var(--shadow-md);
+  pointer-events: none;
 }
-button:hover .tooltip,.option-inline:hover .tooltip,.control-button:hover .tooltip {
+
+.tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -4px;
+  border-width: 4px;
+  border-style: solid;
+  border-color: var(--text-primary) transparent transparent transparent;
+}
+
+button:hover .tooltip,
+.option-inline:hover .tooltip,
+.control-button:hover .tooltip {
   visibility: visible;
   opacity: 1;
 }
-.option-inline{
+
+.option-inline {
   display: flex;
   margin-left: auto;
   position: relative;
   align-items: center;
-}
-.option-inline:hover .tooltip {
-  /* 位置调整到左边 */
-  left: -50px; /* 调整位置以居中显示 Tooltip */
-  bottom: 0;
-}
-.control-button{
-  position: relative; /* 为tooltip绝对定位做准备 */
-}
-.progress {
-  width: 90%;
-  height: 6px;
-  background: #e0e0e0;
-  border-radius: 6px;
-  margin: 15px 0;
+  padding: var(--spacing-xs);
+  border-radius: var(--radius-md);
   cursor: pointer;
-}
-progress::-webkit-progress-bar {
-  background: #e0e0e0;
+  transition: all var(--transition-fast);
+}
+
+.option-inline:hover {
+  background: var(--primary-light);
+}
+
+.option-inline .material-icons {
+  color: var(--text-secondary);
+  transition: color var(--transition-fast);
+  font-size: 20px;
+}
+
+.option-inline:hover .material-icons {
+  color: var(--primary-color);
+}
+
+.option-inline:hover .tooltip {
+  left: -50px;
+  bottom: 0;
+}
+
+.progress {
+  width: 100%;
+  height: 8px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-full);
+  margin: var(--spacing-xl) 0;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  transition: height var(--transition-fast);
+}
+
+.progress:hover {
+  height: 10px;
+}
+
+progress::-webkit-progress-bar {
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-full);
+}
+
+progress::-moz-progress-bar {
+  background-color: var(--primary-color);
+  border-radius: var(--radius-full);
+  transition: all var(--transition-base);
 }
 
-progress::-moz-progress-bar,
 progress::-webkit-progress-value {
-  background: #007bff;
+  background-color: var(--primary-color);
+  border-radius: var(--radius-full);
+  transition: all var(--transition-base);
 }
 
 .current-song {
-  color: #333;
-  margin: 10px 0;
-  font-weight: bold;
+  color: var(--text-primary);
+  margin: var(--spacing-md) 0;
+  font-weight: 600;
   text-align: center;
+  font-size: var(--font-size-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.current-time,
+.duration {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  font-weight: 500;
 }
 
 .component {
@@ -215,17 +418,50 @@ progress::-webkit-progress-value {
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #ffffff;
-  padding: 18px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15);
-  z-index: 100;
-  width: 320px;
-  max-width: 90vw;
+  transform: translate(-50%, -50%) scale(0.9);
+  background: var(--bg-primary);
+  padding: var(--spacing-2xl);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  z-index: 1000;
+  width: 360px;
+  max-width: calc(100vw - 40px);
   max-height: 85vh;
   overflow-y: auto;
   overflow-x: hidden;
+  opacity: 0;
+  transition: all var(--transition-base);
+  border: 1px solid var(--border-color);
+  box-sizing: border-box;
+  margin: 0 auto;
+}
+
+.component.show {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* 确保弹窗在所有情况下都水平居中 */
+.component {
+  right: auto;
+}
+
+/* 弹窗遮罩 */
+.component-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--bg-overlay);
+  z-index: 999;
+  opacity: 0;
+  transition: opacity var(--transition-base);
+}
+
+.component-overlay.show {
+  opacity: 1;
 }
 
 /* 美化滚动条 */
@@ -249,51 +485,67 @@ progress::-webkit-progress-value {
 
 .component input {
   width: 100%;
-  height: 38px;
+  max-width: 100%;
+  height: 42px;
   box-sizing: border-box;
-  transition: all 0.3s ease;
-  font-size: 14px;
+  transition: all var(--transition-base);
+  font-size: var(--font-size-sm);
 }
+
 .component input:focus {
-  border-color: #007bff;
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px var(--primary-light);
 }
+
 .component input::placeholder {
-  color: #999;
+  color: var(--text-tertiary);
 }
+
 .component-button-group {
   display: flex;
-  gap: 8px;
+  gap: var(--spacing-sm);
   justify-content: space-between;
-  margin-top: 10px;
+  margin-top: var(--spacing-lg);
 }
+
 .component-button-group button {
   flex: 1;
-  height: 36px;
-  font-size: 14px;
-  padding: 8px 12px;
+  height: 42px;
+  font-size: var(--font-size-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
   margin: 0;
-  transition: all 0.3s ease;
+  transition: all var(--transition-base);
 }
+
 .component-button-group button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 3px 10px rgba(0, 123, 255, 0.3);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
+
 .component-button-one {
   display: flex;
   justify-content: center;
-  margin-top: 12px;
-  padding-top: 8px;
-  border-top: 1px solid #f0f0f0;
+  margin-top: var(--spacing-lg);
+  padding-top: var(--spacing-md);
+  border-top: 1px solid var(--border-color);
 }
+
 .component-button-one button {
   width: 100%;
-  height: 38px;
-  font-size: 14px;
+  height: 42px;
+  font-size: var(--font-size-sm);
   margin: 0;
 }
+
 #warning-component p span {
-  color: #007bff;
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+.warning-text {
+  font-weight: bold;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 
@@ -305,24 +557,82 @@ progress::-webkit-progress-value {
 
 .player-controls {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  gap: var(--spacing-lg);
+  margin-top: var(--spacing-2xl);
+  margin-bottom: var(--spacing-2xl);
+  padding: var(--spacing-lg) 0;
+}
+
+.control-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-full);
+  background: var(--bg-secondary);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  border: 2px solid transparent;
+}
+
+.control-button:hover {
+  background: var(--primary-light);
+  border-color: var(--primary-color);
+  transform: scale(1.05);
+}
+
+.control-button:active {
+  transform: scale(0.95);
+}
+
+.control-button .material-icons,
+.control-button .material-icons-outlined {
+  color: var(--text-primary);
+  transition: color var(--transition-fast);
+}
+
+.control-button:hover .material-icons,
+.control-button:hover .material-icons-outlined {
+  color: var(--primary-color);
 }
 
 .play {
-  font-size: 48px;
+  font-size: 56px !important;
+}
+
+.control-button:has(.play) {
+  width: 64px;
+  height: 64px;
+  background-color: var(--primary-color);
+  box-shadow: var(--shadow-md);
+}
+
+.control-button:has(.play):hover {
+  background-color: var(--primary-hover);
+  box-shadow: var(--shadow-lg);
+  transform: scale(1.08);
+}
+
+.control-button:has(.play) .material-icons-outlined {
+  color: var(--text-inverse) !important;
 }
 
 .footer {
   position: fixed;
-  bottom: 20px;
+  bottom: var(--spacing-lg);
   left: 50%;
   transform: translateX(-50%);
-  font-size: 14px;
-  color: #555;
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
   user-select: none;
+  font-weight: 500;
+  z-index: 10;
+  background-color: var(--bg-page);
+  padding: var(--spacing-xs) var(--spacing-lg);
+  border-radius: var(--radius-sm);
 }
 
 
@@ -334,17 +644,29 @@ progress::-webkit-progress-value {
 
 .timer-tooltip {
   bottom: 50%;
-  visibility: visible;
-  opacity: 1;
 }
+
+.timer-tooltip.show {
+  visibility: visible !important;
+  opacity: 1 !important;
+  display: inline-block !important;
+}
+
+.favorite.favorite-active {
+  background: rgba(255, 99, 71, 0.1);
+  border-color: #ff6347;
+}
+
 .favorite.favorite-active .material-icons {
   color: #ff6347;
 }
-#audio {
-  width: 100%;
-  display: none;
+
+.favorite.favorite-active p {
+  color: #ff6347;
 }
 
+/* Audio 元素已通过 .hidden-audio 类隐藏 */
+
 /* 无障碍样式 - 屏幕阅读器专用类 */
 .sr-only {
   position: absolute;
@@ -367,9 +689,9 @@ progress::-webkit-progress-value {
   white-space: normal;
 }
 
-/* 无障碍样式 - 焦点样式增强 */
+/* ==================== 无障碍样式增强 ==================== */
 *:focus {
-  outline: 2px solid #007bff;
+  outline: 2px solid var(--primary-color);
   outline-offset: 2px;
 }
 
@@ -380,15 +702,14 @@ input:focus,
 .icon-item:focus,
 .option-inline:focus,
 .toggle-switch:focus {
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 3px var(--primary-light);
 }
 
-/* 确保自定义按钮在获得焦点时有明显的视觉反馈 */
 [role="button"]:focus,
 [role="switch"]:focus {
-  outline: 2px solid #007bff;
+  outline: 2px solid var(--primary-color);
   outline-offset: 2px;
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 3px var(--primary-light);
 }
 
 .debug {
@@ -398,9 +719,125 @@ input:focus,
 
 }
 
-@media screen and (max-width: 440px) {
-  .player{
-    width: 90%;
+/* ==================== 响应式设计 ==================== */
+@media screen and (max-width: 640px) {
+
+  html,
+  body {
+    height: auto;
+    min-height: 100vh;
+  }
+
+  body {
+    padding: 10px 0;
+    justify-content: flex-start;
+  }
+
+  .index_page {
+    justify-content: flex-start;
+    padding-top: 10px;
+    padding-bottom: 60px;
+  }
+
+  .player {
+    width: calc(100% - 20px);
+    max-width: 100%;
+    padding: var(--spacing-lg);
+    margin: 10px auto;
+    border-radius: var(--radius-md);
+  }
+
+  h1 {
+    font-size: var(--font-size-xl);
+    flex-wrap: wrap;
+    margin-bottom: var(--spacing-md);
+  }
+
+  label {
+    font-size: var(--font-size-sm);
+    margin: var(--spacing-xs) 0;
+  }
+
+  select,
+  input[type="text"],
+  input[type="password"],
+  input[type="number"] {
+    padding: var(--spacing-sm) var(--spacing-md);
+    margin-bottom: var(--spacing-sm);
+    font-size: var(--font-size-sm);
+  }
+
+  .audio-section {
+    margin: var(--spacing-md) 0;
+  }
+
+  .control-button {
+    width: 42px;
+    height: 42px;
+  }
+
+  .control-button:has(.play) {
+    width: 54px;
+    height: 54px;
+  }
+
+  .play {
+    font-size: 46px !important;
+  }
+
+  .player-controls {
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+    padding: var(--spacing-sm) 0;
+  }
+
+  .mode-controls {
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md) 0 var(--spacing-sm);
+    margin-top: var(--spacing-sm);
+  }
+
+  .icon-item {
+    padding: var(--spacing-sm);
+    min-height: 60px;
+  }
+
+  .icon-item .material-icons {
+    font-size: 22px;
+  }
+
+  .icon-item p {
+    font-size: 11px;
+    margin-top: 2px;
+  }
+
+  .component {
+    width: calc(100% - 20px);
+    max-width: calc(100vw - 20px);
+    padding: var(--spacing-lg);
+    margin: 0;
+    left: 50%;
+    right: auto;
+  }
+
+  .footer {
+    font-size: var(--font-size-xs);
+    bottom: var(--spacing-sm);
+    padding: 2px var(--spacing-md);
+  }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1024px) {
+  .player {
+    max-width: 480px;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  .player {
+    max-width: 420px;
   }
 }
 
@@ -414,31 +851,77 @@ input:focus,
 .playlist-selector,
 .device-selector,
 .song-selector {
-  width: 300px;
+  width: 100%;
 }
 
 .mode-controls {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 10px 0;
-  border-top: 1px solid #ddd;
-  color: #555;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-md);
+  padding: var(--spacing-xl) 0 var(--spacing-md);
+  border-top: 1px solid var(--border-color);
+  margin-top: var(--spacing-lg);
 }
+
 .icon-item {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md);
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  border: 2px solid transparent;
+  min-height: 72px;
+}
+
+.icon-item:hover {
+  background: var(--primary-light);
+  border-color: var(--primary-color);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-sm);
+}
+
+.icon-item:active {
+  transform: translateY(0);
+}
+
+.icon-item .material-icons {
+  color: var(--text-secondary);
+  transition: color var(--transition-fast);
+  font-size: 28px;
+}
+
+.icon-item:hover .material-icons {
+  color: var(--primary-color);
 }
 
 .icon-item p {
-  font-size: 12px;
-  margin: 5px 0 0;
-}
-.disabled {
-  color: #ccc;
-  pointer-events: none;
+  font-size: var(--font-size-xs);
+  margin: var(--spacing-xs) 0 0;
+  color: var(--text-secondary);
+  font-weight: 500;
+  transition: color var(--transition-fast);
 }
 
-span,p {
+.icon-item:hover p {
+  color: var(--primary-color);
+}
+
+.disabled {
+  color: var(--text-tertiary);
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.device-enable {
+  /* 设备可用时的样式 */
+}
+
+span,
+p {
   cursor: pointer;
   user-select: none;
 }
@@ -461,13 +944,16 @@ span,p {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(./materialicons.woff2) format('woff2');
 }
+
 /* fallback */
 @font-face {
   font-family: 'Material Icons Outlined';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(./materialiconsoutlined.woff2) format('woff2');
 }
 
@@ -485,6 +971,7 @@ span,p {
   direction: ltr;
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
+  visibility: hidden;
 }
 
 .material-icons-outlined {
@@ -501,50 +988,102 @@ span,p {
   direction: ltr;
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
+  visibility: hidden;
+}
+
+/* 字体加载完成后显示图标 */
+.fonts-loaded .material-icons,
+.fonts-loaded .material-icons-outlined {
+  visibility: visible;
 }
 
 
 /* 胶囊开关容器 */
+/* ==================== Label 布局样式 ==================== */
+.label-with-toggle,
+.label-with-action {
+  display: flex;
+  align-items: center;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  gap: var(--spacing-xs);
+}
+
 .toggle-switch-container {
   display: flex;
   align-items: center;
-
-  gap: 8px;
+  margin-left: auto;
+  gap: var(--spacing-sm);
 }
 
 .toggle-label {
-  font-size: 14px;
-  color: #555;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
   margin: 0;
+  font-weight: 500;
+}
+
+/* ==================== 音频播放区域 ==================== */
+.audio-section {
+  margin: var(--spacing-xl) 0;
+}
+
+.time-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: var(--spacing-sm);
+}
+
+/* ==================== 隐藏元素 ==================== */
+.hidden-input,
+.hidden-audio,
+.hidden-element {
+  display: none !important;
+}
+
+.version-link {
+  position: relative;
 }
 
 /* 胶囊开关样式 */
 .toggle-switch {
   position: relative;
-  width: 40px;
-  height: 22px;
-  background-color: #ccc;
-  border-radius: 11px;
+  width: 48px;
+  height: 26px;
+  background-color: var(--bg-tertiary);
+  border-radius: var(--radius-full);
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  transition: all var(--transition-base);
+  border: 2px solid var(--border-color);
+}
+
+.toggle-switch:hover {
+  border-color: var(--border-hover);
 }
 
 .toggle-switch.active {
-  background-color: #007bff;
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
 }
 
 .toggle-slider {
   position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 16px;
-  height: 16px;
-  background-color: white;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  background: var(--bg-primary);
   border-radius: 50%;
-  transition: transform 0.3s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform var(--transition-base);
+  box-shadow: var(--shadow-sm);
 }
 
 .toggle-switch.active .toggle-slider {
-  transform: translateX(18px);
-}
+  transform: translateX(22px);
+}
\ No newline at end of file
diff --git a/xiaomusic/static/default/md.js b/xiaomusic/static/default/md.js
index f61f8de..42e16cd 100644
--- a/xiaomusic/static/default/md.js
+++ b/xiaomusic/static/default/md.js
@@ -1,3 +1,28 @@
+// ============ 字体加载检测 ============
+// 检测字体加载完成，避免图标文字闪烁
+(function() {
+  // 使用 Promise.race 实现超时保护
+  const fontLoadTimeout = new Promise(resolve => {
+    setTimeout(() => {
+      console.warn('字体加载超时，强制显示图标');
+      resolve('timeout');
+    }, 3000);
+  });
+
+  const fontLoadReady = document.fonts.ready.then(() => 'loaded');
+
+  Promise.race([fontLoadReady, fontLoadTimeout]).then((result) => {
+    document.body.classList.add('fonts-loaded');
+    if (result === 'loaded') {
+      console.log('Material Icons 字体加载完成');
+    }
+  }).catch((error) => {
+    console.error('字体加载检测失败:', error);
+    // 出错时也显示图标，避免永久隐藏
+    document.body.classList.add('fonts-loaded');
+  });
+})();
+
 // $(function () {
 
 // })
@@ -26,8 +51,16 @@ function openDialog(dialogId) {
   // 保存当前焦点元素
   lastFocusedElement = document.activeElement;
 
+  // 显示遮罩层
+  const overlay = document.getElementById("component-overlay");
+  if (overlay) {
+    overlay.style.display = "block";
+    setTimeout(() => overlay.classList.add("show"), 10);
+  }
+
   // 显示弹窗
   dialog.style.display = "block";
+  setTimeout(() => dialog.classList.add("show"), 10);
   openDialogs.add(dialogId);
 
   // 将焦点移到弹窗内第一个可交互元素
@@ -45,10 +78,24 @@ function closeDialog(dialogId) {
   const dialog = document.getElementById(dialogId);
   if (!dialog) return;
 
-  // 隐藏弹窗
-  dialog.style.display = "none";
+  // 隐藏弹窗动画
+  dialog.classList.remove("show");
   openDialogs.delete(dialogId);
 
+  // 如果没有其他打开的弹窗，隐藏遮罩层
+  if (openDialogs.size === 0) {
+    const overlay = document.getElementById("component-overlay");
+    if (overlay) {
+      overlay.classList.remove("show");
+      setTimeout(() => (overlay.style.display = "none"), 300);
+    }
+  }
+
+  // 延迟隐藏弹窗以显示动画
+  setTimeout(() => {
+    dialog.style.display = "none";
+  }, 300);
+
   // 恢复焦点到触发按钮
   if (lastFocusedElement) {
     lastFocusedElement.focus();
@@ -56,6 +103,12 @@ function closeDialog(dialogId) {
   }
 }
 
+// 关闭所有弹窗
+function closeAllDialogs() {
+  const dialogs = Array.from(openDialogs);
+  dialogs.forEach((dialogId) => closeDialog(dialogId));
+}
+
 // 更新进度条 ARIA 属性
 function updateProgressAria(currentTime, totalTime) {
   const progress = document.getElementById("progress");
diff --git a/xiaomusic/static/default/setting.css b/xiaomusic/static/default/setting.css
index 0f6ef29..e1dfa94 100644
--- a/xiaomusic/static/default/setting.css
+++ b/xiaomusic/static/default/setting.css
@@ -1,3 +1,35 @@
+/* ==================== Material Icons 字体定义 ==================== */
+/* fallback */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(./materialicons.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  visibility: hidden;
+}
+
+/* 字体加载完成后显示图标 */
+.fonts-loaded .material-icons {
+  visibility: visible;
+}
+
 /* 全局样式重置 */
 * {
   box-sizing: border-box;
diff --git a/xiaomusic/static/default/setting.html b/xiaomusic/static/default/setting.html
index 80d10d5..90f9d3b 100644
--- a/xiaomusic/static/default/setting.html
+++ b/xiaomusic/static/default/setting.html
@@ -4,6 +4,9 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width" />
     <title>小爱音箱操控面板</title>
+    <!-- 预加载字体文件，减少加载延迟 -->
+    <link rel="preload" href="./materialicons.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="./materialiconsoutlined.woff2" as="font" type="font/woff2" crossorigin>
     <script src="./jquery-3.7.1.min.js?version=1769128214"></script>
     <script src="./setting.js?version=1769128214"></script>
     <link
diff --git a/xiaomusic/static/default/setting.js b/xiaomusic/static/default/setting.js
index 527646e..285d15c 100644
--- a/xiaomusic/static/default/setting.js
+++ b/xiaomusic/static/default/setting.js
@@ -1,3 +1,28 @@
+// ============ 字体加载检测 ============
+// 检测字体加载完成，避免图标文字闪烁
+(function() {
+  // 使用 Promise.race 实现超时保护
+  const fontLoadTimeout = new Promise(resolve => {
+    setTimeout(() => {
+      console.warn('字体加载超时，强制显示图标');
+      resolve('timeout');
+    }, 3000);
+  });
+
+  const fontLoadReady = document.fonts.ready.then(() => 'loaded');
+
+  Promise.race([fontLoadReady, fontLoadTimeout]).then((result) => {
+    document.body.classList.add('fonts-loaded');
+    if (result === 'loaded') {
+      console.log('Material Icons 字体加载完成');
+    }
+  }).catch((error) => {
+    console.error('字体加载检测失败:', error);
+    // 出错时也显示图标，避免永久隐藏
+    document.body.classList.add('fonts-loaded');
+  });
+})();
+
 $(function () {
   // 拉取版本
   $.get("/getversion", function (data, status) {
