Merge pull request #1076 from colinin/use-request

Use request

apps/vben5/apps/app-antd/.env.development

@@ -15,5 +15,6 @@ VITE_DEVTOOLS=false
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
 
+VITE_GLOB_AUDIENCE="openid email address phone profile offline_access lingyun-abp-application"
 VITE_GLOB_CLIENT_ID=vue-admin-client
 VITE_GLOB_CLIENT_SECRET=1q2w3e*

apps/vben5/apps/app-antd/src/adapter/request/index.ts

@@ -5,12 +5,14 @@ import {
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
+import { useTokenApi } from '@abp/account';
 import { requestClient } from '@abp/request';
 import { message } from 'ant-design-vue';
 
 import { useAuthStore } from '#/store';
 
 export function initRequestClient() {
+  const { refreshTokenApi } = useTokenApi();
   /**
    * 重新认证逻辑
    */
@@ -33,6 +35,16 @@ export function initRequestClient() {
    * 刷新token逻辑
    */
   async function doRefreshToken() {
+    const accessStore = useAccessStore();
+    if (accessStore.refreshToken) {
+      const { accessToken, tokenType, refreshToken } = await refreshTokenApi({
+        refreshToken: accessStore.refreshToken,
+      });
+      const newToken = `${tokenType} ${accessToken}`;
+      accessStore.setAccessToken(newToken);
+      accessStore.setRefreshToken(refreshToken);
+      return newToken;
+    }
     return '';
   }
 

apps/vben5/apps/app-antd/src/api/core/abp.ts

@@ -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,
-    },
-  );
-}

apps/vben5/apps/app-antd/src/api/core/index.ts

@@ -1,2 +1,2 @@
-export * from './abp';
 export * from './menu';
+export { useAbpConfigApi } from './useAbpConfigApi';

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,
+  };
+}

apps/vben5/apps/app-antd/src/store/auth.ts

@@ -6,15 +6,18 @@ import { useRouter } from 'vue-router';
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
 import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 
-import { tokenApi, userInfoApi } from '@abp/account';
+import { useTokenApi, useUserInfoApi } from '@abp/account';
 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();
@@ -35,7 +38,7 @@ export const useAuthStore = defineStore('auth', () => {
     let userInfo: null | UserInfo = null;
     try {
       loginLoading.value = true;
-      const loginResult = await tokenApi.loginApi(params as any);
+      const loginResult = await loginApi(params as any);
       const { accessToken, tokenType, refreshToken } = loginResult;
       // 如果成功获取到 accessToken
       if (accessToken) {
@@ -93,7 +96,7 @@ export const useAuthStore = defineStore('auth', () => {
 
   async function fetchUserInfo() {
     let userInfo: ({ [key: string]: any } & UserInfo) | null = null;
-    const userInfoRes = await userInfoApi.getUserInfoApi();
+    const userInfoRes = await getUserInfoApi();
     const abpConfig = await getConfigApi();
     userInfo = {
       userId: userInfoRes.sub,

apps/vben5/packages/@abp/account/src/api/index.ts

@@ -1,2 +1,2 @@
-export * as tokenApi from './token';
+export { useTokenApi } from './useTokenApi';
-export * as userInfoApi from './user';
+export { useUserInfoApi } from './useUserInfoApi';

apps/vben5/packages/@abp/account/src/api/token.ts

@@ -1,46 +0,0 @@
-import type {
-  OAuthTokenResult,
-  PasswordTokenRequestModel,
-  TokenResult,
-} from '../types';
-
-import { useAppConfig } from '@vben/hooks';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 用户登录
- * @param request 参数
- * @returns 用户token
- */
-export async function loginApi(
-  request: PasswordTokenRequestModel,
-): Promise<TokenResult> {
-  const { clientId, clientSecret } = useAppConfig(
-    import.meta.env,
-    import.meta.env.PROD,
-  );
-  const result = await requestClient.post<OAuthTokenResult>(
-    '/connect/token',
-    {
-      client_id: clientId,
-      client_secret: clientSecret,
-      grant_type: 'password',
-      password: request.password,
-      scope:
-        'openid email address phone profile offline_access lingyun-abp-application',
-      username: request.username,
-    },
-    {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-    },
-  );
-  return {
-    accessToken: result.access_token,
-    expiresIn: result.expires_in,
-    refreshToken: result.refresh_token,
-    tokenType: result.token_type,
-  };
-}

apps/vben5/packages/@abp/account/src/api/useTokenApi.ts

@@ -0,0 +1,84 @@
+import type {
+  OAuthTokenRefreshModel,
+  OAuthTokenResult,
+  PasswordTokenRequestModel,
+  TokenResult,
+} from '../types';
+
+import { useAppConfig } from '@vben/hooks';
+
+import { useRequest } from '@abp/request';
+
+export function useTokenApi() {
+  const { cancel, request } = useRequest();
+  /**
+   * 用户登录
+   * @param input 参数
+   * @returns 用户token
+   */
+  async function loginApi(
+    input: PasswordTokenRequestModel,
+  ): Promise<TokenResult> {
+    const { audience, clientId, clientSecret } = useAppConfig(
+      import.meta.env,
+      import.meta.env.PROD,
+    );
+    const result = await request<OAuthTokenResult>('/connect/token', {
+      data: {
+        client_id: clientId,
+        client_secret: clientSecret,
+        grant_type: 'password',
+        password: input.password,
+        scope: audience,
+        username: input.username,
+      },
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      method: 'POST',
+    });
+    return {
+      accessToken: result.access_token,
+      expiresIn: result.expires_in,
+      refreshToken: result.refresh_token,
+      tokenType: result.token_type,
+    };
+  }
+
+  /**
+   * 刷新令牌
+   * @param input 参数
+   * @returns 用户token
+   */
+  async function refreshTokenApi(input: OAuthTokenRefreshModel) {
+    const { audience, clientId, clientSecret } = useAppConfig(
+      import.meta.env,
+      import.meta.env.PROD,
+    );
+    const result = await request<OAuthTokenResult>('/connect/token', {
+      data: {
+        client_id: clientId,
+        client_secret: clientSecret,
+        grant_type: 'refresh_token',
+        refresh_token: input.refreshToken,
+        scope: audience,
+      },
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      method: 'POST',
+    });
+    return {
+      accessToken: result.access_token,
+      expiresIn: result.expires_in,
+      refreshToken: result.refresh_token,
+      tokenType: result.token_type,
+    };
+  }
+
+  return {
+    cancel,
+    loginApi,
+    refreshTokenApi,
+  };
+}

apps/vben5/packages/@abp/account/src/api/useUserInfoApi.ts

@@ -0,0 +1,29 @@
+import type { OAuthUserInfo, UserInfo } from '../types/user';
+
+import { useRequest } from '@abp/request';
+
+export function useUserInfoApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 获取用户信息
+   */
+  async function getUserInfoApi(): Promise<UserInfo> {
+    const result = await request<OAuthUserInfo>('/connect/userinfo', {
+      method: 'GET',
+    });
+    return {
+      ...result,
+      emailVerified: result.email_verified,
+      givenName: result.given_name,
+      phoneNumberVerified: result.phone_number_verified,
+      preferredUsername: result.preferred_username,
+      uniqueName: result.unique_name,
+    };
+  }
+
+  return {
+    cancel,
+    getUserInfoApi,
+  };
+}

apps/vben5/packages/@abp/account/src/api/user.ts

@@ -1,18 +0,0 @@
-import type { OAuthUserInfo, UserInfo } from '../types/user';
-
-import { requestClient } from '@abp/request';
-
-/**
- * 获取用户信息
- */
-export async function getUserInfoApi(): Promise<UserInfo> {
-  const result = await requestClient.get<OAuthUserInfo>('/connect/userinfo');
-  return {
-    ...result,
-    emailVerified: result.email_verified,
-    givenName: result.given_name,
-    phoneNumberVerified: result.phone_number_verified,
-    preferredUsername: result.preferred_username,
-    uniqueName: result.unique_name,
-  };
-}

apps/vben5/packages/@abp/account/src/types/token.ts

@@ -32,6 +32,10 @@ interface TokenResult {
   /** 令牌类型 */
   tokenType: string;
 }
+interface OAuthTokenRefreshModel {
+  /** 刷新令牌 */
+  refreshToken: string;
+}
 /** oauth标准令牌返回结构 */
 interface OAuthTokenResult {
   /** 访问令牌 */
@@ -45,6 +49,7 @@ interface OAuthTokenResult {
 }
 
 export type {
+  OAuthTokenRefreshModel,
   OAuthTokenResult,
   PasswordTokenRequest,
   PasswordTokenRequestModel,

apps/vben5/packages/@abp/auditing/src/api/audit-logs.ts

@@ -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}`);
-}

apps/vben5/packages/@abp/auditing/src/api/entity-changes.ts

@@ -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,
-    },
-  );
-}

apps/vben5/packages/@abp/auditing/src/api/index.ts

@@ -1,2 +1,2 @@
-export * as auditLogsApi from './audit-logs';
+export { useAuditLogsApi } from './useAuditLogsApi';
-export * as entityChangesApi from './entity-changes';
+export { useEntityChangesApi } from './useEntityChangesApi';

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,
+  };
+}

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,
+  };
+}

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 {

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 }}

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 state = drawerApi.getData<State>();
-      const { items } = await getListWithUsernameApi(input);
+      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'),
 });

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,
+};

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,
   };

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>

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 {
-import { Button, message, Modal } from 'ant-design-vue';
+  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
-          <Button
+          :icon="h(EditOutlined)"
-            :icon="h(EditOutlined)"
+          block
-            block
+          type="link"
-            type="link"
+          v-access:code="[IdentityClaimTypePermissions.Update]"
-            v-access:code="[IdentityClaimTypePermissions.Update]"
+          @click="onUpdate(row)"
-            @click="handleEdit(row)"
+        >
-          >
+          {{ $t('AbpUi.Edit') }}
-            {{ $t('AbpUi.Edit') }}
+        </Button>
-          </Button>
+        <Button
-        </div>
+          v-if="row.isStatic === false"
-        <div class="basis-1/2">
+          :icon="h(DeleteOutlined)"
-          <Button
+          block
-            :icon="h(DeleteOutlined)"
+          danger
-            block
+          type="link"
-            danger
+          v-access:code="[IdentityClaimTypePermissions.Delete]"
-            type="link"
+          @click="onDelete(row)"
-            v-access:code="[IdentityClaimTypePermissions.Delete]"
+        >
-            @click="handleDelete(row)"
+          {{ $t('AbpUi.Delete') }}
-          >
+        </Button>
-            {{ $t('AbpUi.Delete') }}
+        <Dropdown>
-          </Button>
+          <template #overlay>
-        </div>
+            <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>

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'),

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>

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
-          <Button
+          :icon="h(EditOutlined)"
-            :icon="h(EditOutlined)"
+          block
-            block
+          type="link"
-            type="link"
+          v-access:code="[IdentityRolePermissions.Update]"
-            v-access:code="[IdentityRolePermissions.Update]"
+          @click="handleEdit(row)"
-            @click="handleEdit(row)"
+        >
-          >
+          {{ $t('AbpUi.Edit') }}
-            {{ $t('AbpUi.Edit') }}
+        </Button>
-          </Button>
+        <Button
-        </div>
+          v-if="row.isStatic === false"
-        <div class="basis-1/3">
+          :icon="h(DeleteOutlined)"
-          <Button
+          block
-            :icon="h(DeleteOutlined)"
+          danger
-            block
+          type="link"
-            danger
+          v-access:code="[IdentityRolePermissions.Delete]"
-            type="link"
+          @click="handleDelete(row)"
-            v-access:code="[IdentityRolePermissions.Delete]"
+        >
-            @click="handleDelete(row)"
+          {{ $t('AbpUi.Delete') }}
-          >
+        </Button>
-            {{ $t('AbpUi.Delete') }}
+        <Dropdown>
-          </Button>
+          <template #overlay>
-        </div>
+            <Menu @click="(info) => handleMenuClick(row, info)">
-        <div class="basis-1/3">
+              <MenuItem
-          <Dropdown>
+                v-if="
-            <template #overlay>
+                  hasAccessByCodes([IdentityRolePermissions.ManagePermissions])
-              <Menu @click="(info) => handleMenuClick(row, info)">
+                "
-                <MenuItem
+                key="permissions"
-                  v-if="
+                :icon="h(PermissionsOutlined)"
-                    hasAccessByCodes([
+              >
-                      IdentityRolePermissions.ManagePermissions,
+                {{ $t('AbpPermissionManagement.Permissions') }}
-                    ])
+              </MenuItem>
-                  "
+              <MenuItem
-                  key="permissions"
+                v-if="hasAccessByCodes([IdentityRolePermissions.ManageClaims])"
-                  :icon="h(PermissionsOutlined)"
+                key="claims"
-                >
+                :icon="h(ClaimOutlined)"
-                  {{ $t('AbpPermissionManagement.Permissions') }}
+              >
-                </MenuItem>
+                {{ $t('AbpIdentity.ManageClaim') }}
-                <MenuItem
+              </MenuItem>
-                  v-if="
+              <MenuItem
-                    hasAccessByCodes([IdentityRolePermissions.ManageClaims])
+                v-if="hasAccessByCodes(['Platform.Menu.ManageRoles'])"
-                  "
+                key="menus"
-                  key="claims"
+                :icon="h(MenuOutlined)"
-                  :icon="h(ClaimOutlined)"
+              >
-                >
+                {{ $t('AppPlatform.Menu:Manage') }}
-                  {{ $t('AbpIdentity.ManageClaim') }}
+              </MenuItem>
-                </MenuItem>
+              <MenuItem
-                <MenuItem
+                v-if="hasAccessByCodes([AuditLogPermissions.Default])"
-                  v-if="hasAccessByCodes(['Platform.Menu.ManageRoles'])"
+                key="entity-changes"
-                  key="menus"
+                :icon="h(AuditLogIcon)"
-                  :icon="h(MenuOutlined)"
+              >
-                >
+                {{ $t('AbpAuditLogging.EntitiesChanged') }}
-                  {{ $t('AppPlatform.Menu:Manage') }}
+              </MenuItem>
-                </MenuItem>
+            </Menu>
-                <MenuItem
+          </template>
-                  v-if="hasAccessByCodes([AuditLogPermissions.Default])"
+          <Button :icon="h(EllipsisOutlined)" type="link" />
-                  key="entity-changes"
+        </Dropdown>
-                  :icon="h(AuditLogIcon)"
-                >
-                  {{ $t('AbpAuditLogging.EntitiesChanged') }}
-                </MenuItem>
-              </Menu>
-            </template>
-            <Button :icon="h(EllipsisOutlined)" type="link" />
-          </Dropdown>
-        </div>
       </div>
     </template>
   </Grid>

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 }}

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'),

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('AbpIdentity.LockType:Seconds'),
-          { label: $t('LockType:Hours'), value: LockType.Hours },
+            value: LockType.Seconds,
-          { 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: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'),
 });

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');

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;

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,
+};

apps/vben5/packages/@abp/openiddict/src/api/applications.ts

@@ -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,
-    },
-  );
-}

apps/vben5/packages/@abp/openiddict/src/api/authorizations.ts

@@ -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,
-    },
-  );
-}

apps/vben5/packages/@abp/openiddict/src/api/index.ts

@@ -1,4 +1,4 @@
-export * as applicationsApi from './applications';
+export { useApplicationsApi } from './useApplicationsApi';
-export * as authorizationsApi from './authorizations';
+export { useAuthorizationsApi } from './useAuthorizationsApi';
-export * as scopesApi from './scopes';
+export { useScopesApi } from './useScopesApi';
-export * as tokensApi from './tokens';
+export { useTokensApi } from './useTokensApi';

apps/vben5/packages/@abp/openiddict/src/api/openid.ts

@@ -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',
-  );
-}

apps/vben5/packages/@abp/openiddict/src/api/scopes.ts

@@ -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,
-    },
-  );
-}

apps/vben5/packages/@abp/openiddict/src/api/tokens.ts

@@ -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,
-    },
-  );
-}

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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 { useApplicationsApi } from '../../api/useApplicationsApi';
-import { discoveryApi } from '../../api/openid';
+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

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'),
 });

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 = {
   // 默认展开

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 { useApplicationsApi } from '../../api/useApplicationsApi';
-import { getApi as getAuthorization } from '../../api/authorizations';
+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 {

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 { useApplicationsApi } from '../../api/useApplicationsApi';
-import { deleteApi, getPagedListApi } from '../../api/authorizations';
+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 = {

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 { useOpenIdApi } from '../../api/useOpenIdApi';
-import { createApi, getApi, updateApi } from '../../api/scopes';
+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

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,

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 { useApplicationsApi } from '../../api/useApplicationsApi';
-import { getApi as getAuthorization } from '../../api/tokens';
+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 {

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 { useApplicationsApi } from '../../api/useApplicationsApi';
-import { deleteApi, getPagedListApi } from '../../api/tokens';
+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 = {

apps/vben5/packages/@abp/permissions/src/api/definitions.ts

@@ -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,
-  );
-}

apps/vben5/packages/@abp/permissions/src/api/groups.ts

@@ -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,
-  );
-}

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';

apps/vben5/packages/@abp/permissions/src/api/permissions.ts

@@ -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,
-  });
-}

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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

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 = {
   // 默认展开

apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue

@@ -26,13 +26,8 @@ import {
   TreeSelect,
 } from 'ant-design-vue';
 
-import {
+import { usePermissionDefinitionsApi } from '../../../api/usePermissionDefinitionsApi';
-  createApi,
+import { usePermissionGroupDefinitionsApi } from '../../../api/usePermissionGroupDefinitionsApi';
-  getApi,
-  getListApi as getPermissionsApi,
-  updateApi,
-} from '../../../api/definitions';
-import { getListApi as getGroupsApi } from '../../../api/groups';
 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,

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 {
+import { usePermissionDefinitionsApi } from '../../../api/usePermissionDefinitionsApi';
-  deleteApi,
+import { usePermissionGroupDefinitionsApi } from '../../../api/usePermissionGroupDefinitionsApi';
-  getListApi as getPermissionsApi,
-} from '../../../api/definitions';
-import { getListApi as getGroupsApi } from '../../../api/groups';
 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 = {
   // 默认展开

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 {

apps/vben5/packages/@abp/permissions/src/index.ts

@@ -1,2 +1,3 @@
+export * from './api';
 export * from './components';
 export * from './types';

apps/vben5/packages/@abp/request/src/hooks/useRequest.ts

@@ -1,7 +1,5 @@
 import type { AxiosRequestConfig } from 'axios';
 
-import { onUnmounted } from 'vue';
-
 import { requestClient } from '@abp/request';
 
 type HttpMethod =
@@ -20,12 +18,7 @@ interface RequestConfig extends AxiosRequestConfig {
   method: HttpMethod;
 }
 
-interface RequestLifeCycle {
+export function useRequest() {
-  /** 是否自动销毁令牌 */
-  autoDestroy?: boolean;
-}
-
-export function useRequest(options?: RequestLifeCycle) {
   const controllers = new Set<AbortController>();
 
   function request<T>(url: string, config: RequestConfig): Promise<T> {
@@ -46,13 +39,6 @@ export function useRequest(options?: RequestLifeCycle) {
     controllers.clear();
   }
 
-  onUnmounted(() => {
-    if (options?.autoDestroy === false) {
-      return;
-    }
-    cancel('The Component has Unmounted!');
-  });
-
   return {
     cancel,
     request,

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'),
     },
   ];

apps/vben5/packages/types/global.d.ts

@@ -11,10 +11,14 @@ export interface VbenAdminProAppConfigRaw {
   VITE_GLOB_API_URL: string;
   VITE_GLOB_CLIENT_ID: string;
   VITE_GLOB_CLIENT_SECRET: string;
+  VITE_GLOB_AUTHORITY: string;
+  VITE_GLOB_AUDIENCE?: string;
 }
 
 export interface ApplicationConfig {
   apiURL: string;
+  authority: string;
+  audience?: string;
   clientId: string;
   clientSecret: string;
 }