feat: Optimize the definition management page

apps/vben5/packages/@abp/ai-management/src/components/tools/AIToolDefinitionModal.vue

@@ -52,6 +52,7 @@ const defaultModel: AIToolDefinitionVto = {
   name: '',
   isEnabled: true,
   isGlobal: false,
+  isStatic: false,
   isSystem: false,
   provider: '',
   extraProperties: {},
@@ -80,7 +81,7 @@ const getAIToolOptions = computed<NonNullable<SelectProps['options']>>(() => {
 // 表单允许编辑
 const getIsAllowUpdate = computed<boolean>(() => {
   if (formModel.value.id) {
-    if (formModel.value.isSystem) {
+    if (formModel.value.isSystem || formModel.value.isStatic) {
       return false;
     }
     return isGranted(AIToolDefinitionPermissions.Update);
@@ -140,6 +141,7 @@ async function onInit() {
     modalApi.setState({
       loading: true,
       title: $t('AIManagement.Tools:New'),
+      showConfirmButton: true,
     });
     await onInitProviderOptions();
     const { id } = modalApi.getData<AIToolDefinitionVto>();
@@ -154,6 +156,7 @@ async function onInit() {
       (p) => p.name === dto.provider,
     );
     modalApi.setState({
+      showConfirmButton: !dto.isSystem && !dto.isStatic,
       title: $t('AIManagement.Tools:Edit'),
     });
   } finally {

apps/vben5/packages/@abp/ai-management/src/components/tools/AIToolDefinitionTable.vue

@@ -220,6 +220,7 @@ async function onDelete(row: AIToolDefinitionRecordDto) {
         </Button>
         <Button
           v-access:code="[AIToolDefinitionPermissions.Delete]"
+          :disabled="row.isStatic"
           :icon="h(DeleteOutlined)"
           block
           danger

apps/vben5/packages/@abp/ai-management/src/components/workspaces/WorkspaceDefinitionModal.vue

@@ -51,6 +51,7 @@ const defaultModel: WorkspaceDefinitionVto = {
   id: '',
   name: '',
   isEnabled: true,
+  isStatic: true,
   displayName: '',
   provider: '',
   modelName: '',
@@ -109,7 +110,8 @@ async function onInit() {
     modalApi.setState({
       title: $t('AIManagement.Workspaces:Edit'),
     });
-    isAllowUpdate.value = isGranted(WorkspaceDefinitionPermissions.Update);
+    isAllowUpdate.value =
+      !dto.isStatic && isGranted(WorkspaceDefinitionPermissions.Update);
   } finally {
     modalApi.setState({
       loading: false,

apps/vben5/packages/@abp/ai-management/src/components/workspaces/WorkspaceDefinitionTable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { VxeGridProps } from '@abp/ui';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { VbenFormProps } from '@vben/common-ui';
 
@@ -7,6 +8,7 @@ import type { WorkspaceDefinitionRecordDto } from '../../types/workspaces';
 
 import { defineAsyncComponent, h } from 'vue';
 
+import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
@@ -17,9 +19,11 @@ import {
   CloseOutlined,
   DeleteOutlined,
   EditOutlined,
+  EllipsisOutlined,
   PlusOutlined,
+  RedoOutlined,
 } from '@ant-design/icons-vue';
-import { Button, message, Modal } from 'ant-design-vue';
+import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
 
 import { useWorkspaceDefinitionsApi } from '../../api/useWorkspaceDefinitionsApi';
 import { WorkspaceDefinitionPermissions } from '../../constants/permissions';
@@ -27,7 +31,11 @@ import { WorkspaceDefinitionPermissions } from '../../constants/permissions';
 defineOptions({
   name: 'WorkspaceDefinitionTable',
 });
+
+const MenuItem = Menu.Item;
+
 const { Lr } = useLocalization();
+const { hasAccessByCodes } = useAccess();
 const { deserialize: deserializeLocalizableString } =
   useLocalizationSerializer();
 const { deleteApi, getPagedListApi } = useWorkspaceDefinitionsApi();
@@ -101,6 +109,11 @@ const gridOptions: VxeGridProps<WorkspaceDefinitionRecordDto> = {
       slots: { default: 'actions' },
       title: $t('AbpUi.Actions'),
       width: 220,
+      visible: hasAccessByCodes([
+        WorkspaceDefinitionPermissions.Default,
+        WorkspaceDefinitionPermissions.Delete,
+        WorkspaceDefinitionPermissions.Update,
+      ]),
     },
   ],
   exportConfig: {},
@@ -148,6 +161,11 @@ const [WorkspaceDefinitionModal, modalApi] = useVbenModal({
     () => import('./WorkspaceDefinitionModal.vue'),
   ),
 });
+const [WorkspaceResetApiKeyModal, resetApiKeyModalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./WorkspaceResetApiKeyModal.vue'),
+  ),
+});
 
 function onCreate() {
   modalApi.setData({});
@@ -171,6 +189,16 @@ async function onDelete(row: WorkspaceDefinitionRecordDto) {
     title: $t('AbpUi.AreYouSure'),
   });
 }
+
+function onMenuClick(row: WorkspaceDefinitionRecordDto, info: MenuInfo) {
+  switch (info.key) {
+    case 'reset-api-key': {
+      resetApiKeyModalApi.setData(row);
+      resetApiKeyModalApi.open();
+      break;
+    }
+  }
+}
 </script>
 
 <template>
@@ -204,6 +232,7 @@ async function onDelete(row: WorkspaceDefinitionRecordDto) {
         </Button>
         <Button
           v-access:code="[WorkspaceDefinitionPermissions.Delete]"
+          :disabled="row.isStatic"
           :icon="h(DeleteOutlined)"
           block
           danger
@@ -212,10 +241,25 @@ async function onDelete(row: WorkspaceDefinitionRecordDto) {
         >
           {{ $t('AbpUi.Delete') }}
         </Button>
+        <Dropdown>
+          <template #overlay>
+            <Menu @click="(info) => onMenuClick(row, info)">
+              <MenuItem
+                v-if="hasAccessByCodes([WorkspaceDefinitionPermissions.Update])"
+                key="reset-api-key"
+                :icon="h(RedoOutlined)"
+              >
+                {{ $t('AIManagement.ResetApiKey') }}
+              </MenuItem>
+            </Menu>
+          </template>
+          <Button :icon="h(EllipsisOutlined)" type="link" />
+        </Dropdown>
       </div>
     </template>
   </Grid>
   <WorkspaceDefinitionModal @change="() => gridApi.query()" />
+  <WorkspaceResetApiKeyModal @change="() => gridApi.query()" />
 </template>
 
 <style lang="scss" scoped></style>

apps/vben5/packages/@abp/ai-management/src/components/workspaces/WorkspaceResetApiKeyModal.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { WorkspaceDefinitionRecordDto } from '../../types/workspaces';
+
+import { ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useMessage } from '@abp/ui';
+
+import { useWorkspaceDefinitionsApi } from '../../api/useWorkspaceDefinitionsApi';
+
+const emit = defineEmits<{
+  (event: 'change', data: WorkspaceDefinitionRecordDto): void;
+}>();
+
+const message = useMessage();
+const { getApi, updateApi } = useWorkspaceDefinitionsApi();
+
+const formModel = ref<WorkspaceDefinitionRecordDto>();
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      fieldName: 'apiKey',
+      component: 'InputPassword',
+      label: $t('AIManagement.DisplayName:ApiKey'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+  handleSubmit: onSubmit,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  title: $t('AIManagement.ResetApiKey'),
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      const { id } = modalApi.getData<WorkspaceDefinitionRecordDto>();
+      const dto = await getApi(id);
+      formModel.value = dto;
+    }
+  },
+  async onConfirm() {
+    await formApi.validateAndSubmitForm();
+  },
+});
+
+async function onSubmit(values: Record<string, string>) {
+  try {
+    modalApi.lock();
+    const dto = await updateApi(formModel.value!.id, {
+      ...formModel.value!,
+      apiKey: values.apiKey,
+    });
+    message.success($t('AbpUi.SavedSuccessfully'));
+    emit('change', dto);
+    modalApi.close();
+  } finally {
+    modalApi.unlock();
+  }
+}
+</script>
+
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>
+
+<style scoped></style>

apps/vben5/packages/@abp/ai-management/src/types/tools.ts

@@ -11,6 +11,7 @@ interface AIToolDefinitionRecordDto
   description?: string;
   isEnabled: boolean;
   isGlobal: boolean;
+  isStatic: boolean;
   isSystem: boolean;
   name: string;
   provider: string;

apps/vben5/packages/@abp/ai-management/src/types/workspaces.ts

@@ -13,6 +13,7 @@ interface WorkspaceDefinitionRecordDto
   frequencyPenalty?: number;
   instructions?: string;
   isEnabled: boolean;
+  isStatic: boolean;
   maxOutputTokens?: number;
   modelName: string;
   name: string;

apps/vben5/packages/@abp/components/src/vditor/Viewer.vue

@@ -21,7 +21,7 @@ const viewerRef = ref<HTMLDivElement>();
 const vditorPreviewRef = ref<VditorPreview>();
 
 const skinName = computed(() => {
-  return preferences.theme.mode === 'light' ? 'light' : 'dark';
+  return preferences.theme.mode === 'dark' ? 'dark' : 'light';
 });
 
 function init() {
@@ -35,6 +35,9 @@ function init() {
     theme: {
       current: isDark ? 'dark' : 'light',
     },
+    transform: (html) => {
+      return html.replaceAll(/<a\s+/gi, '<a class="text-blue-600" target="_blank" rel="noopener noreferrer" ');
+    }
   });
 }
 

apps/vben5/packages/@abp/features/src/components/definitions/features/FeatureDefinitionTable.vue

@@ -10,7 +10,6 @@ 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 {
@@ -38,7 +37,6 @@ import { FeatureDefinitionsPermissions } from '../../../constants/permissions';
 defineOptions({
   name: 'FeatureDefinitionTable',
 });
-const FeaturesOutlined = createIconifyIcon('pajamas:feature-flag');
 const MenuItem = Menu.Item;
 
 interface FeatureVo {
@@ -205,6 +203,11 @@ const subGridColumns: VxeGridProps<FeatureGroupVo>['columns'] = [
     slots: { default: 'action' },
     title: $t('AbpUi.Actions'),
     width: 220,
+    visible: hasAccessByCodes([
+      FeatureDefinitionsPermissions.Create,
+      FeatureDefinitionsPermissions.Delete,
+      FeatureDefinitionsPermissions.Update,
+    ]),
   },
 ];
 
@@ -356,17 +359,17 @@ onMounted(onGet);
               {{ $t('AbpUi.Edit') }}
             </Button>
             <Button
-              v-if="!feature.isStatic"
               :icon="h(DeleteOutlined)"
               block
               danger
               type="link"
               v-access:code="[FeatureDefinitionsPermissions.Delete]"
+              :disabled="feature.isStatic"
               @click="onDelete(feature)"
             >
               {{ $t('AbpUi.Delete') }}
             </Button>
-            <Dropdown v-if="!feature.isStatic">
+            <Dropdown>
               <template #overlay>
                 <Menu @click="(info) => onMenuClick(feature, info)">
                   <MenuItem
@@ -374,7 +377,7 @@ onMounted(onGet);
                       hasAccessByCodes([FeatureDefinitionsPermissions.Create])
                     "
                     key="features"
-                    :icon="h(FeaturesOutlined)"
+                    :icon="h(PlusOutlined)"
                   >
                     {{ $t('AbpFeatureManagement.FeatureDefinitions:AddNew') }}
                   </MenuItem>

apps/vben5/packages/@abp/features/src/components/definitions/groups/FeatureGroupDefinitionTable.vue

@@ -10,7 +10,6 @@ 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 { sortby, useLocalization, useLocalizationSerializer } from '@abp/core';
@@ -35,8 +34,6 @@ defineOptions({
 
 const MenuItem = Menu.Item;
 
-const FeaturesOutlined = createIconifyIcon('pajamas:feature-flag');
-
 const featureGroups = ref<FeatureGroupDefinitionDto[]>([]);
 
 const { Lr } = useLocalization();
@@ -87,6 +84,11 @@ const gridOptions: VxeGridProps<FeatureGroupDefinitionDto> = {
       slots: { default: 'action' },
       title: $t('AbpUi.Actions'),
       width: 220,
+      visible: hasAccessByCodes([
+        FeatureDefinitionsPermissions.Create,
+        GroupDefinitionsPermissions.Delete,
+        GroupDefinitionsPermissions.Update,
+      ]),
     },
   ],
   exportConfig: {},
@@ -231,25 +233,25 @@ onMounted(onGet);
           {{ $t('AbpUi.Edit') }}
         </Button>
         <Button
-          v-if="!row.isStatic"
           :icon="h(DeleteOutlined)"
           block
           danger
           type="link"
           v-access:code="[GroupDefinitionsPermissions.Delete]"
+          :disabled="row.isStatic"
           @click="onDelete(row)"
         >
           {{ $t('AbpUi.Delete') }}
         </Button>
-        <Dropdown v-if="!row.isStatic">
+        <Dropdown>
           <template #overlay>
             <Menu @click="(info) => onMenuClick(row, info)">
               <MenuItem
                 v-if="hasAccessByCodes([FeatureDefinitionsPermissions.Create])"
                 key="features"
-                :icon="h(FeaturesOutlined)"
+                :icon="h(PlusOutlined)"
               >
-                {{ $t('AbpFeatureManagement.GroupDefinitions:AddNew') }}
+                {{ $t('AbpFeatureManagement.FeatureDefinitions:AddNew') }}
               </MenuItem>
             </Menu>
           </template>

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

@@ -10,7 +10,6 @@ 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 { sortby, useLocalization, useLocalizationSerializer } from '@abp/core';
@@ -35,8 +34,6 @@ defineOptions({
 
 const MenuItem = Menu.Item;
 
-const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
-
 const permissionGroups = ref<PermissionGroupDefinitionDto[]>([]);
 
 const { Lr } = useLocalization();
@@ -87,6 +84,11 @@ const gridOptions: VxeGridProps<PermissionGroupDefinitionDto> = {
       slots: { default: 'action' },
       title: $t('AbpUi.Actions'),
       width: 220,
+      visible: hasAccessByCodes([
+        PermissionDefinitionsPermissions.Create,
+        GroupDefinitionsPermissions.Delete,
+        GroupDefinitionsPermissions.Update,
+      ]),
     },
   ],
   exportConfig: {},
@@ -221,7 +223,7 @@ onMounted(onGet);
     </template>
     <template #action="{ row }">
       <div class="flex flex-row">
-        <div :class="`${row.isStatic ? 'w-full' : 'basis-1/3'}`">
+        <div class="basis-1/3">
           <Button
             :icon="h(EditOutlined)"
             block
@@ -232,42 +234,39 @@ onMounted(onGet);
             {{ $t('AbpUi.Edit') }}
           </Button>
         </div>
-        <template v-if="!row.isStatic">
+        <div class="basis-1/3">
-          <div class="basis-1/3">
+          <Button
-            <Button
+            :icon="h(DeleteOutlined)"
-              :icon="h(DeleteOutlined)"
+            block
-              block
+            danger
-              danger
+            type="link"
-              type="link"
+            v-if="hasAccessByCodes([GroupDefinitionsPermissions.Delete])"
-              v-access:code="[GroupDefinitionsPermissions.Delete]"
+            :disabled="row.isStatic"
-              @click="onDelete(row)"
+            @click="onDelete(row)"
-            >
+          >
-              {{ $t('AbpUi.Delete') }}
+            {{ $t('AbpUi.Delete') }}
-            </Button>
+          </Button>
-          </div>
+        </div>
-          <div class="basis-1/3">
+        <div class="basis-1/3">
-            <Dropdown>
+          <Dropdown>
-              <template #overlay>
+            <template #overlay>
-                <Menu @click="(info) => onMenuClick(row, info)">
+              <Menu @click="(info) => onMenuClick(row, info)">
-                  <MenuItem
+                <MenuItem
-                    v-if="
+                  v-if="
-                      hasAccessByCodes([
+                    hasAccessByCodes([PermissionDefinitionsPermissions.Create])
-                        PermissionDefinitionsPermissions.Create,
+                  "
-                      ])
+                  key="permissions"
-                    "
+                  :icon="h(PlusOutlined)"
-                    key="permissions"
+                >
-                    :icon="h(PermissionsOutlined)"
+                  {{
-                  >
+                    $t('AbpPermissionManagement.PermissionDefinitions:AddNew')
-                    {{
+                  }}
-                      $t('AbpPermissionManagement.PermissionDefinitions:AddNew')
+                </MenuItem>
-                    }}
+              </Menu>
-                  </MenuItem>
+            </template>
-                </Menu>
+            <Button :icon="h(EllipsisOutlined)" type="link" />
-              </template>
+          </Dropdown>
-              <Button :icon="h(EllipsisOutlined)" type="link" />
+        </div>
-            </Dropdown>
-          </div>
-        </template>
       </div>
     </template>
   </Grid>

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

@@ -16,6 +16,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
+  isNullOrWhiteSpace,
   listToTree,
   useLocalization,
   useLocalizationSerializer,
@@ -94,9 +95,15 @@ const [Modal, modalApi] = useVbenModal({
   },
   onConfirm: async () => {
     await form.value?.validate();
+    const input = toValue(formModel);
     const api = isEditModel.value
-      ? updateApi(formModel.value.name, toValue(formModel))
+      ? updateApi(formModel.value.name, input)
-      : createApi(toValue(formModel));
+      : createApi({
+          ...input,
+          name: isNullOrWhiteSpace(input.parentName)
+            ? input.name
+            : `${input.parentName}.${input.name}`,
+        });
     modalApi.setState({ submitting: true });
     api
       .then((res) => {
@@ -121,9 +128,11 @@ const [Modal, modalApi] = useVbenModal({
       });
       try {
         modalApi.setState({ loading: true });
-        const { groupName, name } = modalApi.getData<PermissionDefinitionDto>();
+        const { groupName, name, parentName } =
+          modalApi.getData<PermissionDefinitionDto>();
         name && (await onGet(name));
         await Promise.all([onInitGroups(groupName), onInitProviders()]);
+        formModel.value.parentName = parentName;
       } finally {
         modalApi.setState({ loading: false });
       }
@@ -251,6 +260,7 @@ function onPropDelete(prop: PropertyInfo) {
           >
             <Input
               v-model:value="formModel.name"
+              :addon-before="`${formModel.parentName ?? ''}`"
               :disabled="formModel.isStatic"
               autocomplete="off"
             />

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

@@ -1,10 +1,12 @@
 <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';
 
 import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
+import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
@@ -14,24 +16,27 @@ import {
   useLocalization,
   useLocalizationSerializer,
 } from '@abp/core';
-import { useVbenVxeGrid } from '@abp/ui';
+import { useMessage, useVbenVxeGrid } from '@abp/ui';
 import {
   DeleteOutlined,
   EditOutlined,
+  EllipsisOutlined,
   PlusOutlined,
 } from '@ant-design/icons-vue';
-import { Button, message, Modal, Tag } from 'ant-design-vue';
+import { Button, Dropdown, Menu, Modal, Tag } from 'ant-design-vue';
 import { VxeGrid } from 'vxe-table';
 
 import { usePermissionDefinitionsApi } from '../../../api/usePermissionDefinitionsApi';
 import { usePermissionGroupDefinitionsApi } from '../../../api/usePermissionGroupDefinitionsApi';
-import { GroupDefinitionsPermissions } from '../../../constants/permissions';
+import { PermissionDefinitionsPermissions } from '../../../constants/permissions';
 import { useTypesMap } from './types';
 
 defineOptions({
   name: 'PermissionDefinitionTable',
 });
 
+const MenuItem = Menu.Item;
+
 interface PermissionVo {
   children: PermissionVo[];
   displayName: string;
@@ -51,6 +56,8 @@ interface PermissionGroupVo {
 
 const permissionGroups = ref<PermissionGroupVo[]>([]);
 
+const message = useMessage();
+const { hasAccessByCodes } = useAccess();
 const { Lr } = useLocalization();
 const { deserialize } = useLocalizationSerializer();
 const { multiTenancySidesMap, providersMap } = useTypesMap();
@@ -193,7 +200,12 @@ const subGridColumns: VxeGridProps<PermissionVo>['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: $t('AbpUi.Actions'),
-    width: 180,
+    width: 260,
+    visible: hasAccessByCodes([
+      PermissionDefinitionsPermissions.Create,
+      PermissionDefinitionsPermissions.Delete,
+      PermissionDefinitionsPermissions.Update,
+    ]),
   },
 ];
 
@@ -278,6 +290,19 @@ function onDelete(row: PermissionGroupVo) {
   });
 }
 
+function onMenuClick(row: PermissionVo, info: MenuInfo) {
+  switch (info.key) {
+    case 'permissions': {
+      modalApi.setData({
+        groupName: row.groupName,
+        parentName: row.name,
+      });
+      modalApi.open();
+      break;
+    }
+  }
+}
+
 onMounted(onGet);
 </script>
 
@@ -287,7 +312,7 @@ onMounted(onGet);
       <Button
         :icon="h(PlusOutlined)"
         type="primary"
-        v-access:code="[GroupDefinitionsPermissions.Create]"
+        v-access:code="[PermissionDefinitionsPermissions.Create]"
         @click="onCreate"
       >
         {{ $t('AbpPermissionManagement.PermissionDefinitions:AddNew') }}
@@ -321,22 +346,44 @@ onMounted(onGet);
               :icon="h(EditOutlined)"
               block
               type="link"
-              v-access:code="[GroupDefinitionsPermissions.Update]"
+              v-access:code="[PermissionDefinitionsPermissions.Update]"
               @click="onUpdate(permission)"
             >
               {{ $t('AbpUi.Edit') }}
             </Button>
             <Button
-              v-if="!permission.isStatic"
               :icon="h(DeleteOutlined)"
               block
               danger
               type="link"
-              v-access:code="[GroupDefinitionsPermissions.Delete]"
+              v-access:code="[PermissionDefinitionsPermissions.Delete]"
+              :disabled="permission.isStatic"
               @click="onDelete(permission)"
             >
               {{ $t('AbpUi.Delete') }}
             </Button>
+            <Dropdown>
+              <template #overlay>
+                <Menu
+                  @click="(info: MenuInfo) => onMenuClick(permission, info)"
+                >
+                  <MenuItem
+                    v-if="
+                      hasAccessByCodes([
+                        PermissionDefinitionsPermissions.Create,
+                      ])
+                    "
+                    key="permissions"
+                    :icon="h(PlusOutlined)"
+                  >
+                    {{
+                      $t('AbpPermissionManagement.PermissionDefinitions:AddNew')
+                    }}
+                  </MenuItem>
+                </Menu>
+              </template>
+              <Button :icon="h(EllipsisOutlined)" type="link" />
+            </Dropdown>
           </div>
         </template>
       </VxeGrid>

apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue

@@ -7,6 +7,7 @@ import type { SettingDefinitionDto } from '../../types/definitions';
 
 import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
+import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
@@ -29,6 +30,7 @@ defineOptions({
 const settingGroups = ref<SettingDefinitionDto[]>([]);
 
 const { Lr } = useLocalization();
+const { hasAccessByCodes } = useAccess();
 const { deserialize } = useLocalizationSerializer();
 const { deleteApi, getListApi } = useDefinitionsApi();
 
@@ -75,6 +77,10 @@ const gridOptions: VxeGridProps<SettingDefinitionDto> = {
       slots: { default: 'action' },
       title: $t('AbpUi.Actions'),
       width: 180,
+      visible: hasAccessByCodes([
+        SettingDefinitionsPermissions.Update,
+        SettingDefinitionsPermissions.DeleteOrRestore,
+      ]),
     },
   ],
   exportConfig: {},
@@ -192,29 +198,26 @@ onMounted(onGet);
     </template>
     <template #action="{ row }">
       <div class="flex flex-row">
-        <div :class="row.isStatic ? 'w-full' : 'basis-1/2'">
+        <Button
-          <Button
+          :icon="h(EditOutlined)"
-            :icon="h(EditOutlined)"
+          block
-            block
+          type="link"
-            type="link"
+          v-access:code="[SettingDefinitionsPermissions.Update]"
-            v-access:code="[SettingDefinitionsPermissions.Update]"
+          @click="onUpdate(row)"
-            @click="onUpdate(row)"
+        >
-          >
+          {{ $t('AbpUi.Edit') }}
-            {{ $t('AbpUi.Edit') }}
+        </Button>
-          </Button>
+        <Button
-        </div>
+          :icon="h(DeleteOutlined)"
-        <div v-if="!row.isStatic" class="basis-1/2">
+          block
-          <Button
+          danger
-            :icon="h(DeleteOutlined)"
+          type="link"
-            block
+          v-access:code="[SettingDefinitionsPermissions.DeleteOrRestore]"
-            danger
+          :disabled="row.isStatic"
-            type="link"
+          @click="onDelete(row)"
-            v-access:code="[SettingDefinitionsPermissions.DeleteOrRestore]"
+        >
-            @click="onDelete(row)"
+          {{ $t('AbpUi.Delete') }}
-          >
+        </Button>
-            {{ $t('AbpUi.Delete') }}
-          </Button>
-        </div>
       </div>
     </template>
   </Grid>

apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateContentModal.vue

@@ -144,8 +144,8 @@ async function onSubmit(values: Record<string, string>) {
 
 <template>
   <Modal :title="$t('AbpTextTemplating.EditContents')">
-    <Alert v-if="textTemplate?.isInlineLocalized" type="warning">
+    <Alert v-if="textTemplate?.isInlineLocalized" type="warning" show-icon>
-      <template #message>
+      <template #description>
         <MarkdownViewer
           :value="$t('AbpTextTemplating.InlineContentDescription')"
         />

apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateDefinitionModal.vue

@@ -47,7 +47,7 @@ const abpStore = useAbpStore();
 const { Lr } = useLocalization();
 const { hasAccessByCodes } = useAccess();
 const { deserialize } = useLocalizationSerializer();
-const { getListApi: getResourcesApi } = useResourcesApi();
+const { getPagedListApi: getResourcesApi } = useResourcesApi();
 const { cancel, createApi, getApi, getListApi, updateApi } =
   useTemplateDefinitionsApi();
 
@@ -144,7 +144,9 @@ async function onInitResources() {
   if (!hasAccessByCodes(['LocalizationManagement.Resource'])) {
     return;
   }
-  const { items } = await getResourcesApi();
+  const { items } = await getResourcesApi({
+    maxResultCount: 100,
+  });
   textTemplateResources.value = items;
 }
 

apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateDefinitionTable.vue

@@ -130,6 +130,11 @@ const gridOptions: VxeGridProps<TextTemplateDefinitionDto> = {
       slots: { default: 'action' },
       title: $t('AbpUi.Actions'),
       width: 220,
+      visible: hasAccessByCodes([
+        WebhookDefinitionsPermissions.Default,
+        WebhookDefinitionsPermissions.Delete,
+        WebhookDefinitionsPermissions.Update,
+      ]),
     },
   ],
   exportConfig: {},
@@ -290,10 +295,7 @@ onMounted(onGet);
           {{ $t('AbpUi.Edit') }}
         </Button>
         <Button
-          v-if="
+          :disabled="row.isStatic"
-            !row.isStatic &&
-            hasAccessByCodes([WebhookDefinitionsPermissions.Delete])
-          "
           :icon="h(DeleteOutlined)"
           block
           danger

apps/vben5/packages/@abp/ui/src/components/properties/PropertyTable.vue

@@ -57,7 +57,7 @@ const getTableColumns = computed((): TableColumnsType<PropertyInfo> => {
     {
       align: 'left',
       dataIndex: 'value',
-      width: 500,
+      width: 'auto',
       ellipsis: true,
       title: $t('component.extra_property_dictionary.value'),
     },