优化构架

src/modules/system/views/ForbiddenView.vue

@@ -0,0 +1,29 @@
+<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>