feat: layout mobile

ColeWang · Aug 2, 2024 · dedb4ed · dedb4ed
1 parent 591df69
commit dedb4ed
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 32 deletions.
diff --git a/packages/components/base-field/BaseField.jsx b/packages/components/base-field/BaseField.jsx
@@ -180,7 +180,7 @@ export default defineComponent({
                 ...fieldProps,
                 value: inputValue,
                 placeholder: placeholder,
-                'onUpdate:value': onUpdateValue
+                ['onUpdate:value']: onUpdateValue
             }
             const fieldRenderProps = {
                 ...props,

diff --git a/packages/components/base-field/__tests__/BaseField.test.jsx b/packages/components/base-field/__tests__/BaseField.test.jsx
@@ -184,7 +184,7 @@ describe('BaseField', () => {
         it(`emits update:value event when switch changes`, async () => {
             const updateValue = vi.fn()
             const wrapper = mount(BaseField, {
-                props: { valueType: 'switch', fieldProps: { 'onUpdate:value': updateValue } }
+                props: { valueType: 'switch', fieldProps: { ['onUpdate:value']: updateValue } }
             })
             await wrapper.find('button').trigger('click')
             expect(updateValue).toHaveBeenCalledWith(true)
@@ -467,7 +467,7 @@ describe('BaseField', () => {
     it(`emits update:value event when input changes`, async () => {
         const updateValue = vi.fn()
         const wrapper = mount(BaseField, {
-            props: { fieldProps: { 'onUpdate:value': updateValue } }
+            props: { fieldProps: { ['onUpdate:value']: updateValue } }
         })
         await wrapper.find('input').setValue('new value')
         expect(wrapper.find('input').element.value).toBe('new value')

diff --git a/packages/components/base-field/components/Switch.jsx b/packages/components/base-field/components/Switch.jsx
@@ -30,7 +30,7 @@ export default defineComponent({
             const needFieldProps = {
                 ...restFieldProps,
                 checked: checked || value,
-                'onUpdate:checked': onUpdateChecked
+                ['onUpdate:checked']: onUpdateChecked
             }
             const dom = (
                 <div style={style}>

diff --git a/packages/components/form/components/Field.jsx b/packages/components/form/components/Field.jsx
@@ -74,7 +74,7 @@ export default defineComponent({
             const needFieldProps = {
                 ...fieldProps,
                 style: fieldStyle(fieldProps.style, fieldWidth),
-                'onUpdate:value': onUpdateValue.bind(null, formItemProps.name)
+                ['onUpdate:value']: onUpdateValue.bind(null, formItemProps.name)
             }
             const needFormItemProps = merge({
                 ...formItemProps,

diff --git a/packages/components/table/compatible/toolbar/style/index.js b/packages/components/table/compatible/toolbar/style/index.js
@@ -4,7 +4,8 @@ function genBaseStyle (token) {
     const { componentCls, antCls, toolbarTitlePadding } = token
     return {
         [componentCls]: {
-            paddingBlock: token.sizeMS,
+            position: 'relative',
+            overflowY: 'auto',
             [`${componentCls}-popup-container`]: {
                 position: 'relative',
                 [`${antCls}-popover`]: {
@@ -20,6 +21,7 @@ function genBaseStyle (token) {
             [`${componentCls}-container`]: {
                 display: 'flex',
                 justifyContent: 'space-between',
+                paddingBlock: token.sizeMS,
                 [`${componentCls}-title`]: {
                     display: 'flex',
                     alignItems: 'center',

diff --git a/src/layout/compatible/base-layout/index.jsx b/src/layout/compatible/base-layout/index.jsx
@@ -1,5 +1,7 @@
-import { defineComponent, ref, unref } from 'vue'
-import { getPropsSlot } from '@site/utils/props-util'
+import { computed, defineComponent, ref, unref } from 'vue'
+import { Drawer } from 'ant-design-vue'
+import { useSite } from '@site'
+import { getPropsSlot, getSlot } from '@site/utils/props-util'
 import { useConfigInject } from '@site/utils/extend'
 import useStyle from './style'
 
@@ -22,28 +24,60 @@ export default defineComponent({
     setup (props, { slots, attrs }) {
         const { prefixCls } = useConfigInject('pro-base-layout', props)
         const [wrapSSR, hashId] = useStyle(prefixCls)
+        const $site = useSite()
 
         const collapsed = ref(false)
+        const siderWidth = ref(0)
 
-        function onCollapse (value) {
-            collapsed.value = value
+        const open = computed(() => !collapsed.value)
+
+        function onCollapse () {
+            collapsed.value = !unref(collapsed)
+        }
+
+        function styleFn (width) {
+            // 缓存 width
+            siderWidth.value = width + 1
+            return { width: `${width}px` }
         }
 
         return () => {
-            const slotScope = {
-                collapsed: unref(collapsed),
-                onCollapse: onCollapse
+            const siderSlot = getSlot(slots, props, 'sider')
+            const headerSlot = getSlot(slots, props, 'header')
+
+            const renderSider = () => {
+                if ($site.screen.lt.lg) {
+                    const drawerProps = {
+                        bodyStyle: { padding: 0 },
+                        placement: 'left',
+                        closable: false,
+                        width: unref(siderWidth),
+                        open: unref(open),
+                        ['onUpdate:open']: onCollapse
+                    }
+                    return (
+                        <Drawer {...drawerProps}>
+                            {() => siderSlot({ collapsed: false, styleFn })}
+                        </Drawer>
+                    )
+                }
+                return siderSlot({ collapsed: unref(collapsed) })
+            }
+
+            const renderHeader = () => {
+                if ($site.screen.lt.lg) {
+                    return headerSlot({ collapsed: false, onCollapse })
+                }
+                return headerSlot({ collapsed: unref(collapsed), onCollapse })
             }
 
-            const siderDom = getPropsSlot(slots, props, 'sider', slotScope)
-            const headerDom = getPropsSlot(slots, props, 'header', slotScope)
-            const contentDom = getPropsSlot(slots, props, 'content', slotScope)
+            const contentDom = getPropsSlot(slots, props, 'content')
 
             return wrapSSR(
                 <div class={[prefixCls.value, hashId.value]} {...attrs}>
-                    {siderDom}
+                    {siderSlot && renderSider()}
                     <div class={`${prefixCls.value}-prime`}>
-                        {headerDom}
+                        {headerSlot && renderHeader()}
                         <div class={`${prefixCls.value}-content`}>
                             {contentDom}
                         </div>

diff --git a/src/layout/compatible/navbar/index.jsx b/src/layout/compatible/navbar/index.jsx
@@ -34,7 +34,7 @@ export default defineComponent({
         const popupContainer = ref(null)
 
         function onCollapse () {
-            emit('collapse', !props.collapsed)
+            emit('collapse')
         }
 
         return () => {

diff --git a/src/layout/compatible/sidebar/index.jsx b/src/layout/compatible/sidebar/index.jsx
@@ -1,12 +1,12 @@
-import { defineComponent, Fragment, ref, unref, watch } from 'vue'
+import { computed, defineComponent, Fragment, ref, unref, watch } from 'vue'
 import { Menu, theme } from 'ant-design-vue'
 import OutIcon from './OutIcon'
 import useShowTitle from '../../hooks/useShowTitle'
 import { hasChild, showChildren } from '../../utils'
 import { getPropsSlot } from '@site/utils/props-util'
 import { useConfigInject } from '@site/utils/extend'
 import useStyle from './style'
-import { dropRight, head, isNil, last, reverse } from 'lodash-es'
+import { dropRight, head, isFunction, isNil, last, reverse } from 'lodash-es'
 
 function createFlatMenus (menus) {
     const flatMenus = []
@@ -115,6 +115,10 @@ export default defineComponent({
             type: Function,
             default: undefined
         },
+        styleFn: {
+            type: Function,
+            default: undefined
+        },
         onChange: {
             type: Function,
             default: undefined
@@ -131,6 +135,19 @@ export default defineComponent({
         const selectedKeys = ref([])
         const openKeys = ref([])
 
+        const menuStyle = computed(() => {
+            const { collapsed, level, styleFn } = props
+            const { controlHeightLG } = unref(token)
+            const width = collapsed
+                ? controlHeightLG * 2
+                : controlHeightLG * 5 + level * 8
+            // ----
+            if (styleFn && isFunction(styleFn)) {
+                return styleFn(width) || { width: `${width}px` }
+            }
+            return { width: `${width}px` }
+        })
+
         watch(() => props.route, (currentRoute) => {
             const { meta = {}, name } = currentRoute
             const needName = meta.hltInName || name
@@ -176,8 +193,8 @@ export default defineComponent({
         }
 
         return () => {
-            const { theme, level, collapsed, menus } = props
-            const { controlHeightLG, controlHeightSM } = unref(token)
+            const { theme, collapsed, menus } = props
+            const { controlHeightSM } = unref(token)
 
             const menuProps = {
                 mode: 'inline',
@@ -196,20 +213,14 @@ export default defineComponent({
                 return createMenuItem(item, showTitle)
             })
 
-            const menuStyle = collapsed ? {
-                width: `${controlHeightLG * 2}px`
-            } : {
-                width: `${controlHeightLG * 5 + level * 8}px`
-            }
-
             return wrapSSR(
                 <div class={[prefixCls.value, hashId.value, `${prefixCls.value}-${theme}`]} {...attrs}>
                     <div class={`${prefixCls.value}-space`}>
                         <div class={`${prefixCls.value}-content`}>
                             <div class={`${prefixCls.value}-logo`}>
                                 {logoDom}
                             </div>
-                            <Menu {...menuProps} style={menuStyle}>
+                            <Menu {...menuProps} style={unref(menuStyle)}>
                                 {children}
                             </Menu>
                         </div>

diff --git a/src/layout/compatible/sidebar/style/index.js b/src/layout/compatible/sidebar/style/index.js
@@ -5,6 +5,7 @@ function genBaseStyle (token) {
     return {
         [componentCls]: {
             position: 'relative',
+            height: '100%',
             overflow: 'hidden',
             userSelect: 'none',
             [`&-light`]: {

diff --git a/src/layout/components/settings/ThemeSettings.jsx b/src/layout/components/settings/ThemeSettings.jsx
@@ -115,7 +115,7 @@ export default defineComponent({
                 )
             })
 
-            const compactProps = { checked: compact, 'onUpdate:checked': onUpdateCompact }
+            const compactProps = { checked: compact, ['onUpdate:checked']: onUpdateCompact }
             const compactDom = <Switch {...compactProps}/>
 
             return wrapSSR(

diff --git a/src/layout/index.jsx b/src/layout/index.jsx
@@ -51,7 +51,7 @@ export default defineComponent({
 
         return () => {
             const layoutSlots = {
-                sider: ({ collapsed }) => {
+                sider: ({ collapsed, styleFn }) => {
                     const logo = () => {
                         const style = { width: '32px', height: '32px' }
                         return (
@@ -65,6 +65,7 @@ export default defineComponent({
                             route={route}
                             menus={menus}
                             collapsed={collapsed}
+                            styleFn={styleFn}
                             onChange={onSidebarChange}
                         />
                     )