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

<template>
  <el-config-provider :locale="zhCn">
    <el-container class="app__container">
      <el-header class="app-header flex items-center">
        <el-icon v-show="mdLess" size="30" @click="showVerticalHeaderMenu = true">
          <icon-cs-menu />
        </el-icon>
        <router-link custom to="/" v-slot="{ navigate }">
          <el-icon size="50" @click="navigate" color="var(--el-color-primary)">
            <icon-cs-club />
          </el-icon>
          <h3
            v-show="showAppTitle"
            class="overflow-hidden text-ellipsis whitespace-nowrap"
            @click="navigate"
          >
            社团展示系统
          </h3>
        </router-link>
        <header-menu v-show="!mdLess" mode="horizontal" />
        <el-dropdown v-if="!mdLess && userStore.logined">
          <header-user @login="onLoginButtonClick" @logout="logout" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="UserFilled" @click="jumpToUserPage">
                个人主页
              </el-dropdown-item>
              <el-dropdown-item :icon="CloseBold" @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <header-user
          v-else
          @login="onLoginButtonClick"
          @logout="logout"
          @click="showVerticalHeaderMenu = true"
        />
      </el-header>
      <el-main class="app-main" v-loading="!!pageStore.pageLoadingCount">
        <el-container>
          <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"
      :handle-login="login"
      :handle-register="register"
    />
    <el-drawer
      class="app-vertical-drawer"
      v-model="showVerticalHeaderMenu"
      direction="ltr"
      size="250"
      :with-header="false"
    >
      <h3 v-show="!showAppTitle" class="app__title text-center">社团展示系统</h3>
      <template v-if="userStore.logined">
        <header-user @login="showLoginRegisterDialog = true" />
        <el-button :icon="UserFilled" @click="jumpToUserPage">个人主页</el-button>
        <el-button type="danger" :icon="CloseBold" @click="logout">退出登录</el-button>
      </template>
      <div v-else class="app-vertical-drawer__not-login-title flex justify-center items-center">
        尚未登录
      </div>
      <header-menu mode="vertical" @select="showVerticalHeaderMenu = false" />
    </el-drawer>
  </el-config-provider>
</template>
<style lang="scss">
.app-vertical-drawer {
  --el-drawer-padding-primary: 0;
  .el-drawer__body {
    gap: 10px;
    display: flex;
    flex-direction: column;
  }
  > :first-child:not(.app-header-menu) {
    margin-top: 10px;
  }
  &__not-login-title {
    font-weight: bold;
  }
  .el-button {
    margin: 0 10px;
  }
}
</style>
<style lang="scss" scoped>
@use '@/assets/mixins' as m;
.app__container {
  min-height: 100vh;
}
.app-header {
  @include m.header(0);
  --el-loading-spinner-size: 30px;
  user-select: none;
  // 侧边栏需要居中
  .app-header-user {
    margin-left: auto;
  }
}
.app-main {
  --el-main-padding: 0 0 0 0;
  margin-top: var(--header-height);
  display: flex;
}
.app-router-component {
  &:not(.keep-padding) {
    --el-main-padding: 0;
  }
}
.app-router-view-enter-active,
.app-router-view-leave-active {
  transition: opacity 0.25s;
}

.app-router-view-enter-from,
.app-router-view-leave-to {
  opacity: 0;
}
</style>
<script setup lang="ts">
import { request } from '@/api';
import HeaderMenu from '@/components/app/HeaderMenu.vue';
import HeaderUser from '@/components/app/HeaderUser.vue';
import type { LoginRegisterDialogProps } from '@/components/app/LoginRegisterDialog.vue';
import LoginRegisterDialog from '@/components/app/LoginRegisterDialog.vue';
import router from '@/router';
import { loginRespSchema, registerRespSchema } from '@/schemas/response';
import { useMediaStore } from '@/stores/media';
import { usePageStore } from '@/stores/page.js';
import { useUserStore } from '@/stores/user';
import { CloseBold, UserFilled } from '@element-plus/icons-vue';
import { useMediaQuery } from '@vueuse/core';
import { zhCn } from 'element-plus/es/locales';
import { storeToRefs } from 'pinia';
import { onMounted, ref, watch } from 'vue';
const userStore = useUserStore();
const pageStore = usePageStore();
const { mdLess } = storeToRefs(useMediaStore());
const showAppTitle = useMediaQuery('(width >= 390px)');
const showLoginRegisterDialog = ref(false);
const login: LoginRegisterDialogProps['handleLogin'] = async (params) => {
  const resp = await request(loginRespSchema, {
    url: '/api/user/login',
    method: 'post',
    data: params,
  });
  if (!resp) {
    return false;
  }
  return userStore.updateSelfUserInfo();
};
const register: LoginRegisterDialogProps['handleRegister'] = async (params) => {
  const resp = await request(registerRespSchema, {
    url: '/api/user/create',
    method: 'put',
    data: params,
  });
  if (!resp) return false;
  return userStore.updateSelfUserInfo();
};
async function logout() {
  showVerticalHeaderMenu.value = false;
  await userStore.logout();
}
const showVerticalHeaderMenu = ref(false);
watch(mdLess, (v) => {
  if (v) return;
  showVerticalHeaderMenu.value = false;
});
function onLoginButtonClick() {
  showLoginRegisterDialog.value = true;
}
function jumpToUserPage() {
  showVerticalHeaderMenu.value = false;
  router.push({
    name: 'User',
    params: {
      id: userStore.userInfo!.id,
    },
  });
}
onMounted(() => {
  userStore.updateSelfUserInfo();
});
</script>