wip: coding

src/locales/en.ts

@@ -86,12 +86,15 @@ export default {
     message: 'Backstage management system',
     username: 'Username',
     password: 'Password',
+    register: 'Register',
+    checkPassword: 'Confirm password',
     login: 'Sign in',
     otherLogin: 'Sign in with',
     remember: 'Remember me',
+    hasUser: 'Existing account? Go to login',
     forgetPassword: 'Forget password',
-    usernamePlaceholder: 'username is admin or test',
-    passwordPlaceholder: 'password is admin or test'
+    usernamePlaceholder: 'Please input username',
+    passwordPlaceholder: 'Please input password'
   },
   router: {
     login: 'Login',

src/locales/zh-CN.ts

@@ -86,12 +86,15 @@ export default {
     message: '开箱即用的中后台管理系统',
     username: '用户名',
     password: '密码',
+    register: '注册',
+    checkPassword: '确认密码',
     login: '登录',
     otherLogin: '其他登录方式',
     remember: '记住我',
+    hasUser: '已有账号？去登录',
     forgetPassword: '忘记密码',
-    usernamePlaceholder: '用户名为 admin 或者 test ',
-    passwordPlaceholder: '密码为 admin 或者 test '
+    usernamePlaceholder: '请输入用户名',
+    passwordPlaceholder: '请输入密码'
   },
   router: {
     login: '登录',

src/views/Login/Login.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { LoginForm } from './components'
+import { LoginForm, RegisterForm } from './components'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { useI18n } from '@/hooks/web/useI18n'
 import { underlineToHump } from '@/utils'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
+import { ref } from 'vue'
 
 const { getPrefixCls } = useDesign()
 
@@ -14,6 +15,16 @@ const prefixCls = getPrefixCls('login')
 const appStore = useAppStore()
 
 const { t } = useI18n()
+
+const isLogin = ref(true)
+
+const toRegister = () => {
+  isLogin.value = false
+}
+
+const toLogin = () => {
+  isLogin.value = true
+}
 </script>
 
 <template>
@@ -59,7 +70,16 @@ const { t } = useI18n()
           <div
             class="h-full flex items-center m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px @lg:max-w-500px"
           >
-            <LoginForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
+            <LoginForm
+              v-if="isLogin"
+              class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)"
+              @to-register="toRegister"
+            />
+            <RegisterForm
+              v-else
+              class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)"
+              @to-login="toLogin"
+            />
           </div>
         </Transition>
       </div>

src/views/Login/components/LoginForm.vue

@@ -13,6 +13,8 @@ import { usePermissionStore } from '@/store/modules/permission'
 import { useRouter } from 'vue-router'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 
+const emit = defineEmits(['to-register'])
+
 const appStore = useAppStore()
 
 const permissionStore = usePermissionStore()
@@ -162,6 +164,11 @@ const getRole = async () => {
     push({ path: redirect.value || permissionStore.addRouters[0].path })
   }
 }
+
+// 去注册页面
+const toRegister = () => {
+  emit('to-register')
+}
 </script>
 
 <template>
@@ -186,9 +193,16 @@ const getRole = async () => {
     </template>
 
     <template #login>
-      <ElButton :loading="loading" type="primary" class="w-[100%]" @click="signIn">
-        {{ t('login.login') }}
-      </ElButton>
+      <div class="w-[100%]">
+        <ElButton :loading="loading" type="primary" class="w-[100%]" @click="signIn">
+          {{ t('login.login') }}
+        </ElButton>
+      </div>
+      <div class="w-[100%] mt-15px">
+        <ElButton class="w-[100%]" @click="toRegister">
+          {{ t('login.register') }}
+        </ElButton>
+      </div>
     </template>
 
     <template #otherIcon>

src/views/Login/components/RegisterForm.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { Form } from '@/components/Form'
+import { reactive } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { required } from '@/utils/formRules'
+import { useForm } from '@/hooks/web/useForm'
+import { ElButton } from 'element-plus'
+
+const emit = defineEmits(['to-login'])
+
+const { register } = useForm()
+
+const { t } = useI18n()
+
+const schema = reactive<FormSchema[]>([
+  {
+    field: 'title',
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'user_name',
+    label: t('login.username'),
+    value: '',
+    component: 'Input',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      placeholder: t('login.usernamePlaceholder')
+    }
+  },
+  {
+    field: 'password',
+    label: t('login.password'),
+    value: 'admin',
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      },
+      placeholder: t('login.passwordPlaceholder')
+    }
+  },
+  {
+    field: 'check_password',
+    label: t('login.checkPassword'),
+    value: 'admin',
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      },
+      placeholder: t('login.passwordPlaceholder')
+    }
+  },
+  {
+    field: 'register',
+    colProps: {
+      span: 24
+    }
+  }
+])
+
+const rules = {
+  username: [required],
+  password: [required]
+}
+
+const toLogin = () => {
+  emit('to-login')
+}
+</script>
+
+<template>
+  <Form
+    :schema="schema"
+    :rules="rules"
+    label-position="top"
+    hide-required-asterisk
+    size="large"
+    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
+    @register="register"
+  >
+    <template #title>
+      <h2 class="text-2xl font-bold text-center w-[100%]">{{ t('login.register') }}</h2>
+    </template>
+
+    <template #register>
+      <div class="w-[100%]">
+        <ElButton type="primary" class="w-[100%]">
+          {{ t('login.register') }}
+        </ElButton>
+      </div>
+      <div class="w-[100%] mt-15px">
+        <ElButton class="w-[100%]" @click="toLogin">
+          {{ t('login.hasUser') }}
+        </ElButton>
+      </div>
+    </template>
+  </Form>
+</template>

src/views/Login/components/index.ts

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