From 403443e1260dc40d0e730be115dd0b061e0c0c18 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 29 Oct 2021 22:33:45 +0800
Subject: [PATCH] refactor: weaken the animation of the login page #359 (#369)

---
 public/color.less                  | 11 --------
 src/components/Login/LoginForm.vue | 23 +++--------------
 src/styles/animate.less            | 33 ------------------------
 src/styles/style.less              | 21 ++++++----------
 src/views/user/Login.vue           | 40 ++++++++++++------------------
 src/views/user/ResetPassword.vue   | 30 +++++++++++-----------
 6 files changed, 42 insertions(+), 116 deletions(-)

diff --git a/public/color.less b/public/color.less
index 521537a91..711e57894 100644
--- a/public/color.less
+++ b/public/color.less
@@ -2342,11 +2342,6 @@ i.trigger:hover {
   border-radius: 2px;
   color: #fff;
 }
-.logo {
-}
-.logo h1 {
-  color: white;
-}
 .sider {
   box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
 }
@@ -2358,9 +2353,6 @@ i.trigger:hover {
   background: white;
   box-shadow: 1px 1px 0 0 #e8e8e8;
 }
-.sider.light .logo h1 {
-  color: @primary-color;
-}
 .sider.light :global(.ant-menu-light) {
   border-right-color: transparent;
 }
@@ -2386,9 +2378,6 @@ i.trigger:hover {
 .head.light {
   background-color: #fff;
 }
-.logo h1 {
-  color: #fff;
-}
 .light h1 {
   color: #002140;
 }
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 476f596f9..9f0afcd62 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -7,37 +7,22 @@
       layout="vertical"
       @keyup.enter.native="form.needAuthCode ? handleLogin() : handleLoginClick()"
     >
-      <a-form-model-item
-        v-if="!form.needAuthCode"
-        :style="{ 'animation-delay': '0.1s' }"
-        class="animated fadeInUp"
-        prop="username"
-      >
+      <a-form-model-item v-if="!form.needAuthCode" prop="username">
         <a-input v-model="form.model.username" placeholder="用户名/邮箱">
           <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
         </a-input>
       </a-form-model-item>
-      <a-form-model-item
-        v-if="!form.needAuthCode"
-        :style="{ 'animation-delay': '0.2s' }"
-        class="animated fadeInUp"
-        prop="password"
-      >
+      <a-form-model-item v-if="!form.needAuthCode" prop="password">
         <a-input v-model="form.model.password" placeholder="密码" type="password">
           <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
         </a-input>
       </a-form-model-item>
-      <a-form-model-item
-        v-if="form.needAuthCode"
-        :style="{ 'animation-delay': '0.1s' }"
-        class="animated fadeInUp"
-        prop="authcode"
-      >
+      <a-form-model-item v-if="form.needAuthCode" prop="authcode">
         <a-input v-model="form.model.authcode" :maxLength="6" placeholder="两步验证码">
           <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="safety-certificate" />
         </a-input>
       </a-form-model-item>
-      <a-form-model-item :style="{ 'animation-delay': '0.3s' }" class="animated fadeInUp">
+      <a-form-model-item>
         <a-button
           :block="true"
           :loading="form.logging"
diff --git a/src/styles/animate.less b/src/styles/animate.less
index 26203685b..253065e10 100644
--- a/src/styles/animate.less
+++ b/src/styles/animate.less
@@ -41,39 +41,6 @@
   animation-name: fadeInRight;
 }
 
-@-webkit-keyframes fadeInUp {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInUp {
-  -webkit-animation-name: fadeInUp;
-  animation-name: fadeInUp;
-}
-
 @keyframes fadeIn {
   from {
     opacity: 0;
diff --git a/src/styles/style.less b/src/styles/style.less
index 1b1a34833..33ae1e717 100644
--- a/src/styles/style.less
+++ b/src/styles/style.less
@@ -18,23 +18,18 @@
 }
 
 .halo-logo {
-  margin-bottom: 20px;
+  margin-top: 10px;
+  margin-bottom: 30px;
   text-align: center;
+  width: 100%;
 
   span {
-    vertical-align: text-bottom;
-    font-size: 38px;
-    display: inline-block;
-    font-weight: 600;
+    margin-left: 5px;
+    font-size: 12px;
     color: #1790fe;
-    background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
-    -webkit-text-fill-color: transparent;
-    -webkit-background-clip: text;
-    background-clip: text;
+  }
 
-    small {
-      margin-left: 5px;
-      font-size: 35%;
-    }
+  img {
+    width: 78px;
   }
 }
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index ea710658d..f050b0209 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -1,43 +1,35 @@
 <template>
-  <div class="container-wrapper">
-    <div class="halo-logo animated fadeInUp">
-      <span
-        >Halo
-        <small v-if="apiForm.visible">API 设置</small>
-      </span>
+  <div class="container-wrapper animated fadeIn">
+    <div class="halo-logo">
+      <img src="/images/logo.svg" alt="Halo Logo" />
+      <span v-if="apiForm.visible">API 设置</span>
     </div>
-    <div v-show="!apiForm.visible" class="login-form animated">
+    <div v-show="!apiForm.visible" class="login-form">
       <LoginForm @success="onLoginSucceed" />
-      <a-row>
-        <a-col :span="24">
-          <router-link :to="{ name: 'ResetPassword' }">
-            <a v-if="resetPasswordButtonVisible" class="tip animated fadeInRight" href="javascript:void(0);">
-              找回密码
-            </a>
-          </router-link>
-          <a :style="{ 'animation-delay': '0.4s' }" class="tip animated fadeInUp" @click="handleToggleShowApiForm">
-            <a-icon type="setting" />
-          </a>
-        </a-col>
-      </a-row>
+      <router-link v-if="resetPasswordButtonVisible" class="tip" :to="{ name: 'ResetPassword' }">
+        找回密码
+      </router-link>
+      <a class="tip" @click="handleToggleShowApiForm">
+        <a-icon type="setting" />
+      </a>
     </div>
-    <div v-show="apiForm.visible" class="api-form animated">
+    <div v-show="apiForm.visible" class="api-form">
       <a-form layout="vertical">
-        <a-form-item :style="{ 'animation-delay': '0.1s' }" class="animated fadeInUp">
+        <a-form-item>
           <a-tooltip placement="top" title="如果 Admin 不是独立部署，请不要更改此 API" trigger="click">
             <a-input v-model="apiForm.apiUrl" placeholder="API 地址">
               <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="api" />
             </a-input>
           </a-tooltip>
         </a-form-item>
-        <a-form-item :style="{ 'animation-delay': '0.2s' }" class="animated fadeInUp">
+        <a-form-item>
           <a-button :block="true" @click="handleRestoreApiUrl">恢复默认</a-button>
         </a-form-item>
-        <a-form-item :style="{ 'animation-delay': '0.3s' }" class="animated fadeInUp">
+        <a-form-item>
           <a-button :block="true" type="primary" @click="handleModifyApiUrl">保存设置</a-button>
         </a-form-item>
         <a-row>
-          <a :style="{ 'animation-delay': '0.4s' }" class="tip animated fadeInUp" @click="handleToggleShowApiForm">
+          <a class="tip" @click="handleToggleShowApiForm">
             <a-icon type="rollback" />
           </a>
         </a-row>
diff --git a/src/views/user/ResetPassword.vue b/src/views/user/ResetPassword.vue
index 8471caaa4..4cee11436 100644
--- a/src/views/user/ResetPassword.vue
+++ b/src/views/user/ResetPassword.vue
@@ -1,33 +1,34 @@
 <template>
-  <div class="container-wrapper">
-    <div class="halo-logo animated fadeInUp">
-      <span>Halo<small>重置密码</small></span>
+  <div class="container-wrapper animated fadeIn">
+    <div class="halo-logo">
+      <img src="/images/logo.svg" alt="Halo Logo" />
+      <span>重置密码</span>
     </div>
-    <div class="animated">
+    <div>
       <a-form layout="vertical">
-        <a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.1s' }">
+        <a-form-item>
           <a-input placeholder="用户名" v-model="resetParam.username">
             <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
           </a-input>
         </a-form-item>
-        <a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.2s' }">
+        <a-form-item>
           <a-input placeholder="邮箱" v-model="resetParam.email">
             <a-icon slot="prefix" type="mail" style="color: rgba(0, 0, 0, 0.25)" />
           </a-input>
         </a-form-item>
-        <a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.3s' }">
+        <a-form-item>
           <a-input v-model="resetParam.code" type="password" placeholder="验证码">
             <a-icon slot="prefix" type="safety-certificate" style="color: rgba(0, 0, 0, 0.25)" />
             <a href="javascript:void(0);" slot="addonAfter" @click="handleSendCode"> 获取 </a>
           </a-input>
         </a-form-item>
 
-        <a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.4s' }">
+        <a-form-item>
           <a-input v-model="resetParam.password" type="password" placeholder="新密码" autocomplete="new-password">
             <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
           </a-input>
         </a-form-item>
-        <a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.5s' }">
+        <a-form-item>
           <a-input
             v-model="resetParam.confirmPassword"
             type="password"
@@ -37,16 +38,13 @@
             <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
           </a-input>
         </a-form-item>
-        <a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.6s' }">
+        <a-form-item>
           <a-button type="primary" :block="true" @click="handleResetPassword">重置密码</a-button>
         </a-form-item>
-
-        <a-row>
-          <router-link :to="{ name: 'Login' }">
-            <a class="tip animated fadeInUp" :style="{ 'animation-delay': '0.7s' }"> 返回登录 </a>
-          </router-link>
-        </a-row>
       </a-form>
+      <router-link class="tip" :to="{ name: 'Login' }">
+        返回登录
+      </router-link>
     </div>
   </div>
 </template>