feat: 接入真实登录鉴权流程

src/views/roles/index.vue

@@ -14,6 +14,7 @@ import {
   type Role,
   type RolePayload
 } from "@/api/access";
+import { hasPerms } from "@/utils/auth";
 
 import Plus from "~icons/ep/plus";
 import Search from "~icons/ep/search";
@@ -74,6 +75,7 @@ const systemRoleCount = computed(
   () => roles.value.filter(item => item.code === "admin").length
 );
 const dialogTitle = computed(() => (form.id ? "编辑角色" : "新增角色"));
+const canManageRoles = computed(() => hasPerms("role:manage"));
 
 function applyRoleQuery(items: Role[]) {
   const keyword = query.keyword.trim().toLowerCase();
@@ -136,9 +138,7 @@ function buildPayload(): RolePayload {
 async function fetchRoles() {
   tableLoading.value = true;
   try {
-    const result = await listRoles({
-      keyword: query.keyword.trim() || undefined
-    });
+    const result = await listRoles();
     roles.value = applyRoleQuery(result.data);
   } catch (error) {
     ElMessage.error(getErrorMessage(error, "加载角色列表失败"));
@@ -158,11 +158,13 @@ function handleSearch() {
 }
 
 function openCreateDialog() {
+  if (!canManageRoles.value) return;
   resetFormState();
   dialogVisible.value = true;
 }
 
 function openEditDialog(row: Role) {
+  if (!canManageRoles.value || row.isSystem) return;
   Object.assign(form, {
     id: row.id,
     code: row.code,
@@ -174,6 +176,7 @@ function openEditDialog(row: Role) {
 }
 
 async function submitForm() {
+  if (!canManageRoles.value) return;
   await formRef.value?.validate();
   submitLoading.value = true;
 
@@ -198,6 +201,7 @@ async function submitForm() {
 }
 
 async function removeRole(row: Role) {
+  if (!canManageRoles.value || row.isSystem) return;
   try {
     await ElMessageBox.confirm(
       `删除后角色「${row.name}」无法再绑定员工，确认继续？`,
@@ -228,7 +232,12 @@ onMounted(fetchRoles);
         <p class="eyebrow">权限角色基础数据</p>
         <h1>角色管理</h1>
       </div>
-      <el-button type="primary" :icon="Plus" @click="openCreateDialog">
+      <el-button
+        v-if="canManageRoles"
+        type="primary"
+        :icon="Plus"
+        @click="openCreateDialog"
+      >
         新增角色
       </el-button>
     </div>
@@ -295,9 +304,15 @@ onMounted(fetchRoles);
             {{ formatTime(row.updatedAt) }}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="170" fixed="right">
+        <el-table-column
+          v-if="canManageRoles"
+          label="操作"
+          width="170"
+          fixed="right"
+        >
           <template #default="{ row }">
             <el-button
+              v-if="!row.isSystem"
               link
               type="primary"
               :icon="EditPen"
@@ -306,6 +321,7 @@ onMounted(fetchRoles);
               编辑
             </el-button>
             <el-button
+              v-if="!row.isSystem"
               link
               type="danger"
               :icon="Delete"
@@ -313,6 +329,7 @@ onMounted(fetchRoles);
             >
               删除
             </el-button>
+            <span v-if="row.isSystem" class="muted">系统内置</span>
           </template>
         </el-table-column>
       </el-table>
@@ -473,6 +490,10 @@ onMounted(fetchRoles);
   }
 }
 
+.muted {
+  color: #94a3b8;
+}
+
 .management-form {
   padding-top: 4px;
 }