diff --git a/apps/web-antd/.gitignore b/apps/web-antd/.gitignore
new file mode 100644
index 000000000..024a956ab
--- /dev/null
+++ b/apps/web-antd/.gitignore
@@ -0,0 +1,3 @@
+# 由 vite.config.mts 的 copyLottiePlayer 插件在 dev/build 时自动从
+# node_modules/lottie-web 拷贝，不需要进版本控制
+public/lottie_light.min.js
diff --git a/apps/web-antd/loading.html b/apps/web-antd/loading.html
new file mode 100644
index 000000000..cfa7d6704
--- /dev/null
+++ b/apps/web-antd/loading.html
@@ -0,0 +1,89 @@
+<style data-app-loading="inject-css">
+  html {
+    /* same as ant-design-vue/dist/reset.css setting */
+    line-height: 1.15;
+  }
+
+  .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;
+    background-color: #f4f7f9;
+  }
+
+  .loading.hidden {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    transition: all 0.8s ease-out;
+  }
+
+  .dark .loading {
+    background: #0d0d10;
+  }
+
+  .title {
+    margin-top: 24px;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+      Arial, sans-serif !important;
+    font-size: 24px;
+    font-weight: 600 !important;
+    color: rgb(0 0 0 / 85%) !important;
+  }
+
+  .dark .title {
+    color: #fff !important;
+  }
+
+  /* stylelint-disable-next-line selector-id-pattern -- 与 inject-app-loading 的 #__app-loading__ 保持相同命名风格 */
+  #__app-loading-lottie__ {
+    width: 220px;
+    height: 220px;
+  }
+</style>
+<div class="loading" id="__app-loading__">
+  <div id="__app-loading-lottie__"></div>
+  <div class="title"><%= VITE_APP_TITLE %></div>
+</div>
+<!--
+  换色逻辑与 src/components/lottie-loading/LottieLoading.vue 共用同一份
+  classic-JS 源（window.__LottieThemePatch__），避免两处硬编码漂移。
+-->
+<script src="/lottie-theme-patch.js"></script>
+<script src="/lottie_light.min.js"></script>
+<script>
+  (function () {
+    var tp = window.__LottieThemePatch__;
+    var container = document.getElementById('__app-loading-lottie__');
+    if (!tp || !container || typeof lottie === 'undefined') return;
+    fetch('/loading.json')
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (data) {
+        var hsl = tp.readPrimaryHslFromLocalStorage(
+          '<%= VITE_APP_NAMESPACE %>-',
+        );
+        tp.patchColors(data, tp.buildShades(hsl));
+        lottie.loadAnimation({
+          container: container,
+          renderer: 'svg',
+          loop: true,
+          autoplay: true,
+          animationData: data,
+        });
+      })
+      .catch(function (e) {
+        console.error('[app-loading] lottie error', e);
+      });
+  })();
+</script>
diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 9d6edd863..4e78842c3 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -59,6 +59,7 @@
     "fast-xml-parser": "catalog:",
     "highlight.js": "catalog:",
     "jszip": "catalog:",
+    "lottie-web": "^5.13.0",
     "pinia": "catalog:",
     "qrcode": "catalog:",
     "steady-xml": "catalog:",
diff --git a/apps/web-antd/public/loading.json b/apps/web-antd/public/loading.json
new file mode 100644
index 000000000..89edde9ea
--- /dev/null
+++ b/apps/web-antd/public/loading.json
@@ -0,0 +1 @@
+{"v":"5.9.6","fr":25,"ip":0,"op":101,"w":600,"h":600,"nm":"huakuai","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"five","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":15,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":21,"s":[10]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":26,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":51,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":57,"s":[-10]},{"t":62,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.351,"y":1},"o":{"x":0.276,"y":0},"t":15,"s":[520,360,0],"to":[-4.667,-15,0],"ti":[22.917,0,0]},{"i":{"x":0.351,"y":1},"o":{"x":0.276,"y":0},"t":21,"s":[465,250,0],"to":[-22.917,0,0],"ti":[0,0,0]},{"i":{"x":0.416,"y":0.416},"o":{"x":0.317,"y":0.317},"t":26,"s":[410,360,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.467,"y":0.739},"o":{"x":0.225,"y":0},"t":51,"s":[410,360,0],"to":[0,0,0],"ti":[-18.333,0,0]},{"i":{"x":0.579,"y":1},"o":{"x":0.256,"y":0.125},"t":56,"s":[464.291,250,0],"to":[18.333,0,0],"ti":[0,0,0]},{"t":61,"s":[520,360,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-162,-58,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":15,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":21,"s":[90,110,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":25,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":27,"s":[120,70,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":29,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":51,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":57,"s":[90,110,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":61,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":63,"s":[120,70,100]},{"t":65,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[80,80],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":10,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":15,"s":[0.623529434204,0.917647063732,0.494117647409,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":26,"s":[0.443137258291,0.737254917622,0.078431375325,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":51,"s":[0.443137258291,0.737254917622,0.078431375325,1]},{"t":61,"s":[0.623529434204,0.917647063732,0.494117647409,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-162,-98],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":101,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"four","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[10]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":21,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":56,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":61,"s":[-10]},{"t":66,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.316,"y":1},"o":{"x":0.24,"y":0},"t":11,"s":[410,360,0],"to":[-4.667,-15,0],"ti":[22.917,0,0]},{"i":{"x":0.316,"y":1},"o":{"x":0.24,"y":0},"t":16,"s":[355,250,0],"to":[-22.917,0,0],"ti":[6.307,-19.302,0]},{"i":{"x":0.316,"y":1},"o":{"x":0.167,"y":0},"t":21,"s":[300,360,0],"to":[-0.116,0.355,0],"ti":[0,0,0]},{"i":{"x":0.583,"y":0.775},"o":{"x":0.167,"y":0},"t":56,"s":[300,360,0],"to":[0,0,0],"ti":[-27.317,0.053,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.417,"y":0.224},"t":61,"s":[354.435,250,0],"to":[28.392,-0.055,0],"ti":[-2.765,-8.21,0]},{"t":66,"s":[410,360,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-162,-58,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":11,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":16,"s":[90,110,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":20,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":22,"s":[120,70,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":24,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":56,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":61,"s":[90,110,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":65,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":67,"s":[120,70,100]},{"t":69,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[80,80],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":10,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11,"s":[0.443137258291,0.737254917622,0.078431375325,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":21,"s":[0.298039227724,0.623529434204,0.043137256056,1]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":56,"s":[0.298039227724,0.623529434204,0.043137256056,1]},{"t":66,"s":[0.443137258291,0.737254917622,0.078431375325,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-162,-98],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":101,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"three","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":6,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11,"s":[10]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":16,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":61,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":66,"s":[-10]},{"t":71,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.369,"y":1},"o":{"x":0.258,"y":0},"t":6,"s":[300,360,0],"to":[-5.167,-18.5,0],"ti":[22.917,0,0]},{"i":{"x":0.369,"y":1},"o":{"x":0.258,"y":0},"t":11,"s":[245,250,0],"to":[-22.917,0,0],"ti":[2.434,-10.892,0]},{"i":{"x":0.369,"y":1},"o":{"x":0.167,"y":0},"t":16,"s":[190,360,0],"to":[-0.385,1.723,0],"ti":[0,0,0]},{"i":{"x":0.583,"y":0.776},"o":{"x":0.167,"y":0},"t":61,"s":[190,360,0],"to":[0,0,0],"ti":[-29.055,-0.462,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.417,"y":0.224},"t":66,"s":[245.406,250,0],"to":[28.268,0.45,0],"ti":[-3.029,-9.151,0]},{"t":71,"s":[300,360,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-162,-58,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":6,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":11,"s":[90,110,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":15,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":17,"s":[120,70,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":19,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":61,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":66,"s":[90,110,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":70,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":72,"s":[120,70,100]},{"t":74,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[80,80],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":10,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":6,"s":[0.298039227724,0.623529434204,0.043137256056,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":16,"s":[0.176470592618,0.474509805441,0.023529412225,1]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":61,"s":[0.176470592618,0.474509805441,0.023529412225,1]},{"t":71,"s":[0.298039227724,0.623529434204,0.043137256056,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-162,-98],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":101,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"two","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":1,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":6,"s":[10]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":11,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":67,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":73,"s":[-10]},{"t":79,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.458,"y":1},"o":{"x":0.222,"y":0},"t":1,"s":[190,360,0],"to":[-2.417,-11.5,0],"ti":[22.917,0,0]},{"i":{"x":0.458,"y":1},"o":{"x":0.222,"y":0},"t":6,"s":[135,250,0],"to":[-22.917,0,0],"ti":[2.778,-8.535,0]},{"i":{"x":0.458,"y":1},"o":{"x":0.167,"y":0},"t":11,"s":[80,360,0],"to":[-0.664,2.04,0],"ti":[0,0,0]},{"i":{"x":0.583,"y":0.731},"o":{"x":0.167,"y":0},"t":67,"s":[80,360,0],"to":[0,0,0],"ti":[-28.172,-0.208,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.417,"y":0.269},"t":73,"s":[135.986,250,0],"to":[26.782,0.198,0],"ti":[3.225,8.657,0]},{"t":79,"s":[190,360,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-162,-58,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":1,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":6,"s":[90,110,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[120,70,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":14,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":67,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":73,"s":[90,110,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":78,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":80,"s":[120,70,100]},{"t":82,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[80,80],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":10,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":1,"s":[0.176470592618,0.474509805441,0.023529412225,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":11,"s":[0.141176477075,0.388235300779,0.019607843831,1]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":67,"s":[0.141176477075,0.388235300779,0.019607843831,1]},{"t":79,"s":[0.176470592618,0.474509805441,0.023529412225,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-162,-98],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":101,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"one","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.111,"y":1},"o":{"x":0.26,"y":0},"t":0,"s":[80,320,0],"to":[73.333,0,0],"ti":[-73.333,0,0]},{"i":{"x":0.082,"y":0.082},"o":{"x":0.213,"y":0.213},"t":39.967,"s":[520,320,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.112,"y":1},"o":{"x":0.26,"y":0},"t":50,"s":[520,320,0],"to":[-73.333,0,0],"ti":[73.333,0,0]},{"t":90,"s":[80,320,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-162,-98,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[80,80],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":10,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.444],"y":[1]},"o":{"x":[0.249],"y":[0]},"t":0,"s":[0.141176477075,0.388235300779,0.019607843831,1]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":40,"s":[0.623529434204,0.917647063732,0.494117647409,1]},{"i":{"x":[0.444],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[0.623529434204,0.917647063732,0.494117647409,1]},{"t":90,"s":[0.141176477075,0.388235300779,0.019607843831,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-162,-98],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":101,"st":0,"ct":1,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/apps/web-antd/public/lottie-theme-patch.js b/apps/web-antd/public/lottie-theme-patch.js
new file mode 100644
index 000000000..b7f685623
--- /dev/null
+++ b/apps/web-antd/public/lottie-theme-patch.js
@@ -0,0 +1,151 @@
+/**
+ * Lottie 主题色换色共享模块（单一真源）
+ *
+ * 同时供两处使用：
+ *  1. loading.html —— Vue 挂载前，用 localStorage 里缓存的 preferences 读主题色
+ *  2. LottieLoading.vue —— 组件运行时，直接读 CSS 变量 --primary
+ *
+ * JSON 里的动画原本是 5 档硬编码绿色，按此映射替换为主题色的 5 档亮度。
+ * 本文件不进打包，由 <script src="/lottie-theme-patch.js"> 引入，
+ * 会在 window 上挂 __LottieThemePatch__。
+ */
+(function (global) {
+  /** JSON 中硬编码的 5 档绿色（取 2 位小数指纹） -> 5 档亮度索引 */
+  var SHADE_MAP = {
+    '0.62,0.92,0.49': 0, // 最浅
+    '0.44,0.74,0.08': 1,
+    '0.30,0.62,0.04': 2,
+    '0.18,0.47,0.02': 3,
+    '0.14,0.39,0.02': 4, // 最深
+  };
+
+  /** 5 档亮度（从浅到深），覆盖主流主题色 */
+  var LIGHTNESSES = [72, 58, 48, 36, 26];
+
+  var FALLBACK_HSL = { h: 37, s: 100, l: 52 }; // 与 preferences/config.ts 默认色一致
+  var HSL_PARSE_RE = /([\d.]+)(?:deg)?[\s,]+([\d.]+)%?[\s,]+([\d.]+)%?/i;
+  var HSL_FN_RE = /hsl\(\s*([\d.]+)(?:deg)?[\s,]+([\d.]+)%?[\s,]+([\d.]+)%?\s*\)/i;
+
+  function hslToRgb(h, s, l) {
+    var hh = (((h % 360) + 360) % 360) / 360;
+    var ss = s / 100;
+    var ll = l / 100;
+    if (ss === 0) return [ll, ll, ll];
+    var q = ll < 0.5 ? ll * (1 + ss) : ll + ss - ll * ss;
+    var p = 2 * ll - q;
+    function f(t) {
+      var tt = t;
+      if (tt < 0) tt += 1;
+      if (tt > 1) tt -= 1;
+      if (tt < 1 / 6) return p + (q - p) * 6 * tt;
+      if (tt < 1 / 2) return q;
+      if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6;
+      return p;
+    }
+    return [f(hh + 1 / 3), f(hh), f(hh - 1 / 3)];
+  }
+
+  function rgbKey(arr) {
+    if (!arr || arr.length < 3) return '';
+    return arr[0].toFixed(2) + ',' + arr[1].toFixed(2) + ',' + arr[2].toFixed(2);
+  }
+
+  function buildShades(hsl) {
+    return LIGHTNESSES.map(function (l) {
+      return hslToRgb(hsl.h, hsl.s, l);
+    });
+  }
+
+  /** 就地替换 Lottie JSON 中的填充色（静态与关键帧两种形态） */
+  function patchColors(data, shades) {
+    function swap(arr) {
+      var idx = SHADE_MAP[rgbKey(arr)];
+      if (idx === undefined) return null;
+      var s = shades[idx];
+      return [s[0], s[1], s[2], arr[3] == null ? 1 : arr[3]];
+    }
+    var layers = (data && data.layers) || [];
+    for (var li = 0; li < layers.length; li++) {
+      var shapes = layers[li].shapes || [];
+      for (var si = 0; si < shapes.length; si++) {
+        var its = shapes[si].it;
+        if (!its) continue;
+        for (var ii = 0; ii < its.length; ii++) {
+          var item = its[ii];
+          if (item.ty !== 'fl' || !item.c) continue;
+          var k = item.c.k;
+          if (Array.isArray(k) && typeof k[0] === 'number') {
+            var v = swap(k);
+            if (v) item.c.k = v;
+          } else if (Array.isArray(k)) {
+            for (var ki = 0; ki < k.length; ki++) {
+              var kf = k[ki];
+              if (kf && kf.s && typeof kf.s[0] === 'number') {
+                var v2 = swap(kf.s);
+                if (v2) kf.s = v2;
+              }
+            }
+          }
+        }
+      }
+    }
+    return data;
+  }
+
+  /**
+   * Vue 挂载前：扫 localStorage 里 preferences 缓存读 colorPrimary
+   * namespacePrefix 用于把扫描范围限定在当前 app 的 key 上，避免误命中其它应用
+   */
+  function readPrimaryHslFromLocalStorage(namespacePrefix) {
+    try {
+      for (var i = 0; i < localStorage.length; i++) {
+        var k = localStorage.key(i);
+        if (!k) continue;
+        if (namespacePrefix && k.indexOf(namespacePrefix) !== 0) continue;
+        if (!k.endsWith('-preferences')) continue;
+        if (k.endsWith('-preferences-theme')) continue;
+        if (k.endsWith('-preferences-locale')) continue;
+        var raw = localStorage.getItem(k);
+        if (!raw) continue;
+        var parsed = JSON.parse(raw);
+        var color =
+          parsed &&
+          parsed.value &&
+          parsed.value.theme &&
+          parsed.value.theme.colorPrimary;
+        if (!color) continue;
+        var m = HSL_FN_RE.exec(color);
+        if (!m) continue;
+        return { h: +m[1], s: +m[2], l: +m[3] };
+      }
+    } catch (e) {
+      /* fall through to fallback */
+    }
+    return FALLBACK_HSL;
+  }
+
+  /** Vue 运行时：读 CSS 变量 --primary（格式 "H S% L%"） */
+  function readPrimaryHslFromCss() {
+    try {
+      var raw = getComputedStyle(document.documentElement)
+        .getPropertyValue('--primary')
+        .trim();
+      if (!raw) return FALLBACK_HSL;
+      var m = HSL_PARSE_RE.exec(raw);
+      return m ? { h: +m[1], s: +m[2], l: +m[3] } : FALLBACK_HSL;
+    } catch (e) {
+      return FALLBACK_HSL;
+    }
+  }
+
+  global.__LottieThemePatch__ = {
+    SHADE_MAP: SHADE_MAP,
+    LIGHTNESSES: LIGHTNESSES,
+    hslToRgb: hslToRgb,
+    rgbKey: rgbKey,
+    buildShades: buildShades,
+    patchColors: patchColors,
+    readPrimaryHslFromLocalStorage: readPrimaryHslFromLocalStorage,
+    readPrimaryHslFromCss: readPrimaryHslFromCss,
+  };
+})(window);
diff --git a/apps/web-antd/src/components/lottie-loading/LottieLoading.vue b/apps/web-antd/src/components/lottie-loading/LottieLoading.vue
new file mode 100644
index 000000000..9ac713be8
--- /dev/null
+++ b/apps/web-antd/src/components/lottie-loading/LottieLoading.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { AnimationItem } from 'lottie-web';
+
+import type { LottieJsonShape } from './globals';
+
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface Props {
+  /** 容器边长，数字按 px 处理，其他字符串原样作为 CSS 长度 */
+  size?: number | string;
+  /** Lottie JSON 的 URL，默认读取 public/loading.json（与 app 全局 loading 共用） */
+  src?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 200,
+  src: '/loading.json',
+});
+
+const container = ref<HTMLElement>();
+let instance: AnimationItem | undefined;
+let cancelled = false;
+
+// 卸载优先注册：组件在 fetch 中途被卸载时也能安全收尾
+onUnmounted(() => {
+  cancelled = true;
+  instance?.destroy();
+});
+
+onMounted(async () => {
+  if (!container.value) return;
+  // lottie 和换色模块由 loading.html 通过 classic <script> 注入到 window 上，
+  // 这里不再重复打包，避免 ~170KB 重复下发
+  const tp = window.__LottieThemePatch__;
+  const lottie = window.lottie;
+  if (!tp || !lottie) {
+    console.warn('[LottieLoading] window.__LottieThemePatch__ / lottie 缺失');
+    return;
+  }
+  try {
+    const res = await fetch(props.src);
+    if (!res.ok) throw new Error(`fetch ${props.src} -> ${res.status}`);
+    const data = (await res.json()) as LottieJsonShape;
+    if (cancelled || !container.value) return;
+    tp.patchColors(data, tp.buildShades(tp.readPrimaryHslFromCss()));
+    instance = lottie.loadAnimation({
+      animationData: data,
+      autoplay: true,
+      container: container.value,
+      loop: true,
+      renderer: 'svg',
+    });
+  } catch (error) {
+    console.error('[LottieLoading]', error);
+  }
+});
+</script>
+
+<template>
+  <div
+    ref="container"
+    :style="{
+      width: typeof size === 'number' ? `${size}px` : size,
+      height: typeof size === 'number' ? `${size}px` : size,
+    }"
+  ></div>
+</template>
diff --git a/apps/web-antd/src/components/lottie-loading/globals.ts b/apps/web-antd/src/components/lottie-loading/globals.ts
new file mode 100644
index 000000000..fa6a0aeae
--- /dev/null
+++ b/apps/web-antd/src/components/lottie-loading/globals.ts
@@ -0,0 +1,41 @@
+import type { AnimationConfigWithData, AnimationItem } from 'lottie-web';
+
+export interface LottieHsl {
+  h: number;
+  s: number;
+  l: number;
+}
+
+/** 形状极简的 Lottie JSON 结构，仅覆盖 patchColors 真正访问的字段 */
+export interface LottieJsonShape {
+  layers?: Array<{
+    shapes?: Array<{
+      it?: Array<{
+        c?: {
+          k?: Array<{ s?: number[] }> | number[];
+        };
+        ty?: string;
+      }>;
+    }>;
+  }>;
+}
+
+export interface LottieThemePatch {
+  SHADE_MAP: Record<string, number>;
+  LIGHTNESSES: number[];
+  hslToRgb(h: number, s: number, l: number): [number, number, number];
+  rgbKey(arr: number[]): string;
+  buildShades(hsl: LottieHsl): number[][];
+  patchColors<T extends LottieJsonShape>(data: T, shades: number[][]): T;
+  readPrimaryHslFromLocalStorage(namespacePrefix?: string): LottieHsl;
+  readPrimaryHslFromCss(): LottieHsl;
+}
+
+declare global {
+  interface Window {
+    __LottieThemePatch__?: LottieThemePatch;
+    lottie?: {
+      loadAnimation(config: AnimationConfigWithData): AnimationItem;
+    };
+  }
+}
diff --git a/apps/web-antd/src/components/lottie-loading/index.ts b/apps/web-antd/src/components/lottie-loading/index.ts
new file mode 100644
index 000000000..51954f9df
--- /dev/null
+++ b/apps/web-antd/src/components/lottie-loading/index.ts
@@ -0,0 +1 @@
+export { default as LottieLoading } from './LottieLoading.vue';
diff --git a/apps/web-antd/src/views/_core/authentication/sso-callback.vue b/apps/web-antd/src/views/_core/authentication/sso-callback.vue
index 1540109a7..262ad7420 100644
--- a/apps/web-antd/src/views/_core/authentication/sso-callback.vue
+++ b/apps/web-antd/src/views/_core/authentication/sso-callback.vue
@@ -8,6 +8,7 @@ import { message } from 'ant-design-vue';
 
 import { ssoCallback } from '#/api/core/sso';
 import { CLIENT_ID } from '#/api/request';
+import { LottieLoading } from '#/components/lottie-loading';
 import { useAuthStore } from '#/store';
 
 /**
@@ -55,8 +56,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="flex h-screen items-center justify-center text-base">
-    <span v-if="errorMsg">{{ errorMsg }}</span>
-    <span v-else>正在登录，请稍候...</span>
+  <div class="flex h-screen items-center justify-center">
+    <div v-if="errorMsg" class="text-base">{{ errorMsg }}</div>
+    <LottieLoading v-else :size="220" />
   </div>
 </template>
diff --git a/apps/web-antd/vite.config.mts b/apps/web-antd/vite.config.mts
index 71ae65bb5..18b2a3750 100644
--- a/apps/web-antd/vite.config.mts
+++ b/apps/web-antd/vite.config.mts
@@ -1,9 +1,39 @@
+import type { Plugin } from 'vite';
+
+import { copyFileSync, mkdirSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
 import { defineConfig } from '@vben/vite-config';
 
+/**
+ * 启动/构建时把 lottie-web 的 light 播放器从 node_modules 拷到 public/
+ * 供 loading.html 以 <script src="/lottie_light.min.js"> 方式加载。
+ * 直接覆盖拷贝（~170KB，<1ms），避免 mtime 粒度在部分 FS 上漏拷。
+ */
+function copyLottiePlayer(): Plugin {
+  const require = createRequire(import.meta.url);
+  const src = require.resolve('lottie-web/build/player/lottie_light.min.js');
+  const dest = resolve(
+    dirname(fileURLToPath(import.meta.url)),
+    'public/lottie_light.min.js',
+  );
+
+  return {
+    name: 'web-antd:copy-lottie-player',
+    configResolved() {
+      mkdirSync(dirname(dest), { recursive: true });
+      copyFileSync(src, dest);
+    },
+  };
+}
+
 export default defineConfig(async () => {
   return {
     application: {},
     vite: {
+      plugins: [copyLottiePlayer()],
       server: {
         proxy: {
           '/admin-api': {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b5f19f4b..aba5cb9a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -821,6 +821,9 @@ importers:
       jszip:
         specifier: 'catalog:'
         version: 3.10.1
+      lottie-web:
+        specifier: ^5.13.0
+        version: 5.13.0
       pinia:
         specifier: ^3.0.3
         version: 3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
@@ -1176,7 +1179,7 @@ importers:
     dependencies:
       '@commitlint/cli':
         specifier: 'catalog:'
-        version: 19.8.1(@types/node@25.0.3)(typescript@5.9.3)
+        version: 19.8.1(@types/node@24.10.4)(typescript@5.9.3)
       '@commitlint/config-conventional':
         specifier: 'catalog:'
         version: 19.8.1
@@ -8523,6 +8526,9 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lottie-web@5.13.0:
+    resolution: {integrity: sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==}
+
   loupe@3.2.1:
     resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
@@ -12952,11 +12958,11 @@ snapshots:
       style-mod: 4.1.3
       w3c-keyname: 2.2.8
 
-  '@commitlint/cli@19.8.1(@types/node@25.0.3)(typescript@5.9.3)':
+  '@commitlint/cli@19.8.1(@types/node@24.10.4)(typescript@5.9.3)':
     dependencies:
       '@commitlint/format': 19.8.1
       '@commitlint/lint': 19.8.1
-      '@commitlint/load': 19.8.1(@types/node@25.0.3)(typescript@5.9.3)
+      '@commitlint/load': 19.8.1(@types/node@24.10.4)(typescript@5.9.3)
       '@commitlint/read': 19.8.1
       '@commitlint/types': 19.8.1
       tinyexec: 1.0.2
@@ -13003,7 +13009,7 @@ snapshots:
       '@commitlint/rules': 19.8.1
       '@commitlint/types': 19.8.1
 
-  '@commitlint/load@19.8.1(@types/node@25.0.3)(typescript@5.9.3)':
+  '@commitlint/load@19.8.1(@types/node@24.10.4)(typescript@5.9.3)':
     dependencies:
       '@commitlint/config-validator': 19.8.1
       '@commitlint/execute-rule': 19.8.1
@@ -13011,7 +13017,7 @@ snapshots:
       '@commitlint/types': 19.8.1
       chalk: 5.6.2
       cosmiconfig: 9.0.0(typescript@5.9.3)
-      cosmiconfig-typescript-loader: 6.2.0(@types/node@25.0.3)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 6.2.0(@types/node@24.10.4)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -16525,9 +16531,9 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@6.2.0(@types/node@25.0.3)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3):
+  cosmiconfig-typescript-loader@6.2.0(@types/node@24.10.4)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3):
     dependencies:
-      '@types/node': 25.0.3
+      '@types/node': 24.10.4
       cosmiconfig: 9.0.0(typescript@5.9.3)
       jiti: 2.6.1
       typescript: 5.9.3
@@ -18988,6 +18994,8 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  lottie-web@5.13.0: {}
+
   loupe@3.2.1: {}
 
   lower-case@2.0.2: