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

<template>
  <el-container class="app-root" direction="vertical">
    <el-header class="app-header" height="50px">
      <div class="app-header-inner">
        <router-link v-slot="{ navigate }" :to="{ path: '/', force: true }" custom>
          <div class="header-title" @click="navigate()">社团展示系统</div>
        </router-link>
        <transition name="header-content-container">
          <template v-if="arrayIncludes(['initialized', 'failed'], userStore.userInfoStatus)">
            <nav class="header-content-container">
              <el-menu
                :default-active="route.fullPath"
                :ellipsis="false"
                :router="true"
                mode="horizontal"
              >
                <div style="flex: 1"></div>
                <el-menu-item index="/2048">
                  <img alt="2048" class="header-menu-image" src="@/assets/2048.png" />
                </el-menu-item>
              </el-menu>
              <template v-if="userStore.userInfo && userStore.userInfo.id !== -1">
                <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>
            </nav>
          </template>
          <div v-else class="header-content-container">
            <el-icon class="loading-icon is-loading" color="dimgrey" size="25">
              <icon-cs-loading />
            </el-icon>
          </div>
        </transition>
      </div>
    </el-header>
    <el-main v-loading="!!pageStore.pageLoadingCount">
      <router-view v-slot="{ Component: comp }">
        <transition appear mode="out-in" name="page-root">
          <component :is="comp" />
        </transition>
      </router-view>
      <transition name="page-root"></transition>
      <!-- <div
        :style="
          pageStore.pageLoadingCount
            ? {
                opacity: 1,
                transition: 'opacity 0.75s 0.15s',
                zIndex: 99
              }
            : {
                opacity: 0,
                transition: 'opacity 0.3s',
                zIndex: -1
              }
        "
        class="page-loading-mask"
      >
        <div class="page-loading-icon-container">
          <el-icon class="loading-icon is-loading" color="white" size="60">
            <icon-cs-loading />
          </el-icon>
        </div>
      </div> -->
    </el-main>
  </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>
.app-root {
  min-height: 100vh;
}

.app-header {
  --el-header-padding: 0;
  --el-menu-horizontal-height: 50px;
  --el-menu-base-level-padding: 10px;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--el-border-color);
  box-shadow: 0 1px 5px rgba(black, 0.1);
  background-color: white;
  z-index: 100;
  overflow: hidden;
}

.app-header-inner {
  position: relative;
  width: var(--page-content-width);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 0 15px;
}

.header-content-container {
  height: 50px;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition-property: opacity;
  transition-duration: 0.3s;

  &:has(.loading-icon) {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.header-content-container .el-menu {
  flex: 1;
  margin-right: 10px;
}

.header-content-container .header-menu-image {
  width: 40px;
  display: flex;
  align-items: center;
}

.header-content-container-enter-from,
.header-content-container-leave-to {
  opacity: 0;
}

.el-main {
  display: flex;
  justify-content: center;
  position: relative;
  padding: 0;

  &:has(.page-root-enter-active, .page-root-leave-active) {
    overflow-x: hidden;
  }
}

.page-root {
  transition-property: opacity, transform;
  transition-duration: 0.3s;

  &:not(.page-max-width) {
    width: var(--page-content-width);
    margin: 0 15px;
  }

  &.page-max-width {
    width: 100vw;
  }
}

.page-root-enter-from {
  opacity: 0;

  &:not(.page-max-width) {
    transform: translateX(-30px);
  }
}

.page-root-leave-to {
  opacity: 0;

  &:not(.page-max-width) {
    transform: translateX(30px);
  }
}

.page-loading-mask {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition-property: opacity;
  background-color: rgb(black, 0.3);
  z-index: 99;
}

.page-loading-icon-container {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: rgb(black, 0.5);
}

.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: 20px;
  line-height: 50px;
  user-select: none;
  cursor: pointer;
}

.username {
  margin-right: 10px;
}
</style>
<script lang="ts" setup>
import axiosInstance, { type RawResp } from '@/api';
import { type VerifyImagePath } from '@/components/VerifyInput.vue';
import { loginResponseSchema, registerResponseSchema } from '@/schemas';
import { useUserStore } from '@/stores';
import { usePageStore } from '@/stores/page';
import { arrayIncludes, errorMessage } from '@/utils';
import { Avatar, CloseBold } 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, useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const pageStore = usePageStore();
watch(
  () => userStore.userInfoStatus,
  (value) => {
    if (value === 'initialized' && 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>();
let 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>();
let 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): Promise<boolean> {
  const loginRespRaw = await axiosInstance
    .post<RawResp>('/api/user/login', params)
    .then((r) => r.data)
    .catch((e: AxiosError) => {
      ElMessage.error(loginErrorMessage(e.code, e.message));
    });
  if (!loginRespRaw) return false;
  const loginResp = loginResponseSchema.parse(loginRespRaw);
  if (loginResp.type === 'error') {
    ElMessage.error(loginErrorMessage(loginResp.code, loginResp.msg));
    return false;
  }
  await userStore.updateSelfUserInfo(true);
  return true;
}

async function submitLoginForm() {
  let succeed = false;
  logining.value = true;
  try {
    try {
      await loginFormRef.value?.validate();
    } catch (e) {
      return;
    }
    if (typeof loginFormData.verifyImage !== 'object') {
      ElMessage.error('请获取验证码');
      return;
    }
    const {
      username,
      password,
      verifyImage: { key },
      verifyCode: code
    } = loginFormData;
    succeed = await login({
      username,
      password,
      key,
      code
    });
  } finally {
    if (succeed) {
      showLoginRegisterDialog.value = false;
    } 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');
    }
    return false;
  }
}

async function submitRegisterForm() {
  let succeed = false;
  registering.value = true;
  try {
    try {
      await registerFormRef.value?.validate();
    } catch {
      return;
    }
    if (typeof registerFormData.verifyImage !== 'object') {
      ElMessage.error('请输入验证码');
      return;
    }
    const {
      username,
      password,
      verifyImage: { key },
      verifyCode: code
    } = registerFormData;
    succeed = await register({ username, password, key, code, auth: 1 });
  } finally {
    if (succeed) {
      userStore.userInfoStatus = 'uninitialized';
      await router.push({ path: route.fullPath, force: true });
    } else {
      registerFormData.verifyImage = 'none';
      registerFormRef.value?.resetFields('verifyCode');
      registering.value = false;
    }
  }
}

async function logout() {
  userStore.$reset();
  await userStore.updateSelfUserInfo(true);
}
</script>