初始版本

app/components/developer/PermissionGuard.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/**
+ * 权限守卫组件
+ * 根据应用角色控制子内容的显示/隐藏
+ *
+ * 用法：
+ *   <PermissionGuard :app-id="123" permission="canManageMembers">
+ *     <a-button>邀请成员</a-button>
+ *   </PermissionGuard>
+ *
+ *   <PermissionGuard :app-id="123" :min-role="'admin'">
+ *     仅管理员和 Owner 可见
+ *   </PermissionGuard>
+ */
+import type { AppRole } from '@/api/app/appUser/model'
+import { useAppPermission } from '@/composables/useAppPermission'
+
+const props = defineProps<{
+  /** 应用 ID */
+  appId?: number | null
+  /** 要检查的权限字段（与 canManageMembers 等对应） */
+  permission?: string
+  /** 最低角色要求（优先级高于 permission） */
+  minRole?: AppRole
+  /** 权限不足时是否显示提示（而非隐藏） */
+  showTip?: boolean
+}>()
+
+const { hasPermission, hasRole, getNoPermissionTip, getAppPermission } = useAppPermission()
+
+const hasAccess = computed(() => {
+  if (!props.appId) return false
+  if (props.minRole) return hasRole(props.appId, props.minRole)
+  if (props.permission) return hasPermission(props.appId, props.permission as 'canManageMembers')
+  return true
+})
+
+const tipText = computed(() => {
+  const perm = getAppPermission(props.appId)
+  return perm ? getNoPermissionTip(perm.role) : ''
+})
+</script>
+
+<template>
+  <slot v-if="hasAccess" />
+  <slot v-else-if="showTip" name="fallback">
+    <a-tooltip :title="tipText">
+      <span class="text-gray-400 cursor-not-allowed">
+        <slot name="disabled-content" />
+      </span>
+    </a-tooltip>
+    </slot>
+</template>