LoginPage.vue

<template>
  <div class="min-h-screen flex items-center justify-center relative">
    <!-- 背景层 -->
    <div class="absolute inset-0">
      <div class="absolute inset-0 bg-[#001529]" />
      <div class="absolute inset-0 opacity-50 overflow-hidden">
        <img 
          alt="" 
          class="absolute h-full left-0 max-w-none top-0 w-auto min-w-full object-cover" 
          :src="loginBackground" 
        />
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="relative z-10 w-full flex flex-col items-center justify-center gap-8 px-6">
      <!-- Logo和标题区 -->
      <div class="flex flex-col items-center gap-2 w-full max-w-[448px]">
        <div class="relative w-[88px] h-[88px]">
          <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <img 
              alt="享零工云平台" 
              class="absolute h-[85.72%] left-[-8.06%] max-w-none top-[7.7%] w-[329.57%]" 
              :src="logoIcon" 
            />
          </div>
        </div>
        <h1 class="text-white text-center text-[24px] font-bold">享零工云平台</h1>
        <p class="text-white/90 text-center">中国移动地市管理系统</p>
      </div>

      <!-- 登录卡片 -->
      <div 
        class="relative w-full max-w-[448px] backdrop-blur-[10px] backdrop-filter rounded-[10px] pt-10 pb-10 px-8 border border-[rgba(255,255,255,0.6)] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)]"
        :style="{
          background: 'linear-gradient(142deg, rgba(255, 255, 255, 0.32) 6%, rgba(255, 255, 255, 0.20) 90.9%)'
        }"
      >
        <el-form 
          ref="loginFormRef"
          :model="loginForm" 
          :rules="loginRules"
          @submit.prevent="handleSubmit"
          class="relative flex flex-col gap-7"
        >
          <!-- 手机号 -->
          <div class="flex flex-col gap-2.5">
            <label for="phone" class="text-white">
              手机号
            </label>
            <el-input
              id="phone"
              v-model="loginForm.phone"
              type="tel"
              placeholder="请输入手机号"
              maxlength="11"
              class="login-input"
              :disabled="isLoading"
              size="large"
            />
          </div>

          <!-- 图形验证码 -->
          <div class="flex flex-col gap-2.5">
            <label for="captcha" class="text-white">
              图形验证码
            </label>
            <div class="flex gap-2">
              <el-input
                id="captcha"
                v-model="loginForm.captchaInput"
                type="text"
                placeholder="请输入图形验证码"
                maxlength="4"
                class="login-input flex-1"
                :disabled="isLoading"
                size="large"
              />
              <div 
                class="relative h-12 w-[120px] bg-white rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
                @click="generateCaptcha"
                title="点击刷新验证码"
              >
                <img 
                  v-if="captchaImage" 
                  :src="captchaImage" 
                  alt="验证码" 
                  class="w-full h-full object-cover" 
                />
                <RefreshCw class="absolute top-1 right-1 w-3 h-3 text-gray-400" />
              </div>
            </div>
          </div>

          <!-- 短信验证码 -->
          <div class="flex flex-col gap-2.5">
            <label for="smsCode" class="text-white">
              短信验证码
            </label>
            <div class="flex gap-2">
              <el-input
                id="smsCode"
                v-model="loginForm.smsCode"
                type="text"
                placeholder="请输入短信验证码"
                maxlength="6"
                class="login-input flex-1"
                :disabled="isLoading"
                size="large"
              />
              <el-button
                @click="handleSendSms"
                :disabled="!canSendSms || isLoading"
                class="sms-button-white"
                size="large"
              >
                {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
              </el-button>
            </div>
          </div>

          <el-button
            type="primary"
            @click="handleSubmit"
            class="login-submit-button"
            :loading="isLoading"
            size="large"
          >
            {{ isLoading ? '登录中...' : '登录' }}
          </el-button>
        </el-form>
      </div>
    </div>

    <!-- 品牌背书 -->
    <div class="absolute bottom-8 left-0 right-0 z-10 text-center">
      <p class="text-white/60 text-xs">
        Copyright 2016-2025. 京ICP备16058130号-2 . All Rights Reserved.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { RefreshCw } from 'lucide-vue-next'

// 导入图片资源
import loginBackgroundImg from '@/assets/7f0599d246217c734650d105801453a4919de13c.png'
import logoIconImg from '@/assets/83c9823faecc66b9d1978deb8ed7085f80e226b3.png'

const loginBackground = ref(loginBackgroundImg)
const logoIcon = ref(logoIconImg)

// 接口定义
interface LoginForm {
  phone: string
  captchaInput: string
  smsCode: string
}

interface LoginProps {
  onLogin: (username: string, role: 'admin' | 'viewer') => void
}

// Props
const props = defineProps<LoginProps>()

// 响应式数据
const loginFormRef = ref<FormInstance>()
const isLoading = ref(false)
const captchaText = ref('')
const captchaImage = ref('')
const countdown = ref(0)
const canSendSms = ref(true)

// 表单数据
const loginForm = reactive<LoginForm>({
  phone: '13800000001',
  captchaInput: '',
  smsCode: ''
})

// 表单验证规则
const loginRules: FormRules<LoginForm> = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  captchaInput: [
    { required: true, message: '请输入图形验证码', trigger: 'blur' },
    { len: 4, message: '验证码长度为4位', trigger: 'blur' }
  ],
  smsCode: [
    { required: true, message: '请输入短信验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度为6位', trigger: 'blur' }
  ]
}

// 生成图形验证码 - 完全复制React版本的逻辑
const generateCaptcha = () => {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
  let text = ''
  for (let i = 0; i < 4; i++) {
    text += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  captchaText.value = text
  
  // 生成验证码图片 (使用 canvas)
  const canvas = document.createElement('canvas')
  canvas.width = 120
  canvas.height = 40
  const ctx = canvas.getContext('2d')
  
  if (ctx) {
    // 背景
    ctx.fillStyle = '#f0f0f0'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    // 干扰线
    for (let i = 0; i < 5; i++) {
      ctx.strokeStyle = `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},0.3)`
      ctx.beginPath()
      ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height)
      ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height)
      ctx.stroke()
    }
    
    // 验证码文字
    ctx.font = 'bold 24px Arial'
    ctx.textBaseline = 'middle'
    for (let i = 0; i < text.length; i++) {
      ctx.fillStyle = `rgb(${Math.random() * 100},${Math.random() * 100},${Math.random() * 100})`
      const x = 20 + i * 25
      const y = 20 + (Math.random() - 0.5) * 8
      const angle = (Math.random() - 0.5) * 0.4
      ctx.save()
      ctx.translate(x, y)
      ctx.rotate(angle)
      ctx.fillText(text[i], 0, 0)
      ctx.restore()
    }
    
    captchaImage.value = canvas.toDataURL()
  }
}

// 倒计时逻辑
let countdownTimer: NodeJS.Timeout | null = null

const startCountdown = () => {
  countdown.value = 60
  canSendSms.value = false
  
  countdownTimer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      canSendSms.value = true
      if (countdownTimer) {
        clearInterval(countdownTimer)
        countdownTimer = null
      }
    }
  }, 1000)
}

// 发送短信验证码
const handleSendSms = () => {
  // 验证手机号
  if (!loginForm.phone.trim()) {
    ElMessage.error('请输入手机号')
    return
  }
  
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(loginForm.phone)) {
    ElMessage.error('请输入正确的手机号')
    return
  }
  
  // 验证图形验证码
  if (!loginForm.captchaInput.trim()) {
    ElMessage.error('请输入图形验证码')
    return
  }
  
  if (loginForm.captchaInput.toUpperCase() !== captchaText.value) {
    ElMessage.error('图形验证码错误')
    generateCaptcha()
    loginForm.captchaInput = ''
    return
  }
  
  // 模拟发送短信
  ElMessage.success('验证码已发送至您的手机，请注意查收')
  startCountdown()
  
  // 演示用：实际验证码为 123456
  console.log('演示验证码：123456')
}

// 登录提交
const handleSubmit = async () => {
  if (!loginFormRef.value) return
  
  try {
    await loginFormRef.value.validate()
  } catch {
    return
  }
  
  // 验证图形验证码
  if (loginForm.captchaInput.toUpperCase() !== captchaText.value) {
    ElMessage.error('图形验证码错误')
    generateCaptcha()
    loginForm.captchaInput = ''
    return
  }

  isLoading.value = true

  // 模拟登录验证 - 完全复制React版本的逻辑
  setTimeout(() => {
    // 演示账号：
    // 13800000001 验证码123456 - 管理员
    // 13800000002 验证码123456 - 普通用户
    if (loginForm.phone === '13800000001' && loginForm.smsCode === '123456') {
      ElMessage.success('登录成功')
      props.onLogin(loginForm.phone, 'admin')
    } else if (loginForm.phone === '13800000002' && loginForm.smsCode === '123456') {
      ElMessage.success('登录成功')
      props.onLogin(loginForm.phone, 'viewer')
    } else {
      ElMessage.error('手机号或验证码错误')
      isLoading.value = false
      generateCaptcha()
      loginForm.captchaInput = ''
    }
  }, 800)
}

// 生命周期
onMounted(() => {
  generateCaptcha()
})

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})
</script>

<style scoped>
/* 自定义Element Plus样式以匹配React版本 */
:deep(.login-input .el-input__wrapper) {
  height: 48px;
  background-color: #f3f3f5;
  border: none;
  border-radius: 8px;
  box-shadow: none;
}

:deep(.login-input .el-input__wrapper:hover) {
  border: none;
  box-shadow: none;
}

:deep(.login-input .el-input__wrapper.is-focus) {
  background-color: #f3f3f5;
  border: none;
  box-shadow: none;
}

:deep(.sms-button) {
  height: 48px;
  padding: 0 16px;
  background-color: white;
  color: #3b82f6;
  border: 1px solid transparent;
  border-radius: 8px;
  white-space: nowrap;
}

:deep(.sms-button:hover) {
  background-color: #eff6ff;
  color: #3b82f6;
  border-color: transparent;
}

:deep(.sms-button.is-disabled) {
  background-color: #f3f4f6;
  color: #9ca3af;
  border-color: transparent;
}

/* 白色边框按钮样式 */
:deep(.sms-button-white) {
  height: 48px;
  padding: 0 16px;
  background-color: white;
  color: #3b82f6;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  white-space: nowrap;
}

:deep(.sms-button-white:hover) {
  background-color: #eff6ff;
  color: #2563eb;
  border-color: #d1d5db;
}

:deep(.sms-button-white.is-disabled) {
  background-color: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
}

:deep(.login-submit-button) {
  width: 100%;
  height: 48px;
  background-color: #3b82f6;
  border-color: #3b82f6;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin-top: 8px;
}

:deep(.login-submit-button:hover) {
  background-color: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 表单标签样式 */
label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
</style>