perf: optimize components and add comments

Vben

2021-06-09 55e9d9fc2953643cec95c74b6ed34b0e68641fb6

 src/components/Application/src/AppLogo.vue

@@ -3,65 +3,69 @@
 * @Description: logo component
-->
<template>
  <div
    class="anticon"
    :class="[prefixCls, theme, { 'collapsed-show-title': getCollapsedShowTitle }]"
    @click="handleGoHome"
  >
  <div class="anticon" :class="getAppLogoClass" @click="goHome">
    <img src="../../../assets/images/logo.png" />
    <div
      class="ml-2 truncate md:opacity-100"
      :class="[
        `${prefixCls}__title`,
        {
          'xs:opacity-0': !alwaysShowTitle,
        },
      ]"
      v-show="showTitle"
    >
    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
      {{ title }}
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  import { defineComponent, computed, unref } from 'vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useGo } from '/@/hooks/web/usePage';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';

  import { PageEnum } from '/@/enums/pageEnum';
  import { propTypes } from '/@/utils/propTypes';

  const props = {
    /**
     * The theme of the current parent component
     */
    theme: { type: String, validator: (v) => ['light', 'dark'].includes(v) },
    /**
     * Whether to show title
     */
    showTitle: { type: Boolean, default: true },
    /**
     * The title is also displayed when the menu is collapsed
     */
    alwaysShowTitle: { type: Boolean },
  };

  export default defineComponent({
    name: 'AppLogo',
    props: {
      /**
       * The theme of the current parent component
       */
      theme: propTypes.oneOf(['light', 'dark']),
      // Whether to show title
      showTitle: propTypes.bool.def(true),
      alwaysShowTitle: propTypes.bool.def(false),
    },
    setup() {
    props: props,
    setup(props) {
      const { prefixCls } = useDesign('app-logo');
      const { getCollapsedShowTitle } = useMenuSetting();

      const { title } = useGlobSetting();

      const go = useGo();

      function handleGoHome(): void {
      const getAppLogoClass = computed(() => [
        prefixCls,
        props.theme,
        { 'collapsed-show-title': unref(getCollapsedShowTitle) },
      ]);

      const getTitleClass = computed(() => [
        `${prefixCls}__title`,
        {
          'xs:opacity-0': !props.alwaysShowTitle,
        },
      ]);

      function goHome() {
        go(PageEnum.BASE_HOME);
      }

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