From b9b075274dfa0f6f09e3d780ccd6194819c4fdc9 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Sat, 21 Dec 2024 16:25:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(openiddict):=20=E5=A2=9E=E5=8A=A0applicati?=
 =?UTF-8?q?ons=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/vben5/apps/app-antd/vite.config.mts      |   7 +
 .../packages/@abp/core/src/types/index.ts     |   1 +
 .../packages/@abp/core/src/types/openid.ts    |  28 ++
 .../packages/@abp/openiddict/package.json     |   3 +-
 .../@abp/openiddict/src/api/openid.ts         |  13 +
 .../applications/ApplicationModal.vue         | 446 +++++++++++++++++-
 .../applications/ApplicationTable.vue         | 220 ++++++++-
 .../display-names/DisplayNameModal.vue        |  81 ++++
 .../display-names/DisplayNameTable.vue        | 103 ++++
 .../src/components/display-names/types.ts     |  11 +
 .../components/properties/PropertyModal.vue   |  66 +++
 .../components/properties/PropertyTable.vue   | 101 ++++
 .../src/components/properties/types.ts        |  11 +
 .../src/components/uris/UriModal.vue          |  52 ++
 .../src/components/uris/UriTable.vue          | 106 +++++
 .../openiddict/src/constants/permissions.ts   |   4 +-
 16 files changed, 1245 insertions(+), 8 deletions(-)
 create mode 100644 apps/vben5/packages/@abp/core/src/types/openid.ts
 create mode 100644 apps/vben5/packages/@abp/openiddict/src/api/openid.ts
 create mode 100644 apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameModal.vue
 create mode 100644 apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameTable.vue
 create mode 100644 apps/vben5/packages/@abp/openiddict/src/components/display-names/types.ts
 create mode 100644 apps/vben5/packages/@abp/openiddict/src/components/properties/PropertyModal.vue
 create mode 100644 apps/vben5/packages/@abp/openiddict/src/components/properties/PropertyTable.vue
 create mode 100644 apps/vben5/packages/@abp/openiddict/src/components/properties/types.ts
 create mode 100644 apps/vben5/packages/@abp/openiddict/src/components/uris/UriModal.vue
 create mode 100644 apps/vben5/packages/@abp/openiddict/src/components/uris/UriTable.vue

diff --git a/apps/vben5/apps/app-antd/vite.config.mts b/apps/vben5/apps/app-antd/vite.config.mts
index 4ccb102a9..9ac834557 100644
--- a/apps/vben5/apps/app-antd/vite.config.mts
+++ b/apps/vben5/apps/app-antd/vite.config.mts
@@ -6,6 +6,13 @@ export default defineConfig(async () => {
     vite: {
       server: {
         proxy: {
+          '/.well-known': {
+            changeOrigin: true,
+            // rewrite: (path) => path.replace(/^\/api/, ''),
+            // mock代理目标地址
+            target: 'http://127.0.0.1:30001/',
+            ws: true,
+          },
           '/api': {
             changeOrigin: true,
             // rewrite: (path) => path.replace(/^\/api/, ''),
diff --git a/apps/vben5/packages/@abp/core/src/types/index.ts b/apps/vben5/packages/@abp/core/src/types/index.ts
index cde3fc4a5..b34d7c5f1 100644
--- a/apps/vben5/packages/@abp/core/src/types/index.ts
+++ b/apps/vben5/packages/@abp/core/src/types/index.ts
@@ -1,6 +1,7 @@
 export * from './dto';
 export * from './global';
 export * from './localization';
+export * from './openid';
 export * from './rules';
 export * from './settings';
 export * from './table';
diff --git a/apps/vben5/packages/@abp/core/src/types/openid.ts b/apps/vben5/packages/@abp/core/src/types/openid.ts
new file mode 100644
index 000000000..e5bfca3f8
--- /dev/null
+++ b/apps/vben5/packages/@abp/core/src/types/openid.ts
@@ -0,0 +1,28 @@
+interface OpenIdConfiguration {
+  authorization_endpoint: string;
+  backchannel_logout_session_supported: boolean;
+  backchannel_logout_supported: boolean;
+  check_session_iframe: string;
+  claims_supported: string[];
+  code_challenge_methods_supported: string[];
+  device_authorization_endpoint: string;
+  end_session_endpoint: string;
+  frontchannel_logout_session_supported: boolean;
+  frontchannel_logout_supported: boolean;
+  grant_types_supported: string[];
+  id_token_signing_alg_values_supported: string[];
+  introspection_endpoint: string;
+  issuer: string;
+  jwks_uri: string;
+  request_parameter_supported: boolean;
+  response_modes_supported: string[];
+  response_types_supported: string[];
+  revocation_endpoint: string;
+  scopes_supported: string[];
+  subject_types_supported: string[];
+  token_endpoint: string;
+  token_endpoint_auth_methods_supported: string[];
+  userinfo_endpoint: string;
+}
+
+export type { OpenIdConfiguration };
diff --git a/apps/vben5/packages/@abp/openiddict/package.json b/apps/vben5/packages/@abp/openiddict/package.json
index 2824afaf8..6b7e75727 100644
--- a/apps/vben5/packages/@abp/openiddict/package.json
+++ b/apps/vben5/packages/@abp/openiddict/package.json
@@ -32,6 +32,7 @@
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
     "ant-design-vue": "catalog:",
-    "vue": "catalog:*"
+    "vue": "catalog:*",
+    "vxe-table": "catalog:"
   }
 }
diff --git a/apps/vben5/packages/@abp/openiddict/src/api/openid.ts b/apps/vben5/packages/@abp/openiddict/src/api/openid.ts
new file mode 100644
index 000000000..b9eec4dc6
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/api/openid.ts
@@ -0,0 +1,13 @@
+import type { OpenIdConfiguration } from '@abp/core';
+
+import { requestClient } from '@abp/request';
+
+/**
+ * openid发现端点
+ * @returns OpenId配置数据
+ */
+export function discoveryApi(): Promise<OpenIdConfiguration> {
+  return requestClient.get<OpenIdConfiguration>(
+    '/.well-known/openid-configuration',
+  );
+}
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationModal.vue b/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationModal.vue
index 1017376d1..48234d459 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationModal.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationModal.vue
@@ -1,7 +1,449 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { OpenIdConfiguration } from '@abp/core';
+import type { FormInstance } from 'ant-design-vue';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import type { DefaultOptionType } from 'ant-design-vue/es/select';
+import type { TransferItem } from 'ant-design-vue/es/transfer';
+
+import type { OpenIddictApplicationDto } from '../../types/applications';
+import type { DisplayNameInfo } from '../display-names/types';
+import type { PropertyInfo } from '../properties/types';
+
+import {
+  type Component,
+  computed,
+  defineAsyncComponent,
+  defineEmits,
+  defineOptions,
+  reactive,
+  ref,
+  shallowRef,
+  toValue,
+} from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { DownOutlined } from '@ant-design/icons-vue';
+import {
+  Dropdown,
+  Form,
+  Input,
+  InputPassword,
+  Menu,
+  message,
+  Select,
+  Tabs,
+  Transfer,
+} from 'ant-design-vue';
+
+import { createApi, getApi, updateApi } from '../../api/applications';
+import { discoveryApi } from '../../api/openid';
+import DisplayNameTable from '../display-names/DisplayNameTable.vue';
+import PropertyTable from '../properties/PropertyTable.vue';
+
+defineOptions({
+  name: 'ApplicationModal',
+});
+const emits = defineEmits<{
+  (event: 'change', data: OpenIddictApplicationDto): void;
+}>();
+
+const FormItem = Form.Item;
+const MenuItem = Menu.Item;
+const TabPane = Tabs.TabPane;
+
+type TabKeys =
+  | 'authorize'
+  | 'basic'
+  | 'dispalyName'
+  | 'endpoint'
+  | 'props'
+  | 'scope';
+
+const defaultModel = {
+  applicationType: 'web',
+  clientType: 'public',
+  consentType: 'explicit',
+} as OpenIddictApplicationDto;
+
+const form = ref<FormInstance>();
+const formModel = ref<OpenIddictApplicationDto>({ ...defaultModel });
+const openIdConfiguration = ref<OpenIdConfiguration>();
+const activeTab = ref<TabKeys>('basic');
+
+const uriComponentState = reactive<{
+  component: string;
+  title: string;
+  uris?: string[];
+}>({
+  component: 'RedirectUris',
+  title: $t('AbpOpenIddict.DisplayName:RedirectUris'),
+  uris: [],
+});
+const uriComponentMap = shallowRef<{
+  [key: string]: Component;
+}>({
+  PostLogoutRedirectUris: defineAsyncComponent(
+    () => import('../uris/UriTable.vue'),
+  ),
+  RedirectUris: defineAsyncComponent(() => import('../uris/UriTable.vue')),
+});
+const clientTypes = reactive<DefaultOptionType[]>([
+  { label: 'public', value: 'public' },
+  { label: 'confidential', value: 'confidential' },
+]);
+const applicationTypes = reactive<DefaultOptionType[]>([
+  { label: 'Web', value: 'web' },
+  { label: 'Native', value: 'native' },
+]);
+const consentTypes = reactive<DefaultOptionType[]>([
+  { label: 'explicit', value: 'explicit' },
+  { label: 'external', value: 'external' },
+  { label: 'implicit', value: 'implicit' },
+  { label: 'systematic', value: 'systematic' },
+]);
+const endpoints = reactive<DefaultOptionType[]>([
+  { label: 'authorization', value: 'authorization' },
+  { label: 'token', value: 'token' },
+  { label: 'logout', value: 'logout' },
+  { label: 'device', value: 'device' },
+  { label: 'revocation', value: 'revocation' },
+  { label: 'introspection', value: 'introspection' },
+]);
+const getGrantTypes = computed(() => {
+  const types = openIdConfiguration.value?.grant_types_supported ?? [];
+  return types.map((type) => {
+    return {
+      label: type,
+      value: type,
+    };
+  });
+});
+const getResponseTypes = computed(() => {
+  const types = openIdConfiguration.value?.response_types_supported ?? [];
+  return types.map((type) => {
+    return {
+      label: type,
+      value: type,
+    };
+  });
+});
+const getSupportScopes = computed((): TransferItem[] => {
+  const types = openIdConfiguration.value?.scopes_supported ?? [];
+  return types.map((type) => {
+    return {
+      key: type,
+      title: type,
+    };
+  });
+});
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await form.value?.validate();
+    const api = formModel.value.id
+      ? updateApi(formModel.value.id, toValue(formModel))
+      : createApi(toValue(formModel));
+    modalApi.setState({ confirmLoading: true, loading: true });
+    api
+      .then((res) => {
+        message.success($t('AbpUi.SavedSuccessfully'));
+        emits('change', res);
+        modalApi.close();
+      })
+      .finally(() => {
+        modalApi.setState({ confirmLoading: false, loading: false });
+      });
+  },
+  onOpenChange: async (isOpen: boolean) => {
+    if (isOpen) {
+      activeTab.value = 'basic';
+      formModel.value = { ...defaultModel };
+      uriComponentState.uris = [];
+      uriComponentState.component = 'RedirectUris';
+      modalApi.setState({
+        title: $t('AbpOpenIddict.Applications:AddNew'),
+      });
+      try {
+        modalApi.setState({ loading: true });
+        await onDiscovery();
+        const claimTypeDto = modalApi.getData<OpenIddictApplicationDto>();
+        if (claimTypeDto?.id) {
+          const dto = await getApi(claimTypeDto.id);
+          formModel.value = dto;
+          uriComponentState.uris = dto.redirectUris;
+          modalApi.setState({
+            title: `${$t('AbpOpenIddict.Applications')} - ${dto.clientId}`,
+          });
+        }
+      } finally {
+        modalApi.setState({ loading: false });
+      }
+    }
+  },
+  title: 'ClaimType',
+});
+async function onDiscovery() {
+  openIdConfiguration.value = await discoveryApi();
+}
+function onDisplayNameChange(displayName: DisplayNameInfo) {
+  formModel.value.displayNames ??= {};
+  formModel.value.displayNames[displayName.culture] = displayName.displayName;
+}
+function onDisplayNameDelete(displayName: DisplayNameInfo) {
+  formModel.value.displayNames ??= {};
+  delete formModel.value.displayNames[displayName.culture];
+}
+function onPropChange(prop: PropertyInfo) {
+  formModel.value.properties ??= {};
+  formModel.value.properties[prop.key] = prop.value;
+}
+function onPropDelete(prop: PropertyInfo) {
+  formModel.value.properties ??= {};
+  delete formModel.value.properties[prop.key];
+}
+function onSwitchUri(info: MenuInfo) {
+  activeTab.value = 'endpoint';
+  const eventKey = String(info.key);
+  switch (eventKey) {
+    case 'PostLogoutRedirectUris': {
+      uriComponentState.uris = formModel.value.postLogoutRedirectUris;
+      uriComponentState.title = $t(
+        'AbpOpenIddict.DisplayName:PostLogoutRedirectUris',
+      );
+      break;
+    }
+    case 'RedirectUris': {
+      uriComponentState.uris = formModel.value.redirectUris;
+      uriComponentState.title = $t('AbpOpenIddict.DisplayName:RedirectUris');
+      break;
+    }
+  }
+  uriComponentState.component = eventKey;
+}
+function onUriChange(uri: string) {
+  switch (uriComponentState.component) {
+    case 'PostLogoutRedirectUris': {
+      formModel.value.postLogoutRedirectUris ??= [];
+      formModel.value.postLogoutRedirectUris.push(uri);
+      break;
+    }
+    case 'RedirectUris': {
+      formModel.value.redirectUris ??= [];
+      formModel.value.redirectUris.push(uri);
+      break;
+    }
+  }
+}
+function onUriDelete(uri: string) {
+  switch (uriComponentState.component) {
+    case 'PostLogoutRedirectUris': {
+      formModel.value.postLogoutRedirectUris ??= [];
+      formModel.value.postLogoutRedirectUris =
+        formModel.value.postLogoutRedirectUris.filter((item) => item !== uri);
+      uriComponentState.uris = formModel.value.postLogoutRedirectUris;
+      break;
+    }
+    case 'RedirectUris': {
+      formModel.value.redirectUris ??= [];
+      formModel.value.redirectUris = formModel.value.redirectUris.filter(
+        (item) => item !== uri,
+      );
+      uriComponentState.uris = formModel.value.redirectUris;
+      break;
+    }
+  }
+}
+</script>
 
 <template>
-  <div></div>
+  <Modal>
+    <Form
+      ref="form"
+      :label-col="{ span: 6 }"
+      :model="formModel"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Tabs v-model:active-key="activeTab">
+        <!-- 基本信息 -->
+        <TabPane key="basic" :tab="$t('AbpOpenIddict.BasicInfo')">
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:ApplicationType')"
+            name="applicationType"
+            required
+          >
+            <Select
+              v-model:value="formModel.applicationType"
+              :options="applicationTypes"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:ClientId')"
+            name="clientId"
+            required
+          >
+            <Input v-model:value="formModel.clientId" autocomplete="off" />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:ClientType')"
+            name="clientType"
+          >
+            <Select
+              v-model:value="formModel.clientType"
+              :options="clientTypes"
+            />
+          </FormItem>
+          <FormItem
+            v-if="!formModel.id && formModel.clientType === 'confidential'"
+            :label="$t('AbpOpenIddict.DisplayName:ClientSecret')"
+            name="clientSecret"
+          >
+            <InputPassword
+              v-model:value="formModel.clientSecret"
+              autocomplete="off"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:ClientUri')"
+            name="clientUri"
+          >
+            <Input v-model:value="formModel.clientUri" />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:LogoUri')"
+            name="logoUri"
+          >
+            <Input v-model:value="formModel.logoUri" autocomplete="off" />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:ConsentType')"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
+            name="consentType"
+          >
+            <Select
+              v-model:value="formModel.consentType"
+              :options="consentTypes"
+              default-value="explicit"
+            />
+          </FormItem>
+        </TabPane>
+        <!-- 显示名称 -->
+        <TabPane key="dispalyName" :tab="$t('AbpOpenIddict.DisplayNames')">
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:DefaultDisplayName')"
+            name="displayName"
+          >
+            <Input v-model:value="formModel.displayName" autocomplete="off" />
+          </FormItem>
+          <DisplayNameTable
+            :data="formModel.displayNames"
+            @change="onDisplayNameChange"
+            @delete="onDisplayNameDelete"
+          />
+        </TabPane>
+        <!-- 端点 -->
+        <TabPane key="endpoint">
+          <template #tab>
+            <Dropdown>
+              <span>
+                {{ $t('AbpOpenIddict.Endpoints') }}
+                <DownOutlined />
+              </span>
+              <template #overlay>
+                <Menu @click="onSwitchUri">
+                  <MenuItem key="RedirectUris">
+                    {{ $t('AbpOpenIddict.DisplayName:RedirectUris') }}
+                  </MenuItem>
+                  <MenuItem key="PostLogoutRedirectUris">
+                    {{ $t('AbpOpenIddict.DisplayName:PostLogoutRedirectUris') }}
+                  </MenuItem>
+                </Menu>
+              </template>
+            </Dropdown>
+          </template>
+          <component
+            :is="uriComponentMap[uriComponentState.component]"
+            :title="uriComponentState.title"
+            :uris="uriComponentState.uris"
+            @change="onUriChange"
+            @delete="onUriDelete"
+          />
+        </TabPane>
+        <!-- 范围 -->
+        <TabPane key="scope" :tab="$t('AbpOpenIddict.Scopes')">
+          <Transfer
+            v-model:target-keys="formModel.scopes"
+            :data-source="getSupportScopes"
+            :list-style="{
+              width: '47%',
+              height: '338px',
+            }"
+            :render="(item) => item.title"
+            :titles="[
+              $t('AbpOpenIddict.Assigned'),
+              $t('AbpOpenIddict.Available'),
+            ]"
+            class="tree-transfer"
+          />
+        </TabPane>
+        <!-- 授权 -->
+        <TabPane key="authorize" :tab="$t('AbpOpenIddict.Authorizations')">
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:Endpoints')"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
+            name="endpoints"
+          >
+            <Select
+              v-model:value="formModel.endpoints"
+              :options="endpoints"
+              mode="tags"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:GrantTypes')"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
+            name="grantTypes"
+          >
+            <Select
+              v-model:value="formModel.grantTypes"
+              :options="getGrantTypes"
+              mode="tags"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:ResponseTypes')"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
+            name="responseTypes"
+          >
+            <Select
+              v-model:value="formModel.responseTypes"
+              :options="getResponseTypes"
+              mode="tags"
+            />
+          </FormItem>
+        </TabPane>
+        <!-- 属性 -->
+        <TabPane key="props" :tab="$t('AbpOpenIddict.Propertites')">
+          <PropertyTable
+            :data="formModel.properties"
+            @change="onPropChange"
+            @delete="onPropDelete"
+          />
+        </TabPane>
+      </Tabs>
+    </Form>
+  </Modal>
 </template>
 
 <style scoped></style>
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationTable.vue b/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationTable.vue
index 1017376d1..a39cd03bd 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationTable.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationTable.vue
@@ -1,7 +1,221 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { VbenFormProps, VxeGridProps } from '@abp/ui';
+
+import type { OpenIddictApplicationDto } from '../../types/applications';
+
+import { defineAsyncComponent, h } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal } from '@vben/common-ui';
+import { createIconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { useVbenVxeGrid } from '@abp/ui';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { deleteApi, getPagedListApi } from '../../api/applications';
+import { ApplicationsPermissions } from '../../constants/permissions';
+
+defineOptions({
+  name: 'ApplicationTable',
+});
+
+const CheckIcon = createIconifyIcon('ant-design:check-outlined');
+const CloseIcon = createIconifyIcon('ant-design:close-outlined');
+
+const { hasAccessByCodes } = useAccess();
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'filter',
+      formItemClass: 'col-span-2 items-baseline',
+      label: $t('AbpUi.Search'),
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<OpenIddictApplicationDto> = {
+  columns: [
+    {
+      align: 'left',
+      field: 'clientId',
+      minWidth: 150,
+      title: $t('AbpOpenIddict.DisplayName:ClientId'),
+    },
+    {
+      align: 'left',
+      field: 'displayName',
+      minWidth: 150,
+      title: $t('AbpOpenIddict.DisplayName:DisplayName'),
+    },
+    {
+      align: 'center',
+      field: 'consentType',
+      title: $t('AbpOpenIddict.DisplayName:ConsentType'),
+      width: 200,
+    },
+    {
+      align: 'center',
+      field: 'clientType',
+      title: $t('AbpOpenIddict.DisplayName:ClientType'),
+      width: 120,
+    },
+    {
+      align: 'center',
+      field: 'applicationType',
+      title: $t('AbpOpenIddict.DisplayName:ApplicationType'),
+      width: 150,
+    },
+    {
+      align: 'left',
+      field: 'clientUri',
+      title: $t('AbpOpenIddict.DisplayName:ClientUri'),
+      width: 150,
+    },
+    {
+      align: 'left',
+      field: 'logoUri',
+      title: $t('AbpOpenIddict.DisplayName:LogoUri'),
+      width: 120,
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: $t('AbpUi.Actions'),
+      visible: hasAccessByCodes([
+        ApplicationsPermissions.Update,
+        ApplicationsPermissions.Delete,
+      ]),
+      width: 180,
+    },
+  ],
+  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 [ApplicationModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./ApplicationModal.vue'),
+  ),
+});
+const [Grid, { query }] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const onCreate = () => {
+  modalApi.setData({});
+  modalApi.open();
+};
+
+const onUpdate = (row: OpenIddictApplicationDto) => {
+  modalApi.setData(row);
+  modalApi.open();
+};
+
+const onDelete = (row: OpenIddictApplicationDto) => {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.clientId])}`,
+    onOk: () => {
+      return deleteApi(row.id).then(() => {
+        message.success($t('AbpUi.SuccessfullyDeleted'));
+        query();
+      });
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+};
+</script>
 
 <template>
-  <div></div>
+  <Grid :table-title="$t('AbpOpenIddict.Applications')">
+    <template #toolbar-tools>
+      <Button
+        :icon="h(PlusOutlined)"
+        type="primary"
+        v-access:code="[ApplicationsPermissions.Create]"
+        @click="onCreate"
+      >
+        {{ $t('AbpOpenIddict.Applications:AddNew') }}
+      </Button>
+    </template>
+    <template #required="{ row }">
+      <div class="flex flex-row justify-center">
+        <CheckIcon v-if="row.required" class="text-green-500" />
+        <CloseIcon v-else class="text-red-500" />
+      </div>
+    </template>
+    <template #static="{ row }">
+      <div class="flex flex-row justify-center">
+        <CheckIcon v-if="row.isStatic" class="text-green-500" />
+        <CloseIcon v-else class="text-red-500" />
+      </div>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <div class="basis-1/2">
+          <Button
+            :icon="h(EditOutlined)"
+            block
+            type="link"
+            v-access:code="[ApplicationsPermissions.Update]"
+            @click="onUpdate(row)"
+          >
+            {{ $t('AbpUi.Edit') }}
+          </Button>
+        </div>
+        <div class="basis-1/2">
+          <Button
+            :icon="h(DeleteOutlined)"
+            block
+            danger
+            type="link"
+            v-access:code="[ApplicationsPermissions.Delete]"
+            @click="onDelete(row)"
+          >
+            {{ $t('AbpUi.Delete') }}
+          </Button>
+        </div>
+      </div>
+    </template>
+  </Grid>
+  <ApplicationModal @change="() => query()" />
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped></style>
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameModal.vue b/apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameModal.vue
new file mode 100644
index 000000000..1ad77f819
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameModal.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { DisplayNameInfo } from './types';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useAbpStore } from '@abp/core';
+
+defineOptions({
+  name: 'DisplayNameModal',
+});
+
+const emits = defineEmits<{
+  (event: 'change', data: DisplayNameInfo): void;
+}>();
+
+const { application } = useAbpStore();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'Select',
+      componentProps: {
+        autocomplete: 'off',
+        fieldNames: {
+          label: 'displayName',
+          value: 'cultureName',
+        },
+        options: application?.localization.languages,
+      },
+      fieldName: 'culture',
+      label: $t('AbpOpenIddict.DisplayName:CultureName'),
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        autocomplete: 'off',
+      },
+      fieldName: 'displayName',
+      label: $t('AbpOpenIddict.DisplayName:DisplayName'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.validateAndSubmitForm();
+  },
+  title: $t('AbpOpenIddict.DisplayName.DisplayNames'),
+});
+function onSubmit(input: Record<string, any>) {
+  emits('change', {
+    culture: input.culture,
+    displayName: input.displayName,
+  });
+  modalApi.close();
+}
+</script>
+
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameTable.vue b/apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameTable.vue
new file mode 100644
index 000000000..2ac62bac1
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameTable.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { VxeGridPropTypes } from 'vxe-table';
+
+import type { DisplayNameInfo, DisplayNameProps } from './types';
+
+import { computed, defineAsyncComponent, h, reactive } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { Button, Popconfirm } from 'ant-design-vue';
+import { VxeGrid } from 'vxe-table';
+
+defineOptions({
+  name: 'DisplayNameTable',
+});
+
+const props = defineProps<DisplayNameProps>();
+const emits = defineEmits<{
+  (event: 'change', data: DisplayNameInfo): void;
+  (event: 'delete', data: DisplayNameInfo): void;
+}>();
+
+const getDataResource = computed((): DisplayNameInfo[] => {
+  if (!props.data) return [];
+  return Object.keys(props.data).map((item) => {
+    return {
+      culture: item,
+      displayName: props.data![item]!,
+    };
+  });
+});
+
+const columnsConfig = reactive<VxeGridPropTypes.Columns<DisplayNameInfo>>([
+  {
+    align: 'left',
+    field: 'culture',
+    minWidth: 200,
+    title: $t('AbpOpenIddict.DisplayName:CultureName'),
+  },
+  {
+    align: 'left',
+    field: 'displayName',
+    minWidth: 200,
+    title: $t('AbpOpenIddict.DisplayName:DisplayName'),
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: $t('AbpUi.Actions'),
+    width: 180,
+  },
+]);
+
+const [DisplayNameModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./DisplayNameModal.vue'),
+  ),
+});
+
+function onCreate() {
+  modalApi.open();
+}
+
+function onDelete(prop: DisplayNameInfo) {
+  emits('delete', prop);
+}
+
+function onChange(prop: DisplayNameInfo) {
+  emits('change', prop);
+}
+</script>
+
+<template>
+  <VxeGrid
+    :columns="columnsConfig"
+    :data="getDataResource"
+    :toolbar-config="{ slots: { tools: 'toolbar_tools' } }"
+  >
+    <template #toolbar_tools>
+      <Button :icon="h(PlusOutlined)" type="primary" @click="onCreate">
+        {{ $t('AbpOpenIddict.DisplayName:AddNew') }}
+      </Button>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <Popconfirm
+          :title="`${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.culture])}`"
+          @confirm="onDelete(row)"
+        >
+          <Button :icon="h(DeleteOutlined)" block danger type="link">
+            {{ $t('AbpUi.Delete') }}
+          </Button>
+        </Popconfirm>
+      </div>
+    </template>
+  </VxeGrid>
+  <DisplayNameModal @change="onChange" />
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/display-names/types.ts b/apps/vben5/packages/@abp/openiddict/src/components/display-names/types.ts
new file mode 100644
index 000000000..709e230cb
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/components/display-names/types.ts
@@ -0,0 +1,11 @@
+import type { Dictionary } from '@abp/core';
+
+interface DisplayNameInfo {
+  culture: string;
+  displayName: string;
+}
+interface DisplayNameProps {
+  data?: Dictionary<string, string>;
+}
+
+export type { DisplayNameInfo, DisplayNameProps };
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/properties/PropertyModal.vue b/apps/vben5/packages/@abp/openiddict/src/components/properties/PropertyModal.vue
new file mode 100644
index 000000000..2e58c12ee
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/components/properties/PropertyModal.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { PropertyInfo } from './types';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+defineOptions({
+  name: 'PropertyModal',
+});
+
+const emits = defineEmits<{
+  (event: 'change', data: PropertyInfo): void;
+}>();
+
+const [Form, formApi] = useVbenForm({
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        autocomplete: 'off',
+      },
+      fieldName: 'key',
+      label: $t('AbpOpenIddict.Propertites:Key'),
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        autocomplete: 'off',
+      },
+      fieldName: 'value',
+      label: $t('AbpOpenIddict.Propertites:Value'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.validateAndSubmitForm();
+  },
+  title: $t('AbpOpenIddict.Propertites'),
+});
+function onSubmit(input: Record<string, any>) {
+  emits('change', {
+    key: input.key,
+    value: input.value,
+  });
+  modalApi.close();
+}
+</script>
+
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/properties/PropertyTable.vue b/apps/vben5/packages/@abp/openiddict/src/components/properties/PropertyTable.vue
new file mode 100644
index 000000000..cd535e0fc
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/components/properties/PropertyTable.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { VxeGridPropTypes } from 'vxe-table';
+
+import type { PropertyInfo, PropertyProps } from './types';
+
+import { computed, defineAsyncComponent, h, reactive } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { Button, Popconfirm } from 'ant-design-vue';
+import { VxeGrid } from 'vxe-table';
+
+defineOptions({
+  name: 'PropertyTable',
+});
+
+const props = defineProps<PropertyProps>();
+const emits = defineEmits<{
+  (event: 'change', data: PropertyInfo): void;
+  (event: 'delete', data: PropertyInfo): void;
+}>();
+
+const getDataResource = computed((): PropertyInfo[] => {
+  if (!props.data) return [];
+  return Object.keys(props.data).map((item) => {
+    return {
+      key: item,
+      value: props.data![item]!,
+    };
+  });
+});
+
+const columnsConfig = reactive<VxeGridPropTypes.Columns<PropertyInfo>>([
+  {
+    align: 'left',
+    field: 'key',
+    minWidth: 200,
+    title: $t('AbpOpenIddict.Propertites:Key'),
+  },
+  {
+    align: 'left',
+    field: 'value',
+    minWidth: 200,
+    title: $t('AbpOpenIddict.Propertites:Value'),
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: $t('AbpUi.Actions'),
+    width: 180,
+  },
+]);
+
+const [PropertyModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(() => import('./PropertyModal.vue')),
+});
+
+function onCreate() {
+  modalApi.open();
+}
+
+function onDelete(prop: PropertyInfo) {
+  emits('delete', prop);
+}
+
+function onChange(prop: PropertyInfo) {
+  emits('change', prop);
+}
+</script>
+
+<template>
+  <VxeGrid
+    :columns="columnsConfig"
+    :data="getDataResource"
+    :toolbar-config="{ slots: { tools: 'toolbar_tools' } }"
+  >
+    <template #toolbar_tools>
+      <Button :icon="h(PlusOutlined)" type="primary" @click="onCreate">
+        {{ $t('AbpOpenIddict.Propertites:New') }}
+      </Button>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <Popconfirm
+          :title="`${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.key])}`"
+          @confirm="onDelete(row)"
+        >
+          <Button :icon="h(DeleteOutlined)" block danger type="link">
+            {{ $t('AbpUi.Delete') }}
+          </Button>
+        </Popconfirm>
+      </div>
+    </template>
+  </VxeGrid>
+  <PropertyModal @change="onChange" />
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/properties/types.ts b/apps/vben5/packages/@abp/openiddict/src/components/properties/types.ts
new file mode 100644
index 000000000..5ab5c256b
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/components/properties/types.ts
@@ -0,0 +1,11 @@
+import type { Dictionary } from '@abp/core';
+
+interface PropertyInfo {
+  key: string;
+  value: string;
+}
+interface PropertyProps {
+  data?: Dictionary<string, string>;
+}
+
+export type { PropertyInfo, PropertyProps };
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/uris/UriModal.vue b/apps/vben5/packages/@abp/openiddict/src/components/uris/UriModal.vue
new file mode 100644
index 000000000..4302457f6
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/components/uris/UriModal.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+defineOptions({
+  name: 'UriModal',
+});
+
+const emits = defineEmits<{
+  (event: 'change', data: string): void;
+}>();
+
+const [Form, formApi] = useVbenForm({
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        autocomplete: 'off',
+      },
+      fieldName: 'uri',
+      label: 'Uri',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.validateAndSubmitForm();
+  },
+  title: $t('AbpOpenIddict.Uri:AddNew'),
+});
+function onSubmit(input: Record<string, any>) {
+  emits('change', input.uri);
+  modalApi.close();
+}
+</script>
+
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/uris/UriTable.vue b/apps/vben5/packages/@abp/openiddict/src/components/uris/UriTable.vue
new file mode 100644
index 000000000..956dea577
--- /dev/null
+++ b/apps/vben5/packages/@abp/openiddict/src/components/uris/UriTable.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { VxeGridPropTypes } from 'vxe-table';
+
+import { computed, defineAsyncComponent, h, reactive } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { Button, Popconfirm } from 'ant-design-vue';
+import { VxeGrid } from 'vxe-table';
+
+defineOptions({
+  name: 'UriTable',
+});
+
+const props = defineProps<{
+  title: string;
+  uris?: string[];
+}>();
+
+const emits = defineEmits<{
+  (event: 'change', uri: string): void;
+  (event: 'delete', uri: string): void;
+}>();
+
+interface Uri {
+  uri: string;
+}
+
+const getDataResource = computed((): Uri[] => {
+  if (!props.uris) return [];
+  return props.uris.map((uri) => {
+    return { uri };
+  });
+});
+
+const columnsConfig = reactive<VxeGridPropTypes.Columns<Uri>>([
+  {
+    align: 'left',
+    field: 'uri',
+    title: 'Uri',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: $t('AbpUi.Actions'),
+    width: 180,
+  },
+]);
+const toolbarConfig = reactive<VxeGridPropTypes.ToolbarConfig>({
+  slots: {
+    buttons: 'toolbar_buttons',
+    tools: 'toolbar_tools',
+  },
+});
+
+const [UriModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(() => import('./UriModal.vue')),
+});
+
+function onCreate() {
+  modalApi.open();
+}
+
+function onDelete(uri: Uri) {
+  emits('delete', uri.uri);
+}
+
+function onChange(uri: string) {
+  emits('change', uri);
+}
+</script>
+
+<template>
+  <VxeGrid
+    :columns="columnsConfig"
+    :data="getDataResource"
+    :toolbar-config="toolbarConfig"
+  >
+    <template #toolbar_buttons>
+      <h3>{{ title }}</h3>
+    </template>
+    <template #toolbar_tools>
+      <Button :icon="h(PlusOutlined)" type="primary" @click="onCreate">
+        {{ $t('AbpOpenIddict.Uri:AddNew') }}
+      </Button>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <Popconfirm
+          :title="`${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.uri])}`"
+          @confirm="onDelete(row)"
+        >
+          <Button :icon="h(DeleteOutlined)" block danger type="link">
+            {{ $t('AbpUi.Delete') }}
+          </Button>
+        </Popconfirm>
+      </div>
+    </template>
+  </VxeGrid>
+  <UriModal @change="onChange" />
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/openiddict/src/constants/permissions.ts b/apps/vben5/packages/@abp/openiddict/src/constants/permissions.ts
index dddd70bbb..a62eeeebf 100644
--- a/apps/vben5/packages/@abp/openiddict/src/constants/permissions.ts
+++ b/apps/vben5/packages/@abp/openiddict/src/constants/permissions.ts
@@ -1,5 +1,5 @@
-/** 用户权限 */
-export const IdentityUserPermissions = {
+/** 应用权限 */
+export const ApplicationsPermissions = {
   /** 新增 */
   Create: 'AbpOpenIddict.Applications.Create',
   Default: 'AbpOpenIddict.Applications',