Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-22 07:03:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
rainv123
2026-02-02 10:47:01 +08:00
parent ba2749430f
commit 19fdf5d917
3 changed files with 125 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/xiaozhi-server/test/css/test_page.css
+120 -12
View File
@@ -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;
main/xiaozhi-server/test/js/ui/controller.js
+4 -4
View File
@@ -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();
});
}
main/xiaozhi-server/test/test_page.html
+1 -11
View File
@@ -195,17 +195,7 @@
<div class="config-row">
<div class="config-item">
<label></label>
<button class="control-btn" id="switchModelBtn" 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="切换背景">
<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" />