perf(logo): optimize logo code

vben
1 parent 69af37ec
Showing 10 changed files with 56 additions and 46 deletions
package.json
src/components/Breadcrumb/Breadcrumb.vue
src/components/Menu/src/SearchInput.vue
src/layouts/Logo.vue
src/layouts/default/LayoutMenu.tsx
src/layouts/default/index.less
src/settings/projectSetting.ts
src/types/config.d.ts
src/views/sys/login/Login.vue
yarn.lock
@@ -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 .",
@@ -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);
@@ -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,
 <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;
      });
     }
   }
@@ -196,7 +196,14 @@ export default defineComponent({
     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 @@ export default defineComponent({
           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 @@ export default defineComponent({
           {{
             header: () =>
               isShowLogo && (
-                <Logo
-                  showTitle={!collapsed}
-                  class={[`layout-menu__logo`, collapsed ? 'justify-center' : '', themeData]}
-                />
+                <Logo showTitle={!collapsed} class={[`layout-menu__logo`, themeData]} />
               ),
           }}
         </BasicMenu>
@@ -42,7 +42,7 @@
   .layout-menu {
     &__logo {
       height: @header-height;
-      padding: 10px 4px;
+      padding: 10px 4px 10px 10px;
  
       img {
         width: @logo-width;
@@ -66,6 +66,8 @@ const setting: ProjectConfig = {
     split: false,
     // 顶部菜单布局
     topMenuAlign: 'center',
+    // 折叠菜单时候隐藏搜索框
+    collapsedShowSearch: true,
   },
   // 消息配置
   messageSetting: {
@@ -21,6 +21,7 @@ export interface MenuSetting {
   type: MenuTypeEnum;
   theme: MenuThemeEnum;
   topMenuAlign: 'start' | 'center' | 'end';
+  collapsedShowSearch: boolean;
 }
  
 export interface MultiTabsSetting {
@@ -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,
       };
     },
   });
@@ -3331,9 +3331,9 @@ es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
     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,11 +3354,16 @@ esbuild-register@^1.1.0:
     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"
   resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -3557,22 +3562,7 @@ eventemitter3@^4.0.0:
   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,7 +4820,7 @@ jest-worker@^24.9.0:
     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==
@@ -4839,6 +4829,15 @@ jest-worker@^26.0.0, jest-worker@^26.2.1:
     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"
+    supports-color "^7.0.0"
+
 joycon@^2.2.5:
   version "2.2.5"
   resolved "https://registry.npmjs.org/joycon/-/joycon-2.2.5.tgz#8d4cf4cbb2544d7b7583c216fcdfec19f6be1615"
@@ -6902,9 +6901,9 @@ rollup-plugin-visualizer@^4.1.2:
     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"