wip(Login): Login developing

src/components/Form/src/Form.vue

@@ -114,20 +114,26 @@ export default defineComponent({
       return (
         <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label}>
           {() => {
-            const Com = componentMap[item.component as string] as ReturnType<typeof defineComponent>
-            return (
-              <Com
-                vModel={formModel.value[item.field]}
-                {...(autoSetPlaceholder && setTextPlaceholder(item))}
-                {...setComponentProps(item)}
-                {...(notRenderOptions.includes(item?.component as string) &&
-                item?.componentProps?.options
-                  ? { options: item?.componentProps?.options || [] }
-                  : {})}
+            if (slots[item.field]) {
+              return getSlot(slots, item.field, { item })
+            } else {
+              const Com = componentMap[item.component as string] as ReturnType<
+                typeof defineComponent
               >
-                {{ ...slotsMap }}
-              </Com>
-            )
+              return (
+                <Com
+                  vModel={formModel.value[item.field]}
+                  {...(autoSetPlaceholder && setTextPlaceholder(item))}
+                  {...setComponentProps(item)}
+                  {...(notRenderOptions.includes(item?.component as string) &&
+                  item?.componentProps?.options
+                    ? { options: item?.componentProps?.options || [] }
+                    : {})}
+                >
+                  {{ ...slotsMap }}
+                </Com>
+              )
+            }
           }}
         </ElFormItem>
       )

src/components/InputPassword/src/InputPassword.vue

@@ -56,7 +56,7 @@ const getIconName = computed(() =>
   <div :class="[prefixCls, `${prefixCls}--${configGlobal?.size}`]">
     <ElInput v-bind="$attrs" v-model="valueRef" :type="textType">
       <template #suffix>
-        <Icon class="el-input__icon" :icon="getIconName" @click="changeTextType" />
+        <Icon class="el-input__icon cursor-pointer" :icon="getIconName" @click="changeTextType" />
       </template>
     </ElInput>
     <div

src/locales/en.ts

@@ -11,6 +11,13 @@ export default {
     large: 'Large',
     small: 'Small'
   },
+  login: {
+    message1: 'Welcome to the system',
+    message2: 'Backstage management system',
+    username: 'Username',
+    password: 'password',
+    login: 'Sign in'
+  },
   formDemo: {
     input: 'Input',
     inputNumber: 'InputNumber',

src/locales/zh-CN.ts

@@ -11,6 +11,13 @@ export default {
     large: '大',
     small: '小'
   },
+  login: {
+    message1: '欢迎使用本系统',
+    message2: '开箱即用的中后台管理系统',
+    username: '用户名',
+    password: '密码',
+    login: '登录'
+  },
   formDemo: {
     input: '输入框',
     inputNumber: '数字输入框',

src/views/Login/Login.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { LoginForm } from './components'
-import { ElCard } from 'element-plus'
+// import { ElCard } from 'element-plus'
 // import { ThemeSwitch } from '@/components/ThemeSwitch'
 // import { LocaleDropdown } from '@/components/LocaleDropdown'
 // import { SizeDropdown } from '@/components/SizeDropdown'
 import { useDesign } from '@/hooks/web/useDesign'
-// import { useI18n } from '@/hooks/web/useI18n'
+import { useI18n } from '@/hooks/web/useI18n'
 
-// const { t } = useI18n()
+const { t } = useI18n()
 
 const { getPrefixCls } = useDesign()
 
@@ -15,22 +15,26 @@ const prefixCls = getPrefixCls('login')
 </script>
 
 <template>
-  <div :class="prefixCls" class="h-[calc(100%)] relative">
-    <div
-      class="container relative h-full py-2 mx-auto flex @2xl:max-w-1600px @xl:max-w-1000px @lg:max-w-600px @md:max-w-500px @sm:max-w-500px"
-    >
-      <div class="flex-1 <lg:hidden">
-        <img src="@/assets/svgs/login-box-bg.svg" alt="" class="w-1/2 m-auto" />
+  <div :class="prefixCls" class="h-[100%] relative">
+    <div class="relative h-full flex mx-auto border-dark-50 border-2px">
+      <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>
+        </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>
       </div>
-      <div class="flex-1">
-        <ElCard>
-          <template #header>
-            <div>
-              <span>Card name</span>
-            </div>
-          </template>
+      <div :class="`${prefixCls}__right`" class="flex-1 p-30px relative">
+        <div :class="`${prefixCls}__form`" class="absolute top-[50%] left-[50%] w-[40%]">
           <LoginForm />
-        </ElCard>
+        </div>
       </div>
     </div>
   </div>
@@ -40,25 +44,27 @@ const prefixCls = getPrefixCls('login')
 @prefix-cls: ~'@{namespace}-login';
 
 .@{prefix-cls} {
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    background-image: url('@/assets/svgs/login-light-bg.svg');
-    background-position: center;
-    background-repeat: no-repeat;
-    content: '';
-  }
-}
-
-.dark {
-  .@{prefix-cls} {
+  &__left {
     &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
       background-image: url('@/assets/svgs/login-dark-bg.svg');
+      background-position: center;
+      background-repeat: no-repeat;
+      content: '';
     }
+
+    &--message {
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__form {
+    transform: translate(-50%, -50%);
   }
 }
 </style>

src/views/Login/components/LoginForm.vue

@@ -1,18 +1,42 @@
 <script setup lang="ts">
 import { Form } from '@/components/Form'
+import { useI18n } from '@/hooks/web/useI18n'
+import { ElButton } from 'element-plus'
+
+const { t } = useI18n()
 
 const schema: FormSchema[] = [
   {
     field: 'username',
-    component: 'Input'
+    label: t('login.username'),
+    component: 'Input',
+    colProps: {
+      span: 24
+    }
   },
   {
     field: 'password',
-    component: 'InputPassword'
+    label: t('login.password'),
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      }
+    }
+  },
+  {
+    field: 'login'
   }
 ]
 </script>
 
 <template>
-  <Form :schema="schema" :label-width="0" />
+  <Form :schema="schema" label-position="top">
+    <template #login>
+      <ElButton type="primary" class="w-[100%]">{{ t('login.login') }}</ElButton>
+    </template>
+  </Form>
 </template>