From 657e57d92df6c3ff1d4a45c2be28491f08d0ad5e Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Sat, 25 Apr 2026 08:23:57 +0800
Subject: [PATCH] feat(vben5): Optimize the custom provider selection options

---
 .../vben5/apps/app-antd/src/layouts/basic.vue |  21 +-
 apps/vben5/apps/app-antd/src/store/auth.ts    |  17 +-
 apps/vben5/apps/app-antd/src/timezone-init.ts |   9 +-
 .../src/api/useFeatureDefinitionsApi.ts       |  18 +-
 .../features/FeatureDefinitionModal.vue       |  32 ++-
 .../features/FeatureDefinitionTable.vue       |  56 +++++-
 .../src/components/features/FeatureGroup.vue  |  32 +++
 .../src/components/features/FeatureInput.vue  | 133 +++++++++++++
 .../components/features/FeatureTreeNode.vue   |  47 +++++
 .../components/features/FeaturesModal2.vue    | 188 ++++++++++++++++++
 .../features/src/components/features/tree.ts  |   9 +
 .../src/components/features/useFeatureTree.ts | 167 ++++++++++++++++
 .../@abp/features/src/types/definitions.ts    |   6 +-
 .../src/api/usePermissionDefinitionsApi.ts    |  18 +-
 .../permissions/PermissionDefinitionModal.vue |  23 ++-
 .../permissions/PermissionDefinitionTable.vue |  13 +-
 .../definitions/permissions/types.ts          |   8 -
 .../settings/src/api/useDefinitionsApi.ts     |  18 +-
 .../definitions/SettingDefinitionModal.vue    |  29 ++-
 19 files changed, 771 insertions(+), 73 deletions(-)
 create mode 100644 apps/vben5/packages/@abp/features/src/components/features/FeatureGroup.vue
 create mode 100644 apps/vben5/packages/@abp/features/src/components/features/FeatureInput.vue
 create mode 100644 apps/vben5/packages/@abp/features/src/components/features/FeatureTreeNode.vue
 create mode 100644 apps/vben5/packages/@abp/features/src/components/features/FeaturesModal2.vue
 create mode 100644 apps/vben5/packages/@abp/features/src/components/features/tree.ts
 create mode 100644 apps/vben5/packages/@abp/features/src/components/features/useFeatureTree.ts

diff --git a/apps/vben5/apps/app-antd/src/layouts/basic.vue b/apps/vben5/apps/app-antd/src/layouts/basic.vue
index a9059508d..c2682b198 100644
--- a/apps/vben5/apps/app-antd/src/layouts/basic.vue
+++ b/apps/vben5/apps/app-antd/src/layouts/basic.vue
@@ -95,14 +95,19 @@ watch(
 <template>
   <BasicLayout @clear-preferences-and-logout="handleLogout">
     <template #user-dropdown>
-      <UserDropdown
-        :avatar
-        :description="description"
-        :menus
-        :tag-text="userInfo?.email"
-        :text="userInfo?.realName"
-        @logout="handleLogout"
-      />
+      <div class="flex items-center pr-[4px]">
+        <UserDropdown
+          :avatar
+          :description="description"
+          :menus
+          :tag-text="userInfo?.email"
+          :text="userInfo?.realName"
+          @logout="handleLogout"
+        />
+        <span class="mb-1 flex items-center text-sm font-medium">
+          {{ description }}
+        </span>
+      </div>
     </template>
     <template #notification>
       <Notification
diff --git a/apps/vben5/apps/app-antd/src/store/auth.ts b/apps/vben5/apps/app-antd/src/store/auth.ts
index 6c7240094..51e03bfcb 100644
--- a/apps/vben5/apps/app-antd/src/store/auth.ts
+++ b/apps/vben5/apps/app-antd/src/store/auth.ts
@@ -37,6 +37,12 @@ export const useAuthStore = defineStore('auth', () => {
       if (user?.refresh_token) {
         accessStore.setRefreshToken(user.refresh_token);
       }
+      try {
+        const userInfo = await fetchUserInfo();
+        userStore.setUserInfo(userInfo);
+      } catch (error) {
+        console.warn('refresh user iinfo error', error);
+      }
       return newToken;
     }
   }
@@ -170,7 +176,6 @@ export const useAuthStore = defineStore('auth', () => {
       userInfoRes = user.profile;
     }
     const abpConfig = await getConfigApi();
-    const picture = await getPictureApi();
     userInfo = {
       userId: userInfoRes.sub ?? abpConfig.currentUser.id,
       username: userInfoRes.uniqueName ?? abpConfig.currentUser.userName,
@@ -178,7 +183,7 @@ export const useAuthStore = defineStore('auth', () => {
         userInfoRes.name ??
         abpConfig.currentUser.name ??
         abpConfig.currentUser.userName,
-      avatar: URL.createObjectURL(picture) ?? '',
+      avatar: '',
       desc: userInfoRes.uniqueName ?? userInfoRes.name,
       email: userInfoRes.email ?? userInfoRes.email,
       emailVerified:
@@ -191,6 +196,14 @@ export const useAuthStore = defineStore('auth', () => {
       roles: abpConfig.currentUser.roles,
       homePath: '/',
     };
+    try {
+      const picture = await getPictureApi();
+      if (picture) {
+        userInfo.avatar = URL.createObjectURL(picture);
+      }
+    } catch (error) {
+      console.warn('Error in get user avatar:', error);
+    }
     userStore.setUserInfo(userInfo);
     abpStore.setApplication(abpConfig);
     accessStore.setAccessCodes(Object.keys(abpConfig.auth.grantedPolicies));
diff --git a/apps/vben5/apps/app-antd/src/timezone-init.ts b/apps/vben5/apps/app-antd/src/timezone-init.ts
index 704ec022b..55dd0754d 100644
--- a/apps/vben5/apps/app-antd/src/timezone-init.ts
+++ b/apps/vben5/apps/app-antd/src/timezone-init.ts
@@ -1,16 +1,21 @@
 import { setTimezoneHandler } from '@vben/stores';
 
+import { useAbpStore } from '@abp/core';
 import { useTimeZoneSettingsApi } from '@abp/settings';
 
 /**
  * 初始化时区处理，通过API保存时区设置
  */
 export function initTimezone() {
+  const abpStore = useAbpStore();
   const { getMyTimezoneApi, getTimezonesApi, updateMyTimezoneApi } =
     useTimeZoneSettingsApi();
   setTimezoneHandler({
-    getTimezone() {
-      return getMyTimezoneApi();
+    async getTimezone() {
+      if (abpStore.application?.currentUser.isAuthenticated) {
+        return await getMyTimezoneApi();
+      }
+      return undefined;
     },
     setTimezone(timezone: string) {
       return updateMyTimezoneApi(timezone);
diff --git a/apps/vben5/packages/@abp/features/src/api/useFeatureDefinitionsApi.ts b/apps/vben5/packages/@abp/features/src/api/useFeatureDefinitionsApi.ts
index 165af3aff..1c0c69e2e 100644
--- a/apps/vben5/packages/@abp/features/src/api/useFeatureDefinitionsApi.ts
+++ b/apps/vben5/packages/@abp/features/src/api/useFeatureDefinitionsApi.ts
@@ -1,4 +1,4 @@
-import type { ListResultDto } from '@abp/core';
+import type { ListResultDto, NameValue } from '@abp/core';
 
 import type {
   FeatureDefinitionCreateDto,
@@ -89,11 +89,27 @@ export function useFeatureDefinitionsApi() {
     );
   }
 
+  /**
+   * 获取可用功能提供者列表
+   * @returns {Promise<ListResultDto<NameValue<string>>>} 功能提供者列表
+   */
+  function getAssignableProvidersApi(): Promise<
+    ListResultDto<NameValue<string>>
+  > {
+    return request<ListResultDto<NameValue<string>>>(
+      '/api/feature-management/definitions/assignable-providers',
+      {
+        method: 'GET',
+      },
+    );
+  }
+
   return {
     cancel,
     createApi,
     deleteApi,
     getApi,
+    getAssignableProvidersApi,
     getListApi,
     updateApi,
   };
diff --git a/apps/vben5/packages/@abp/features/src/components/definitions/features/FeatureDefinitionModal.vue b/apps/vben5/packages/@abp/features/src/components/definitions/features/FeatureDefinitionModal.vue
index 8ac3265dc..a2a327a13 100644
--- a/apps/vben5/packages/@abp/features/src/components/definitions/features/FeatureDefinitionModal.vue
+++ b/apps/vben5/packages/@abp/features/src/components/definitions/features/FeatureDefinitionModal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { NameValue } from '@abp/core';
 import type {
   PropertyInfo,
   SelectionStringValueItem,
@@ -65,18 +66,17 @@ interface DefinitionTreeVo {
 
 type TabKeys = 'basic' | 'props';
 
-const defaultModel = {
+const defaultModel: FeatureDefinitionDto = {
   allowedProviders: [],
   displayName: '',
   extraProperties: {},
   groupName: '',
   isAvailableToHost: true,
-  isEnabled: true,
   isStatic: false,
   isVisibleToClients: false,
   name: '',
   valueType: '',
-} as FeatureDefinitionDto;
+};
 
 const isEditModel = ref(false);
 const validatorNameRef = ref<string>('NULL');
@@ -87,6 +87,7 @@ const valueTypeInput = useTemplateRef<StringValueTypeInstance>('valueType');
 const formModel = ref<FeatureDefinitionDto>({ ...defaultModel });
 const availableGroups = ref<FeatureGroupDefinitionDto[]>([]);
 const availableDefinitions = ref<DefinitionTreeVo[]>([]);
+const availableProviders = ref<NameValue<string>[]>([]);
 const selectionDataSource = ref<{ label: string; value: string }[]>([]);
 
 const { Lr } = useLocalization();
@@ -97,6 +98,7 @@ const {
   createApi,
   getApi,
   getListApi: getDefinitionsApi,
+  getAssignableProvidersApi,
   updateApi,
 } = useFeatureDefinitionsApi();
 const formRules = reactive({
@@ -189,9 +191,11 @@ const [Modal, modalApi] = useVbenModal({
       });
       try {
         modalApi.setState({ loading: true });
-        const { groupName, name } = modalApi.getData<FeatureDefinitionDto>();
+        const { groupName, name, parentName } =
+          modalApi.getData<FeatureDefinitionDto>();
+        formModel.value.parentName = parentName;
         name && (await onGet(name));
-        await onInitGroups(groupName);
+        await Promise.all([onInitGroups(groupName), onInitProviders()]);
       } finally {
         modalApi.setState({ loading: false });
       }
@@ -199,6 +203,10 @@ const [Modal, modalApi] = useVbenModal({
   },
   title: $t('AbpFeatureManagement.FeatureDefinitions:AddNew'),
 });
+async function onInitProviders() {
+  const { items } = await getAssignableProvidersApi();
+  availableProviders.value = items;
+}
 async function onInitGroups(name?: string) {
   const { items } = await getGroupsApi({ filter: name });
   availableGroups.value = items.map((group) => {
@@ -411,6 +419,20 @@ function onSelectionChange(items: SelectionStringValueItem[]) {
               {{ $t('AbpFeatureManagement.DisplayName:DefaultValue') }}
             </Checkbox>
           </FormItem>
+          <FormItem
+            name="providers"
+            :label="$t('AbpFeatureManagement.DisplayName:AllowedProviders')"
+            :extra="$t('AbpFeatureManagement.Description:AllowedProviders')"
+          >
+            <Select
+              v-model:value="formModel.allowedProviders"
+              :allow-clear="true"
+              :disabled="formModel.isStatic"
+              :field-names="{ label: 'name', value: 'value' }"
+              :options="availableProviders"
+              mode="multiple"
+            />
+          </FormItem>
           <FormItem
             name="isVisibleToClients"
             :label="$t('AbpFeatureManagement.DisplayName:IsVisibleToClients')"
diff --git a/apps/vben5/packages/@abp/features/src/components/definitions/features/FeatureDefinitionTable.vue b/apps/vben5/packages/@abp/features/src/components/definitions/features/FeatureDefinitionTable.vue
index 410ce24c0..4b4c2b1dc 100644
--- a/apps/vben5/packages/@abp/features/src/components/definitions/features/FeatureDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/features/src/components/definitions/features/FeatureDefinitionTable.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { VbenFormProps } from '@vben/common-ui';
 
@@ -7,7 +8,9 @@ import type { FeatureDefinitionDto } from '../../../types/definitions';
 
 import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
+import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
+import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
 import {
@@ -22,18 +25,21 @@ import {
   CloseOutlined,
   DeleteOutlined,
   EditOutlined,
+  EllipsisOutlined,
   PlusOutlined,
 } from '@ant-design/icons-vue';
-import { Button, message, Modal } from 'ant-design-vue';
+import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
 import { VxeGrid } from 'vxe-table';
 
 import { useFeatureDefinitionsApi } from '../../../api/useFeatureDefinitionsApi';
 import { useFeatureGroupDefinitionsApi } from '../../../api/useFeatureGroupDefinitionsApi';
-import { GroupDefinitionsPermissions } from '../../../constants/permissions';
+import { FeatureDefinitionsPermissions } from '../../../constants/permissions';
 
 defineOptions({
   name: 'FeatureDefinitionTable',
 });
+const FeaturesOutlined = createIconifyIcon('pajamas:feature-flag');
+const MenuItem = Menu.Item;
 
 interface FeatureVo {
   children: FeatureVo[];
@@ -55,6 +61,7 @@ interface FeatureGroupVo {
 const featureGroups = ref<FeatureGroupVo[]>([]);
 
 const { Lr } = useLocalization();
+const { hasAccessByCodes } = useAccess();
 const { deserialize } = useLocalizationSerializer();
 const { getListApi: getGroupsApi } = useFeatureGroupDefinitionsApi();
 const { deleteApi, getListApi: getFeaturesApi } = useFeatureDefinitionsApi();
@@ -197,7 +204,7 @@ const subGridColumns: VxeGridProps<FeatureGroupVo>['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: $t('AbpUi.Actions'),
-    width: 180,
+    width: 220,
   },
 ];
 
@@ -281,6 +288,19 @@ function onDelete(row: FeatureDefinitionDto) {
   });
 }
 
+function onMenuClick(row: FeatureDefinitionDto, info: MenuInfo) {
+  switch (info.key) {
+    case 'features': {
+      modalApi.setData({
+        groupName: row.groupName,
+        parentName: row.name,
+      });
+      modalApi.open();
+      break;
+    }
+  }
+}
+
 onMounted(onGet);
 </script>
 
@@ -290,7 +310,7 @@ onMounted(onGet);
       <Button
         :icon="h(PlusOutlined)"
         type="primary"
-        v-access:code="[GroupDefinitionsPermissions.Create]"
+        v-access:code="[FeatureDefinitionsPermissions.Create]"
         @click="onCreate"
       >
         {{ $t('AbpFeatureManagement.FeatureDefinitions:AddNew') }}
@@ -324,28 +344,44 @@ onMounted(onGet);
             <CloseOutlined v-else class="text-red-500" />
           </div>
         </template>
-        <template #action="{ row: permission }">
+        <template #action="{ row: feature }">
           <div class="flex flex-row">
             <Button
               :icon="h(EditOutlined)"
               block
               type="link"
-              v-access:code="[GroupDefinitionsPermissions.Update]"
-              @click="onUpdate(permission)"
+              v-access:code="[FeatureDefinitionsPermissions.Update]"
+              @click="onUpdate(feature)"
             >
               {{ $t('AbpUi.Edit') }}
             </Button>
             <Button
-              v-if="!permission.isStatic"
+              v-if="!feature.isStatic"
               :icon="h(DeleteOutlined)"
               block
               danger
               type="link"
-              v-access:code="[GroupDefinitionsPermissions.Delete]"
-              @click="onDelete(permission)"
+              v-access:code="[FeatureDefinitionsPermissions.Delete]"
+              @click="onDelete(feature)"
             >
               {{ $t('AbpUi.Delete') }}
             </Button>
+            <Dropdown v-if="!feature.isStatic">
+              <template #overlay>
+                <Menu @click="(info) => onMenuClick(feature, info)">
+                  <MenuItem
+                    v-if="
+                      hasAccessByCodes([FeatureDefinitionsPermissions.Create])
+                    "
+                    key="features"
+                    :icon="h(FeaturesOutlined)"
+                  >
+                    {{ $t('AbpFeatureManagement.FeatureDefinitions:AddNew') }}
+                  </MenuItem>
+                </Menu>
+              </template>
+              <Button :icon="h(EllipsisOutlined)" type="link" />
+            </Dropdown>
           </div>
         </template>
       </VxeGrid>
diff --git a/apps/vben5/packages/@abp/features/src/components/features/FeatureGroup.vue b/apps/vben5/packages/@abp/features/src/components/features/FeatureGroup.vue
new file mode 100644
index 000000000..bf5b6e529
--- /dev/null
+++ b/apps/vben5/packages/@abp/features/src/components/features/FeatureGroup.vue
@@ -0,0 +1,32 @@
+<!-- components/FeatureGroup.vue -->
+<script setup lang="ts">
+import type { FeatureDto, FeatureGroupDto } from '../../types/features';
+import type { TreeNode } from './tree';
+
+import { Card } from 'ant-design-vue';
+
+import FeatureTreeNode from './FeatureTreeNode.vue';
+
+defineProps<{
+  baseIndentSize?: number;
+  group: FeatureGroupDto & { _treeRoots?: TreeNode[] };
+  groupIndex: number;
+}>();
+
+const emit = defineEmits<{
+  (event: 'change', feature: FeatureDto, groupIndex: number): void;
+}>();
+</script>
+
+<template>
+  <Card :bordered="false" :title="group.displayName">
+    <div v-for="root in group._treeRoots" :key="root.feature.name">
+      <FeatureTreeNode
+        :node="root"
+        :group-index="groupIndex"
+        :base-indent-size="baseIndentSize"
+        @change="(feature, idx) => emit('change', feature, idx)"
+      />
+    </div>
+  </Card>
+</template>
diff --git a/apps/vben5/packages/@abp/features/src/components/features/FeatureInput.vue b/apps/vben5/packages/@abp/features/src/components/features/FeatureInput.vue
new file mode 100644
index 000000000..9c04eacc7
--- /dev/null
+++ b/apps/vben5/packages/@abp/features/src/components/features/FeatureInput.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { Validator } from '@abp/core';
+
+import type { FeatureDto } from '../../types/features';
+
+import { computed } from 'vue';
+
+import { useValidation } from '@abp/core';
+import { Checkbox, Form, Input, InputNumber, Select } from 'ant-design-vue';
+
+const props = defineProps<{
+  feature: FeatureDto;
+  featureIndex: number;
+  groupIndex: number;
+}>();
+
+const emit = defineEmits<{
+  (event: 'change', feature: FeatureDto, groupIndex: number): void;
+}>();
+
+const FormItem = Form.Item;
+
+const {
+  fieldMustBeetWeen,
+  fieldMustBeStringWithMinimumLengthAndMaximumLength,
+  fieldRequired,
+} = useValidation();
+
+function createRules(field: string, validator: Validator) {
+  const featureRules: any[] = [];
+  if (validator?.properties) {
+    switch (validator.name) {
+      case 'NUMERIC': {
+        featureRules.push(
+          ...fieldMustBeetWeen({
+            end: Number(validator.properties.MaxValue),
+            name: field,
+            start: Number(validator.properties.MinValue),
+            trigger: 'change',
+          }),
+        );
+        break;
+      }
+      case 'STRING': {
+        if (validator.properties.AllowNull?.toLowerCase() === 'true') {
+          featureRules.push(
+            ...fieldRequired({
+              name: field,
+              trigger: 'blur',
+            }),
+          );
+        }
+        featureRules.push(
+          ...fieldMustBeStringWithMinimumLengthAndMaximumLength({
+            maximum: Number(validator.properties.MaxLength),
+            minimum: Number(validator.properties.MinLength),
+            name: field,
+            trigger: 'blur',
+          }),
+        );
+        break;
+      }
+    }
+  }
+  return featureRules;
+}
+
+function handleChange() {
+  emit('change', props.feature, props.groupIndex);
+}
+
+const isCheckbox = computed(
+  () =>
+    props.feature.valueType?.name === 'ToggleStringValueType' &&
+    props.feature.valueType?.validator?.name === 'BOOLEAN',
+);
+
+const isFreeText = computed(
+  () => props.feature.valueType?.name === 'FreeTextStringValueType',
+);
+
+const isNumeric = computed(
+  () => props.feature.valueType?.validator?.name === 'NUMERIC',
+);
+
+const isSelection = computed(
+  () => props.feature.valueType?.name === 'SelectionStringValueType',
+);
+</script>
+
+<template>
+  <FormItem
+    v-if="feature.valueType !== null"
+    :name="['groups', groupIndex, 'features', featureIndex, 'value']"
+    :label="feature.displayName"
+    :extra="feature.description"
+    :rules="createRules(feature.displayName, feature.valueType.validator)"
+  >
+    <!-- 复选框类型 -->
+    <Checkbox
+      v-if="isCheckbox"
+      v-model:checked="feature.value"
+      @change="handleChange"
+    >
+      {{ feature.displayName }}
+    </Checkbox>
+
+    <!-- 文本/数字类型 -->
+    <div v-else-if="isFreeText">
+      <InputNumber
+        v-if="isNumeric"
+        style="width: 100%"
+        v-model:value="feature.value"
+        @change="handleChange"
+      />
+      <Input
+        v-else
+        v-model:value="feature.value"
+        autocomplete="off"
+        @change="handleChange"
+      />
+    </div>
+
+    <!-- 选择类型 -->
+    <Select
+      v-else-if="isSelection"
+      v-model:value="feature.value"
+      :options="feature.valueType.itemSource?.items"
+      :field-names="{ label: 'displayName', value: 'value' }"
+      @change="handleChange"
+    />
+  </FormItem>
+</template>
diff --git a/apps/vben5/packages/@abp/features/src/components/features/FeatureTreeNode.vue b/apps/vben5/packages/@abp/features/src/components/features/FeatureTreeNode.vue
new file mode 100644
index 000000000..319fe7517
--- /dev/null
+++ b/apps/vben5/packages/@abp/features/src/components/features/FeatureTreeNode.vue
@@ -0,0 +1,47 @@
+<!-- components/FeatureTreeNode.vue -->
+<script setup lang="ts">
+import type { FeatureDto } from '../../types/features';
+import type { TreeNode } from './tree';
+
+import { computed } from 'vue';
+
+import FeatureInput from './FeatureInput.vue';
+import { getIndentStyle } from './useFeatureTree';
+
+const props = defineProps<{
+  baseIndentSize?: number;
+  groupIndex: number;
+  node: TreeNode;
+}>();
+
+const emit = defineEmits<{
+  (event: 'change', feature: FeatureDto, groupIndex: number): void;
+}>();
+
+const indentSize = computed(() => props.baseIndentSize || 8);
+const indentStyle = computed(() =>
+  getIndentStyle(props.node.level, indentSize.value),
+);
+</script>
+
+<template>
+  <div v-if="node.visible">
+    <div :style="{ marginLeft: indentStyle }">
+      <FeatureInput
+        :feature="node.feature"
+        :group-index="groupIndex"
+        :feature-index="0"
+        @change="(feature, idx) => emit('change', feature, idx)"
+      />
+    </div>
+
+    <template v-for="child in node.children" :key="child.feature.name">
+      <FeatureTreeNode
+        :node="child"
+        :group-index="groupIndex"
+        :base-indent-size="baseIndentSize"
+        @change="(feature, idx) => emit('change', feature, idx)"
+      />
+    </template>
+  </div>
+</template>
diff --git a/apps/vben5/packages/@abp/features/src/components/features/FeaturesModal2.vue b/apps/vben5/packages/@abp/features/src/components/features/FeaturesModal2.vue
new file mode 100644
index 000000000..8065492cd
--- /dev/null
+++ b/apps/vben5/packages/@abp/features/src/components/features/FeaturesModal2.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import type { FormInstance } from 'ant-design-vue/es/form/Form';
+
+import type { FeatureGroupDto, UpdateFeaturesDto } from '../../types/features';
+
+import { computed, ref, toValue, useTemplateRef } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { Form, message, Tabs } from 'ant-design-vue';
+
+import { useFeaturesApi } from '../../api/useFeaturesApi';
+import FeatureGroup from './FeatureGroup.vue';
+import {
+  buildFeatureTree,
+  onFeatureValueChange,
+  processAllFeatures,
+  updateVisibility,
+} from './useFeatureTree';
+
+const TabPane = Tabs.TabPane;
+
+interface ModalState {
+  displayName?: string;
+  providerKey?: string;
+  providerName: string;
+  readonly?: boolean;
+}
+
+interface FormModel {
+  groups: FeatureGroupDto[];
+}
+
+const activeTabKey = ref('');
+const modelState = ref<ModalState>();
+const formModel = ref<FormModel>({ groups: [] });
+const form = useTemplateRef<FormInstance>('form');
+
+const getModalTitle = computed(() => {
+  if (modelState.value?.displayName) {
+    return `${$t('AbpFeatureManagement.Features')} - ${modelState.value.displayName}`;
+  }
+  return $t('AbpFeatureManagement.Features');
+});
+
+const { getApi, updateApi } = useFeaturesApi();
+
+const [Modal, modalApi] = useVbenModal({
+  centered: true,
+  class: 'w-1/2',
+  async onConfirm() {
+    await form.value?.validate();
+    await onSubmit();
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      formModel.value = { groups: [] };
+      await onGet();
+      if (formModel.value?.groups.length > 0) {
+        activeTabKey.value = formModel.value.groups[0]?.name!;
+      }
+    }
+  },
+});
+
+function mapFeatures(groups: FeatureGroupDto[]): FeatureGroupDto[] {
+  groups.forEach((group) => {
+    // 构建树形结构
+    const treeRoots = buildFeatureTree(group.features);
+
+    // 存储树形结构到 group 中供模板使用
+    (group as any)._treeRoots = treeRoots;
+    (group as any)._allFeatures = [...group.features];
+
+    // 初始化可见性
+    treeRoots.forEach((root) => updateVisibility(root, true));
+
+    // 处理特性值类型转换
+    processAllFeatures(treeRoots);
+  });
+  return groups;
+}
+
+function getFeatureInput(groups: FeatureGroupDto[]): UpdateFeaturesDto {
+  const input: UpdateFeaturesDto = {
+    features: [],
+  };
+  groups.forEach((g) => {
+    const features = (g as any)._allFeatures || g.features;
+    features.forEach((f: any) => {
+      if (f.value !== null && f.value !== undefined && f.value !== '') {
+        input.features.push({
+          name: f.name,
+          value: String(f.value),
+        });
+      }
+    });
+  });
+  return input;
+}
+
+async function onGet() {
+  try {
+    modalApi.setState({ loading: true });
+    const state = modalApi.getData<ModalState>();
+    const { groups } = await getApi({
+      providerKey: state.providerKey,
+      providerName: state.providerName,
+    });
+    formModel.value = {
+      groups: mapFeatures(groups),
+    };
+    modelState.value = state;
+  } finally {
+    modalApi.setState({ loading: false });
+  }
+}
+
+function handleFeatureChange(feature: any, groupIndex: number) {
+  const group = formModel.value.groups[groupIndex];
+  const treeRoots = (group as any)._treeRoots;
+  if (treeRoots) {
+    onFeatureValueChange(feature, treeRoots);
+    // 强制更新视图
+    formModel.value = { ...formModel.value };
+  }
+}
+
+async function onSubmit() {
+  try {
+    modalApi.setState({ submitting: true });
+    const model = toValue(formModel);
+    const state = modalApi.getData<ModalState>();
+    const input = getFeatureInput(model.groups);
+    await updateApi(
+      {
+        providerKey: state.providerKey,
+        providerName: state.providerName,
+      },
+      input,
+    );
+    message.success($t('AbpUi.SavedSuccessfully'));
+    await onGet();
+  } finally {
+    modalApi.setState({ submitting: false });
+  }
+}
+</script>
+
+<template>
+  <Modal :title="getModalTitle">
+    <Form :model="formModel" ref="form">
+      <Tabs tab-position="left" type="card" v-model:active-key="activeTabKey">
+        <TabPane
+          v-for="(group, gi) in formModel.groups"
+          :key="group.name"
+          :tab="group.displayName"
+        >
+          <FeatureGroup
+            :group="group"
+            :group-index="gi"
+            :base-indent-size="8"
+            @change="handleFeatureChange"
+          />
+        </TabPane>
+      </Tabs>
+    </Form>
+  </Modal>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-tabs) {
+  height: 34rem;
+
+  .ant-tabs-nav {
+    width: 14rem;
+  }
+
+  .ant-tabs-content-holder {
+    overflow: hidden auto !important;
+  }
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/apps/vben5/packages/@abp/features/src/components/features/tree.ts b/apps/vben5/packages/@abp/features/src/components/features/tree.ts
new file mode 100644
index 000000000..39532ced8
--- /dev/null
+++ b/apps/vben5/packages/@abp/features/src/components/features/tree.ts
@@ -0,0 +1,9 @@
+import type { FeatureDto } from '../../types/features';
+
+export interface TreeNode {
+  children: TreeNode[];
+  feature: FeatureDto;
+  level: number;
+  parent?: TreeNode;
+  visible: boolean;
+}
diff --git a/apps/vben5/packages/@abp/features/src/components/features/useFeatureTree.ts b/apps/vben5/packages/@abp/features/src/components/features/useFeatureTree.ts
new file mode 100644
index 000000000..72e6ea3f7
--- /dev/null
+++ b/apps/vben5/packages/@abp/features/src/components/features/useFeatureTree.ts
@@ -0,0 +1,167 @@
+import type { FeatureDto } from '../../types/features';
+import type { TreeNode } from './tree';
+
+import { $t } from '@vben/locales';
+
+/**
+ * 将扁平的特性列表转换为树形结构
+ */
+export function buildFeatureTree(features: FeatureDto[]): TreeNode[] {
+  const nodeMap = new Map<string, TreeNode>();
+  const roots: TreeNode[] = [];
+
+  // 创建所有节点
+  features.forEach((feature) => {
+    const node: TreeNode = {
+      feature,
+      children: [],
+      level: 0,
+      visible: true,
+    };
+    nodeMap.set(feature.name, node);
+  });
+
+  // 建立父子关系
+  features.forEach((feature) => {
+    const node = nodeMap.get(feature.name);
+    if (node && feature.parentName && nodeMap.has(feature.parentName)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const parent = nodeMap.get(feature.parentName)!;
+      parent.children.push(node);
+      node.parent = parent;
+      node.level = parent.level + 1;
+    } else if (node && !feature.parentName) {
+      roots.push(node);
+    }
+  });
+
+  // 对子节点进行排序
+  const sortChildren = (nodes: TreeNode[]) => {
+    nodes.forEach((node) => {
+      if (node.children.length > 0) {
+        node.children.sort((a, b) =>
+          a.feature.displayName.localeCompare(b.feature.displayName),
+        );
+        sortChildren(node.children);
+      }
+    });
+  };
+  sortChildren(roots);
+
+  return roots;
+}
+
+/**
+ * 更新节点的可见性（基于父级状态）
+ */
+export function updateVisibility(
+  node: TreeNode,
+  parentVisible: boolean = true,
+): void {
+  node.visible = parentVisible;
+
+  if (isCheckboxFeature(node.feature)) {
+    const isChecked = Boolean(node.feature.value);
+    node.children.forEach((child) => {
+      updateVisibility(child, parentVisible && isChecked);
+    });
+  } else {
+    node.children.forEach((child) => {
+      updateVisibility(child, parentVisible);
+    });
+  }
+}
+
+/**
+ * 检查是否为复选框类型的特性
+ */
+export function isCheckboxFeature(feature: FeatureDto): boolean {
+  return (
+    feature.valueType?.name === 'ToggleStringValueType' &&
+    feature.valueType?.validator?.name === 'BOOLEAN'
+  );
+}
+
+/**
+ * 当特性值改变时，更新其子节点的可见性
+ */
+export function onFeatureValueChange(
+  feature: FeatureDto,
+  treeNodes: TreeNode[],
+): void {
+  const findNode = (nodes: TreeNode[]): null | TreeNode => {
+    for (const node of nodes) {
+      if (node.feature.name === feature.name) {
+        return node;
+      }
+      const found = findNode(node.children);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  const node = findNode(treeNodes);
+  if (node && isCheckboxFeature(node.feature)) {
+    updateVisibility(node, true);
+  }
+}
+
+/**
+ * 处理特性值类型转换
+ */
+export function processFeatureValue(feature: FeatureDto): void {
+  if (feature.valueType?.name === 'SelectionStringValueType') {
+    const valueType = feature.valueType as any;
+    if (valueType.itemSource?.items) {
+      valueType.itemSource.items.forEach((valueItem: any) => {
+        if (valueItem.displayText?.resourceName === 'Fixed') {
+          valueItem.displayName = valueItem.displayText.name;
+        } else if (
+          valueItem.displayText?.resourceName &&
+          valueItem.displayText?.name
+        ) {
+          valueItem.displayName = $t(
+            `${valueItem.displayText.resourceName}.${valueItem.displayText.name}`,
+          );
+        }
+      });
+    }
+  } else {
+    switch (feature.valueType?.validator?.name) {
+      case 'BOOLEAN': {
+        feature.value = String(feature.value).toLocaleLowerCase() === 'true';
+        break;
+      }
+      case 'NUMERIC': {
+        if (
+          feature.value !== null &&
+          feature.value !== undefined &&
+          feature.value !== ''
+        ) {
+          feature.value = Number(feature.value);
+        }
+        break;
+      }
+    }
+  }
+}
+
+/**
+ * 递归处理所有特性值
+ */
+export function processAllFeatures(treeNodes: TreeNode[]): void {
+  const traverse = (nodes: TreeNode[]) => {
+    nodes.forEach((node) => {
+      processFeatureValue(node.feature);
+      traverse(node.children);
+    });
+  };
+  traverse(treeNodes);
+}
+
+/**
+ * 获取缩进样式
+ */
+export function getIndentStyle(level: number, indentSize: number = 8): string {
+  return `${level * indentSize}px`;
+}
diff --git a/apps/vben5/packages/@abp/features/src/types/definitions.ts b/apps/vben5/packages/@abp/features/src/types/definitions.ts
index 701f5fa82..9b37d1d20 100644
--- a/apps/vben5/packages/@abp/features/src/types/definitions.ts
+++ b/apps/vben5/packages/@abp/features/src/types/definitions.ts
@@ -31,10 +31,8 @@ interface FeatureDefinitionCreateOrUpdateDto extends IHasExtraProperties {
 }
 
 interface FeatureDefinitionUpdateDto
-  extends FeatureDefinitionCreateOrUpdateDto,
-    IHasConcurrencyStamp {}
-interface FeatureDefinitionCreateDto
-  extends FeatureDefinitionCreateOrUpdateDto {
+  extends FeatureDefinitionCreateOrUpdateDto, IHasConcurrencyStamp {}
+interface FeatureDefinitionCreateDto extends FeatureDefinitionCreateOrUpdateDto {
   groupName: string;
   name: string;
 }
diff --git a/apps/vben5/packages/@abp/permissions/src/api/usePermissionDefinitionsApi.ts b/apps/vben5/packages/@abp/permissions/src/api/usePermissionDefinitionsApi.ts
index 2179f8641..dab904b27 100644
--- a/apps/vben5/packages/@abp/permissions/src/api/usePermissionDefinitionsApi.ts
+++ b/apps/vben5/packages/@abp/permissions/src/api/usePermissionDefinitionsApi.ts
@@ -1,4 +1,4 @@
-import type { ListResultDto } from '@abp/core';
+import type { ListResultDto, NameValue } from '@abp/core';
 
 import type {
   PermissionDefinitionCreateDto,
@@ -89,11 +89,27 @@ export function usePermissionDefinitionsApi() {
     );
   }
 
+  /**
+   * 获取可用权限提供者列表
+   * @returns {Promise<ListResultDto<NameValue<string>>>} 权限提供者列表
+   */
+  function getAssignableProvidersApi(): Promise<
+    ListResultDto<NameValue<string>>
+  > {
+    return request<ListResultDto<NameValue<string>>>(
+      '/api/permission-management/definitions/assignable-providers',
+      {
+        method: 'GET',
+      },
+    );
+  }
+
   return {
     cancel,
     createApi,
     deleteApi,
     getApi,
+    getAssignableProvidersApi,
     getListApi,
     updateApi,
   };
diff --git a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue
index df70f913e..ce8793210 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import type { IHasSimpleStateCheckers, ISimpleStateChecker } from '@abp/core';
+import type {
+  IHasSimpleStateCheckers,
+  ISimpleStateChecker,
+  NameValue,
+} from '@abp/core';
 import type { PropertyInfo } from '@abp/ui';
 import type { FormInstance } from 'ant-design-vue';
 
@@ -41,8 +45,7 @@ const emits = defineEmits<{
 const FormItem = Form.Item;
 const TabPane = Tabs.TabPane;
 
-interface PermissionStateChecker
-  extends IHasSimpleStateCheckers<PermissionStateChecker> {}
+interface PermissionStateChecker extends IHasSimpleStateCheckers<PermissionStateChecker> {}
 
 class PermissionState implements PermissionStateChecker {
   stateCheckers: ISimpleStateChecker<PermissionStateChecker>[] = [];
@@ -66,9 +69,10 @@ const isEditModel = ref(false);
 const activeTab = ref<TabKeys>('basic');
 const form = useTemplateRef<FormInstance>('form');
 const formModel = ref<PermissionDefinitionDto>({ ...defaultModel });
-const { multiTenancySideOptions, providerOptions } = useTypesMap();
+const { multiTenancySideOptions } = useTypesMap();
 const availableGroups = ref<PermissionGroupDefinitionDto[]>([]);
 const availablePermissions = ref<PermissionTreeVo[]>([]);
+const availableProviders = ref<NameValue<string>[]>([]);
 
 const { Lr } = useLocalization();
 const { deserialize } = useLocalizationSerializer();
@@ -77,6 +81,7 @@ const {
   createApi,
   getApi,
   getListApi: getPermissionsApi,
+  getAssignableProvidersApi,
   updateApi,
 } = usePermissionDefinitionsApi();
 const [Modal, modalApi] = useVbenModal({
@@ -118,7 +123,7 @@ const [Modal, modalApi] = useVbenModal({
         modalApi.setState({ loading: true });
         const { groupName, name } = modalApi.getData<PermissionDefinitionDto>();
         name && (await onGet(name));
-        await onInitGroups(groupName);
+        await Promise.all([onInitGroups(groupName), onInitProviders()]);
       } finally {
         modalApi.setState({ loading: false });
       }
@@ -126,6 +131,10 @@ const [Modal, modalApi] = useVbenModal({
   },
   title: $t('AbpPermissionManagement.PermissionDefinitions:AddNew'),
 });
+async function onInitProviders() {
+  const { items } = await getAssignableProvidersApi();
+  availableProviders.value = items;
+}
 async function onInitGroups(name?: string) {
   const { items } = await getGroupsApi({ filter: name });
   availableGroups.value = items.map((group) => {
@@ -268,13 +277,15 @@ function onPropDelete(prop: PropertyInfo) {
           </FormItem>
           <FormItem
             :label="$t('AbpPermissionManagement.DisplayName:Providers')"
+            :extra="$t('AbpPermissionManagement.Description:Providers')"
             name="providers"
           >
             <Select
               v-model:value="formModel.providers"
               :allow-clear="true"
               :disabled="formModel.isStatic"
-              :options="providerOptions"
+              :field-names="{ label: 'name', value: 'value' }"
+              :options="availableProviders"
               mode="multiple"
             />
           </FormItem>
diff --git a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue
index ae200be76..8b4316a37 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue
@@ -3,9 +3,6 @@ import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 
 import type { VbenFormProps } from '@vben/common-ui';
 
-import type { PermissionDefinitionDto } from '../../../types/definitions';
-import type { PermissionGroupDefinitionDto } from '../../../types/groups';
-
 import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -82,7 +79,7 @@ const formOptions: VbenFormProps = {
   submitOnEnter: true,
 };
 
-const gridOptions: VxeGridProps<PermissionGroupDefinitionDto> = {
+const gridOptions: VxeGridProps<PermissionGroupVo> = {
   columns: [
     {
       align: 'center',
@@ -150,7 +147,7 @@ const gridOptions: VxeGridProps<PermissionGroupDefinitionDto> = {
     zoom: true,
   },
 };
-const subGridColumns: VxeGridProps<PermissionDefinitionDto>['columns'] = [
+const subGridColumns: VxeGridProps<PermissionVo>['columns'] = [
   {
     align: 'center',
     type: 'seq',
@@ -200,7 +197,7 @@ const subGridColumns: VxeGridProps<PermissionDefinitionDto>['columns'] = [
   },
 ];
 
-const gridEvents: VxeGridListeners<PermissionGroupDefinitionDto> = {
+const gridEvents: VxeGridListeners<PermissionGroupVo> = {
   sortChange: () => {
     gridApi.query();
   },
@@ -263,12 +260,12 @@ function onCreate() {
   modalApi.open();
 }
 
-function onUpdate(row: PermissionDefinitionDto) {
+function onUpdate(row: PermissionGroupVo) {
   modalApi.setData(row);
   modalApi.open();
 }
 
-function onDelete(row: PermissionDefinitionDto) {
+function onDelete(row: PermissionGroupVo) {
   Modal.confirm({
     centered: true,
     content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name])}`,
diff --git a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/types.ts b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/types.ts
index 7a4bcdef0..822a3cefe 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/types.ts
+++ b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/types.ts
@@ -37,17 +37,9 @@ export function useTypesMap() {
     U: $t('AbpPermissionManagement.Providers:User'),
   };
 
-  const providerOptions = [
-    { label: providersMap.R, value: 'R' },
-    { label: providersMap.U, value: 'U' },
-    { label: providersMap.O, value: 'O' },
-    { label: providersMap.C, value: 'C' },
-  ];
-
   return {
     multiTenancySideOptions,
     multiTenancySidesMap,
-    providerOptions,
     providersMap,
   };
 }
diff --git a/apps/vben5/packages/@abp/settings/src/api/useDefinitionsApi.ts b/apps/vben5/packages/@abp/settings/src/api/useDefinitionsApi.ts
index 05d6d1eab..62ad87d53 100644
--- a/apps/vben5/packages/@abp/settings/src/api/useDefinitionsApi.ts
+++ b/apps/vben5/packages/@abp/settings/src/api/useDefinitionsApi.ts
@@ -1,4 +1,4 @@
-import type { ListResultDto } from '@abp/core';
+import type { ListResultDto, NameValue } from '@abp/core';
 
 import type {
   SettingDefinitionCreateDto,
@@ -88,11 +88,27 @@ export function useDefinitionsApi() {
     );
   }
 
+  /**
+   * 获取可用设置提供者列表
+   * @returns {Promise<ListResultDto<NameValue<string>>>} 设置提供者列表
+   */
+  function getAssignableProvidersApi(): Promise<
+    ListResultDto<NameValue<string>>
+  > {
+    return request<ListResultDto<NameValue<string>>>(
+      '/api/permission-management/definitions/assignable-providers',
+      {
+        method: 'GET',
+      },
+    );
+  }
+
   return {
     cancel,
     createApi,
     deleteApi,
     getApi,
+    getAssignableProvidersApi,
     getListApi,
     updateApi,
   };
diff --git a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
index c022e6fb8..af0ada32b 100644
--- a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
+++ b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
@@ -1,17 +1,11 @@
 <script setup lang="ts">
+import type { NameValue } from '@abp/core';
 import type { PropertyInfo } from '@abp/ui';
 import type { FormInstance } from 'ant-design-vue';
 
 import type { SettingDefinitionDto } from '../../types/definitions';
 
-import {
-  defineEmits,
-  defineOptions,
-  reactive,
-  ref,
-  toValue,
-  useTemplateRef,
-} from 'vue';
+import { defineEmits, defineOptions, ref, toValue, useTemplateRef } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -47,15 +41,10 @@ const isEditModel = ref(false);
 const activeTab = ref<TabKeys>('basic');
 const form = useTemplateRef<FormInstance>('form');
 const formModel = ref<SettingDefinitionDto>({ ...defaultModel });
-const providerOptions = reactive([
-  { label: $t('AbpSettingManagement.Providers:Default'), value: 'D' },
-  { label: $t('AbpSettingManagement.Providers:Configuration'), value: 'C' },
-  { label: $t('AbpSettingManagement.Providers:Global'), value: 'G' },
-  { label: $t('AbpSettingManagement.Providers:Tenant'), value: 'T' },
-  { label: $t('AbpSettingManagement.Providers:User'), value: 'U' },
-]);
+const availableProviders = ref<NameValue<string>[]>([]);
 
-const { createApi, getApi, updateApi } = useDefinitionsApi();
+const { createApi, getApi, getAssignableProvidersApi, updateApi } =
+  useDefinitionsApi();
 
 const [Modal, modalApi] = useVbenModal({
   class: 'w-1/2',
@@ -93,6 +82,7 @@ const [Modal, modalApi] = useVbenModal({
         modalApi.setState({ loading: true });
         const { name } = modalApi.getData<SettingDefinitionDto>();
         name && (await onGet(name));
+        await onInitProviders();
       } finally {
         modalApi.setState({ loading: false });
       }
@@ -100,6 +90,10 @@ const [Modal, modalApi] = useVbenModal({
   },
   title: $t('AbpSettingManagement.Definition:AddNew'),
 });
+async function onInitProviders() {
+  const { items } = await getAssignableProvidersApi();
+  availableProviders.value = items;
+}
 async function onGet(name: string) {
   isEditModel.value = true;
   const dto = await getApi(name);
@@ -180,7 +174,8 @@ function onPropDelete(prop: PropertyInfo) {
               v-model:value="formModel.providers"
               :allow-clear="true"
               :disabled="formModel.isStatic"
-              :options="providerOptions"
+              :field-names="{ label: 'name', value: 'value' }"
+              :options="availableProviders"
               mode="multiple"
             />
           </FormItem>