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

<template>
  <el-container class="app__container">
    <el-header class="app-header flex align-center">
      <router-link :custom="true" to="/" v-slot="{ navigate }">
        <el-icon size="50" @click="navigate"><icon-cs-club /></el-icon>
        <h3 class="app__title" @click="navigate">社团展示系统</h3>
      </router-link>
      <el-menu
        class="app-header-menu justify-end"
        mode="horizontal"
        :default-active="$route.fullPath"
        :router="true"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-sub-menu v-if="userStore.logined" class="festival-menu" index="festival">
          <template #title>社团文化节</template>
          <festival-menu-item src="/2048.png" title="2048" to="/2048" />
          <festival-menu-item src="/gobang.svg" title="五子棋" to="/gobang" />
        </el-sub-menu>
      </el-menu>
      <div class="app-header-user flex center" v-loading="userStore.initializing">
        <template v-if="!userStore.initializing">
          <template v-if="userInfo && userInfo.id !== -1">
            <el-dropdown>
              <div class="app-header-user__inner flex align-center">
                <el-avatar :icon="userInfo.avatar ?? undefined"></el-avatar>
                <div class="app-header-user__username">
                  {{ userInfo.name }}
                </div>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="CloseBold" @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <el-button type="primary" v-else @click="showLoginRegisterDialog = true">登录</el-button>
        </template>
      </div>
    </el-header>
    <el-main class="app-main" v-loading="!!pageStore.pageLoadingCount">
      <el-container class="app-router-component__wrapper">
        <router-view v-slot="{ Component: comp }">
          <transition appear mode="out-in" name="app-router-view">
            <component class="app-router-component" :is="comp" />
          </transition>
        </router-view>
      </el-container>
    </el-main>
  </el-container>
  <login-register-dialog v-model="showLoginRegisterDialog" />
</template>
<style lang="scss" scoped>
.app__container {
  min-height: 100vh;
}
.app-header {
  --header-height: 50px;
  --el-header-height: var(--header-height);
  --el-loading-spinner-size: 30px;
  background-color: white;
  border-bottom: 1px solid var(--el-border-color);
}
.app-header-menu__wrapper {
  flex: 1;
}
.app-header-menu {
  flex: 1;
  --el-menu-horizontal-height: var(--header-height);
  margin-right: 10px;
}
.app-header-menu :is(.el-menu-item, .el-sub-menu__title) {
  user-select: none;
}
.app-main {
  padding: 0;
  flex: 1;
  display: flex;
}
.app-header-user {
  min-width: 50px;
  gap: 10px;
}
.app-header-user__inner {
  gap: 10px;
}
.app-router-view-enter-active,
.app-router-view-leave-active {
  transition: opacity 0.4s ease;
}

.app-router-view-enter-from,
.app-router-view-leave-to {
  opacity: 0;
}
.app-router-component__wrapper {
  flex: 1;
}
</style>
<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue';
import type { AxiosError } from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, provide, ref } from 'vue';
import axiosInstance, { type RawResp } from './api/index';
import FestivalMenuItem from './components/FestivalMenuItem.vue';
import LoginRegisterDialog, {
  loginImplKey,
  registerImplKey,
} from './components/LoginRegisterDialog.vue';
import { loginResponseSchema, registerResponseSchema } from './schemas/response';
import { usePageStore } from './stores/page.js';
import { useUserStore } from './stores/user';
import { storeToRefs } from 'pinia';
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const pageStore = usePageStore();
const showLoginRegisterDialog = ref(false);
provide(loginImplKey, async (params) => {
  const loginRespRaw = await axiosInstance
    .post<RawResp>('/api/user/login', params)
    .then((r) => r.data)
    .catch((err: AxiosError) => {
      ElMessage.error([err.code, err.message].join(':'));
    });
  if (!loginRespRaw) return false;
  const resp = loginResponseSchema.parse(loginRespRaw);
  if (resp.type === 'error') {
    ElMessage.error([resp.code, resp.msg].join(':'));
    return false;
  }
  return userStore.updateSelfUserInfo(true);
});
provide(registerImplKey, async (params) => {
  const raw = await axiosInstance
    .put<RawResp>('/api/user/create', params)
    .then((r) => r.data)
    .catch((err: AxiosError) => {
      ElMessage.error([err.code, err.message].join(':'));
    });
  if (!raw) return false;
  const resp = registerResponseSchema.parse(raw);
  if (resp.type === 'error') {
    ElMessage.error([resp.code, resp.msg].join(':'));
    return false;
  }
  return userStore.updateSelfUserInfo(true);
});
async function logout() {
  userStore.token = null;
  await userStore.updateSelfUserInfo(true);
}
onMounted(() => {
  userStore.token = null;
  userStore.updateSelfUserInfo(true);
});
</script>