perf: optimize components and add comments

Vben

2021-06-09 55e9d9fc2953643cec95c74b6ed34b0e68641fb6

 src/components/Application/src/AppLogo.vue

@@ -1,69 +1,91 @@
<!--
 * @Author: Vben
 * @Description: logo component
-->
<template>
  <div
    class="app-logo anticon"
    :class="{ theme, 'collapsed-show-title': getCollapsedShowTitle }"
    @click="handleGoHome"
  >
    <img src="/@/assets/images/logo.png" />
    <div class="app-logo__title ml-2 ellipsis" v-show="showTitle">{{ globSetting.title }}</div>
  <div class="anticon" :class="getAppLogoClass" @click="goHome">
    <img src="../../../assets/images/logo.png" />
    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
      {{ title }}
    </div>
  </div>
</template>
<script lang="ts">
  import type { PropType } from 'vue';
  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';

  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: {
        type: String as PropType<string>,
      },
      showTitle: {
        type: Boolean,
        default: true,
      },
    },
    setup() {
    props: props,
    setup(props) {
      const { prefixCls } = useDesign('app-logo');
      const { getCollapsedShowTitle } = useMenuSetting();
      const globSetting = useGlobSetting();
      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,
        globSetting,
        getAppLogoClass,
        getTitleClass,
        getCollapsedShowTitle,
        goHome,
        title,
        prefixCls,
      };
    },
  });
</script>
<style lang="less" scoped>
  @import (reference) '../../../design/index.less';
  @prefix-cls: ~'@{namespace}-app-logo';

  .app-logo {
  .@{prefix-cls} {
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-left: 7px;
    cursor: pointer;

    &.collapsed-show-title {
      padding-left: 20px;
    }
    transition: all 0.2s ease;

    &.light {
      border-bottom: 1px solid @border-color-base;
    }

    &.collapsed-show-title {
      padding-left: 20px;
    }

    &.light &__title {
@@ -75,14 +97,9 @@
    }

    &__title {
      font-size: 18px;
      font-size: 16px;
      font-weight: 700;
      opacity: 0;
      transition: all 0.5s;

      .respond-to(medium,{
       opacity: 1;
      });
    }
  }
</style>