perf: 优化首屏加载

src/assets/login/illustration2.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="380" data-name="Layer 1" viewBox="0 0 896 529.113"><path fill="#3f3d56" d="M674.067 437.34s-26.377 9.895-38.806 32.944-6.201 50.525-6.201 50.525 26.378-9.895 38.806-32.944 6.201-50.524 6.201-50.524Z"/><path fill="#5392f0" d="M709.5 471.71s-8.642 26.813-31.08 40.313-50.177 8.573-50.177 8.573 8.642-26.814 31.08-40.314 50.177-8.573 50.177-8.573Z"/><path fill="#2f2e41" d="M0 527.113h896v2H0zM361.872 435.088a95.444 95.444 0 0 1-35.748-14.447l1.182-1.613a93.363 93.363 0 0 0 34.999 14.105c18.932 3.402 47.26 1.732 74.707-25.527 53.414-53.048 104.393-58.39 104.902-58.438l.186 1.992c-.501.047-50.768 5.317-103.678 57.866-21.613 21.464-43.792 27.402-61.718 27.402a83.5 83.5 0 0 1-14.832-1.34Z"/><circle cx="515.153" cy="381.113" r="12" fill="#2f2e41"/><circle cx="430.153" cy="437.113" r="12" fill="#2f2e41"/><path fill="#3f3d56" d="M683.5 528.113s-17.462-5.413-52.261-10.842l.761-10.658c6-60-34-150-34-150a401.561 401.561 0 0 1 21.47 139.024c-5.338-9.312-15.65-19.358-35.47-25.524 0 0 25.778 22.106 33.16 45.102a997.84 997.84 0 0 0-102.023-8.216L524 486.613l-17 17s-7-51-22-53l11 50s-13-10-16-9l7.397 14.795c-49.819-.517-109.084 1.735-177.765 8.952L318 496.113l-17 17s-7-51-22-53l11 50s-13-10-16-9l8.643 17.286q-33.667 4.004-70.143 9.714Z"/><path fill="#a0616a" d="M407.648 44.491c-10.9 11.748 17.598 40.26 17.598 40.26s-57.707 9.73-53.128 9.14 2.206-49.131 2.206-49.131 44.224-12.017 33.324-.269Z"/><path fill="#2f2e41" d="m447.812 170.222-50.139 25.614-27.23 15.606s-32.098 40.432-38.086 64.393 25.93 68.247 29.543 72.823a54.36 54.36 0 0 1 4.99 7.423c1.247 1.856 12.029-.54 23.803-3.065s-1.563-19.964-1.563-19.964-15.027-38.395-16.147-39.26c-1.045-.806-4.6-7.446-2.043-10.352a25.95 25.95 0 0 0 5.445-8.898 30.09 30.09 0 0 1 4.187-7.942s45.361-36.836 59.528-49.378 51.83-4.658 51.83-4.658-17.782 68.2-22.23 72.806-4.93 8.7-2.916 16.507 28.282.391 28.282.391l9.7-26.455s15.749-34.293 24.3-69.675c4.275-17.691-3.889-28.235-13.121-34.356a41.39 41.39 0 0 0-30.03-5.977l-46.349 8.13 32.147-13.849Z"/><path fill="#a0616a" d="m262.878 104.304-59.854-18.506s-24.18-31.167-12.789-36.667 25.652 26.944 25.652 26.944l41.686 2.698ZM514.494 71.9l53.212-33.068S583.2 2.556 570.787.122 552.8 32.685 552.8 32.685l-39.642 13.171Z"/><path fill="#5392f0" d="m524.453 34.513 1.014 39.192L435.78 89.73c13.192 28.224 9.84 60.346 43.047 74.425L366.903 218.9c4.987-43.038-15.818-75.456-35.263-115.759-23.686-8.586-51.196-2.29-80.337 10.346l-5.237-40.664 123.879-8.896 20.348 7.78 21.819-9.177c32.067-9.528 78.109-27.641 112.341-28.017Z"/><path fill="#2f2e41" d="M468.64 300.63c-2.72 2.367-5.252 21.85-5.35 28.92s9.212 8.897 14.299 9.25 4.478 3.456 7.837 6.048 14.396 2.18 28.89-2.712-9.753-20.926-11.864-21.662-11-22.782-11-22.782-20.092.571-22.812 2.938ZM389.368 345.12c3.23 1.6 10.617 19.806 12.503 26.621s-6.657 10.94-11.489 12.57-3.456 4.479-6.048 7.837-13.375 5.756-28.635 4.696 4.133-22.714 5.988-23.96 4.87-24.826 4.87-24.826 19.58-4.538 22.811-2.938Z"/><circle cx="389.471" cy="35.429" r="23.996" fill="#a0616a"/><path fill="#2f2e41" d="M361.734 33.022a22.827 22.827 0 0 1-.833-18.593c2.359-5.815 7.591-11.655 18.873-13.4 24.614-3.805 37.712 13.436 37.024 19.075s-3.993 19.27-3.993 19.27 1.476-12.906-4.858-13.362-30.902-2.378-37.123 4.145a14.233 14.233 0 0 0-3.71 13.83Z"/></svg>

src/views/login/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
   ref,
+  toRaw,
   reactive,
   watch,
   computed,
@@ -24,7 +25,7 @@ import { $t, transformI18n } from "@/plugins/i18n";
 import { operates, thirdParty } from "./utils/enums";
 import { useLayout } from "@/layout/hooks/useLayout";
 import { useUserStoreHook } from "@/store/modules/user";
-import { bg, avatar, currentWeek } from "./utils/static";
+import { bg, avatar, illustration } from "./utils/static";
 import { ReImageVerify } from "@/components/ReImageVerify";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
@@ -35,7 +36,7 @@ import darkIcon from "@/assets/svg/dark.svg?component";
 import globalization from "@/assets/svg/globalization.svg?component";
 import Lock from "@iconify-icons/ri/lock-fill";
 import Check from "@iconify-icons/ep/check";
-// import User from "@iconify-icons/ri/user-3-fill";
+import User from "@iconify-icons/ri/user-3-fill";
 
 defineOptions({
   name: "Login"
@@ -154,7 +155,7 @@ watch(imgCode, value => {
     </div>
     <div class="login-container">
       <div class="img">
-        <component :is="currentWeek" />
+        <component :is="toRaw(illustration)" />
       </div>
       <div class="login-box">
         <div class="login-form">
@@ -187,6 +188,7 @@ watch(imgCode, value => {
                   clearable
                   v-model="ruleForm.username"
                   :placeholder="t('login.username')"
+                  :prefix-icon="useRenderIcon(User)"
                 />
               </el-form-item>
             </Motion>

src/views/login/utils/static.ts

@@ -1,34 +1,5 @@
-import { computed } from "vue";
 import bg from "@/assets/login/bg.png";
 import avatar from "@/assets/login/avatar.svg?component";
-import illustration0 from "@/assets/login/illustration0.svg?component";
-import illustration1 from "@/assets/login/illustration1.svg?component";
-import illustration2 from "@/assets/login/illustration2.svg?component";
-import illustration3 from "@/assets/login/illustration3.svg?component";
-import illustration4 from "@/assets/login/illustration4.svg?component";
-import illustration5 from "@/assets/login/illustration5.svg?component";
-import illustration6 from "@/assets/login/illustration6.svg?component";
+import illustration from "@/assets/login/illustration.svg?component";
 
-/** Show a different background every day */
-const currentWeek = computed(() => {
-  switch (String(new Date().getDay())) {
-    case "0":
-      return illustration0;
-    case "1":
-      return illustration1;
-    case "2":
-      return illustration2;
-    case "3":
-      return illustration3;
-    case "4":
-      return illustration4;
-    case "5":
-      return illustration5;
-    case "6":
-      return illustration6;
-    default:
-      return illustration4;
-  }
-});
-
-export { bg, avatar, currentWeek };
+export { bg, avatar, illustration };