diff --git a/apps/vben5/apps/app-antd/src/api/core/abp.ts b/apps/vben5/apps/app-antd/src/api/core/abp.ts
deleted file mode 100644
index e5fba68f5..000000000
--- a/apps/vben5/apps/app-antd/src/api/core/abp.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type {
-  ApplicationConfigurationDto,
-  ApplicationLocalizationDto,
-} from '@abp/core';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 获取应用程序配置信息
- */
-export function getConfigApi(options?: {
-  includeLocalizationResources?: boolean;
-}): Promise<ApplicationConfigurationDto> {
-  return requestClient.get<ApplicationConfigurationDto>(
-    '/api/abp/application-configuration',
-    {
-      params: options,
-    },
-  );
-}
-
-/**
- * 获取应用程序语言
- * @returns 本地化配置
- */
-export function getLocalizationApi(options: {
-  cultureName: string;
-  onlyDynamics?: boolean;
-}): Promise<ApplicationLocalizationDto> {
-  return requestClient.get<ApplicationLocalizationDto>(
-    '/api/abp/application-localization',
-    {
-      params: options,
-    },
-  );
-}
diff --git a/apps/vben5/apps/app-antd/src/api/core/index.ts b/apps/vben5/apps/app-antd/src/api/core/index.ts
index 5fe53ee1e..93c65bd62 100644
--- a/apps/vben5/apps/app-antd/src/api/core/index.ts
+++ b/apps/vben5/apps/app-antd/src/api/core/index.ts
@@ -1,2 +1,2 @@
-export * from './abp';
 export * from './menu';
+export { useAbpConfigApi } from './useAbpConfigApi';
diff --git a/apps/vben5/apps/app-antd/src/api/core/useAbpConfigApi.ts b/apps/vben5/apps/app-antd/src/api/core/useAbpConfigApi.ts
new file mode 100644
index 000000000..39715ab18
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/api/core/useAbpConfigApi.ts
@@ -0,0 +1,48 @@
+import type {
+  ApplicationConfigurationDto,
+  ApplicationLocalizationDto,
+} from '@abp/core';
+
+import { useRequest } from '@abp/request';
+
+export function useAbpConfigApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 获取应用程序配置信息
+   */
+  function getConfigApi(options?: {
+    includeLocalizationResources?: boolean;
+  }): Promise<ApplicationConfigurationDto> {
+    return request<ApplicationConfigurationDto>(
+      '/api/abp/application-configuration',
+      {
+        params: options,
+        method: 'GET',
+      },
+    );
+  }
+
+  /**
+   * 获取应用程序语言
+   * @returns 本地化配置
+   */
+  function getLocalizationApi(options: {
+    cultureName: string;
+    onlyDynamics?: boolean;
+  }): Promise<ApplicationLocalizationDto> {
+    return request<ApplicationLocalizationDto>(
+      '/api/abp/application-localization',
+      {
+        params: options,
+        method: 'GET',
+      },
+    );
+  }
+
+  return {
+    cancel,
+    getConfigApi,
+    getLocalizationApi,
+  };
+}
diff --git a/apps/vben5/apps/app-antd/src/store/auth.ts b/apps/vben5/apps/app-antd/src/store/auth.ts
index 6ff7c5e47..1953c88f0 100644
--- a/apps/vben5/apps/app-antd/src/store/auth.ts
+++ b/apps/vben5/apps/app-antd/src/store/auth.ts
@@ -11,12 +11,13 @@ import { useAbpStore } from '@abp/core';
 import { notification } from 'ant-design-vue';
 import { defineStore } from 'pinia';
 
-import { getConfigApi } from '#/api/core/abp';
+import { useAbpConfigApi } from '#/api/core/useAbpConfigApi';
 import { $t } from '#/locales';
 
 export const useAuthStore = defineStore('auth', () => {
   const { loginApi } = useTokenApi();
   const { getUserInfoApi } = useUserInfoApi();
+  const { getConfigApi } = useAbpConfigApi();
   const accessStore = useAccessStore();
   const userStore = useUserStore();
   const abpStore = useAbpStore();
diff --git a/apps/vben5/packages/@abp/auditing/src/api/audit-logs.ts b/apps/vben5/packages/@abp/auditing/src/api/audit-logs.ts
deleted file mode 100644
index d400b91a1..000000000
--- a/apps/vben5/packages/@abp/auditing/src/api/audit-logs.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { PagedResultDto } from '@abp/core';
-
-import type { AuditLogDto, AuditLogGetListInput } from '../types/audit-logs';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 获取审计日志
- * @param id 日志id
- */
-export function getApi(id: string): Promise<AuditLogDto> {
-  return requestClient.get<AuditLogDto>(`/api/auditing/audit-log/${id}`);
-}
-
-/**
- * 获取审计日志分页列表
- * @param input 参数
- */
-export function getPagedListApi(
-  input: AuditLogGetListInput,
-): Promise<PagedResultDto<AuditLogDto>> {
-  return requestClient.get<PagedResultDto<AuditLogDto>>(
-    '/api/auditing/audit-log',
-    {
-      params: input,
-    },
-  );
-}
-
-/**
- * 删除审计日志
- * @param id 日志id
- */
-export function deleteApi(id: string): Promise<void> {
-  return requestClient.delete(`/api/auditing/audit-log/${id}`);
-}
diff --git a/apps/vben5/packages/@abp/auditing/src/api/entity-changes.ts b/apps/vben5/packages/@abp/auditing/src/api/entity-changes.ts
deleted file mode 100644
index b80499d61..000000000
--- a/apps/vben5/packages/@abp/auditing/src/api/entity-changes.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { ListResultDto } from '@abp/core';
-
-import type {
-  EntityChangeGetWithUsernameInput,
-  EntityChangeWithUsernameDto,
-} from '../types/entity-changes';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 获取包含用户名称的实体变更列表
- * @param input 参数
- */
-export function getListWithUsernameApi(
-  input: EntityChangeGetWithUsernameInput,
-): Promise<ListResultDto<EntityChangeWithUsernameDto>> {
-  return requestClient.get<ListResultDto<EntityChangeWithUsernameDto>>(
-    '/api/auditing/entity-changes/with-username',
-    {
-      params: input,
-    },
-  );
-}
diff --git a/apps/vben5/packages/@abp/auditing/src/api/index.ts b/apps/vben5/packages/@abp/auditing/src/api/index.ts
index 8b3cb8830..8613244d7 100644
--- a/apps/vben5/packages/@abp/auditing/src/api/index.ts
+++ b/apps/vben5/packages/@abp/auditing/src/api/index.ts
@@ -1,2 +1,2 @@
-export * as auditLogsApi from './audit-logs';
-export * as entityChangesApi from './entity-changes';
+export { useAuditLogsApi } from './useAuditLogsApi';
+export { useEntityChangesApi } from './useEntityChangesApi';
diff --git a/apps/vben5/packages/@abp/auditing/src/api/useAuditLogsApi.ts b/apps/vben5/packages/@abp/auditing/src/api/useAuditLogsApi.ts
new file mode 100644
index 000000000..fb63f8429
--- /dev/null
+++ b/apps/vben5/packages/@abp/auditing/src/api/useAuditLogsApi.ts
@@ -0,0 +1,65 @@
+import type { PagedResultDto } from '@abp/core';
+
+import type {
+  AuditLogDeleteManyInput,
+  AuditLogDto,
+  AuditLogGetListInput,
+} from '../types/audit-logs';
+
+import { useRequest } from '@abp/request';
+
+export function useAuditLogsApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 获取审计日志
+   * @param id 日志id
+   */
+  function getApi(id: string): Promise<AuditLogDto> {
+    return request<AuditLogDto>(`/api/auditing/audit-log/${id}`, {
+      method: 'GET',
+    });
+  }
+
+  /**
+   * 获取审计日志分页列表
+   * @param input 参数
+   */
+  function getPagedListApi(
+    input: AuditLogGetListInput,
+  ): Promise<PagedResultDto<AuditLogDto>> {
+    return request<PagedResultDto<AuditLogDto>>('/api/auditing/audit-log', {
+      method: 'GET',
+      params: input,
+    });
+  }
+
+  /**
+   * 删除审计日志
+   * @param id 日志id
+   */
+  function deleteApi(id: string): Promise<void> {
+    return request(`/api/auditing/audit-log/${id}`, {
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * 批量删除审计日志
+   * @param input 参数
+   */
+  function deleteManyApi(input: AuditLogDeleteManyInput): Promise<void> {
+    return request(`/api/auditing/audit-log/bulk`, {
+      data: input,
+      method: 'DELETE',
+    });
+  }
+
+  return {
+    cancel,
+    deleteApi,
+    deleteManyApi,
+    getApi,
+    getPagedListApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/auditing/src/api/useEntityChangesApi.ts b/apps/vben5/packages/@abp/auditing/src/api/useEntityChangesApi.ts
new file mode 100644
index 000000000..0ca12d55a
--- /dev/null
+++ b/apps/vben5/packages/@abp/auditing/src/api/useEntityChangesApi.ts
@@ -0,0 +1,33 @@
+import type { ListResultDto } from '@abp/core';
+
+import type {
+  EntityChangeGetWithUsernameInput,
+  EntityChangeWithUsernameDto,
+} from '../types/entity-changes';
+
+import { useRequest } from '@abp/request';
+
+export function useEntityChangesApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 获取包含用户名称的实体变更列表
+   * @param input 参数
+   */
+  function getListWithUsernameApi(
+    input: EntityChangeGetWithUsernameInput,
+  ): Promise<ListResultDto<EntityChangeWithUsernameDto>> {
+    return request<ListResultDto<EntityChangeWithUsernameDto>>(
+      '/api/auditing/entity-changes/with-username',
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  return {
+    cancel,
+    getListWithUsernameApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/auditing/src/components/audit-logs/AuditLogDrawer.vue b/apps/vben5/packages/@abp/auditing/src/components/audit-logs/AuditLogDrawer.vue
index 80f441f92..95f0b7162 100644
--- a/apps/vben5/packages/@abp/auditing/src/components/audit-logs/AuditLogDrawer.vue
+++ b/apps/vben5/packages/@abp/auditing/src/components/audit-logs/AuditLogDrawer.vue
@@ -12,7 +12,7 @@ import { formatToDateTime } from '@abp/core';
 import { CodeEditor, MODE, useVbenVxeGrid } from '@abp/ui';
 import { Descriptions, Tabs, Tag } from 'ant-design-vue';
 
-import { getApi } from '../../api/audit-logs';
+import { useAuditLogsApi } from '../../api/useAuditLogsApi';
 import { useAuditlogs } from '../../hooks/useAuditlogs';
 import EntityChangeTable from '../entity-changes/EntityChangeTable.vue';
 
@@ -26,13 +26,16 @@ const DescriptionsItem = Descriptions.Item;
 const activedTab = ref('basic');
 const auditLogModel = ref<AuditLogDto>({} as AuditLogDto);
 
+const { getApi } = useAuditLogsApi();
 const { getHttpMethodColor, getHttpStatusCodeColor } = useAuditlogs();
 const [Drawer, drawerApi] = useVbenDrawer({
   class: 'w-auto',
   onCancel() {
     drawerApi.close();
   },
-  onConfirm: async () => {},
+  onConfirm: async () => {
+    drawerApi.close();
+  },
   onOpenChange: async (isOpen: boolean) => {
     if (isOpen) {
       try {
diff --git a/apps/vben5/packages/@abp/auditing/src/components/audit-logs/AuditLogTable.vue b/apps/vben5/packages/@abp/auditing/src/components/audit-logs/AuditLogTable.vue
index 451b900e6..5c2e29ad6 100644
--- a/apps/vben5/packages/@abp/auditing/src/components/audit-logs/AuditLogTable.vue
+++ b/apps/vben5/packages/@abp/auditing/src/components/audit-logs/AuditLogTable.vue
@@ -4,7 +4,7 @@ import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui';
 
 import type { AuditLogDto } from '../../types/audit-logs';
 
-import { defineAsyncComponent, h } from 'vue';
+import { defineAsyncComponent, h, ref, toValue } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -14,7 +14,7 @@ import { useVbenVxeGrid } from '@abp/ui';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
 import { Button, message, Modal, Tag } from 'ant-design-vue';
 
-import { deleteApi, getPagedListApi } from '../../api/audit-logs';
+import { useAuditLogsApi } from '../../api/useAuditLogsApi';
 import { AuditLogPermissions } from '../../constants/permissions';
 import { useAuditlogs } from '../../hooks/useAuditlogs';
 import { httpMethodOptions, httpStatusCodeOptions } from './mapping';
@@ -22,7 +22,9 @@ import { httpMethodOptions, httpStatusCodeOptions } from './mapping';
 defineOptions({
   name: 'AuditLogTable',
 });
+const { deleteApi, deleteManyApi, getPagedListApi } = useAuditLogsApi();
 
+const selectedKeys = ref<string[]>([]);
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: true,
@@ -121,6 +123,10 @@ const formOptions: VbenFormProps = {
 
 const gridOptions: VxeGridProps<AuditLogDto> = {
   columns: [
+    {
+      align: 'center',
+      type: 'checkbox',
+    },
     {
       align: 'left',
       field: 'url',
@@ -234,6 +240,12 @@ const gridOptions: VxeGridProps<AuditLogDto> = {
 };
 
 const gridEvents: VxeGridListeners<AuditLogDto> = {
+  checkboxAll: (params) => {
+    selectedKeys.value = params.records.map((x) => x.id);
+  },
+  checkboxChange: (params) => {
+    selectedKeys.value = params.records.map((x) => x.id);
+  },
   sortChange: onSort,
 };
 
@@ -268,6 +280,22 @@ async function onDelete(row: AuditLogDto) {
   });
 }
 
+function onBulkDelete() {
+  Modal.confirm({
+    centered: true,
+    content: $t('component.table.selectedItemWellBeDeleted'),
+    onOk: async () => {
+      await deleteManyApi({
+        ids: toValue(selectedKeys),
+      });
+      selectedKeys.value = [];
+      message.success($t('AbpUi.SuccessfullyDeleted'));
+      gridApi.query();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+
 function onSort(params: { field: string; order: SortOrder }) {
   const sorting = params.order ? `${params.field} ${params.order}` : undefined;
   gridApi.query({ sorting });
@@ -281,6 +309,19 @@ function onFilter(field: string, value: any) {
 
 <template>
   <Grid :table-title="$t('AbpAuditLogging.AuditLog')">
+    <template #toolbar-tools>
+      <Button
+        v-if="selectedKeys.length > 0"
+        :icon="h(DeleteOutlined)"
+        danger
+        ghost
+        type="primary"
+        v-access:code="[AuditLogPermissions.Delete]"
+        @click="onBulkDelete"
+      >
+        {{ $t('AbpUi.Delete') }}
+      </Button>
+    </template>
     <template #clientIpAddress="{ row }">
       <Tag v-if="row.extraProperties?.Location" color="blue">
         {{ row.extraProperties?.Location }}
diff --git a/apps/vben5/packages/@abp/auditing/src/components/entity-changes/EntityChangeDrawer.vue b/apps/vben5/packages/@abp/auditing/src/components/entity-changes/EntityChangeDrawer.vue
index a01b23883..5c45fab63 100644
--- a/apps/vben5/packages/@abp/auditing/src/components/entity-changes/EntityChangeDrawer.vue
+++ b/apps/vben5/packages/@abp/auditing/src/components/entity-changes/EntityChangeDrawer.vue
@@ -9,11 +9,16 @@ import { ref } from 'vue';
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { getListWithUsernameApi } from '../../api/entity-changes';
+import { useEntityChangesApi } from '../../api/useEntityChangesApi';
 import EntityChangeTable from '../entity-changes/EntityChangeTable.vue';
 
 const entityChanges = ref<EntityChangeDto[]>([]);
 
+interface State extends EntityChangeGetWithUsernameInput {
+  subject?: string;
+}
+
+const { getListWithUsernameApi } = useEntityChangesApi();
 const [Drawer, drawerApi] = useVbenDrawer({
   class: 'w-auto',
   onCancel() {
@@ -21,16 +26,22 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
   onConfirm: async () => {},
   onOpenChange: async (isOpen: boolean) => {
+    let title = $t('AbpAuditLogging.EntitiesChanged');
     if (isOpen) {
-      const input = drawerApi.getData<EntityChangeGetWithUsernameInput>();
-      const { items } = await getListWithUsernameApi(input);
+      const state = drawerApi.getData<State>();
+      const { items } = await getListWithUsernameApi({
+        entityId: state.entityId,
+        entityTypeFullName: state.entityTypeFullName,
+      });
       entityChanges.value = items.map((item) => {
         return {
           ...item.entityChange,
           userName: item.userName,
         };
       });
+      state.subject && (title += ` - ${state.subject}`);
     }
+    drawerApi.setState({ title });
   },
   title: $t('AbpAuditLogging.EntitiesChanged'),
 });
diff --git a/apps/vben5/packages/@abp/auditing/src/types/audit-logs.ts b/apps/vben5/packages/@abp/auditing/src/types/audit-logs.ts
index 58c1ab751..ce54b99ad 100644
--- a/apps/vben5/packages/@abp/auditing/src/types/audit-logs.ts
+++ b/apps/vben5/packages/@abp/auditing/src/types/audit-logs.ts
@@ -16,6 +16,10 @@ interface Action {
   serviceName?: string;
 }
 
+interface AuditLogDeleteManyInput {
+  ids: string[];
+}
+
 interface AuditLogDto {
   [key: string]: any;
   actions?: Action[];
@@ -59,4 +63,9 @@ interface AuditLogGetListInput extends PagedAndSortedResultRequestDto {
   userName?: string;
 }
 
-export type { Action, AuditLogDto, AuditLogGetListInput };
+export type {
+  Action,
+  AuditLogDeleteManyInput,
+  AuditLogDto,
+  AuditLogGetListInput,
+};
diff --git a/apps/vben5/packages/@abp/identity/src/api/useSecurityLogsApi.ts b/apps/vben5/packages/@abp/identity/src/api/useSecurityLogsApi.ts
index 3bb99497b..27902c3b5 100644
--- a/apps/vben5/packages/@abp/identity/src/api/useSecurityLogsApi.ts
+++ b/apps/vben5/packages/@abp/identity/src/api/useSecurityLogsApi.ts
@@ -2,6 +2,7 @@ import type { PagedResultDto } from '@abp/core';
 
 import type {
   GetSecurityLogPagedRequest,
+  SecurityLogDeleteManyInput,
   SecurityLogDto,
 } from '../types/security-logs';
 
@@ -20,6 +21,17 @@ export function useSecurityLogsApi() {
     });
   }
 
+  /**
+   * 批量删除安全日志
+   * @param input 参数
+   */
+  function deleteManyApi(input: SecurityLogDeleteManyInput): Promise<void> {
+    return request(`/api/auditing/security-log/bulk`, {
+      data: input,
+      method: 'DELETE',
+    });
+  }
+
   /**
    * 查询安全日志
    * @param id id
@@ -51,6 +63,7 @@ export function useSecurityLogsApi() {
   return {
     cancel,
     deleteApi,
+    deleteManyApi,
     getApi,
     getPagedListApi,
   };
diff --git a/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeModal.vue b/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeModal.vue
index 17ed126ba..b232f40d4 100644
--- a/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeModal.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeModal.vue
@@ -85,6 +85,7 @@ const [Modal, modalApi] = useVbenModal({
     if (isOpen) {
       formModel.value = { ...defaultModel };
       modalApi.setState({
+        showConfirmButton: false,
         title: $t('AbpIdentity.IdentityClaim:New'),
       });
       const claimTypeDto = modalApi.getData<IdentityClaimTypeDto>();
@@ -94,11 +95,16 @@ const [Modal, modalApi] = useVbenModal({
           const dto = await getApi(claimTypeDto.id);
           formModel.value = dto;
           modalApi.setState({
+            showConfirmButton: !dto.isStatic,
             title: `${$t('AbpIdentity.DisplayName:ClaimType')} - ${dto.name}`,
           });
         } finally {
           modalApi.setState({ loading: false });
         }
+      } else {
+        modalApi.setState({
+          showConfirmButton: true,
+        });
       }
     }
   },
@@ -119,22 +125,29 @@ const [Modal, modalApi] = useVbenModal({
         name="name"
         required
       >
-        <Input v-model:value="formModel.name" />
+        <Input v-model:value="formModel.name" :disabled="formModel.isStatic" />
       </FormItem>
       <FormItem :label="$t('AbpIdentity.IdentityClaim:Required')">
-        <Checkbox v-model:checked="formModel.required">
+        <Checkbox
+          v-model:checked="formModel.required"
+          :disabled="formModel.isStatic"
+        >
           {{ $t('AbpIdentity.IdentityClaim:Required') }}
         </Checkbox>
       </FormItem>
       <FormItem :label="$t('AbpIdentity.IdentityClaim:Regex')">
-        <Input v-model:value="formModel.regex" />
+        <Input v-model:value="formModel.regex" :disabled="formModel.isStatic" />
       </FormItem>
       <FormItem :label="$t('AbpIdentity.IdentityClaim:RegexDescription')">
-        <Input v-model:value="formModel.regexDescription" />
+        <Input
+          v-model:value="formModel.regexDescription"
+          :disabled="formModel.isStatic"
+        />
       </FormItem>
       <FormItem :label="$t('AbpIdentity.IdentityClaim:ValueType')">
         <Select
           v-model:value="formModel.valueType"
+          :disabled="formModel.isStatic"
           :options="valueTypeOptions"
         />
       </FormItem>
@@ -142,6 +155,7 @@ const [Modal, modalApi] = useVbenModal({
         <Textarea
           v-model:value="formModel.description"
           :auto-size="{ minRows: 2 }"
+          :disabled="formModel.isStatic"
         />
       </FormItem>
     </Form>
diff --git a/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeTable.vue b/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeTable.vue
index 6a8ba2ae9..752596e27 100644
--- a/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeTable.vue
@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { IdentityClaimTypeDto } from '../../types/claim-types';
 
 import { defineAsyncComponent, h } from 'vue';
 
 import { useAccess } from '@vben/access';
-import { useVbenModal } from '@vben/common-ui';
+import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
+import { AuditLogPermissions, EntityChangeDrawer } from '@abp/auditing';
 import { useVbenVxeGrid } from '@abp/ui';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
-import { Button, message, Modal } from 'ant-design-vue';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+} from '@ant-design/icons-vue';
+import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
 
 import { useClaimTypesApi } from '../../api/useClaimTypesApi';
 import { IdentityClaimTypePermissions } from '../../constants/permissions';
@@ -22,11 +28,13 @@ defineOptions({
   name: 'ClaimTypeTable',
 });
 
+const MenuItem = Menu.Item;
 const ClaimTypeModal = defineAsyncComponent(
   () => import('./ClaimTypeModal.vue'),
 );
 const CheckIcon = createIconifyIcon('ant-design:check-outlined');
 const CloseIcon = createIconifyIcon('ant-design:close-outlined');
+const AuditLogIcon = createIconifyIcon('fluent-mdl2:compliance-audit');
 
 const { hasAccessByCodes } = useAccess();
 const { cancel, deleteApi, getPagedListApi } = useClaimTypesApi();
@@ -151,18 +159,21 @@ const [Grid, { query }] = useVbenVxeGrid({
   gridEvents,
   gridOptions,
 });
+const [ClaimTypeChangeDrawer, roleChangeDrawerApi] = useVbenDrawer({
+  connectedComponent: EntityChangeDrawer,
+});
 
-const handleAdd = () => {
+const onCreate = () => {
   roleModalApi.setData({});
   roleModalApi.open();
 };
 
-const handleEdit = (row: IdentityClaimTypeDto) => {
+const onUpdate = (row: IdentityClaimTypeDto) => {
   roleModalApi.setData(row);
   roleModalApi.open();
 };
 
-const handleDelete = (row: IdentityClaimTypeDto) => {
+const onDelete = (row: IdentityClaimTypeDto) => {
   Modal.confirm({
     centered: true,
     content: $t('AbpIdentity.WillDeleteClaim', [row.name]),
@@ -177,6 +188,20 @@ const handleDelete = (row: IdentityClaimTypeDto) => {
     title: $t('AbpUi.AreYouSure'),
   });
 };
+
+const onMenuClick = (row: IdentityClaimTypeDto, info: MenuInfo) => {
+  switch (info.key) {
+    case 'entity-changes': {
+      roleChangeDrawerApi.setData({
+        entityId: row.id,
+        entityTypeFullName: 'Volo.Abp.Identity.IdentityRole',
+        subject: row.name,
+      });
+      roleChangeDrawerApi.open();
+      break;
+    }
+  }
+};
 </script>
 
 <template>
@@ -185,7 +210,7 @@ const handleDelete = (row: IdentityClaimTypeDto) => {
       <Button
         type="primary"
         v-access:code="[IdentityClaimTypePermissions.Create]"
-        @click="handleAdd"
+        @click="onCreate"
       >
         {{ $t('AbpIdentity.IdentityClaim:New') }}
       </Button>
@@ -204,33 +229,45 @@ const handleDelete = (row: IdentityClaimTypeDto) => {
     </template>
     <template #action="{ row }">
       <div class="flex flex-row">
-        <div class="basis-1/2">
-          <Button
-            :icon="h(EditOutlined)"
-            block
-            type="link"
-            v-access:code="[IdentityClaimTypePermissions.Update]"
-            @click="handleEdit(row)"
-          >
-            {{ $t('AbpUi.Edit') }}
-          </Button>
-        </div>
-        <div class="basis-1/2">
-          <Button
-            :icon="h(DeleteOutlined)"
-            block
-            danger
-            type="link"
-            v-access:code="[IdentityClaimTypePermissions.Delete]"
-            @click="handleDelete(row)"
-          >
-            {{ $t('AbpUi.Delete') }}
-          </Button>
-        </div>
+        <Button
+          :icon="h(EditOutlined)"
+          block
+          type="link"
+          v-access:code="[IdentityClaimTypePermissions.Update]"
+          @click="onUpdate(row)"
+        >
+          {{ $t('AbpUi.Edit') }}
+        </Button>
+        <Button
+          v-if="row.isStatic === false"
+          :icon="h(DeleteOutlined)"
+          block
+          danger
+          type="link"
+          v-access:code="[IdentityClaimTypePermissions.Delete]"
+          @click="onDelete(row)"
+        >
+          {{ $t('AbpUi.Delete') }}
+        </Button>
+        <Dropdown>
+          <template #overlay>
+            <Menu @click="(info) => onMenuClick(row, info)">
+              <MenuItem
+                v-if="hasAccessByCodes([AuditLogPermissions.Default])"
+                key="entity-changes"
+                :icon="h(AuditLogIcon)"
+              >
+                {{ $t('AbpAuditLogging.EntitiesChanged') }}
+              </MenuItem>
+            </Menu>
+          </template>
+          <Button :icon="h(EllipsisOutlined)" type="link" />
+        </Dropdown>
       </div>
     </template>
   </Grid>
   <ClaimTypeEditModal @change="() => query()" />
+  <ClaimTypeChangeDrawer />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/apps/vben5/packages/@abp/identity/src/components/roles/RoleClaimModal.vue b/apps/vben5/packages/@abp/identity/src/components/roles/RoleClaimModal.vue
index 417745deb..41c259989 100644
--- a/apps/vben5/packages/@abp/identity/src/components/roles/RoleClaimModal.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/roles/RoleClaimModal.vue
@@ -33,7 +33,14 @@ const [Modal, modalApi] = useVbenModal({
   onClosed() {
     cancel('Role Claim modal has closed!');
   },
-  onConfirm: async () => {},
+  onOpenChange(isOpen) {
+    let title = $t('AbpIdentity.ManageClaim');
+    if (isOpen) {
+      const { name } = modalApi.getData<IdentityRoleDto>();
+      title += ` - ${name}`;
+    }
+    modalApi.setState({ title });
+  },
   showCancelButton: false,
   showConfirmButton: false,
   title: $t('AbpIdentity.ManageClaim'),
diff --git a/apps/vben5/packages/@abp/identity/src/components/roles/RoleModal.vue b/apps/vben5/packages/@abp/identity/src/components/roles/RoleModal.vue
index b4739a371..a0e810397 100644
--- a/apps/vben5/packages/@abp/identity/src/components/roles/RoleModal.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/roles/RoleModal.vue
@@ -60,6 +60,7 @@ const [Modal, modalApi] = useVbenModal({
     if (isOpen) {
       formModel.value = { ...defaultModel };
       modalApi.setState({
+        showConfirmButton: false,
         title: $t('AbpIdentity.NewRole'),
       });
       const roleDto = modalApi.getData<IdentityRoleDto>();
@@ -69,11 +70,16 @@ const [Modal, modalApi] = useVbenModal({
           const dto = await getApi(roleDto.id);
           formModel.value = dto;
           modalApi.setState({
+            showConfirmButton: !dto.isStatic,
             title: $t('AbpIdentity.RoleSubject', [dto.name]),
           });
         } finally {
           modalApi.setState({ loading: false });
         }
+      } else {
+        modalApi.setState({
+          showConfirmButton: true,
+        });
       }
     }
   },
@@ -90,12 +96,18 @@ const [Modal, modalApi] = useVbenModal({
       :wrapper-col="{ span: 18 }"
     >
       <FormItem :label="$t('AbpIdentity.DisplayName:IsDefault')">
-        <Checkbox v-model:checked="formModel.isDefault">
+        <Checkbox
+          v-model:checked="formModel.isDefault"
+          :disabled="formModel.isStatic"
+        >
           {{ $t('AbpIdentity.DisplayName:IsDefault') }}
         </Checkbox>
       </FormItem>
       <FormItem :label="$t('AbpIdentity.DisplayName:IsPublic')">
-        <Checkbox v-model:checked="formModel.isPublic">
+        <Checkbox
+          v-model:checked="formModel.isPublic"
+          :disabled="formModel.isStatic"
+        >
           {{ $t('AbpIdentity.DisplayName:IsPublic') }}
         </Checkbox>
       </FormItem>
@@ -104,7 +116,7 @@ const [Modal, modalApi] = useVbenModal({
         name="name"
         required
       >
-        <Input v-model:value="formModel.name" />
+        <Input v-model:value="formModel.name" :disabled="formModel.isStatic" />
       </FormItem>
     </Form>
   </Modal>
diff --git a/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue b/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
index 699d037e6..5d0be7aed 100644
--- a/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
@@ -159,6 +159,7 @@ const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
       roleChangeDrawerApi.setData({
         entityId: row.id,
         entityTypeFullName: 'Volo.Abp.Identity.IdentityRole',
+        subject: row.name,
       });
       roleChangeDrawerApi.open();
       break;
@@ -203,72 +204,63 @@ const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
     </template>
     <template #action="{ row }">
       <div class="flex flex-row">
-        <div class="basis-1/3">
-          <Button
-            :icon="h(EditOutlined)"
-            block
-            type="link"
-            v-access:code="[IdentityRolePermissions.Update]"
-            @click="handleEdit(row)"
-          >
-            {{ $t('AbpUi.Edit') }}
-          </Button>
-        </div>
-        <div class="basis-1/3">
-          <Button
-            :icon="h(DeleteOutlined)"
-            block
-            danger
-            type="link"
-            v-access:code="[IdentityRolePermissions.Delete]"
-            @click="handleDelete(row)"
-          >
-            {{ $t('AbpUi.Delete') }}
-          </Button>
-        </div>
-        <div class="basis-1/3">
-          <Dropdown>
-            <template #overlay>
-              <Menu @click="(info) => handleMenuClick(row, info)">
-                <MenuItem
-                  v-if="
-                    hasAccessByCodes([
-                      IdentityRolePermissions.ManagePermissions,
-                    ])
-                  "
-                  key="permissions"
-                  :icon="h(PermissionsOutlined)"
-                >
-                  {{ $t('AbpPermissionManagement.Permissions') }}
-                </MenuItem>
-                <MenuItem
-                  v-if="
-                    hasAccessByCodes([IdentityRolePermissions.ManageClaims])
-                  "
-                  key="claims"
-                  :icon="h(ClaimOutlined)"
-                >
-                  {{ $t('AbpIdentity.ManageClaim') }}
-                </MenuItem>
-                <MenuItem
-                  v-if="hasAccessByCodes(['Platform.Menu.ManageRoles'])"
-                  key="menus"
-                  :icon="h(MenuOutlined)"
-                >
-                  {{ $t('AppPlatform.Menu:Manage') }}
-                </MenuItem>
-                <MenuItem
-                  v-if="hasAccessByCodes([AuditLogPermissions.Default])"
-                  key="entity-changes"
-                  :icon="h(AuditLogIcon)"
-                >
-                  {{ $t('AbpAuditLogging.EntitiesChanged') }}
-                </MenuItem>
-              </Menu>
-            </template>
-            <Button :icon="h(EllipsisOutlined)" type="link" />
-          </Dropdown>
-        </div>
+        <Button
+          :icon="h(EditOutlined)"
+          block
+          type="link"
+          v-access:code="[IdentityRolePermissions.Update]"
+          @click="handleEdit(row)"
+        >
+          {{ $t('AbpUi.Edit') }}
+        </Button>
+        <Button
+          v-if="row.isStatic === false"
+          :icon="h(DeleteOutlined)"
+          block
+          danger
+          type="link"
+          v-access:code="[IdentityRolePermissions.Delete]"
+          @click="handleDelete(row)"
+        >
+          {{ $t('AbpUi.Delete') }}
+        </Button>
+        <Dropdown>
+          <template #overlay>
+            <Menu @click="(info) => handleMenuClick(row, info)">
+              <MenuItem
+                v-if="
+                  hasAccessByCodes([IdentityRolePermissions.ManagePermissions])
+                "
+                key="permissions"
+                :icon="h(PermissionsOutlined)"
+              >
+                {{ $t('AbpPermissionManagement.Permissions') }}
+              </MenuItem>
+              <MenuItem
+                v-if="hasAccessByCodes([IdentityRolePermissions.ManageClaims])"
+                key="claims"
+                :icon="h(ClaimOutlined)"
+              >
+                {{ $t('AbpIdentity.ManageClaim') }}
+              </MenuItem>
+              <MenuItem
+                v-if="hasAccessByCodes(['Platform.Menu.ManageRoles'])"
+                key="menus"
+                :icon="h(MenuOutlined)"
+              >
+                {{ $t('AppPlatform.Menu:Manage') }}
+              </MenuItem>
+              <MenuItem
+                v-if="hasAccessByCodes([AuditLogPermissions.Default])"
+                key="entity-changes"
+                :icon="h(AuditLogIcon)"
+              >
+                {{ $t('AbpAuditLogging.EntitiesChanged') }}
+              </MenuItem>
+            </Menu>
+          </template>
+          <Button :icon="h(EllipsisOutlined)" type="link" />
+        </Dropdown>
       </div>
     </template>
   </Grid>
diff --git a/apps/vben5/packages/@abp/identity/src/components/security-logs/SecurityLogTable.vue b/apps/vben5/packages/@abp/identity/src/components/security-logs/SecurityLogTable.vue
index 4cf9b08d0..452c75d52 100644
--- a/apps/vben5/packages/@abp/identity/src/components/security-logs/SecurityLogTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/security-logs/SecurityLogTable.vue
@@ -3,7 +3,7 @@ import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui';
 
 import type { SecurityLogDto } from '../../types/security-logs';
 
-import { defineAsyncComponent, h } from 'vue';
+import { defineAsyncComponent, h, ref, toValue } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -20,7 +20,10 @@ defineOptions({
   name: 'SecurityLogTable',
 });
 
-const { cancel, deleteApi, getPagedListApi } = useSecurityLogsApi();
+const { cancel, deleteApi, deleteManyApi, getPagedListApi } =
+  useSecurityLogsApi();
+
+const selectedKeys = ref<string[]>([]);
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
@@ -72,6 +75,10 @@ const formOptions: VbenFormProps = {
 
 const gridOptions: VxeGridProps<SecurityLogDto> = {
   columns: [
+    {
+      align: 'center',
+      type: 'checkbox',
+    },
     {
       align: 'left',
       field: 'creationTime',
@@ -144,7 +151,7 @@ const gridOptions: VxeGridProps<SecurityLogDto> = {
       field: 'browserInfo',
       sortable: true,
       title: $t('AbpAuditLogging.BrowserInfo'),
-      width: 'auto',
+      width: 500,
     },
     {
       field: 'actions',
@@ -181,6 +188,12 @@ const gridOptions: VxeGridProps<SecurityLogDto> = {
 };
 
 const gridEvents: VxeGridListeners<SecurityLogDto> = {
+  checkboxAll: (params) => {
+    selectedKeys.value = params.records.map((x) => x.id);
+  },
+  checkboxChange: (params) => {
+    selectedKeys.value = params.records.map((x) => x.id);
+  },
   sortChange: onSort,
 };
 
@@ -216,6 +229,22 @@ function onDelete(row: SecurityLogDto) {
   });
 }
 
+function onBulkDelete() {
+  Modal.confirm({
+    centered: true,
+    content: $t('component.table.selectedItemWellBeDeleted'),
+    onOk: async () => {
+      await deleteManyApi({
+        ids: toValue(selectedKeys),
+      });
+      selectedKeys.value = [];
+      message.success($t('AbpUi.SuccessfullyDeleted'));
+      gridApi.query();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+
 function onSort(params: { field: string; order: SortOrder }) {
   const sorting = params.order ? `${params.field} ${params.order}` : undefined;
   gridApi.query({ sorting });
@@ -224,6 +253,19 @@ function onSort(params: { field: string; order: SortOrder }) {
 
 <template>
   <Grid :table-title="$t('AbpAuditLogging.SecurityLog')">
+    <template #toolbar-tools>
+      <Button
+        v-if="selectedKeys.length > 0"
+        :icon="h(DeleteOutlined)"
+        danger
+        ghost
+        type="primary"
+        v-access:code="[SecurityLogPermissions.Delete]"
+        @click="onBulkDelete"
+      >
+        {{ $t('AbpUi.Delete') }}
+      </Button>
+    </template>
     <template #clientIpAddress="{ row }">
       <Tag v-if="row.extraProperties?.Location" color="blue">
         {{ row.extraProperties?.Location }}
diff --git a/apps/vben5/packages/@abp/identity/src/components/users/UserClaimModal.vue b/apps/vben5/packages/@abp/identity/src/components/users/UserClaimModal.vue
index 225128272..ceb242813 100644
--- a/apps/vben5/packages/@abp/identity/src/components/users/UserClaimModal.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/users/UserClaimModal.vue
@@ -33,6 +33,14 @@ const [Modal, modalApi] = useVbenModal({
   onClosed() {
     cancel('User claim modal has closed!');
   },
+  onOpenChange(isOpen) {
+    let title = $t('AbpIdentity.ManageClaim');
+    if (isOpen) {
+      const { userName } = modalApi.getData<IdentityUserDto>();
+      title += ` - ${userName}`;
+    }
+    modalApi.setState({ title });
+  },
   showCancelButton: false,
   showConfirmButton: false,
   title: $t('AbpIdentity.ManageClaim'),
diff --git a/apps/vben5/packages/@abp/identity/src/components/users/UserLockModal.vue b/apps/vben5/packages/@abp/identity/src/components/users/UserLockModal.vue
index 0ce100a9c..8ed85b1b0 100644
--- a/apps/vben5/packages/@abp/identity/src/components/users/UserLockModal.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/users/UserLockModal.vue
@@ -1,5 +1,7 @@
 <!-- eslint-disable no-unused-vars -->
 <script setup lang="ts">
+import type { IdentityUserDto } from '../../types/users';
+
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
@@ -53,12 +55,18 @@ const [Form, formApi] = useVbenForm({
       componentProps: {
         options: [
           // TODO: 本地化
-          { label: $t('LockType:Seconds'), value: LockType.Seconds },
-          { label: $t('LockType:Minutes'), value: LockType.Minutes },
-          { label: $t('LockType:Hours'), value: LockType.Hours },
-          { label: $t('LockType:Days'), value: LockType.Days },
-          { label: $t('LockType:Months'), value: LockType.Months },
-          { label: $t('LockType:Years'), value: LockType.Years },
+          {
+            label: $t('AbpIdentity.LockType:Seconds'),
+            value: LockType.Seconds,
+          },
+          {
+            label: $t('AbpIdentity.LockType:Minutes'),
+            value: LockType.Minutes,
+          },
+          { label: $t('AbpIdentity.LockType:Hours'), value: LockType.Hours },
+          { label: $t('AbpIdentity.LockType:Days'), value: LockType.Days },
+          { label: $t('AbpIdentity.LockType:Months'), value: LockType.Months },
+          { label: $t('AbpIdentity.LockType:Years'), value: LockType.Years },
         ],
       },
       defaultValue: LockType.Seconds,
@@ -85,12 +93,15 @@ const [Modal, modalApi] = useVbenModal({
     await formApi.validateAndSubmitForm();
   },
   async onOpenChange(isOpen: boolean) {
+    let title = $t('AbpIdentity.Lock');
     if (isOpen) {
-      const { id } = modalApi.getData<Record<string, any>>();
+      const { id, userName } = modalApi.getData<IdentityUserDto>();
+      title += ` - ${userName}`;
       formApi.setValues({
         userId: id,
       });
     }
+    modalApi.setState({ title });
   },
   title: $t('AbpIdentity.Lock'),
 });
diff --git a/apps/vben5/packages/@abp/identity/src/components/users/UserPasswordModal.vue b/apps/vben5/packages/@abp/identity/src/components/users/UserPasswordModal.vue
index 25eb9fd13..bd6a3fe6b 100644
--- a/apps/vben5/packages/@abp/identity/src/components/users/UserPasswordModal.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/users/UserPasswordModal.vue
@@ -1,5 +1,7 @@
 <!-- eslint-disable no-unused-vars -->
 <script setup lang="ts">
+import type { IdentityUserDto } from '../../types/users';
+
 import { h } from 'vue';
 
 import { useVbenForm, useVbenModal } from '@vben/common-ui';
@@ -74,11 +76,19 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.setState({ confirmLoading: false });
     }
   },
+  onOpenChange(isOpen) {
+    let title = $t('AbpIdentity.SetPassword');
+    if (isOpen) {
+      const { userName } = modalApi.getData<IdentityUserDto>();
+      title += ` - ${userName}`;
+    }
+    modalApi.setState({ title });
+  },
   title: $t('AbpIdentity.SetPassword'),
 });
 
 async function onSubmit(input: Record<string, any>) {
-  const { id } = modalApi.getData<Record<string, any>>();
+  const { id } = modalApi.getData<IdentityUserDto>();
   await changePasswordApi(id, { password: input.password });
   message.success($t('AbpUi.SavedSuccessfully'));
   emits('change');
diff --git a/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue b/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue
index ff3059d12..25b95ec6e 100644
--- a/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue
@@ -213,6 +213,7 @@ const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
       userChangeDrawerApi.setData({
         entityId: row.id,
         entityTypeFullName: 'Volo.Abp.Identity.IdentityUser',
+        subject: row.userName,
       });
       userChangeDrawerApi.open();
       break;
diff --git a/apps/vben5/packages/@abp/identity/src/types/security-logs.ts b/apps/vben5/packages/@abp/identity/src/types/security-logs.ts
index 18713989e..c687edf06 100644
--- a/apps/vben5/packages/@abp/identity/src/types/security-logs.ts
+++ b/apps/vben5/packages/@abp/identity/src/types/security-logs.ts
@@ -30,4 +30,12 @@ interface GetSecurityLogPagedRequest extends PagedAndSortedResultRequestDto {
   userName?: string;
 }
 
-export type { GetSecurityLogPagedRequest, SecurityLogDto };
+interface SecurityLogDeleteManyInput {
+  ids: string[];
+}
+
+export type {
+  GetSecurityLogPagedRequest,
+  SecurityLogDeleteManyInput,
+  SecurityLogDto,
+};
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/applications.ts b/apps/vben5/packages/@abp/openiddict/src/api/applications.ts
deleted file mode 100644
index 43aff5d92..000000000
--- a/apps/vben5/packages/@abp/openiddict/src/api/applications.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { PagedResultDto } from '@abp/core';
-
-import type {
-  OpenIddictApplicationCreateDto,
-  OpenIddictApplicationDto,
-  OpenIddictApplicationGetListInput,
-  OpenIddictApplicationUpdateDto,
-} from '../types/applications';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 新增应用
- * @param input 参数
- * @returns 应用实体数据传输对象
- */
-export function createApi(
-  input: OpenIddictApplicationCreateDto,
-): Promise<OpenIddictApplicationDto> {
-  return requestClient.post<OpenIddictApplicationDto>(
-    '/api/openiddict/applications',
-    input,
-  );
-}
-
-/**
- * 删除应用
- * @param id 应用id
- */
-export function deleteApi(id: string): Promise<void> {
-  return requestClient.delete(`/api/openiddict/applications/${id}`);
-}
-
-/**
- * 查询应用
- * @param id 应用id
- * @returns 应用实体数据传输对象
- */
-export function getApi(id: string): Promise<OpenIddictApplicationDto> {
-  return requestClient.get<OpenIddictApplicationDto>(
-    `/api/openiddict/applications/${id}`,
-  );
-}
-
-/**
- * 更新应用
- * @param id 应用id
- * @returns 应用实体数据传输对象
- */
-export function updateApi(
-  id: string,
-  input: OpenIddictApplicationUpdateDto,
-): Promise<OpenIddictApplicationDto> {
-  return requestClient.put<OpenIddictApplicationDto>(
-    `/api/openiddict/applications/${id}`,
-    input,
-  );
-}
-
-/**
- * 查询应用分页列表
- * @param input 过滤参数
- * @returns 应用实体数据传输对象分页列表
- */
-export function getPagedListApi(
-  input?: OpenIddictApplicationGetListInput,
-): Promise<PagedResultDto<OpenIddictApplicationDto>> {
-  return requestClient.get<PagedResultDto<OpenIddictApplicationDto>>(
-    `/api/openiddict/applications`,
-    {
-      params: input,
-    },
-  );
-}
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/authorizations.ts b/apps/vben5/packages/@abp/openiddict/src/api/authorizations.ts
deleted file mode 100644
index 94540540d..000000000
--- a/apps/vben5/packages/@abp/openiddict/src/api/authorizations.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { PagedResultDto } from '@abp/core';
-
-import type {
-  OpenIddictAuthorizationDto,
-  OpenIddictAuthorizationGetListInput,
-} from '../types/authorizations';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 删除授权
- * @param id 授权id
- */
-export function deleteApi(id: string): Promise<void> {
-  return requestClient.delete(`/api/openiddict/authorizations/${id}`);
-}
-
-/**
- * 查询授权
- * @param id 授权id
- * @returns 授权实体数据传输对象
- */
-export function getApi(id: string): Promise<OpenIddictAuthorizationDto> {
-  return requestClient.get<OpenIddictAuthorizationDto>(
-    `/api/openiddict/authorizations/${id}`,
-  );
-}
-
-/**
- * 查询授权分页列表
- * @param input 过滤参数
- * @returns 授权实体数据传输对象分页列表
- */
-export function getPagedListApi(
-  input?: OpenIddictAuthorizationGetListInput,
-): Promise<PagedResultDto<OpenIddictAuthorizationDto>> {
-  return requestClient.get<PagedResultDto<OpenIddictAuthorizationDto>>(
-    `/api/openiddict/authorizations`,
-    {
-      params: input,
-    },
-  );
-}
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/index.ts b/apps/vben5/packages/@abp/openiddict/src/api/index.ts
index 620ac6955..8565126b7 100644
--- a/apps/vben5/packages/@abp/openiddict/src/api/index.ts
+++ b/apps/vben5/packages/@abp/openiddict/src/api/index.ts
@@ -1,4 +1,4 @@
-export * as applicationsApi from './applications';
-export * as authorizationsApi from './authorizations';
-export * as scopesApi from './scopes';
-export * as tokensApi from './tokens';
+export { useApplicationsApi } from './useApplicationsApi';
+export { useAuthorizationsApi } from './useAuthorizationsApi';
+export { useScopesApi } from './useScopesApi';
+export { useTokensApi } from './useTokensApi';
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/openid.ts b/apps/vben5/packages/@abp/openiddict/src/api/openid.ts
deleted file mode 100644
index b9eec4dc6..000000000
--- a/apps/vben5/packages/@abp/openiddict/src/api/openid.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { OpenIdConfiguration } from '@abp/core';
-
-import { requestClient } from '@abp/request';
-
-/**
- * openid发现端点
- * @returns OpenId配置数据
- */
-export function discoveryApi(): Promise<OpenIdConfiguration> {
-  return requestClient.get<OpenIdConfiguration>(
-    '/.well-known/openid-configuration',
-  );
-}
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/scopes.ts b/apps/vben5/packages/@abp/openiddict/src/api/scopes.ts
deleted file mode 100644
index db1dd2f29..000000000
--- a/apps/vben5/packages/@abp/openiddict/src/api/scopes.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { PagedResultDto } from '@abp/core';
-
-import type {
-  OpenIddictScopeCreateDto,
-  OpenIddictScopeDto,
-  OpenIddictScopeGetListInput,
-  OpenIddictScopeUpdateDto,
-} from '../types/scopes';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 新增范围
- * @param input 参数
- * @returns 范围实体数据传输对象
- */
-export function createApi(
-  input: OpenIddictScopeCreateDto,
-): Promise<OpenIddictScopeDto> {
-  return requestClient.post<OpenIddictScopeDto>(
-    '/api/openiddict/scopes',
-    input,
-  );
-}
-
-/**
- * 删除范围
- * @param id 范围id
- */
-export function deleteApi(id: string): Promise<void> {
-  return requestClient.delete(`/api/openiddict/scopes/${id}`);
-}
-
-/**
- * 查询范围
- * @param id 范围id
- * @returns 范围实体数据传输对象
- */
-export function getApi(id: string): Promise<OpenIddictScopeDto> {
-  return requestClient.get<OpenIddictScopeDto>(`/api/openiddict/scopes/${id}`);
-}
-
-/**
- * 更新范围
- * @param id 范围id
- * @returns 范围实体数据传输对象
- */
-export function updateApi(
-  id: string,
-  input: OpenIddictScopeUpdateDto,
-): Promise<OpenIddictScopeDto> {
-  return requestClient.put<OpenIddictScopeDto>(
-    `/api/openiddict/scopes/${id}`,
-    input,
-  );
-}
-
-/**
- * 查询范围分页列表
- * @param input 过滤参数
- * @returns 范围实体数据传输对象分页列表
- */
-export function getPagedListApi(
-  input?: OpenIddictScopeGetListInput,
-): Promise<PagedResultDto<OpenIddictScopeDto>> {
-  return requestClient.get<PagedResultDto<OpenIddictScopeDto>>(
-    `/api/openiddict/scopes`,
-    {
-      params: input,
-    },
-  );
-}
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/tokens.ts b/apps/vben5/packages/@abp/openiddict/src/api/tokens.ts
deleted file mode 100644
index 1927d80a6..000000000
--- a/apps/vben5/packages/@abp/openiddict/src/api/tokens.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { PagedResultDto } from '@abp/core';
-
-import type {
-  OpenIddictTokenDto,
-  OpenIddictTokenGetListInput,
-} from '../types/tokens';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 删除令牌
- * @param id 令牌id
- */
-export function deleteApi(id: string): Promise<void> {
-  return requestClient.delete(`/api/openiddict/tokens/${id}`);
-}
-
-/**
- * 查询令牌
- * @param id 令牌id
- * @returns 令牌实体数据传输对象
- */
-export function getApi(id: string): Promise<OpenIddictTokenDto> {
-  return requestClient.get<OpenIddictTokenDto>(`/api/openiddict/tokens/${id}`);
-}
-
-/**
- * 查询令牌分页列表
- * @param input 过滤参数
- * @returns 令牌实体数据传输对象分页列表
- */
-export function getPagedListApi(
-  input?: OpenIddictTokenGetListInput,
-): Promise<PagedResultDto<OpenIddictTokenDto>> {
-  return requestClient.get<PagedResultDto<OpenIddictTokenDto>>(
-    `/api/openiddict/tokens`,
-    {
-      params: input,
-    },
-  );
-}
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/useApplicationsApi.ts b/apps/vben5/packages/@abp/openiddict/src/api/useApplicationsApi.ts
new file mode 100644
index 000000000..b7f0312da
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/api/useApplicationsApi.ts
@@ -0,0 +1,95 @@
+import type { PagedResultDto } from '@abp/core';
+
+import type {
+  OpenIddictApplicationCreateDto,
+  OpenIddictApplicationDto,
+  OpenIddictApplicationGetListInput,
+  OpenIddictApplicationUpdateDto,
+} from '../types/applications';
+
+import { useRequest } from '@abp/request';
+
+export function useApplicationsApi() {
+  const { cancel, request } = useRequest();
+  /**
+   * 新增应用
+   * @param input 参数
+   * @returns 应用实体数据传输对象
+   */
+  function createApi(
+    input: OpenIddictApplicationCreateDto,
+  ): Promise<OpenIddictApplicationDto> {
+    return request<OpenIddictApplicationDto>('/api/openiddict/applications', {
+      data: input,
+      method: 'POST',
+    });
+  }
+
+  /**
+   * 删除应用
+   * @param id 应用id
+   */
+  function deleteApi(id: string): Promise<void> {
+    return request(`/api/openiddict/applications/${id}`, {
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * 查询应用
+   * @param id 应用id
+   * @returns 应用实体数据传输对象
+   */
+  function getApi(id: string): Promise<OpenIddictApplicationDto> {
+    return request<OpenIddictApplicationDto>(
+      `/api/openiddict/applications/${id}`,
+      {
+        method: 'GET',
+      },
+    );
+  }
+
+  /**
+   * 更新应用
+   * @param id 应用id
+   * @returns 应用实体数据传输对象
+   */
+  function updateApi(
+    id: string,
+    input: OpenIddictApplicationUpdateDto,
+  ): Promise<OpenIddictApplicationDto> {
+    return request<OpenIddictApplicationDto>(
+      `/api/openiddict/applications/${id}`,
+      {
+        data: input,
+        method: 'PUT',
+      },
+    );
+  }
+
+  /**
+   * 查询应用分页列表
+   * @param input 过滤参数
+   * @returns 应用实体数据传输对象分页列表
+   */
+  function getPagedListApi(
+    input?: OpenIddictApplicationGetListInput,
+  ): Promise<PagedResultDto<OpenIddictApplicationDto>> {
+    return request<PagedResultDto<OpenIddictApplicationDto>>(
+      `/api/openiddict/applications`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  return {
+    cancel,
+    createApi,
+    deleteApi,
+    getApi,
+    getPagedListApi,
+    updateApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/useAuthorizationsApi.ts b/apps/vben5/packages/@abp/openiddict/src/api/useAuthorizationsApi.ts
new file mode 100644
index 000000000..37c2e394c
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/api/useAuthorizationsApi.ts
@@ -0,0 +1,60 @@
+import type { PagedResultDto } from '@abp/core';
+
+import type {
+  OpenIddictAuthorizationDto,
+  OpenIddictAuthorizationGetListInput,
+} from '../types/authorizations';
+
+import { useRequest } from '@abp/request';
+
+export function useAuthorizationsApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 删除授权
+   * @param id 授权id
+   */
+  function deleteApi(id: string): Promise<void> {
+    return request(`/api/openiddict/authorizations/${id}`, {
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * 查询授权
+   * @param id 授权id
+   * @returns 授权实体数据传输对象
+   */
+  function getApi(id: string): Promise<OpenIddictAuthorizationDto> {
+    return request<OpenIddictAuthorizationDto>(
+      `/api/openiddict/authorizations/${id}`,
+      {
+        method: 'GET',
+      },
+    );
+  }
+
+  /**
+   * 查询授权分页列表
+   * @param input 过滤参数
+   * @returns 授权实体数据传输对象分页列表
+   */
+  function getPagedListApi(
+    input?: OpenIddictAuthorizationGetListInput,
+  ): Promise<PagedResultDto<OpenIddictAuthorizationDto>> {
+    return request<PagedResultDto<OpenIddictAuthorizationDto>>(
+      `/api/openiddict/authorizations`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  return {
+    cancel,
+    deleteApi,
+    getApi,
+    getPagedListApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/useOpenIdApi.ts b/apps/vben5/packages/@abp/openiddict/src/api/useOpenIdApi.ts
new file mode 100644
index 000000000..333c2f1e0
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/api/useOpenIdApi.ts
@@ -0,0 +1,22 @@
+import type { OpenIdConfiguration } from '@abp/core';
+
+import { useRequest } from '@abp/request';
+
+export function useOpenIdApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * openid发现端点
+   * @returns OpenId配置数据
+   */
+  function discoveryApi(): Promise<OpenIdConfiguration> {
+    return request<OpenIdConfiguration>('/.well-known/openid-configuration', {
+      method: 'GET',
+    });
+  }
+
+  return {
+    cancel,
+    discoveryApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/useScopesApi.ts b/apps/vben5/packages/@abp/openiddict/src/api/useScopesApi.ts
new file mode 100644
index 000000000..76430c07d
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/api/useScopesApi.ts
@@ -0,0 +1,89 @@
+import type { PagedResultDto } from '@abp/core';
+
+import type {
+  OpenIddictScopeCreateDto,
+  OpenIddictScopeDto,
+  OpenIddictScopeGetListInput,
+  OpenIddictScopeUpdateDto,
+} from '../types/scopes';
+
+import { useRequest } from '@abp/request';
+
+export function useScopesApi() {
+  const { cancel, request } = useRequest();
+  /**
+   * 新增范围
+   * @param input 参数
+   * @returns 范围实体数据传输对象
+   */
+  function createApi(
+    input: OpenIddictScopeCreateDto,
+  ): Promise<OpenIddictScopeDto> {
+    return request<OpenIddictScopeDto>('/api/openiddict/scopes', {
+      data: input,
+      method: 'POST',
+    });
+  }
+
+  /**
+   * 删除范围
+   * @param id 范围id
+   */
+  function deleteApi(id: string): Promise<void> {
+    return request(`/api/openiddict/scopes/${id}`, {
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * 查询范围
+   * @param id 范围id
+   * @returns 范围实体数据传输对象
+   */
+  function getApi(id: string): Promise<OpenIddictScopeDto> {
+    return request<OpenIddictScopeDto>(`/api/openiddict/scopes/${id}`, {
+      method: 'GET',
+    });
+  }
+
+  /**
+   * 更新范围
+   * @param id 范围id
+   * @returns 范围实体数据传输对象
+   */
+  function updateApi(
+    id: string,
+    input: OpenIddictScopeUpdateDto,
+  ): Promise<OpenIddictScopeDto> {
+    return request<OpenIddictScopeDto>(`/api/openiddict/scopes/${id}`, {
+      data: input,
+      method: 'PUT',
+    });
+  }
+
+  /**
+   * 查询范围分页列表
+   * @param input 过滤参数
+   * @returns 范围实体数据传输对象分页列表
+   */
+  function getPagedListApi(
+    input?: OpenIddictScopeGetListInput,
+  ): Promise<PagedResultDto<OpenIddictScopeDto>> {
+    return request<PagedResultDto<OpenIddictScopeDto>>(
+      `/api/openiddict/scopes`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  return {
+    cancel,
+    createApi,
+    deleteApi,
+    getApi,
+    getPagedListApi,
+    updateApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/useTokensApi.ts b/apps/vben5/packages/@abp/openiddict/src/api/useTokensApi.ts
new file mode 100644
index 000000000..991549b4a
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/api/useTokensApi.ts
@@ -0,0 +1,57 @@
+import type { PagedResultDto } from '@abp/core';
+
+import type {
+  OpenIddictTokenDto,
+  OpenIddictTokenGetListInput,
+} from '../types/tokens';
+
+import { useRequest } from '@abp/request';
+
+export function useTokensApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 删除令牌
+   * @param id 令牌id
+   */
+  function deleteApi(id: string): Promise<void> {
+    return request(`/api/openiddict/tokens/${id}`, {
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * 查询令牌
+   * @param id 令牌id
+   * @returns 令牌实体数据传输对象
+   */
+  function getApi(id: string): Promise<OpenIddictTokenDto> {
+    return request<OpenIddictTokenDto>(`/api/openiddict/tokens/${id}`, {
+      method: 'GET',
+    });
+  }
+
+  /**
+   * 查询令牌分页列表
+   * @param input 过滤参数
+   * @returns 令牌实体数据传输对象分页列表
+   */
+  function getPagedListApi(
+    input?: OpenIddictTokenGetListInput,
+  ): Promise<PagedResultDto<OpenIddictTokenDto>> {
+    return request<PagedResultDto<OpenIddictTokenDto>>(
+      `/api/openiddict/tokens`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  return {
+    cancel,
+    deleteApi,
+    getApi,
+    getPagedListApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationModal.vue b/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationModal.vue
index 48234d459..81ebe64cd 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationModal.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationModal.vue
@@ -37,8 +37,8 @@ import {
   Transfer,
 } from 'ant-design-vue';
 
-import { createApi, getApi, updateApi } from '../../api/applications';
-import { discoveryApi } from '../../api/openid';
+import { useApplicationsApi } from '../../api/useApplicationsApi';
+import { useOpenIdApi } from '../../api/useOpenIdApi';
 import DisplayNameTable from '../display-names/DisplayNameTable.vue';
 import PropertyTable from '../properties/PropertyTable.vue';
 
@@ -139,6 +139,8 @@ const getSupportScopes = computed((): TransferItem[] => {
   });
 });
 
+const { discoveryApi } = useOpenIdApi();
+const { cancel, createApi, getApi, updateApi } = useApplicationsApi();
 const [Modal, modalApi] = useVbenModal({
   class: 'w-1/2',
   draggable: true,
@@ -146,6 +148,9 @@ const [Modal, modalApi] = useVbenModal({
   onCancel() {
     modalApi.close();
   },
+  onClosed() {
+    cancel('ApplicationModal has closed!');
+  },
   onConfirm: async () => {
     await form.value?.validate();
     const api = formModel.value.id
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationSecretModal.vue b/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationSecretModal.vue
index cae8093ea..2582de464 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationSecretModal.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationSecretModal.vue
@@ -8,7 +8,7 @@ import { $t } from '@vben/locales';
 
 import { message } from 'ant-design-vue';
 
-import { getApi, updateApi } from '../../api/applications';
+import { useApplicationsApi } from '../../api/useApplicationsApi';
 
 defineOptions({
   name: 'ApplicationSecretModal',
@@ -18,6 +18,8 @@ const emits = defineEmits<{
 }>();
 
 const applicationModel = ref<OpenIddictApplicationDto>();
+
+const { cancel, getApi, updateApi } = useApplicationsApi();
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     // 所有表单项
@@ -42,19 +44,25 @@ const [Modal, modalApi] = useVbenModal({
   onCancel() {
     modalApi.close();
   },
+  onClosed() {
+    cancel('ApplicationSecretModal has closed!');
+  },
   onConfirm: async () => {
     await formApi.validateAndSubmitForm();
   },
   onOpenChange: async (isOpen) => {
+    let title = $t('AbpOpenIddict.ManageSecret');
     if (isOpen) {
       try {
         modalApi.setState({ loading: true });
-        const { id } = modalApi.getData<OpenIddictApplicationDto>();
+        const { clientId, id } = modalApi.getData<OpenIddictApplicationDto>();
         await onGet(id);
+        title += ` - ${clientId}`;
       } finally {
         modalApi.setState({ loading: false });
       }
     }
+    modalApi.setState({ title });
   },
   title: $t('AbpOpenIddict.ManageSecret'),
 });
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationTable.vue b/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationTable.vue
index 4f7425524..8b73385ed 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationTable.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationTable.vue
@@ -21,7 +21,7 @@ import {
 } from '@ant-design/icons-vue';
 import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
 
-import { deleteApi, getPagedListApi } from '../../api/applications';
+import { useApplicationsApi } from '../../api/useApplicationsApi';
 import { ApplicationsPermissions } from '../../constants/permissions';
 
 defineOptions({
@@ -35,6 +35,7 @@ const SecretIcon = createIconifyIcon('codicon:gist-secret');
 const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
 
 const { hasAccessByCodes } = useAccess();
+const { deleteApi, getPagedListApi } = useApplicationsApi();
 
 const formOptions: VbenFormProps = {
   // 默认展开
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationModal.vue b/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationModal.vue
index 7057c3460..da27f2d1a 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationModal.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationModal.vue
@@ -11,8 +11,8 @@ import { UserLookupPermissions, useUserLookupApi } from '@abp/identity';
 import { CodeEditor } from '@abp/ui';
 import { Select } from 'ant-design-vue';
 
-import { getApi as getApplication } from '../../api/applications';
-import { getApi as getAuthorization } from '../../api/authorizations';
+import { useApplicationsApi } from '../../api/useApplicationsApi';
+import { useAuthorizationsApi } from '../../api/useAuthorizationsApi';
 
 defineOptions({
   name: 'AuthorizationModal',
@@ -22,6 +22,8 @@ const Option = Select.Option;
 
 const { hasAccessByCodes } = useAccess();
 const userLookupApi = useUserLookupApi();
+const { getApi: getApplication } = useApplicationsApi();
+const { cancel, getApi: getAuthorization } = useAuthorizationsApi();
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -98,6 +100,9 @@ const [Modal, modalApi] = useVbenModal({
   onCancel() {
     modalApi.close();
   },
+  onClosed() {
+    cancel('AuthorizationModal has closed!');
+  },
   async onOpenChange(isOpen) {
     if (isOpen) {
       try {
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationTable.vue b/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationTable.vue
index 710770c04..6ac815bee 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationTable.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationTable.vue
@@ -18,8 +18,8 @@ import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
 import { Button, message, Modal, Select } from 'ant-design-vue';
 import debounce from 'lodash.debounce';
 
-import { getPagedListApi as getApplications } from '../../api/applications';
-import { deleteApi, getPagedListApi } from '../../api/authorizations';
+import { useApplicationsApi } from '../../api/useApplicationsApi';
+import { useAuthorizationsApi } from '../../api/useAuthorizationsApi';
 import { AuthorizationsPermissions } from '../../constants/permissions';
 
 defineOptions({
@@ -30,6 +30,8 @@ const CheckIcon = createIconifyIcon('ant-design:check-outlined');
 const CloseIcon = createIconifyIcon('ant-design:close-outlined');
 
 const { hasAccessByCodes } = useAccess();
+const { getPagedListApi: getApplications } = useApplicationsApi();
+const { deleteApi, getPagedListApi } = useAuthorizationsApi();
 
 const applications = ref<OpenIddictApplicationDto[]>([]);
 const formOptions: VbenFormProps = {
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeModal.vue b/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeModal.vue
index 4d82b2a30..72958c6e4 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeModal.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeModal.vue
@@ -14,8 +14,8 @@ import { $t } from '@vben/locales';
 
 import { Form, Input, message, Tabs, Transfer } from 'ant-design-vue';
 
-import { discoveryApi } from '../../api/openid';
-import { createApi, getApi, updateApi } from '../../api/scopes';
+import { useOpenIdApi } from '../../api/useOpenIdApi';
+import { useScopesApi } from '../../api/useScopesApi';
 import DisplayNameTable from '../display-names/DisplayNameTable.vue';
 import PropertyTable from '../properties/PropertyTable.vue';
 
@@ -54,6 +54,8 @@ const getSupportClaims = computed((): TransferItem[] => {
   });
 });
 
+const { discoveryApi } = useOpenIdApi();
+const { cancel, createApi, getApi, updateApi } = useScopesApi();
 const [Modal, modalApi] = useVbenModal({
   class: 'w-1/2',
   draggable: true,
@@ -61,6 +63,9 @@ const [Modal, modalApi] = useVbenModal({
   onCancel() {
     modalApi.close();
   },
+  onClosed() {
+    cancel('ScopeModal has closed!');
+  },
   onConfirm: async () => {
     await form.value?.validate();
     const api = formModel.value.id
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeTable.vue b/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeTable.vue
index acbd3c689..89518a289 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeTable.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeTable.vue
@@ -18,7 +18,7 @@ import {
 } from '@ant-design/icons-vue';
 import { Button, message, Modal } from 'ant-design-vue';
 
-import { deleteApi, getPagedListApi } from '../../api/scopes';
+import { useScopesApi } from '../../api/useScopesApi';
 import { ScopesPermissions } from '../../constants/permissions';
 
 defineOptions({
@@ -28,6 +28,8 @@ defineOptions({
 const CheckIcon = createIconifyIcon('ant-design:check-outlined');
 const CloseIcon = createIconifyIcon('ant-design:close-outlined');
 
+const { deleteApi, getPagedListApi } = useScopesApi();
+
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
@@ -110,7 +112,6 @@ const gridOptions: VxeGridProps<OpenIddictScopeDto> = {
 const [ScopeModal, modalApi] = useVbenModal({
   connectedComponent: defineAsyncComponent(() => import('./ScopeModal.vue')),
 });
-
 const [Grid, { query }] = useVbenVxeGrid({
   formOptions,
   gridOptions,
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/tokens/TokenModal.vue b/apps/vben5/packages/@abp/openiddict/src/components/tokens/TokenModal.vue
index 1470563b8..61f6ea1f1 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/tokens/TokenModal.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/tokens/TokenModal.vue
@@ -10,8 +10,8 @@ import { $t } from '@vben/locales';
 import { UserLookupPermissions, useUserLookupApi } from '@abp/identity';
 import { CodeEditor } from '@abp/ui';
 
-import { getApi as getApplication } from '../../api/applications';
-import { getApi as getAuthorization } from '../../api/tokens';
+import { useApplicationsApi } from '../../api/useApplicationsApi';
+import { useTokensApi } from '../../api/useTokensApi';
 
 defineOptions({
   name: 'TokenModal',
@@ -19,6 +19,8 @@ defineOptions({
 
 const { hasAccessByCodes } = useAccess();
 const userLookupApi = useUserLookupApi();
+const { getApi: getApplication } = useApplicationsApi();
+const { cancel, getApi: getAuthorization } = useTokensApi();
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -119,6 +121,9 @@ const [Modal, modalApi] = useVbenModal({
   onCancel() {
     modalApi.close();
   },
+  onClosed() {
+    cancel('TokenModal has closed!');
+  },
   async onOpenChange(isOpen) {
     if (isOpen) {
       try {
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/tokens/TokenTable.vue b/apps/vben5/packages/@abp/openiddict/src/components/tokens/TokenTable.vue
index 9914f0edb..6e1030b72 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/tokens/TokenTable.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/tokens/TokenTable.vue
@@ -18,8 +18,8 @@ import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
 import { Button, message, Modal, Select } from 'ant-design-vue';
 import debounce from 'lodash.debounce';
 
-import { getPagedListApi as getApplications } from '../../api/applications';
-import { deleteApi, getPagedListApi } from '../../api/tokens';
+import { useApplicationsApi } from '../../api/useApplicationsApi';
+import { useTokensApi } from '../../api/useTokensApi';
 import { TokensPermissions } from '../../constants/permissions';
 
 defineOptions({
@@ -30,6 +30,8 @@ const CheckIcon = createIconifyIcon('ant-design:check-outlined');
 const CloseIcon = createIconifyIcon('ant-design:close-outlined');
 
 const { hasAccessByCodes } = useAccess();
+const { getPagedListApi: getApplications } = useApplicationsApi();
+const { deleteApi, getPagedListApi } = useTokensApi();
 
 const applications = ref<OpenIddictApplicationDto[]>([]);
 const formOptions: VbenFormProps = {
diff --git a/apps/vben5/packages/@abp/permissions/src/api/definitions.ts b/apps/vben5/packages/@abp/permissions/src/api/definitions.ts
deleted file mode 100644
index 2862de492..000000000
--- a/apps/vben5/packages/@abp/permissions/src/api/definitions.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import type { ListResultDto } from '@abp/core';
-
-import type {
-  PermissionDefinitionCreateDto,
-  PermissionDefinitionDto,
-  PermissionDefinitionGetListInput,
-  PermissionDefinitionUpdateDto,
-} from '../types/definitions';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 删除权限定义
- * @param name 权限名称
- */
-export function deleteApi(name: string): Promise<void> {
-  return requestClient.delete(`/api/permission-management/definitions/${name}`);
-}
-
-/**
- * 查询权限定义
- * @param name 权限名称
- * @returns 权限定义数据传输对象
- */
-export function getApi(name: string): Promise<PermissionDefinitionDto> {
-  return requestClient.get<PermissionDefinitionDto>(
-    `/api/permission-management/definitions/${name}`,
-  );
-}
-
-/**
- * 查询权限定义列表
- * @param input 权限过滤条件
- * @returns 权限定义数据传输对象列表
- */
-export function getListApi(
-  input?: PermissionDefinitionGetListInput,
-): Promise<ListResultDto<PermissionDefinitionDto>> {
-  return requestClient.get<ListResultDto<PermissionDefinitionDto>>(
-    `/api/permission-management/definitions`,
-    {
-      params: input,
-    },
-  );
-}
-
-/**
- * 创建权限定义
- * @param input 权限定义参数
- * @returns 权限定义数据传输对象
- */
-export function createApi(
-  input: PermissionDefinitionCreateDto,
-): Promise<PermissionDefinitionDto> {
-  return requestClient.post<PermissionDefinitionDto>(
-    '/api/permission-management/definitions',
-    input,
-  );
-}
-
-/**
- * 更新权限定义
- * @param name 权限名称
- * @param input 权限定义参数
- * @returns 权限定义数据传输对象
- */
-export function updateApi(
-  name: string,
-  input: PermissionDefinitionUpdateDto,
-): Promise<PermissionDefinitionDto> {
-  return requestClient.put<PermissionDefinitionDto>(
-    `/api/permission-management/definitions/${name}`,
-    input,
-  );
-}
diff --git a/apps/vben5/packages/@abp/permissions/src/api/groups.ts b/apps/vben5/packages/@abp/permissions/src/api/groups.ts
deleted file mode 100644
index 0161ab552..000000000
--- a/apps/vben5/packages/@abp/permissions/src/api/groups.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { ListResultDto } from '@abp/core';
-
-import type {
-  PermissionGroupDefinitionCreateDto,
-  PermissionGroupDefinitionDto,
-  PermissionGroupDefinitionGetListInput,
-  PermissionGroupDefinitionUpdateDto,
-} from '../types/groups';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 删除权限定义
- * @param name 权限名称
- */
-export function deleteApi(name: string): Promise<void> {
-  return requestClient.delete(
-    `/api/permission-management/definitions/groups/${name}`,
-  );
-}
-
-/**
- * 查询权限定义
- * @param name 权限名称
- * @returns 权限定义数据传输对象
- */
-export function getApi(name: string): Promise<PermissionGroupDefinitionDto> {
-  return requestClient.get<PermissionGroupDefinitionDto>(
-    `/api/permission-management/definitions/groups/${name}`,
-  );
-}
-
-/**
- * 查询权限定义列表
- * @param input 权限过滤条件
- * @returns 权限定义数据传输对象列表
- */
-export function getListApi(
-  input?: PermissionGroupDefinitionGetListInput,
-): Promise<ListResultDto<PermissionGroupDefinitionDto>> {
-  return requestClient.get<ListResultDto<PermissionGroupDefinitionDto>>(
-    `/api/permission-management/definitions/groups`,
-    {
-      params: input,
-    },
-  );
-}
-
-/**
- * 创建权限定义
- * @param input 权限定义参数
- * @returns 权限定义数据传输对象
- */
-export function createApi(
-  input: PermissionGroupDefinitionCreateDto,
-): Promise<PermissionGroupDefinitionDto> {
-  return requestClient.post<PermissionGroupDefinitionDto>(
-    '/api/permission-management/definitions/groups',
-    input,
-  );
-}
-
-/**
- * 更新权限定义
- * @param name 权限名称
- * @param input 权限定义参数
- * @returns 权限定义数据传输对象
- */
-export function updateApi(
-  name: string,
-  input: PermissionGroupDefinitionUpdateDto,
-): Promise<PermissionGroupDefinitionDto> {
-  return requestClient.put<PermissionGroupDefinitionDto>(
-    `/api/permission-management/definitions/groups/${name}`,
-    input,
-  );
-}
diff --git a/apps/vben5/packages/@abp/permissions/src/api/index.ts b/apps/vben5/packages/@abp/permissions/src/api/index.ts
new file mode 100644
index 000000000..c05c627d5
--- /dev/null
+++ b/apps/vben5/packages/@abp/permissions/src/api/index.ts
@@ -0,0 +1,3 @@
+export { usePermissionDefinitionsApi } from './usePermissionDefinitionsApi';
+export { usePermissionGroupDefinitionsApi } from './usePermissionGroupDefinitionsApi';
+export { usePermissionsApi } from './usePermissionsApi';
diff --git a/apps/vben5/packages/@abp/permissions/src/api/permissions.ts b/apps/vben5/packages/@abp/permissions/src/api/permissions.ts
deleted file mode 100644
index d4ad87c78..000000000
--- a/apps/vben5/packages/@abp/permissions/src/api/permissions.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type {
-  PermissionProvider,
-  PermissionResultDto,
-  PermissionsUpdateDto,
-} from '../types/permissions';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 查询权限
- * @param provider
- * @returns 权限实体数据传输对象
- */
-export function getApi(
-  provider: PermissionProvider,
-): Promise<PermissionResultDto> {
-  return requestClient.get<PermissionResultDto>(
-    `/api/permission-management/permissions`,
-    {
-      params: provider,
-    },
-  );
-}
-
-/**
- * 更新权限
- * @param provider
- * @param input
- */
-export function updateApi(
-  provider: PermissionProvider,
-  input: PermissionsUpdateDto,
-): Promise<void> {
-  return requestClient.put(`/api/permission-management/permissions`, input, {
-    params: provider,
-  });
-}
diff --git a/apps/vben5/packages/@abp/permissions/src/api/usePermissionDefinitionsApi.ts b/apps/vben5/packages/@abp/permissions/src/api/usePermissionDefinitionsApi.ts
new file mode 100644
index 000000000..2179f8641
--- /dev/null
+++ b/apps/vben5/packages/@abp/permissions/src/api/usePermissionDefinitionsApi.ts
@@ -0,0 +1,100 @@
+import type { ListResultDto } from '@abp/core';
+
+import type {
+  PermissionDefinitionCreateDto,
+  PermissionDefinitionDto,
+  PermissionDefinitionGetListInput,
+  PermissionDefinitionUpdateDto,
+} from '../types/definitions';
+
+import { useRequest } from '@abp/request';
+
+export function usePermissionDefinitionsApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 删除权限定义
+   * @param name 权限名称
+   */
+  function deleteApi(name: string): Promise<void> {
+    return request(`/api/permission-management/definitions/${name}`, {
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * 查询权限定义
+   * @param name 权限名称
+   * @returns 权限定义数据传输对象
+   */
+  function getApi(name: string): Promise<PermissionDefinitionDto> {
+    return request<PermissionDefinitionDto>(
+      `/api/permission-management/definitions/${name}`,
+      {
+        method: 'GET',
+      },
+    );
+  }
+
+  /**
+   * 查询权限定义列表
+   * @param input 权限过滤条件
+   * @returns 权限定义数据传输对象列表
+   */
+  function getListApi(
+    input?: PermissionDefinitionGetListInput,
+  ): Promise<ListResultDto<PermissionDefinitionDto>> {
+    return request<ListResultDto<PermissionDefinitionDto>>(
+      `/api/permission-management/definitions`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  /**
+   * 创建权限定义
+   * @param input 权限定义参数
+   * @returns 权限定义数据传输对象
+   */
+  function createApi(
+    input: PermissionDefinitionCreateDto,
+  ): Promise<PermissionDefinitionDto> {
+    return request<PermissionDefinitionDto>(
+      '/api/permission-management/definitions',
+      {
+        data: input,
+        method: 'POST',
+      },
+    );
+  }
+
+  /**
+   * 更新权限定义
+   * @param name 权限名称
+   * @param input 权限定义参数
+   * @returns 权限定义数据传输对象
+   */
+  function updateApi(
+    name: string,
+    input: PermissionDefinitionUpdateDto,
+  ): Promise<PermissionDefinitionDto> {
+    return request<PermissionDefinitionDto>(
+      `/api/permission-management/definitions/${name}`,
+      {
+        data: input,
+        method: 'PUT',
+      },
+    );
+  }
+
+  return {
+    cancel,
+    createApi,
+    deleteApi,
+    getApi,
+    getListApi,
+    updateApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/permissions/src/api/usePermissionGroupDefinitionsApi.ts b/apps/vben5/packages/@abp/permissions/src/api/usePermissionGroupDefinitionsApi.ts
new file mode 100644
index 000000000..fedd9c28a
--- /dev/null
+++ b/apps/vben5/packages/@abp/permissions/src/api/usePermissionGroupDefinitionsApi.ts
@@ -0,0 +1,100 @@
+import type { ListResultDto } from '@abp/core';
+
+import type {
+  PermissionGroupDefinitionCreateDto,
+  PermissionGroupDefinitionDto,
+  PermissionGroupDefinitionGetListInput,
+  PermissionGroupDefinitionUpdateDto,
+} from '../types/groups';
+
+import { useRequest } from '@abp/request';
+
+export function usePermissionGroupDefinitionsApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 删除权限定义
+   * @param name 权限名称
+   */
+  function deleteApi(name: string): Promise<void> {
+    return request(`/api/permission-management/definitions/groups/${name}`, {
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * 查询权限定义
+   * @param name 权限名称
+   * @returns 权限定义数据传输对象
+   */
+  function getApi(name: string): Promise<PermissionGroupDefinitionDto> {
+    return request<PermissionGroupDefinitionDto>(
+      `/api/permission-management/definitions/groups/${name}`,
+      {
+        method: 'GET',
+      },
+    );
+  }
+
+  /**
+   * 查询权限定义列表
+   * @param input 权限过滤条件
+   * @returns 权限定义数据传输对象列表
+   */
+  function getListApi(
+    input?: PermissionGroupDefinitionGetListInput,
+  ): Promise<ListResultDto<PermissionGroupDefinitionDto>> {
+    return request<ListResultDto<PermissionGroupDefinitionDto>>(
+      `/api/permission-management/definitions/groups`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  /**
+   * 创建权限定义
+   * @param input 权限定义参数
+   * @returns 权限定义数据传输对象
+   */
+  function createApi(
+    input: PermissionGroupDefinitionCreateDto,
+  ): Promise<PermissionGroupDefinitionDto> {
+    return request<PermissionGroupDefinitionDto>(
+      '/api/permission-management/definitions/groups',
+      {
+        data: input,
+        method: 'POST',
+      },
+    );
+  }
+
+  /**
+   * 更新权限定义
+   * @param name 权限名称
+   * @param input 权限定义参数
+   * @returns 权限定义数据传输对象
+   */
+  function updateApi(
+    name: string,
+    input: PermissionGroupDefinitionUpdateDto,
+  ): Promise<PermissionGroupDefinitionDto> {
+    return request<PermissionGroupDefinitionDto>(
+      `/api/permission-management/definitions/groups/${name}`,
+      {
+        data: input,
+        method: 'PUT',
+      },
+    );
+  }
+
+  return {
+    cancel,
+    createApi,
+    deleteApi,
+    getApi,
+    getListApi,
+    updateApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/permissions/src/api/usePermissionsApi.ts b/apps/vben5/packages/@abp/permissions/src/api/usePermissionsApi.ts
new file mode 100644
index 000000000..326bd29c6
--- /dev/null
+++ b/apps/vben5/packages/@abp/permissions/src/api/usePermissionsApi.ts
@@ -0,0 +1,48 @@
+import type {
+  PermissionProvider,
+  PermissionResultDto,
+  PermissionsUpdateDto,
+} from '../types/permissions';
+
+import { useRequest } from '@abp/request';
+
+export function usePermissionsApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 查询权限
+   * @param provider
+   * @returns 权限实体数据传输对象
+   */
+  function getApi(provider: PermissionProvider): Promise<PermissionResultDto> {
+    return request<PermissionResultDto>(
+      `/api/permission-management/permissions`,
+      {
+        method: 'GET',
+        params: provider,
+      },
+    );
+  }
+
+  /**
+   * 更新权限
+   * @param provider
+   * @param input
+   */
+  function updateApi(
+    provider: PermissionProvider,
+    input: PermissionsUpdateDto,
+  ): Promise<void> {
+    return request(`/api/permission-management/permissions`, {
+      data: input,
+      method: 'PUT',
+      params: provider,
+    });
+  }
+
+  return {
+    cancel,
+    getApi,
+    updateApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionModal.vue b/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionModal.vue
index 6d9012c17..5c1b786f8 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionModal.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionModal.vue
@@ -12,7 +12,7 @@ import { $t } from '@vben/locales';
 import { LocalizableInput, PropertyTable } from '@abp/ui';
 import { Form, Input, message, Tabs } from 'ant-design-vue';
 
-import { createApi, getApi, updateApi } from '../../../api/groups';
+import { usePermissionGroupDefinitionsApi } from '../../../api/usePermissionGroupDefinitionsApi';
 
 defineOptions({
   name: 'PermissionGroupDefinitionModal',
@@ -33,6 +33,8 @@ const activeTab = ref<TabKeys>('basic');
 const form = useTemplateRef<FormInstance>('form');
 const formModel = ref<PermissionGroupDefinitionDto>({ ...defaultModel });
 
+const { cancel, createApi, getApi, updateApi } =
+  usePermissionGroupDefinitionsApi();
 const [Modal, modalApi] = useVbenModal({
   class: 'w-1/2',
   draggable: true,
@@ -40,6 +42,9 @@ const [Modal, modalApi] = useVbenModal({
   onCancel() {
     modalApi.close();
   },
+  onClosed() {
+    cancel('PermissionGroupDefinitionModal has closed!');
+  },
   onConfirm: async () => {
     await form.value?.validate();
     const api = isEditModel.value
diff --git a/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionTable.vue b/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionTable.vue
index 044f43ec0..acf44b18f 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionTable.vue
@@ -21,7 +21,7 @@ import {
 } from '@ant-design/icons-vue';
 import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
 
-import { deleteApi, getListApi } from '../../../api/groups';
+import { usePermissionGroupDefinitionsApi } from '../../../api/usePermissionGroupDefinitionsApi';
 import {
   GroupDefinitionsPermissions,
   PermissionDefinitionsPermissions,
@@ -45,6 +45,7 @@ const pageState = reactive({
 const { Lr } = useLocalization();
 const { hasAccessByCodes } = useAccess();
 const { deserialize } = useLocalizationSerializer();
+const { deleteApi, getListApi } = usePermissionGroupDefinitionsApi();
 
 const formOptions: VbenFormProps = {
   // 默认展开
diff --git a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue
index 0b5e88925..42439ac20 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue
@@ -26,13 +26,8 @@ import {
   TreeSelect,
 } from 'ant-design-vue';
 
-import {
-  createApi,
-  getApi,
-  getListApi as getPermissionsApi,
-  updateApi,
-} from '../../../api/definitions';
-import { getListApi as getGroupsApi } from '../../../api/groups';
+import { usePermissionDefinitionsApi } from '../../../api/usePermissionDefinitionsApi';
+import { usePermissionGroupDefinitionsApi } from '../../../api/usePermissionGroupDefinitionsApi';
 import { useTypesMap } from './types';
 
 defineOptions({
@@ -68,6 +63,13 @@ const availablePermissions = ref<PermissionTreeVo[]>([]);
 
 const { Lr } = useLocalization();
 const { deserialize } = useLocalizationSerializer();
+const { getListApi: getGroupsApi } = usePermissionGroupDefinitionsApi();
+const {
+  createApi,
+  getApi,
+  getListApi: getPermissionsApi,
+  updateApi,
+} = usePermissionDefinitionsApi();
 const [Modal, modalApi] = useVbenModal({
   class: 'w-1/2',
   draggable: true,
diff --git a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue
index c55312b5a..b6e38d8c0 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue
@@ -22,11 +22,8 @@ import {
 import { Button, message, Modal, Tag } from 'ant-design-vue';
 import { VxeGrid } from 'vxe-table';
 
-import {
-  deleteApi,
-  getListApi as getPermissionsApi,
-} from '../../../api/definitions';
-import { getListApi as getGroupsApi } from '../../../api/groups';
+import { usePermissionDefinitionsApi } from '../../../api/usePermissionDefinitionsApi';
+import { usePermissionGroupDefinitionsApi } from '../../../api/usePermissionGroupDefinitionsApi';
 import { GroupDefinitionsPermissions } from '../../../constants/permissions';
 import { type PermissionDefinitionDto } from '../../../types/definitions';
 import { useTypesMap } from './types';
@@ -62,6 +59,9 @@ const pageState = reactive({
 const { Lr } = useLocalization();
 const { deserialize } = useLocalizationSerializer();
 const { multiTenancySidesMap, providersMap } = useTypesMap();
+const { getListApi: getGroupsApi } = usePermissionGroupDefinitionsApi();
+const { deleteApi, getListApi: getPermissionsApi } =
+  usePermissionDefinitionsApi();
 
 const formOptions: VbenFormProps = {
   // 默认展开
diff --git a/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionModal.vue b/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionModal.vue
index f8d121907..ba49f6bd3 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionModal.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionModal.vue
@@ -15,7 +15,7 @@ import { $t } from '@vben/locales';
 
 import { Card, Checkbox, Divider, message, Tabs, Tree } from 'ant-design-vue';
 
-import { getApi, updateApi } from '../../api/permissions';
+import { usePermissionsApi } from '../../api/usePermissionsApi';
 import {
   generatePermissionTree,
   getGrantedPermissionKeys,
@@ -74,6 +74,7 @@ const getPermissionNodeState = computed(() => {
   };
 });
 
+const { cancel, getApi, updateApi } = usePermissionsApi();
 const [Modal, modalApi] = useVbenModal({
   centered: true,
   class: 'w-1/2',
@@ -84,6 +85,9 @@ const [Modal, modalApi] = useVbenModal({
   onCancel() {
     modalApi.close();
   },
+  onClosed() {
+    cancel('Permission modal has closed!');
+  },
   onConfirm: async () => {
     const permissions = toPermissionList(permissionTree.value);
     try {
diff --git a/apps/vben5/packages/@abp/permissions/src/index.ts b/apps/vben5/packages/@abp/permissions/src/index.ts
index 195d95f59..314dad0cd 100644
--- a/apps/vben5/packages/@abp/permissions/src/index.ts
+++ b/apps/vben5/packages/@abp/permissions/src/index.ts
@@ -1,2 +1,3 @@
+export * from './api';
 export * from './components';
 export * from './types';
diff --git a/apps/vben5/packages/@abp/ui/src/components/properties/PropertyTable.vue b/apps/vben5/packages/@abp/ui/src/components/properties/PropertyTable.vue
index d65d17ec4..6274ceb8e 100644
--- a/apps/vben5/packages/@abp/ui/src/components/properties/PropertyTable.vue
+++ b/apps/vben5/packages/@abp/ui/src/components/properties/PropertyTable.vue
@@ -52,6 +52,7 @@ const getTableColumns = computed((): TableColumnsType<PropertyInfo> => {
       align: 'left',
       dataIndex: 'value',
       fixed: 'left',
+      minWidth: 150,
       title: $t('component.extra_property_dictionary.value'),
     },
   ];