refactor(application): change to setup syntax

vben

2021-08-13 2f6d133b965553ba63e4c121c3a6688d25a94225

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">
  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';

 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,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 getLocaleText = computed(() => {
        const key = selectedKeys.value[0];
        if (!key) {
          return '';
        }
        return localeList.find((item) => item.event === key)?.text;
      });

      watchEffect(() => {
        selectedKeys.value = [unref(getLocale)];
      });

      async function toggleLocale(lang: LocaleType | string) {
        await changeLocale(lang as LocaleType);
        selectedKeys.value = [lang as string];
        props.reload && location.reload();
      }

      function handleMenuEvent(menu: DropMenu) {
        if (unref(getLocale) === menu.event) {
          return;
        }
        toggleLocale(menu.event as string);
      }

      return { localeList, handleMenuEvent, selectedKeys, getLocaleText };
    },
  });

  const selectedKeys = ref<string[]>([]);

  const { changeLocale, getLocale } = useLocale();

  const getLocaleText = computed(() => {
    const key = selectedKeys.value[0];
    if (!key) {
      return '';
    }
    return localeList.find((item) => item.event === key)?.text;
  });

  watchEffect(() => {
    selectedKeys.value = [unref(getLocale)];
  });

  async function toggleLocale(lang: LocaleType | string) {
    await changeLocale(lang as LocaleType);
    selectedKeys.value = [lang as string];
    props.reload && location.reload();
  }

  function handleMenuEvent(menu: DropMenu) {
    if (unref(getLocale) === menu.event) {
      return;
    }
    toggleLocale(menu.event as string);
  }
</script>

<style lang="less">

 src/components/Application/src/AppLogo.vue

@@ -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,
        },
      ]);

      function goHome() {
        go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
      }

      return {
        getAppLogoClass,
        getTitleClass,
        getCollapsedShowTitle,
        goHome,
        title,
        prefixCls,
      };
    },
  });

  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,
    },
  ]);

  function goHome() {
    go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
  }
</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">
  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';

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

@@ -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>

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

@@ -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');
      }

      return {
        t,
        prefixCls,
        getClass,
        handleSearch,
        searchResult,
        activeIndex,
        getIsNotData,
        handleEnter,
        setRefs,
        scrollWrap,
        handleMouseenter,
        handleClose,
        inputRef,
      };
    },
  });

  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();

  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';

 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';