web-admin/src/layout/default-layout.vue

<template>
  <div class="home">
    <div class="home-header">
      <div>
        <h1 class="home-title">预约报名系统</h1>
      </div>
      <div class="home-action">
        <div class="home-action-item">
          <svg-icon name="icon-user" fill="#BFBFBF" />
          <span :title="userStore.name">{{ userStore.name }}</span>
        </div>
        <!-- <a-tooltip content="修改密码" position="br">
          <div class="home-action-item cursor" @click="toResetPwd">
            <svg-icon name="icon-user" fill="#BFBFBF" />
            <span :title="userStore.name">{{ userStore.name }}</span>
          </div>
        </a-tooltip> -->
        <a-tooltip content="退出登录" position="br">
          <div class="home-action-item cursor" @click="toLogout">
            <svg-icon name="icon-logout" />
          </div>
        </a-tooltip>
      </div>
    </div>

    <div class="home-navs">
      <a-menu
        v-if="appStore.appMenus && appStore.appMenus.length"
        class="arco-menu-home"
        :selected-keys="[curRouteName]"
        auto-open
        @menu-item-click="toMenuItem"
      >
        <template v-for="submenu in appStore.appMenus">
          <a-sub-menu
            v-if="submenu.children && submenu.children.length"
            :key="submenu.url"
          >
            <template #icon>
              <svg-icon :name="`icon-${submenu.url}`" />
            </template>
            <template #title>
              <span>{{ submenu.name }}</span>
            </template>

            <a-menu-item v-for="nav in submenu.children" :key="nav.url">
              <span>{{ nav.name }}</span>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item v-else :key="submenu.url + 'menu'">
            <span>{{ submenu.name }}</span>
          </a-menu-item>
        </template>
      </a-menu>
    </div>

    <div class="home-body">
      <div v-if="appStore.breadcrumbs.length" class="home-breadcrumb">
        <span class="breadcrumb-tips">
          <svg-icon name="icon-home" />
          <span>当前所在位置：</span>
        </span>
        <a-breadcrumb>
          <a-breadcrumb-item
            v-for="(bread, index) in appStore.breadcrumbs"
            :key="index"
          >
            {{ bread }}
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>

      <!-- home-view: page detail -->
      <div class="home-view">
        <router-view />
      </div>

      <Footer class="home-footer" />
    </div>
  </div>

  <!-- ResetPwd -->
  <ResetPwd
    ref="ResetPwdRef"
    :user-info="userInfo"
    @modified="resetPwdModified"
  />
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useAppStore, useUserStore } from '@/store';
  import { modalConfirm } from '@/utils/arco';

  import ResetPwd from '@/views/login/login/ResetPwd.vue';
  import Footer from '@/components/footer/index.vue';

  defineOptions({
    name: 'DefaultLayout',
  });

  const appStore = useAppStore();
  const userStore = useUserStore();
  const route = useRoute();
  const router = useRouter();

  const curRouteName = ref('');
  const userInfo = ref({
    pwdCount: 0,
    mobileNumber: 1,
    userId: userStore.id,
  });
  // const ResetPwdRef = ref();

  function initData() {
    curRouteName.value = route.name as string;
    // console.log(route.name);
  }

  function toMenuItem(val: string) {
    router.push({ name: val });
  }

  // function toResetPwd() {
  //   ResetPwdRef.value?.open();
  // }

  function resetPwdModified() {
    userStore.logout();
  }

  async function toLogout() {
    const confirmRes = await modalConfirm('提示', `确定要退出登录吗？`).catch(
      () => false
    );
    if (confirmRes !== 'confirm') return;
    userStore.logout();
  }

  onMounted(() => {
    initData();
  });

  watch(
    () => route.name,
    () => {
      initData();
    }
  );
</script>