FreePS/layouts/admin.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <DefaultHeader />
      </el-header>

      <el-main>
        <client-only>
          <el-container>
            <el-aside width="64px">
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                collapse
              >
                <el-menu-item index="1" @click="navigateTo('/admin')">
                  <el-icon><House /></el-icon>
                  <template #title>总览</template>
                </el-menu-item>
                <el-menu-item
                  index="2"
                  @click="navigateTo('/admin/applications')"
                >
                  <el-icon><Stamp /></el-icon>
                  <template #title>申请审批</template>
                </el-menu-item>
                <el-menu-item index="3" @click="navigateTo('/admin/loginlogs')">
                  <el-icon><TakeawayBox /></el-icon>
                  <template #title>日志</template>
                </el-menu-item>
                <el-menu-item index="4" @click="navigateTo('/admin/settings')">
                  <el-icon><setting /></el-icon>
                  <template #title>设置</template>
                </el-menu-item>
              </el-menu>
            </el-aside>
            <el-main>
              <div class="area">
                <slot />
              </div>
            </el-main>
          </el-container>
        </client-only>
      </el-main>

      <el-footer>
        <DefaultFooter />
      </el-footer>
    </el-container>
  </div>
</template>
<script setup lang="ts">
const route = useRoute();
import { House, Setting, Stamp, TakeawayBox } from "@element-plus/icons-vue";
useHead({
  meta: [{ property: "title", content: `管理页面 - ${route.meta.title}` }],
});
definePageMeta({
  middleware: ["auth"],
});
</script>