feat: Improve the front-end permission access logic and sample code

packages/business/access/src/role-authority.vue

@@ -2,25 +2,28 @@
  Access control component for fine-grained access control.
 -->
 <script lang="ts" setup>
+import { useAccess } from './use-access';
+
 interface Props {
   /**
    * Specified role is visible
-   * - When the permission mode is 'frontend', the value can be a role value.
-   * - When the permission mode is 'backend', the value can be a code permission value.
-   * @default ''
+   * @default []
    */
   roles?: string[];
 }
 
 defineOptions({
-  name: 'FrontendAuthority',
+  name: 'RoleAuthority',
 });
 
 withDefaults(defineProps<Props>(), {
   roles: undefined,
 });
+
+const { hasAuthByRole } = useAccess();
 </script>
 
 <template>
-  <slot></slot>
+  <slot v-if="!roles"></slot>
+  <slot v-else-if="hasAuthByRole(roles)"></slot>
 </template>