wip(Login): Login developing

src/views/Login/Login.vue

@@ -1,34 +1,38 @@
 <script setup lang="ts">
-import { ThemeSwitch } from '@/components/ThemeSwitch'
-import { LocaleDropdown } from '@/components/LocaleDropdown'
+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 { useDesign } from '@/hooks/web/useDesign'
-import { useI18n } from '@/hooks/web/useI18n'
-import { ElCalendar } from 'element-plus'
-import { VFrom } from '@/components/Form'
+// import { useI18n } from '@/hooks/web/useI18n'
 
-const { t } = useI18n()
+// const { t } = useI18n()
 
 const { getPrefixCls } = useDesign()
+
 const prefixCls = getPrefixCls('login')
 </script>
 
 <template>
   <div :class="prefixCls" class="h-[calc(100%)] relative">
-    <Icon icon="icon:icon" />
-    <Icon icon="ant-design:eye-outlined" />
-    <ThemeSwitch />
-    <LocaleDropdown />
-    <ElCalendar />
-    <VFrom
-      :schema="[
-        {
-          label: 'input',
-          field: 'field1',
-          component: 'InputPassword'
-        }
-      ]"
-    />
-    {{ t('formDemo.default') }}
+    <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>
+      <div class="flex-1">
+        <ElCard>
+          <template #header>
+            <div>
+              <span>Card name</span>
+            </div>
+          </template>
+          <LoginForm />
+        </ElCard>
+      </div>
+    </div>
   </div>
 </template>
 

src/views/Login/components/LoginForm.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Form } from '@/components/Form'
+
+const schema: FormSchema[] = [
+  {
+    field: 'username',
+    component: 'Input'
+  },
+  {
+    field: 'password',
+    component: 'InputPassword'
+  }
+]
+</script>
+
+<template>
+  <Form :schema="schema" :label-width="0" />
+</template>

src/views/Login/components/index.ts

@@ -0,0 +1,3 @@
+import LoginForm from './LoginForm.vue'
+
+export { LoginForm }