perf(logo): optimize logo code

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

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 @@ const setting: ProjectConfig = {
     split: false,
     // 顶部菜单布局
     topMenuAlign: 'center',
+    // 折叠菜单时候隐藏搜索框
+    collapsedShowSearch: true,
   },
   // 消息配置
   messageSetting: {

src/types/config.d.ts

@@ -21,6 +21,7 @@ export interface MenuSetting {
   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,
       };
     },
   });