高亮功能可配置完成

static/web/viewer.html

@@ -435,10 +435,52 @@
         }
 
         .reader-settings-toggle {
-            width: 100%;
-            justify-content: space-between;
+            display: inline-flex;
             align-items: center;
-            padding-inline: 12px;
+            gap: 8px;
+            border: none;
+            background: transparent;
+            padding: 0;
+            color: #475569;
+            font-size: 12px;
+            font-weight: 600;
+            cursor: pointer;
+        }
+
+        .reader-settings-toggle-track {
+            position: relative;
+            width: 38px;
+            height: 22px;
+            border-radius: 999px;
+            background: #cbd5e1;
+            transition: background-color 160ms ease;
+            box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
+        }
+
+        .reader-settings-toggle.is-selected .reader-settings-toggle-track {
+            background: #0f172a;
+        }
+
+        .reader-settings-toggle-thumb {
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #fff;
+            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
+            transition: transform 160ms ease;
+        }
+
+        .reader-settings-toggle.is-selected .reader-settings-toggle-thumb {
+            transform: translateX(16px);
+        }
+
+        .reader-settings-toggle-text {
+            min-width: 24px;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
         }
 
         .reader-highlight-colors {
@@ -1258,7 +1300,12 @@
                             </div>
                             <div class="reader-settings-group">
                                 <label class="reader-settings-label">文本高亮</label>
-                                <button id="ttsHighlightToggle" class="reader-settings-option reader-settings-toggle" type="button" aria-pressed="true">开启</button>
+                                <button id="ttsHighlightToggle" class="reader-settings-toggle" type="button" aria-pressed="true" aria-label="文本高亮开关">
+                                    <span class="reader-settings-toggle-track" aria-hidden="true">
+                                        <span class="reader-settings-toggle-thumb"></span>
+                                    </span>
+                                    <span class="reader-settings-toggle-text">ON</span>
+                                </button>
                             </div>
                             <div class="reader-settings-group">
                                 <label class="reader-settings-label">高亮颜色</label>
@@ -1709,8 +1756,12 @@
                     const enabled = isTtsHighlightEnabled();
                     const colorKey = getTtsHighlightColorKey();
                     ttsHighlightToggle.classList.toggle('is-selected', enabled);
-                    ttsHighlightToggle.textContent = enabled ? '开启' : '关闭';
                     ttsHighlightToggle.setAttribute('aria-pressed', enabled ? 'true' : 'false');
+                    ttsHighlightToggle.setAttribute('aria-label', enabled ? '文本高亮已开启' : '文本高亮已关闭');
+                    const toggleText = ttsHighlightToggle.querySelector('.reader-settings-toggle-text');
+                    if (toggleText) {
+                        toggleText.textContent = enabled ? 'ON' : 'OFF';
+                    }
                     document.querySelectorAll('[data-highlight-color]').forEach(button => {
                         button.classList.toggle('is-selected', button.dataset.highlightColor === colorKey);
                     });