feat: add register

yudao-ui-admin-vue3/src/views/Login/Login.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { LoginForm } from './components'
-import { MobileForm } from './components'
+import { LoginForm, MobileForm, RegisterForm } from './components'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -8,13 +7,13 @@ import { underlineToHump } from '@/utils'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
+const { t } = useI18n()
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('login')
 
 const appStore = useAppStore()
-
-const { t } = useI18n()
 </script>
 
 <template>
@@ -67,6 +66,8 @@ const { t } = useI18n()
             <LoginForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
             <!-- 手机登录 -->
             <MobileForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
+            <!-- 注册 -->
+            <RegisterForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
           </div>
         </Transition>
       </div>

yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue

@@ -131,7 +131,6 @@ const getRoutes = async () => {
   permissionStore.setIsAddRouters(true)
   push({ path: redirect.value || permissionStore.addRouters[0].path })
 }
-
 watch(
   () => currentRoute.value,
   (route: RouteLocationNormalizedLoaded) => {
@@ -233,24 +232,26 @@ onMounted(async () => {
       </el-col>
       <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
         <el-form-item>
-          <el-button :loading="loginLoading" type="primary" class="w-[100%]" @click="handleLogin">{{
-            t('login.login')
-          }}</el-button>
+          <el-button :loading="loginLoading" type="primary" class="w-[100%]" @click="handleLogin">
+            {{ t('login.login') }}
+          </el-button>
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
         <el-form-item>
           <el-row justify="space-between" style="width: 100%" :gutter="5">
             <el-col :span="8">
-              <el-button class="w-[100%]" @click="setLoginState(LoginStateEnum.MOBILE)">{{
-                t('login.btnMobile')
-              }}</el-button>
+              <el-button class="w-[100%]" @click="setLoginState(LoginStateEnum.MOBILE)">
+                {{ t('login.btnMobile') }}
+              </el-button>
             </el-col>
             <el-col :span="8">
               <el-button class="w-[100%]">{{ t('login.btnQRCode') }}</el-button>
             </el-col>
             <el-col :span="8">
-              <el-button class="w-[100%]">{{ t('login.btnRegister') }}</el-button>
+              <el-button class="w-[100%]" @click="setLoginState(LoginStateEnum.REGISTER)">
+                {{ t('login.btnRegister') }}
+              </el-button>
             </el-col>
           </el-row>
         </el-form-item>
@@ -290,6 +291,11 @@ onMounted(async () => {
   </el-form>
 </template>
 <style lang="less" scoped>
+:deep(.anticon) {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
 .login-code {
   width: 100%;
   height: 38px;

yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { Form } from '@/components/Form'
+import { computed, reactive, ref, unref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useForm } from '@/hooks/web/useForm'
+import { ElInput, FormRules } from 'element-plus'
+import { useValidator } from '@/hooks/web/useValidator'
+import { useLoginState, LoginStateEnum } from './useLogin'
+import LoginFormTitle from './LoginFormTitle.vue'
+
+const { register, elFormRef } = useForm()
+const { handleBackLogin, getLoginState } = useLoginState()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
+const { t } = useI18n()
+
+const { required } = useValidator()
+
+const schema = reactive<FormSchema[]>([
+  {
+    field: 'title',
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'username',
+    label: t('login.username'),
+    value: '',
+    component: 'Input',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      placeholder: t('login.usernamePlaceholder')
+    }
+  },
+  {
+    field: 'password',
+    label: t('login.password'),
+    value: '',
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      },
+      strength: true,
+      placeholder: t('login.passwordPlaceholder')
+    }
+  },
+  {
+    field: 'check_password',
+    label: t('login.checkPassword'),
+    value: '',
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      },
+      strength: true,
+      placeholder: t('login.passwordPlaceholder')
+    }
+  },
+  {
+    field: 'code',
+    label: t('login.code'),
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'register',
+    colProps: {
+      span: 24
+    }
+  }
+])
+
+const rules: FormRules = {
+  username: [required()],
+  password: [required()],
+  check_password: [required()],
+  code: [required()]
+}
+
+const loading = ref(false)
+
+const loginRegister = async () => {
+  const formRef = unref(elFormRef)
+  formRef?.validate(async (valid) => {
+    if (valid) {
+      try {
+        loading.value = true
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+</script>
+
+<template>
+  <Form
+    :schema="schema"
+    :rules="rules"
+    label-position="top"
+    hide-required-asterisk
+    size="large"
+    v-show="getShow"
+    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
+    @register="register"
+  >
+    <template #title>
+      <LoginFormTitle style="width: 100%" />
+    </template>
+
+    <template #code="form">
+      <div class="w-[100%] flex">
+        <ElInput v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
+      </div>
+    </template>
+
+    <template #register>
+      <div class="w-[100%]">
+        <ElButton type="primary" class="w-[100%]" :loading="loading" @click="loginRegister">
+          {{ t('login.register') }}
+        </ElButton>
+      </div>
+      <div class="w-[100%] mt-15px">
+        <ElButton class="w-[100%]" @click="handleBackLogin">
+          {{ t('login.hasUser') }}
+        </ElButton>
+      </div>
+    </template>
+  </Form>
+</template>

yudao-ui-admin-vue3/src/views/Login/components/index.ts

@@ -1,5 +1,6 @@
 import LoginForm from './LoginForm.vue'
 import MobileForm from './MobileForm.vue'
 import LoginFormTitle from './LoginFormTitle.vue'
+import RegisterForm from './RegisterForm.vue'
 
-export { LoginForm, MobileForm, LoginFormTitle }
+export { LoginForm, MobileForm, LoginFormTitle, RegisterForm }