🎈 perf:优化登录窗口高度、登录页入场动画、登录页暗黑模式下分割线和二维码背景色

Author: preschool

src/styles/index.scss

@@ -1,5 +1,6 @@
 @import './var.css';
 @import './FormCreate/index.scss';
+@import './theme.scss';
 @import 'element-plus/theme-chalk/dark/css-vars.css';
 
 .reset-margin [class*='el-icon'] + span {

src/styles/theme.scss

@@ -4,3 +4,14 @@
 // .dark .dark\:text-color {
 //   color: rgba(255, 255, 255, var(--dark-text-color));
 // }
+
+// 登录页
+.dark .login-form {
+  .el-divider__text {
+    background-color: var(--login-bg-color);
+  }
+
+  .el-card {
+    background-color: var(--login-bg-color);
+  }
+}

src/views/Login/Login.vue

@@ -5,7 +5,7 @@
   >
     <div class="relative mx-auto h-full flex">
       <div
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
+        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
       >
         <!-- 左上角的 logo + 系统标题 -->
         <div class="relative flex items-center text-white">
@@ -27,7 +27,9 @@
           </TransitionGroup>
         </div>
       </div>
-      <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
+      <div
+        class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
+      >
         <!-- 右上角的主题、语言选择 -->
         <div
           class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
@@ -36,15 +38,15 @@
             <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
             <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
-          <div class="flex items-center justify-end space-x-10px">
+          <div class="flex items-center justify-end space-x-10px h-48px">
             <ThemeSwitch />
             <LocaleDropdown class="dark:text-white lt-xl:text-white" />
           </div>
         </div>
         <!-- 右边的登录界面 -->
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
+            class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
           >
             <!-- 账号登录 -->
             <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />

src/views/Login/SocialLogin.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     :class="prefixCls"
-    class="relative h-[100%] lt-xl:bg-[var(--login-bg-color)] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px"
+    class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
   >
     <div class="relative mx-auto h-full flex">
       <div
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
+        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
       >
         <!-- 左上角的 logo + 系统标题 -->
         <div class="relative flex items-center text-white">
@@ -27,7 +27,9 @@
           </TransitionGroup>
         </div>
       </div>
-      <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
+      <div
+        class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
+      >
         <!-- 右上角的主题、语言选择 -->
         <div
           class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
@@ -36,15 +38,15 @@
             <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
             <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
-          <div class="flex items-center justify-end space-x-10px">
+          <div class="flex items-center justify-end space-x-10px h-48px">
             <ThemeSwitch />
             <LocaleDropdown class="dark:text-white lt-xl:text-white" />
           </div>
         </div>
         <!-- 右边的登录界面 -->
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
+            class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
           >
             <!-- 账号登录 -->
             <el-form

src/views/Login/components/QrCodeForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-row v-show="getShow" style="margin-right: -10px; margin-left: -10px">
+  <el-row class="login-form" v-show="getShow" style="margin-right: -10px; margin-left: -10px">
     <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
       <LoginFormTitle style="width: 100%" />
     </el-col>

src/views/Login/components/RegisterForm.vue

@@ -3,7 +3,7 @@
     v-show="getShow"
     :rules="rules"
     :schema="schema"
-    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
+    class="w-[100%] dark:(border-1 border-[var(--el-border-color)] border-solid)"
     hide-required-asterisk
     label-position="top"
     size="large"

src/views/ai/write/index/components/Left.vue

@@ -104,7 +104,7 @@
 import { createReusableTemplate } from '@vueuse/core'
 import { ref } from 'vue'
 import Tag from './Tag.vue'
-import { WriteVO } from 'src/api/ai/write'
+import { WriteVO } from '@/api/ai/write'
 import { omit } from 'lodash-es'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { AiWriteTypeEnum, WriteExample } from '@/views/ai/utils/constants'

src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue

@@ -25,7 +25,7 @@ import OrderBrowsingHistory from './OrderBrowsingHistory.vue'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { isEmpty } from '@/utils/is'
 import { debounce } from 'lodash-es'
-import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar'
+import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar/index'
 
 defineOptions({ name: 'MemberBrowsingHistory' })