From 065b5180dc85871baabe39aed01de5cc05e13034 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Mon, 21 Apr 2025 17:06:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(vben5):=20=E5=A2=9E=E5=8A=A0=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86Webhook=E8=AE=A2=E9=98=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app-antd/src/locales/langs/en-US/abp.json |   3 +-
 .../app-antd/src/locales/langs/zh-CN/abp.json |   3 +-
 .../app-antd/src/router/routes/modules/abp.ts |   9 +
 .../views/webhooks/subscriptions/index.vue    |  15 +
 .../vben5/packages/@abp/webhooks/package.json |   6 +-
 .../packages/@abp/webhooks/src/api/index.ts   |   1 +
 .../webhooks/src/api/useSubscriptionsApi.ts   | 123 +++++++
 .../@abp/webhooks/src/components/index.ts     |   1 +
 .../WebhookSubscriptionModal.vue              | 309 +++++++++++++++++
 .../WebhookSubscriptionTable.vue              | 317 ++++++++++++++++++
 .../webhooks/src/constants/permissions.ts     |  11 +
 .../packages/@abp/webhooks/src/types/index.ts |   1 +
 .../@abp/webhooks/src/types/subscriptions.ts  |  73 ++++
 13 files changed, 869 insertions(+), 3 deletions(-)
 create mode 100644 apps/vben5/apps/app-antd/src/views/webhooks/subscriptions/index.vue
 create mode 100644 apps/vben5/packages/@abp/webhooks/src/api/useSubscriptionsApi.ts
 create mode 100644 apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionModal.vue
 create mode 100644 apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionTable.vue
 create mode 100644 apps/vben5/packages/@abp/webhooks/src/types/subscriptions.ts

diff --git a/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json b/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
index 80be45b1f..6de53754e 100644
--- a/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
@@ -117,6 +117,7 @@
   "webhooks": {
     "title": "Webhooks",
     "groups": "Groups",
-    "definitions": "Definitions"
+    "definitions": "Definitions",
+    "subscriptions": "Subscriptions"
   }
 }
diff --git a/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json b/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
index 4d3eff156..08ff8f8e5 100644
--- a/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
@@ -117,6 +117,7 @@
   "webhooks": {
     "title": "Webhook管理",
     "groups": "Webhook分组",
-    "definitions": "Webhook定义"
+    "definitions": "Webhook定义",
+    "subscriptions": "管理订阅"
   }
 }
diff --git a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
index 709a89c04..2ec6407a1 100644
--- a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
@@ -476,6 +476,15 @@ const routes: RouteRecordRaw[] = [
             path: '/webhooks/definitions',
             component: () => import('#/views/webhooks/definitions/index.vue'),
           },
+          {
+            meta: {
+              title: $t('abp.webhooks.subscriptions'),
+              icon: 'material-symbols:subscriptions',
+            },
+            name: 'WebhookSubscriptions',
+            path: '/webhooks/subscriptions',
+            component: () => import('#/views/webhooks/subscriptions/index.vue'),
+          },
         ],
       },
       {
diff --git a/apps/vben5/apps/app-antd/src/views/webhooks/subscriptions/index.vue b/apps/vben5/apps/app-antd/src/views/webhooks/subscriptions/index.vue
new file mode 100644
index 000000000..a05d1bf98
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/views/webhooks/subscriptions/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { WebhookSubscriptionTable } from '@abp/webhooks';
+
+defineOptions({
+  name: 'WebhookSubscriptions',
+});
+</script>
+
+<template>
+  <Page>
+    <WebhookSubscriptionTable />
+  </Page>
+</template>
diff --git a/apps/vben5/packages/@abp/webhooks/package.json b/apps/vben5/packages/@abp/webhooks/package.json
index 54f439f47..f62762874 100644
--- a/apps/vben5/packages/@abp/webhooks/package.json
+++ b/apps/vben5/packages/@abp/webhooks/package.json
@@ -20,9 +20,11 @@
     }
   },
   "dependencies": {
+    "@abp/components": "workspace:*",
     "@abp/core": "workspace:*",
     "@abp/features": "workspace:*",
     "@abp/request": "workspace:*",
+    "@abp/saas": "workspace:*",
     "@abp/ui": "workspace:*",
     "@ant-design/icons-vue": "catalog:",
     "@vben/access": "workspace:*",
@@ -33,10 +35,12 @@
     "@vben/locales": "workspace:*",
     "ant-design-vue": "catalog:",
     "lodash.clonedeep": "catalog:",
+    "lodash.debounce": "catalog:",
     "vue": "catalog:*",
     "vxe-table": "catalog:"
   },
   "devDependencies": {
-    "@types/lodash.clonedeep": "catalog:"
+    "@types/lodash.clonedeep": "catalog:",
+    "@types/lodash.debounce": "catalog:"
   }
 }
diff --git a/apps/vben5/packages/@abp/webhooks/src/api/index.ts b/apps/vben5/packages/@abp/webhooks/src/api/index.ts
index 12a6e651a..0a30bdd2a 100644
--- a/apps/vben5/packages/@abp/webhooks/src/api/index.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/api/index.ts
@@ -1,2 +1,3 @@
+export * from './useSubscriptionsApi';
 export * from './useWebhookDefinitionsApi';
 export * from './useWebhookGroupDefinitionsApi';
diff --git a/apps/vben5/packages/@abp/webhooks/src/api/useSubscriptionsApi.ts b/apps/vben5/packages/@abp/webhooks/src/api/useSubscriptionsApi.ts
new file mode 100644
index 000000000..50c8914e8
--- /dev/null
+++ b/apps/vben5/packages/@abp/webhooks/src/api/useSubscriptionsApi.ts
@@ -0,0 +1,123 @@
+import type { ListResultDto, PagedResultDto } from '@abp/core';
+
+import type {
+  WebhookAvailableGroupDto,
+  WebhookSubscriptionCreateDto,
+  WebhookSubscriptionDeleteManyInput,
+  WebhookSubscriptionDto,
+  WebhookSubscriptionGetListInput,
+  WebhookSubscriptionUpdateDto,
+} from '../types/subscriptions';
+
+import { useRequest } from '@abp/request';
+
+export function useSubscriptionsApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 创建订阅
+   * @param input 参数
+   * @returns 订阅Dto
+   */
+  function createApi(
+    input: WebhookSubscriptionCreateDto,
+  ): Promise<WebhookSubscriptionDto> {
+    return request<WebhookSubscriptionDto>(`/api/webhooks/subscriptions`, {
+      data: input,
+      method: 'POST',
+    });
+  }
+  /**
+   * 删除订阅
+   * @param id 订阅Id
+   */
+  function deleteApi(id: string): Promise<void> {
+    return request(`/api/webhooks/subscriptions/${id}`, {
+      method: 'DELETE',
+    });
+  }
+  /**
+   * 批量删除订阅
+   * @param input 参数
+   */
+  function bulkDeleteApi(
+    input: WebhookSubscriptionDeleteManyInput,
+  ): Promise<void> {
+    return request(`/api/webhooks/subscriptions/delete-many`, {
+      data: input,
+      method: 'DELETE',
+    });
+  }
+  /**
+   * 查询所有可用的Webhook分组列表
+   * @returns Webhook分组列表
+   */
+  function getAllAvailableWebhooksApi(): Promise<
+    ListResultDto<WebhookAvailableGroupDto>
+  > {
+    return request<ListResultDto<WebhookAvailableGroupDto>>(
+      `/api/webhooks/subscriptions/availables`,
+      {
+        method: 'GET',
+      },
+    );
+  }
+  /**
+   * 查询订阅
+   * @param id 订阅Id
+   * @returns 订阅Dto
+   */
+  function getApi(id: string): Promise<WebhookSubscriptionDto> {
+    return request<WebhookSubscriptionDto>(
+      `/api/webhooks/subscriptions/${id}`,
+      {
+        method: 'GET',
+      },
+    );
+  }
+  /**
+   * 查询订阅分页列表
+   * @param input 过滤参数
+   * @returns 订阅Dto列表
+   */
+  function getPagedListApi(
+    input: WebhookSubscriptionGetListInput,
+  ): Promise<PagedResultDto<WebhookSubscriptionDto>> {
+    return request<PagedResultDto<WebhookSubscriptionDto>>(
+      `/api/webhooks/subscriptions`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+  /**
+   * 更新订阅
+   * @param id 订阅Id
+   * @param input 更新参数
+   * @returns 订阅Dto
+   */
+  function updateApi(
+    id: string,
+    input: WebhookSubscriptionUpdateDto,
+  ): Promise<WebhookSubscriptionDto> {
+    return request<WebhookSubscriptionDto>(
+      `/api/webhooks/subscriptions/${id}`,
+      {
+        data: input,
+        method: 'PUT',
+      },
+    );
+  }
+
+  return {
+    bulkDeleteApi,
+    cancel,
+    createApi,
+    deleteApi,
+    getAllAvailableWebhooksApi,
+    getApi,
+    getPagedListApi,
+    updateApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/webhooks/src/components/index.ts b/apps/vben5/packages/@abp/webhooks/src/components/index.ts
index 14b4c03ac..41763338c 100644
--- a/apps/vben5/packages/@abp/webhooks/src/components/index.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/components/index.ts
@@ -1,2 +1,3 @@
 export { default as WebhookGroupDefinitionTable } from './definitions/groups/WebhookGroupDefinitionTable.vue';
 export { default as WebhookDefinitionTable } from './definitions/webhooks/WebhookDefinitionTable.vue';
+export { default as WebhookSubscriptionTable } from './subscriptions/WebhookSubscriptionTable.vue';
diff --git a/apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionModal.vue b/apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionModal.vue
new file mode 100644
index 000000000..8fa68daa4
--- /dev/null
+++ b/apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionModal.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import type { TenantDto } from '@abp/saas';
+import type { PropertyInfo } from '@abp/ui';
+import type { FormInstance } from 'ant-design-vue';
+
+import type {
+  WebhookAvailableGroupDto,
+  WebhookSubscriptionDto,
+} from '../../types';
+
+import { defineEmits, defineOptions, ref, toValue, useTemplateRef } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { isNullOrWhiteSpace } from '@abp/core';
+import { useTenantsApi } from '@abp/saas';
+import { PropertyTable } from '@abp/ui';
+import {
+  Checkbox,
+  Form,
+  Input,
+  InputNumber,
+  InputPassword,
+  message,
+  Select,
+  Tabs,
+  Textarea,
+  Tooltip,
+} from 'ant-design-vue';
+import debounce from 'lodash.debounce';
+
+import { useSubscriptionsApi } from '../../api/useSubscriptionsApi';
+
+defineOptions({
+  name: 'WebhookSubscriptionModal',
+});
+const emits = defineEmits<{
+  (event: 'change', data: WebhookSubscriptionDto): void;
+}>();
+
+const FormItem = Form.Item;
+const FormItemRest = Form.ItemRest;
+const SelectGroup = Select.OptGroup;
+const SelectOption = Select.Option;
+const TabPane = Tabs.TabPane;
+
+const defaultModel: WebhookSubscriptionDto = {
+  creationTime: new Date(),
+  displayName: '',
+  extraProperties: {},
+  id: '',
+  isActive: true,
+  isStatic: false,
+  webhooks: [],
+  webhookUri: '',
+};
+type TabActiveKey = 'basic' | 'headers';
+
+const isEditModel = ref(false);
+const activeTabKey = ref<TabActiveKey>('basic');
+const form = useTemplateRef<FormInstance>('form');
+const formModel = ref<WebhookSubscriptionDto>({ ...defaultModel });
+const webhookGroups = ref<WebhookAvailableGroupDto[]>([]);
+const tenants = ref<TenantDto[]>([]);
+
+const { hasAccessByCodes } = useAccess();
+const { getPagedListApi: getTenantsApi } = useTenantsApi();
+const { cancel, createApi, getAllAvailableWebhooksApi, getApi, updateApi } =
+  useSubscriptionsApi();
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onClosed() {
+    cancel('WebhookSubscriptionModal has closed!');
+  },
+  onConfirm: async () => {
+    await form.value?.validate();
+    const input = toValue(formModel);
+    const api = isEditModel.value
+      ? updateApi(formModel.value.id, input)
+      : createApi(input);
+    try {
+      modalApi.setState({ submitting: true });
+      const res = await api;
+      emits('change', res);
+      message.success($t('AbpUi.SavedSuccessfully'));
+      modalApi.close();
+    } finally {
+      modalApi.setState({ submitting: false });
+    }
+  },
+  onOpenChange: async (isOpen: boolean) => {
+    if (isOpen) {
+      isEditModel.value = false;
+      activeTabKey.value = 'basic';
+      formModel.value = { ...defaultModel };
+      modalApi.setState({
+        loading: true,
+        showConfirmButton: true,
+        title: $t('WebhooksManagement.Subscriptions:AddNew'),
+      });
+      try {
+        const { id } = modalApi.getData<WebhookSubscriptionDto>();
+        await onInit();
+        !isNullOrWhiteSpace(id) && (await onGet(id));
+      } finally {
+        modalApi.setState({ loading: false });
+      }
+    }
+  },
+  title: $t('WebhooksManagement.Subscriptions:AddNew'),
+});
+async function onGet(id: string) {
+  isEditModel.value = true;
+  const dto = await getApi(id);
+  formModel.value = dto;
+  modalApi.setState({
+    showConfirmButton: !dto.isStatic,
+    title: $t('WebhooksManagement.Subscriptions:Edit'),
+  });
+}
+async function onInit() {
+  const [webhookGroupRes, tenantRes] = await Promise.all([
+    getAllAvailableWebhooksApi(),
+    onInitTenants(),
+  ]);
+  webhookGroups.value = webhookGroupRes.items;
+  tenants.value = tenantRes;
+}
+async function onInitTenants(filter?: string) {
+  if (!hasAccessByCodes(['AbpSaas.Tenants'])) {
+    return [];
+  }
+  const { items } = await getTenantsApi({ filter });
+  return items;
+}
+function onWebhooksFilter(onputValue: string, option: any) {
+  if (option.displayname) {
+    return option.displayname.includes(onputValue);
+  }
+  if (option.label) {
+    return option.label.includes(onputValue);
+  }
+  return true;
+}
+const onTenantsSearch = debounce(async (input?: string) => {
+  const tenantRes = await onInitTenants(input);
+  tenants.value = tenantRes;
+}, 500);
+function onPropChange(prop: PropertyInfo) {
+  formModel.value.headers ??= {};
+  formModel.value.headers[prop.key] = prop.value;
+}
+function onPropDelete(prop: PropertyInfo) {
+  formModel.value.headers ??= {};
+  delete formModel.value.headers[prop.key];
+}
+</script>
+
+<template>
+  <Modal>
+    <Form
+      ref="form"
+      :label-col="{ span: 6 }"
+      :model="formModel"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Tabs v-model:active-key="activeTabKey">
+        <TabPane key="basic" :tab="$t('WebhooksManagement.BasicInfo')">
+          <FormItem
+            name="isActive"
+            :label="$t('WebhooksManagement.DisplayName:IsActive')"
+            :extra="$t('WebhooksManagement.Description:IsActive')"
+          >
+            <Checkbox
+              :disabled="formModel.isStatic"
+              v-model:checked="formModel.isActive"
+            >
+              {{ $t('WebhooksManagement.DisplayName:IsActive') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            :label="$t('WebhooksManagement.DisplayName:WebhookUri')"
+            :extra="$t('WebhooksManagement.Description:WebhookUri')"
+            name="webhookUri"
+            required
+          >
+            <Input
+              v-model:value="formModel.webhookUri"
+              :disabled="formModel.isStatic"
+              autocomplete="off"
+              allow-clear
+            />
+          </FormItem>
+          <FormItem
+            name="webhooks"
+            :label="$t('WebhooksManagement.DisplayName:Webhooks')"
+            :extra="$t('WebhooksManagement.Description:Webhooks')"
+          >
+            <Select
+              :disabled="formModel.isStatic"
+              allow-clear
+              mode="multiple"
+              v-model:value="formModel.webhooks"
+              :filter-option="onWebhooksFilter"
+            >
+              <SelectGroup
+                v-for="group in webhookGroups"
+                :key="group.name"
+                :label="group.displayName"
+              >
+                <SelectOption
+                  v-for="option in group.webhooks"
+                  :key="option.name"
+                  :value="option.name"
+                  :displayname="option.displayName"
+                >
+                  <Tooltip placement="right">
+                    <template #title>
+                      {{ option.description }}
+                    </template>
+                    {{ option.displayName }}
+                  </Tooltip>
+                </SelectOption>
+              </SelectGroup>
+            </Select>
+          </FormItem>
+          <FormItem
+            v-if="hasAccessByCodes(['AbpSaas.Tenants'])"
+            :label="$t('WebhooksManagement.DisplayName:TenantId')"
+            :extra="$t('WebhooksManagement.Description:TenantId')"
+            name="tenantId"
+          >
+            <Select
+              v-model:value="formModel.tenantId"
+              :disabled="formModel.isStatic"
+              :options="tenants"
+              :field-names="{ label: 'normalizedName', value: 'id' }"
+              :filter-option="false"
+              @search="onTenantsSearch"
+              show-search
+              allow-clear
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('WebhooksManagement.DisplayName:TimeoutDuration')"
+            :extra="$t('WebhooksManagement.Description:TimeoutDuration')"
+            name="timeoutDuration"
+          >
+            <InputNumber
+              class="w-full"
+              v-model:value="formModel.timeoutDuration"
+              :disabled="formModel.isStatic"
+              :min="10"
+              :max="300"
+              autocomplete="off"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('WebhooksManagement.DisplayName:Secret')"
+            :extra="$t('WebhooksManagement.Description:Secret')"
+            name="secret"
+          >
+            <InputPassword
+              v-model:value="formModel.secret"
+              :disabled="formModel.isStatic"
+              autocomplete="off"
+              allow-clear
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('WebhooksManagement.DisplayName:Description')"
+            name="description"
+          >
+            <Textarea
+              v-model:value="formModel.description"
+              :disabled="formModel.isStatic"
+              :auto-size="{ minRows: 3 }"
+              autocomplete="off"
+              allow-clear
+            />
+          </FormItem>
+        </TabPane>
+        <TabPane
+          key="headers"
+          :tab="$t('WebhooksManagement.DisplayName:Headers')"
+        >
+          <FormItemRest>
+            <PropertyTable
+              :data="formModel.headers"
+              :disabled="formModel.isStatic"
+              @change="onPropChange"
+              @delete="onPropDelete"
+            />
+          </FormItemRest>
+        </TabPane>
+      </Tabs>
+    </Form>
+  </Modal>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionTable.vue b/apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionTable.vue
new file mode 100644
index 000000000..46e1f9474
--- /dev/null
+++ b/apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionTable.vue
@@ -0,0 +1,317 @@
+<script setup lang="ts">
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
+
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { WebhookSubscriptionDto } from '../../types/subscriptions';
+
+import { defineAsyncComponent, h, ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { formatToDateTime } from '@abp/core';
+import { useTenantsApi } from '@abp/saas';
+import { useVbenVxeGrid } from '@abp/ui';
+import {
+  CheckOutlined,
+  CloseOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import { Button, message, Modal, Tag } from 'ant-design-vue';
+import debounce from 'lodash.debounce';
+
+import { useSubscriptionsApi } from '../../api/useSubscriptionsApi';
+import { WebhookSubscriptionPermissions } from '../../constants/permissions';
+
+defineOptions({
+  name: 'WebhookSubscriptionTable',
+});
+
+const { hasAccessByCodes } = useAccess();
+const { getPagedListApi: getTenantsApi } = useTenantsApi();
+const { cancel, deleteApi, getAllAvailableWebhooksApi, getPagedListApi } =
+  useSubscriptionsApi();
+
+const tenantFilter = ref<string>();
+const selectedKeys = ref<string[]>([]);
+
+const formOptions: VbenFormProps = {
+  collapsed: true,
+  collapsedRows: 2,
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  fieldMappingTime: [
+    [
+      'creationTime',
+      ['beginCreationTime', 'endCreationTime'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
+  schema: [
+    {
+      component: 'ApiSelect',
+      componentProps: () => {
+        return {
+          allowClear: true,
+          api: getTenantsApi,
+          filterOption: false,
+          labelField: 'normalizedName',
+          onSearch: debounce((filter?: string) => {
+            tenantFilter.value = filter;
+          }, 500),
+          params: {
+            filter: tenantFilter.value || undefined,
+          },
+          resultField: 'items',
+          showSearch: true,
+          valueField: 'id',
+        };
+      },
+      fieldName: 'tenantId',
+      label: $t('WebhooksManagement.DisplayName:TenantId'),
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: onInitWebhooks,
+        filterOption: (onputValue: string, option: any) => {
+          return option.label.includes(onputValue);
+        },
+        showSearch: true,
+      },
+      fieldName: 'webhooks',
+      label: $t('WebhooksManagement.DisplayName:Webhooks'),
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'creationTime',
+      label: $t('WebhooksManagement.DisplayName:CreationTime'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'webhookUri',
+      formItemClass: 'col-span-2 items-baseline',
+      label: $t('WebhooksManagement.DisplayName:WebhookUri'),
+    },
+    {
+      component: 'Checkbox',
+      fieldName: 'isActive',
+      label: $t('WebhooksManagement.DisplayName:IsActive'),
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+      },
+      fieldName: 'filter',
+      formItemClass: 'col-span-3 items-baseline',
+      label: $t('AbpUi.Search'),
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<WebhookSubscriptionDto> = {
+  columns: [
+    {
+      align: 'center',
+      fixed: 'left',
+      type: 'checkbox',
+      width: 40,
+    },
+    {
+      align: 'left',
+      field: 'isActive',
+      fixed: 'left',
+      minWidth: 150,
+      slots: { default: 'isActive' },
+      title: $t('WebhooksManagement.DisplayName:IsActive'),
+    },
+    {
+      align: 'left',
+      field: 'tenantId',
+      fixed: 'left',
+      minWidth: 150,
+      title: $t('WebhooksManagement.DisplayName:TenantId'),
+    },
+    {
+      align: 'left',
+      field: 'webhookUri',
+      fixed: 'left',
+      minWidth: 300,
+      title: $t('WebhooksManagement.DisplayName:WebhookUri'),
+    },
+    {
+      align: 'left',
+      field: 'description',
+      minWidth: 150,
+      title: $t('WebhooksManagement.DisplayName:Description'),
+    },
+    {
+      align: 'left',
+      field: 'creationTime',
+      formatter({ cellValue }) {
+        return cellValue ? formatToDateTime(cellValue) : '';
+      },
+      minWidth: 120,
+      title: $t('WebhooksManagement.DisplayName:CreationTime'),
+    },
+    {
+      align: 'left',
+      field: 'webhooks',
+      minWidth: 150,
+      slots: { default: 'webhooks' },
+      title: $t('WebhooksManagement.DisplayName:Webhooks'),
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: $t('AbpUi.Actions'),
+      width: 200,
+    },
+  ],
+  exportConfig: {},
+  keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await getPagedListApi({
+          maxResultCount: page.pageSize,
+          skipCount: (page.currentPage - 1) * page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    // import: true,
+    refresh: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: VxeGridListeners<WebhookSubscriptionDto> = {
+  checkboxAll: (params) => {
+    selectedKeys.value = params.records.map((record) => record.id);
+  },
+  checkboxChange: (params) => {
+    selectedKeys.value = params.records.map((record) => record.id);
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+const [WebhookSubscriptionModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./WebhookSubscriptionModal.vue'),
+  ),
+});
+
+async function onInitWebhooks() {
+  if (hasAccessByCodes([WebhookSubscriptionPermissions.Default])) {
+    const { items } = await getAllAvailableWebhooksApi();
+    return items.map((group) => {
+      return {
+        label: group.displayName,
+        options: group.webhooks.map((p) => {
+          return {
+            label: p.displayName,
+            value: p.name,
+          };
+        }),
+        value: group.name,
+      };
+    });
+  }
+  return [];
+}
+
+function onCreate() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+function onUpdate(row: WebhookSubscriptionDto) {
+  modalApi.setData(row);
+  modalApi.open();
+}
+
+function onDelete(row: WebhookSubscriptionDto) {
+  Modal.confirm({
+    centered: true,
+    content: $t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.title]),
+    onCancel: () => {
+      cancel();
+    },
+    onOk: async () => {
+      await deleteApi(row.id);
+      message.success($t('AbpUi.DeletedSuccessfully'));
+      await gridApi.query();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+</script>
+
+<template>
+  <Grid :table-title="$t('WebhooksManagement.Subscriptions')">
+    <template #toolbar-tools>
+      <Button :icon="h(PlusOutlined)" type="primary" @click="onCreate">
+        {{ $t('WebhooksManagement.Subscriptions:AddNew') }}
+      </Button>
+    </template>
+    <template #isActive="{ row }">
+      <div class="flex flex-row justify-center">
+        <CheckOutlined v-if="row.isActive" class="text-green-500" />
+        <CloseOutlined v-else class="text-red-500" />
+      </div>
+    </template>
+    <template #webhooks="{ row }">
+      <div class="flex flex-row justify-center gap-1">
+        <template v-for="webhook in row.webhooks" :key="webhook">
+          <Tag color="blue">{{ webhook }}</Tag>
+        </template>
+      </div>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <Button :icon="h(EditOutlined)" type="link" @click="onUpdate(row)">
+          {{ $t('AbpUi.Edit') }}
+        </Button>
+        <Button
+          :icon="h(DeleteOutlined)"
+          danger
+          type="link"
+          @click="onDelete(row)"
+        >
+          {{ $t('AbpUi.Delete') }}
+        </Button>
+      </div>
+    </template>
+  </Grid>
+  <WebhookSubscriptionModal @change="() => gridApi.query()" />
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/vben5/packages/@abp/webhooks/src/constants/permissions.ts b/apps/vben5/packages/@abp/webhooks/src/constants/permissions.ts
index 73156c1b8..f64defbbc 100644
--- a/apps/vben5/packages/@abp/webhooks/src/constants/permissions.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/constants/permissions.ts
@@ -19,3 +19,14 @@ export const WebhookDefinitionsPermissions = {
   /** 更新 */
   Update: 'AbpWebhooks.Definitions.Update',
 };
+
+/** Webhook订阅权限 */
+export const WebhookSubscriptionPermissions = {
+  /** 新增 */
+  Create: 'AbpWebhooks.Subscriptions.Create',
+  Default: 'AbpWebhooks.Subscriptions',
+  /** 删除 */
+  Delete: 'AbpWebhooks.Subscriptions.Delete',
+  /** 更新 */
+  Update: 'AbpWebhooks.Subscriptions.Update',
+};
diff --git a/apps/vben5/packages/@abp/webhooks/src/types/index.ts b/apps/vben5/packages/@abp/webhooks/src/types/index.ts
index 6a41718f6..2815a630b 100644
--- a/apps/vben5/packages/@abp/webhooks/src/types/index.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/types/index.ts
@@ -1,2 +1,3 @@
 export * from './definitions';
 export * from './groups';
+export * from './subscriptions';
diff --git a/apps/vben5/packages/@abp/webhooks/src/types/subscriptions.ts b/apps/vben5/packages/@abp/webhooks/src/types/subscriptions.ts
new file mode 100644
index 000000000..e88459dfb
--- /dev/null
+++ b/apps/vben5/packages/@abp/webhooks/src/types/subscriptions.ts
@@ -0,0 +1,73 @@
+import type {
+  CreationAuditedEntityDto,
+  IHasConcurrencyStamp,
+  PagedAndSortedResultRequestDto,
+} from '@abp/core';
+
+interface WebhookSubscriptionDto
+  extends CreationAuditedEntityDto<string>,
+    IHasConcurrencyStamp {
+  description?: string;
+  headers?: Record<string, string>;
+  isActive: boolean;
+  secret?: string;
+  tenantId?: string;
+  timeoutDuration?: number;
+  webhooks: string[];
+  webhookUri: string;
+}
+
+interface WebhookSubscriptionCreateOrUpdateDto {
+  description?: string;
+  headers?: Record<string, string>;
+  isActive: boolean;
+  secret?: string;
+  tenantId?: string;
+  timeoutDuration?: number;
+  webhooks: string[];
+  webhookUri: string;
+}
+
+type WebhookSubscriptionCreateDto = WebhookSubscriptionCreateOrUpdateDto;
+
+interface WebhookSubscriptionUpdateDto
+  extends IHasConcurrencyStamp,
+    WebhookSubscriptionCreateOrUpdateDto {}
+
+interface WebhookSubscriptionDeleteManyInput {
+  recordIds: string[];
+}
+
+interface WebhookSubscriptionGetListInput
+  extends PagedAndSortedResultRequestDto {
+  beginCreationTime?: Date;
+  endCreationTime?: Date;
+  filter?: string;
+  isActive?: boolean;
+  secret?: string;
+  tenantId?: string;
+  webhooks?: string;
+  webhookUri?: string;
+}
+
+interface WebhookAvailableDto {
+  description?: string;
+  displayName: string;
+  name: string;
+}
+
+interface WebhookAvailableGroupDto {
+  displayName: string;
+  name: string;
+  webhooks: WebhookAvailableDto[];
+}
+
+export type {
+  WebhookAvailableDto,
+  WebhookAvailableGroupDto,
+  WebhookSubscriptionCreateDto,
+  WebhookSubscriptionDeleteManyInput,
+  WebhookSubscriptionDto,
+  WebhookSubscriptionGetListInput,
+  WebhookSubscriptionUpdateDto,
+};