SupplyAgent/web/src/views/ForbiddenView.vue

<script setup lang="ts">
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
import { currentUser, defaultRouteFor } from '../auth'

const home = computed(() => currentUser.value ? defaultRouteFor(currentUser.value) : '/login')
</script>

<template>
  <section class="forbidden">
    <span>403</span>
    <h1>无权访问此页面</h1>
    <p>当前账号没有对应权限。如需访问，请联系系统管理员。</p>
    <RouterLink :to="home">返回可访问页面</RouterLink>
  </section>
</template>

<style scoped>
.forbidden { display: grid; min-height: calc(100vh - 130px); place-content: center; text-align: center; }
.forbidden > span { color: #6869d2; font-size: 13px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 12px 0 8px; color: #262d3d; font-size: 30px; }
p { margin: 0 0 24px; color: #7c8493; font-size: 13px; }
a { justify-self: center; padding: 11px 18px; border-radius: 9px; background: #5b5cc9; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; }
</style>