From 31edb3a1fe8bd1115e80bd92338fe445bad11d7f Mon Sep 17 00:00:00 2001 From: chenos Date: Tue, 5 Jan 2021 12:50:28 +0800 Subject: [PATCH] feat(app): add mobile responsive --- packages/app/src/app.ts | 8 +++++ .../form.fields/drawer-select/index.tsx | 2 ++ .../components/form.fields/input/index.tsx | 3 +- .../components/form.fields/sub-table/Form.tsx | 1 + .../pages/AvatarDropdown/style.less | 15 ++++++++- .../pages/CollectionLoader/style.less | 7 ++++ .../components/pages/SideMenuLayout/index.tsx | 28 ++++++++++++++-- .../pages/SideMenuLayout/style.less | 16 +++++---- .../components/pages/TopMenuLayout/index.tsx | 33 +++++++++++++++---- packages/app/src/components/views/Details.tsx | 27 +++++++++++++-- .../app/src/components/views/Field/index.tsx | 1 + .../src/components/views/Form/DrawerForm.tsx | 1 + packages/app/src/global.less | 14 ++++++++ 13 files changed, 136 insertions(+), 20 deletions(-) diff --git a/packages/app/src/app.ts b/packages/app/src/app.ts index 319492f5d..16a18babc 100644 --- a/packages/app/src/app.ts +++ b/packages/app/src/app.ts @@ -1,6 +1,14 @@ import './css_browser_selector'; import { RequestConfig, request as umiRequest, history } from 'umi'; +import { configResponsive } from 'ahooks'; + +configResponsive({ + small: 0, + middle: 800, + large: 1200, +}); + export const request: RequestConfig = { prefix: process.env.API, errorConfig: { diff --git a/packages/app/src/components/form.fields/drawer-select/index.tsx b/packages/app/src/components/form.fields/drawer-select/index.tsx index 6482efd5a..966a40513 100644 --- a/packages/app/src/components/form.fields/drawer-select/index.tsx +++ b/packages/app/src/components/form.fields/drawer-select/index.tsx @@ -55,6 +55,7 @@ function DrawerSelectComponent(props) { onChange(data.value); setSelectedRowKeys([data.value]); } else { + console.log(data); onChange(null); setSelectedRowKeys([]); } @@ -65,6 +66,7 @@ function DrawerSelectComponent(props) { > ({ Input.TextArea = connect({ getProps: mapStyledProps, getComponent: mapTextComponent -})(acceptEnum(AntdInput.TextArea)) +})(acceptEnum((props) => )) export default Input diff --git a/packages/app/src/components/form.fields/sub-table/Form.tsx b/packages/app/src/components/form.fields/sub-table/Form.tsx index ea27b14c3..4e7610a36 100644 --- a/packages/app/src/components/form.fields/sub-table/Form.tsx +++ b/packages/app/src/components/form.fields/sub-table/Form.tsx @@ -48,6 +48,7 @@ export default forwardRef((props: any, ref) => { {...props} destroyOnClose visible={visible} + className={'noco-drawer'} width={'40%'} onClose={() => { setVisible(false); diff --git a/packages/app/src/components/pages/AvatarDropdown/style.less b/packages/app/src/components/pages/AvatarDropdown/style.less index cae0c75e8..e7ea1d342 100644 --- a/packages/app/src/components/pages/AvatarDropdown/style.less +++ b/packages/app/src/components/pages/AvatarDropdown/style.less @@ -10,4 +10,17 @@ padding-left: 20px; padding-right: 20px; } -} \ No newline at end of file +} + +@media only screen and (max-width: 800px) { + .avatar-dropdown-wrapper { + bottom: 0; + left: 0; + right: auto; + width: 100%; + .dropdown-link { + display: block; + padding: 10px 20px; + } + } +} diff --git a/packages/app/src/components/pages/CollectionLoader/style.less b/packages/app/src/components/pages/CollectionLoader/style.less index 9821b1f68..880638d6d 100644 --- a/packages/app/src/components/pages/CollectionLoader/style.less +++ b/packages/app/src/components/pages/CollectionLoader/style.less @@ -37,6 +37,13 @@ margin: 16px; } +@media only screen and (max-width: 800px) { + .collection-content { + margin: 0; + margin-top: 1px; + } +} + // .ant-page-header.has-footer { // padding-top: 50px; // } \ No newline at end of file diff --git a/packages/app/src/components/pages/SideMenuLayout/index.tsx b/packages/app/src/components/pages/SideMenuLayout/index.tsx index 6e61f9f6a..543560ee8 100644 --- a/packages/app/src/components/pages/SideMenuLayout/index.tsx +++ b/packages/app/src/components/pages/SideMenuLayout/index.tsx @@ -1,29 +1,51 @@ import React, { useState } from 'react'; -import { Layout, Breadcrumb } from 'antd'; +import { Layout, Breadcrumb, Drawer } from 'antd'; import { Link } from 'umi'; import './style.less'; import Menu from '@/components/menu'; import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'; import { useLocalStorageState } from 'ahooks'; +import { useResponsive } from 'ahooks'; export function SideMenuLayout(props: any) { const { menu = [], id } = props.page; + const [visible, setVisible] = useState(false); // console.log(menu); const [collapsed, setCollapsed] = useLocalStorageState(`nocobase-menu-collapsed-${id}`, false); + const responsive = useResponsive(); + const isMobile = responsive.small && !responsive.middle && !responsive.large; return ( - + {!isMobile &&
{ setCollapsed(!collapsed); + setVisible(true); }} className={'menu-toggle'}> {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { style: { fontSize: 16 }, })}
- + } {props.children} + {isMobile && { + setCollapsed(!collapsed); + setVisible(false); + }} placement={'left'} closable={false} bodyStyle={{padding: 0}}> + { + setCollapsed(false); + setVisible(false); + }} items={menu} mode={'inline'}/> + } + {isMobile &&
{ + setCollapsed(!collapsed); + setVisible(true); + }} className={'menu-toggle'}> + {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { + style: { fontSize: 16 }, + })} +
} ); diff --git a/packages/app/src/components/pages/SideMenuLayout/style.less b/packages/app/src/components/pages/SideMenuLayout/style.less index ea3e7f195..ebce10949 100644 --- a/packages/app/src/components/pages/SideMenuLayout/style.less +++ b/packages/app/src/components/pages/SideMenuLayout/style.less @@ -9,11 +9,13 @@ .ant-menu-light { border-right-color: transparent !important; } - .menu-toggle { - position: fixed; - bottom: 12px; - left: 12px; - line-height: 1; - cursor: pointer; - } +} + +.menu-toggle { + position: fixed; + bottom: 12px; + left: 12px; + line-height: 1; + cursor: pointer; + z-index: 1000; } \ No newline at end of file diff --git a/packages/app/src/components/pages/TopMenuLayout/index.tsx b/packages/app/src/components/pages/TopMenuLayout/index.tsx index c0c9c43f3..c5afae625 100644 --- a/packages/app/src/components/pages/TopMenuLayout/index.tsx +++ b/packages/app/src/components/pages/TopMenuLayout/index.tsx @@ -1,21 +1,42 @@ -import React from 'react'; -import { Layout, Dropdown, Avatar } from 'antd'; +import React, { useState } from 'react'; +import { Layout, Dropdown, Avatar, Drawer } from 'antd'; import './style.less'; import { history, Link, request, useModel } from 'umi'; -import { UserOutlined, CodeOutlined } from '@ant-design/icons'; +import { UserOutlined, CodeOutlined, MenuOutlined } from '@ant-design/icons'; import AvatarDropdown from '../AvatarDropdown'; import Menu from '@/components/menu'; import { ReactComponent as Logo } from './logo-white.svg'; +import { useResponsive, useLocalStorageState } from 'ahooks'; export function TopMenuLayout(props: any) { const { menu = [] } = props.page; + // const [visible, setVisible] = useState(false); + const [visible, setVisible] = useLocalStorageState(`nocobase-nav-visible`, false); + const responsive = useResponsive(); + const isMobile = responsive.small && !responsive.middle && !responsive.large; return (
- - - + {!isMobile && } + {!isMobile && } + {isMobile && { + setVisible(true); + }} style={{ + fontSize: 16, + color: '#fff', + position: 'absolute', + right: 16, + top: 16, + }}/>} + {isMobile && { + setVisible(false); + }} placement={'right'} closable={false} bodyStyle={{background: '#001529', padding: 0}}> + { + setVisible(false); + }} mode={'inline'} hideChildren={true} items={menu} className={'noco-top-menu'} style={{float: 'left'}} theme="dark"/> + + } {props.children} diff --git a/packages/app/src/components/views/Details.tsx b/packages/app/src/components/views/Details.tsx index 4a760473d..4fe6f1617 100644 --- a/packages/app/src/components/views/Details.tsx +++ b/packages/app/src/components/views/Details.tsx @@ -6,8 +6,17 @@ import { useRequest } from 'umi'; import { Spin } from '@nocobase/client'; import Field from './Field'; import get from 'lodash/get'; - +import { useSize } from 'ahooks'; +import { configResponsive, useResponsive } from 'ahooks'; +configResponsive({ + small: 0, + middle: 800, + large: 1200, +}); export function Details(props: any) { + const dom = document.querySelector('body'); + const responsive = useResponsive(); + const { activeTab = {}, pageInfo = {}, @@ -26,6 +35,15 @@ export function Details(props: any) { ...actionDefaultParams, }); }); + let descriptionsProps: any = { + size: 'middle', + bordered: true, + } + if (responsive.small && !responsive.middle && !responsive.large) { + descriptionsProps = { + layout: 'vertical' + } + } console.log(props); return ( @@ -38,7 +56,12 @@ export function Details(props: any) { actions={actions} /> {loading ? : ( - + {fields.map((field: any) => { return ( diff --git a/packages/app/src/components/views/Field/index.tsx b/packages/app/src/components/views/Field/index.tsx index aee137b06..c9a814ccf 100644 --- a/packages/app/src/components/views/Field/index.tsx +++ b/packages/app/src/components/views/Field/index.tsx @@ -219,6 +219,7 @@ export function LinkToFieldLink(props) { onClick={(e) => { e.stopPropagation(); }} + className={'noco-drawer'} bodyStyle={{padding: 0}} width={'40%'} title={`查看${title}详情`} diff --git a/packages/app/src/components/views/Form/DrawerForm.tsx b/packages/app/src/components/views/Form/DrawerForm.tsx index 4a5dffb99..2ef7e38bc 100644 --- a/packages/app/src/components/views/Form/DrawerForm.tsx +++ b/packages/app/src/components/views/Form/DrawerForm.tsx @@ -60,6 +60,7 @@ export const DrawerForm = forwardRef((props: any, ref) => { destroyOnClose visible={visible} width={'40%'} + className={'noco-drawer'} onClose={() => { setVisible(false); }} diff --git a/packages/app/src/global.less b/packages/app/src/global.less index 982449f52..3ead85c78 100644 --- a/packages/app/src/global.less +++ b/packages/app/src/global.less @@ -41,4 +41,18 @@ align-items: center; justify-content: center; max-height: inherit !important; +} + +.ant-drawer.noco-drawer { + .ant-drawer-content-wrapper { + width: 40%; + } +} + +@media only screen and (max-width: 800px) { + .ant-drawer.noco-drawer { + .ant-drawer-content-wrapper { + width: 100% !important; + } + } } \ No newline at end of file