refactor(application): change to setup syntax

src/components/Application/src/AppDarkModeToggle.vue

@@ -5,8 +5,8 @@
     <SvgIcon size="14" name="moon" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, computed, unref } from 'vue';
+  import { computed, unref } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
@@ -14,10 +14,6 @@
   import { updateDarkTheme } from '/@/logics/theme/dark';
   import { ThemeEnum } from '/@/enums/appEnum';
 
-  export default defineComponent({
-    name: 'DarkModeToggle',
-    components: { SvgIcon },
-    setup() {
   const { prefixCls } = useDesign('dark-switch');
   const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
 
@@ -37,16 +33,6 @@
     updateHeaderBgColor();
     updateSidebarBgColor();
   }
-
-      return {
-        getClass,
-        isDark,
-        prefixCls,
-        toggleDarkMode,
-        getShowDarkModeToggle,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-dark-switch';

src/components/Application/src/AppLocalePicker.vue

@@ -17,16 +17,16 @@
     </span>
   </Dropdown>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { LocaleType } from '/#/config';
   import type { DropMenu } from '/@/components/Dropdown';
-  import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
+  import { ref, watchEffect, unref, computed } from 'vue';
   import { Dropdown } from '/@/components/Dropdown';
   import { Icon } from '/@/components/Icon';
   import { useLocale } from '/@/locales/useLocale';
   import { localeList } from '/@/settings/localeSetting';
 
-  const props = {
+  const props = defineProps({
     /**
      * Whether to display text
      */
@@ -35,13 +35,8 @@
      * Whether to refresh the interface when changing
      */
     reload: { type: Boolean },
-  };
+  });
 
-  export default defineComponent({
-    name: 'AppLocalPicker',
-    components: { Dropdown, Icon },
-    props,
-    setup(props) {
   const selectedKeys = ref<string[]>([]);
 
   const { changeLocale, getLocale } = useLocale();
@@ -70,10 +65,6 @@
     }
     toggleLocale(menu.event as string);
   }
-
-      return { localeList, handleMenuEvent, selectedKeys, getLocaleText };
-    },
-  });
 </script>
 
 <style lang="less">

src/components/Application/src/AppLogo.vue

@@ -10,8 +10,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, computed, unref } from 'vue';
+  import { computed, unref } from 'vue';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useGo } from '/@/hooks/web/usePage';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
@@ -19,7 +19,7 @@
   import { PageEnum } from '/@/enums/pageEnum';
   import { useUserStore } from '/@/store/modules/user';
 
-  const props = {
+  const props = defineProps({
     /**
      * The theme of the current parent component
      */
@@ -32,12 +32,8 @@
      * The title is also displayed when the menu is collapsed
      */
     alwaysShowTitle: { type: Boolean },
-  };
+  });
 
-  export default defineComponent({
-    name: 'AppLogo',
-    props: props,
-    setup(props) {
   const { prefixCls } = useDesign('app-logo');
   const { getCollapsedShowTitle } = useMenuSetting();
   const userStore = useUserStore();
@@ -60,17 +56,6 @@
   function goHome() {
     go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
   }
-
-      return {
-        getAppLogoClass,
-        getTitleClass,
-        getCollapsedShowTitle,
-        goHome,
-        title,
-        prefixCls,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-app-logo';

src/components/Application/src/search/AppSearchFooter.vue

@@ -10,20 +10,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   import AppSearchKeyItem from './AppSearchKeyItem.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useI18n } from '/@/hooks/web/useI18n';
-  export default defineComponent({
-    name: 'AppSearchFooter',
-    components: { AppSearchKeyItem },
-    setup() {
   const { prefixCls } = useDesign('app-search-footer');
   const { t } = useI18n();
-      return { prefixCls, t };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-app-search-footer';

src/components/Application/src/search/AppSearchKeyItem.vue

@@ -3,11 +3,9 @@
     <Icon :icon="icon" />
   </span>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   import { Icon } from '/@/components/Icon';
-  export default defineComponent({
+  defineProps({
-    components: { Icon },
+    icon: String,
-    props: { icon: String },
   });
 </script>

src/components/Application/src/search/AppSearchModal.vue

@@ -56,32 +56,26 @@
     </transition>
   </Teleport>
 </template>
-<script lang="ts">
+
-  import { defineComponent, computed, unref, ref, watch, nextTick } from 'vue';
+<script lang="ts" setup>
+  import { computed, unref, ref, watch, nextTick } from 'vue';
   import { SearchOutlined } from '@ant-design/icons-vue';
   import AppSearchFooter from './AppSearchFooter.vue';
   import Icon from '/@/components/Icon';
-  import clickOutside from '/@/directives/clickOutside';
+  import vClickOutside from '/@/directives/clickOutside';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRefs } from '/@/hooks/core/useRefs';
   import { useMenuSearch } from './useMenuSearch';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useAppInject } from '/@/hooks/web/useAppInject';
 
-  const props = {
+  const props = defineProps({
     visible: { type: Boolean },
-  };
+  });
 
-  export default defineComponent({
+  const emit = defineEmits(['close']);
-    name: 'AppSearchModal',
+
-    components: { Icon, SearchOutlined, AppSearchFooter },
+  const scrollWrap = ref(null);
-    directives: {
-      clickOutside,
-    },
-    props,
-    emits: ['close'],
-    setup(props, { emit }) {
-      const scrollWrap = ref<ElRef>(null);
   const inputRef = ref<Nullable<HTMLElement>>(null);
 
   const { t } = useI18n();
@@ -117,24 +111,6 @@
     searchResult.value = [];
     emit('close');
   }
-
-      return {
-        t,
-        prefixCls,
-        getClass,
-        handleSearch,
-        searchResult,
-        activeIndex,
-        getIsNotData,
-        handleEnter,
-        setRefs,
-        scrollWrap,
-        handleMouseenter,
-        handleClose,
-        inputRef,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-app-search-modal';

src/views/sys/error-log/DetailModal.vue

@@ -6,7 +6,6 @@
 <script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { ErrorLogInfo } from '/#/store';
-  import { defineProps } from 'vue';
   import { BasicModal } from '/@/components/Modal/index';
   import { Description, useDescription } from '/@/components/Description/index';
   import { useI18n } from '/@/hooks/web/useI18n';

src/views/sys/iframe/index.vue

@@ -12,7 +12,7 @@
 </template>
 <script lang="ts" setup>
   import type { CSSProperties } from 'vue';
-  import { ref, unref, computed, defineProps } from 'vue';
+  import { ref, unref, computed } from 'vue';
   import { Spin } from 'ant-design-vue';
   import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
   import { propTypes } from '/@/utils/propTypes';

src/views/sys/login/Login.vue

@@ -62,7 +62,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, defineProps } from 'vue';
+  import { computed } from 'vue';
   import { AppLogo } from '/@/components/Application';
   import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
   import LoginForm from './LoginForm.vue';