重写复现方法

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

@@ -0,0 +1,123 @@
+<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'
+
+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;
+  try {
+    // 更清晰的变量命名，API返回通常包含code、data、msg等字段
+    const response: LoginResult = await apiLogin(form);
+    // 检查请求是否成功（通常200为成功状态码）
+    if (response.code === 200 && response.data) {
+      localStorage.setItem('userInfo', JSON.stringify(response.data));
+      message.success(response.msg || '登录成功');
+      // 延迟跳转提升用户体验
+      setTimeout(() => {
+        router.replace('/dashboard');
+      }, 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>