fix: deep setter style

vueComponent · Mar 25, 2022 · 0f105eb · 0f105eb
1 parent 8ef3d2e
commit 0f105eb
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 38 deletions.
diff --git a/packages/pro-layout/examples/layouts/BasicLayout.vue b/packages/pro-layout/examples/layouts/BasicLayout.vue
@@ -4,6 +4,8 @@
     v-model:selectedKeys="baseState.selectedKeys"
     v-model:openKeys="baseState.openKeys"
     v-bind="state"
+    disable-content-margin
+    style="height: 100vh"
     :loading="loading"
     :breadcrumb="{ routes: breadcrumb }"
     iconfont-url="//at.alicdn.com/t/font_2804900_nzigh7z84gc.js"
@@ -64,9 +66,9 @@
 
     <!-- content begin -->
     <router-view v-slot="{ Component }">
-      <WaterMark :content="watermarkContent">
-        <component :is="Component" />
-      </WaterMark>
+      <!-- <WaterMark :content="watermarkContent"> -->
+      <component :is="Component" />
+      <!-- </WaterMark> -->
     </router-view>
   </pro-layout>
 </template>
@@ -115,8 +117,8 @@ export default defineComponent({
       splitMenus: true,
       // title: 'ProLayout',
       // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
-      navTheme: 'light',
-      layout: 'side',
+      navTheme: 'dark',
+      layout: 'mix',
       fixSiderbar: true,
       fixedHeader: true,
     })

diff --git a/packages/pro-layout/examples/router/index.ts b/packages/pro-layout/examples/router/index.ts
@@ -110,6 +110,12 @@ const routes: RouteRecordRaw[] = [
         meta: { title: 'Ant Design Vue 官网', icon: 'link-outlined', target: '_blank' },
         component: null,
       },
+      {
+        path: '/nested',
+        name: 'nested',
+        meta: { title: 'Nested Layout', icon: 'icon-antdesign' },
+        component: () => import('../views/NestedLayout.vue'),
+      },
     ],
   },
 ]

diff --git a/packages/pro-layout/examples/views/NestedLayout.vue b/packages/pro-layout/examples/views/NestedLayout.vue
@@ -0,0 +1,20 @@
+<template>
+  <pro-layout
+    nav-theme="light"
+    :header-render="false"
+    :split-menus="false"
+    :sider-width="160"
+    :menu-header-render="false"
+    :menu-data="menuData"
+  >
+    <p>11111111111111sfnuisdfbui</p>
+  </pro-layout>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { getMenuData, clearMenuItem } from '@ant-design-vue/pro-layout'
+
+const router = useRouter()
+const { menuData } = getMenuData(clearMenuItem(router.getRoutes()))
+</script>
diff --git a/packages/pro-layout/package.json b/packages/pro-layout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.2.0-rc.3",
+  "version": "3.2.0-rc.4",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",

diff --git a/packages/pro-layout/src/BasicLayout.tsx b/packages/pro-layout/src/BasicLayout.tsx
@@ -11,10 +11,12 @@ import {
   type PropType,
   type ExtractPropTypes,
   type DefineComponent,
+  watchEffect,
 } from 'vue'
 
 import 'ant-design-vue/es/layout/style'
 import { Layout } from 'ant-design-vue'
+import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject'
 import useMediaQuery from './hooks/useMediaQuery'
 
 import { defaultSettingProps } from './defaultSettings'
@@ -131,7 +133,9 @@ const ProLayout = defineComponent({
     'menuHeaderClick',
     'menuClick',
   ],
-  setup(props, { emit, slots }) {
+  setup(props, { emit, attrs, slots }) {
+    const { prefixCls } = useConfigInject('layout', {})
+
     const isTop = computed(() => props.layout === 'top')
     const hasSide = computed(() => props.layout === 'mix' || props.layout === 'side' || false)
     const hasSplitMenu = computed(() => props.layout === 'mix' && props.splitMenus)
@@ -182,9 +186,11 @@ const ProLayout = defineComponent({
     })
 
     // if is some layout children, don't need min height
-    if (props.isChildrenLayout || (props.contentStyle && props.contentStyle.minHeight)) {
-      genLayoutStyle.minHeight = 0
-    }
+    watchEffect(() => {
+      if (props.isChildrenLayout || (props.contentStyle && props.contentStyle.minHeight)) {
+        genLayoutStyle.minHeight = 0
+      }
+    })
 
     const headerRender = (
       p: BasicLayoutProps & {
@@ -286,19 +292,26 @@ const ProLayout = defineComponent({
         )
       )
 
-      const contentClassName = {
-        [`${baseClassName.value}-content`]: true,
-        [`${baseClassName.value}-has-header`]: headerDom,
-        [`${baseClassName.value}-content-disable-margin`]: props.disableContentMargin,
-      }
+      const contentClassName = computed(() => {
+        return {
+          [`${baseClassName.value}-content`]: true,
+          [`${baseClassName.value}-has-header`]: headerDom,
+          [`${baseClassName.value}-content-disable-margin`]: props.disableContentMargin,
+        }
+      })
 
       return (
         <>
           {pure ? (
             slots.default?.()
           ) : (
             <div class={className.value}>
-              <Layout class={baseClassName.value}>
+              <Layout
+                style={{
+                  minHeight: '100%',
+                  ...((attrs.style as CSSProperties) || {}),
+                }}
+              >
                 {(!isTop.value || isMobile.value) && (
                   <SiderMenuWrapper
                     {...restProps}
@@ -316,17 +329,17 @@ const ProLayout = defineComponent({
                     onMenuClick={onMenuClick}
                   />
                 )}
-                <Layout style={genLayoutStyle}>
+                <div style={genLayoutStyle} class={prefixCls.value}>
                   {headerDom.value}
                   <WrapContent
                     isChildrenLayout={props.isChildrenLayout}
-                    class={contentClassName}
-                    style={props.disableContentMargin ? undefined : props.contentStyle}
+                    class={contentClassName.value}
+                    style={props.contentStyle}
                   >
                     {props.loading ? <PageLoading /> : slots.default?.()}
                   </WrapContent>
                   {footerRender && footerRender(props)}
-                </Layout>
+                </div>
               </Layout>
             </div>
           )}

diff --git a/packages/pro-layout/src/WrapContent.tsx b/packages/pro-layout/src/WrapContent.tsx
@@ -16,23 +16,19 @@ export interface WrapContentProps {
 }
 
 export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slots, attrs }) => {
-  if (props.isChildrenLayout) {
-    return slots.default?.()
-  }
-  const { getPrefixCls } = toRefs(useRouteContext())
-  const prefixCls = getPrefixCls.value('basicLayout')
-  const classNames = computed(() => {
-    return {
-      [`${prefixCls}-content`]: true,
-      [`${prefixCls}-has-header`]: true,
-    }
-  })
+  // if (props.isChildrenLayout) {
+  //   return slots.default?.()
+  // }
+  // const { getPrefixCls } = toRefs(useRouteContext())
+  // const prefixCls = getPrefixCls.value('basicLayout')
+  // const classNames = computed(() => {
+  //   return {
+  //     [`${prefixCls}-content`]: true,
+  //     [`${prefixCls}-has-header`]: true,
+  //   }
+  // })
 
-  return (
-    <Content class={classNames.value} {...attrs}>
-      {slots.default?.()}
-    </Content>
-  )
+  return <Content {...attrs}>{slots.default?.()}</Content>
 }
 
 WrapContent.inheritAttrs = false

diff --git a/packages/pro-layout/src/components/SiderMenu/SiderMenu.tsx b/packages/pro-layout/src/components/SiderMenu/SiderMenu.tsx
@@ -162,9 +162,9 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
   const classNames = computed(() => {
     return {
       [baseClassName]: true,
-      [`${baseClassName}-${sTheme.value}`]: true,
-      [`${baseClassName}-${props.layout}`]: true,
       [`${baseClassName}-fixed`]: context.fixSiderbar,
+      [`${baseClassName}-${sTheme.value}`]: true, // theme !== 'dark'
+      [`${baseClassName}-layout-${props.layout}`]: props.layout && !props.isMobile,
     }
   })