From c74b234dde74f66ce916d8c9510f4ea950ea634d Mon Sep 17 00:00:00 2001 From: Katherine Date: Fri, 2 Aug 2024 13:49:40 +0800 Subject: [PATCH] refactor: pc block & action compatible with mobile devices (#4935) * style: import modal style improve * style: grid card style improve * style: action bar style improve * style: action bar style improve * style: action bar style improve * fix: improt modal * fix: modal style * fix: bug * fix: bug * fix: modal style * refactor: pagination style * refactor: table configure fields style * refactor: grid card style * style: table block margin * style: table block margin * fix: bug --- .../antd/action/ActionBar.tsx | 4 +- .../grid-card/GridCard.Decorator.style.ts | 2 +- .../antd/grid-card/GridCard.Item.tsx | 6 +- .../schema-component/antd/table-v2/Table.tsx | 39 +++++------ .../src/client/ImportActionInitializer.tsx | 9 ++- .../src/client/mobile/Mobile.tsx | 56 ++++++++-------- .../plugin-mobile/src/client/mobile/styles.ts | 64 +++++++++++++++++++ 7 files changed, 129 insertions(+), 51 deletions(-) create mode 100644 packages/plugins/@nocobase/plugin-mobile/src/client/mobile/styles.ts diff --git a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx index 9e8e8dfb92..f7308e44ea 100644 --- a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx +++ b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx @@ -104,6 +104,7 @@ export const ActionBar = withDynamicSchemaProps( alignItems: 'center', overflowX: 'auto', flexShrink: 0, + gap: '8px', ...style, } } @@ -118,10 +119,11 @@ export const ActionBar = withDynamicSchemaProps( width: '100%', overflow: 'hidden', flexWrap: 'wrap', + gap: '8px', }} > - + {fieldSchema.mapProperties((schema, key) => { if (schema['x-align'] !== 'left') { return null; diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.style.ts b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.style.ts index 9349713554..3c5792e37b 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.style.ts +++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.style.ts @@ -21,7 +21,7 @@ const useStyles = genStyleHook('nb-grid-card', (token) => { }, '.ant-list-pagination': { padding: token.marginLG, background: token.colorBgContainer }, }, - '.ant-formily-item-feedback-layout-loose': { marginBottom: token.marginSM }, + '.ant-formily-item-feedback-layout-loose': { marginBottom: 0 }, }, }; }); diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx index b64f9a76cb..0e93250c58 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx +++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx @@ -22,7 +22,7 @@ const itemCss = css` height: 100%; flex-direction: column; justify-content: space-between; - gap: 8px; + gap: 0px; `; const gridCardCss = css` @@ -30,6 +30,10 @@ const gridCardCss = css` > .ant-card-body { padding: 24px 24px 0px; height: 100%; + button { + margin-bottom: 0px !important; + margin-top: 5px; + } } .nb-action-bar { padding: 5px 0; diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx index fb258ec772..27ed2ec5d0 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx @@ -10,7 +10,7 @@ import { DeleteOutlined, MenuOutlined } from '@ant-design/icons'; import { TinyColor } from '@ctrl/tinycolor'; import { SortableContext, SortableContextProps, useSortable } from '@dnd-kit/sortable'; -import { css } from '@emotion/css'; +import { css, cx } from '@emotion/css'; import { ArrayField } from '@formily/core'; import { spliceArrayState } from '@formily/core/esm/shared/internals'; import { RecursionField, Schema, observer, useField, useFieldSchema } from '@formily/react'; @@ -166,7 +166,7 @@ const useTableColumns = (props: { showDel?: boolean; isSubTable?: boolean }) => title: render(), dataIndex: 'TABLE_COLUMN_INITIALIZER', key: 'TABLE_COLUMN_INITIALIZER', - render: designable ? () =>
: null, + render: designable ? () =>
: null, fixed: designable ? 'right' : 'none', }, ]; @@ -715,28 +715,31 @@ export const Table: any = withDynamicSchemaProps( }, [expandedKeys, onExpandValue]); return (
{ modal: { type: 'void', title: `{{ t("Import Data", {ns: "${NAMESPACE}" }) }}`, - 'x-component': 'Action.Container', + 'x-component': 'Action.Modal', 'x-decorator': 'Form', 'x-component-props': { - width: '50%', + width: '100%', + style: { + maxWidth: '750px', + }, className: css` .ant-formily-item-label { height: var(--controlHeightLG); @@ -133,7 +136,7 @@ export const ImportActionInitializer = () => { }, }, footer: { - 'x-component': 'Action.Container.Footer', + 'x-component': 'Action.Modal.Footer', 'x-component-props': {}, properties: { actions: { diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx index b9e25282a8..f7a9cf914d 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx @@ -16,11 +16,12 @@ import { DesktopMode } from '../desktop-mode/DesktopMode'; import { PluginMobileClient } from '../index'; import { MobileActionPage } from '../pages/mobile-action-page/MobileActionPage'; import { MobileAppProvider } from './MobileAppContext'; +import { useStyles } from './styles'; export const Mobile = () => { const mobilePlugin = usePlugin(PluginMobileClient); const MobileRouter = mobilePlugin.getRouterComponent(); - + const { styles } = useStyles(); // 设置的移动端 meta React.useEffect(() => { if (!isDesktop) { @@ -43,35 +44,36 @@ export const Mobile = () => { }, []); const DesktopComponent = mobilePlugin.desktopMode === false ? React.Fragment : DesktopMode; - return ( {/* 目前移动端由于和客户端的主题对不上，所以先使用 `GlobalThemeProvider` 和 `AntdAppProvider` 进行重置为默认主题 */} - - - - - - - - - +
+ + + + + + + + + +
); }; diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/styles.ts b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/styles.ts new file mode 100644 index 0000000000..3a19bf1917 --- /dev/null +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/styles.ts @@ -0,0 +1,64 @@ +/** + * This file is part of the NocoBase (R) project. + * Copyright (c) 2020-2024 NocoBase Co., Ltd. + * Authors: NocoBase Team. + * + * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. + * For more information, please refer to: https://www.nocobase.com/agreement. + */ + +import { createStyles } from '@nocobase/client'; + +export const useStyles = createStyles(({ token, css }) => { + return { + nbMobile: css` + display: initial; + .ant-table-thead button[aria-label*='schema-initializer-TableV2-table:configureColumns'] > span:last-child { + display: none !important; + } + .ant-table-thead button[aria-label*='schema-initializer-TableV2-table:configureColumns'] > .ant-btn-icon { + margin: 0px; + } + .ant-pagination .ant-pagination-total-text { + display: none; + } + .ant-pagination .ant-pagination-options { + display: none; + } + .ant-pagination .ant-pagination-item { + display: none; + } + .ant-card-body .nb-action-bar .ant-btn { + justify-content: space-between; + display: flex; + align-items: center; + gap: 8px; + + span { + display: contents; + } + } + .ant-card-body .nb-action-bar .ant-btn-icon { + margin-inline-end: 0px !important; + } + .ant-card-body .ant-table-cell-fix-right:last-child { + // display: table-cell; + // width: auto; + } + .ant-card-body .nb-table-container { + margin-right: -20px; + margin-left: -10px; + } + .nb-action-bar button[aria-label*='schema-initializer-ActionBar-table:configureActions'] > span:last-child { + display: none !important; + } + .nb-action-bar button[aria-label*='schema-initializer-ActionBar-table:configureActions'] > .ant-btn-icon { + margin: 0px; + } + .nb-card-list .ant-row > div { + width: 100% !important; + max-width: 100% !important; + } + `, + }; +});