ITZX-Clubs-Home-Web/src/App.vue

<template>
  <el-container>
    <el-header height="50px">
      <div class="logo-container">社团展示系统</div>
      <div class="content">
        <el-dropdown>
          <el-icon :size="30"><icon-ep-avatar></icon-ep-avatar></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :disabled="true">你尚未登录</el-dropdown-item>
              <el-dropdown-item @click="showLoginDialog = true" :icon="Avatar">
                登录/注册
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
  </el-container>
  <el-dialog class="login-dialog" width="400" v-model="showLoginDialog" :align-center="true">
    <el-tabs v-model="loginRegisterDialogActiveName">
      <el-tab-pane label="登录" name="login">
        <el-form ref="loginFormRef" :model="loginFormData" :rules="loginFormRules">
          <el-form-item prop="username">
            <el-input placeholder="请输入用户名" v-model="loginFormData.username">
              <template #prepend>
                <el-icon><icon-ep-user-filled /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="loginFormData.password">
              <template #prepend>
                <el-icon><icon-cs-lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 0">
            <el-button type="primary" style="width: 100%" @click="submitForm">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <el-form ref="registerFormRef" :model="registerFormData" :rules="registerFormRules">
          <el-form-item prop="username">
            <el-input placeholder="请输入注册用户名" v-model="registerFormData.username">
              <template #prepend>
                <el-icon><icon-ep-user-filled /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="registerFormData.password">
              <template #prepend>
                <el-icon><icon-cs-lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input
              type="password"
              placeholder="请确认密码"
              v-model="registerFormData.confirmPassword"
            >
              <template #prepend>
                <el-icon><icon-cs-lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 0">
            <el-button type="primary" style="width: 100%" @click="submitForm">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  <router-view />
</template>
<style scoped lang="scss">
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color);
}
.title-container {
  font-size: 1.2em;
}
</style>
<script setup lang="ts">
import { Avatar } from '@element-plus/icons-vue';
import { type FormInstance, type FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const showLoginDialog = ref(false);
const loginRegisterDialogActiveName = ref('login');
const loginFormRef = ref<FormInstance>();
const loginFormData = reactive({
  username: '',
  password: ''
});
const loginFormRules = reactive<FormRules<typeof loginFormData>>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});
const registerFormRef = ref<FormInstance>();
const registerFormData = reactive({
  username: '',
  password: '',
  confirmPassword: ''
});
const registerFormRules = reactive<FormRules<typeof registerFormData>>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  confirmPassword: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
      validator(...[, value, callback]) {
        if (value !== registerFormData.password) {
          callback(new Error('密码不一致'));
        } else {
          callback();
        }
      }
    }
  ]
});
async function submitForm() {
  try {
    await loginFormRef.value?.validate();
  } catch {
    console.log('验证失败');
  }
}
</script>