perf(logo): optimize logo code

vben

2020-11-03 e79e540b48be80fb08b67a99e64bede3816b2c9e

perf(logo): optimize logo code

 package.json

@@ -4,7 +4,7 @@
  "scripts": {
    "bootstrap": "yarn install",
    "serve": "esno ./build/script/preserve.ts && cross-env NODE_ENV=development vite",
    "build": " rimraf dist && cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
    "build": "cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
    "build:site": "cross-env SITE=true npm run build ",
    "build:no-cache": "yarn  clean:cache && npm run build",
    "typecheck": "typecheck .",

 src/components/Breadcrumb/Breadcrumb.vue

@@ -73,7 +73,7 @@

      &.is-link,
      a {
        font-weight: 700;
        font-weight: 500;
        color: @text-color-base;
        text-decoration: none;
        transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

 src/components/Menu/src/SearchInput.vue

@@ -48,7 +48,7 @@
      const searchClass = computed(() => {
        const cls: string[] = [];
        cls.push(props.theme ? `menu-search-input__search--${props.theme}` : '');
        // cls.push(props.collapsed ? 'hide-search-icon' : '');
        cls.push(props.collapsed ? 'hide-search-icon' : '');
        return cls;
      });

@@ -66,12 +66,13 @@
  .menu-search-input {
    margin: 12px 8px;

    // &.hide-search-icon {
    //   .ant-input,
    //   .ant-input-suffix {
    //     opacity: 0;
    //   }
    // }
    &.hide-search-icon {
      .ant-input,
      .ant-input-suffix {
        opacity: 0;
        transition: all 0.5s;
      }
    }

    &__search--dark {
      .ant-input-affix-wrapper,

 src/layouts/Logo.vue

@@ -1,5 +1,5 @@
<template>
  <div class="app-logo" @click="handleGoHome" :style="wrapStyle">
  <div class="app-logo anticon" @click="handleGoHome" :style="wrapStyle">
    <img :src="logo" />
    <div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
  </div>
@@ -79,14 +79,15 @@
    align-items: center;
    padding-left: 16px;
    cursor: pointer;
    justify-content: center;
    // justify-content: center;

    .logo-title {
      display: none;
      font-size: 16px;
      font-size: 18px;
      font-weight: 400;
      opacity: 0;
      transition: all 0.5s;
      .respond-to(medium,{
       display: block;
       opacity: 1;
     });
    }
  }

 src/layouts/default/LayoutMenu.tsx

@@ -196,7 +196,14 @@
    return () => {
      const {
        showLogo,
        menuSetting: { type: menuType, mode, theme, collapsed, collapsedShowTitle },
        menuSetting: {
          type: menuType,
          mode,
          theme,
          collapsed,
          collapsedShowTitle,
          collapsedShowSearch,
        },
      } = unref(getProjectConfigRef);

      const isSidebarType = menuType === MenuTypeEnum.SIDEBAR;
@@ -212,7 +219,7 @@
          collapsedShowTitle={collapsedShowTitle}
          theme={themeData}
          showLogo={isShowLogo}
          search={unref(showSearchRef) && !collapsed}
          search={unref(showSearchRef) && (collapsedShowSearch ? true : !collapsed)}
          items={unref(menusRef)}
          flatItems={unref(flatMenusRef)}
          onClickSearchInput={handleClickSearchInput}
@@ -222,10 +229,7 @@
          {{
            header: () =>
              isShowLogo && (
                <Logo
                  showTitle={!collapsed}
                  class={[`layout-menu__logo`, collapsed ? 'justify-center' : '', themeData]}
                />
                <Logo showTitle={!collapsed} class={[`layout-menu__logo`, themeData]} />
              ),
          }}
        </BasicMenu>

 src/layouts/default/index.less

@@ -42,7 +42,7 @@
  .layout-menu {
    &__logo {
      height: @header-height;
      padding: 10px 4px;
      padding: 10px 4px 10px 10px;

      img {
        width: @logo-width;

 src/settings/projectSetting.ts

@@ -66,6 +66,8 @@
    split: false,
    // 顶部菜单布局
    topMenuAlign: 'center',
    // 折叠菜单时候隐藏搜索框
    collapsedShowSearch: true,
  },
  // 消息配置
  messageSetting: {

 src/types/config.d.ts

@@ -21,6 +21,7 @@
  type: MenuTypeEnum;
  theme: MenuThemeEnum;
  topMenuAlign: 'start' | 'center' | 'end';
  collapsedShowSearch: boolean;
}

export interface MultiTabsSetting {

 src/views/sys/login/Login.vue

@@ -5,7 +5,7 @@
      <div class="login-form mx-6">
        <div class="login-form__content px-2 py-10">
          <header>
            <img src="/@/assets/images/logo.png" class="mr-4" />
            <img :src="logo" class="mr-4" />
            <h1>{{ title }}</h1>
          </header>

@@ -74,6 +74,7 @@
  // import { appStore } from '/@/store/modules/app';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useSetting } from '/@/hooks/core/useSetting';
  import logo from '/@/assets/images/logo.png';

  export default defineComponent({
    components: {
@@ -149,6 +150,7 @@
        autoLogin: autoLoginRef,
        // openLoginVerify: openLoginVerifyRef,
        title: globSetting && globSetting.title,
        logo,
      };
    },
  });

 yarn.lock

@@ -3331,9 +3331,9 @@
    string.prototype.trimstart "^1.0.1"

es-module-lexer@^0.3.25:
  version "0.3.25"
  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.25.tgz#24a1abcb9c5dc96923a8e42be033b801f788de06"
  integrity sha512-H9VoFD5H9zEfiOX2LeTWDwMvAbLqcAyA2PIb40TOAvGpScOjit02oTGWgIh+M0rx2eJOKyJVM9wtpKFVgnyC3A==
  version "0.3.26"
  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.26.tgz#7b507044e97d5b03b01d4392c74ffeb9c177a83b"
  integrity sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA==

es-to-primitive@^1.2.1:
  version "1.2.1"
@@ -3354,10 +3354,15 @@
    source-map-support "^0.5.19"
    strip-json-comments "^3.1.1"

esbuild@^0.7.17, esbuild@^0.7.19, esbuild@^0.7.21:
esbuild@^0.7.17, esbuild@^0.7.19:
  version "0.7.21"
  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.7.21.tgz#e93f9d7e673cd5fcab2aab7774d489a0f680d657"
  integrity sha512-qEnJdj+6Mdpt5kZwwCqO6PDNXSHNDDOPbnF4pduS3nub1v5GfgZfi8ysZ2DN4Q65WWgx6hz1a237ZETEHZpR0Q==

esbuild@^0.7.21:
  version "0.7.22"
  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.7.22.tgz#9149b903f8128b7c45a754046c24199d76bbe08e"
  integrity sha512-B43SYg8LGWYTCv9Gs0RnuLNwjzpuWOoCaZHTWEDEf5AfrnuDMerPVMdCEu7xOdhFvQ+UqfP2MGU9lxEy0JzccA==

escalade@^3.1.0, escalade@^3.1.1:
  version "3.1.1"
@@ -3557,22 +3562,7 @@
  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==

execa@^4.0.3:
  version "4.0.3"
  resolved "https://registry.npmjs.org/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
  integrity sha512-WFDXGHckXPWZX19t1kCsXzOpqX9LWYNqn4C+HqZlk/V0imTkzJZqf87ZBhvpHaftERYknpk0fjSylnXVlVgI0A==
  dependencies:
    cross-spawn "^7.0.0"
    get-stream "^5.0.0"
    human-signals "^1.1.1"
    is-stream "^2.0.0"
    merge-stream "^2.0.0"
    npm-run-path "^4.0.0"
    onetime "^5.1.0"
    signal-exit "^3.0.2"
    strip-final-newline "^2.0.0"

execa@^4.1.0:
execa@^4.0.3, execa@^4.1.0:
  version "4.1.0"
  resolved "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
@@ -4830,10 +4820,19 @@
    merge-stream "^2.0.0"
    supports-color "^6.1.0"

jest-worker@^26.0.0, jest-worker@^26.2.1:
jest-worker@^26.0.0:
  version "26.6.1"
  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.1.tgz#c2ae8cde6802cc14056043f997469ec170d9c32a"
  integrity sha512-R5IE3qSGz+QynJx8y+ICEkdI2OJ3RJjRQVEyCcFAd3yVhQSEtquziPO29Mlzgn07LOVE8u8jhJ1FqcwegiXWOw==
  dependencies:
    "@types/node" "*"
    merge-stream "^2.0.0"
    supports-color "^7.0.0"

jest-worker@^26.2.1:
  version "26.6.2"
  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
  dependencies:
    "@types/node" "*"
    merge-stream "^2.0.0"
@@ -6902,9 +6901,9 @@
    yargs "^16.0.3"

rollup-plugin-vue@^6.0.0-beta.10:
  version "6.0.0-beta.10"
  resolved "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.10.tgz#66d9b9a8dd2d085267d1cc398ea0113360879ac1"
  integrity sha512-8TZJmROiSRjWoHRR6id0/ktOBOUGuI302xDBq4YBiA/tnnXdoY3oFGtvRWzT5ldX0jTJ8QX40rrJOw2SvcWwxQ==
  version "6.0.0-beta.11"
  resolved "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.11.tgz#fdbc6b7484a361ef8c5e8009cef4a6bd45435013"
  integrity sha512-osqLkFc7N76TOI0CeW0BOujlMFsMIoytyTRVUivaeYSMponNfk1iSuqyoeciUB3EjFqyL/dTTFPi+7rhaAm73w==
  dependencies:
    debug "^4.1.1"
    hash-sum "^2.0.0"