fix(pro:layout): the dom still renders without the logo (#1348)

packages/pro/layout/__tests__/__snapshots__/layoutPro.spec.ts.snap

@@ -3,9 +3,7 @@
 exports[`ProLayout > render work 1`] = `
 "<section class=\\"ix-layout ix-layout-fixed-header ix-layout-fixed-sider ix-pro-layout ix-pro-layout-is-both\\">
   <header class=\\"ix-layout-header ix-pro-layout-header ix-pro-layout-header-dark\\">
-    <div class=\\"ix-pro-layout-logo\\">
-      <!---->
-    </div>
+    <!---->
     <div class=\\"ix-pro-layout-header-content\\">
       <ul class=\\"ix-menu ix-menu-dark ix-menu-horizontal\\">
         <li class=\\"ix-menu-item ix-menu-level-1 ix-menu-item-selected\\" aria-label=\\"Sub Menu 1\\" aria-selected=\\"true\\" role=\\"menuitem\\"><i class=\\"ix-icon ix-icon-setting\\" role=\\"img\\" aria-label=\\"setting\\"></i><span>Sub Menu 1</span>

packages/pro/layout/__tests__/layoutPro.spec.ts

@@ -217,6 +217,33 @@ describe('ProLayout', () => {
     expect(wrapper.find('.ix-pro-layout-sider').exists()).toBe(true)
   })
 
+  test('logo work', async () => {
+    const wrapper = ProLayoutMount()
+
+    expect(wrapper.find('.ix-pro-layout-logo').exists()).toBe(false)
+
+    await wrapper.setProps({
+      logo: {
+        image: '../assets/1.png',
+        title: 'Pro Layout',
+      },
+    })
+
+    expect(wrapper.find('.ix-pro-layout-logo').exists()).toBe(true)
+
+    await wrapper.setProps({
+      type: 'sider',
+    })
+
+    expect(wrapper.find('.ix-pro-layout-logo').exists()).toBe(true)
+
+    await wrapper.setProps({
+      logo: null,
+    })
+
+    expect(wrapper.find('.ix-pro-layout-logo').exists()).toBe(false)
+  })
+
   test('slots work', async () => {
     const wrapper = ProLayoutMount({
       props: { type: 'both' },
@@ -230,11 +257,38 @@ describe('ProLayout', () => {
       },
     })
 
-    expect(wrapper.find('.ix-pro-layout-logo').find('#logo').exists()).toBe(true)
-    expect(wrapper.find('.ix-pro-layout-header-extra').find('#extra').exists()).toBe(true)
-    expect(wrapper.find('.ix-pro-layout-sider-header').find('#siderHeader').exists()).toBe(true)
-    expect(wrapper.find('.ix-pro-layout-sider-footer').find('#siderFooter').exists()).toBe(true)
-    expect(wrapper.find('.ix-pro-layout-content').find('#default').exists()).toBe(true)
-    expect(wrapper.find('.ix-pro-layout-footer').find('#footer').exists()).toBe(true)
+    expect(wrapper.find('.ix-pro-layout-header .ix-pro-layout-logo #logo').exists()).toBe(true)
+    expect(wrapper.find('.ix-pro-layout-sider .ix-pro-layout-logo').exists()).toBe(false)
+    expect(wrapper.find('.ix-pro-layout-header-extra #extra').exists()).toBe(true)
+    expect(wrapper.find('.ix-pro-layout-sider-header #siderHeader').exists()).toBe(true)
+    expect(wrapper.find('.ix-pro-layout-sider-footer #siderFooter').exists()).toBe(true)
+    expect(wrapper.find('.ix-pro-layout-content #default').exists()).toBe(true)
+    expect(wrapper.find('.ix-pro-layout-footer #footer').exists()).toBe(true)
+
+    await wrapper.setProps({
+      type: 'sider',
+    })
+
+    expect(wrapper.find('.ix-pro-layout-header .ix-pro-layout-logo').exists()).toBe(false)
+    expect(wrapper.find('.ix-pro-layout-sider .ix-pro-layout-logo #logo').exists()).toBe(true)
+
+    const wrapper2 = ProLayoutMount({
+      props: { type: 'both' },
+      slots: {
+        siderHeader: () => h('div', { id: 'siderHeader' }),
+        siderFooter: () => h('div', { id: 'siderFooter' }),
+        default: () => h('div', { id: 'default' }),
+        footer: () => h('div', { id: 'footer' }),
+      },
+    })
+
+    expect(wrapper2.find('.ix-pro-layout-header .ix-pro-layout-logo').exists()).toBe(false)
+    expect(wrapper2.find('.ix-pro-layout-header-extra').exists()).toBe(false)
+
+    await wrapper2.setProps({
+      type: 'sider',
+    })
+
+    expect(wrapper2.find('.ix-pro-layout-sider .ix-pro-layout-logo').exists()).toBe(false)
   })
 })

packages/pro/layout/docs/Api.zh.md

@@ -9,13 +9,22 @@
 | `v-model:collapsed` | 侧边栏折叠状态 | `boolean` | `false` | --- | --- |
 | `fixed` | 顶部栏和侧边栏是否固定 | `boolean \| { sider: boolean, header: boolean }` | `true` | - | - |
 | `headerMenu` | 顶部菜单组件的更多配置 | `MenuProps` | - | - | 例如：`getKey` |
+| `logo` | 自定义 logo | `ProLayoutLogo` | - | - | 一般用于展示 logo, 默认渲染在顶部的左侧区域，当 `type='sider'` 时，渲染在侧边栏的顶部 |
 | `menus` | 菜单数据 | `MenuData[]` | `[]` | - | - |
 | `sider` | 侧边栏的更多配置 | `LayoutSiderProps` | - | - | 例如：`collapsed`,`breakpoint`, `pointer` 等配置 |
 | `siderMenu` | 侧边栏菜单组件的更多配置 | `MenuProps` | - | - | 例如：`getKey`, `indent` 和 `mode` |
 | `theme` | 主题 | `'light' \| 'dark' \| { sider: 'light' \| 'dark', header: 'light' \| 'dark' }` | `{ sider: 'light', header: 'dark' }` | - | - |
 | `type` | 布局类型 | `'both' \| 'mixin' \| 'header' \| 'sider'` | `both` | - | 参见示例：[布局类型](#pro-layout-demo-Type) |
 | `onMenuClick` | 点击菜单回调 | `(options: MenuClickOptions) => void`| - | -  | - |
 
+```ts
+interface ProLayoutLogo {
+  image: string | VNode
+  title: string
+  link?: string
+}
+```
+
 #### ProLayoutSlots
 
 | 名称 | 说明 | 参数类型 | 备注 |

packages/pro/layout/src/contents/Logo.tsx

@@ -37,7 +37,8 @@ export default defineComponent({
           </a>
         )
       }
-      return <div class={`${mergedPrefixCls.value}-logo`}>{logoNode}</div>
+
+      return logoNode && <div class={`${mergedPrefixCls.value}-logo`}>{logoNode}</div>
     }
   },
 })

packages/pro/layout/src/types.ts

@@ -76,7 +76,7 @@ export type ProLayoutInstance = InstanceType<DefineComponent<ProLayoutProps>>
 export interface ProLayoutLogo {
   image: string | VNode
   title: string
-  link: string
+  link?: string
 }
 export type ProLayoutTheme = MenuTheme | { header: MenuTheme; sider: MenuTheme }
 export type ProLayoutType = 'header' | 'sider' | 'mixin' | 'both'