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

<template>
  <el-container>
    <el-header height="50px">
      <div class="header-title">社团展示系统</div>
      <nav class="header-content">
        <template v-if="userStore.isInitialized">
          <router-link v-slot="{ navigate }" custom to="/2048">
            <div class="nav-img-items game-2048" @click="navigate">
              <img alt="2048" draggable="false" src="@/assets/2048.png" />
            </div>
          </router-link>
          <template v-if="userStore.userInfo !== null">
            <div class="username">
              {{ userStore.userInfo.name }}
            </div>
            <el-dropdown ref="dropdownRef">
              <el-avatar :icon="userStore.userInfo.avatar || Avatar" :size="40"></el-avatar>
              <template #dropdown>
                <el-dropdown-menu>
                  <router-link v-slot="{ navigate }" custom to="/user">
                    <el-dropdown-item :icon="UserFilled" @click="navigate()">
                      个人主页
                    </el-dropdown-item>
                  </router-link>
                  <el-dropdown-item :icon="CloseBold" @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <el-avatar
            v-else
            :size="40"
            style="color: black; user-select: none; cursor: pointer"
            @click="showLoginRegisterDialog = true"
          >
            登录
          </el-avatar>
        </template>
        <loading-icon v-else />
      </nav>
    </el-header>
    <router-view />
  </el-container>
  <el-dialog
    v-model="showLoginRegisterDialog"
    :align-center="true"
    class="login-dialog"
    width="400"
  >
    <el-tabs v-model="loginRegisterDialogActiveName">
      <el-tab-pane label="登录" name="login">
        <el-form ref="loginFormRef" :model="loginFormData" :rules="loginFormRules" @submit.prevent>
          <el-form-item prop="username">
            <el-input
              v-model="loginFormData.username"
              :disabled="logining"
              placeholder="请输入用户名"
            >
              <template #prepend>
                <el-icon>
                  <icon-ep-user-filled />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginFormData.password"
              :disabled="logining"
              placeholder="请输入密码"
              type="password"
            >
              <template #prepend>
                <el-icon>
                  <icon-cs-lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="verifyCode">
            <verify-input v-model="loginFormData" :disabled="logining" />
          </el-form-item>
          <el-form-item style="margin-bottom: 0">
            <el-button
              :loading="logining"
              native-type="submit"
              style="width: 100%"
              type="primary"
              @click="submitLoginForm"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <el-form
          ref="registerFormRef"
          :model="registerFormData"
          :rules="registerFormRules"
          @submit.prevent
        >
          <el-form-item prop="username">
            <el-input
              v-model="registerFormData.username"
              :disabled="registering"
              placeholder="请输入注册用户名"
            >
              <template #prepend>
                <el-icon>
                  <icon-cs-user />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="registerFormData.password"
              :disabled="registering"
              placeholder="请输入密码"
              type="password"
            >
              <template #prepend>
                <el-icon>
                  <icon-cs-lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input
              v-model="registerFormData.confirmPassword"
              :disabled="registering"
              placeholder="请确认密码"
              type="password"
            >
              <template #prepend>
                <el-icon>
                  <icon-cs-lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="verifyCode">
            <verify-input v-model="registerFormData" :disabled="registering" />
          </el-form-item>
          <el-form-item style="margin-bottom: 0">
            <el-button
              :loading="registering"
              native-type="submit"
              style="width: 100%"
              type="primary"
              @click="submitRegisterForm"
            >
              注册
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<style lang="scss" scoped>
.el-header {
  --el-header-padding: var(--page-content-padding);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color);
  box-shadow: 0 1px 5px rgba(black, 0.1);
  background-color: white;
  z-index: 100;
}

.el-container {
  min-height: 100vh;
}

.el-main {
  --el-main-padding: var(--page-content-padding);
  height: 100%;
}

.header-content {
  display: flex;
  align-items: center;
}

.header-content > * {
  margin-right: 10px;
}

.header-content > *:last-child {
  margin-right: 0;
}

.nav-img-items {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-img-items img {
  width: 40px;
  height: 40px;
}

.game-2048 {
  margin-right: 20px;
}

.header-title {
  font-size: 1.2em;
}

.username {
  margin-right: 10px;
}
</style>
<script lang="ts" setup>
import axiosInstance from '@/api';
import { type VerifyImagePath } from '@/components/VerifyInput.vue';
import { loginResponseSchema, registerResponseSchema } from '@/schemas';
import { useUserStore } from '@/stores';
import { errorMessage } from '@/utils';
import { Avatar, CloseBold, UserFilled } from '@element-plus/icons-vue';
import { AxiosError } from 'axios';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { partial } from 'lodash-es';
import { reactive, ref, watch } from 'vue';
import { RouterView, useRouter } from 'vue-router';

const router = useRouter();
const userStore = useUserStore();
watch(
  () => userStore.isInitialized,
  (value) => {
    if (value && userStore.token === null) {
      showLoginRegisterDialog.value = true;
    }
  }
);
const showLoginRegisterDialog = ref(false);
watch(showLoginRegisterDialog, (value) => {
  if (value) {
    logining.value = false;
    loginFormData.verifyImage = 'none';
    loginFormRef.value?.resetFields();
    registering.value = false;
    registerFormData.verifyImage = 'none';
    registerFormRef.value?.resetFields();
  }
});
const loginRegisterDialogActiveName = ref('login');
const loginFormRef = ref<FormInstance>();
const loginFormData = reactive({
  username: 'wubaopu2',
  password: '123456',
  verifyImage: 'none' as VerifyImagePath,
  verifyCode: ''
});
const loginFormRules = reactive<FormRules<typeof loginFormData>>({
  username: [
    { required: true, message: '请输入用户名' },
    { min: 6, message: '用户名长度不能小于3位' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { min: 6, message: '密码长度不能小于6位' }
  ],
  verifyCode: [
    { required: true, message: '请输入验证码' },
    { pattern: /[0-9A-Za-z]{4}/, message: '验证码不符合格式' }
  ]
});
const logining = ref(false);
const registerFormRef = ref<FormInstance>();
const registerFormData = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  verifyImage: 'none' as VerifyImagePath,
  verifyCode: ''
});
const registerFormRules = reactive<FormRules<typeof registerFormData>>({
  ...loginFormRules,
  confirmPassword: [
    {
      validator(_, value, callback) {
        if (value === '') {
          callback('请输入密码');
        } else if (value !== registerFormData.password) {
          callback('密码不一致');
        } else if (value.length < 6) {
          callback('密码长度不能小于6位');
        } else {
          callback();
        }
      }
    }
  ]
});
const registering = ref(false);
const loginErrorMessage = partial(errorMessage, '登录');

interface LoginParams {
  username: string;
  password: string;
  key: string;
  code: string;
}

async function login(params: LoginParams) {
  try {
    const loginResp = loginResponseSchema.parse(
      (await axiosInstance.post('/api/user/login', params)).data
    );
    if (loginResp.type === 'error') {
      ElMessage.error(loginErrorMessage(loginResp.code, loginResp.msg));
      return false;
    }
    return true;
  } catch (e) {
    if (e instanceof AxiosError) {
      ElMessage.error(loginErrorMessage(e.code, e.message));
    } else {
      ElMessage.error('error');
    }
    console.log(e);
    return false;
  }
}

async function submitLoginForm() {
  let succeed = false;
  logining.value = true;
  try {
    try {
      await loginFormRef.value?.validate();
    } catch (e) {
      return;
    }
    if (typeof loginFormData.verifyImage === 'string') {
      ElMessage.error('请获取验证码');
      return;
    }
    const {
      username,
      password,
      verifyImage: { key },
      verifyCode: code
    } = loginFormData;
    console.log(loginFormData);
    succeed = await login({
      username,
      password,
      key,
      code
    });
  } finally {
    if (succeed) {
      window.location.reload();
    } else {
      loginFormData.verifyImage = 'none';
      loginFormRef.value?.resetFields('verifyCode');
      logining.value = false;
    }
  }
}

const registerErrorMessage = partial(errorMessage, '注册');

interface RegisterParams extends LoginParams {
  auth: number;
}

async function register(params: RegisterParams) {
  try {
    const registerResp = registerResponseSchema.parse(
      (await axiosInstance.put('/api/user/create', params)).data
    );
    if (registerResp.type === 'error') {
      ElMessage.error({
        message: registerErrorMessage(registerResp.code, registerResp.msg)
      });
      return false;
    }
    return true;
  } catch (e) {
    if (e instanceof AxiosError) {
      ElMessage.error(registerErrorMessage(e.code, e.message));
    } else {
      ElMessage.error('error');
    }
    console.log(e);
    return false;
  }
}

async function submitRegisterForm() {
  let succeed = false;
  registering.value = true;
  try {
    try {
      await registerFormRef.value?.validate();
    } catch {
      return;
    }
    if (typeof registerFormData.verifyImage === 'string') {
      ElMessage.error('请输入验证码');
      return;
    }
    const {
      username,
      password,
      verifyImage: { key },
      verifyCode: code
    } = registerFormData;
    succeed = await register({ username, password, key, code, auth: 1 });
  } finally {
    if (succeed) {
      window.location.reload();
    } else {
      registerFormData.verifyImage = 'none';
      registerFormRef.value?.resetFields('verifyCode');
      registering.value = false;
    }
  }
}

async function logout() {
  userStore.$reset();
  window.location.reload();
}
</script>