修复bug

src/views/PermissionsView.vue

@@ -13,6 +13,8 @@ const initialRoleId = typeof route.query.role === 'string' && store.roles.some((
 const selectedRoleId = ref(initialRoleId)
 const selectedCodes = ref<string[]>([])
 const savedCodes = ref<string[]>([])
+const loading = ref(false)
+const loadError = ref('')
 
 const selectedRole = computed(() => store.roles.find((role) => role.id === selectedRoleId.value))
 const editable = computed(() => Boolean(auth.hasPermission('company:permission:assign') && selectedRole.value && !selectedRole.value.builtin && selectedRole.value.status === 'ACTIVE'))
@@ -26,15 +28,21 @@ function loadRolePermissions() {
 
 watch(selectedRoleId, loadRolePermissions, { immediate: true })
 
-onMounted(async () => {
+async function loadRoles() {
+  loading.value = true
+  loadError.value = ''
   try {
     await store.loadRoles()
     if (!store.roles.some((role) => role.id === selectedRoleId.value)) selectedRoleId.value = store.roles[0]?.id ?? ''
     loadRolePermissions()
   } catch (error) {
-    ElMessage.error(error instanceof Error ? error.message : '角色列表加载失败')
+    loadError.value = error instanceof Error ? error.message : '角色列表加载失败'
+  } finally {
+    loading.value = false
   }
-})
+}
+
+onMounted(() => void loadRoles())
 
 function groupCodes(groupKey: string) {
   return TENANT_PERMISSION_GROUPS.find((group) => group.key === groupKey)?.items.map((item) => item.code) ?? []
@@ -76,7 +84,12 @@ async function savePermissions() {
 </script>
 
 <template>
-  <section class="permissions-page">
+  <section v-loading="loading" class="permissions-page">
+    <div v-if="loadError" class="client-card permission-load-error" role="alert">
+      <div><strong>角色权限加载失败</strong><span>{{ loadError }}</span></div>
+      <el-button :loading="loading" @click="loadRoles">重新加载</el-button>
+    </div>
+    <template v-else-if="store.roles.length">
     <aside class="client-card role-selector">
       <header><div><span class="section-label">ROLES</span><h3>选择角色</h3></div></header>
       <button v-for="role in store.roles" :key="role.id" type="button" :class="{ active: role.id === selectedRoleId }" @click="selectedRoleId = role.id">
@@ -111,11 +124,18 @@ async function savePermissions() {
         </article>
       </div>
     </div>
+    </template>
+    <div v-else class="client-card permission-empty">当前企业暂无可用角色，创建角色后才能查看和分配权限。</div>
   </section>
 </template>
 
 <style scoped>
 .permissions-page { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 14px; }
+.permission-load-error, .permission-empty { grid-column: 1 / -1; min-height: 170px; }
+.permission-load-error { display: flex; align-items: center; justify-content: center; gap: 20px; }
+.permission-load-error > div { display: flex; max-width: 520px; flex-direction: column; gap: 6px; }
+.permission-load-error span { color: var(--muted); font-size: 12px; line-height: 1.6; }
+.permission-empty { display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; }
 .role-selector { position: sticky; top: 84px; padding: 12px; }
 .role-selector header { padding: 8px 8px 12px; }
 .role-selector h3 { margin-bottom: 0; }