Merge pull request #2537 from xinnan-tech/test-page-css

update:优化测试页面音波样式

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

@@ -245,6 +245,7 @@ button:disabled {
 }
 
 @keyframes pulse-speaking {
+
     0%,
     100% {
         opacity: 1;
@@ -357,6 +358,7 @@ span.connection-status.llm-emoji {
     height: 60px;
     width: 100%;
     margin-top: 10px;
+    margin-bottom: 15px;
     border: 1px solid #ddd;
     border-radius: 5px;
     background-color: #fafafa;
@@ -993,4 +995,4 @@ span.connection-status.llm-emoji {
     .mcp-tool-description {
         font-size: 11px;
     }
-}
+}

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

@@ -126,7 +126,12 @@ export class UIController {
         for (let i = 0; i < dataArray.length; i++) {
             barHeight = dataArray[i] / 2;
 
-            this.visualizerContext.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+            // 创建渐变色：从紫色到蓝色到青色
+            const hue = 200 + (barHeight / this.visualizerCanvas.height) * 60; // 200-260度，从青色到紫色
+            const saturation = 80 + (barHeight / this.visualizerCanvas.height) * 20; // 饱和度 80-100%
+            const lightness = 45 + (barHeight / this.visualizerCanvas.height) * 15; // 亮度 45-60%
+
+            this.visualizerContext.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
             this.visualizerContext.fillRect(x, this.visualizerCanvas.height - barHeight, barWidth, barHeight);
 
             x += barWidth + 1;