update: 新增模型加载

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

@@ -54,6 +54,82 @@ body {
     /* 移除底部padding，让模型可以延伸到页面底部 */
 }
 
+/* ==================== 模型加载区 ==================== */
+.model-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 200px;
+    transform: translate(-50%, -50%);
+    user-select: none;
+}
+
+.model-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
+    background-image: linear-gradient(transparent 50%, rgba(88, 101, 242, 0.05) 50%);
+    background-size: 100% 4px;
+    animation: scan 1.26s linear infinite;
+}
+
+.loading-char-float {
+    font-size: 22px;
+    letter-spacing: 3px;
+    position: relative;
+}
+
+.loading-char-float .main-char {
+    color: #f0f8ff;
+    text-shadow: 0 0 5px #5865f2, 0 0 10px rgba(88, 101, 242, 0.8);
+    display: inline-block;
+}
+
+.loading-char-float .main-char span {
+    animation: char-float 1.26s ease-in-out infinite;
+    display: inline-block;
+}
+
+.loading-char-float .shadow-char {
+    position: absolute;
+    top: 3px;
+    left: 0;
+    color: rgba(88, 101, 242, 0.3);
+    pointer-events: none;
+    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; }
+
+@keyframes scan {
+    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); }
+}
+
+@keyframes shadow-float {
+    0%, 100% { transform: translateY(3px); opacity: 0.3; }
+    50% { transform: translateY(8px); opacity: 0.15; }
+}
+
 /* ==================== Live2D显示区域 ==================== */
 #live2d-stage {
     position: fixed;