Merge pull request #655 from colinin/Switch-Ui-Setup-Syntax

feat: components switch to setup syntax

apps/vue/src/api/auditing/auditLog.ts

@@ -12,10 +12,8 @@ export const deleteById = (id: string) => {
     controller: Api.Controller,
     action: 'DeleteAsync',
     params: {
-      input: {
       id: id,
     },
-    },
   });
 };
 

apps/vue/src/api/identity/securityLog.ts

@@ -12,10 +12,8 @@ export const deleteById = (id: string) => {
     controller: Api.Controller,
     action: 'DeleteAsync',
     params: {
-      input: {
       id: id,
     },
-    },
   });
 };
 
@@ -25,10 +23,8 @@ export const getById = (id: string) => {
     controller: Api.Controller,
     action: 'GetAsync',
     params: {
-      input: {
       id: id,
     },
-    },
   });
 };
 

apps/vue/src/components/MultiTenancyBox/src/MultiTenancyBox.vue

@@ -16,28 +16,16 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent } from 'vue';
+  import { computed } from 'vue';
-  import { Button, Form, Input } from 'ant-design-vue';
+  import { Button, Input } from 'ant-design-vue';
-  import { Input as BInput } from '/@/components/Input';
+  import { useModal } from '/@/components/Modal';
-  import { BasicModal, useModal } from '/@/components/Modal';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-
   import { useAbpStoreWithOut } from '/@/store/modules/abp';
   import MultiTenancyModal from './MultiTenancyModal.vue';
 
-  export default defineComponent({
+  const InputSearch = Input.Search;
-    name: 'MultiTenancyBox',
+
-    components: {
-      BasicModal,
-      Button,
-      Form,
-      FormItem: Form.Item,
-      BInput,
-      InputSearch: Input.Search,
-      MultiTenancyModal,
-    },
-    setup() {
   const { L } = useLocalization('AbpUiMultiTenancy');
   const [registerModal, { openModal }] = useModal();
   const multiTenancyEnabled = computed(() => {
@@ -52,14 +40,4 @@
   function handleSwitchTenant() {
     openModal(true, currentTenant.value.name);
   }
-
-      return {
-        L,
-        multiTenancyEnabled,
-        currentTenant,
-        registerModal,
-        handleSwitchTenant,
-      };
-    },
-  });
 </script>

apps/vue/src/components/MultiTenancyBox/src/MultiTenancyModal.vue

@@ -14,8 +14,8 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, nextTick } from 'vue';
+  import { nextTick, inject } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { findTenantByName } from '/@/api/multi-tenancy/tenants';
@@ -24,10 +24,7 @@
   import { useAbpStoreWithOut } from '/@/store/modules/abp';
   import { useGlobSetting } from '/@/hooks/setting';
 
-  export default defineComponent({
+  const cookies = inject<any>('$cookies');
-    name: 'MultiTenancyModal',
-    components: { BasicForm, BasicModal },
-    setup() {
   const globSetting = useGlobSetting();
   const { L } = useLocalization('AbpUiMultiTenancy');
   const { createMessage } = useMessage();
@@ -51,47 +48,33 @@
     });
   });
 
-      return {
+  function switchToTenant() {
-        L,
+    validate().then((input) => {
-        registerForm,
+      changeLoading(true);
-        registerModal,
-        validate,
-        createMessage,
-        closeModal,
-        globSetting,
-        changeLoading,
-      };
-    },
-    methods: {
-      switchToTenant() {
-        this.validate().then((input) => {
-          this.changeLoading(true);
       const abpStore = useAbpStoreWithOut();
       if (!input.name) {
-            this.$cookies.remove(this.globSetting.multiTenantKey);
+        cookies?.remove(globSetting.multiTenantKey);
       } else {
         findTenantByName(input.name).then((result) => {
           if (!result.success || !result.tenantId) {
-                this.createMessage.warn(this.L('GivenTenantIsNotExist', [input.name]));
+            createMessage.warn(L('GivenTenantIsNotExist', [input.name]));
             return;
           }
 
           if (!result.isActive) {
-                this.createMessage.warn(this.L('GivenTenantIsNotAvailable', [input.name]));
+            createMessage.warn(L('GivenTenantIsNotAvailable', [input.name]));
             return;
           }
 
-              this.$cookies.set(this.globSetting.multiTenantKey, result.tenantId);
+          cookies?.set(globSetting.multiTenantKey, result.tenantId);
-            }).finally(() => this.changeLoading(false));
+        }).finally(() => changeLoading(false));
       }
       // 不加延迟在下次请求不会携带租户标识
       setTimeout(() => {
         abpStore.initlizeAbpApplication()
-              .then(this.closeModal)
+          .then(closeModal)
-              .finally(() => this.changeLoading(false));
+          .finally(() => changeLoading(false));
       }, 100);
     });
-      },
   }
-  })
 </script>

apps/vue/src/components/SettingManagement/src/SettingForm.vue

@@ -81,7 +81,7 @@
         </TabPane>
       </Tabs>
       <FormItem style="margin-top: 20px">
-        <a-button
+        <Button
           v-if="updateSetting.settings.length > 0"
           type="primary"
           style="width: 150px"
@@ -90,19 +90,20 @@
           @click="handleSubmit"
         >
           {{ sumbitButtonTitle }}
-        </a-button>
+        </Button>
       </FormItem>
     </Form>
   </Card>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import dayjs from 'dayjs';
-  import { computed, defineComponent, ref, toRaw } from 'vue';
+  import { computed, ref, toRaw } from 'vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useTabsStyle } from '/@/hooks/component/useStyles';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import {
+    Button,
     Card,
     Checkbox,
     Tabs,
@@ -110,15 +111,20 @@
     Form,
     Input,
     Select,
-    Row,
-    Col,
     DatePicker,
   } from 'ant-design-vue';
   import { Input as BInput } from '/@/components/Input';
   import { formatToDate } from '/@/utils/dateUtil';
   import { SettingGroup, SettingsUpdate } from '/@/api/settings/model/settingModel';
 
-  const props = {
+  const CollapsePanel = Collapse.Panel;
+  const FormItem = Form.Item;
+  const SelectOption = Select.Option;
+  const TabPane = Tabs.TabPane;
+  const Password = Input.Password;
+
+  const emits = defineEmits(['change']);
+  const props = defineProps({
     settingGroups: {
       type: Array as PropType<Array<SettingGroup>>,
       required: true,
@@ -131,29 +137,8 @@
       type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
       default: 'top',
     },
-  } as const; // 对于存在必输项的props see: https://blog.csdn.net/q535999731/article/details/109578885
+  });
 
-  export default defineComponent({
-    components: {
-      Card,
-      Checkbox,
-      Collapse: Collapse,
-      CollapsePanel: Collapse.Panel,
-      DatePicker,
-      Form: Form,
-      FormItem: Form.Item,
-      BInput,
-      Select,
-      SelectOption: Select.Option,
-      Tabs: Tabs,
-      TabPane: Tabs.TabPane,
-      Password: Input.Password,
-      Row,
-      Col,
-    },
-    props,
-    emits: ['change'],
-    setup(props, { emit }) {
   const { L } = useLocalization('AbpSettingManagement');
   const activeTabKey = ref(0);
   const saving = ref(false);
@@ -214,27 +199,10 @@
       .saveApi(toRaw(updateSetting.value))
       .then(() => {
         success(L('SuccessfullySaved'));
-            emit('change', toRaw(updateSetting.value));
+        emits('change', toRaw(updateSetting.value));
       })
       .finally(() => {
         saving.value = false;
       });
   }
-
-      return {
-        L,
-        dayjs,
-        saving,
-        tabsStyle,
-        activeTabKey,
-        updateSetting,
-        sumbitButtonTitle,
-        expandedCollapseKeys,
-        handleCheckChange,
-        handleDateChange,
-        handleValueChange,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/utils/cache/persistent.ts

@@ -6,7 +6,6 @@ import { createLocalStorage, createSessionStorage } from '/@/utils/cache';
 import { Memory } from './memory';
 import {
   TOKEN_KEY,
-  ABP_TENANT_KEY,
   USER_INFO_KEY,
   ROLES_KEY,
   LOCK_INFO_KEY,
@@ -21,7 +20,6 @@ import { pick, omit } from 'lodash-es';
 
 interface BasicStore {
   [TOKEN_KEY]: string | number | null | undefined;
-  [ABP_TENANT_KEY]: string;
   [USER_INFO_KEY]: UserInfo;
   [ROLES_KEY]: string[];
   [LOCK_INFO_KEY]: LockInfo;
@@ -51,13 +49,6 @@ function initPersistentMemory() {
 }
 
 export class Persistent {
-  static setTenant(value: any) {
-    ls.set(ABP_TENANT_KEY, value);
-  }
-
-  static getTenant() {
-    return ls.get(ABP_TENANT_KEY);
-  }
 
   static getLocal<T>(key: LocalKeys) {
     return localMemory.get(key)?.value as Nullable<T>;

apps/vue/src/utils/dateUtil.ts

@@ -7,14 +7,14 @@ const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 const DATE_FORMAT = 'YYYY-MM-DD';
 
 export function formatToDateTime(
-  date: string | dayjs.Dayjs | undefined = undefined,
+  date: string | Date | dayjs.Dayjs | undefined = undefined,
   format = DATE_TIME_FORMAT,
 ): string {
   return dayjs(date).format(format);
 }
 
 export function formatToDate(
-  date: string | dayjs.Dayjs | undefined = undefined,
+  date: string | Date | dayjs.Dayjs | undefined = undefined,
   format = DATE_FORMAT,
 ): string {
   return dayjs(date).format(format);

apps/vue/src/views/account/center/Cloud.vue

@@ -15,7 +15,7 @@
       </CardGrid>
       <CardGrid style="width: 75%">
         <component
-          :is="switchComponent.name"
+          :is="componentsRef[switchComponent.name]"
           :select-group="switchComponent.group"
           :select-path="switchComponent.path"
           :delete-enabled="deleteEnabled"
@@ -26,8 +26,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref } from 'vue';
+  import { computed, ref, shallowRef } from 'vue';
   import { Card, Tree } from 'ant-design-vue';
   import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
@@ -36,6 +36,15 @@
   import FileList from './FileList.vue';
   import ShareList from './ShareList.vue';
 
+  const componentsRef = shallowRef({
+    'FileList': FileList,
+    'ShareList': ShareList,
+  });
+
+  const CardGrid = Card.Grid;
+  const CardMeta = Card.Meta;
+  const DirectoryTree = Tree.DirectoryTree;
+
   interface IComponent {
     name: string;
     group: string;
@@ -43,16 +52,6 @@
     dataRef: any;
   }
 
-  export default defineComponent({
-    components: {
-      Card,
-      CardGrid: Card.Grid,
-      CardMeta: Card.Meta,
-      DirectoryTree: Tree.DirectoryTree,
-      FileList,
-      ShareList,
-    },
-    setup() {
   const { hasPermission } = usePermission();
   const { L } = useLocalization(['AbpOssManagement', 'AbpUi']);
   const folderTreeRef = ref<{ [key: string]: TreeDataItem }>({
@@ -137,17 +136,4 @@
       };
     });
   }
-
-      return {
-        L,
-        switchComponent,
-        folderTree,
-        deleteEnabled,
-        expandedKeys,
-        fetchFolders,
-        handleSelectFolder,
-        handleAppendFolder,
-      };
-    },
-  });
 </script>

apps/vue/src/views/account/center/FileList.vue

@@ -155,6 +155,7 @@
           path: record.path,
           object: record.name,
         }).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
           deleteTableDataRecord(record.name);
           props.selectGroup === 'private' && emit('delete:file:private', record);
           props.selectGroup === 'public' && emit('delete:file:public', record);

apps/vue/src/views/account/center/index.vue

@@ -1,18 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <a-row :class="`${prefixCls}-top`">
+    <Row :class="`${prefixCls}-top`">
-      <a-col :span="9" :class="`${prefixCls}-col`">
+      <Col :span="9" :class="`${prefixCls}-col`">
-        <a-row>
+        <Row>
-          <a-col :span="8">
+          <Col :span="8">
             <div :class="`${prefixCls}-top__avatar`">
               <img width="70" :src="userInfo.avatar ?? headerImg" />
               <span>{{ userInfo.realName ?? userInfo.username }}</span>
               <div>{{ userInfo.description }}</div>
             </div>
-          </a-col>
+          </Col>
-        </a-row>
+        </Row>
-      </a-col>
+      </Col>
-    </a-row>
+    </Row>
     <div :class="`${prefixCls}-bottom`">
       <Tabs
         v-model:activeKey="activeTabKey"
@@ -21,7 +21,7 @@
       >
         <template v-for="item in components" :key="item.key">
           <TabPane :tab="item.name">
-            <component :is="item.component" />
+            <component :is="componentsRef[item.component]" />
           </TabPane>
         </template>
       </Tabs>
@@ -29,43 +29,37 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { Tag, Tabs, Row, Col } from 'ant-design-vue';
+  import { Tabs, Row, Col } from 'ant-design-vue';
-  import { defineComponent, computed, ref } from 'vue';
+  import { computed, ref, shallowRef } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import Icon from '/@/components/Icon/index';
   import headerImg from '/@/assets/images/header.jpg';
   import { useUserStore } from '/@/store/modules/user';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { useTabsStyle } from '/@/hooks/component/useStyles';
   import Cloud from './Cloud.vue';
   import Setting from './Setting.vue';
-  export default defineComponent({
+
-    components: {
+  const TabPane = Tabs.TabPane;
-      Cloud,
+  
-      CollapseContainer,
+  const componentsRef = shallowRef({
-      Icon,
+    'Cloud': Cloud,
-      Tag,
+    'Setting': Setting,
-      Tabs,
+  });
-      TabPane: Tabs.TabPane,
+
-      Setting,
+  const prefixCls = 'account-center';
-      [Row.name]: Row,
-      [Col.name]: Col,
-    },
-    setup() {
   const userStore = useUserStore();
-      const activeTabKey = ref('cloud');
+  const activeTabKey = ref('Cloud');
   const { L } = useLocalization(['AbpOssManagement', 'AbpSettingManagement']);
   const components = [
     {
-          key: 'cloud',
+      key: 'Cloud',
       name: L('MyCloud'),
-          component: 'cloud',
+      component: 'Cloud',
     },
     {
-          key: 'setting',
+      key: 'Setting',
       name: L('DisplayName:UserSetting'),
-          component: 'setting',
+      component: 'Setting',
     },
   ];
   const tabsStyle = useTabsStyle(
@@ -76,16 +70,6 @@
     }
   );
   const userInfo = computed(() => userStore.getUserInfo);
-      return {
-        activeTabKey,
-        tabsStyle,
-        prefixCls: 'account-center',
-        userInfo,
-        headerImg,
-        components,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   .account-center {

apps/vue/src/views/account/setting/AccountBind.vue

@@ -1,7 +1,7 @@
 <template>
   <CollapseContainer :title="L('Binding')" :canExpan="false">
     <List>
-      <template v-for="item in list" :key="item.key">
+      <template v-for="item in getAccountBindList()" :key="item.key">
         <ListItem>
           <ListItemMeta>
             <template #avatar>
@@ -25,38 +25,25 @@
     </List>
   </CollapseContainer>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import { List, Tag } from 'ant-design-vue';
-  import { defineComponent } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
   import { useProfile } from './useProfile';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { MyProfile } from '/@/api/account/model/profilesModel';
   import Icon from '/@/components/Icon/index';
 
-  export default defineComponent({
+  const ListItem = List.Item;
-    components: {
+  const ListItemMeta = List.Item.Meta;
-      CollapseContainer,
+
-      List,
+  const props = defineProps({
-      ListItem: List.Item,
-      ListItemMeta: List.Item.Meta,
-      Icon,
-      Tag,
-    },
-    props: {
     profile: {
       type: Object as PropType<MyProfile>,
     }
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpAccount');
   const { getAccountBindList } = useProfile({ profile: props.profile });
-      return {
-        L,
-        list: getAccountBindList(),
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   .avatar {

apps/vue/src/views/account/setting/BaseSetting.vue

@@ -1,10 +1,10 @@
 <template>
   <CollapseContainer :title="L('BasicSettings')" :canExpan="false">
-    <a-row :gutter="24">
+    <Row :gutter="24">
-      <a-col :span="14">
+      <Col :span="14">
         <BasicForm @register="register" />
-      </a-col>
+      </Col>
-      <a-col :span="10">
+      <Col :span="10">
         <div class="change-avatar">
           <div class="mb-2">{{ L('Avatar') }}</div>
           <CropperAvatar
@@ -16,8 +16,8 @@
             @change="updateAvatar"
           />
         </div>
-      </a-col>
+      </Col>
-    </a-row>
+    </Row>
     <Button
       type="primary"
       :loading="confirmButton.loading"
@@ -27,41 +27,32 @@
     >
   </CollapseContainer>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import { Button, Row, Col } from 'ant-design-vue';
-  import { computed, defineComponent, reactive, watch } from 'vue';
+  import { computed, reactive, watch } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { CollapseContainer } from '/@/components/Container';
   import { CropperAvatar } from '/@/components/Cropper';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import headerImg from '/@/assets/icons/64x64/color-user.png';
   import { useUserStore } from '/@/store/modules/user';
   import { upload } from '/@/api/oss-management/private';
   import { changeAvatar } from '/@/api/account/claims';
   import { update as updateProfile } from '/@/api/account/profiles';
   import { MyProfile, UpdateMyProfile } from '/@/api/account/model/profilesModel';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { useProfile } from './useProfile';
 
-  export default defineComponent({
+  const emits = defineEmits(['profile-change']);
-    components: {
+  const props = defineProps({
-      BasicForm,
-      CollapseContainer,
-      Button,
-      ARow: Row,
-      ACol: Col,
-      CropperAvatar,
-    },
-    emits: ['profile-change'],
-    props: {
     profile: {
       type: Object as PropType<MyProfile>,
     }
-    },
+  });
-    setup(props, { emit }) {
+
-      const { createMessage } = useMessage();
   const { getBaseSetschemas } = useProfile({ profile: props.profile });
   const userStore = useUserStore();
+  const { createMessage } = useMessage();
   const { L } = useLocalization('AbpAccount');
   const [register, { getFieldsValue, setFieldsValue, validate }] = useForm({
     labelWidth: 120,
@@ -96,7 +87,8 @@
           const path = encodeURIComponent(res.data.path.substring(0, res.data.path.length - 1));
           changeAvatar({ avatarUrl: `${path}/${res.data.name}` })
             .then(() => {
-                  emit('profile-change');
+              createMessage.success(L('Successful'));
+              emits('profile-change');
               resolve({} as unknown as void);
             })
             .catch((err) => reject(err));
@@ -118,26 +110,13 @@
       updateProfile(getFieldsValue() as UpdateMyProfile)
         .then(() => {
           createMessage.success(L('PersonalSettingsSaved'));
-              emit('profile-change');
+          emits('profile-change');
-            })
+        }).finally(() => {
-            .finally(() => {
           confirmButton.loading = false;
           confirmButton.title = L('Submit');
         });
     });
   }
-
-      return {
-        L,
-        avatar,
-        register,
-        updateAvatar,
-        confirmButton,
-        handleUploadAvatar,
-        handleSubmit,
-      };
-    },
-  });
 </script>
 
 <style lang="less" scoped>

apps/vue/src/views/account/setting/MsgNotify.vue

@@ -30,31 +30,28 @@
     </template>
   </Collapse>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import { Card, List, Switch, Collapse } from 'ant-design-vue';
-  import { defineComponent, ref, onMounted } from 'vue';
+  import { ref, onMounted } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-  import { ListItem, useProfile } from './useProfile';
+  import { ListItem as ProfileItem, useProfile } from './useProfile';
   import { subscribe, unSubscribe } from '/@/api/messages/subscribes';
   import { MyProfile } from '/@/api/account/model/profilesModel';
-  export default defineComponent({
+
-    components: {
+  const CollapsePanel = Collapse.Panel;
-      Card,
+  const ListItem = List.Item;
-      Collapse,
+  const ListItemMeta = List.Item.Meta;
-      CollapsePanel: Collapse.Panel,
+
-      List,
+  const props = defineProps({
-      ListItem: List.Item,
-      ListItemMeta: List.Item.Meta,
-      Switch,
-    },
-    props: {
     profile: {
       type: Object as PropType<MyProfile>,
     }
-    },
+  });
-    setup(props) {
+
+  const { createMessage } = useMessage();
   const { L } = useLocalization('AbpAccount');
-      const notifyGroup = ref<{[key: string]: ListItem[]}>({});
+  const notifyGroup = ref<{[key: string]: ProfileItem[]}>({});
   const { getMsgNotifyList } = useProfile({ profile: props.profile });
 
   function _fetchNotifies() {
@@ -65,21 +62,15 @@
 
   onMounted(_fetchNotifies);
 
-      function handleChange(item: ListItem, checked) {
+  function handleChange(item: ProfileItem, checked) {
     item.loading = true;
     const api = checked ? subscribe(item.key) : unSubscribe(item.key);
-        api.finally(() => {
+    api.then(() => {
+      createMessage.success(L('Successful'));
+    }).finally(() => {
       item.loading = false;
     });
   }
-
-      return {
-        L,
-        notifyGroup,
-        handleChange,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   .extra {

apps/vue/src/views/account/setting/SecureSetting.vue

@@ -33,10 +33,10 @@
     <SettingFormModal @register="registerModal" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import type { ListItem } from './useProfile';
+  import type { ListItem as ProfileItem } from './useProfile';
   import { Button, List, Switch, Tag } from 'ant-design-vue';
-  import { defineComponent, ref, onMounted } from 'vue';
+  import { ref, onMounted } from 'vue';
   import { CollapseContainer } from '/@/components/Container';
   import { useModal } from '/@/components/Modal';
   import { useProfile } from './useProfile';
@@ -46,27 +46,19 @@
   import { MyProfile } from '/@/api/account/model/profilesModel';
   import SettingFormModal from './SettingFormModal.vue';
 
-  export default defineComponent({
+  const ListItem = List.Item;
-    components: {
+  const ListItemMeta = List.Item.Meta;
-      Button,
+
-      CollapseContainer,
+  const props = defineProps({
-      List,
-      ListItem: List.Item,
-      ListItemMeta: List.Item.Meta,
-      Switch,
-      Tag,
-      SettingFormModal,
-    },
-    props: {
     profile: {
       type: Object as PropType<MyProfile>,
     }
-    },
+  });
-    setup(props) {
+
   const { createMessage } = useMessage();
   const { L } = useLocalization('AbpAccount');
   const { getSecureSettingList } = useProfile({ profile: props.profile });
-      const secureSettingList = ref<ListItem[]>([]);
+  const secureSettingList = ref<ProfileItem[]>([]);
   const [registerModal, { openModal }] = useModal();
 
   onMounted(() => {
@@ -75,7 +67,7 @@
     });
   });
 
-      function toggleCommand(item: ListItem) {
+  function toggleCommand(item: ProfileItem) {
     item.loading = true;
     switch (item.key) {
       case 'password':
@@ -95,7 +87,7 @@
     }
   }
 
-      function handleChange(item: ListItem, checked) {
+  function handleChange(item: ProfileItem, checked) {
     item.loading = true;
     switch (item.key) {
       case 'twofactor':
@@ -107,16 +99,6 @@
         break;
     }
   }
-
-      return {
-        L,
-        secureSettingList,
-        handleChange,
-        toggleCommand,
-        registerModal,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   .extra {

apps/vue/src/views/account/setting/index.vue

@@ -1,10 +1,10 @@
 <template>
   <ScrollContainer>
-    <div ref="wrapperRef" :class="prefixCls">
+    <div ref="wrapperRef" class="account-setting">
-      <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
+      <Tabs tab-position="left" :tabBarStyle="{ width: '220px' }">
         <template v-for="item in getSettingList()" :key="item.key">
           <TabPane :tab="item.name">
-            <component :is="item.component" :profile="profileRef" @profile-change="initUserInfo" />
+            <component :is="componentsRef[item.component]" :profile="profileRef" @profile-change="initUserInfo" />
           </TabPane>
         </template>
       </Tabs>
@@ -12,8 +12,8 @@
   </ScrollContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, onMounted } from 'vue';
+  import { ref, shallowRef, onMounted } from 'vue';
   import { Tabs } from 'ant-design-vue';
   import { ScrollContainer } from '/@/components/Container/index';
   import { getSettingList } from './data';
@@ -24,17 +24,16 @@
   import SecureSetting from './SecureSetting.vue';
   import AccountBind from './AccountBind.vue';
   import MsgNotify from './MsgNotify.vue';
-  export default defineComponent({
+
-    components: {
+  const TabPane = Tabs.TabPane;
-      ScrollContainer,
+
-      Tabs,
+  const componentsRef = shallowRef({
-      TabPane: Tabs.TabPane,
+    'BaseSetting': BaseSetting,
-      BaseSetting,
+    'SecureSetting': SecureSetting,
-      SecureSetting,
+    'AccountBind': AccountBind,
-      AccountBind,
+    'MsgNotify': MsgNotify,
-      MsgNotify,
+  });
-    },
+  
-    setup() {
   const profileRef = ref<MyProfile>();
   onMounted(fetchProfile);
 
@@ -48,18 +47,6 @@
     await abpStore.initlizeAbpApplication();
     await fetchProfile();
   }
-      
-      return {
-        prefixCls: 'account-setting',
-        profileRef,
-        initUserInfo,
-        getSettingList,
-        tabBarStyle: {
-          width: '220px',
-        },
-      };
-    },
-  });
 </script>
 <style lang="less">
   .account-setting {

apps/vue/src/views/auditing/components/AuditLogModal.vue

@@ -1,6 +1,7 @@
 <template>
   <BasicModal @register="registerModal" :width="800" :height="400" :title="L('AuditLog')">
     <Form
+      ref="formElRef"
       :colon="false"
       :labelCol="{ span: 6 }"
       :wrapperCol="{ span: 18 }"
@@ -145,8 +146,8 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref, watch, unref } from 'vue';
+  import { computed, nextTick, ref, unref } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { useTabsStyle } from '/@/hooks/component/useStyles';
   import { Collapse, Form, Tabs, Tag } from 'ant-design-vue';
@@ -158,29 +159,21 @@
   import { AuditLog } from '/@/api/auditing/model/auditLogModel';
   import { formatToDateTime } from '/@/utils/dateUtil';
   import { tryToJson } from '/@/utils/strings';
-  export default defineComponent({
+
-    name: 'AuditLogModal',
+  const CollapsePanel = Collapse.Panel;
-    components: {
+  const FormItem = Form.Item;
-      BasicModal,
+  const TabPane = Tabs.TabPane;
-      BasicTable,
+
-      CodeEditor,
-      Collapse,
-      CollapsePanel: Collapse.Panel,
-      Form,
-      FormItem: Form.Item,
-      Tag,
-      Tabs,
-      TabPane: Tabs.TabPane,
-    },
-    setup() {
   const { L } = useLocalization('AbpAuditLogging');
+  const formElRef = ref<any>();
   const activeKey = ref('basic');
-      const auditLogIdRef = ref('');
   const tabsStyle = useTabsStyle();
   const modelRef = ref<AuditLog>({} as AuditLog);
   const [registerModal] = useModalInner((model) => {
-        auditLogIdRef.value = model.id;
     activeKey.value = 'basic';
+    nextTick(() => {
+      fetchAuditLog(model.id);
+    });
   });
   const columns: BasicColumn[] = [
     {
@@ -227,32 +220,13 @@
     return (dateVal) => formatToDateTime(dateVal, 'YYYY-MM-DD HH:mm:ss');
   });
 
-      watch(
+  function fetchAuditLog(id?: string) {
-        () => unref(auditLogIdRef),
+    const formEl = unref(formElRef);
-        (id) => {
+    formEl?.resetFields();
     if (id) {
       getById(id).then((res) => {
         modelRef.value = res;
       });
     }
-        },
+  }
-      );
-
-      return {
-        L,
-        MODE,
-        columns,
-        modelRef,
-        activeKey,
-        tabsStyle,
-        entityChangeType,
-        entityChangeTypeColor,
-        httpMethodColor,
-        httpStatusCodeColor,
-        registerModal,
-        formatJsonVal,
-        formatDateVal,
-      };
-    },
-  });
 </script>

apps/vue/src/views/auditing/components/AuditLogTable.vue

@@ -35,23 +35,20 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { Tag } from 'ant-design-vue';
-  import { Modal, Tag } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
   import { getDataColumns } from './TableData';
   import { getSearchFormSchemas } from './ModalData';
   import { useModal } from '/@/components/Modal';
-  import AuditLogModal from './AuditLogModal.vue';
   import { useAuditLog } from '../hooks/useAuditLog';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { deleteById, getList } from '/@/api/auditing/auditLog';
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
+  import AuditLogModal from './AuditLogModal.vue';
 
-  export default defineComponent({
+  const { createMessage, createConfirm } = useMessage();
-    name: 'AuditLogTable',
-    components: { AuditLogModal, BasicTable, Tag, TableAction },
-    setup() {
   const { L } = useLocalization('AbpAuditLogging');
   const [registerTable, { reload }] = useTable({
     rowKey: 'id',
@@ -83,27 +80,17 @@
   }
 
   function handleDelete(record) {
-        Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
         deleteById(record.id).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },
     });
   }
-
-      return {
-        L,
-        httpMethodColor,
-        httpStatusCodeColor,
-        registerTable,
-        registerModal,
-        handleShow,
-        handleDelete,
-      };
-    },
-  });
 </script>

apps/vue/src/views/caching-management/cache/datas/ModalData.ts

@@ -69,7 +69,7 @@ export function getModalFormSchemas(): FormSchema[] {
       label: L('DisplayName:Values'),
       colProps: { span: 24 },
       render: ({ values }) => {
-        return createVNode(JsonPreview, {
+        return createVNode(JsonPreview!, {
           data: values.values,
         });
       },

apps/vue/src/views/feature/src/FeatureModal.vue

@@ -31,7 +31,7 @@
                   style="width: 100%"
                   v-model:value="feature.value"
                 />
-                <Input v-else v-model:value="feature.value" />
+                <BInput v-else v-model:value="feature.value" />
               </div>
               <Select
                 v-else-if="feature.valueType.name === 'SelectionStringValueType'"
@@ -52,27 +52,19 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref } from 'vue';
+  import { computed, ref } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { Checkbox, Form, InputNumber, Select, Tabs } from 'ant-design-vue';
   import { Input } from '/@/components/Input';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { useFeature } from '../hooks/useFeature';
-  export default defineComponent({
+
-    components: {
+  const FormItem = Form.Item;
-      BasicModal,
+  const Option = Select.Option;
-      Checkbox,
+  const TabPane = Tabs.TabPane;
-      Form,
+  const BInput = Input!;
-      FormItem: Form.Item,
+
-      Input,
-      InputNumber,
-      Select,
-      Option: Select.Option,
-      Tabs,
-      TabPane: Tabs.TabPane,
-    },
-    setup() {
   const { L } = useLocalization('AbpFeatureManagement');
   // TODO: 当有多个选项的时候是否有性能相关影响?
   const localizer = computed(() => {
@@ -94,18 +86,4 @@
     formRel,
     modalMethods,
   });
-
-      return {
-        L,
-        localizer,
-        formRel,
-        registerModal,
-        featureGroup,
-        featureGroupKey,
-        validator,
-        handleSubmit,
-        onGroupChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/api-resources/components/ApiResourceModal.vue

@@ -13,8 +13,8 @@
       ref="formElRef"
       :model="resourceRef"
       :rules="formRules"
-      :label-col="labelCol"
+      :label-col="{ span: 6 }"
-      :wrapper-col="wrapperCol"
+      :wrapper-col="{ span: 18 }"
     >
       <Tabs v-model:activeKey="tabActivedKey" @change="handleChangeTab">
         <!-- Api 资源基本信息 -->
@@ -28,19 +28,19 @@
             }}</Checkbox>
           </FormItem>
           <FormItem name="name" required :label="L('Name')">
-            <Input v-model:value="resourceRef.name" :disabled="isEdit" />
+            <BInput v-model:value="resourceRef.name" :disabled="isEdit" />
           </FormItem>
           <FormItem name="displayName" :label="L('DisplayName')">
-            <Input v-model:value="resourceRef.displayName" />
+            <BInput v-model:value="resourceRef.displayName" />
           </FormItem>
           <FormItem name="description" :label="L('Description')">
-            <Input v-model:value="resourceRef.description" />
+            <BInput v-model:value="resourceRef.description" />
           </FormItem>
           <FormItem
             name="allowedAccessTokenSigningAlgorithms"
             :label="L('AllowedAccessTokenSigningAlgorithms')"
           >
-            <Input v-model:value="resourceRef.allowedAccessTokenSigningAlgorithms" />
+            <BInput v-model:value="resourceRef.allowedAccessTokenSigningAlgorithms" />
           </FormItem>
         </TabPane>
 
@@ -64,14 +64,14 @@
               </span>
               <template #overlay>
                 <Menu @click="handleClickMenu">
-                  <MenuItem key="api-resource-secret">{{ L('Secret') }}</MenuItem>
+                  <MenuItem key="ApiResourceSecret">{{ L('Secret') }}</MenuItem>
-                  <MenuItem key="properties">{{ L('Propertites') }}</MenuItem>
+                  <MenuItem key="Properties">{{ L('Propertites') }}</MenuItem>
                 </Menu>
               </template>
             </Dropdown>
           </template>
           <component
-            :is="advancedComponent"
+            :is="componentsRef[advancedComponent]"
             :secrets="resourceRef.secrets"
             :properties="resourceRef.properties"
             @secrets-new="handleNewSecret"
@@ -85,8 +85,9 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref, shallowRef } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { DownOutlined } from '@ant-design/icons-vue';
   import { Checkbox, Dropdown, Menu, Tabs, Form } from 'ant-design-vue';
@@ -101,32 +102,25 @@
   import ApiResourceSecret from './ApiResourceSecret.vue';
   import UserClaim from '../../components/UserClaim.vue';
   import Properties from '../../components/Properties.vue';
-  export default defineComponent({
+
-    name: 'ApiResourceModal',
+  const FormItem = Form.Item;
-    components: {
+  const MenuItem = Menu.Item;
-      UserClaim,
+  const TabPane = Tabs.TabPane;
-      Properties,
+  const BInput = Input!;
-      ApiResourceScope,
+
-      ApiResourceSecret,
+  const componentsRef = shallowRef({
-      BasicModal,
+    'ApiResourceSecret': ApiResourceSecret,
-      DownOutlined,
+    'Properties': Properties,
-      Form,
+  });
-      FormItem: Form.Item,
+
-      Dropdown,
+  const emits = defineEmits(['change', 'register']);
-      Menu,
+
-      MenuItem: Menu.Item,
+  const { createMessage } = useMessage();
-      Tabs,
-      TabPane: Tabs.TabPane,
-      Input,
-      Checkbox,
-    },
-    emits: ['change', 'register'],
-    setup(_, { emit }) {
   const { L } = useLocalization('AbpIdentityServer');
   const formElRef = ref<any>(null);
   const resourceIdRef = ref('');
   const tabActivedKey = ref('basic');
-      const advancedComponent = ref('api-resource-secret');
+  const advancedComponent = ref('ApiResourceSecret');
   const [registerModal, { changeOkLoading }] = useModalInner((val) => {
     resourceIdRef.value = val.id;
   });
@@ -155,40 +149,11 @@
 
   function handleOk() {
     changeOkLoading(true);
-        handleSubmit()
+    handleSubmit().then(() => {
-          .then(() => {
+      createMessage.success(L('Successful'));
-            emit('change');
+      emits('change');
-          })
+    }).finally(() => {
-          .finally(() => {
       changeOkLoading(false);
     });
   }
-
-      return {
-        L,
-        isEdit,
-        formElRef,
-        formRules,
-        formTitle,
-        tabActivedKey,
-        registerModal,
-        resourceRef,
-        advancedComponent,
-        labelCol: { span: 6 },
-        wrapperCol: { span: 18 },
-        handleClickMenu,
-        handleNewSecret,
-        handleDeleteSecret,
-        handleNewProperty,
-        handleDeleteProperty,
-        handleChangeTab,
-        handleVisibleModal,
-        handleOk,
-        targetScopes,
-        handleScopeChange,
-        targetClaims,
-        handleClaimChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/api-resources/components/ApiResourceScope.vue

@@ -12,20 +12,21 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, onMounted, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { Transfer } from 'ant-design-vue';
   import { discovery } from '/@/api/identity-server/identityServer';
 
-  export default defineComponent({
+  const emits = defineEmits(['change']);
-    name: 'ApiResourceScope',
+
-    components: { Transfer },
+  defineProps({
-    props: {
+    targetScopes: {
-      targetScopes: { type: Object as PropType<string[]>, required: true },
+      type: Object as PropType<string[]>,
+      required: true,
     },
-    emits: ['change'],
+  });
-    setup(_, { emit }) {
+
   const { L } = useLocalization('AbpIdentityServer');
   const supportedScopes = ref<
     {
@@ -46,14 +47,6 @@
   });
 
   function handleChange(targetKeys, direction, moveKeys) {
-        emit('change', targetKeys, direction, moveKeys);
+    emits('change', targetKeys, direction, moveKeys);
   }
-
-      return {
-        L,
-        supportedScopes,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/api-resources/components/ApiResourceSecret.vue

@@ -2,7 +2,7 @@
   <div>
     <BasicTable
       rowKey="type"
-      :columns="columns"
+      :columns="getSecretColumns()"
       :dataSource="secrets"
       :pagination="false"
       :showTableSetting="true"
@@ -38,8 +38,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { Button } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form';
@@ -49,24 +50,16 @@
   import { getSecretColumns } from '../datas/TableData';
   import { getSecretFormSchemas } from '../datas/ModalData';
 
-  export default defineComponent({
+  const emits = defineEmits(['register', 'secrets-new', 'secrets-delete']);
-    name: 'ApiResourceSecret',
+  defineProps({
-    components: {
-      BasicForm,
-      BasicModal,
-      BasicTable,
-      Button,
-      TableAction,
-    },
-    props: {
     secrets: {
       type: [Array] as PropType<ApiResourceSecret[]>,
       required: true,
       default: () => [],
     },
-    },
+  });
-    emits: ['register', 'secrets-new', 'secrets-delete'],
+
-    setup(_, { emit }) {
+  const { createMessage } = useMessage();
   const { L } = useLocalization('AbpIdentityServer');
   const title = ref('');
   const [registerForm, { validate, resetFields }] = useForm({
@@ -82,27 +75,15 @@
   }
 
   function handleDelete(record) {
-        emit('secrets-delete', record);
+    emits('secrets-delete', record);
   }
 
   function handleSubmit() {
     validate().then((input) => {
-          emit('secrets-new', input);
+      createMessage.success(L('Successful'));
+      emits('secrets-new', input);
       resetFields();
       closeModal();
     });
   }
-
-      return {
-        L,
-        title,
-        handleAddNew,
-        handleDelete,
-        handleSubmit,
-        columns: getSecretColumns(),
-        registerForm,
-        registerModal,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/api-resources/components/ApiResourceTable.vue

@@ -6,10 +6,12 @@
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'enabled'">
-          <Switch :checked="record.enabled" readonly />
+          <CheckOutlined v-if="record.enabled" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-if="column.key === 'showInDiscoveryDocument'">
-          <Switch :checked="record.showInDiscoveryDocument" readonly />
+          <CheckOutlined v-if="record.showInDiscoveryDocument" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-else-if="column.key === 'action'">
           <TableAction
@@ -36,9 +38,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { Button } from 'ant-design-vue';
-  import { Button, Modal, Switch } from 'ant-design-vue';
+  import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
@@ -48,10 +51,7 @@
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
   import ApiResourceModal from './ApiResourceModal.vue';
 
-  export default defineComponent({
+  const { createMessage, createConfirm } = useMessage();
-    name: 'ApiResourceTable',
-    components: { ApiResourceModal, BasicTable, Button, Switch, TableAction },
-    setup() {
   const { L } = useLocalization('AbpIdentityServer');
   const [registerModal, { openModal, closeModal }] = useModal();
   const [registerTable, { reload }] = useTable({
@@ -91,27 +91,17 @@
   }
 
   function handleDelete(record) {
-        Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
         deleteById(record.id).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },
     });
   }
-
-      return {
-        L,
-        registerModal,
-        registerTable,
-        handleAddNew,
-        handleDelete,
-        handleEdit,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/api-resources/datas/TableData.ts

@@ -36,14 +36,14 @@ export function getDataColumns(): BasicColumn[] {
     {
       title: L('Resource:Enabled'),
       dataIndex: 'enabled',
-      align: 'left',
+      align: 'center',
       width: 200,
       sorter: true,
     },
     {
       title: L('ShowInDiscoveryDocument'),
       dataIndex: 'showInDiscoveryDocument',
-      align: 'left',
+      align: 'center',
       width: 200,
       sorter: true,
     },

apps/vue/src/views/identity-server/api-resources/hooks/useModal.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
 
 import { computed, ref, reactive, unref, watch } from 'vue';
-import { message } from 'ant-design-vue';
 import { cloneDeep } from 'lodash-es';
+import { useMessage } from '/@/hooks/web/useMessage';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { useValidation } from '/@/hooks/abp/useValidation';
 
@@ -16,6 +16,7 @@ interface UseModal {
 }
 
 export function useModal({ resourceIdRef, formElRef, tabActivedKey }: UseModal) {
+  const { createMessage } = useMessage();
   const { L } = useLocalization('AbpIdentityServer');
   const { ruleCreator } = useValidation();
   const resourceRef = ref<ApiResource>({} as ApiResource);
@@ -80,12 +81,10 @@ export function useModal({ resourceIdRef, formElRef, tabActivedKey }: UseModal)
           const api = isEdit.value
             ? update(input.id, Object.assign(input))
             : create(Object.assign(input));
-          api
+          api.then((res) => {
-            .then((res) => {
+            createMessage.success(L('Successful'));
-              message.success(L('Successful'));
             resolve(res);
-            })
+          }).catch((error) => {
-            .catch((error) => {
             reject(error);
           });
         })

apps/vue/src/views/identity-server/api-scopes/components/ApiScopeModal.vue

@@ -13,8 +13,8 @@
       ref="formElRef"
       :model="modelRef"
       :rules="formRules"
-      :label-col="labelCol"
+      :label-col="{ span: 6 }"
-      :wrapper-col="wrapperCol"
+      :wrapper-col="{ span: 18 }"
     >
       <Tabs v-model:activeKey="tabActivedKey" @change="handleChangeTab">
         <!-- Api 资源基本信息 -->
@@ -65,7 +65,7 @@
             </Dropdown>
           </template>
           <component
-            :is="advancedComponent"
+            :is="componentsRef[advancedComponent]"
             :properties="modelRef.properties"
             @props-new="handleNewProperty"
             @props-delete="handleDeleteProperty"
@@ -76,8 +76,9 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref, shallowRef } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { DownOutlined } from '@ant-design/icons-vue';
   import { Checkbox, Dropdown, Menu, Tabs, Form } from 'ant-design-vue';
@@ -88,25 +89,18 @@
   import { useProperty } from '../hooks/useProperty';
   import UserClaim from '../../components/UserClaim.vue';
   import Properties from '../../components/Properties.vue';
-  export default defineComponent({
+
-    name: 'ApiScopeModal',
+  const FormItem = Form.Item;
-    components: {
+  const MenuItem = Menu.Item;
-      UserClaim,
+  const TabPane = Tabs.TabPane;
-      Properties,
+
-      BasicModal,
+  const componentsRef = shallowRef({
-      DownOutlined,
+    'properties': Properties,
-      Form,
+  });
-      FormItem: Form.Item,
+
-      Dropdown,
+  const emits = defineEmits(['change', 'register']);
-      Menu,
+
-      MenuItem: Menu.Item,
+  const { createMessage } = useMessage();
-      Tabs,
-      TabPane: Tabs.TabPane,
-      Input,
-      Checkbox,
-    },
-    emits: ['change', 'register'],
-    setup(_, { emit }) {
   const { L } = useLocalization('AbpIdentityServer');
   const formElRef = ref<any>(null);
   const modelIdRef = ref('');
@@ -138,36 +132,11 @@
 
   function handleOk() {
     changeOkLoading(true);
-        handleSubmit()
+    handleSubmit() .then(() => {
-          .then(() => {
+      createMessage.success(L('Successful'));
-            emit('change');
+      emits('change');
-          })
+    }) .finally(() => {
-          .finally(() => {
       changeOkLoading(false);
     });
   }
-
-      return {
-        L,
-        isEdit,
-        formElRef,
-        formRules,
-        formTitle,
-        tabActivedKey,
-        registerModal,
-        modelRef,
-        advancedComponent,
-        labelCol: { span: 6 },
-        wrapperCol: { span: 18 },
-        handleClickMenu,
-        handleNewProperty,
-        handleDeleteProperty,
-        handleChangeTab,
-        handleVisibleModal,
-        handleOk,
-        targetClaims,
-        handleClaimChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/api-scopes/components/ApiScopeTable.vue

@@ -6,16 +6,20 @@
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'required'">
-          <Switch :checked="record.required" readonly />
+          <CheckOutlined v-if="record.required" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-else-if="column.key === 'enabled'">
-          <Switch :checked="record.enabled" readonly />
+          <CheckOutlined v-if="record.enabled" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-else-if="column.key === 'emphasize'">
-          <Switch :checked="record.emphasize" readonly />
+          <CheckOutlined v-if="record.emphasize" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-else-if="column.key === 'showInDiscoveryDocument'">
-          <Switch :checked="record.showInDiscoveryDocument" readonly />
+          <CheckOutlined v-if="record.showInDiscoveryDocument" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-else-if="column.key === 'action'">
           <TableAction
@@ -42,9 +46,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { Button } from 'ant-design-vue';
-  import { Button, Modal, Switch } from 'ant-design-vue';
+  import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
@@ -54,10 +59,7 @@
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
   import ApiScopeModal from './ApiScopeModal.vue';
 
-  export default defineComponent({
+  const { createMessage, createConfirm } = useMessage();
-    name: 'ApiScopeTable',
-    components: { ApiScopeModal, BasicTable, Button, Switch, TableAction },
-    setup() {
   const { L } = useLocalization('AbpIdentityServer');
   const [registerModal, { openModal, closeModal }] = useModal();
   const [registerTable, { reload }] = useTable({
@@ -97,27 +99,17 @@
   }
 
   function handleDelete(record) {
-        Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
         deleteById(record.id).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },
     });
   }
-
-      return {
-        L,
-        registerModal,
-        registerTable,
-        handleAddNew,
-        handleDelete,
-        handleEdit,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/api-scopes/datas/TableData.ts

@@ -11,6 +11,20 @@ export function getDataColumns(): BasicColumn[] {
       width: 1,
       ifShow: false,
     },
+    {
+      title: L('Enabled'),
+      dataIndex: 'enabled',
+      align: 'center',
+      width: 150,
+      sorter: true,
+    },
+    {
+      title: L('Required'),
+      dataIndex: 'required',
+      align: 'center',
+      width: 150,
+      sorter: true,
+    },
     {
       title: L('Name'),
       dataIndex: 'name',
@@ -32,31 +46,17 @@ export function getDataColumns(): BasicColumn[] {
       width: 180,
       sorter: true,
     },
-    {
-      title: L('Required'),
-      dataIndex: 'required',
-      align: 'left',
-      width: 200,
-      sorter: true,
-    },
-    {
-      title: L('Enabled'),
-      dataIndex: 'enabled',
-      align: 'left',
-      width: 200,
-      sorter: true,
-    },
     {
       title: L('Emphasize'),
       dataIndex: 'emphasize',
-      align: 'left',
+      align: 'center',
       width: 200,
       sorter: true,
     },
     {
       title: L('ShowInDiscoveryDocument'),
       dataIndex: 'showInDiscoveryDocument',
-      align: 'left',
+      align: 'center',
       width: 200,
       sorter: true,
     },

apps/vue/src/views/identity-server/api-scopes/hooks/useModal.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
 
 import { computed, ref, reactive, unref, watch } from 'vue';
-import { message } from 'ant-design-vue';
 import { cloneDeep } from 'lodash-es';
+import { useMessage } from '/@/hooks/web/useMessage';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { useValidation } from '/@/hooks/abp/useValidation';
 
@@ -16,6 +16,7 @@ interface UseModal {
 }
 
 export function useModal({ modelIdRef, formElRef, tabActivedKey }: UseModal) {
+  const { createMessage } = useMessage();
   const { L } = useLocalization('AbpIdentityServer');
   const { ruleCreator } = useValidation();
   const modelRef = ref<ApiScope>({} as ApiScope);
@@ -76,12 +77,10 @@ export function useModal({ modelIdRef, formElRef, tabActivedKey }: UseModal) {
           const api = isEdit.value
             ? update(input.id, Object.assign(input))
             : create(Object.assign(input));
-          api
+          api.then((res) => {
-            .then((res) => {
+            createMessage.success(L('Successful'));
-              message.success(L('Successful'));
             resolve(res);
-            })
+          }).catch((error) => {
-            .catch((error) => {
             reject(error);
           });
         })

apps/vue/src/views/identity-server/clients/components/ClientApiResource.vue

@@ -2,23 +2,20 @@
   <Resources :resources="resources" :targetResources="targetResources" @change="handleChange" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref, onMounted, toRefs } from 'vue';
+  import { computed, ref, onMounted, toRefs } from 'vue';
   import Resources from './Resources.vue';
   import { getAssignableApiResources } from '/@/api/identity-server/clients';
   import { Client } from '/@/api/identity-server/model/clientsModel';
   import { useResource } from '../hooks/useResource';
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'ClientApiResource',
-    components: { Resources },
-    props: {
     modelRef: {
       type: Object as PropType<Client>,
       required: true,
     },
-    },
+  });
-    setup(props) {
+
   const resources = ref<{ key: string; title: string }[]>([]);
   const targetResources = computed(() => {
     const targetScopes = resources.value.filter((item) =>
@@ -50,12 +47,4 @@
         break;
     }
   }
-
-      return {
-        resources,
-        targetResources,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientCallback.vue

@@ -10,25 +10,22 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, toRefs } from 'vue';
+  import { toRefs } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { FormSchema } from '/@/components/Form';
   import { BasicColumn } from '/@/components/Table';
   import { Client } from '/@/api/identity-server/model/clientsModel';
-  import DynamicForm from './DynamicForm.vue';
   import { useUrl } from '../hooks/useUrl';
+  import DynamicForm from './DynamicForm.vue';
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'ClientCallback',
-    components: { DynamicForm },
-    props: {
     modelRef: {
       type: Object as PropType<Client>,
       required: true,
     },
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpIdentityServer');
   const schemas: FormSchema[] = [
     {
@@ -56,14 +53,4 @@
   function handleDelete(record) {
     handleRedirectUriChange('delete', record.redirectUri);
   }
-
-      return {
-        L,
-        schemas,
-        columns,
-        handleAddNew,
-        handleDelete,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientClaim.vue

@@ -26,27 +26,26 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, toRefs } from 'vue';
+  import { toRefs } from 'vue';
   import { Checkbox, Form } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { FormSchema } from '/@/components/Form';
   import { BasicColumn } from '/@/components/Table';
-  import DynamicForm from './DynamicForm.vue';
   import { useClaim } from '../hooks/useClaim';
   import { Client } from '/@/api/identity-server/model/clientsModel';
   import { getActivedList } from '/@/api/identity/claim';
+  import DynamicForm from './DynamicForm.vue';
+
+  const FormItem = Form.Item;
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'ClientClaim',
-    components: { Checkbox, DynamicForm, FormItem: Form.Item },
-    props: {
     modelRef: {
       type: Object as PropType<Client>,
       required: true,
     },
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpIdentityServer');
   const schemas: FormSchema[] = [
     {
@@ -98,15 +97,4 @@
   function handleDelete(record) {
     handleClaimChange('delete', record);
   }
-
-      return {
-        L,
-        schemas,
-        columns,
-        handleAddNew,
-        handleDelete,
-        handleCheckedChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientClone.vue

@@ -12,19 +12,17 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, unref } from 'vue';
+  import { ref, unref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-  import { message } from 'ant-design-vue';
   import { BasicForm, useForm, FormActionType, FormSchema } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { clone } from '/@/api/identity-server/clients';
 
-  export default defineComponent({
+  const emits = defineEmits(['change', 'register']);
-    name: 'ClientClone',
+
-    components: { BasicForm, BasicModal },
+  const { createMessage } = useMessage();
-    emits: ['change', 'register'],
-    setup(_, { emit }) {
   const { L } = useLocalization('AbpIdentityServer');
   const clientIdRef = ref('');
   const formElRef = ref<Nullable<FormActionType>>(null);
@@ -146,8 +144,8 @@
       changeOkLoading(true);
       clone(unref(clientIdRef), input)
         .then(() => {
-              message.success(L('Successful'));
+          createMessage.success(L('Successful'));
-              emit('change');
+          emits('change');
           closeModal();
         })
         .finally(() => {
@@ -155,14 +153,4 @@
         });
     });
   }
-
-      return {
-        L,
-        formElRef,
-        registerModal,
-        registerForm,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientCorsOrigins.vue

@@ -10,8 +10,8 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, toRefs } from 'vue';
+  import { toRefs } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { FormSchema } from '/@/components/Form';
   import { BasicColumn } from '/@/components/Table';
@@ -19,16 +19,13 @@
   import DynamicForm from './DynamicForm.vue';
   import { useUrl } from '../hooks/useUrl';
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'ClientCorsOrigins',
-    components: { DynamicForm },
-    props: {
     modelRef: {
       type: Object as PropType<Client>,
       required: true,
     },
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpIdentityServer');
   const schemas: FormSchema[] = [
     {
@@ -56,14 +53,4 @@
   function handleDelete(record) {
     handleCorsOriginsChange('delete', record.origin);
   }
-
-      return {
-        L,
-        schemas,
-        columns,
-        handleAddNew,
-        handleDelete,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientGrantType.vue

@@ -10,8 +10,8 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, toRefs } from 'vue';
+  import { toRefs } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { FormSchema } from '/@/components/Form';
   import { BasicColumn } from '/@/components/Table';
@@ -19,16 +19,13 @@
   import { useGrantType } from '../hooks/useGrantType';
   import { Client } from '/@/api/identity-server/model/clientsModel';
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'ClientGrantType',
-    components: { DynamicForm },
-    props: {
     modelRef: {
       type: Object as PropType<Client>,
       required: true,
     },
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpIdentityServer');
   const { grantTypeOptions, handleGrantTypeChanged } = useGrantType({
     modelRef: toRefs(props).modelRef,
@@ -61,14 +58,4 @@
   function handleDelete(record) {
     handleGrantTypeChanged('delete', record);
   }
-
-      return {
-        L,
-        schemas,
-        columns,
-        handleAddNew,
-        handleDelete,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientIdentityProvider.vue

@@ -16,26 +16,25 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, toRefs } from 'vue';
+  import { toRefs } from 'vue';
   import { Checkbox, Form } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { FormSchema } from '/@/components/Form';
   import { BasicColumn } from '/@/components/Table';
-  import DynamicForm from './DynamicForm.vue';
   import { useIdentityProvider } from '../hooks/useIdentityProvider';
   import { Client } from '/@/api/identity-server/model/clientsModel';
+  import DynamicForm from './DynamicForm.vue';
+
+  const FormItem = Form.Item;
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'ClientIdentityProvider',
-    components: { Checkbox, DynamicForm, FormItem: Form.Item },
-    props: {
     modelRef: {
       type: Object as PropType<Client>,
       required: true,
     },
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpIdentityServer');
   const schemas: FormSchema[] = [
     {
@@ -60,23 +59,10 @@
   });
 
   function handleAddNew(record) {
-        console.log(record);
     handleIdpChange('add', record);
   }
 
   function handleDelete(record) {
-        console.log(record);
     handleIdpChange('delete', record);
   }
-
-      return {
-        L,
-        schemas,
-        columns,
-        handleAddNew,
-        handleDelete,
-        handleCheckedChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientIdentityResource.vue

@@ -2,23 +2,20 @@
   <Resources :resources="resources" :targetResources="targetResources" @change="handleChange" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref, onMounted, toRefs } from 'vue';
+  import { computed, ref, onMounted, toRefs } from 'vue';
-  import Resources from './Resources.vue';
   import { getAssignableIdentityResources } from '/@/api/identity-server/clients';
   import { Client } from '/@/api/identity-server/model/clientsModel';
   import { useResource } from '../hooks/useResource';
+  import Resources from './Resources.vue';
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'ClientIdentityResource',
-    components: { Resources },
-    props: {
     modelRef: {
       type: Object as PropType<Client>,
       required: true,
     },
-    },
+  });
-    setup(props) {
+
   const resources = ref<{ key: string; title: string }[]>([]);
   const targetResources = computed(() => {
     const targetScopes = resources.value.filter((item) =>
@@ -50,12 +47,4 @@
         break;
     }
   }
-
-      return {
-        resources,
-        targetResources,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientLogoutRedirectUris.vue

@@ -10,25 +10,22 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, toRefs } from 'vue';
+  import { toRefs } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { FormSchema } from '/@/components/Form';
   import { BasicColumn } from '/@/components/Table';
   import { Client } from '/@/api/identity-server/model/clientsModel';
-  import DynamicForm from './DynamicForm.vue';
   import { useUrl } from '../hooks/useUrl';
+  import DynamicForm from './DynamicForm.vue';
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'ClientLogoutRedirectUris',
-    components: { DynamicForm },
-    props: {
     modelRef: {
       type: Object as PropType<Client>,
       required: true,
     },
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpIdentityServer');
   const schemas: FormSchema[] = [
     {
@@ -56,14 +53,4 @@
   function handleDelete(record) {
     handleLogoutRedirectUris('delete', record.postLogoutRedirectUri);
   }
-
-      return {
-        L,
-        schemas,
-        columns,
-        handleAddNew,
-        handleDelete,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientModal.vue

@@ -13,8 +13,8 @@
       ref="formElRef"
       :model="modelRef"
       :rules="formRules"
-      :label-col="labelCol"
+      :label-col="{ span: 6 }"
-      :wrapper-col="wrapperCol"
+      :wrapper-col="{ span: 18 }"
     >
       <Tabs
         v-model:activeKey="tabActivedKey"
@@ -74,18 +74,18 @@
               </span>
               <template #overlay>
                 <Menu @click="handleClickUrlsMenu">
-                  <MenuItem key="client-callback">{{ L('Client:CallbackUrl') }}</MenuItem>
+                  <MenuItem key="ClientCallback">{{ L('Client:CallbackUrl') }}</MenuItem>
-                  <MenuItem key="client-cors-origins">{{
+                  <MenuItem key="ClientCorsOrigins">{{
                     L('Client:AllowedCorsOrigins')
                   }}</MenuItem>
-                  <MenuItem key="client-logout-redirect-uris">{{
+                  <MenuItem key="ClientLogoutRedirectUris">{{
                     L('Client:PostLogoutRedirectUri')
                   }}</MenuItem>
                 </Menu>
               </template>
             </Dropdown>
           </template>
-          <component :is="urlsComponent" :modelRef="modelRef" />
+          <component :is="componentsRef[urlsComponent]" :modelRef="modelRef" />
         </TabPane>
 
         <!-- 资源 -->
@@ -98,13 +98,13 @@
               </span>
               <template #overlay>
                 <Menu @click="handleClickResourcesMenu">
-                  <MenuItem key="client-api-resource">{{ L('Resource:Api') }}</MenuItem>
+                  <MenuItem key="ClientApiResource">{{ L('Resource:Api') }}</MenuItem>
-                  <MenuItem key="client-identity-resource">{{ L('Resource:Identity') }}</MenuItem>
+                  <MenuItem key="ClientIdentityResource">{{ L('Resource:Identity') }}</MenuItem>
                 </Menu>
               </template>
             </Dropdown>
           </template>
-          <component :is="resourcesComponent" :modelRef="modelRef" />
+          <component :is="componentsRef[resourcesComponent]" :modelRef="modelRef" />
         </TabPane>
 
         <!-- 认证/注销 -->
@@ -256,27 +256,28 @@
               </span>
               <template #overlay>
                 <Menu @click="handleClickAdvancedMenu">
-                  <MenuItem key="client-secret">{{ L('Secret') }}</MenuItem>
+                  <MenuItem key="ClientSecret">{{ L('Secret') }}</MenuItem>
-                  <MenuItem key="client-claim">{{ L('Claims') }}</MenuItem>
+                  <MenuItem key="ClientClaim">{{ L('Claims') }}</MenuItem>
-                  <MenuItem key="client-properties">{{ L('Propertites') }}</MenuItem>
+                  <MenuItem key="ClientProperties">{{ L('Propertites') }}</MenuItem>
-                  <MenuItem key="client-grant-type">{{ L('Client:AllowedGrantTypes') }}</MenuItem>
+                  <MenuItem key="ClientGrantType">{{ L('Client:AllowedGrantTypes') }}</MenuItem>
-                  <MenuItem key="client-identity-provider">{{
+                  <MenuItem key="ClientIdentityProvider">{{
                     L('Client:IdentityProviderRestrictions')
                   }}</MenuItem>
                 </Menu>
               </template>
             </Dropdown>
           </template>
-          <component :is="advancedComponent" :modelRef="modelRef" />
+          <component :is="componentsRef[advancedComponent]" :modelRef="modelRef" />
         </TabPane>
       </Tabs>
     </Form>
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref, shallowRef } from 'vue';
   import { useTabsStyle } from '/@/hooks/component/useStyles';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { DownOutlined } from '@ant-design/icons-vue';
   import { Checkbox, Dropdown, Menu, Tabs, Form, Input, InputNumber, Select } from 'ant-design-vue';
@@ -293,44 +294,36 @@
   import ClientProperties from './ClientProperties.vue';
   import ClientGrantType from './ClientGrantType.vue';
   import ClientIdentityProvider from './ClientIdentityProvider.vue';
-  export default defineComponent({
+
-    name: 'ClientModal',
+  const FormItem = Form.Item;
-    components: {
+  const MenuItem = Menu.Item;
-      ClientCallback,
+  const TabPane = Tabs.TabPane;
-      ClientCorsOrigins,
+  const TextArea = Input.TextArea;
-      ClientLogoutRedirectUris,
+  const Option = Select.Option;
-      ClientApiResource,
+
-      ClientIdentityResource,
+  const componentsRef = shallowRef({
-      ClientSecret,
+    'ClientCallback': ClientCallback,
-      ClientClaim,
+    'ClientCorsOrigins': ClientCorsOrigins,
-      ClientProperties,
+    'ClientLogoutRedirectUris': ClientLogoutRedirectUris,
-      ClientGrantType,
+    'ClientApiResource': ClientApiResource,
-      ClientIdentityProvider,
+    'ClientIdentityResource': ClientIdentityResource,
-      BasicModal,
+    'ClientSecret': ClientSecret,
-      DownOutlined,
+    'ClientClaim': ClientClaim,
-      Form,
+    'ClientProperties': ClientProperties,
-      FormItem: Form.Item,
+    'ClientGrantType': ClientGrantType,
-      Dropdown,
+    'ClientIdentityProvider': ClientIdentityProvider,
-      Menu,
+  });
-      MenuItem: Menu.Item,
+
-      Tabs,
+  const emits = defineEmits(['change', 'register']);
-      TabPane: Tabs.TabPane,
+
-      BInput,
+  const { createMessage } = useMessage();
-      InputNumber,
-      TextArea: Input.TextArea,
-      Checkbox,
-      Select,
-      Option: Select.Option,
-    },
-    emits: ['change', 'register'],
-    setup(_, { emit }) {
   const { L } = useLocalization('AbpIdentityServer');
   const formElRef = ref<any>(null);
   const modelIdRef = ref('');
   const tabActivedKey = ref('basic');
-      const advancedComponent = ref('client-secret');
+  const advancedComponent = ref('ClientSecret');
-      const urlsComponent = ref('client-callback');
+  const urlsComponent = ref('ClientCallback');
-      const resourcesComponent = ref('client-api-resource');
+  const resourcesComponent = ref('ClientApiResource');
   const [registerModal, { changeOkLoading }] = useModalInner((val) => {
     modelIdRef.value = val.id;
   });
@@ -366,39 +359,13 @@
 
   function handleOk() {
     changeOkLoading(true);
-        handleSubmit()
+    handleSubmit().then(() => {
-          .then(() => {
+      createMessage.success(L('Successful'));
-            emit('change');
+      emits('change');
-          })
+    }).finally(() => {
-          .finally(() => {
       changeOkLoading(false);
     });
   }
-
-      return {
-        L,
-        isEdit,
-        formElRef,
-        formRules,
-        formTitle,
-        tabsStyle,
-        tabActivedKey,
-        registerModal,
-        modelRef,
-        labelCol: { span: 6 },
-        wrapperCol: { span: 18 },
-        advancedComponent,
-        urlsComponent,
-        resourcesComponent,
-        handleClickUrlsMenu,
-        handleClickResourcesMenu,
-        handleClickAdvancedMenu,
-        handleChangeTab,
-        handleVisibleModal,
-        handleOk,
-      };
-    },
-  });
 </script>
 
 <style lang="less" scoped>

apps/vue/src/views/identity-server/clients/components/ClientProperties.vue

@@ -11,25 +11,22 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, toRefs } from 'vue';
+  import { toRefs } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { FormSchema } from '/@/components/Form';
   import { BasicColumn } from '/@/components/Table';
-  import DynamicForm from './DynamicForm.vue';
   import { useProperty } from '../hooks/useProperty';
   import { Client } from '/@/api/identity-server/model/clientsModel';
+  import DynamicForm from './DynamicForm.vue';
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'ClientProperties',
-    components: { DynamicForm },
-    props: {
     modelRef: {
       type: Object as PropType<Client>,
       required: true,
     },
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpIdentityServer');
   const schemas: FormSchema[] = [
     {
@@ -74,14 +71,4 @@
   function handleDelete(record) {
     handleDeleteProperty(record);
   }
-
-      return {
-        L,
-        schemas,
-        columns,
-        handleAddNew,
-        handleDelete,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientSecret.vue

@@ -16,27 +16,26 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, toRefs } from 'vue';
+  import { toRefs } from 'vue';
   import { Checkbox, Form } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { FormSchema } from '/@/components/Form';
   import { BasicColumn } from '/@/components/Table';
   import { formatToDateTime } from '/@/utils/dateUtil';
   import { Client } from '/@/api/identity-server/model/clientsModel';
-  import DynamicForm from './DynamicForm.vue';
   import { useSecret } from '../hooks/useSecret';
+  import DynamicForm from './DynamicForm.vue';
+
+  const FormItem = Form.Item;
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'ClientSecret',
-    components: { Checkbox, DynamicForm, FormItem: Form.Item },
-    props: {
     modelRef: {
       type: Object as PropType<Client>,
       required: true,
     },
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpIdentityServer');
   const schemas: FormSchema[] = [
     {
@@ -127,15 +126,4 @@
   function handleDelete(record) {
     handleSecretChange('delete', record);
   }
-
-      return {
-        L,
-        schemas,
-        columns,
-        handleAddNew,
-        handleDelete,
-        handleRequiredChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/ClientTable.vue

@@ -6,7 +6,8 @@
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'enabled'">
-          <Switch :checked="record.enabled" readonly />
+          <CheckOutlined v-if="record.enabled" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-else-if="column.key === 'actions'">
           <TableAction
@@ -47,9 +48,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { Button } from 'ant-design-vue';
-  import { Button, Modal, Switch } from 'ant-design-vue';
+  import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
@@ -57,22 +59,11 @@
   import { getSearchFormSchemas } from '../datas/ModalData';
   import { deleteById, getList } from '/@/api/identity-server/clients';
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
+  import { PermissionModal } from '/@/components/Permission';
   import ClientModal from './ClientModal.vue';
   import ClientClone from './ClientClone.vue';
-  import { PermissionModal } from '/@/components/Permission';
 
-  export default defineComponent({
+  const { createMessage, createConfirm } = useMessage();
-    name: 'ApiScopeTable',
-    components: {
-      ClientModal,
-      ClientClone,
-      BasicTable,
-      Button,
-      Switch,
-      TableAction,
-      PermissionModal,
-    },
-    setup() {
   const { L } = useLocalization('AbpIdentityServer');
   const [registerModal, { openModal, closeModal }] = useModal();
   const [registerCloneModal, { openModal: openCloneModal }] = useModal();
@@ -126,31 +117,17 @@
   }
 
   function handleDelete(record) {
-        Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
         deleteById(record.id).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },
     });
   }
-
-      return {
-        L,
-        registerModal,
-        registerTable,
-        handleAddNew,
-        handleDelete,
-        handleEdit,
-        handleChange,
-        handleClone,
-        registerCloneModal,
-        handlePermission,
-        registerPermissionModal,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/components/DynamicForm.vue

@@ -21,17 +21,15 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, watch } from 'vue';
+  import { ref, watch } from 'vue';
   import { BasicTitle } from '/@/components/Basic';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form';
   import { BasicTable, BasicColumn, TableAction, useTable } from '/@/components/Table';
 
-  export default defineComponent({
+  const emits = defineEmits(['new', 'delete']);
-    name: 'DynamicForm',
+  const props = defineProps({
-    components: { BasicForm, BasicTitle, BasicTable, TableAction },
-    props: {
     schemas: {
       type: [Array] as PropType<FormSchema[]>,
       required: true,
@@ -66,9 +64,8 @@
       type: String,
       default: () => '',
     },
-    },
+  });
-    emits: ['new', 'delete'],
+
-    setup(props, { emit }) {
   const { L } = useLocalization('AbpIdentityServer');
   const modelRef = ref({});
   const [registerForm, { resetFields }] = useForm({
@@ -111,23 +108,13 @@
   );
 
   function handleSubmit(input) {
-        emit('new', input);
+    emits('new', input);
     resetFields();
   }
 
   function handleDelete(record) {
-        emit('delete', record);
+    emits('delete', record);
   }
-
-      return {
-        L,
-        registerForm,
-        registerTable,
-        handleSubmit,
-        handleDelete,
-      };
-    },
-  });
 </script>
 
 <style lang="less" scoped>

apps/vue/src/views/identity-server/clients/components/Resources.vue

@@ -9,15 +9,13 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent } from 'vue';
+  import { computed } from 'vue';
   import { Transfer } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
 
-  export default defineComponent({
+  const emits = defineEmits(['change']);
-    name: 'Resources',
+  const props = defineProps({
-    components: { Transfer },
-    props: {
     resources: {
       type: [Array] as PropType<{ key: string; title: string }[]>,
       required: true,
@@ -25,30 +23,19 @@
     },
     targetResources: { type: [Array] as PropType<string[]>, required: true, default: () => [] },
     listStyle: { type: Object, required: false },
-    },
+  });
-    emits: ['change'],
-    setup(props, { emit }) {
-      const { L } = useLocalization('AbpIdentityServer');
 
+  const { L } = useLocalization('AbpIdentityServer');
   const defaultListStyle = {
     width: '48%',
     height: '500px',
     minHeight: '500px',
   };
-
   const getListStyle = computed(() => {
     return {...defaultListStyle, ...props.listStyle}
   });
 
   function handleChange(targetKeys, direction, moveKeys) {
-        emit('change', targetKeys, direction, moveKeys);
+    emits('change', targetKeys, direction, moveKeys);
   }
-
-      return {
-        L,
-        getListStyle,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/clients/hooks/useModal.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
 
 import { computed, ref, reactive, unref, watch } from 'vue';
-import { message } from 'ant-design-vue';
 import { cloneDeep } from 'lodash-es';
+import { useMessage } from '/@/hooks/web/useMessage';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { useValidation } from '/@/hooks/abp/useValidation';
 
@@ -16,6 +16,7 @@ interface UseModal {
 }
 
 export function useModal({ modelIdRef, formElRef, tabActivedKey }: UseModal) {
+  const { createMessage } = useMessage();
   const { L } = useLocalization('AbpIdentityServer');
   const { ruleCreator } = useValidation();
   const modelRef = ref<Client>({} as Client);
@@ -89,23 +90,18 @@ export function useModal({ modelIdRef, formElRef, tabActivedKey }: UseModal) {
   function handleSubmit() {
     return new Promise<any>((resolve, reject) => {
       const formEl = unref(formElRef);
-      formEl
+      formEl.validate().then(() => {
-        .validate()
-        .then(() => {
         const input = cloneDeep(unref(modelRef));
         const api = isEdit.value
           ? update(input.id, Object.assign(input))
           : create(Object.assign(input));
-          api
+        api.then((res) => {
-            .then((res) => {
+          createMessage.success(L('Successful'));
-              message.success(L('Successful'));
           resolve(res);
-            })
+        }).catch((error) => {
-            .catch((error) => {
           reject(error);
         });
-        })
+      }).catch((error) => {
-        .catch((error) => {
         reject(error);
       });
     });

apps/vue/src/views/identity-server/components/Properties.vue

@@ -2,7 +2,7 @@
   <div>
     <BasicTable
       rowKey="key"
-      :columns="columns"
+      :columns="getDataColumns()"
       :dataSource="properties"
       :pagination="false"
       :showTableSetting="true"
@@ -38,8 +38,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import { Button } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicModal, useModal } from '/@/components/Modal';
@@ -49,24 +49,15 @@
   import { getDataColumns } from './TableData';
   import { getFormSchemas } from './ModalData';
 
-  export default defineComponent({
+  const emits = defineEmits(['new', 'props-new', 'props-delete']);
-    name: 'Properties',
+  defineProps({
-    components: {
-      BasicForm,
-      BasicModal,
-      BasicTable,
-      Button,
-      TableAction,
-    },
-    props: {
     properties: {
       type: [Array] as PropType<Property[]>,
       required: true,
       default: () => [],
     },
-    },
+  });
-    emits: ['new', 'props-new', 'props-delete'],
+
-    setup(_, { emit }) {
   const { L } = useLocalization('AbpIdentityServer');
   const title = ref('');
   const [registerForm, { validate, resetFields }] = useForm({
@@ -82,27 +73,14 @@
   }
 
   function handleDelete(record) {
-        emit('props-delete', record);
+    emits('props-delete', record);
   }
 
   function handleSubmit() {
     validate().then((input) => {
-          emit('props-new', input);
+      emits('props-new', input);
       resetFields();
       closeModal();
     });
   }
-
-      return {
-        L,
-        title,
-        handleAddNew,
-        handleDelete,
-        handleSubmit,
-        columns: getDataColumns(),
-        registerForm,
-        registerModal,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/components/UserClaim.vue

@@ -9,21 +9,25 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, onMounted, ref } from 'vue';
+  import { computed, onMounted, ref } from 'vue';
   import { Transfer } from 'ant-design-vue';
   import { getActivedList } from '/@/api/identity/claim';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
 
-  export default defineComponent({
+  const emits = defineEmits(['change']);
-    name: 'UserClaim',
+  const props = defineProps({
-    components: { Transfer },
+    targetClaims: {
-    props: {
+      type: [Array] as PropType<string[]>,
-      targetClaims: { type: [Array] as PropType<string[]>, required: true, default: () => [] },
+      required: true,
-      listStyle: { type: Object, required: false },
+      default: () => [],
     },
-    emits: ['change'],
+    listStyle: {
-    setup(props, { emit }) {
+      type: Object,
+      required: false,
+    },
+  });
+
   const { L } = useLocalization('AbpIdentityServer');
   const userClaims = ref<
     {
@@ -53,15 +57,6 @@
   });
 
   function handleChange(targetKeys, direction, moveKeys) {
-        emit('change', targetKeys, direction, moveKeys);
+    emits('change', targetKeys, direction, moveKeys);
   }
-
-      return {
-        L,
-        getListStyle,
-        userClaims,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/identity-resources/components/IdentityResourceModal.vue

@@ -13,8 +13,8 @@
       ref="formElRef"
       :model="modelRef"
       :rules="formRules"
-      :label-col="labelCol"
+      :label-col="{ span: 6 }"
-      :wrapper-col="wrapperCol"
+      :wrapper-col="{ span: 18 }"
     >
       <Tabs v-model:activeKey="tabActivedKey" @change="handleChangeTab">
         <!-- Api 资源基本信息 -->
@@ -59,13 +59,13 @@
               </span>
               <template #overlay>
                 <Menu @click="handleClickMenu">
-                  <MenuItem key="properties">{{ L('Propertites') }}</MenuItem>
+                  <MenuItem key="Properties">{{ L('Propertites') }}</MenuItem>
                 </Menu>
               </template>
             </Dropdown>
           </template>
           <component
-            :is="advancedComponent"
+            :is="componentsRef[advancedComponent]"
             :properties="modelRef.properties"
             @props-new="handleNewProperty"
             @props-delete="handleDeleteProperty"
@@ -76,8 +76,9 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref, unref, shallowRef } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { DownOutlined } from '@ant-design/icons-vue';
   import { Checkbox, Dropdown, Menu, Tabs, Form } from 'ant-design-vue';
@@ -88,30 +89,23 @@
   import { useProperty } from '../hooks/useProperty';
   import UserClaim from '../../components/UserClaim.vue';
   import Properties from '../../components/Properties.vue';
-  export default defineComponent({
+
-    name: 'IdentityResourceModal',
+  const FormItem = Form.Item;
-    components: {
+  const MenuItem = Menu.Item;
-      UserClaim,
+  const TabPane = Tabs.TabPane;
-      Properties,
+
-      BasicModal,
+  const emits = defineEmits(['change', 'register']);
-      DownOutlined,
+
-      Form,
+  const componentsRef = shallowRef({
-      FormItem: Form.Item,
+    'Properties': Properties,
-      Dropdown,
+  });
-      Menu,
+  
-      MenuItem: Menu.Item,
+  const { createMessage } = useMessage();
-      Tabs,
-      TabPane: Tabs.TabPane,
-      Input,
-      Checkbox,
-    },
-    emits: ['change', 'register'],
-    setup(_, { emit }) {
   const { L } = useLocalization('AbpIdentityServer');
   const formElRef = ref<any>(null);
   const modelIdRef = ref('');
   const tabActivedKey = ref('basic');
-      const advancedComponent = ref('properties');
+  const advancedComponent = ref('Properties');
   const [registerModal, { changeOkLoading }] = useModalInner((val) => {
     modelIdRef.value = val.id;
   });
@@ -137,37 +131,15 @@
   }
 
   function handleOk() {
+    const formEl = unref(formElRef);
+    formEl?.validate().then(() => {
       changeOkLoading(true);
-        handleSubmit()
+      handleSubmit().then(() => {
-          .then(() => {
+        createMessage.success(L('Successful'));
-            emit('change');
+        emits('change');
-          })
+      }).finally(() => {
-          .finally(() => {
         changeOkLoading(false);
       });
-      }
-
-      return {
-        L,
-        isEdit,
-        formElRef,
-        formRules,
-        formTitle,
-        tabActivedKey,
-        registerModal,
-        modelRef,
-        advancedComponent,
-        labelCol: { span: 6 },
-        wrapperCol: { span: 18 },
-        handleClickMenu,
-        handleNewProperty,
-        handleDeleteProperty,
-        handleChangeTab,
-        handleVisibleModal,
-        handleOk,
-        targetClaims,
-        handleClaimChange,
-      };
-    },
     });
+  }
 </script>

apps/vue/src/views/identity-server/identity-resources/components/IdentityResourceTable.vue

@@ -6,16 +6,20 @@
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'enabled'">
-          <Switch :checked="record.enabled" readonly />
+          <CheckOutlined v-if="record.enabled" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-else-if="column.key === 'required'">
-          <Switch :checked="record.required" readonly />
+          <CheckOutlined v-if="record.required" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-else-if="column.key === 'emphasize'">
-          <Switch :checked="record.emphasize" readonly />
+          <CheckOutlined v-if="record.emphasize" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-else-if="column.key === 'showInDiscoveryDocument'">
-          <Switch :checked="record.showInDiscoveryDocument" readonly />
+          <CheckOutlined v-if="record.showInDiscoveryDocument" class="enable" />
+          <CloseOutlined v-else class="disable" />
         </template>
         <template v-else-if="column.key === 'actions'">
           <TableAction
@@ -42,9 +46,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { Button } from 'ant-design-vue';
-  import { Button, Modal, Switch } from 'ant-design-vue';
+  import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
@@ -54,10 +59,7 @@
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
   import IdentityResourceModal from './IdentityResourceModal.vue';
 
-  export default defineComponent({
+  const { createMessage, createConfirm } = useMessage();
-    name: 'IdentityResourceTable',
-    components: { IdentityResourceModal, BasicTable, Button, Switch, TableAction },
-    setup() {
   const { L } = useLocalization('AbpIdentityServer');
   const [registerModal, { openModal, closeModal }] = useModal();
   const [registerTable, { reload }] = useTable({
@@ -97,27 +99,17 @@
   }
 
   function handleDelete(record) {
-        Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
         deleteById(record.id).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },
     });
   }
-
-      return {
-        L,
-        registerModal,
-        registerTable,
-        handleAddNew,
-        handleDelete,
-        handleEdit,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity-server/identity-resources/datas/TableData.ts

@@ -11,6 +11,20 @@ export function getDataColumns(): BasicColumn[] {
       width: 1,
       ifShow: false,
     },
+    {
+      title: L('Enabled'),
+      dataIndex: 'enabled',
+      align: 'center',
+      width: 150,
+      sorter: true,
+    },
+    {
+      title: L('Required'),
+      dataIndex: 'required',
+      align: 'center',
+      width: 150,
+      sorter: true,
+    },
     {
       title: L('Name'),
       dataIndex: 'name',
@@ -32,20 +46,6 @@ export function getDataColumns(): BasicColumn[] {
       width: 180,
       sorter: true,
     },
-    {
-      title: L('Required'),
-      dataIndex: 'required',
-      align: 'center',
-      width: 200,
-      sorter: true,
-    },
-    {
-      title: L('Enabled'),
-      dataIndex: 'enabled',
-      align: 'center',
-      width: 200,
-      sorter: true,
-    },
     {
       title: L('Emphasize'),
       dataIndex: 'emphasize',

apps/vue/src/views/identity-server/identity-resources/hooks/useModal.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
 
 import { computed, ref, reactive, unref, watch } from 'vue';
-import { message } from 'ant-design-vue';
 import { cloneDeep } from 'lodash-es';
+import { useMessage } from '/@/hooks/web/useMessage';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { useValidation } from '/@/hooks/abp/useValidation';
 
@@ -16,6 +16,7 @@ interface UseModal {
 }
 
 export function useModal({ modelIdRef, formElRef, tabActivedKey }: UseModal) {
+  const { createMessage } = useMessage();
   const { L } = useLocalization('AbpIdentityServer');
   const { ruleCreator } = useValidation();
   const modelRef = ref<IdentityResource>({} as IdentityResource);
@@ -69,23 +70,18 @@ export function useModal({ modelIdRef, formElRef, tabActivedKey }: UseModal) {
   function handleSubmit() {
     return new Promise<any>((resolve, reject) => {
       const formEl = unref(formElRef);
-      formEl
+      formEl.validate().then(() => {
-        .validate()
-        .then(() => {
         const input = cloneDeep(unref(modelRef));
         const api = isEdit.value
           ? update(input.id, Object.assign(input))
           : create(Object.assign(input));
-          api
+        api.then((res) => {
-            .then((res) => {
+          createMessage.success(L('Successful'));
-              message.success(L('Successful'));
           resolve(res);
-            })
+        }).catch((error) => {
-            .catch((error) => {
           reject(error);
         });
-        })
+      }).catch((error) => {
-        .catch((error) => {
         reject(error);
       });
     });

apps/vue/src/views/identity-server/persisted-grants/components/ModalData.ts

@@ -1,4 +1,4 @@
-import { h } from 'vue';
+import { createVNode } from 'vue';
 import { Input } from 'ant-design-vue';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { JsonPreview } from '/@/components/CodeEditor';
@@ -35,7 +35,7 @@ export function getModalFormSchemas(): FormSchema[] {
       label: L('Grants:Key'),
       colProps: { span: 24 },
       render: ({ model, field }) => {
-        return h(Input, {
+        return createVNode(Input, {
           value: model[field],
           readonly: true,
           placeholder: '',
@@ -48,7 +48,7 @@ export function getModalFormSchemas(): FormSchema[] {
       label: L('Grants:Type'),
       colProps: { span: 24 },
       render: ({ model, field }) => {
-        return h(Input, {
+        return createVNode(Input, {
           value: model[field],
           readonly: true,
           placeholder: '',
@@ -61,7 +61,7 @@ export function getModalFormSchemas(): FormSchema[] {
       label: L('Grants:SubjectId'),
       colProps: { span: 24 },
       render: ({ model, field }) => {
-        return h(Input, {
+        return createVNode(Input, {
           value: model[field],
           readonly: true,
           placeholder: '',
@@ -74,7 +74,7 @@ export function getModalFormSchemas(): FormSchema[] {
       label: L('Grants:SessionId'),
       colProps: { span: 24 },
       render: ({ model, field }) => {
-        return h(Input, {
+        return createVNode(Input, {
           value: model[field],
           readonly: true,
           placeholder: '',
@@ -87,7 +87,7 @@ export function getModalFormSchemas(): FormSchema[] {
       label: L('Description'),
       colProps: { span: 24 },
       render: ({ model, field }) => {
-        return h(Input, {
+        return createVNode(Input, {
           value: model[field],
           readonly: true,
           placeholder: '',
@@ -100,7 +100,7 @@ export function getModalFormSchemas(): FormSchema[] {
       label: L('CreationTime'),
       colProps: { span: 24 },
       render: ({ model, field }) => {
-        return h(Input, {
+        return createVNode(Input, {
           value: model[field]
             ? formatToDateTime(model[field], 'YYYY-MM-DD HH:mm:ss')
             : model[field],
@@ -115,7 +115,7 @@ export function getModalFormSchemas(): FormSchema[] {
       label: L('Expiration'),
       colProps: { span: 24 },
       render: ({ model, field }) => {
-        return h(Input, {
+        return createVNode(Input, {
           value: model[field]
             ? formatToDateTime(model[field], 'YYYY-MM-DD HH:mm:ss')
             : model[field],
@@ -130,7 +130,7 @@ export function getModalFormSchemas(): FormSchema[] {
       label: L('Grants:ConsumedTime'),
       colProps: { span: 24 },
       render: ({ model, field }) => {
-        return h(Input, {
+        return createVNode(Input, {
           value: model[field]
             ? formatToDateTime(model[field], 'YYYY-MM-DD HH:mm:ss')
             : model[field],
@@ -145,7 +145,7 @@ export function getModalFormSchemas(): FormSchema[] {
       label: L('Grants:Data'),
       colProps: { span: 24 },
       render: ({ model, field }) => {
-        return h(JsonPreview, {
+        return createVNode(JsonPreview!, {
           data: model[field] ? JSON.parse(model[field]) : {},
         });
       },

apps/vue/src/views/identity-server/persisted-grants/components/PersistedGrantModal.vue

@@ -6,60 +6,42 @@
     :width="660"
     :min-height="400"
   >
-    <BasicForm
+    <BasicForm @register="registerForm" />
-      ref="formElRef"
-      :model="persistedGrantRef"
-      :colon="true"
-      :schemas="formSchemas"
-      :label-width="120"
-      :show-action-button-group="false"
-      :action-col-options="{
-        span: 24,
-      }"
-    />
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, watch, unref } from 'vue';
+  import { nextTick } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-  import { BasicForm, FormActionType } from '/@/components/Form';
+  import { BasicForm, useForm } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { getModalFormSchemas } from './ModalData';
   import { get } from '/@/api/identity-server/persistedGrants';
-  import { PersistedGrant } from '/@/api/identity-server/model/persistedGrantsModel';
+
-  export default defineComponent({
+  defineEmits(['register']);
-    name: 'PersistedGrantModal',
+
-    components: { BasicForm, BasicModal },
-    emits: ['register'],
-    setup() {
   const { L } = useLocalization('AbpIdentityServer');
-      const persistedGrantIdRef = ref('');
+  const [registerForm, { resetFields, setFieldsValue }] = useForm({
-      const persistedGrantRef = ref<PersistedGrant | null>(null);
+    colon: true,
-      const formElRef = ref<Nullable<FormActionType>>(null);
+    labelWidth: 120,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+    schemas: getModalFormSchemas(),
+  });
   const [registerModal] = useModalInner((val) => {
-        persistedGrantIdRef.value = val.id;
+    nextTick(() => {
+      fetchPersistedGrant(val.id);
     });
-      const formSchemas = getModalFormSchemas();
-
-      watch(
-        () => unref(persistedGrantIdRef),
-        (id) => {
-          const formEl = unref(formElRef);
-          formEl?.resetFields();
-          get(id).then((res) => {
-            persistedGrantRef.value = res;
   });
-        },
-      );
 
-      return {
+  function fetchPersistedGrant(id?: string) {
-        L,
+    resetFields();
-        formElRef,
+    if (id) {
-        formSchemas,
+      get(id).then((res) => {
-        registerModal,
+        setFieldsValue(res);
-        persistedGrantRef,
-      };
-    },
       });
+    }
+  }
 </script>

apps/vue/src/views/identity-server/persisted-grants/components/PersistedGrantTable.vue

@@ -27,9 +27,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
-  import { Modal } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
@@ -39,10 +38,7 @@
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
   import PersistedGrantModal from './PersistedGrantModal.vue';
 
-  export default defineComponent({
+  const { createMessage, createConfirm } = useMessage();
-    name: 'PersistedGrantTable',
-    components: { BasicTable, TableAction, PersistedGrantModal },
-    setup() {
   const { L } = useLocalization('AbpIdentityServer');
   const [registerModal, { openModal }] = useModal();
   const [registerTable, { reload }] = useTable({
@@ -73,25 +69,17 @@
   }
 
   function handleDelete(record) {
-        Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
         deleteById(record.id).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },
     });
   }
-
-      return {
-        L,
-        registerModal,
-        registerTable,
-        handleDelete,
-        handleShow,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/claim-types/components/ClaimModal.vue

@@ -21,17 +21,19 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, unref } from 'vue';
+  import { ref, unref } from 'vue';
   import { BasicForm, FormActionType } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { useClaimModal } from '../hooks/useClaimModal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { IdentityClaimType } from '/@/api/identity/model/claimModel';
-  export default defineComponent({
+
-    name: 'ClaimModal',
+  const emits = defineEmits(['change', 'register']);
-    components: { BasicForm, BasicModal },
+
-    emits: ['change', 'register'],
+  const { createMessage } = useMessage();
-    setup(_props, { emit }) {
+  const { L } = useLocalization('AbpIdentity');
   const submiting = ref(false);
   const claimRef = ref<Nullable<IdentityClaimType>>(null);
   const formElRef = ref<Nullable<FormActionType>>(null);
@@ -46,7 +48,8 @@
       submiting.value = true;
       handleSubmit(formEl.getFieldsValue())
         .then(() => {
-              emit('change');
+          createMessage.success(L('Successful'));
+          emits('change');
           closeModal();
         })
         .finally(() => {
@@ -54,15 +57,4 @@
         });
     });
   }
-
-      return {
-        submiting,
-        formElRef,
-        formTitle,
-        formSchemas,
-        registerModal,
-        handleSaveChanges,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/claim-types/components/ClaimTable.vue

@@ -49,8 +49,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { usePermission } from '/@/hooks/web/usePermission';
@@ -59,39 +58,16 @@
   import { useClaimTable } from '../hooks/useClaimTable';
   import ClaimModal from './ClaimModal.vue';
 
-  export default defineComponent({
-    name: 'ClaimTable',
-    components: {
-      BasicTable,
-      ClaimModal,
-      CheckOutlined,
-      CloseOutlined,
-      TableAction,
-    },
-    setup() {
   const { L } = useLocalization('AbpIdentity');
   const { hasPermission } = usePermission();
   const [registerModal, { openModal }] = useModal();
   const { valueTypeMap, registerTable, reloadTable, handleDelete } = useClaimTable();
 
-      return {
+  function handleAddNew() {
-        L,
+    openModal(true, {});
-        hasPermission,
+  }
-        valueTypeMap,
+
-        registerTable,
+  function handleEdit(record) {
-        reloadTable,
+    openModal(true, record);
-        registerModal,
+  }
-        openModal,
-        handleDelete,
-      };
-    },
-    methods: {
-      handleAddNew() {
-        this.openModal(true, {}, true);
-      },
-      handleEdit(record) {
-        this.openModal(true, record, true);
-      },
-    },
-  });
 </script>

apps/vue/src/views/identity/claim-types/hooks/useClaimTable.ts

@@ -1,14 +1,15 @@
 import { useLocalization } from '/@/hooks/abp/useLocalization';
+import { useMessage } from '/@/hooks/web/useMessage';
 import { useTable } from '/@/components/Table';
 import { deleteById, getList } from '/@/api/identity/claim';
 import { ValueType } from '/@/api/identity/model/claimModel';
 import { formatPagedRequest } from '/@/utils/http/abp/helper';
 import { getDataColumns } from '../datas/TableData';
 import { getSearchFormSchemas } from '../datas/ModalData';
-import { Modal } from 'ant-design-vue';
 
 export function useClaimTable() {
   const { L } = useLocalization('AbpIdentity');
+  const { createMessage, createConfirm } = useMessage();
   const valueTypeMap = {
     [ValueType.String]: 'String',
     [ValueType.Int]: 'Int',
@@ -39,12 +40,14 @@ export function useClaimTable() {
   });
 
   function handleDelete(role) {
-    Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
-      content: L('ItemWillBeDeletedMessageWithFormat', [role.name] as Recordable),
+      content: L('ItemWillBeDeletedMessageWithFormat', [role.name]),
       okCancel: true,
       onOk: () => {
         deleteById(role.id).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
           reloadTable();
         });
       },

apps/vue/src/views/identity/components/ClaimModal.vue

@@ -151,7 +151,7 @@
       onOk: () => {
         if (isFunction(props.deleteApi)) {
           props.deleteApi(identityRef.value, claim).then(() => {
-            createMessage.success(L('Successful'));
+            createMessage.success(L('SuccessfullyDeleted'));
             reload();
           });
         }

apps/vue/src/views/identity/components/MenuModal.vue

@@ -41,8 +41,8 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, unref, watch } from 'vue';
+  import { ref, unref, watch } from 'vue';
   import { Card, Form, Select, TreeSelect } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicModal, useModalInner } from '/@/components/Modal';
@@ -51,18 +51,11 @@
   import { MenuListResult } from '/@/api/platform/model/menuModel';
   import { getAll } from '/@/api/platform/menu';
   import { listToTree } from '/@/utils/helper/treeHelper';
-  export default defineComponent({
+
-    name: 'MenuModal',
+  const FormItem = Form.Item;
-    components: {
+
-      BasicModal,
+  const emits = defineEmits(['change', 'change:startup', 'register']);
-      BasicTree,
+  const props = defineProps({
-      Card,
-      Form,
-      FormItem: Form.Item,
-      Select,
-      TreeSelect,
-    },
-    props: {
     loading: {
       type: Boolean,
       default: false,
@@ -76,9 +69,8 @@
         });
       }),
     },
-    },
+  });
-    emits: ['change', 'register', 'change:startup'],
+
-    setup(props, { emit }) {
   const { L } = useLocalization('AppPlatform');
   const identityRef = ref('');
   const frameworkRef = ref('');
@@ -153,26 +145,9 @@
   }
 
   function handleSubmit() {
-        emit('change', unref(identityRef), unref(checkedRef));
+    emits('change', unref(identityRef), unref(checkedRef));
     if (unref(startupMenuRef)) {
-          emit('change:startup', unref(identityRef), unref(startupMenuRef));
+      emits('change:startup', unref(identityRef), unref(startupMenuRef));
     }
   }
-
-      return {
-        L,
-        menuTreeRef,
-        defaultCheckedRef,
-        replaceFields,
-        frameworkRef,
-        startupMenuRef,
-        optionsRef,
-        registerModal,
-        handleSelect,
-        handleVisibleChange,
-        handleCheck,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/organization-units/components/MemberModal.vue

@@ -18,8 +18,9 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref, unref } from 'vue';
+  import { computed, ref, unref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { Input } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
@@ -27,14 +28,14 @@
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
   import { addMembers, getUnaddedMemberList } from '/@/api/identity/organization-units';
 
-  export default defineComponent({
+  const InputSearch = Input.Search;
-    name: 'MemberModal',
+
-    components: { BasicModal, BasicTable, InputSearch: Input.Search },
+  const emits = defineEmits(['change', 'register']);
-    props: {
+  const props = defineProps({
     ouId: { type: String },
-    },
+  });
-    emits: ['change', 'register'],
+  
-    setup(props, { emit }) {
+  const { createMessage } = useMessage();
   const { L } = useLocalization('AbpIdentity');
   const loading = ref(false);
   const filter = ref('');
@@ -107,7 +108,8 @@
         selectRows.map((x) => x.id),
       )
         .then(() => {
-              emit('change');
+          createMessage.success(L('Successful'));
+          emits('change');
           closeModal();
         })
         .finally(() => {
@@ -115,18 +117,4 @@
         });
     }
   }
-
-      return {
-        L,
-        filter,
-        loading,
-        tableRef,
-        registerModal,
-        registerTable,
-        handleVisibleChange,
-        handleSearch,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/organization-units/components/MemberTable.vue

@@ -30,8 +30,8 @@
   <MemberModal @register="registerModal" :ou-id="ouId" @change="handleChange" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, unref } from 'vue';
+  import { computed, unref } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { BasicTable, TableAction } from '/@/components/Table';
@@ -40,13 +40,10 @@
   import { useModal } from '/@/components/Modal';
   import MemberModal from './MemberModal.vue';
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'MemberTable',
-    components: { BasicTable, MemberModal, TableAction },
-    props: {
     ouId: { type: String },
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpIdentity');
   const { hasPermission } = usePermission();
   const getProps = computed(() => {
@@ -68,16 +65,4 @@
   function handleChange() {
     reloadMembers();
   }
-
-      return {
-        L,
-        addMemberEnabled,
-        registerTable,
-        handleChange,
-        handleDelete,
-        registerModal,
-        handleAddNew,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/organization-units/components/OrganizationUnitPage.vue

@@ -18,27 +18,16 @@
   </Row>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { Card, Row, Col, Tabs } from 'ant-design-vue';
   import OrganizationUnitTree from './OrganizationUnitTree.vue';
   import MemberTable from './MemberTable.vue';
   import RoleTable from './RoleTable.vue';
 
-  export default defineComponent({
+  const TabPane = Tabs.TabPane;
-    name: 'OrganizationUnitPage',
+
-    components: {
-      OrganizationUnitTree,
-      Card,
-      Col,
-      MemberTable,
-      Row,
-      RoleTable,
-      Tabs,
-      TabPane: Tabs.TabPane,
-    },
-    setup() {
   const { L } = useLocalization('AbpIdentity');
   const activeKey = ref('members');
   const ouIdRef = ref('');
@@ -46,13 +35,4 @@
   function handleSelect(key) {
     ouIdRef.value = key;
   }
-
-      return {
-        L,
-        activeKey,
-        ouIdRef,
-        handleSelect,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/organization-units/components/OrganizationUnitTree.vue

@@ -29,8 +29,7 @@
   </Card>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   import { Card } from 'ant-design-vue';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
@@ -40,11 +39,8 @@
   import { PermissionModal } from '/@/components/Permission';
   import OrganizationUnitModal from './OrganizationUnitModal.vue';
 
-  export default defineComponent({
+  const emits = defineEmits(['change', 'select']);
-    name: 'OrganizationUnitTree',
+
-    components: { BasicTree, Card, OrganizationUnitModal, PermissionModal },
-    emits: ['change', 'select'],
-    setup(_props, { emit }) {
   const { L } = useLocalization('AbpIdentity');
   const [registerModal, modalMethods] = useModal();
   const [registerPermissionModal, permissionModalMethods] = useModal();
@@ -55,21 +51,6 @@
     handleAddNew,
     handleSelect,
     loadOuTree,
-      } = useOuTree({ emit, modalMethods, permissionModalMethods });
+  } = useOuTree({ emit: emits, modalMethods, permissionModalMethods });
   const { hasPermission } = usePermission();
-
-      return {
-        L,
-        ouTree,
-        loadOuTree,
-        registerModal,
-        getContentMenus,
-        hasPermission,
-        handleDrop,
-        handleAddNew,
-        handleSelect,
-        registerPermissionModal,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/organization-units/components/RoleModal.vue

@@ -18,8 +18,9 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref, unref } from 'vue';
+  import { computed, ref, unref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { Input } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
@@ -27,14 +28,14 @@
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
   import { addRoles, getUnaddedRoleList } from '/@/api/identity/organization-units';
 
-  export default defineComponent({
+  const InputSearch = Input.Search;
-    name: 'RoleModal',
+
-    components: { BasicModal, BasicTable, InputSearch: Input.Search },
+  const emits = defineEmits(['change', 'register']);
-    props: {
+  const props = defineProps({
     ouId: { type: String },
-    },
+  });
-    emits: ['change', 'register'],
+
-    setup(props, { emit }) {
+  const { createMessage } = useMessage();
   const { L } = useLocalization('AbpIdentity');
   const loading = ref(false);
   const filter = ref('');
@@ -100,7 +101,8 @@
         selectRows.map((x) => x.id),
       )
         .then(() => {
-              emit('change');
+          createMessage.success(L('Successful'));
+          emits('change');
           closeModal();
         })
         .finally(() => {
@@ -108,18 +110,4 @@
         });
     }
   }
-
-      return {
-        L,
-        filter,
-        loading,
-        tableRef,
-        registerModal,
-        registerTable,
-        handleVisibleChange,
-        handleSearch,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/organization-units/components/RoleTable.vue

@@ -30,8 +30,8 @@
   <RoleModal @register="registerModal" :ou-id="ouId" @change="handleChange" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, unref } from 'vue';
+  import { computed, unref } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { BasicTable, TableAction } from '/@/components/Table';
@@ -40,13 +40,10 @@
   import { useModal } from '/@/components/Modal';
   import RoleModal from './RoleModal.vue';
 
-  export default defineComponent({
+  const props = defineProps({
-    name: 'RoleTable',
-    components: { BasicTable, RoleModal, TableAction },
-    props: {
     ouId: { type: String },
-    },
+  });
-    setup(props) {
+
   const { L } = useLocalization('AbpIdentity');
   const { hasPermission } = usePermission();
   const getProps = computed(() => {
@@ -68,16 +65,4 @@
   function handleChange() {
     reloadRoles();
   }
-
-      return {
-        L,
-        addRoleEnabled,
-        registerTable,
-        registerModal,
-        handleDelete,
-        handleAddNew,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/organization-units/hooks/useMemberTable.ts

@@ -1,6 +1,6 @@
-import { ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
-import { Modal } from 'ant-design-vue';
 import { watch, ref, unref } from 'vue';
+import { useMessage } from '/@/hooks/web/useMessage';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { BasicColumn, useTable } from '/@/components/Table';
 import { User } from '/@/api/identity/model/userModel';
@@ -14,6 +14,7 @@ interface UseMemberTable {
 
 export function useMemberTable({ getProps }: UseMemberTable) {
   const { L } = useLocalization('AbpIdentity');
+  const { createMessage, createConfirm } = useMessage();
   const dataSource = ref([] as User[]);
   const dataColumns: BasicColumn[] = [
     {
@@ -61,12 +62,17 @@ export function useMemberTable({ getProps }: UseMemberTable) {
   });
 
   function handleDelete(user) {
-    Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('OrganizationUnit:AreYouSureRemoveUser', [user.userName] as Recordable),
       okCancel: true,
       onOk: () => {
-        removeOrganizationUnit(user.id, unref(getProps).ouId).then(() => reloadMembers());
+        removeOrganizationUnit(user.id, unref(getProps).ouId)
+          .then(() => {
+            createMessage.success(L('SuccessfullyDeleted'));
+            reloadMembers();
+          });
       },
     });
   }

apps/vue/src/views/identity/organization-units/hooks/useOuTree.ts

@@ -1,5 +1,4 @@
 import { computed, onMounted, ref } from 'vue';
-import { Modal } from 'ant-design-vue';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { usePermission } from '/@/hooks/web/usePermission';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
@@ -13,7 +12,7 @@ export function useOuTree({ emit, modalMethods, permissionModalMethods }:
     modalMethods: ReturnMethods,
     permissionModalMethods: ReturnMethods,
   }) {
-  const { createMessage } = useMessage();
+  const { createMessage, createConfirm } = useMessage();
   const { L } = useLocalization(['AbpIdentity']);
   const { hasPermission } = usePermission();
   const ouTree = ref<any[]>([]);
@@ -38,7 +37,8 @@ export function useOuTree({ emit, modalMethods, permissionModalMethods }:
         {
           label: L('Delete'),
           handler: () => {
-            Modal.warning({
+            createConfirm({
+              iconType: 'warning',
               title: L('AreYouSure'),
               content: L('ItemWillBeDeletedMessage'),
               okCancel: true,

apps/vue/src/views/identity/organization-units/hooks/useRoleTable.ts

@@ -1,7 +1,7 @@
 import { ComputedRef } from 'vue';
-import { Modal } from 'ant-design-vue';
 import { ref, unref, watch } from 'vue';
 import { useTable } from '/@/components/Table';
+import { useMessage } from '/@/hooks/web/useMessage';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { getDataColumns } from '../../role/datas/TableData';
 import { Role } from '/@/api/identity/model/roleModel';
@@ -15,6 +15,7 @@ interface UseRoleTable {
 
 export function useRoleTable({ getProps }: UseRoleTable) {
   const { L } = useLocalization('AbpIdentity');
+  const { createMessage, createConfirm } = useMessage();
   const dataSource = ref([] as Role[]);
   const [registerTable] = useTable({
     rowKey: 'id',
@@ -40,12 +41,17 @@ export function useRoleTable({ getProps }: UseRoleTable) {
   });
 
   function handleDelete(role) {
-    Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('OrganizationUnit:AreYouSureRemoveRole', [role.name] as Recordable),
       okCancel: true,
       onOk: () => {
-        removeOrganizationUnit(role.id, unref(getProps).ouId).then(() => reloadRoles());
+        removeOrganizationUnit(role.id, unref(getProps).ouId)
+          .then(() => {
+            createMessage.success(L('SuccessfullyDeleted'));
+            reloadRoles();
+          });
       },
     });
   }

apps/vue/src/views/identity/organization-units/index.vue

@@ -7,6 +7,7 @@
   import OrganizationUnitPage from './components/OrganizationUnitPage.vue';
 
   export default defineComponent({
+    name: 'OrganizationUnits',
     components: { OrganizationUnitPage },
   });
 </script>

apps/vue/src/views/identity/role/components/ClaimModal.vue

@@ -42,18 +42,14 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicTable, TableAction } from '/@/components/Table';
   import { BasicModalForm } from '/@/components/ModalForm';
   import { useClaim } from '../hooks/useClaim';
 
-  export default defineComponent({
-    name: 'RoleClaimModal',
-    components: { BasicModal, BasicTable, BasicModalForm, TableAction },
-    setup() {
   const { L } = useLocalization('AbpIdentity');
   const roleIdRef = ref('');
   const [registerModal] = useModalInner((val) => {
@@ -68,24 +64,11 @@
     handleSaveChanges,
   } = useClaim({ roleIdRef });
 
-      return {
+  function handleAddNew() {
-        L,
+    openClaimForm({});
-        formSchemas,
+  }
-        registerModal,
+
-        registerTable,
+  function handleEdit(record) {
-        registerClaimForm,
+    openClaimForm(record);
-        openClaimForm,
+  }
-        handleDelete,
-        handleSaveChanges,
-      };
-    },
-    methods: {
-      handleAddNew() {
-        this.openClaimForm({});
-      },
-      handleEdit(record) {
-        this.openClaimForm(record);
-      },
-    },
-  });
 </script>

apps/vue/src/views/identity/role/components/RoleModal.vue

@@ -19,20 +19,22 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, unref } from 'vue';
+  import { ref, unref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicForm, FormActionType } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { useRoleModal } from '../hooks/useRoleModal';
   import { Role } from '/@/api/identity/model/roleModel';
-  export default defineComponent({
+
-    name: '',
+  const emits = defineEmits(['change', 'register']);
-    components: { BasicForm, BasicModal },
+  
-    emits: ['change', 'register'],
-    setup(_props, { emit }) {
   const submiting = ref(false);
   const roleRef = ref<Nullable<Role>>(null);
   const formElRef = ref<Nullable<FormActionType>>(null);
+  const { createMessage } = useMessage();
+  const { L } = useLocalization('AbpIdentity');
   const [registerModal, { closeModal }] = useModalInner((val) => {
     roleRef.value = val;
   });
@@ -44,7 +46,8 @@
       submiting.value = true;
       handleSubmit(formEl.getFieldsValue())
         .then(() => {
-              emit('change');
+          createMessage.success(L('Successful'));
+          emits('change');
           closeModal();
         })
         .finally(() => {
@@ -52,15 +55,4 @@
         });
     });
   }
-
-      return {
-        submiting,
-        formElRef,
-        formTitle,
-        formSchemas,
-        registerModal,
-        handleSaveChanges,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/role/components/RoleTable.vue

@@ -75,8 +75,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import { Tag } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { usePermission } from '/@/hooks/web/usePermission';
@@ -91,18 +91,6 @@
   import MenuModal from '../../components/MenuModal.vue';
   import ClaimModal from '../../components/ClaimModal.vue';
 
-  export default defineComponent({
-    name: 'RoleTable',
-    components: {
-      BasicTable,
-      ClaimModal,
-      MenuModal,
-      RoleModal,
-      Tag,
-      TableAction,
-      PermissionModal,
-    },
-    setup() {
   const { L } = useLocalization(['AbpIdentity', 'AppPlatform']);
   const loadMenuRef = ref(false);
   const { hasPermission } = usePermission();
@@ -122,11 +110,9 @@
     setRoleMenu({
       roleName: roleName,
       menuIds: menuIds,
-        })
+    }).then(() => {
-          .then(() => {
       closeMenuModal();
-          })
+    }).finally(() => {
-          .finally(() => {
       loadMenuRef.value = false;
     });
   }
@@ -146,31 +132,4 @@
   function handleShowClaims(record) {
     openClaimModal(true, { id: record.id });
   }
-
-      return {
-        L,
-        loadMenuRef,
-        hasPermission,
-        registerTable,
-        reloadTable,
-        registerModal,
-        registerClaimModal,
-        handleShowClaims,
-        registerPermissionModal,
-        showPermissionModal,
-        registerMenuModal,
-        handleAddNew,
-        handleEdit,
-        handleSetMenu,
-        handleDelete,
-        handleChangeMenu,
-        handleChangeStartupMenu,
-        getListByRole,
-        getRoleClaims,
-        createClaim,
-        updateClaim,
-        deleteClaim,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/role/hooks/useClaim.ts

@@ -1,7 +1,6 @@
 import type { Ref } from 'vue';
-
+import { useMessage } from '/@/hooks/web/useMessage';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
-import { Modal } from 'ant-design-vue';
 import { FormSchema } from '/@/components/Form';
 import { useModal } from '/@/components/Modal';
 import { getActivedList } from '/@/api/identity/claim';
@@ -16,6 +15,7 @@ interface UseClaim {
 // TODO: 与UserClaim重复 需要分离组件
 export function useClaim({ roleIdRef }: UseClaim) {
   const { L } = useLocalization('AbpIdentity');
+  const { createMessage, createConfirm } = useMessage();
   const formSchemas: FormSchema[] = [
     {
       field: 'id',
@@ -102,12 +102,15 @@ export function useClaim({ roleIdRef }: UseClaim) {
   }
 
   function handleDelete(claim) {
-    Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessageWithFormat', [claim.claimValue] as Recordable),
       okCancel: true,
       onOk: () => {
-        deleteClaim(unref(roleIdRef), claim).then(() => {
+        deleteClaim(unref(roleIdRef), claim)
+          .then(() => {
+            createMessage.success(L('SuccessfullyDeleted'));
             reloadTable();
           });
       },

apps/vue/src/views/identity/role/hooks/useRoleTable.ts

@@ -1,13 +1,14 @@
 import { useLocalization } from '/@/hooks/abp/useLocalization';
+import { useMessage } from '/@/hooks/web/useMessage';
 import { useTable } from '/@/components/Table';
 import { deleteById, getList } from '/@/api/identity/role';
 import { formatPagedRequest } from '/@/utils/http/abp/helper';
 import { getDataColumns } from '../datas/TableData';
 import { getSearchFormSchemas } from '../datas/ModalData';
-import { Modal } from 'ant-design-vue';
 
 export function useRoleTable() {
   const { L } = useLocalization('AbpIdentity');
+  const { createMessage, createConfirm } = useMessage();
   const [registerTable, { reload: reloadTable }] = useTable({
     rowKey: 'id',
     title: L('Roles'),
@@ -32,12 +33,14 @@ export function useRoleTable() {
   });
 
   function handleDelete(role) {
-    Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessageWithFormat', [role.name] as Recordable),
       okCancel: true,
       onOk: () => {
         deleteById(role.id).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
           reloadTable();
         });
       },

apps/vue/src/views/identity/security-logs/components/SecurityLogTable.vue

@@ -18,9 +18,8 @@
   </BasicTable>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
-  import { Modal } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicTable, TableAction, useTable } from '/@/components/Table';
   import { getDataColumns } from './TableData';
@@ -28,10 +27,7 @@
   import { deleteById, getList } from '/@/api/identity/securityLog';
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
 
-  export default defineComponent({
+  const { createMessage, createConfirm } = useMessage();
-    name: 'SecurityLogTable',
-    components: { BasicTable, TableAction },
-    setup() {
   const { L } = useLocalization('AbpAuditLogging');
   const [registerTable, { reload }] = useTable({
     rowKey: 'id',
@@ -58,23 +54,17 @@
   });
 
   function handleDelete(record) {
-        Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
         deleteById(record.id).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },
     });
   }
-
-      return {
-        L,
-        registerTable,
-        handleDelete,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/user/components/LockModal.vue

@@ -7,39 +7,30 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, unref } from 'vue';
+  import { ref, unref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicModalForm } from '/@/components/ModalForm';
   import { useModalInner } from '/@/components/Modal';
 
   import { useLock } from '../hooks/useLock';
 
-  export default defineComponent({
+  const emits = defineEmits(['change', 'register']);
-    name: 'LockModal',
+
-    components: { BasicModalForm },
-    emits: ['change', 'register'],
-    setup(_props, { emit }) {
   const { L } = useLocalization('AbpIdentity');
+  const { createMessage } = useMessage();
   const userIdRef = ref('');
-      const { formSchemas, handleLock } = useLock({ emit });
+  const { formSchemas, handleLock } = useLock({ emit: emits });
   const [registerModal, { closeModal }] = useModalInner((val) => {
     userIdRef.value = val.userId;
   });
 
   function handleSaveChanges(input) {
-        return handleLock(unref(userIdRef), input).then(() => {
+    return handleLock(unref(userIdRef), input)
+      .then(() => {
+        createMessage.success(L('Successful'));
         closeModal();
       });
   }
-
-      return {
-        L,
-        formSchemas,
-        handleLock,
-        handleSaveChanges,
-        registerModal,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/user/components/PasswordModal.vue

@@ -9,18 +9,16 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, unref } from 'vue';
+  import { ref, unref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm, FormActionType } from '/@/components/Form';
   import { usePassword } from '../hooks/usePassword';
   import { changePassword } from '/@/api/identity/user';
 
-  export default defineComponent({
+  const { createMessage } = useMessage();
-    name: 'PasswordModal',
-    components: { BasicModal, BasicForm },
-    setup() {
   const { L } = useLocalization('AbpIdentity');
   const userIdRef = ref('');
   const formElRef = ref<Nullable<FormActionType>>(null);
@@ -28,7 +26,7 @@
   const [registerModal, { closeModal }] = useModalInner((val) => {
     userIdRef.value = val;
   });
-      const [registerForm, { getFieldsValue, validate }] = useForm({
+  const [registerForm, { validate }] = useForm({
     schemas: formSchemas,
     showActionButtonGroup: false,
     actionColOptions: {
@@ -43,23 +41,10 @@
         changePassword(userId, {
           password: res.password,
         }).then(() => {
+          createMessage.success(L('Successful'));
           closeModal();
         });
       });
     }
   }
-
-      return {
-        L,
-        formElRef,
-        registerModal,
-        closeModal,
-        registerForm,
-        getFieldsValue,
-        validate,
-        userIdRef,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/user/components/UserModal.vue

@@ -62,30 +62,23 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-  import { message, Checkbox, Input, Form, Tabs, Transfer } from 'ant-design-vue';
+  import { Checkbox, Input, Form, Tabs, Transfer } from 'ant-design-vue';
   import { Input as BInput } from '/@/components/Input';
   import { FormActionType } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { useUserForm } from '../hooks/useUserForm';
 
-  export default defineComponent({
+  const FormItem = Form.Item;
-    name: 'UserModal',
+  const TabPane = Tabs.TabPane;
-    components: {
+  const InputPassword = Input.Password;
-      BasicModal,
+
-      Checkbox,
+  const emits = defineEmits(['register', 'change']);
-      Form,
+
-      FormItem: Form.Item,
+  const { createMessage } = useMessage();
-      Tabs,
-      TabPane: Tabs.TabPane,
-      BInput,
-      InputPassword: Input.Password,
-      Transfer,
-    },
-    emits: ['register', 'change'],
-    setup(_, { emit }) {
   const { L } = useLocalization(['AbpIdentity', 'AbpIdentityServer']);
   const activedTab = ref('info');
   const userRef = ref<Recordable>({});
@@ -104,30 +97,14 @@
     changeOkLoading(true);
     handleSubmit()
       .then((res) => {
-            message.success(L('Successful'));
+        createMessage.success(L('Successful'));
         closeModal();
-            emit('change', res);
+        emits('change', res);
       })
       .finally(() => {
         changeOkLoading(false);
       });
   }
-
-      return {
-        L,
-        activedTab,
-        userRef,
-        formElRef,
-        formRules,
-        roleDataSource,
-        handleRoleChange,
-        userTitle,
-        handleOk,
-        registerModal,
-        closeModal,
-      };
-    },
-  });
 </script>
 
 <style scoped>

apps/vue/src/views/identity/user/components/UserTable.vue

@@ -106,8 +106,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { Tag } from 'ant-design-vue';
@@ -126,27 +126,15 @@
   import MenuModal from '../../components/MenuModal.vue';
   import ClaimModal from '../../components/ClaimModal.vue';
 
-  export default defineComponent({
+  const emits = defineEmits(['change']);
-    name: 'UserTable',
+
-    components: {
-      BasicTable,
-      ClaimModal,
-      PermissionModal,
-      TableAction,
-      Tag,
-      UserModal,
-      PasswordModal,
-      LockModal,
-      MenuModal,
-    },
-    setup(_props, { emit }) {
   const { L } = useLocalization(['AbpIdentity', 'AppPlatform']);
   const loadMenuRef = ref(false);
   const nullFormElRef = ref(null);
   const { hasPermission } = usePermission();
   const [registerModal, { openModal }] = useModal();
   const { lockEnable, registerTable, reloadTable, handleDelete } = useUserTable();
-      const { registerLockModal, showLockModal, handleUnLock } = useLock({ emit });
+  const { registerLockModal, showLockModal, handleUnLock } = useLock({ emit: emits });
   const { registerPasswordModal, showPasswordModal } = usePassword(nullFormElRef);
   const [registerClaimModal, { openModal: openClaimModal }] = useModal();
   const [registerMenuModal, { openModal: openMenuModal, closeModal: closeMenuModal }] =
@@ -162,11 +150,9 @@
     setUserMenu({
       userId: userId,
       menuIds: menuIds,
-        })
+    }) .then(() => {
-          .then(() => {
       closeMenuModal();
-          })
+    }) .finally(() => {
-          .finally(() => {
       loadMenuRef.value = false;
     });
   }
@@ -192,39 +178,4 @@
   function handleShowClaims(record) {
     openClaimModal(true, { id: record.id });
   }
-
-      return {
-        L,
-        loadMenuRef,
-        hasPermission,
-        lockEnable,
-        registerTable,
-        reloadTable,
-        registerModal,
-        openModal,
-        registerPermissionModal,
-        showPermissionModal,
-        registerPasswordModal,
-        showPasswordModal,
-        registerClaimModal,
-        handleShowClaims,
-        handleDelete,
-        registerLockModal,
-        showLockModal,
-        handleUnLock,
-        registerMenuModal,
-        handleAddNew,
-        handleEdit,
-        handleUnlock,
-        handleSetMenu,
-        handleChangeMenu,
-        handleChangeStartupMenu,
-        getListByUser,
-        getUserClaims,
-        createClaim,
-        updateClaim,
-        deleteClaim,
-      };
-    },
-  });
 </script>

apps/vue/src/views/identity/user/hooks/useUserForm.ts

@@ -106,12 +106,10 @@ export function useUserForm({ userRef, formElRef }: UseUserFormContext) {
           const api = user.id
             ? update(user.id, cloneDeep(user) as UpdateUser)
             : create(cloneDeep(user) as CreateUser);
-          api
+          api.then((res) => {
-            .then((res) => {
             userRef.value = {};
             resolve(res);
-            })
+          }).catch((error) => {
-            .catch((error) => {
             reject(error);
           });
         })

apps/vue/src/views/identity/user/hooks/useUserTable.ts

@@ -1,13 +1,14 @@
 import { computed } from 'vue';
+import { useMessage } from '/@/hooks/web/useMessage';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { useTable } from '/@/components/Table';
 import { deleteById, getList } from '/@/api/identity/user';
 import { formatPagedRequest } from '/@/utils/http/abp/helper';
 import { getDataColumns } from '../datas/TableData';
 import { getSearchFormSchemas } from '../datas/ModalData';
-import { Modal } from 'ant-design-vue';
 
 export function useUserTable() {
+  const { createMessage, createConfirm } = useMessage();
   const { L } = useLocalization('AbpIdentity');
   const [registerTable, { reload: reloadTable }] = useTable({
     rowKey: 'id',
@@ -51,12 +52,15 @@ export function useUserTable() {
   });
 
   function handleDelete(user) {
-    Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessageWithFormat', [user.userName] as Recordable),
       okCancel: true,
       onOk: () => {
-        deleteById(user.id).then(() => {
+        deleteById(user.id)
+          .then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
             reloadTable();
           });
       },

apps/vue/src/views/localization/languages/components/LanguageTable.vue

@@ -4,25 +4,15 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, onMounted } from 'vue';
+  import { onMounted } from 'vue';
-  import { Switch } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-  import { usePermission } from '/@/hooks/web/usePermission';
   import { BasicTable, useTable } from '/@/components/Table';
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
   import { getList } from '/@/api/localization/languages';
   import { getDataColumns } from './TableData';
 
-  export default defineComponent({
-    name: 'LanguageTable',
-    components: {
-      BasicTable,
-      Switch,
-    },
-    setup() {
   const { L } = useLocalization(['AbpLocalization', 'AbpUi']);
-      const { hasPermission } = usePermission();
   const [registerTable, { setTableData, getForm }] = useTable({
     rowKey: 'cultureName',
     title: L('Languages'),
@@ -60,17 +50,4 @@
       });
     });
   }
-
-      function handleChange() {
-        fetchLanguages();
-      }
-
-      return {
-        L,
-        hasPermission,
-        registerTable,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/localization/resources/components/ResourceTable.vue

@@ -4,24 +4,14 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, onMounted } from 'vue';
+  import { onMounted } from 'vue';
-  import { Switch } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-  import { usePermission } from '/@/hooks/web/usePermission';
   import { BasicTable, useTable } from '/@/components/Table';
   import { getList } from '/@/api/localization/resources';
   import { getDataColumns } from './TableData';
 
-  export default defineComponent({
-    name: 'ResourceTable',
-    components: {
-      BasicTable,
-      Switch,
-    },
-    setup() {
   const { L } = useLocalization(['LocalizationManagement', 'AbpUi']);
-      const { hasPermission } = usePermission();
   const [registerTable, { setTableData, getForm }] = useTable({
     rowKey: 'name',
     title: L('Resources'),
@@ -58,17 +48,4 @@
       });
     });
   }
-
-      function handleChange() {
-        fetchResources();
-      }
-
-      return {
-        L,
-        hasPermission,
-        registerTable,
-        handleChange,
-      };
-    },
-  });
 </script>

apps/vue/src/views/localization/texts/components/TextModal.vue

@@ -11,21 +11,20 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref, unref, nextTick } from 'vue';
+  import { computed, ref, unref, nextTick } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-  import { message } from 'ant-design-vue';
   import { BasicForm, FormSchema, FormActionType, useForm } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { Text } from '/@/api/localization/model/textsModel';
   import { getByCulture, setText } from '/@/api/localization/texts';
   import { getList as getLanguages } from '/@/api/localization/languages';
   import { getList as getResources } from '/@/api/localization/resources';
-  export default defineComponent({
+
-    name: 'TextModal',
+  const emits = defineEmits(['change', 'register']);
-    components: { BasicForm, BasicModal },
+
-    emits: ['change', 'register'],
+  const { createMessage } = useMessage();
-    setup(_props, { emit }) {
   const { L } = useLocalization(['LocalizationManagement', 'AbpUi']);
   const modelRef = ref<Nullable<Text>>(null);
   const formElRef = ref<Nullable<FormActionType>>(null);
@@ -112,7 +111,7 @@
       },
     },
   ];
-      const [registerForm, { resetFields, setFieldsValue }] = useForm({
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
     colon: true,
     labelWidth: 120,
     schemas: formSchemas,
@@ -137,13 +136,12 @@
   });
 
   function handleSubmit() {
-        const formEl = unref(formElRef);
+    validate().then((input) => {
-        formEl?.validate().then((input) => {
       changeOkLoading(true);
       setText(input).then(() => {
-            emit('change');
+        createMessage.success(L('Successful'));
-            message.success(L('Successful'));
+        emits('change');
-            formEl?.resetFields();
+        resetFields();
         closeModal();
       })
       .finally(() => {
@@ -151,15 +149,4 @@
       });
     });
   }
-
-      return {
-        L,
-        formElRef,
-        formTitle,
-        registerForm,
-        registerModal,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/localization/texts/components/TextTable.vue

@@ -29,10 +29,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { cloneDeep } from 'lodash-es';
-  import { defineComponent } from 'vue';
-  import { Switch } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useModal } from '/@/components/Modal';
@@ -42,20 +40,11 @@
   import { getSearchFormSchemas } from './ModalData';
   import TextModal from './TextModal.vue';
 
-  export default defineComponent({
-    name: 'TextTable',
-    components: {
-      BasicTable,
-      Switch,
-      TableAction,
-      TextModal,
-    },
-    setup() {
   const { L } = useLocalization(['LocalizationManagement', 'AbpUi']);
   const { hasPermission } = usePermission();
   const [registerModal, { openModal }] = useModal();
   const [registerTable, { setTableData, setPagination, getForm }] = useTable({
-        rowKey: 'id',
+    rowKey: 'key',
     title: L('Texts'),
     columns: getDataColumns(),
     pagination: true,
@@ -99,17 +88,4 @@
   function handleEdit(record) {
     openModal(true, {...{ id: 1 }, ...record});
   }
-
-      return {
-        L,
-        hasPermission,
-        registerTable,
-        registerModal,
-        openModal,
-        handleChange,
-        handleAddNew,
-        handleEdit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/oss-management/containers/components/ContainerTable.vue

@@ -38,9 +38,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
-  import { Modal, message } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { BasicModal, useModal } from '/@/components/Modal';
@@ -51,15 +50,7 @@
   import { getSearchFormSchemas, getModalFormSchemas } from './ModalData';
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
 
-  export default defineComponent({
+  const { createMessage, createConfirm } = useMessage();
-    name: 'ContainerTable',
-    components: {
-      BasicForm,
-      BasicModal,
-      BasicTable,
-      TableAction,
-    },
-    setup() {
   const { L } = useLocalization(['AbpOssManagement', 'AbpUi']);
   const { hasPermission } = usePermission();
   const [registerModal, { openModal, closeModal }] = useModal();
@@ -106,13 +97,14 @@
   }
 
   function handleDelete(record) {
-        Modal.warning({
+    createConfirm({
+      iconType: 'warning',
       title: L('AreYouSure'),
       content: L('ItemWillBeDeletedMessage'),
       okCancel: true,
       onOk: () => {
         deleteContainer(record.name).then(() => {
-              message.success(L('Successful'));
+          createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },
@@ -122,24 +114,10 @@
   function handleSubmit() {
     validate().then((input) => {
       createContainer(input.name).then(() => {
-            message.success(L('Successful'));
+        createMessage.success(L('Successful'));
         closeModal();
         reload();
       });
     });
   }
-
-      return {
-        L,
-        hasPermission,
-        registerTable,
-        registerForm,
-        registerModal,
-        openModal,
-        handleAddNew,
-        handleDelete,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/oss-management/objects/components/FileList.vue

@@ -173,7 +173,7 @@
           path: props.path,
           objects: getSelectRowKeys(),
         }).then(() => {
-          createMessage.success(L('Successful'));
+          createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },
@@ -199,7 +199,7 @@
           path: props.path,
           object: record.name,
         }).then(() => {
-          createMessage.success(L('Successful'));
+          createMessage.success(L('SuccessfullyDeleted'));
           reload();
         });
       },

apps/vue/src/views/oss-management/objects/components/OssFolderModal.vue

@@ -10,20 +10,18 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, unref } from 'vue';
+  import { ref, unref } from 'vue';
-  import { message } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
   import { getFolderModalSchemas } from '../datas/ModalData';
   import { createObject } from '/@/api/oss-management/oss';
 
-  export default defineComponent({
+  const emits = defineEmits(['register', 'change']);
-    name: 'OssFolderModal',
+
-    components: { BasicModal, BasicForm },
+  const { createMessage } = useMessage();
-    emits: ['register', 'change'],
-    setup(_, { emit }) {
   const { L } = useLocalization(['AbpOssManagement', 'AbpUi']);
   const bucket = ref('');
   const path = ref('');
@@ -50,19 +48,10 @@
         object: name,
         overwrite: false,
       }).then(() => {
-            message.success(L('Successful'));
+        createMessage.success(L('Successful'));
         closeModal();
-            emit('change', name);
+        emits('change', name);
       });
     });
   }
-
-      return {
-        L,
-        registerForm,
-        registerModal,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/oss-management/objects/components/OssManagePage.vue

@@ -27,30 +27,19 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, onMounted } from 'vue';
+  import { ref, onMounted } from 'vue';
   import { Card, Select } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-  import { usePermission } from '/@/hooks/web/usePermission';
   import { getContainers } from '/@/api/oss-management/oss';
   import { OssContainer } from '/@/api/oss-management/model/ossModel';
   import FolderTree from './FolderTree.vue';
   import FileList from './FileList.vue';
 
-  export default defineComponent({
+  const CardGrid = Card.Grid;
-    name: 'OssTable',
+  const CardMeta = Card.Meta;
-    components: {
+
-      Card,
-      CardGrid: Card.Grid,
-      CardMeta: Card.Meta,
-      Select,
-      Option: Select.Option,
-      FolderTree,
-      FileList,
-    },
-    setup() {
   const { L } = useLocalization(['AbpOssManagement', 'AbpUi']);
-      const { hasPermission } = usePermission();
   const currentPath = ref('');
   const currentBucket = ref('');
   const bucketList = ref<OssContainer[]>([]);
@@ -76,16 +65,4 @@
   function handlePathChange(path) {
     currentPath.value = path;
   }
-
-      return {
-        L,
-        bucketList,
-        currentBucket,
-        currentPath,
-        handleBucketChange,
-        handlePathChange,
-        hasPermission,
-      };
-    },
-  });
 </script>

apps/vue/src/views/oss-management/objects/components/OssPreviewModal.vue

@@ -9,8 +9,8 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, unref, watch } from 'vue';
+  import { computed, ref, unref } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { ImagePreview } from '/@/components/Preview';
   import { BasicModal, useModalInner } from '/@/components/Modal';
@@ -18,36 +18,17 @@
   import { generateOssUrl } from '/@/api/oss-management/oss';
   import { useUserStoreWithOut } from '/@/store/modules/user';
 
-  export default defineComponent({
-    name: 'OssPreviewModal',
-    components: { BasicModal, ImagePreview },
-    setup() {
   const { L } = useLocalization('AbpOssManagement');
   const bucket = ref('');
   const objects = ref<OssObject[]>([]);
-      const previewImages = ref<any[]>([]);
   const [registerModal] = useModalInner((data) => {
     bucket.value = data.bucket;
     objects.value = data.objects;
   });
+  const previewImages = computed(() => {
     const userStore = useUserStoreWithOut();
-
+    return objects.value.map((obj) => {
-      watch(
+      return generateOssUrl(unref(bucket), obj.path, obj.name) + '?access_token=' + userStore.getToken;
-        () => unref(objects),
-        (objs) => {
-          previewImages.value = objs.map((x) => {
-            return (
-              generateOssUrl(unref(bucket), x.path, x.name) + '?access_token=' + userStore.getToken
-            );
     });
-        },
-      );
-
-      return {
-        L,
-        previewImages,
-        registerModal,
-      };
-    },
   });
 </script>

apps/vue/src/views/oss-management/objects/components/OssUploadModal.vue

@@ -50,8 +50,8 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref, unref, onMounted, onUnmounted, watch } from 'vue';
+  import { computed, ref, unref, onMounted, onUnmounted, watch } from 'vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { Tag, Tooltip } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
@@ -60,10 +60,6 @@
   import { useUserStoreWithOut } from '/@/store/modules/user';
   import Uploader from 'simple-uploader.js';
 
-  export default defineComponent({
-    name: 'OssUploadModal',
-    components: { BasicModal, BasicTable, TableAction, Tag, Tooltip },
-    setup() {
   let uploader: any = null;
   const { L } = useLocalization(['AbpOssManagement', 'AbpUi']);
   const bucket = ref('');
@@ -217,19 +213,4 @@
       return `${Uploader.utils.formatSize(speed)} / s`;
     };
   });
-
-      return {
-        L,
-        btnRef,
-        fileSize,
-        averageSpeed,
-        registerModal,
-        registerTable,
-        handleSelect,
-        handleResume,
-        handlePause,
-        handleCancel,
-      };
-    },
-  });
 </script>

apps/vue/src/views/platform/dataDic/components/DataItemModal.vue

@@ -4,27 +4,18 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref, unref, watch } from 'vue';
+  import { computed, ref, unref, watch } from 'vue';
-
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-
   import { DataItem } from '/@/api/platform/model/dataItemModel';
   import { getDataItemFormSchemas } from './ModalData';
-
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
-
   import { createItem, updateItem } from '/@/api/platform/dataDic';
-  export default defineComponent({
+
-    name: 'DataItemModal',
+  const emits = defineEmits(['change', 'register']);
-    components: {
+
-      BasicForm,
-      BasicModal,
-    },
-    emits: ['change', 'register'],
-    setup(_, { emit }) {
   const dataItem = ref<DataItem>();
   const { createMessage } = useMessage();
   const { L } = useLocalization(['AppPlatform', 'AbpUi']);
@@ -69,23 +60,11 @@
           : createItem(input.dataId, input);
       api.then(() => {
         createMessage.success(L('Successful'));
-            emit('change', input.dataId);
+        emits('change', input.dataId);
         closeModal();
-          })
+      }).finally(() => {
-          .finally(() => {
         changeLoading(false);
       });
     });
   }
-
-      return {
-        L,
-        title,
-        registerForm,
-        register,
-        dataItem,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/platform/dataDic/components/DataItemTable.vue

@@ -31,36 +31,28 @@
   <DataItemModal @register="registerModal" @change="fetchItems" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref, createVNode, watch } from 'vue';
+  import { computed, ref, createVNode, watch } from 'vue';
-
   import { getDataColumns } from './TableData';
-  import DataItemModal from './DataItemModal.vue';
+  import { Switch } from 'ant-design-vue';
-  import { Modal, Switch } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
-
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-
   import { DataItem } from '/@/api/platform/model/dataItemModel';
   import { get, removeItem } from '/@/api/platform/dataDic';
+  import DataItemModal from './DataItemModal.vue';
 
-  const props = {
+  const emits = defineEmits(['reload']);
-    dataId: { type: String, retuired: true },
+  const props = defineProps({
-  } as const;
+    dataId: {
-
+      type: String,
-  export default defineComponent({
+      retuired: true,
-    name: 'DataItemTable',
-    components: {
-      BasicTable,
-      TableAction,
-      DataItemModal,
-      Switch,
     },
-    props,
+  });
-    emits: ['reload'],
+
-    setup(props, { emit }) {
+  const { createMessage, createConfirm } = useMessage();
   const { L } = useLocalization(['AppPlatform', 'AbpUi']);
   const dataItems = ref<DataItem[]>([]);
   const [registerTable] = useTable({
@@ -115,7 +107,8 @@
   }
 
   function handleDelete(record: Recordable) {
-        Modal.confirm({
+    createConfirm({
+      iconType: 'error',
       title: L('AreYouSure'),
       icon: createVNode(ExclamationCircleOutlined),
       content: createVNode(
@@ -124,26 +117,13 @@
         L('ItemWillBeDeletedMessageWithFormat', [record.displayName] as Recordable),
       ),
       onOk: () => {
-            removeItem(props.dataId!, record.name).then(() => {
+        removeItem(props.dataId!, record.name)
-              emit('reload');
+          .then(() => {
+            createMessage.success(L('SuccessfullyDeleted'));
+            emits('reload');
             fetchItems(props.dataId!);
           });
       },
     });
   }
-
-      return {
-        L,
-        isEnableNew,
-        registerTable,
-        dataItems,
-        registerModal,
-        openModal,
-        fetchItems,
-        handleAppendItem,
-        handleEdit,
-        handleDelete,
-      };
-    },
-  });
 </script>

apps/vue/src/views/platform/dataDic/components/DataModal.vue

@@ -9,25 +9,17 @@
   </BasicModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, nextTick } from 'vue';
+  import { ref, nextTick } from 'vue';
-
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-
   import { get, create, update } from '/@/api/platform/dataDic';
   import { getDateFormSchemas } from './ModalData';
-
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
-  export default defineComponent({
+
-    name: 'DataModal',
+  const emits = defineEmits(['register', 'change']);
-    components: {
+
-      BasicForm,
-      BasicModal,
-    },
-    emits: ['register', 'change'],
-    setup(_, { emit }) {
   const { createMessage } = useMessage();
   const { L } = useLocalization('AppPlatform');
   const schemas = getDateFormSchemas();
@@ -67,20 +59,10 @@
       api.then((data) => {
         createMessage.success(L('Successful'));
         closeModal();
-            emit('change', data);
+        emits('change', data);
       }).finally(() => {
         changeLoading(false);
       });
     });
   }
-
-      return {
-        L,
-        title,
-        registerForm,
-        register,
-        handleSubmit,
-      };
-    },
-  });
 </script>

apps/vue/src/views/platform/dataDic/components/DataTree.vue

@@ -17,30 +17,22 @@
   </Card>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, onMounted } from 'vue';
+  import { ref, onMounted } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-
+  import { Card } from 'ant-design-vue';
-  import { Modal, Card } from 'ant-design-vue';
   import { useModal } from '/@/components/Modal';
   import { BasicTree, ContextMenuItem } from '/@/components/Tree/index';
   import { listToTree } from '/@/utils/helper/treeHelper';
-
   import { getAll, remove } from '/@/api/platform/dataDic';
   import { Data } from '/@/api/platform/model/dataModel';
   import DataModal from './DataModal.vue';
   import DataItemModal from './DataItemModal.vue';
 
-  export default defineComponent({
+  const emits = defineEmits(['change', 'append-item']);
-    name: 'DataTree',
+
-    components: {
+  const { createMessage, createConfirm } = useMessage();
-      Card,
-      BasicTree,
-      DataModal,
-      DataItemModal,
-    },
-    emits: ['change', 'append-item'],
-    setup(_, { emit }) {
   const { L } = useLocalization(['AppPlatform', 'AbpUi']);
   const title = L('DisplayName:DataDictionary');
   const treeData = ref<Data[]>([]);
@@ -80,12 +72,14 @@
       {
         label: L('Data:Delete'),
         handler: () => {
-              Modal.warning({
+          createConfirm({
+            iconType: 'warning',
             title: L('AreYouSure'),
             content: L('ItemWillBeDeletedMessage'),
             okCancel: true,
             onOk: () => {
               remove(node.eventKey).then(() => {
+                createMessage.success(L('SuccessfullyDeleted'));
                 onLoadAllDataDic();
               });
             },
@@ -106,23 +100,7 @@
 
   function handleNodeChange(selectKeys: String[]) {
     if (selectKeys.length > 0) {
-          emit('change', selectKeys[0]);
+      emits('change', selectKeys[0]);
     }
   }
-
-      return {
-        L,
-        title,
-        treeData,
-        replaceFields,
-        registerDataModal,
-        openDataModal,
-        registerItemModal,
-        openItemModal,
-        getContentMenus,
-        handleNodeChange,
-        onLoadAllDataDic,
-      };
-    },
-  });
 </script>

apps/vue/src/views/platform/dataDic/index.vue

@@ -10,34 +10,20 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  export default {
-  import { useI18n } from '/@/hooks/web/useI18n';
+    name: 'DataDictionary',
+  };
+</script>
 
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Row, Col } from 'ant-design-vue';
   import DataTree from './components/DataTree.vue';
   import DataItemTable from './components/DataItemTable.vue';
-  import { Row, Col } from 'ant-design-vue';
 
-  export default defineComponent({
-    name: 'DataDictionary',
-    components: {
-      DataTree,
-      DataItemTable,
-      Row,
-      Col,
-    },
-    setup() {
-      const { t } = useI18n();
   const dataId = ref('');
 
-      return {
+  function handleDataChange(id: string) {
-        t,
+    dataId.value = id;
-        dataId,
+  }
-      };
-    },
-    methods: {
-      handleDataChange(id: string) {
-        this.dataId = id;
-      },
-    },
-  });
 </script>

apps/vue/src/views/platform/layout/components/LayoutModal.vue

@@ -8,9 +8,8 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, computed } from 'vue';
+  import { ref, computed } from 'vue';
-
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { useModalInner } from '/@/components/Modal';
   import { BasicModalForm } from '/@/components/ModalForm';
@@ -18,13 +17,8 @@
   import { Layout } from '/@/api/platform/model/layoutModel';
   import { create, update } from '/@/api/platform/layout';
 
-  export default defineComponent({
+  const emits = defineEmits(['change', 'register']);
-    name: 'LayoutModal',
+
-    components: {
-      BasicModalForm,
-    },
-    emits: ['change', 'register'],
-    setup() {
   const { L } = useLocalization('AppPlatform');
   const layout = ref<Layout>({} as Layout);
   const formItems = getModalFormSchemas(layout.value);
@@ -39,19 +33,8 @@
     return L('Layout:AddNew');
   });
 
-      return {
+  function handleSaveChanges(data) {
-        L,
+    const api = data.id === undefined
-        layout,
-        register,
-        closeModal,
-        formItems,
-        title,
-      };
-    },
-    methods: {
-      handleSaveChanges(data) {
-        const api =
-          data.id === undefined
         ? create({
             dataId: data.dataId,
             framework: data.framework,
@@ -69,9 +52,8 @@
             path: data.path,
           });
     return api.then(() => {
-          this.$emit('change');
+      emits('change');
-        });
+      closeModal();
-      },
-    },
     });
+  }
 </script>

apps/vue/src/views/platform/layout/components/LayoutTable.vue

@@ -26,15 +26,13 @@
         </template>
       </template>
     </BasicTable>
-    <LayoutModal @change="reloadTable" @register="registerLayoutModal" :layout-id="layoutId" />
+    <LayoutModal @change="reload" @register="registerLayoutModal" />
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
-
   import { useLocalization } from '/@/hooks/abp/useLocalization';
-  import { Modal } from 'ant-design-vue';
   import { useModal } from '/@/components/Modal';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { getDataColumns } from './TableData';
@@ -42,17 +40,10 @@
   import { getList, deleteById } from '/@/api/platform/layout';
   import { formatPagedRequest } from '/@/utils/http/abp/helper';
   import LayoutModal from './LayoutModal.vue';
-  export default defineComponent({
+
-    name: 'LayoutTable',
+  const { createMessage, createConfirm } = useMessage();
-    components: {
-      BasicTable,
-      TableAction,
-      LayoutModal,
-    },
-    setup() {
   const { L } = useLocalization(['AppPlatform', 'AbpUi']);
-      const layoutId = ref('');
+  const [registerTable, { reload }] = useTable({
-      const [registerTable, { reload: reloadTable }] = useTable({
     rowKey: 'id',
     title: L('DisplayName:Layout'),
     columns: getDataColumns(),
@@ -72,34 +63,26 @@
   });
   const [registerLayoutModal, { openModal: openLayoutModal }] = useModal();
 
-      return {
+  function handleAddNew() {
-        L,
+    openLayoutModal(true, {});
-        layoutId,
+  }
-        reloadTable,
+
-        registerTable,
+  function handleEdit(record: Recordable) {
-        openLayoutModal,
+    openLayoutModal(true, record);
-        registerLayoutModal,
+  }
-      };
+
-    },
+  function handleDelete(record: Recordable) {
-    methods: {
+    createConfirm({
-      handleAddNew() {
+      iconType: 'warning',
-        this.openLayoutModal(true, {}, true);
+      title: L('AreYouSure'),
-      },
+      content: L('ItemWillBeDeletedMessageWithFormat', [record.displayName]),
-      handleEdit(record: Recordable) {
-        this.openLayoutModal(true, record, true);
-      },
-      handleDelete(record: Recordable) {
-        Modal.warning({
-          title: this.L('AreYouSure'),
-          content: this.L('ItemWillBeDeletedMessageWithFormat', [record.displayName] as Recordable),
       okCancel: true,
       onOk: () => {
         deleteById(record.id).then(() => {
-              this.reloadTable();
+          createMessage.success(L('SuccessfullyDeleted'));
+          reload();
         });
       },
     });
-      },
+  }
-    },
-  });
 </script>

apps/vue/src/views/platform/menu/components/MenuDrawer.vue

@@ -22,25 +22,21 @@
   </BasicDrawer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { nextTick, ref } from 'vue';
-
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { TabForm, FormActionType } from '/@/components/Form';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-
   import { basicProps } from './props';
   import { Menu } from '/@/api/platform/model/menuModel';
   import { useMenuFormContext } from '../hooks/useMenuFormContext';
 
-  export default defineComponent({
+  const emits = defineEmits(['change', 'register']);
-    name: 'MenuDrawer',
+  const props = defineProps(basicProps);
-    components: {
+
-      BasicDrawer,
+  const { createMessage } = useMessage();
-      TabForm,
+  const { L } = useLocalization(['AppPlatform', 'AbpUi']);
-    },
-    props: basicProps,
-    emits: ['change', 'register'],
-    setup(props) {
   const menu = ref<Menu>({} as Menu);
   const framework = ref<string  | undefined>('');
   const formElRef = ref<Nullable<FormActionType>>(null);
@@ -51,29 +47,20 @@
       framework: framework,
     });
 
-      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (dataVal) => {
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner((dataVal) => {
-        setDrawerProps({ confirmLoading: false });
     menu.value = dataVal;
     framework.value = props.framework;
+    nextTick(() => {
+      setDrawerProps({ confirmLoading: false });
       fetchLayoutResource(dataVal.layoutId);
     });
-
-      return {
-        formTitle,
-        formElRef,
-        handleFormSubmit,
-        getFormSchemas,
-        registerDrawer,
-        closeDrawer,
-      };
-    },
-    methods: {
-      handleSubmit() {
-        this.handleFormSubmit()?.then(() => {
-          this.closeDrawer();
-          this.$emit('change');
   });
-      },
+
-    },
+  function handleSubmit() {
+    handleFormSubmit()?.then(() => {
+      createMessage.success(L('Successful'));
+      closeDrawer();
+      emits('change');
     });
+  }
 </script>

apps/vue/src/views/platform/menu/components/MenuTable.vue

@@ -30,29 +30,22 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
-
+  import { useMessage } from '/@/hooks/web/useMessage';
-  import { Modal } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useDrawer } from '/@/components/Drawer';
-  import MenuDrawer from './MenuDrawer.vue';
   import { getDataColumns } from './TableData';
   import { getSearchFormSchemas } from './ModalData';
   import { getAll, getById, deleteById } from '/@/api/platform/menu';
   import { listToTree } from '/@/utils/helper/treeHelper';
-  export default defineComponent({
+  import MenuDrawer from './MenuDrawer.vue';
-    name: 'MenuTable',
+
-    components: {
+  const { createMessage, createConfirm } = useMessage();
-      BasicTable,
-      TableAction,
-      MenuDrawer,
-    },
-    setup() {
   const { L } = useLocalization(['AppPlatform', 'AbpUi']);
   const useFramework = ref('');
-      const [registerTable, { reload: reloadTable }] = useTable({
+  const [registerTable, { reload }] = useTable({
     rowKey: 'id',
     title: L('DisplayName:Menus'),
     columns: getDataColumns(),
@@ -85,39 +78,32 @@
 
   const [registerDrawer, { openDrawer }] = useDrawer();
   
-      return {
+  function handleAddNew() {
-        L,
+    openDrawer(true, {});
-        registerTable,
+  }
-        reloadTable,
+
-        registerDrawer,
+  function handleEdit(record: Recordable) {
-        openDrawer,
-        useFramework,
-      };
-    },
-    methods: {
-      handleAddNew() {
-        this.openDrawer(true, {}, true);
-      },
-      handleEdit(record: Recordable) {
     getById(record.id).then((menu) => {
-          this.openDrawer(true, menu, true);
+      openDrawer(true, menu);
     });
-      },
+  }
-      handleDelete(record: Recordable) {
+
-        Modal.warning({
+  function handleDelete(record: Recordable) {
-          title: this.L('AreYouSure'),
+    createConfirm({
-          content: this.L('ItemWillBeDeletedMessageWithFormat', [record.displayName] as Recordable),
+      iconType: 'warning',
+      title: L('AreYouSure'),
+      content: L('ItemWillBeDeletedMessageWithFormat', [record.displayName]),
       okCancel: true,
       onOk: () => {
         deleteById(record.id).then(() => {
-              this.reloadTable();
+          createMessage.success(L('SuccessfullyDeleted'));
+          reload();
         });
       },
     });
-      },
+  }
-      handleChange() {
+    
-        this.reloadTable();
+  function handleChange() {
-      },
+    reload();
-    },
+  }
-  });
 </script>