diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e3293a1de892bc496bc9a115d929f30c5e19c47..d4eb7703eacfc7b3b07ba70b59e2dc77525f0750 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,6 +42,8 @@ - 向导面板支持向导表单启用逻辑 - 向导面板支持向导步骤图标 - 新增树部件加载更多和节点绘制器 +- 标签编辑器支持转化为代码项文本 +- 表单视图消息支持直接内容展示,无效配置为对象格式 ### Change @@ -81,6 +83,7 @@ - 工具栏项的绘制逻辑调整为统一方法绘制 - 优化工具栏组件样式,不直接使用基础css变量,组件定义专属变量 - 优化搜索栏组件样式,不直接使用基础css变量,组件定义专属变量 +- 统一处理界面行为按钮按钮类型、按钮行为级别、按钮样式 ### Fixed diff --git a/src/common/action-group/action-group.tsx b/src/common/action-group/action-group.tsx index 9cdaec4037b3d381c9d01919472d09eaa957c960..f3b9da0525f1357ff41e33e81104c2aa353190e5 100644 --- a/src/common/action-group/action-group.tsx +++ b/src/common/action-group/action-group.tsx @@ -158,7 +158,7 @@ export const IBizActionGroup = defineComponent({ renderSeparator(detail.addSeparator), handleClick(detail, e, true)} disabled={props.actionsState[detail.id!].disabled} @@ -210,7 +210,7 @@ export const IBizActionGroup = defineComponent({ size='small' ref='buttonRef' class={this.ns.e('button')} - type={convertBtnType(this.actionDetail.buttonStyle)} + type={convertBtnType(this.actionDetail)} > {{ icon: () => { diff --git a/src/common/action-toolbar/action-toolbar.tsx b/src/common/action-toolbar/action-toolbar.tsx index c6ea347c6e33f6280f4cfcb6a00594862b7ac237..6eceb5e19c9f4e0bebb4af467dbe41d12812c1c5 100644 --- a/src/common/action-toolbar/action-toolbar.tsx +++ b/src/common/action-toolbar/action-toolbar.tsx @@ -65,7 +65,7 @@ export const IBizActionToolbar = defineComponent({ this.handleClick(detail, e)} disabled={this.actionsState[detail.id!].disabled} class={[ diff --git a/src/common/button-list/button-list.scss b/src/common/button-list/button-list.scss index 7a9683c76594fd5c12542fdc575e740428706d1f..8bc157f8a6e624ceeb2358f509b39a75efdf5812 100644 --- a/src/common/button-list/button-list.scss +++ b/src/common/button-list/button-list.scss @@ -12,16 +12,6 @@ width: 100%; height: 100%; - .van-button { - border: none; - .van-button__text { - display: flex; - align-items: center; - gap: getCssVar(spacing, extra, tight); - @include button-list-icon-style; - } - } - @include e(content) { display: flex; flex-wrap: wrap; diff --git a/src/common/button-list/button-list.tsx b/src/common/button-list/button-list.tsx index cedb0a2ac764a33a1543d1cf4a05cba46bf11fdf..9a1251f1ee700ba9fce392f4f56eaadcafb76212 100644 --- a/src/common/button-list/button-list.tsx +++ b/src/common/button-list/button-list.tsx @@ -155,7 +155,7 @@ export const IBizButtonList = defineComponent({ ns.em('item', `${item.id?.toLowerCase()}`), item.sysCss?.cssName, ]} - type={convertBtnType(item.buttonStyle)} + type={convertBtnType(item)} disabled={ props.buttonsState[item.id!]?.disabled || props.disabled } @@ -196,7 +196,7 @@ export const IBizButtonList = defineComponent({ class={ns.e('button')} disabled={props.disabled} onClick={onChangePopover} - type={convertBtnType(buttonListStyle.value)} + type={buttonListStyle.value.toLowerCase()} > {sysImage && ( diff --git a/src/common/rawitem/rawitem.tsx b/src/common/rawitem/rawitem.tsx index eaf4af68db5d01ff36ba87c7c81dec5a9635fa0e..acd8f52d6cedd5976be3534c8c93edb3119995a2 100644 --- a/src/common/rawitem/rawitem.tsx +++ b/src/common/rawitem/rawitem.tsx @@ -80,14 +80,19 @@ export const IBizRawItem = defineComponent({ html: '', }); + const messageTypeIcon: IData = { + WARNING: 'warning-o', + ERROR: 'close', + INFO: 'info-o', + }; + // 类型参数 const alertParams = ref({ - type: 'info', title: '', - closeabled: true, - showIcon: false, + closeabled: false, + showIcon: true, class: '', - wrapable: false, // 是否多行展示 + wrapable: true, // 是否多行展示 'left-icon': '', }); @@ -161,6 +166,13 @@ export const IBizRawItem = defineComponent({ let rawConfig = {}; try { if (typeof rawItemContent.value === 'string') { + // 消息提示支持直接内容展示 + if (['INFO', 'WARNING', 'ERROR'].includes(rawItemType.value)) { + alertParams.value.class = rawItemType.value.toLocaleLowerCase(); + alertParams.value.title = rawItemContent.value; + alertParams.value['left-icon'] = + messageTypeIcon[rawItemType.value]; + } // eslint-disable-next-line no-new-func const func = new Function(`return (${rawItemContent.value});`); rawConfig = func(); @@ -190,14 +202,6 @@ export const IBizRawItem = defineComponent({ case 'INFO': case 'WARNING': case 'ERROR': - alertParams.value.class = - rawItemType.value.toLocaleLowerCase(); - if (rawItemType.value === 'ERROR') { - alertParams.value['left-icon'] = 'close'; - } else { - alertParams.value['left-icon'] = - rawItemType.value.toLocaleLowerCase(); - } Object.assign(alertParams.value, rawConfig); break; default: diff --git a/src/control/form/form-detail/form-button/form-button.tsx b/src/control/form/form-detail/form-button/form-button.tsx index 0916aa267fa7b3332f4d28c19f97da349af3a39f..d61f4feb343e24d5f15ba6c260b165b2ce046fbb 100644 --- a/src/control/form/form-detail/form-button/form-button.tsx +++ b/src/control/form/form-detail/form-button/form-button.tsx @@ -49,7 +49,7 @@ export const FormButton = defineComponent({ > this.controller.onClick(event)} > ); diff --git a/src/control/list/md-ctrl/md-ctrl.tsx b/src/control/list/md-ctrl/md-ctrl.tsx index cf1b9ec99fc1e2172b88d646f2c7e65c734ab1a1..b3b5a7776de5d54edd6e2c40cd6c9e2ca3e139b8 100644 --- a/src/control/list/md-ctrl/md-ctrl.tsx +++ b/src/control/list/md-ctrl/md-ctrl.tsx @@ -197,7 +197,7 @@ export const MDCtrlControl = defineComponent({ // 按钮样式转换 const btnType = (item: IDETBUIActionItem) => { - const _type = convertBtnType(item.buttonStyle); + const _type = convertBtnType(item); return _type === 'default' ? 'primary' : _type; }; diff --git a/src/control/toolbar/toolbar.tsx b/src/control/toolbar/toolbar.tsx index da6cf23adee98aca4f23885f33e378276d8cd064..b02097e16c4f022190c9ed5d3ebd6011b2028840 100644 --- a/src/control/toolbar/toolbar.tsx +++ b/src/control/toolbar/toolbar.tsx @@ -111,8 +111,7 @@ export const ToolbarControl = defineComponent({ }); const btnType = (item: IDETBUIActionItem) => { - if (item.actionLevel && item.actionLevel > 100) return 'primary'; - return convertBtnType(item.buttonStyle); + return convertBtnType(item); }; const getChildrenActions = (item: IDETBGroupItem) => { diff --git a/src/editor/span/span/span.tsx b/src/editor/span/span/span.tsx index 2984bc7e8cc4afb3a53c125d4f887c7495800836..4a2eeda4b5e9df66bb1e64dfffaa4f4cfe6e658d 100644 --- a/src/editor/span/span/span.tsx +++ b/src/editor/span/span/span.tsx @@ -180,6 +180,7 @@ export const IBizSpan = defineComponent({ this.c.editorParams?.SHOWMODE || this.c.editorParams?.showmode } value={this.text} + convertToCodeItemText={this.c.convertToCodeItemText} > ); } else if (this.text) { diff --git a/src/panel-component/panel-button/panel-button.tsx b/src/panel-component/panel-button/panel-button.tsx index 0c155a98b948a9359bbc7219e88902b5ddbefef7..2de315df3885b5b8c957c12c24a17192e4ab9076 100644 --- a/src/panel-component/panel-button/panel-button.tsx +++ b/src/panel-component/panel-button/panel-button.tsx @@ -35,7 +35,6 @@ export const PanelButton = defineComponent({ caption, captionItemName, renderMode, - buttonStyle, showCaption, sysImage, codeName, @@ -52,7 +51,7 @@ export const PanelButton = defineComponent({ const buttonType = computed(() => { if (Object.is(renderMode, 'LINK')) return 'text'; - return convertBtnType(buttonStyle); + return convertBtnType(props.modelData); }); const handleButtonClick = (event: MouseEvent) => { diff --git a/src/util/button-util/button-util.ts b/src/util/button-util/button-util.ts index 7ffb48f86e585552659a945877127e2b8952d91e..8360e48f2de9fccdef204e2ee7d72dac48a43ac3 100644 --- a/src/util/button-util/button-util.ts +++ b/src/util/button-util/button-util.ts @@ -5,12 +5,33 @@ * @param {string} [buttonStyle] * @return {*} {string} */ -export function convertBtnType(buttonStyle?: string): string { +export function convertBtnType(detail: IData): string { + const { buttonStyle, actionLevel } = detail; let buttonType = 'default'; - if ( - buttonStyle && - ['PRIMARY', 'SUCCESS', 'WARNING', 'DANGER'].includes(buttonStyle) - ) - buttonType = buttonStyle.toLowerCase(); + if (buttonStyle) buttonType = buttonStyle.toLowerCase(); + // 样式2为主要色 + if (buttonStyle === 'STYLE2') { + buttonType = 'primary'; + } + // 样式3为反向色 + if (buttonStyle === 'STYLE3') { + buttonType = 'inverse'; + } + // 样式4为危险色 + if (buttonStyle === 'STYLE4') { + buttonType = 'danger'; + } + // 关键操作 + if (actionLevel === 250) { + buttonType = 'danger'; + } + // 常用操作 + if (actionLevel === 200) { + buttonType = 'primary'; + } + // 不常用操作 + if (actionLevel === 50) { + buttonType = 'inverse'; + } return buttonType; }