From fed1441fc174b438fb123225da63c9fa9fc19976 Mon Sep 17 00:00:00 2001 From: qkiroc <30946345+qkiroc@users.noreply.github.com> Date: Fri, 1 Nov 2024 10:43:23 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20panel\collapse=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=96=B0=E7=89=88=E5=A4=96=E8=A7=82=20(#11124)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: panel支持新版外观 * 折叠面板支持新版外观配置 * 折叠器支持新版外观 --- packages/amis-editor/src/plugin/Collapse.tsx | 25 +++ .../amis-editor/src/plugin/CollapseGroup.tsx | 11 ++ packages/amis-editor/src/plugin/Panel.tsx | 117 ++++++------ packages/amis-editor/src/tpl/style.tsx | 27 ++- .../scss/components/_collapse-group.scss | 21 ++- packages/amis/src/renderers/Collapse.tsx | 176 ++++++++++++------ packages/amis/src/renderers/CollapseGroup.tsx | 65 +++++-- packages/amis/src/renderers/Panel.tsx | 104 ++++++++++- 8 files changed, 405 insertions(+), 141 deletions(-) diff --git a/packages/amis-editor/src/plugin/Collapse.tsx b/packages/amis-editor/src/plugin/Collapse.tsx index 371c3aee8..2531f8155 100644 --- a/packages/amis-editor/src/plugin/Collapse.tsx +++ b/packages/amis-editor/src/plugin/Collapse.tsx @@ -194,6 +194,31 @@ export class CollapsePlugin extends BasePlugin { { title: '外观', body: getSchemaTpl('collapseGroup', [ + ...getSchemaTpl('theme:common', { + exclude: ['layout'], + hideAnimation: true, + classname: 'baseControlClassName', + needState: false, + baseTitle: '基本样式', + extra: [ + getSchemaTpl('theme:base', { + classname: 'headerControlClassName', + title: '标题区样式', + state: ['default', 'hover'], + extra: [ + getSchemaTpl('theme:font', { + label: '文字', + name: 'themeCss.headerControlClassName.font' + }) + ] + }), + getSchemaTpl('theme:base', { + classname: 'bodyControlClassName', + needState: false, + title: '内容区样式' + }) + ] + }), getSchemaTpl('style:classNames', { isFormItem: false, schema: [ diff --git a/packages/amis-editor/src/plugin/CollapseGroup.tsx b/packages/amis-editor/src/plugin/CollapseGroup.tsx index 26ff86290..c27ea5e0a 100644 --- a/packages/amis-editor/src/plugin/CollapseGroup.tsx +++ b/packages/amis-editor/src/plugin/CollapseGroup.tsx @@ -269,6 +269,17 @@ export class CollapseGroupPlugin extends BasePlugin { { title: '外观', body: getSchemaTpl('collapseGroup', [ + { + title: '基本样式', + body: [ + getSchemaTpl('theme:paddingAndMargin', { + name: `themeCss.className.padding-and-margin`, + hidePadding: true + }) + ] + }, + getSchemaTpl('theme:cssCode'), + getSchemaTpl('animation'), getSchemaTpl('style:classNames', { isFormItem: false }) diff --git a/packages/amis-editor/src/plugin/Panel.tsx b/packages/amis-editor/src/plugin/Panel.tsx index 36cc1abde..f5684fa7e 100644 --- a/packages/amis-editor/src/plugin/Panel.tsx +++ b/packages/amis-editor/src/plugin/Panel.tsx @@ -129,37 +129,71 @@ export class PanelPlugin extends BasePlugin { title: '外观', body: [ getSchemaTpl('collapseGroup', [ - { - className: 'p-none', - title: '基本', - body: [ - getSchemaTpl('switch', { - name: 'affixFooter', - label: '固定底部', - value: false + ...getSchemaTpl('theme:common', { + exclude: ['layout'], + classname: 'baseControlClassName', + needState: false, + baseTitle: '基本样式', + extra: [ + getSchemaTpl('theme:base', { + classname: 'headerControlClassName', + needState: false, + title: '标题区样式', + extra: [ + getSchemaTpl('theme:font', { + label: '文字', + name: 'themeCss.titleControlClassName.font' + }) + ] }), - - getSchemaTpl('horizontal', { - visibleOn: - '(data.mode || data.$$formMode) == "horizontal" && data.$$mode == "form"' + getSchemaTpl('theme:base', { + classname: 'bodyControlClassName', + needState: false, + title: '内容区样式', + extra: [ + getSchemaTpl('subFormItemMode', {label: '表单展示模式'}), + getSchemaTpl('subFormHorizontalMode', { + label: '表单水平占比' + }), + getSchemaTpl('subFormHorizontal') + ] + }), + getSchemaTpl('theme:base', { + classname: 'footerControlClassName', + needState: false, + title: '底部区样式', + extra: [ + getSchemaTpl('switch', { + name: 'affixFooter', + label: '固定底部', + value: false + }) + ] }) ] - }, - { - className: 'p-none', - title: '内容区域展示', - body: [ - getSchemaTpl('subFormItemMode', {label: '表单展示模式'}), - getSchemaTpl('subFormHorizontalMode', { - label: '表单水平占比' + }), + getSchemaTpl('style:classNames', { + isFormItem: false, + schema: [ + getSchemaTpl('className', { + name: 'headerClassName', + label: '头部区域' + }), + + getSchemaTpl('className', { + name: 'bodyClassName', + label: '内容区域' + }), + + getSchemaTpl('className', { + name: 'footerClassName', + label: '底部区域' + }), + + getSchemaTpl('className', { + name: 'actionsClassName', + label: '按钮外层' }), - getSchemaTpl('subFormHorizontal') - ] - }, - { - className: 'p-none', - title: 'CSS 类名', - body: [ { name: isForm ? 'panelClassName' : 'className', label: '主题', @@ -205,34 +239,9 @@ export class PanelPlugin extends BasePlugin { value: 'Panel--danger' } ] - }, - getSchemaTpl('className', { - label: '外层', - name: isForm ? 'panelClassName' : 'className', - pipeIn: defaultValue('Panel--default') - }), - - getSchemaTpl('className', { - name: 'headerClassName', - label: '头部区域' - }), - - getSchemaTpl('className', { - name: 'bodyClassName', - label: '内容区域' - }), - - getSchemaTpl('className', { - name: 'footerClassName', - label: '底部区域' - }), - - getSchemaTpl('className', { - name: 'actionsClassName', - label: '按钮外层' - }) + } ] - } + }) ]) ] } diff --git a/packages/amis-editor/src/tpl/style.tsx b/packages/amis-editor/src/tpl/style.tsx index 0e64fecef..fe4fe5655 100644 --- a/packages/amis-editor/src/tpl/style.tsx +++ b/packages/amis-editor/src/tpl/style.tsx @@ -1093,21 +1093,23 @@ setSchemaTpl( !hideBorder && getSchemaTpl('theme:border', { visibleOn: visibleOn, - name: `themeCss.${classname}.border:${state}`, + name: `themeCss.${classname}.border${needState ? ':' + state : ''}`, state, editorValueToken }), !hideRadius && getSchemaTpl('theme:radius', { visibleOn: visibleOn, - name: `themeCss.${classname}.radius:${state}`, + name: `themeCss.${classname}.radius${needState ? ':' + state : ''}`, state, editorValueToken }), !hidePaddingAndMargin && getSchemaTpl('theme:paddingAndMargin', { visibleOn: visibleOn, - name: `themeCss.${classname}.padding-and-margin:${state}`, + name: `themeCss.${classname}.padding-and-margin${ + needState ? ':' + state : '' + }`, hideMargin, hidePadding, state, @@ -1116,7 +1118,9 @@ setSchemaTpl( !hideBackground && getSchemaTpl('theme:colorPicker', { visibleOn: visibleOn, - name: `themeCss.${classname}.background:${state}`, + name: `themeCss.${classname}.background${ + needState ? ':' + state : '' + }`, label: '背景', needCustom: true, needGradient: true, @@ -1130,7 +1134,9 @@ setSchemaTpl( !hideShadow && getSchemaTpl('theme:shadow', { visibleOn: visibleOn, - name: `themeCss.${classname}.boxShadow:${state}`, + name: `themeCss.${classname}.boxShadow${ + needState ? ':' + state : '' + }`, state, editorValueToken }) @@ -1141,7 +1147,7 @@ setSchemaTpl( return { ...item, visibleOn: visibleOn, - name: `${item.name}:${state}`, + name: `${item.name}${needState ? ':' + state : ''}`, state }; }) @@ -1201,6 +1207,8 @@ setSchemaTpl( classname?: string; baseTitle?: string; hidePaddingAndMargin?: boolean; + hideAnimation?: boolean; + needState?: boolean; }) => { let { exclude, @@ -1210,7 +1218,9 @@ setSchemaTpl( layoutExtra, classname, baseTitle, - hidePaddingAndMargin + hidePaddingAndMargin, + hideAnimation, + needState = true } = option || {}; const curCollapsed = collapsed ?? false; // 默认都展开 @@ -1239,6 +1249,7 @@ setSchemaTpl( extra: baseExtra, classname, title: baseTitle, + needState, hidePaddingAndMargin }), ...extra, @@ -1252,7 +1263,7 @@ setSchemaTpl( } ] }, - getSchemaTpl('animation') + !hideAnimation && getSchemaTpl('animation') ].filter(item => !~exclude.indexOf(item.key || '')); } ); diff --git a/packages/amis-ui/scss/components/_collapse-group.scss b/packages/amis-ui/scss/components/_collapse-group.scss index fba422fd6..cde6be9ec 100644 --- a/packages/amis-ui/scss/components/_collapse-group.scss +++ b/packages/amis-ui/scss/components/_collapse-group.scss @@ -10,7 +10,26 @@ } } - .#{$ns}Collapse:last-child { + .#{$ns}Collapse:not(.#{$ns}Collapse--title-bottom):last-child { + border-radius: 0 0 4px 4px; + & > .#{$ns}Collapse-header { + border-radius: 0 0 4px 4px; + } + & + > .#{$ns}Collapse-contentWrapper + > .#{$ns}Collapse-body + > .#{$ns}Collapse-content { + border-radius: 0 0 4px 4px; + } + } + + .#{$ns}Collapse.is-active:not(.#{$ns}Collapse--title-bottom):last-child { + & > .#{$ns}Collapse-header { + border-radius: 0px; + } + } + + .#{$ns}Collapse--title-bottom:last-child { border-radius: 0 0 4px 4px; & > .#{$ns}Collapse-header { border-radius: 0 0 4px 4px; diff --git a/packages/amis/src/renderers/Collapse.tsx b/packages/amis/src/renderers/Collapse.tsx index ad584176d..a44036af4 100644 --- a/packages/amis/src/renderers/Collapse.tsx +++ b/packages/amis/src/renderers/Collapse.tsx @@ -8,10 +8,13 @@ import { autobind, resolveEventData, isPureVariable, - resolveVariableAndFilter + resolveVariableAndFilter, + setThemeClassName, + CustomStyle } from 'amis-core'; import {Collapse as BasicCollapse, Icon} from 'amis-ui'; import {BaseSchema, SchemaCollection, SchemaTpl, SchemaObject} from '../Schema'; +import classNames from 'classnames'; /** * Collapse 折叠渲染器，格式说明。 @@ -208,66 +211,125 @@ export default class Collapse extends React.Component { propsUpdate, mobileUI, divideLine, - enableFieldSetStyle + enableFieldSetStyle, + themeCss, + wrapperCustomStyle } = this.props; const heading = title || header || ''; return ( - - ) : ( - render('arrow-icon', expandIcon || '', { - className: cx('Collapse-icon-tranform') - }) - ) - ) : null - } - collapseHeader={ - collapseTitle || collapseHeader - ? render('heading', collapseTitle || collapseHeader) - : null - } - header={heading ? render('heading', heading) : null} - body={ - children - ? typeof children === 'function' - ? children(this.props) - : children - : body - ? render('body', body) - : null - } - mobileUI={mobileUI} - onCollapse={this.handleCollapseChange} - divideLine={divideLine} - enableFieldSetStyle={enableFieldSetStyle} - > + <> + + ) : ( + render('arrow-icon', expandIcon || '', { + className: cx('Collapse-icon-tranform') + }) + ) + ) : null + } + collapseHeader={ + collapseTitle || collapseHeader + ? render('heading', collapseTitle || collapseHeader) + : null + } + header={heading ? render('heading', heading) : null} + body={ + children + ? typeof children === 'function' + ? children(this.props) + : children + : body + ? render('body', body) + : null + } + mobileUI={mobileUI} + onCollapse={this.handleCollapseChange} + divideLine={divideLine} + enableFieldSetStyle={enableFieldSetStyle} + > + + ); } } diff --git a/packages/amis/src/renderers/CollapseGroup.tsx b/packages/amis/src/renderers/CollapseGroup.tsx index 30db8a7e9..2fd87fa95 100644 --- a/packages/amis/src/renderers/CollapseGroup.tsx +++ b/packages/amis/src/renderers/CollapseGroup.tsx @@ -5,10 +5,13 @@ import { autobind, resolveEventData, isPureVariable, - resolveVariableAndFilter + resolveVariableAndFilter, + setThemeClassName, + CustomStyle } from 'amis-core'; import {BaseSchema, SchemaCollection, SchemaObject} from '../Schema'; import {CollapseGroup} from 'amis-ui'; +import cx from 'classnames'; /** * CollapseGroup 折叠渲染器，格式说明。 @@ -101,7 +104,11 @@ export class CollapseGroupRender extends React.Component< style, render, mobileUI, - data + data, + id, + themeCss, + wrapperCustomStyle, + env } = this.props; let enableFieldSetStyle = this.props.enableFieldSetStyle; @@ -114,18 +121,48 @@ export class CollapseGroupRender extends React.Component< } return ( - - {render('body', body || '', {enableFieldSetStyle})} - + <> + + {render('body', body || '', {enableFieldSetStyle})} + + + ); } } diff --git a/packages/amis/src/renderers/Panel.tsx b/packages/amis/src/renderers/Panel.tsx index 4c1fa2204..5d2ebf43f 100644 --- a/packages/amis/src/renderers/Panel.tsx +++ b/packages/amis/src/renderers/Panel.tsx @@ -3,7 +3,8 @@ import { CustomStyle, RENDERER_TRANSMISSION_OMIT_PROPS, Renderer, - RendererProps + RendererProps, + setThemeClassName } from 'amis-core'; import { BaseSchema, @@ -161,6 +162,8 @@ export default class Panel extends React.Component { subFormMode, subFormHorizontal, id, + themeCss, + wrapperCustomStyle, ...rest } = this.props; @@ -221,6 +224,8 @@ export default class Panel extends React.Component { classnames: cx, id, collapsible, + themeCss, + wrapperCustomStyle, ...rest } = this.props; @@ -267,7 +272,13 @@ export default class Panel extends React.Component { className={cx( 'Panel-footerWrap', footerWrapClassName, - affixFooter ? 'Panel-fixedBottom' : '' + affixFooter ? 'Panel-fixedBottom' : '', + setThemeClassName({ + ...this.props, + name: 'footerControlClassName', + id, + themeCss + }) )} > {footerDoms} @@ -277,14 +288,35 @@ export default class Panel extends React.Component { return (
{header ? (
{render('header', header, subProps)} @@ -296,10 +328,27 @@ export default class Panel extends React.Component { headerControlClassName, { 'is-collapsible': collapsible - } + }, + setThemeClassName({ + ...this.props, + name: 'headerControlClassName', + id, + themeCss + }) )} > -

+

{render('title', title, subProps)}

{collapsible ? ( @@ -324,13 +373,54 @@ export default class Panel extends React.Component { {!collapsed ? (
{this.renderBody()}
) : null} {footerDom} + +
); }