perf: 优化首屏加载

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 };