update:测试页面切换模型和切换背景的按钮样式调整

main/xiaozhi-server/test/css/test_page.css

@@ -108,26 +108,68 @@ body {
     animation: shadow-float 1.26s ease-in-out infinite;
 }
 
-.loading-char-float .main-char span:nth-child(1) { animation-delay: 0s; }
+.loading-char-float .main-char span:nth-child(1) {
-.loading-char-float .main-char span:nth-child(2) { animation-delay: 0.11s; }
+    animation-delay: 0s;
-.loading-char-float .main-char span:nth-child(3) { animation-delay: 0.22s; }
+}
-.loading-char-float .main-char span:nth-child(4) { animation-delay: 0.33s; }
+
-.loading-char-float .main-char span:nth-child(5) { animation-delay: 0.44s; }
+.loading-char-float .main-char span:nth-child(2) {
-.loading-char-float .main-char span:nth-child(6) { animation-delay: 0.55s; }
+    animation-delay: 0.11s;
+}
+
+.loading-char-float .main-char span:nth-child(3) {
+    animation-delay: 0.22s;
+}
+
+.loading-char-float .main-char span:nth-child(4) {
+    animation-delay: 0.33s;
+}
+
+.loading-char-float .main-char span:nth-child(5) {
+    animation-delay: 0.44s;
+}
+
+.loading-char-float .main-char span:nth-child(6) {
+    animation-delay: 0.55s;
+}
 
 @keyframes scan {
-    0% { background-position: 0 0; }
+    0% {
-    100% { background-position: 0 100px; }
+        background-position: 0 0;
+    }
+
+    100% {
+        background-position: 0 100px;
+    }
 }
 
 @keyframes char-float {
-    0%, 100% { transform: translateY(0); opacity: 1; text-shadow: 0 0 5px #5865f2, 0 0 10px rgba(88, 101, 242, 0.8); }
+
-    50% { transform: translateY(-5px); opacity: 0.9; text-shadow: 0 0 10px #5865f2, 0 0 20px rgba(88, 101, 242, 0.8); }
+    0%,
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+        text-shadow: 0 0 5px #5865f2, 0 0 10px rgba(88, 101, 242, 0.8);
+    }
+
+    50% {
+        transform: translateY(-5px);
+        opacity: 0.9;
+        text-shadow: 0 0 10px #5865f2, 0 0 20px rgba(88, 101, 242, 0.8);
+    }
 }
 
 @keyframes shadow-float {
-    0%, 100% { transform: translateY(3px); opacity: 0.3; }
+
-    50% { transform: translateY(8px); opacity: 0.15; }
+    0%,
+    100% {
+        transform: translateY(3px);
+        opacity: 0.3;
+    }
+
+    50% {
+        transform: translateY(8px);
+        opacity: 0.15;
+    }
 }
 
 /* ==================== Live2D显示区域 ==================== */
@@ -761,6 +803,72 @@ body {
     font-size: 14px;
 }
 
+.model-select {
+    width: 100%;
+    padding: 10px 40px 10px 14px;
+    border: 1px solid #40444b;
+    border-radius: 8px;
+    background: #40444b;
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 16px 16px;
+}
+
+.model-select:hover {
+    background: #4f545c;
+}
+
+.model-select:focus {
+    outline: none;
+    border-color: #40444b;
+}
+
+.model-select option {
+    background: #2f3136;
+    color: #ffffff;
+    padding: 12px;
+    font-size: 14px;
+}
+
+.background-btn {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid #40444b;
+    border-radius: 8px;
+    background: #40444b;
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: all 0.3s ease;
+}
+
+.background-btn:hover {
+    background: #4f545c;
+}
+
+.background-btn:active {
+    background: #40444b;
+}
+
+.background-btn .btn-icon {
+    width: 20px;
+    height: 20px;
+    fill: #ffffff;
+}
+
 /* ==================== MCP工具样式 ==================== */
 .mcp-tools-container {
     background: #2f3136;

main/xiaozhi-server/test/js/ui/controller.js

@@ -89,10 +89,10 @@ class UIController {
             backgroundBtn.addEventListener('click', this.switchBackground);
         }
 
-        // Model switch button
+        // Model select change event
-        const switchModelBtn = document.getElementById('switchModelBtn');
+        const modelSelect = document.getElementById('live2dModelSelect');
-        if (switchModelBtn) {
+        if (modelSelect) {
-            switchModelBtn.addEventListener('click', () => {
+            modelSelect.addEventListener('change', () => {
                 this.switchLive2DModel();
             });
         }

main/xiaozhi-server/test/test_page.html

@@ -195,17 +195,7 @@
                             <div class="config-row">
                                 <div class="config-item">
                                     <label></label>
-                                    <button class="control-btn" id="switchModelBtn" title="切换模型">
+                                    <button class="background-btn" id="backgroundBtn" title="切换背景">
-                                        <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
-                                            <path
-                                                d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15V18M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" />
-                                        </svg>
-                                        <span class="btn-text">切换模型</span>
-                                    </button>
-                                </div>
-                                <div class="config-item">
-                                    <label></label>
-                                    <button class="control-btn" id="backgroundBtn" title="切换背景">
                                         <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
                                             <path
                                                 d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15V18M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" />