feat(utils): add common utility functions and validation constants

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
     <!-- 右侧切换主题、语言按钮  -->
-    <div class="action-bar">
+    <div class="login-toolbar">
       <el-tooltip :content="t('login.themeToggle')" placement="bottom">
         <CommonWrapper>
           <DarkModeSwitch />
@@ -14,16 +14,14 @@
       </el-tooltip>
     </div>
     <!-- 登录页主体 -->
-    <div flex-1 flex-center>
-      <div
-        class="p-4xl w-full h-auto sm:w-450px sm:h-700px shadow-[var(--el-box-shadow-light)] border-rd-2"
-      >
-        <div w-full flex flex-col items-center>
+    <div class="login-content">
+      <div class="login-card">
+        <div class="login-card__inner">
           <!-- logo -->
-          <el-image :src="logo" style="width: 84px" />
+          <el-image :src="logo" class="w-84px h-auto" />
 
           <!-- 标题 -->
-          <h2>
+          <h2 class="my-4">
             <el-badge :value="`v ${defaultSettings.version}`" type="success">
               {{ defaultSettings.title }}
             </el-badge>
@@ -36,10 +34,12 @@
         </div>
       </div>
       <!-- 登录页底部版权 -->
-      <el-text size="small" class="py-2.5! fixed bottom-0 text-center">
-        Copyright © 2021 - 2025 youlai.tech All Rights Reserved.
-        <a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a>
-      </el-text>
+      <footer class="login-footer">
+        <el-text size="small">
+          Copyright © 2021 - 2025 youlai.tech All Rights Reserved.
+          <a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a>
+        </el-text>
+      </footer>
     </div>
   </div>
 </template>
@@ -52,25 +52,21 @@ import DarkModeSwitch from "@/components/DarkModeSwitch/index.vue";
 
 type LayoutMap = "login" | "register" | "resetPwd";
 
-const t = useI18n().t;
+const { t } = useI18n();
+const component = ref<LayoutMap>("login");
 
-const component = ref<LayoutMap>("login"); // 切换显示的组件
 const formComponents = {
   login: defineAsyncComponent(() => import("./components/Login.vue")),
   register: defineAsyncComponent(() => import("./components/Register.vue")),
   resetPwd: defineAsyncComponent(() => import("./components/ResetPwd.vue")),
 };
 
-// 投票通知
-const voteUrl = "https://gitee.com/activity/2025opensource?ident=I6VXEH";
-// 保存通知实例，用于在组件卸载时关闭
 let notificationInstance: ReturnType<typeof ElNotification> | null = null;
 
-// 显示投票通知
 const showVoteNotification = () => {
   notificationInstance = ElNotification({
     title: "⭐ Gitee 2025 开源评选 · 诚邀您的支持！ 🙏",
-    message: `我正在参加 Gitee 2025 最受欢迎的开源软件投票活动，快来给我投票吧！<br/><a href="${voteUrl}" target="_blank" style="color: var(--el-color-primary); text-decoration: none; font-weight: 500;">点击投票 →</a>`,
+    message: `我正在参加 Gitee 2025 最受欢迎的开源软件投票活动，快来给我投票吧！<br/><a href="https://gitee.com/activity/2025opensource?ident=I6VXEH" target="_blank" style="color: var(--el-color-primary); text-decoration: none; font-weight: 500;">点击投票 →</a>`,
     type: "success",
     position: "bottom-right",
     duration: 0,
@@ -78,14 +74,10 @@ const showVoteNotification = () => {
   });
 };
 
-// 延迟显示
 onMounted(() => {
-  setTimeout(() => {
-    showVoteNotification();
-  }, 500);
+  setTimeout(showVoteNotification, 500);
 });
 
-// 组件卸载时关闭通知
 onBeforeUnmount(() => {
   if (notificationInstance) {
     notificationInstance.close();
@@ -95,6 +87,8 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
+$transition-duration: 0.3s;
+$transition-offset: 30px;
 .login-container {
   position: relative;
   z-index: 1;
@@ -104,23 +98,20 @@ onBeforeUnmount(() => {
   justify-content: center;
   width: 100%;
   height: 100%;
+
+  &::before {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background: url("@/assets/images/login-bg.svg") center center / cover;
+  }
 }
 
-// 添加伪元素作为背景层
-.login-container::before {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
-  content: "";
-  background: url("@/assets/images/login-bg.svg");
-  background-position: center center;
-  background-size: cover;
-}
-
-.action-bar {
+.login-toolbar {
   position: fixed;
   top: 10px;
   right: 10px;
@@ -128,11 +119,9 @@ onBeforeUnmount(() => {
   display: flex;
   gap: 8px;
   align-items: center;
-  justify-content: center;
   font-size: 1.125rem;
 
   @media (max-width: 480px) {
-    top: 10px;
     right: auto;
     left: 10px;
   }
@@ -143,19 +132,52 @@ onBeforeUnmount(() => {
   }
 }
 
-/* fade-slide */
+.login-content {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-card {
+  width: 100%;
+  height: auto;
+  padding: 3rem;
+  border-radius: 0.5rem;
+  box-shadow: var(--el-box-shadow-light);
+
+  @media (min-width: 640px) {
+    width: 450px;
+    height: 700px;
+  }
+}
+
+.login-card__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.login-footer {
+  position: fixed;
+  bottom: 0;
+  padding: 0.625rem 0;
+  text-align: center;
+}
+
 .fade-slide-leave-active,
 .fade-slide-enter-active {
-  transition: all 0.3s;
+  transition: all $transition-duration;
 }
 
 .fade-slide-enter-from {
   opacity: 0;
-  transform: translateX(-30px);
+  transform: translateX(-$transition-offset);
 }
 
 .fade-slide-leave-to {
   opacity: 0;
-  transform: translateX(30px);
+  transform: translateX($transition-offset);
 }
 </style>