wip(Login): Login developing

src/views/Login/Login.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { LoginForm } from './components'
-// import { ElCard } from 'element-plus'
-// import { ThemeSwitch } from '@/components/ThemeSwitch'
-// import { LocaleDropdown } from '@/components/LocaleDropdown'
-// import { SizeDropdown } from '@/components/SizeDropdown'
+import { ThemeSwitch } from '@/components/ThemeSwitch'
+import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useI18n } from '@/hooks/web/useI18n'
+import { underlineToHump } from '@/utils'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
 
 const { t } = useI18n()
 
@@ -15,25 +17,41 @@ const prefixCls = getPrefixCls('login')
 </script>
 
 <template>
-  <div :class="prefixCls" class="h-[100%] relative">
-    <div class="relative h-full flex mx-auto border-dark-50 border-2px">
+  <div :class="prefixCls" class="h-[100%] relative overflow-hidden <xl:bg-v-dark">
+    <div class="relative h-full flex mx-auto">
       <div
         :class="`${prefixCls}__left`"
         class="flex-1 bg-gray-500 bg-opacity-20 relative p-30px <xl:hidden"
       >
         <div class="flex items-center text-white">
           <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
-          <span class="text-20px font-bold">ButterflyAdmin</span>
+          <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
         </div>
-        <div :class="`${prefixCls}__left--message`" class="absolute top-[50%] left-[50%]">
-          <img src="@/assets/svgs/login-box-bg.svg" alt="" class="w-350px" />
-          <div class="text-3xl text-white">{{ t('login.message1') }}</div>
-          <div class="mt-5 font-normal text-white text-14px"> {{ t('login.message2') }} </div>
+        <div class="flex justify-center items-center h-[calc(100%-60px)]">
+          <div>
+            <img src="@/assets/svgs/login-box-bg.svg" alt="" class="w-350px" />
+            <div class="text-3xl text-white">{{ t('login.welcome') }}</div>
+            <div class="mt-5 font-normal text-white text-14px"> {{ t('login.message') }} </div>
+          </div>
         </div>
       </div>
-      <div :class="`${prefixCls}__right`" class="flex-1 p-30px relative">
-        <div :class="`${prefixCls}__form`" class="absolute top-[50%] left-[50%] w-[40%]">
-          <LoginForm />
+      <div class="flex-1 @2xl:p-30px @xl:p-30px @md:p-30px <md:pt-30px dark:bg-v-dark relative">
+        <div class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end">
+          <div class="flex items-center @2xl:hidden @xl:hidden">
+            <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
+            <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
+          </div>
+
+          <div class="flex justify-end items-center space-x-10px">
+            <ThemeSwitch />
+            <LocaleDropdown />
+          </div>
+        </div>
+        <div
+          :class="`${prefixCls}__form`"
+          class="flex justify-center items-center <xl:(bg-white rounded-3xl) absolute top-[50%] left-[50%] w-[100%] @md:w-[calc(100%-60px)]"
+        >
+          <LoginForm class="p-20px" />
         </div>
       </div>
     </div>
@@ -52,15 +70,11 @@ const prefixCls = getPrefixCls('login')
       z-index: -1;
       width: 100%;
       height: 100%;
-      background-image: url('@/assets/svgs/login-dark-bg.svg');
+      background-image: url('@/assets/svgs/login-bg.svg');
       background-position: center;
       background-repeat: no-repeat;
       content: '';
     }
-
-    &--message {
-      transform: translate(-50%, -50%);
-    }
   }
 
   &__form {

src/views/Login/components/LoginForm.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
+import { reactive, ref } from 'vue'
 import { Form } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton } from 'element-plus'
+import { ElButton, ElCheckbox, ElLink } from 'element-plus'
+import { required } from '@/utils/formRules'
 
 const { t } = useI18n()
 
-const schema: FormSchema[] = [
+const rules = {
+  username: [required],
+  password: [required]
+}
+
+const schema = reactive<FormSchema[]>([
   {
     field: 'username',
     label: t('login.username'),
@@ -28,15 +35,65 @@ const schema: FormSchema[] = [
     }
   },
   {
-    field: 'login'
+    field: 'tool',
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'login',
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'other',
+    component: 'Divider',
+    label: t('login.otherLogin'),
+    componentProps: {
+      contentPosition: 'center'
+    }
+  },
+  {
+    field: 'otherIcon',
+    colProps: {
+      span: 24
+    }
   }
-]
+])
+
+const iconSize = 30
+
+const remember = ref(false)
 </script>
 
 <template>
-  <Form :schema="schema" label-position="top">
+  <Form
+    :schema="schema"
+    :rules="rules"
+    label-position="top"
+    hide-required-asterisk
+    size="large"
+    class="@2xl:max-w-500px @xl:max-w-400px"
+  >
+    <template #tool>
+      <div class="flex justify-between items-center w-[100%]">
+        <ElCheckbox v-model="remember" :label="t('login.remember')" size="small" />
+        <ElLink type="primary" :underline="false">{{ t('login.forgetPassword') }}</ElLink>
+      </div>
+    </template>
+
     <template #login>
       <ElButton type="primary" class="w-[100%]">{{ t('login.login') }}</ElButton>
     </template>
+
+    <template #otherIcon>
+      <div class="flex justify-between w-[100%]">
+        <Icon icon="ant-design:github-filled" :size="iconSize" class="cursor-pointer" />
+        <Icon icon="ant-design:wechat-filled" :size="iconSize" class="cursor-pointer" />
+        <Icon icon="ant-design:alipay-circle-filled" :size="iconSize" class="cursor-pointer" />
+        <Icon icon="ant-design:weibo-circle-filled" :size="iconSize" class="cursor-pointer" />
+      </div>
+    </template>
   </Form>
 </template>