refactor: 重构登录页面布局

2025-10-30 02:57:08 +08:00 · 2024-04-23 22:50:08 +08:00
parent 8729dced82
commit 9d77732fbc
4 changed files with 219 additions and 174 deletions
--- a/src/views/login/components/account/index.vue
+++ b/src/views/login/components/account/index.vue
@@ -0,0 +1,144 @@
+<template>
+  <a-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    :label-col-style="{ display: 'none' }"
+    :wrapper-col-style="{ flex: 1 }"
+    size="large"
+    @submit="handleLogin"
+  >
+    <a-form-item field="username">
+      <a-input v-model="form.username" placeholder="请输入用户名" allow-clear>
+        <template #prefix><icon-user :stroke-width="1" :style="{ fontSize: '16px' }" /></template>
+      </a-input>
+    </a-form-item>
+    <a-form-item field="password">
+      <a-input-password v-model="form.password" placeholder="请输入密码">
+        <template #prefix><icon-lock :stroke-width="1" :style="{ fontSize: '16px' }" /></template>
+      </a-input-password>
+    </a-form-item>
+    <a-form-item field="captcha" hide-label>
+      <a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="4" allow-clear style="flex: 1 1">
+        <template #prefix><icon-check-circle :stroke-width="1" :style="{ fontSize: '16px' }" /></template>
+      </a-input>
+      <img :src="captchaImgBase64" alt="验证码" class="captcha" @click="getCaptcha" />
+    </a-form-item>
+    <a-form-item>
+      <a-row justify="space-between" align="center" class="w-full">
+        <a-checkbox v-model="loginConfig.rememberMe">记住我</a-checkbox>
+        <a-link>忘记密码</a-link>
+      </a-row>
+    </a-form-item>
+    <a-form-item>
+      <a-space direction="vertical" fill class="w-full">
+        <a-button class="btn" type="primary" size="large" long :loading="loading" html-type="submit">登录</a-button>
+      </a-space>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup lang="ts">
+import { getImageCaptcha } from '@/apis'
+import { Message, type FormInstance } from '@arco-design/web-vue'
+import { useUserStore } from '@/stores'
+import { useStorage } from '@vueuse/core'
+import { useLoading } from '@/hooks'
+import { encryptByRsa } from '@/utils/encrypt'
+
+const loginConfig = useStorage('login-config', {
+  rememberMe: true,
+  username: 'admin', // 演示默认值
+  password: 'admin123' // 演示默认值
+  // username: debug ? 'admin' : '', // 演示默认值
+  // password: debug ? 'admin123' : '', // 演示默认值
+})
+
+const formRef = ref<FormInstance>()
+const form = reactive({
+  username: loginConfig.value.username,
+  password: loginConfig.value.password,
+  captcha: '',
+  uuid: ''
+})
+
+const rules: FormInstance['rules'] = {
+  username: [{ required: true, message: '请输入用户名' }],
+  password: [{ required: true, message: '请输入密码' }],
+  captcha: [{ required: true, message: '请输入验证码' }]
+}
+
+const userStore = useUserStore()
+const router = useRouter()
+const { loading, setLoading } = useLoading()
+// 登录
+const handleLogin = async () => {
+  try {
+    const isInvalid = await formRef.value?.validate()
+    if (isInvalid) return
+    setLoading(true)
+    await userStore.accountLogin({
+      username: form.username,
+      password: encryptByRsa(form.password) || '',
+      captcha: form.captcha,
+      uuid: form.uuid
+    })
+    const { redirect, ...othersQuery } = router.currentRoute.value.query
+    router.push({
+      path: (redirect as string) || '/',
+      query: {
+        ...othersQuery
+      }
+    })
+    const { rememberMe } = loginConfig.value
+    loginConfig.value.username = rememberMe ? form.username : ''
+    Message.success('欢迎使用')
+  } catch (error) {
+    getCaptcha()
+    form.captcha = ''
+  } finally {
+    setLoading(false)
+  }
+}
+
+const captchaImgBase64 = ref()
+// 获取验证码
+const getCaptcha = () => {
+  getImageCaptcha().then((res) => {
+    form.uuid = res.data.uuid
+    captchaImgBase64.value = res.data.img
+  })
+}
+
+onMounted(() => {
+  getCaptcha()
+})
+</script>
+
+<style lang="scss" scoped>
+.arco-input-wrapper,
+:deep(.arco-select-view-single) {
+  height: 40px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+.arco-input-wrapper.arco-input-error {
+  background-color: rgb(var(--danger-1));
+  border-color: rgb(var(--danger-4));
+}
+.arco-input-wrapper :deep(.arco-input) {
+  font-size: 13px;
+  color: var(--color-text-1);
+}
+
+.captcha {
+  width: 111px;
+  height: 36px;
+  margin: 0 0 0 5px;
+  cursor: pointer;
+}
+
+.btn {
+  height: 40px;
+}
+</style>