登录主页面与记住用户

src/views/Login.vue

@@ -0,0 +1,221 @@
+<template>
+  <!-- 背景容器 -->
+  <div class="login-bg">
+    <!-- 登录表单 -->
+    <div class="login-form">
+      <h3>欢迎登录系统</h3>
+      <el-form :model="loginForm" label-width="0" class="form-item">
+        <!-- 账号输入框 -->
+        <el-form-item>
+          <el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入登录账号" clearable @input="clearErrorMsg"/>
+        </el-form-item>
+        <!-- 密码输入框 -->
+        <el-form-item>
+          <el-input v-model="loginForm.password" prefix-icon="Lock" type="password" placeholder="请输入登录密码" clearable @input="clearErrorMsg"/>
+        </el-form-item>
+        <!-- 错误提示 -->
+        <div v-show="errorMsg" class="error-tip fixed-height">{{ errorMsg }}</div>
+        <div v-show="!errorMsg" class="error-placeholder fixed-height"></div>
+        <!-- 记住密码复选框 -->
+        <el-form-item class="remember">
+          <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
+        </el-form-item>
+        <!-- 登录按钮 -->
+        <el-form-item>
+          <el-button type="primary" style="width: 100%;" @click="handleLogin">
+            登 录
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+
+// 表单数据
+const loginForm = ref({
+  username: '',
+  password: '',
+  remember: false
+});
+
+// 错误提示
+const errorMsg = ref('');
+
+// 页面加载时，自动填充“记住的账号密码”
+onMounted(() => {
+  const storedLogin = localStorage.getItem('deepchart_login');
+  if (storedLogin) {
+    const { username, password, remember } = JSON.parse(storedLogin);
+    loginForm.value.username = username;
+    loginForm.value.password = password;
+    loginForm.value.remember = remember;
+  }
+});
+
+// 输入时清空错误提示
+const clearErrorMsg = () => {
+  errorMsg.value = '';
+};
+
+// 登录逻辑：包含表单校验、消息提醒、记住密码存储
+const handleLogin = () => {
+  // 先清空之前的错误提示
+  errorMsg.value = '';
+
+  // 校验必填项
+  if (!loginForm.value.username && !loginForm.value.password) {
+    errorMsg.value = '请输入账号和密码后再登录'; 
+    return;
+  }
+  if (!loginForm.value.username) {
+    errorMsg.value = '账号为必填项，请输入账号';
+    return;
+  }
+  if (!loginForm.value.password) {
+    errorMsg.value = '密码为必填项，请输入密码';
+    return;
+  }
+
+  // 模拟接口登录
+  // 假设正确账号：admin，正确密码：123456
+  const isAccountCorrect = loginForm.value.username === 'admin';
+  const isPasswordCorrect = loginForm.value.password === '123456';
+
+  if (isAccountCorrect && isPasswordCorrect) {
+    // 登录成功，处理“记住密码”存储
+    localStorage.setItem('token', '123456');
+    
+    if (loginForm.value.remember) {
+      localStorage.setItem('deepchart_login', JSON.stringify({
+        username: loginForm.value.username,
+        password: loginForm.value.password,
+        remember: true
+      }));
+    } else {
+      localStorage.removeItem('deepchart_login');
+    }
+
+    // 跳转到首页
+    const redirectPath = '/';
+    router.push(redirectPath);
+  } else {
+    // 登录失败
+    if (!isAccountCorrect) {
+      errorMsg.value = '账号填写有误，请核对账号后重新输入';
+    } else {
+      errorMsg.value = '密码填写有误，请核对密码后重新输入';
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 背景图全屏样式 */
+.login-bg {
+  background-image: url('../assets/images/login.png'); 
+  background-size: cover;
+  background-position: center;
+  height: calc(100vh - 16px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 表单样式 */
+.login-form {
+  margin-left: 650px;
+  width: 400px; 
+  padding: 40px 30px;
+}
+
+/* 标题样式 */
+.login-form h3 {
+  text-align: center;
+  margin-bottom: 50px; 
+  color: #2d3748;
+  font-size: 24px; 
+  font-weight: 600;
+}
+
+.form-item {
+  width: 100%;
+}
+
+/* 输入框区域 */
+.el-form-item {
+  margin-bottom: 30px;
+}
+
+.el-input {
+  border-radius: 4px;
+  border: 1px solid #e5e7eb;
+  height: 48px; 
+}
+
+.el-input__inner {
+  padding: 0 16px;
+  font-size: 16px; 
+}
+
+.el-input__placeholder {
+  font-size: 16px !important; 
+}
+
+/* 记住密码 */
+.remember {
+  text-align: left;
+  margin-bottom: 32px; 
+  font-size: 15px; 
+  color: #4b5563;
+}
+
+.el-checkbox__label {
+  font-size: 15px !important; 
+  margin-left: 8px !important;
+}
+
+/* 登录按钮 */
+.el-button--primary {
+  height: 52px; 
+  font-size: 18px;
+  border-radius: 4px;
+  background-color: #1890ff;
+  border: none;
+}
+
+.el-button--primary:hover {
+  background-color: #096dd9;
+}
+
+/* 图标大小适配 */
+.el-input__prefix {
+  font-size: 18px !important;
+}
+
+/* 错误提示 */
+.error-tip {
+  color: #ff4d4f;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: left;
+  line-height: 1.5;
+  overflow: hidden; 
+}
+
+.error-placeholder {
+  visibility: hidden; 
+}
+
+.fixed-height {
+  height: 21px; 
+  margin-bottom: 6px;
+}
+
+</style>