修复bug

src/views/RolesView.vue

@@ -13,6 +13,7 @@ const keyword = ref('')
 const editorOpen = ref(false)
 const editingId = ref('')
 const loading = ref(false)
+const loadError = ref('')
 const saving = ref(false)
 const actionRoleId = ref('')
 const form = reactive({ name: '', code: '', description: '' })
@@ -38,18 +39,21 @@ function openEdit(role: TenantRole) {
   editorOpen.value = true
 }
 
-onMounted(async () => {
+async function loadRoles() {
   loading.value = true
+  loadError.value = ''
   try {
     const requests = [store.loadRoles()]
     if (auth.hasPermission('company:member:list')) requests.push(store.loadMembers())
     await Promise.all(requests)
   } catch (error) {
-    ElMessage.error(error instanceof Error ? error.message : '角色与成员统计加载失败')
+    loadError.value = error instanceof Error ? error.message : '角色与成员统计加载失败'
   } finally {
     loading.value = false
   }
-})
+}
+
+onMounted(() => void loadRoles())
 
 async function saveRole() {
   if (!form.name || !form.code || !form.description) {
@@ -105,8 +109,12 @@ function assignPermissions(role: TenantRole) {
 
 <template>
   <section v-loading="loading" class="roles-page">
+    <div v-if="loadError" class="client-card collection-load-error" role="alert">
+      <div><strong>企业角色加载失败</strong><span>{{ loadError }}</span></div>
+      <el-button :loading="loading" @click="loadRoles">重新加载</el-button>
+    </div>
+    <template v-else>
     <div class="role-guidance client-card"><ShieldCheck :size="22" /><div><strong>角色用于约束企业内部成员可见菜单和可执行操作</strong><span>企业管理员为系统内置角色，不能停用或删除；平台后台权限不会出现在客户工作台。</span></div></div>
-    <div v-if="store.rolesLoadedFromApi" class="role-contract-notice client-card">角色列表、新增、编辑、启停、删除及权限回显均使用真实 IAM 接口；系统内置角色和仍有关联成员的角色继续受服务端保护。</div>
 
     <div class="role-toolbar client-card">
       <el-input v-model="keyword" clearable placeholder="搜索角色名称、编码或说明"><template #prefix><Search :size="16" /></template></el-input>
@@ -132,6 +140,7 @@ function assignPermissions(role: TenantRole) {
       </el-form>
       <template #footer><div class="drawer-actions"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveRole">保存</el-button></div></template>
     </el-drawer>
+    </template>
   </section>
 </template>
 
@@ -141,7 +150,9 @@ function assignPermissions(role: TenantRole) {
 .role-guidance > div { display: flex; flex-direction: column; gap: 4px; }
 .role-guidance strong { color: var(--navy); font-size: 13px; }
 .role-guidance span { color: var(--muted); font-size: 11px; }
-.role-contract-notice { padding: 13px 16px; border-left: 3px solid #d97706; background: #fff8eb; color: #8a5b10; font-size: 11px; line-height: 1.6; }
+.collection-load-error { display: flex; min-height: 150px; align-items: center; justify-content: center; gap: 20px; }
+.collection-load-error > div { display: flex; max-width: 520px; flex-direction: column; gap: 6px; }
+.collection-load-error span { color: var(--muted); font-size: 12px; line-height: 1.6; }
 .role-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; }
 .role-toolbar .el-input { max-width: 360px; }
 .role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }