From 543162986fbb94f10704f9f4bd3c02a974c2bbd6 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 3 Feb 2026 21:24:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=BA=94=E7=94=A8=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加一个带有熊猫动画的 loading.html 作为应用加载页面，替换默认的加载体验。同时更新 VS Code 设置，将 HTML 文件的默认格式化工具从 Prettier 改为 VS Code 内置的 HTML 语言功能，以更好地处理 HTML 文件。
---
 .vscode/settings.json      |   2 +-
 apps/web-antd/loading.html | 288 +++++++++++++++++++++++++++++++++++++
 2 files changed, 289 insertions(+), 1 deletion(-)
 create mode 100644 apps/web-antd/loading.html

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9147d12c..f7ae6c5b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -38,7 +38,7 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.html-language-features"
   },
   "[css]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
diff --git a/apps/web-antd/loading.html b/apps/web-antd/loading.html
new file mode 100644
index 00000000..64e95edd
--- /dev/null
+++ b/apps/web-antd/loading.html
@@ -0,0 +1,288 @@
+<style data-app-loading="inject-css">
+  html {
+    /* same as antdv-next/dist/reset.css setting, avoid the title line-height changed */
+    line-height: 1.15;
+  }
+
+  .dark .loading {
+    background-color: #0d0d10;
+  }
+
+  .dark .loading .title {
+    color: rgb(255 255 255 / 85%);
+  }
+
+  .loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    background-color: #f4f7f9;
+  }
+
+  /* .loading.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.6s ease-out;
+  } */
+
+  .loading .title {
+    margin-top: 36px;
+    font-size: 30px;
+    font-weight: 600;
+    color: rgb(0 0 0 / 85%);
+  }
+
+  #__app-loading__.hidden {
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 1s ease-out;
+  }
+
+  /** 下面是自定义 **/
+  /* From Uiverse.io by Danishrehman786 */
+  .panda-container {
+    position: relative;
+    width: 290px;
+    height: 250px;
+    perspective: 1000px;
+  }
+
+  .panda-head {
+    position: absolute;
+    width: 200px;
+    height: 180px;
+    background: white;
+    border: 4px solid #222;
+    border-radius: 50%;
+    top: 50px;
+    left: 50px;
+    z-index: 4;
+    box-shadow:
+      0 3px 10px rgba(0, 0, 0, 0.1),
+      inset 0 -5px 20px rgba(0, 0, 0, 0.05);
+  }
+
+  .ear {
+    position: absolute;
+    width: 70px;
+    height: 70px;
+    background: #222;
+    border: 4px solid #222;
+    border-radius: 50%;
+    z-index: 3;
+    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.3);
+  }
+
+  .ear-left {
+    top: 30px;
+    left: 40px;
+    transform: rotate(-15deg);
+    animation: ear-twitch-left 3s ease-in-out infinite;
+  }
+
+  .ear-right {
+    top: 30px;
+    left: 190px;
+    transform: rotate(15deg);
+    animation: ear-twitch-right 3.5s ease-in-out infinite;
+  }
+
+  .eye-patch {
+    position: absolute;
+    width: 60px;
+    height: 70px;
+    background: #222;
+    border-radius: 50%;
+    z-index: 5;
+  }
+
+  .eye-patch-left {
+    top: 60px;
+    left: 30px;
+  }
+
+  .eye-patch-right {
+    top: 60px;
+    left: 110px;
+  }
+
+  .eye {
+    position: absolute;
+    width: 25px;
+    height: 30px;
+    background: white;
+    border-radius: 50%;
+    z-index: 6;
+    animation: blink 4s linear infinite;
+  }
+
+  .eye-left {
+    top: 75px;
+    left: 45px;
+  }
+
+  .eye-right {
+    top: 75px;
+    left: 125px;
+  }
+
+  .pupil {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: #222;
+    border-radius: 50%;
+    z-index: 7;
+    animation: look-around 8s ease-in-out infinite;
+  }
+
+  .pupil-left {
+    top: 82px;
+    left: 53px;
+  }
+
+  .pupil-right {
+    top: 82px;
+    left: 133px;
+  }
+
+  .nose {
+    position: absolute;
+    width: 30px;
+    height: 25px;
+    background: #222;
+    border-radius: 50%;
+    top: 110px;
+    left: 85px;
+    z-index: 8;
+    box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3);
+  }
+
+  .mouth {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 12px solid #222;
+    border-radius: 50%;
+    top: 135px;
+    left: 92px;
+    z-index: 7;
+    transform: rotate(180deg);
+    animation: smile 5s ease-in-out infinite;
+  }
+
+  @keyframes wave {
+
+    0%,
+    100% {
+      transform: rotate(-20deg);
+    }
+
+    50% {
+      transform: rotate(10deg);
+    }
+  }
+
+  @keyframes blink {
+
+    0%,
+    45%,
+    55%,
+    100% {
+      height: 30px;
+    }
+
+    48%,
+    52% {
+      height: 5px;
+    }
+  }
+
+  @keyframes look-around {
+
+    0%,
+    100% {
+      transform: translate(0, 0);
+    }
+
+    25% {
+      transform: translate(3px, 3px);
+    }
+
+    50% {
+      transform: translate(0, -3px);
+    }
+
+    75% {
+      transform: translate(-3px, 2px);
+    }
+  }
+
+  @keyframes smile {
+
+    0%,
+    100% {
+      transform: rotate(180deg) scale(1);
+    }
+
+    50% {
+      transform: rotate(180deg) scale(1.2);
+    }
+  }
+
+  @keyframes ear-twitch-left {
+
+    0%,
+    100% {
+      transform: rotate(-15deg);
+    }
+
+    50% {
+      transform: rotate(-25deg);
+    }
+  }
+
+  @keyframes ear-twitch-right {
+
+    0%,
+    100% {
+      transform: rotate(15deg);
+    }
+
+    50% {
+      transform: rotate(25deg);
+    }
+  }
+</style>
+<div class="loading" id="__app-loading__">
+  <div class="panda-container">
+    <div class="ear ear-left"></div>
+    <div class="ear ear-right"></div>
+    <div class="panda-head">
+      <div class="eye-patch eye-patch-left"></div>
+      <div class="eye-patch eye-patch-right"></div>
+      <div class="eye eye-left"></div>
+      <div class="eye eye-right"></div>
+      <div class="pupil pupil-left"></div>
+      <div class="pupil pupil-right"></div>
+      <div class="nose"></div>
+      <div class="mouth"></div>
+    </div>
+  </div>
+
+  <div class="title">
+    <%= VITE_APP_TITLE %>
+  </div>
+</div>