bloggingplatform/src/views/Login.vue

<template>
  <el-container class="login">
    <el-main class="main-content">
      <el-tabs v-model="activeTab" class="tabs" style="width: 100%;">
        <el-tab-pane label="管理员登录" name="first">
          <el-form :model="adminForm" :rules="adminRules" ref="adminFormRef" label-position="top" status-icon
            class="form-container">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="adminForm.username" placeholder="请输入管理员用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="adminForm.password" placeholder="请输入管理员密码" />
            </el-form-item>
            <el-button type="primary" @click="adminLogin" class="login-btn">登录</el-button>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="用户登录" name="second">
          <el-form :model="userForm" :rules="userRules" ref="userFormRef" label-position="top" status-icon
            class="form-container">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userForm.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="userForm.password" placeholder="请输入密码" />
            </el-form-item>
            <el-button type="primary" @click="userLogin" class="login-btn">登录</el-button>
            <el-button type="text" @click="toggleRegister" class="register-btn">注册</el-button>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '../stores/user';

  // 当前选中的标签页
  const activeTab = ref<string>('first');

  // 管理员登录表单数据和验证规则
  const adminForm = ref({
    username: '',
    password: '',
  });
  const adminRules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  };

  // 用户登录表单数据和验证规则
  const userForm = ref({
    username: '',
    password: '',
  });
  const userRules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  };

  const router = useRouter();
  const userStore = useUserStore();

  // 管理员登录逻辑
  const adminLogin = () => {
    console.log('管理员登录:', adminForm.value);
    if (adminForm.value.username == "admin" && adminForm.value.password == "123456") {
      const u = userStore.loginUser(adminForm.value.username, adminForm.value.password);
      if (u != null) {
        router.push("/admin");
      } else {
        ElMessage.error('登录失败，请检查用户名和密码');
      }
    } else {
      ElMessage.error('登录失败，请检查用户名和密码');
    }
  };

  // 用户登录逻辑
  const userLogin = () => {
    console.log('用户登录:', userForm.value);
    const u = userStore.loginUser(userForm.value.username, userForm.value.password);
    if (u != null) {
      router.push("/user");
    } else {
      ElMessage.error('登录失败，请检查用户名和密码');
    }
  };

  // 注册
  const toggleRegister = () => {
    router.push("/register");
  };
</script>

<style scoped>
  .login {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/bg.jpg');
    background-repeat: no-repeat;
    /* 不重复背景图片 */
    background-size: cover;
    /* 使背景图片覆盖整个页面 */
    background-position: center center;
  }

  .main-content {
    width: 100%;
    max-width: 450px;
    /* 控制最大宽度 */
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .tabs {
    width: 100%;
  }

  .form-container {
    width: 100%;
  }

  .el-tabs__header {
    margin-bottom: 20px;
    border-bottom: 2px solid #ddd;
  }

  .el-tabs__item {
    font-size: 16px;
    font-weight: 500;
  }

  .el-input {
    border-radius: 6px;
    padding: 10px;
  }

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

  .el-button {
    border-radius: 6px;
    font-size: 16px;
    padding: 12px 0;
  }

  .login-btn {
    background-color: #409EFF;
    color: #fff;
  }

  .register-btn {
    background-color: transparent;
    color: #409EFF;
    border: none;
    margin-top: 10px;
  }

  .el-button:focus {
    box-shadow: none;
  }

  .el-button:hover {
    opacity: 0.9;
  }

  .el-message {
    font-size: 14px;
  }
</style>