refactor(application): change to setup syntax

vben
1 parent 9035fd19
Showing 9 changed files with 118 additions and 191 deletions
src/components/Application/src/AppDarkModeToggle.vue
src/components/Application/src/AppLocalePicker.vue
src/components/Application/src/AppLogo.vue
src/components/Application/src/search/AppSearchFooter.vue
src/components/Application/src/search/AppSearchKeyItem.vue
src/components/Application/src/search/AppSearchModal.vue
src/views/sys/error-log/DetailModal.vue
src/views/sys/iframe/index.vue
src/views/sys/login/Login.vue
@@ -5,8 +5,8 @@
     <SvgIcon size="14" name="moon" />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, computed, unref } from 'vue';
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
@@ -14,39 +14,25 @@
   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();
+  const { prefixCls } = useDesign('dark-switch');
+  const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
-      const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
-      const getClass = computed(() => [
-        prefixCls,
-        {
-          [`${prefixCls}--dark`]: unref(isDark),
-        },
-      ]);
-
-      function toggleDarkMode() {
-        const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
-        setDarkMode(darkMode);
-        updateDarkTheme(darkMode);
-        updateHeaderBgColor();
-        updateSidebarBgColor();
-      }
-
-      return {
-        getClass,
-        isDark,
-        prefixCls,
-        toggleDarkMode,
-        getShowDarkModeToggle,
-      };
+  const getClass = computed(() => [
+    prefixCls,
+    {
+      [`${prefixCls}--dark`]: unref(isDark),
     },
-  });
+  ]);
+
+  function toggleDarkMode() {
+    const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
+    setDarkMode(darkMode);
+    updateDarkTheme(darkMode);
+    updateHeaderBgColor();
+    updateSidebarBgColor();
+  }
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-dark-switch';
@@ -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,45 +35,36 @@
      * 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();
+  const selectedKeys = ref<string[]>([]);
-      const getLocaleText = computed(() => {
-        const key = selectedKeys.value[0];
-        if (!key) {
-          return '';
-        }
-        return localeList.find((item) => item.event === key)?.text;
-      });
+  const { changeLocale, getLocale } = useLocale();
-      watchEffect(() => {
-        selectedKeys.value = [unref(getLocale)];
-      });
+  const getLocaleText = computed(() => {
+    const key = selectedKeys.value[0];
+    if (!key) {
+      return '';
+    }
+    return localeList.find((item) => item.event === key)?.text;
+  });
-      async function toggleLocale(lang: LocaleType | string) {
-        await changeLocale(lang as LocaleType);
-        selectedKeys.value = [lang as string];
-        props.reload && location.reload();
-      }
+  watchEffect(() => {
+    selectedKeys.value = [unref(getLocale)];
+  });
-      function handleMenuEvent(menu: DropMenu) {
-        if (unref(getLocale) === menu.event) {
-          return;
-        }
-        toggleLocale(menu.event as string);
-      }
+  async function toggleLocale(lang: LocaleType | string) {
+    await changeLocale(lang as LocaleType);
+    selectedKeys.value = [lang as string];
+    props.reload && location.reload();
+  }
-      return { localeList, handleMenuEvent, selectedKeys, getLocaleText };
-    },
-  });
+  function handleMenuEvent(menu: DropMenu) {
+    if (unref(getLocale) === menu.event) {
+      return;
+    }
+    toggleLocale(menu.event as string);
+  }
 </script>
 <style lang="less">
@@ -10,8 +10,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, computed, unref } from 'vue';
+<script lang="ts" setup>
+  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,45 +32,30 @@
      * 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();
-      const { title } = useGlobSetting();
-      const go = useGo();
-
-      const getAppLogoClass = computed(() => [
-        prefixCls,
-        props.theme,
-        { 'collapsed-show-title': unref(getCollapsedShowTitle) },
-      ]);
+  });
-      const getTitleClass = computed(() => [
-        `${prefixCls}__title`,
-        {
-          'xs:opacity-0': !props.alwaysShowTitle,
-        },
-      ]);
+  const { prefixCls } = useDesign('app-logo');
+  const { getCollapsedShowTitle } = useMenuSetting();
+  const userStore = useUserStore();
+  const { title } = useGlobSetting();
+  const go = useGo();
-      function goHome() {
-        go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
-      }
+  const getAppLogoClass = computed(() => [
+    prefixCls,
+    props.theme,
+    { 'collapsed-show-title': unref(getCollapsedShowTitle) },
+  ]);
-      return {
-        getAppLogoClass,
-        getTitleClass,
-        getCollapsedShowTitle,
-        goHome,
-        title,
-        prefixCls,
-      };
+  const getTitleClass = computed(() => [
+    `${prefixCls}__title`,
+    {
+      'xs:opacity-0': !props.alwaysShowTitle,
     },
-  });
+  ]);
+
+  function goHome() {
+    go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
+  }
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-app-logo';
@@ -10,20 +10,12 @@
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   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 };
-    },
-  });
+  const { prefixCls } = useDesign('app-search-footer');
+  const { t } = useI18n();
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-app-search-footer';
@@ -3,11 +3,9 @@
     <Icon :icon="icon" />
   </span>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { Icon } from '/@/components/Icon';
-  export default defineComponent({
-    components: { Icon },
-    props: { icon: String },
+  defineProps({
+    icon: String,
   });
 </script>
@@ -56,85 +56,61 @@
     </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({
-    name: 'AppSearchModal',
-    components: { Icon, SearchOutlined, AppSearchFooter },
-    directives: {
-      clickOutside,
-    },
-    props,
-    emits: ['close'],
-    setup(props, { emit }) {
-      const scrollWrap = ref<ElRef>(null);
-      const inputRef = ref<Nullable<HTMLElement>>(null);
-
-      const { t } = useI18n();
-      const { prefixCls } = useDesign('app-search-modal');
-      const [refs, setRefs] = useRefs();
-      const { getIsMobile } = useAppInject();
-
-      const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
-        useMenuSearch(refs, scrollWrap, emit);
-
-      const getIsNotData = computed(() => !keyword || unref(searchResult).length === 0);
-
-      const getClass = computed(() => {
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--mobile`]: unref(getIsMobile),
-          },
-        ];
-      });
-
-      watch(
-        () => props.visible,
-        (visible: boolean) => {
-          visible &&
-            nextTick(() => {
-              unref(inputRef)?.focus();
-            });
-        }
-      );
+  });
-      function handleClose() {
-        searchResult.value = [];
-        emit('close');
-      }
+  const emit = defineEmits(['close']);
+
+  const scrollWrap = ref(null);
+  const inputRef = ref<Nullable<HTMLElement>>(null);
+
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('app-search-modal');
+  const [refs, setRefs] = useRefs();
+  const { getIsMobile } = useAppInject();
-      return {
-        t,
-        prefixCls,
-        getClass,
-        handleSearch,
-        searchResult,
-        activeIndex,
-        getIsNotData,
-        handleEnter,
-        setRefs,
-        scrollWrap,
-        handleMouseenter,
-        handleClose,
-        inputRef,
-      };
-    },
+  const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
+    useMenuSearch(refs, scrollWrap, emit);
+
+  const getIsNotData = computed(() => !keyword || unref(searchResult).length === 0);
+
+  const getClass = computed(() => {
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--mobile`]: unref(getIsMobile),
+      },
+    ];
   });
+
+  watch(
+    () => props.visible,
+    (visible: boolean) => {
+      visible &&
+        nextTick(() => {
+          unref(inputRef)?.focus();
+        });
+    }
+  );
+
+  function handleClose() {
+    searchResult.value = [];
+    emit('close');
+  }
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-app-search-modal';
@@ -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';
@@ -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';
@@ -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';