diff --git a/main/xiaozhi-server/test/css/test_page.css b/main/xiaozhi-server/test/css/test_page.css index 5975b51d..8d96e49b 100644 --- a/main/xiaozhi-server/test/css/test_page.css +++ b/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(2) { 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; } +.loading-char-float .main-char span:nth-child(1) { + animation-delay: 0s; +} + +.loading-char-float .main-char span:nth-child(2) { + 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; } - 100% { background-position: 0 100px; } + 0% { + 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; diff --git a/main/xiaozhi-server/test/js/ui/controller.js b/main/xiaozhi-server/test/js/ui/controller.js index 399d46ba..9e1fa1b3 100644 --- a/main/xiaozhi-server/test/js/ui/controller.js +++ b/main/xiaozhi-server/test/js/ui/controller.js @@ -89,10 +89,10 @@ class UIController { backgroundBtn.addEventListener('click', this.switchBackground); } - // Model switch button - const switchModelBtn = document.getElementById('switchModelBtn'); - if (switchModelBtn) { - switchModelBtn.addEventListener('click', () => { + // Model select change event + const modelSelect = document.getElementById('live2dModelSelect'); + if (modelSelect) { + modelSelect.addEventListener('change', () => { this.switchLive2DModel(); }); } diff --git a/main/xiaozhi-server/test/test_page.html b/main/xiaozhi-server/test/test_page.html index d29887f7..f2e834ee 100644 --- a/main/xiaozhi-server/test/test_page.html +++ b/main/xiaozhi-server/test/test_page.html @@ -195,17 +195,7 @@