重构登录页面

fantastic-admin · Aug 5, 2024 · b581cf6 · b581cf6
1 parent 2219f59
commit b581cf6
Show file tree

Hide file tree

Showing 6 changed files with 515 additions and 405 deletions.
diff --git a/src/components/LoginForm/index.vue b/src/components/LoginForm/index.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import useUserStore from '@/store/modules/user'
+
+defineOptions({
+  name: 'LoginForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account: string]
+  onRegister: [account: string]
+  onResetPassword: [account: string]
+}>()
+
+const userStore = useUserStore()
+
+const title = import.meta.env.VITE_APP_TITLE
+const loading = ref(false)
+
+// 登录方式，default 账号密码登录，qrcode 扫码登录
+const type = ref('default')
+const formRef = ref<FormInstance>()
+const form = ref({
+  account: props.account ?? localStorage.login_account ?? '',
+  password: '',
+  remember: !!localStorage.login_account,
+})
+const rules = ref<FormRules>({
+  account: [
+    { required: true, trigger: 'blur', message: '请输入用户名' },
+  ],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+function handleLogin() {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      loading.value = true
+      userStore.login(form.value).then(() => {
+        if (form.value.remember) {
+          localStorage.setItem('login_account', form.value.account)
+        }
+        else {
+          localStorage.removeItem('login_account')
+        }
+        emits('onLogin', form.value.account)
+      }).finally(() => {
+        loading.value = false
+      })
+    }
+  })
+}
+
+function testAccount(account: string) {
+  form.value.account = account
+  form.value.password = '123456'
+  handleLogin()
+}
+</script>
+
+<template>
+  <ElForm ref="formRef" :model="form" :rules="rules" class="min-h-500px w-full flex-col-stretch-center p-12">
+    <div class="mb-6">
+      <HTabList
+        v-model="type" :options="[
+          { label: '账号密码登录', value: 'default' },
+          { label: '扫码登录', value: 'qrcode' },
+        ]"
+      />
+    </div>
+    <template v-if="type === 'default'">
+      <h3 class="mb-8 text-xl color-[var(--el-text-color-primary)] font-bold">
+        欢迎使用 {{ title }} ! 👋🏻
+      </h3>
+      <div>
+        <ElFormItem prop="account">
+          <ElInput v-model="form.account" placeholder="用户名" type="text" tabindex="1">
+            <template #prefix>
+              <SvgIcon name="i-ri:user-3-fill" />
+            </template>
+          </ElInput>
+        </ElFormItem>
+        <ElFormItem prop="password">
+          <ElInput v-model="form.password" type="password" placeholder="密码" tabindex="2" show-password @keyup.enter="handleLogin">
+            <template #prefix>
+              <SvgIcon name="i-ri:lock-2-fill" />
+            </template>
+          </ElInput>
+        </ElFormItem>
+      </div>
+      <div class="mb-4 flex-center-between">
+        <ElCheckbox v-model="form.remember">
+          记住我
+        </ElCheckbox>
+        <ElLink type="primary" :underline="false" @click="emits('onResetPassword', form.account)">
+          忘记密码了?
+        </ElLink>
+      </div>
+      <ElButton :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
+        登录
+      </ElButton>
+      <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
+        还没有帐号?
+        <ElLink type="primary" :underline="false" @click="emits('onRegister', form.account)">
+          创建新帐号
+        </ElLink>
+      </div>
+    </template>
+    <template v-else-if="type === 'qrcode'">
+      <div class="flex-col-center">
+        <el-image src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]" />
+        <div class="mt-2 op-50">
+          请使用微信扫码登录
+        </div>
+      </div>
+    </template>
+    <div class="mt-4 text-center -mb-4">
+      <ElDivider>演示账号一键登录</ElDivider>
+      <ElButton type="primary" size="small" plain @click="testAccount('admin')">
+        admin
+      </ElButton>
+      <ElButton size="small" plain @click="testAccount('test')">
+        test
+      </ElButton>
+    </div>
+  </ElForm>
+</template>
+
+<style lang="scss" scoped>
+:deep(input[type="password"]::-ms-reveal) {
+  display: none;
+}
+
+.el-form-item {
+  margin-bottom: 24px;
+
+  :deep(.el-input) {
+    width: 100%;
+    height: 48px;
+    line-height: inherit;
+
+    input {
+      height: 48px;
+    }
+
+    .el-input__prefix,
+    .el-input__suffix {
+      display: flex;
+      align-items: center;
+    }
+
+    .el-input__prefix {
+      left: 10px;
+    }
+
+    .el-input__suffix {
+      right: 10px;
+    }
+  }
+}
+
+:deep(.el-divider__text) {
+  white-space: nowrap;
+  background-color: var(--g-container-bg);
+}
+</style>
diff --git a/src/components/RegisterForm/index.vue b/src/components/RegisterForm/index.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
+defineOptions({
+  name: 'RegisterForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account: string]
+  onRegister: [account: string]
+}>()
+
+const loading = ref(false)
+
+const formRef = ref<FormInstance>()
+const form = ref({
+  account: props.account ?? '',
+  captcha: '',
+  password: '',
+  checkPassword: '',
+})
+const rules = ref<FormRules>({
+  account: [
+    { required: true, trigger: 'blur', message: '请输入用户名' },
+  ],
+  captcha: [
+    { required: true, trigger: 'blur', message: () => '请输入验证码' },
+  ],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+  checkPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入密码' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== form.value.password) {
+          callback(new Error('两次输入的密码不一致'))
+        }
+        else {
+          callback()
+        }
+      },
+    },
+  ],
+})
+function handleRegister() {
+  ElMessage({
+    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      // 这里编写业务代码
+      emits('onRegister', form.value.account)
+    }
+  })
+}
+</script>
+
+<template>
+  <ElForm ref="formRef" :model="form" :rules="rules" class="min-h-500px w-full flex-col-stretch-center p-12">
+    <h3 class="mb-8 text-xl color-[var(--el-text-color-primary)] font-bold">
+      探索从这里开始! 🚀
+    </h3>
+    <div>
+      <ElFormItem prop="account">
+        <ElInput v-model="form.account" placeholder="用户名" tabindex="1">
+          <template #prefix>
+            <SvgIcon name="i-ri:user-3-fill" />
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElFormItem prop="captcha">
+        <ElInput v-model="form.captcha" placeholder="验证码" tabindex="2">
+          <template #prefix>
+            <SvgIcon name="i-ic:baseline-verified-user" />
+          </template>
+          <template #append>
+            <ElButton>发送验证码</ElButton>
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElFormItem prop="password">
+        <ElInput v-model="form.password" type="password" placeholder="密码" tabindex="3" show-password>
+          <template #prefix>
+            <SvgIcon name="i-ri:lock-2-fill" />
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElFormItem prop="checkPassword">
+        <ElInput v-model="form.checkPassword" type="password" placeholder="确认密码" tabindex="4" show-password>
+          <template #prefix>
+            <SvgIcon name="i-ri:lock-2-fill" />
+          </template>
+        </ElInput>
+      </ElFormItem>
+    </div>
+    <ElButton :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;" @click.prevent="handleRegister">
+      注册
+    </ElButton>
+    <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
+      已经有帐号?
+      <ElLink type="primary" :underline="false" @click="emits('onLogin', form.account)">
+        去登录
+      </ElLink>
+    </div>
+  </ElForm>
+</template>
+
+<style lang="scss" scoped>
+:deep(input[type="password"]::-ms-reveal) {
+  display: none;
+}
+
+.el-form-item {
+  margin-bottom: 24px;
+
+  :deep(.el-input) {
+    width: 100%;
+    height: 48px;
+    line-height: inherit;
+
+    input {
+      height: 48px;
+    }
+
+    .el-input__prefix,
+    .el-input__suffix {
+      display: flex;
+      align-items: center;
+    }
+
+    .el-input__prefix {
+      left: 10px;
+    }
+
+    .el-input__suffix {
+      right: 10px;
+    }
+  }
+}
+</style>