From 83b808dcb45d28265c37482fb6c8381fdbfca77e Mon Sep 17 00:00:00 2001 From: "xiyang.bai" Date: Wed, 11 Aug 2021 19:52:28 +0800 Subject: [PATCH 1/6] update-footerconfig --- packages/dooringx-example/src/pages/index.tsx | 31 +++++++++++++------ .../dooringx-example/src/plugin/index.tsx | 2 +- .../src/components/leftConfig.tsx | 11 ++++++- packages/dooringx-lib/src/index.less | 6 ++++ 4 files changed, 39 insertions(+), 11 deletions(-) diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx index b0c2b8f..39bc6ae 100644 --- a/packages/dooringx-example/src/pages/index.tsx +++ b/packages/dooringx-example/src/pages/index.tsx @@ -14,12 +14,26 @@ import { ContainerWrapper, Control, } from 'dooringx-lib'; +import { FormattedMessage } from 'react-intl'; +import { InsertRowBelowOutlined } from '@ant-design/icons'; import { useContext } from 'react'; import { configContext } from '@/layouts'; import { useCallback } from 'react'; import { PREVIEWSTATE } from '@/constant'; - +import { Button, Popover } from 'antd'; export const HeaderHeight = '40px'; +const footerConfig = function () { + return ( + <> + + + + + + + + ); +}; export default function IndexPage() { const config = useContext(configContext); @@ -35,21 +49,20 @@ export default function IndexPage() { return (
- head - - + 普通预览 +
- +
diff --git a/packages/dooringx-example/src/plugin/index.tsx b/packages/dooringx-example/src/plugin/index.tsx index 0a7ea24..4b963da 100644 --- a/packages/dooringx-example/src/plugin/index.tsx +++ b/packages/dooringx-example/src/plugin/index.tsx @@ -36,7 +36,7 @@ export const defaultConfig: Partial = { { type: 'basic', icon: , - displayName: '基础组件', + displayName: '基础', }, { type: 'xxc', diff --git a/packages/dooringx-lib/src/components/leftConfig.tsx b/packages/dooringx-lib/src/components/leftConfig.tsx index db3b7c6..9ec4bee 100644 --- a/packages/dooringx-lib/src/components/leftConfig.tsx +++ b/packages/dooringx-lib/src/components/leftConfig.tsx @@ -15,6 +15,7 @@ import styles from '../index.less'; interface LeftConfigProps { config: UserConfig; + footerConfig?: ReactNode; } /** @@ -153,10 +154,18 @@ function LeftConfig(props: LeftConfigProps) { {leftMapRenderListCategory.map((v, i) => { return ( - setMenuSelect(i + '')} icon={v.icon}> + setMenuSelect(i + '')} + icon={v.icon} + className={`${styles.menuStyle}`} + > + {v.displayName} + ); })} +
{props.footerConfig}
Date: Thu, 12 Aug 2021 11:06:46 +0800 Subject: [PATCH 2/6] feat(leftConfig)footerConfig && menuStyle --- packages/dooringx-example/src/pages/index.tsx | 8 ++++---- packages/dooringx-lib/src/components/leftConfig.tsx | 6 ++++-- packages/dooringx-lib/src/index.less | 1 + 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx index 39bc6ae..3643112 100644 --- a/packages/dooringx-example/src/pages/index.tsx +++ b/packages/dooringx-example/src/pages/index.tsx @@ -15,7 +15,7 @@ import { Control, } from 'dooringx-lib'; import { FormattedMessage } from 'react-intl'; -import { InsertRowBelowOutlined } from '@ant-design/icons'; +import { InsertRowBelowOutlined, CalendarOutlined } from '@ant-design/icons'; import { useContext } from 'react'; import { configContext } from '@/layouts'; import { useCallback } from 'react'; @@ -25,8 +25,8 @@ export const HeaderHeight = '40px'; const footerConfig = function () { return ( <> - - + + @@ -74,7 +74,7 @@ export default function IndexPage() { }} >
- +
diff --git a/packages/dooringx-lib/src/components/leftConfig.tsx b/packages/dooringx-lib/src/components/leftConfig.tsx index 9ec4bee..e0ed381 100644 --- a/packages/dooringx-lib/src/components/leftConfig.tsx +++ b/packages/dooringx-lib/src/components/leftConfig.tsx @@ -13,16 +13,18 @@ import { DoubleLeftOutlined, DoubleRightOutlined, SearchOutlined } from '@ant-de import styles from '../index.less'; +declare type modeType = 'horizontal' | 'vertical'; interface LeftConfigProps { config: UserConfig; footerConfig?: ReactNode; + mode?: modeType | undefined; } /** * * 注册加载左侧组件方法，由于异步拉取，所以要异步加载 * 不同tab页可以使用不同type区分 - * @param {*} props + * @param {*} props -LeftConfigProps options可选项： mode:'horizontal' | 'vertical' icon与文案展示方向 ;footerConfig:底部功能配置ReactNode类型； * @returns */ function LeftConfig(props: LeftConfigProps) { @@ -158,7 +160,7 @@ function LeftConfig(props: LeftConfigProps) { key={i} onClick={() => setMenuSelect(i + '')} icon={v.icon} - className={`${styles.menuStyle}`} + className={props.mode === 'vertical' ? `${styles.menuStyle}` : ''} > {v.displayName} diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less index e47cdc6..57cd97f 100644 --- a/packages/dooringx-lib/src/index.less +++ b/packages/dooringx-lib/src/index.less @@ -168,6 +168,7 @@ flex-direction: column !important; justify-content: center !important; height: auto !important; + padding-top: 8px !important; } .menu_footer { display: flex; From acd421f4566f2a372407c09ad576025c53d83cf1 Mon Sep 17 00:00:00 2001 From: "xiyang.bai" Date: Thu, 12 Aug 2021 11:26:51 +0800 Subject: [PATCH 3/6] feat(leftConfig)footerConfig && menuStyle --- packages/dooringx-example/src/pages/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx index 96ab26c..933288b 100644 --- a/packages/dooringx-example/src/pages/index.tsx +++ b/packages/dooringx-example/src/pages/index.tsx @@ -14,7 +14,6 @@ import { ContainerWrapper, Control, } from 'dooringx-lib'; -import { FormattedMessage } from 'react-intl'; import { InsertRowBelowOutlined, CalendarOutlined } from '@ant-design/icons'; import { useContext } from 'react'; import { configContext } from '@/layouts'; From 02c31776c4faee5cad2fd3fe9b7f14cf6b27cdf9 Mon Sep 17 00:00:00 2001 From: "xiyang.bai" Date: Thu, 12 Aug 2021 13:45:48 +0800 Subject: [PATCH 4/6] vertical-style --- packages/dooringx-lib/src/index.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less index 57cd97f..1d8ca42 100644 --- a/packages/dooringx-lib/src/index.less +++ b/packages/dooringx-lib/src/index.less @@ -164,11 +164,11 @@ } .menuStyle { - display: flex !important; - flex-direction: column !important; - justify-content: center !important; - height: auto !important; - padding-top: 8px !important; + display: flex; + flex-direction: column; + justify-content: center; + height: auto !important ; + padding-top: 8px !important ; } .menu_footer { display: flex; From b15f712e485f2d9e95ae86a5d319e7009a19f279 Mon Sep 17 00:00:00 2001 From: "xiyang.bai" Date: Thu, 12 Aug 2021 14:21:39 +0800 Subject: [PATCH 5/6] feat(leftConfig)show dispalyName config --- packages/dooringx-example/src/pages/index.tsx | 7 ++++++- packages/dooringx-example/src/plugin/index.tsx | 7 ++++++- packages/dooringx-lib/src/components/leftConfig.tsx | 5 +++-- packages/dooringx-lib/src/index.less | 3 ++- 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx index 933288b..2d414a9 100644 --- a/packages/dooringx-example/src/pages/index.tsx +++ b/packages/dooringx-example/src/pages/index.tsx @@ -72,7 +72,12 @@ export default function IndexPage() { }} >
- +
diff --git a/packages/dooringx-example/src/plugin/index.tsx b/packages/dooringx-example/src/plugin/index.tsx index 4b963da..e078ebf 100644 --- a/packages/dooringx-example/src/plugin/index.tsx +++ b/packages/dooringx-example/src/plugin/index.tsx @@ -8,7 +8,7 @@ import { InitConfig } from 'dooringx-lib'; import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag'; -import { ContainerOutlined, HighlightOutlined } from '@ant-design/icons'; +import { ContainerOutlined, PlayCircleOutlined, HighlightOutlined } from '@ant-design/icons'; import commandModules from './commanderModules'; import { functionMap } from './functionMap'; import { Formmodules } from './formComponentModules'; @@ -38,6 +38,11 @@ export const defaultConfig: Partial = { icon: , displayName: '基础', }, + { + type: 'media', + icon: , + displayName: '媒体组件', + }, { type: 'xxc', icon: , diff --git a/packages/dooringx-lib/src/components/leftConfig.tsx b/packages/dooringx-lib/src/components/leftConfig.tsx index e0ed381..2623ad3 100644 --- a/packages/dooringx-lib/src/components/leftConfig.tsx +++ b/packages/dooringx-lib/src/components/leftConfig.tsx @@ -16,6 +16,7 @@ import styles from '../index.less'; declare type modeType = 'horizontal' | 'vertical'; interface LeftConfigProps { config: UserConfig; + showName?: Boolean; footerConfig?: ReactNode; mode?: modeType | undefined; } @@ -24,7 +25,7 @@ interface LeftConfigProps { * * 注册加载左侧组件方法，由于异步拉取，所以要异步加载 * 不同tab页可以使用不同type区分 - * @param {*} props -LeftConfigProps options可选项： mode:'horizontal' | 'vertical' icon与文案展示方向 ;footerConfig:底部功能配置ReactNode类型； + * @param {*} props -LeftConfigProps options可选项：showName:是否显示displayName; mode:'horizontal' | 'vertical' icon与文案展示方向 ;footerConfig:底部功能配置ReactNode类型； * @returns */ function LeftConfig(props: LeftConfigProps) { @@ -162,7 +163,7 @@ function LeftConfig(props: LeftConfigProps) { icon={v.icon} className={props.mode === 'vertical' ? `${styles.menuStyle}` : ''} > - {v.displayName} + {props.showName && v.displayName} ); })} diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less index 1d8ca42..08f972f 100644 --- a/packages/dooringx-lib/src/index.less +++ b/packages/dooringx-lib/src/index.less @@ -167,8 +167,9 @@ display: flex; flex-direction: column; justify-content: center; + text-align: center; height: auto !important ; - padding-top: 8px !important ; + padding: 8px 16px !important ; } .menu_footer { display: flex; From b820a3fa04c10d0ccfd0f5e4d8b79a528430feef Mon Sep 17 00:00:00 2001 From: hufeixiong <673632758@qq.com> Date: Thu, 12 Aug 2021 15:59:03 +0800 Subject: [PATCH 6/6] change style --- packages/dooringx-example/src/global.less | 3 --- packages/dooringx-example/src/layouts/index.tsx | 2 +- packages/dooringx-example/src/pages/index.tsx | 14 +++----------- packages/dooringx-example/src/plugin/index.tsx | 3 ++- .../dooringx-lib/src/components/leftConfig.tsx | 14 ++++++++++---- packages/dooringx-lib/src/index.less | 14 +++++++++++--- 6 files changed, 27 insertions(+), 23 deletions(-) diff --git a/packages/dooringx-example/src/global.less b/packages/dooringx-example/src/global.less index aea3d11..e69de29 100644 --- a/packages/dooringx-example/src/global.less +++ b/packages/dooringx-example/src/global.less @@ -1,3 +0,0 @@ -.ant-menu-title-content { - margin: 0 !important; -} diff --git a/packages/dooringx-example/src/layouts/index.tsx b/packages/dooringx-example/src/layouts/index.tsx index f8d0dba..66232a8 100644 --- a/packages/dooringx-example/src/layouts/index.tsx +++ b/packages/dooringx-example/src/layouts/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-07-07 14:51:17 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-27 16:24:29 + * @LastEditTime: 2021-08-12 14:37:38 * @FilePath: \dooringx\packages\dooringx-example\src\layouts\index.tsx */ import { Button } from 'antd'; diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx index 2d414a9..2602601 100644 --- a/packages/dooringx-example/src/pages/index.tsx +++ b/packages/dooringx-example/src/pages/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-05-15 12:49:28 * @LastEditors: yehuozhili - * @LastEditTime: 2021-08-11 16:26:46 + * @LastEditTime: 2021-08-12 15:57:35 * @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx */ import { @@ -14,7 +14,7 @@ import { ContainerWrapper, Control, } from 'dooringx-lib'; -import { InsertRowBelowOutlined, CalendarOutlined } from '@ant-design/icons'; +import { InsertRowBelowOutlined } from '@ant-design/icons'; import { useContext } from 'react'; import { configContext } from '@/layouts'; import { useCallback } from 'react'; @@ -24,9 +24,6 @@ export const HeaderHeight = '40px'; const footerConfig = function () { return ( <> - - - @@ -72,12 +69,7 @@ export default function IndexPage() { }} >
- +
diff --git a/packages/dooringx-example/src/plugin/index.tsx b/packages/dooringx-example/src/plugin/index.tsx index e078ebf..64458b0 100644 --- a/packages/dooringx-example/src/plugin/index.tsx +++ b/packages/dooringx-example/src/plugin/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-02-27 21:33:36 * @LastEditors: yehuozhili - * @LastEditTime: 2021-08-05 10:54:22 + * @LastEditTime: 2021-08-12 14:43:05 * @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx */ @@ -47,6 +47,7 @@ export const defaultConfig: Partial = { type: 'xxc', icon: , custom: true, + displayName: '自定义', customRender:
我是自定义渲染
, }, ], diff --git a/packages/dooringx-lib/src/components/leftConfig.tsx b/packages/dooringx-lib/src/components/leftConfig.tsx index 2623ad3..66d877a 100644 --- a/packages/dooringx-lib/src/components/leftConfig.tsx +++ b/packages/dooringx-lib/src/components/leftConfig.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-02-04 10:32:45 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-12 17:12:35 + * @LastEditTime: 2021-08-12 15:50:48 * @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx */ import React, { ReactNode, useEffect, useMemo, useState } from 'react'; @@ -18,7 +18,7 @@ interface LeftConfigProps { config: UserConfig; showName?: Boolean; footerConfig?: ReactNode; - mode?: modeType | undefined; + mode?: modeType; } /** @@ -154,14 +154,20 @@ function LeftConfig(props: LeftConfigProps) { return (
- + {leftMapRenderListCategory.map((v, i) => { return ( setMenuSelect(i + '')} icon={v.icon} - className={props.mode === 'vertical' ? `${styles.menuStyle}` : ''} + className={props.mode === 'vertical' ? `${styles.menuStyle} ${styles.menus}` : ''} > {props.showName && v.displayName} diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less index 08f972f..a5ba2b1 100644 --- a/packages/dooringx-lib/src/index.less +++ b/packages/dooringx-lib/src/index.less @@ -162,14 +162,22 @@ } } } +.menuWidth.menus { + width: initial; +} -.menuStyle { +.menuStyle.menus { display: flex; flex-direction: column; justify-content: center; text-align: center; - height: auto !important ; - padding: 8px 16px !important ; + height: auto; + span:nth-child(1) { + margin-top: 10px; + } + span:nth-child(2) { + margin-left: 0; + } } .menu_footer { display: flex;