PetServiceManagementSystemUI/src/view/LoginView.vue

<template>
  <div class="auth-view">
    <div class="auth-container">
      <div class="auth-decoration">
        <div class="decoration-circle circle-1"></div>
        <div class="decoration-circle circle-2"></div>
        <div class="decoration-circle circle-3"></div>
      </div>

      <el-card class="auth-card" shadow="never">
        <el-button class="back-btn" text @click="router.push('/')">
          <el-icon><ArrowLeft /></el-icon>
          返回主页
        </el-button>

        <div class="auth-header">
          <h1 class="auth-title">欢迎</h1>
          <p class="auth-subtitle">请登录或注册您的账号</p>
        </div>

        <el-tabs v-model="activeTab" class="auth-tabs" stretch>
          <el-tab-pane label="登录" name="login">
            <el-form
              ref="loginFormRef"
              :model="loginForm"
              :rules="loginRules"
              class="auth-form"
              @submit.prevent="handleLogin"
            >
              <el-form-item prop="account">
                <el-input
                  v-model="loginForm.account"
                  placeholder="请输入账号"
                  :prefix-icon="User"
                  size="large"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  :prefix-icon="Lock"
                  show-password
                  size="large"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  :loading="loginLoading"
                  size="large"
                  class="auth-submit"
                  @click="handleLogin"
                >
                  登录
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="注册" name="register">
            <el-form
              ref="registerFormRef"
              :model="registerForm"
              :rules="registerRules"
              class="auth-form"
              @submit.prevent="handleRegister"
            >
              <el-form-item prop="account">
                <el-input
                  v-model="registerForm.account"
                  placeholder="请输入账号"
                  :prefix-icon="User"
                  size="large"
                />
              </el-form-item>
              <el-form-item prop="username">
                <el-input
                  v-model="registerForm.username"
                  placeholder="请输入用户名"
                  :prefix-icon="User"
                  size="large"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="registerForm.password"
                  type="password"
                  placeholder="请输入密码"
                  :prefix-icon="Lock"
                  show-password
                  size="large"
                />
              </el-form-item>
              <el-form-item prop="confirmPassword">
                <el-input
                  v-model="registerForm.confirmPassword"
                  type="password"
                  placeholder="请再次输入密码"
                  :prefix-icon="Lock"
                  show-password
                  size="large"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  :loading="registerLoading"
                  size="large"
                  class="auth-submit"
                  @click="handleRegister"
                >
                  注册
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, ArrowLeft } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getAuthController } from '../api/auth-controller'
import type { LoginDto, RegisterDto } from '../api/models'
import { useLoginUserStore } from '../store'
import type { User as UserType } from '../type'

const route = useRoute()
const router = useRouter()
const loginUserStore = useLoginUserStore()

const activeTab = ref('login')

const loginFormRef = ref<FormInstance>()
const registerFormRef = ref<FormInstance>()
const loginLoading = ref(false)
const registerLoading = ref(false)

const loginForm = reactive({
  account: '',
  password: ''
})

const registerForm = reactive({
  account: '',
  username: '',
  password: '',
  confirmPassword: ''
})

const validateConfirmPassword = (_rule: any, value: string, callback: any) => {
  if (value !== registerForm.password) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

const loginRules = reactive<FormRules>({
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 4, message: '密码长度至少4位', trigger: 'blur' }
  ]
})

const registerRules = reactive<FormRules>({
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 4, max: 20, message: '账号长度4-20个字符', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 32, message: '用户名长度2-32个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 4, max: 20, message: '密码长度4-20个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
})

const handleLogin = async () => {
  const valid = await loginFormRef.value?.validate().catch(() => false)
  if (!valid) return

  loginLoading.value = true
  try {
    const authApi = getAuthController()
    const res = await authApi.login({
      account: loginForm.account,
      password: loginForm.password
    } as LoginDto)

    const tokenData = res.data
    if (res.code === 200 && tokenData?.token) {
      localStorage.setItem('token', tokenData.token)
      loginUserStore.loginSuccess({
        id: String(tokenData.userId || ''),
        name: tokenData.username || tokenData.account || '用户',
        role: (tokenData.role as UserType['role']) || 'user'
      })
      ElMessage.success('登录成功')
      router.push((route.query.redirect as string) || '/')
    } else {
      ElMessage.error(res.message || '登录失败')
    }
  } catch (err: any) {
    ElMessage.error(err.message || '登录失败，请检查网络')
  } finally {
    loginLoading.value = false
  }
}

const handleRegister = async () => {
  const valid = await registerFormRef.value?.validate().catch(() => false)
  if (!valid) return

  registerLoading.value = true
  try {
    const authApi = getAuthController()
    const res = await authApi.register({
      account: registerForm.account,
      password: registerForm.password,
      username: registerForm.username
    } as RegisterDto)

    if (res.code === 200) {
      ElMessage.success('注册成功，请登录')
      activeTab.value = 'login'
      registerForm.account = ''
      registerForm.username = ''
      registerForm.password = ''
      registerForm.confirmPassword = ''
    } else {
      ElMessage.error(res.message || '注册失败')
    }
  } catch (err: any) {
    ElMessage.error(err.message || '注册失败，请检查网络')
  } finally {
    registerLoading.value = false
  }
}
</script>

<style scoped>
.auth-view {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fbcfe8 100%);
  position: relative;
  overflow: hidden;
}

.auth-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
}

.circle-1 {
  width: 400px;
  height: 400px;
  background: #db2777;
  top: -100px;
  right: -100px;
  animation: float 20s ease-in-out infinite;
}

.circle-2 {
  width: 300px;
  height: 300px;
  background: #f472b6;
  bottom: -80px;
  left: -80px;
  animation: float 15s ease-in-out infinite reverse;
}

.circle-3 {
  width: 200px;
  height: 200px;
  background: #ca8a04;
  top: 50%;
  left: 60%;
  animation: float 18s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(20px, -30px) scale(1.05);
  }
  50% {
    transform: translate(-10px, 20px) scale(0.95);
  }
  75% {
    transform: translate(15px, 10px) scale(1.02);
  }
}

.auth-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 20px;
}

.auth-card {
  border-radius: 16px;
  border: 1px solid rgba(219, 39, 119, 0.1);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 8px;
}

.back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  color: #be185d;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}

.back-btn:hover {
  color: #db2777;
}

.back-btn .el-icon {
  margin-right: 4px;
}

.auth-header {
  text-align: center;
  padding: 24px 0 16px;
}

.auth-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  color: #831843;
  letter-spacing: 2px;
}

.auth-subtitle {
  margin: 0;
  font-size: 14px;
  color: #be185d;
}

.auth-tabs {
  padding: 0 8px 8px;
}

:deep(.auth-tabs .el-tabs__header) {
  margin-bottom: 24px;
}

:deep(.auth-tabs .el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
  color: #831843;
  transition: color 0.2s;
}

:deep(.auth-tabs .el-tabs__item.is-active) {
  color: #db2777;
}

:deep(.auth-tabs .el-tabs__active-bar) {
  background-color: #db2777;
  height: 3px;
  border-radius: 3px;
}

:deep(.auth-tabs .el-tabs__nav-wrap::after) {
  background-color: rgba(219, 39, 119, 0.15);
  height: 1px;
}

.auth-form {
  padding: 0 8px;
}

:deep(.el-input__wrapper) {
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 0 0 1px rgba(219, 39, 119, 0.15) inset;
  transition: box-shadow 0.2s;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px rgba(219, 39, 119, 0.3) inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #db2777 inset;
}

:deep(.el-input__prefix) {
  color: #db2777;
  margin-right: 8px;
}

.auth-submit {
  width: 100%;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
  border: none;
  transition: all 0.2s;
}

.auth-submit:hover {
  background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
}

.auth-submit:active {
  transform: translateY(0);
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__error) {
  padding-left: 4px;
}

@media (max-width: 480px) {
  .auth-container {
    padding: 16px;
  }

  .auth-title {
    font-size: 24px;
  }

  .circle-1 {
    width: 250px;
    height: 250px;
  }

  .circle-2 {
    width: 200px;
    height: 200px;
  }

  .circle-3 {
    width: 150px;
    height: 150px;
  }
}
</style>