30 lines
1.6 KiB
Vue
30 lines
1.6 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { ArrowLeft, ShieldX } from '@lucide/vue'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { getFirstAccessiblePath } from '@/navigation/clientNavigation'
|
||
|
||
const router = useRouter()
|
||
const auth = useAuthStore()
|
||
const firstAccessiblePath = computed(() => getFirstAccessiblePath(auth.permissionCodes))
|
||
</script>
|
||
|
||
<template>
|
||
<section class="forbidden-state client-card" aria-labelledby="forbidden-title">
|
||
<div class="forbidden-icon"><ShieldX :size="30" /></div>
|
||
<span class="section-label">403 · ACCESS DENIED</span>
|
||
<h2 id="forbidden-title">当前账号无权访问此页面</h2>
|
||
<p>页面权限由企业管理员分配。如需处理这项业务，请联系企业管理员调整您的角色权限。</p>
|
||
<el-button type="primary" @click="router.replace(firstAccessiblePath)"><ArrowLeft :size="16" />返回可访问页面</el-button>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.forbidden-state { display: grid; min-height: 420px; place-items: center; align-content: center; padding: 48px 24px; text-align: center; }
|
||
.forbidden-icon { display: grid; width: 64px; height: 64px; margin-bottom: 18px; place-items: center; background: #f4e9e8; color: #a2413b; }
|
||
.forbidden-state h2 { margin: 10px 0 8px; color: var(--navy); font-size: clamp(22px, 3vw, 30px); }
|
||
.forbidden-state p { max-width: 520px; margin: 0 0 24px; color: var(--muted); line-height: 1.75; }
|
||
@media (max-width: 720px) { .forbidden-state { min-height: 360px; } .forbidden-state :deep(.el-button) { min-height: 44px; } }
|
||
</style>
|