✨ feat: add new payment icons for Alipay and WeChat Pay, update asset paths

- Added SVG icons for Alipay and WeChat Pay in the payment assets directory.
- Updated paths for Lottie animations in various components to use relative paths.
- Changed QR code image sources in payment-related components to point to the new asset paths.
- Adjusted i18n configuration to load translation files from the updated assets directory.

apps/admin/src/sections/auth/index.tsx

@@ -37,7 +37,7 @@ export default function Auth() {
               autoplay
               className="mx-auto hidden w-full lg:block"
               loop
-              src="./lotties/login.json"
+              src="./assets/lotties/login.json"
             />
             <p className="hidden w-[275px] text-center md:w-1/2 lg:block xl:w-[500px]">
               {site.site_desc}

apps/admin/vite.config.ts

@@ -9,7 +9,7 @@ import { defineConfig } from "vite";
 export default defineConfig({
   base: "./",
   plugins: [
-    devtools(),
+    devtools({ eventBusConfig: { port: 42_070 } }),
     tanstackRouter({
       target: "react",
       autoCodeSplitting: true,
@@ -32,4 +32,7 @@ export default defineConfig({
       },
     },
   },
+  build: {
+    assetsDir: "static",
+  },
 });

apps/user/src/sections/auth/index.tsx

@@ -49,7 +49,7 @@ export default function Main() {
               autoplay
               className="mx-auto hidden w-[275px] lg:block xl:w-[500px]"
               loop
-              src="/lotties/login.json"
+              src="./assets/lotties/login.json"
             />
             <p className="hidden w-[275px] text-center md:w-1/2 lg:block xl:w-[500px]">
               {site.site_desc}

apps/user/src/sections/main/global-map.tsx

@@ -45,7 +45,7 @@ export function GlobalMap() {
           autoplay
           className="w-full scale-150"
           loop
-          src="/lotties/global-map.json"
+          src="./assets/lotties/global-map.json"
         />
       </motion.div>
     </motion.section>

apps/user/src/sections/main/hero.tsx

@@ -52,7 +52,11 @@ export function Hero() {
         transition={{ type: "spring", stiffness: 80, damping: 15, delay: 0.5 }}
         viewport={{ once: true, amount: 0.3 }}
       >
-        <DotLottieReact autoplay loop src="/lotties/network-security.json" />
+        <DotLottieReact
+          autoplay
+          loop
+          src="./assets/lotties/network-security.json"
+        />
       </motion.div>
     </motion.div>
   );

apps/user/src/sections/main/stats.tsx

@@ -14,7 +14,7 @@ export function Stats() {
           autoplay
           className="size-24"
           loop
-          src="/lotties/users.json"
+          src="./assets/lotties/users.json"
         />
       ),
     },
@@ -29,7 +29,7 @@ export function Stats() {
           autoplay
           className="size-24"
           loop
-          src="/lotties/servers.json"
+          src="./assets/lotties/servers.json"
         />
       ),
     },
@@ -41,7 +41,7 @@ export function Stats() {
           autoplay
           className="size-24"
           loop
-          src="/lotties/locations.json"
+          src="./assets/lotties/locations.json"
         />
       ),
     },

apps/user/src/sections/purchasing/order.tsx

@@ -248,7 +248,7 @@ export default function Order() {
                 </p>
                 <QRCodeCanvas
                   imageSettings={{
-                    src: "/payment/alipay_f2f.svg",
+                    src: "./assets/payment/alipay_f2f.svg",
                     width: 24,
                     height: 24,
                     excavate: true,

apps/user/src/sections/subscribe/payment-methods.tsx

@@ -67,7 +67,7 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({
                 <img
                   alt={item.name}
                   height={48}
-                  src={item.icon || "/payment/balance.svg"}
+                  src={item.icon || "./assets/payment/balance.svg"}
                   width={48}
                 />
               </div>

apps/user/src/sections/user/payment/index.tsx

@@ -234,7 +234,7 @@ export default function Page() {
               </p>
               <QRCodeCanvas
                 imageSettings={{
-                  src: "/payment/alipay_f2f.svg",
+                  src: "./assets/payment/alipay_f2f.svg",
                   width: 24,
                   height: 24,
                   excavate: true,