From 778c4560fda1094c976c8afa70b110bae0026533 Mon Sep 17 00:00:00 2001
From: lww155 <756794909@qq.com>
Date: Thu, 15 Jan 2026 09:20:22 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E6=96=B0=E5=A2=9E=E6=A8=A1=E5=9E=8B?=
=?UTF-8?q?=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
main/xiaozhi-server/test/css/test_page.css | 76 +++++++++++++++++++
main/xiaozhi-server/test/js/app.js | 11 +++
.../test/js/ui/bg-image-load-detector.js | 15 ++++
main/xiaozhi-server/test/test_page.html | 17 ++++-
4 files changed, 118 insertions(+), 1 deletion(-)
create mode 100644 main/xiaozhi-server/test/js/ui/bg-image-load-detector.js
diff --git a/main/xiaozhi-server/test/css/test_page.css b/main/xiaozhi-server/test/css/test_page.css
index 3aac3df1..7ca6ef85 100644
--- a/main/xiaozhi-server/test/css/test_page.css
+++ b/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;
diff --git a/main/xiaozhi-server/test/js/app.js b/main/xiaozhi-server/test/js/app.js
index 5c8b1c59..518e49c4 100644
--- a/main/xiaozhi-server/test/js/app.js
+++ b/main/xiaozhi-server/test/js/app.js
@@ -37,9 +37,20 @@ class App {
// 初始化Live2D
await this.initLive2D();
+ // 关闭加载loading
+ this.setModelLoadingStatus(false);
+
log('应用初始化完成', 'success');
}
+ // 设置model加载状态
+ setModelLoadingStatus(isLoading) {
+ const modelLoading = document.getElementById('modelLoading');
+ if (modelLoading) {
+ modelLoading.style.display = isLoading ? 'flex' : 'none';
+ }
+ }
+
// 初始化Live2D
async initLive2D() {
try {
diff --git a/main/xiaozhi-server/test/js/ui/bg-image-load-detector.js b/main/xiaozhi-server/test/js/ui/bg-image-load-detector.js
new file mode 100644
index 00000000..9ab3f16b
--- /dev/null
+++ b/main/xiaozhi-server/test/js/ui/bg-image-load-detector.js
@@ -0,0 +1,15 @@
+// 背景图加载检测
+const backgroundContainer = document.getElementById('backgroundContainer');
+// 提取背景图片URL
+let bgImageUrl = window.getComputedStyle(backgroundContainer).backgroundImage;
+const urlMatch = bgImageUrl.match(/url\(["']?(.*?)["']?\)/);
+bgImageUrl = urlMatch[1];
+const bgImage = new Image();
+bgImage.src = bgImageUrl;
+// 加载完成后显示模型加载
+bgImage.onload = function () {
+ const modelLoading = document.getElementById('modelLoading');
+ if (modelLoading) {
+ modelLoading.style.display = 'flex';
+ }
+}
\ No newline at end of file
diff --git a/main/xiaozhi-server/test/test_page.html b/main/xiaozhi-server/test/test_page.html
index 1bacc056..3d938c52 100644
--- a/main/xiaozhi-server/test/test_page.html
+++ b/main/xiaozhi-server/test/test_page.html
@@ -38,7 +38,7 @@
-
+
+
+
@@ -219,6 +231,9 @@
+
+
+