🕟 优化

kicc-ui/src/views/core/login/Login.vue

@@ -1,28 +1,28 @@
 <template>
   <div :class="prefixCls" class="relative w-full h-full px-4">
-    <AppLocalePicker
-      class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
-      :showText="false"
-      v-if="!sessionTimeout && showLocale"
+    <AppLocalePicker v-if="!sessionTimeout && showLocale"
+                     class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
+                     :showText="false"
+    />
+    <AppDarkModeToggle v-if="!sessionTimeout"
+                       class="absolute top-3 right-7 enter-x"
     />
-    <AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" />
-
     <span class="-enter-x xl:hidden">
-      <AppLogo :alwaysShowTitle="true" />
+      <AppLogo :alwaysShowTitle="true"/>
     </span>
-
     <div class="container relative h-full py-2 mx-auto sm:px-10">
       <div class="flex h-full">
         <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
-          <AppLogo class="-enter-x" />
+          <AppLogo class="-enter-x"/>
           <div class="my-auto">
-            <img
-              :alt="title"
-              src="src/assets/images/login-box-bg.svg"
-              class="w-1/2 -mt-16 -enter-x"
+            <img :alt="title"
+                 src="src/assets/images/login-box-bg.svg"
+                 class="w-1/2 -mt-16 -enter-x"
             />
             <div class="mt-10 font-medium text-white -enter-x">
-              <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
+              <span class="inline-block mt-4 text-3xl">
+                {{ t('sys.login.signInTitle') }}
+              </span>
             </div>
             <div class="mt-5 font-normal text-white text-md dark:text-gray-500 -enter-x">
               {{ t('sys.login.signInDesc') }}
@@ -30,31 +30,14 @@
           </div>
         </div>
         <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
-          <div
-            :class="`${prefixCls}-form`"
-            class="
-              relative
-              w-full
-              px-5
-              py-8
-              mx-auto
-              my-auto
-              rounded-md
-              shadow-md
-              xl:ml-16 xl:bg-transparent
-              sm:px-8
-              xl:p-4 xl:shadow-none
-              sm:w-3/4
-              lg:w-2/4
-              xl:w-auto
-              enter-x
-            "
+          <div :class="`${prefixCls}-form`"
+               class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
           >
-            <LoginForm />
-            <ForgetPasswordForm />
-            <RegisterForm />
-            <MobileForm />
-            <QrCodeForm />
+            <LoginForm/>
+            <ForgetPasswordForm/>
+            <RegisterForm/>
+            <MobileForm/>
+            <QrCodeForm/>
           </div>
         </div>
       </div>

kicc-ui/src/views/core/login/LoginForm.vue

@@ -1,36 +1,36 @@
 <template>
   <LoginFormTitle v-show="getShow" class="enter-x" />
-  <Form
-    class="p-4 enter-x"
-    :model="formData"
-    :rules="getFormRules"
-    ref="formRef"
-    v-show="getShow"
-    @keypress.enter="handleLogin"
+  <Form ref="formRef"
+        v-show="getShow"
+        :model="formData"
+        class="p-4 enter-x"
+        :rules="getFormRules"
+        @keypress.enter="handleLogin"
   >
     <FormItem name="realKey">
-      <Input size="large" v-model:value="formData.realKey" :hidden="true" />
+      <Input size="large" v-model:value="formData.realKey" :hidden="true"/>
     </FormItem>
     <FormItem name="account" class="enter-x">
-      <Input
-        size="large"
-        v-model:value="formData.account"
-        :placeholder="t('sys.login.userName')"
-        class="fix-auto-fill"
+      <Input v-model:value="formData.account"
+             class="fix-auto-fill"
+             size="large"
+             :placeholder="t('sys.login.userName')"
       />
     </FormItem>
     <FormItem name="password" class="enter-x">
-      <InputPassword
-        size="large"
-        visibilityToggle
-        v-model:value="formData.password"
-        :placeholder="t('sys.login.password')"
+      <InputPassword v-model:value="formData.password"
+                     size="large"
+                     visibilityToggle
+                     :placeholder="t('sys.login.password')"
       />
     </FormItem>
     <ARow class="enter-x">
       <ACol :span="16">
         <FormItem name="code">
-          <Input size="large" v-model:value="formData.code" :placeholder="t('sys.login.captcha')" style="min-width: 100px"/>
+          <Input v-model:value="formData.code"
+                 size="large"
+                 :placeholder="t('sys.login.captcha')" style="min-width: 100px"
+          />
         </FormItem>
       </ACol>
       <ACol :span="8">
@@ -81,11 +81,11 @@
     </ARow>
     <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>
     <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
-      <GithubFilled />
-      <WechatFilled />
-      <AlipayCircleFilled />
-      <GoogleCircleFilled />
-      <TwitterCircleFilled />
+      <GithubFilled/>
+      <WechatFilled/>
+      <AlipayCircleFilled/>
+      <GoogleCircleFilled/>
+      <TwitterCircleFilled/>
     </div>
   </Form>
 </template>