c-api/capi-ui/src/views/login/Login.vue

<template>
  <div class="login-wrapper">
    <a-card class="login-card" :bordered="false">
      <div class="login-header">
        <img class="logo" src="@/assets/logo.png" alt="logo" />
		<h1>cApi管理系统</h1>
		<p>安全、高效的一站式管理解决方案，为您的业务保驾护航</p>
      </div>

      <a-form ref="formRef" :model="form" :rules="rules" size="large" @finish="handleSubmit">
        <a-form-item name="account">
          <a-input v-model:value="form.account" placeholder="请输入用户名" allow-clear>
            <template #prefix><UserOutlined /></template>
          </a-input>
        </a-form-item>

        <a-form-item name="password">
          <a-input-password v-model:value="form.password" placeholder="请输入密码" allow-clear>
            <template #prefix><LockOutlined /></template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" :loading="loading" block>
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'

import type { LoginParams, LoginResult } from '@/api/auth'
import { apiLogin } from '@/api/auth'

import { useAuthStore } from '@/store/index' // 引入状态管理


const router = useRouter()
const formRef = ref()
const loading = ref(false)

const form = reactive<LoginParams>({ account: '', password: '' })

const rules = {
  account: [{ required: true, message: '请输入用户名' }],
  password: [{ required: true, message: '请输入密码' }]
}

const handleSubmit = async () => {
  // 防止重复提交
  if (loading.value) return;
  
  loading.value = true;
  const authStore = useAuthStore(); // 提前获取store实例，避免多次调用
  try {
    // 更清晰的变量命名，API返回通常包含code、data、msg等字段
    const response: LoginResult = await apiLogin(form);
    // 检查请求是否成功（通常200为成功状态码）
    if (response.code === 200 && response.data) {
	  const token = response.data.token;
	  localStorage.setItem('token', token );
      localStorage.setItem('userInfo', response.data);
	  authStore.setAuthInfo(token, response.data);
      message.success(response.msg || '登录成功');
      // 延迟跳转提升用户体验
      setTimeout(() => {
        router.replace('/index/console');
      }, 800);
      return; // 成功后终止函数，避免执行后续错误提示
    }
    // 处理业务错误（如账号密码错误）
    message.error(response.msg || '登录失败，请检查账号密码');
  } catch (error) {
    // 处理网络错误或异常情况
    console.error('登录请求异常:', error);
    message.error('网络异常，请检查网络连接后重试');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped lang="scss">
.login-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 200px;
  
  /* 渐变与背景图片融合设置 */
  background: 
    linear-gradient(120deg, rgba(79, 172, 254, 0.7) 0%, rgba(0, 242, 254, 0.7) 50%, rgba(122, 90, 248, 0.7) 100%),
    url('@/assets/imges/backImg.jpg') center center no-repeat;
  
  /* 背景融合模式 - 使渐变与图片颜色叠加融合 */
  background-blend-mode: overlay;
  /* 确保背景完全覆盖容器 */
  background-size: cover;
}
.login-text{
  text-align: center;
  color: white;
  width: 800px;
  padding: 32px 48px;
  border-radius: 8px;
}
.login-card {
  width: 520px;
  padding: 32px 48px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.login-header {
  text-align: center;
  margin-bottom: 32px;
  .logo { width: 64px; height: 64px; margin-bottom: 12px; }
  h1 { font-size: 24px; font-weight: 600; margin: 0; }
  p { font-size: 14px; color: #8c8c8c; margin: 8px 0 0; }
}

</style>