diff --git a/CHANGELOG.md b/CHANGELOG.md index 34a69f11ca5d3d74245a316aca39d44f2a940651..a5f825f654c05bc556ecbba094b4a76aa948430a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - 编辑器样式变量统一 - searchBar支持快速分组 +- input输入框编辑器识别宽度和高度配置 ### Fixed @@ -22,6 +23,8 @@ - 界面关闭操作确认，确认按钮改为异常色 - 门户部件标题头部样式调整 - 表单分页tabs头底部margin调整 +- markdown编辑器默认处于纯编辑模式和默认不focus +- 搜索表单和分组面板样式调整 ## [0.1.13] - 2023-08-29 diff --git a/src/control/form/form-detail/form-group-panel/form-group-panel.scss b/src/control/form/form-detail/form-group-panel/form-group-panel.scss index 56e5a5422b7ac13e5c12959bdc6005f759a41fe8..0ef3ef96f46c3012106bef77efccf59eb5b5f0f6 100644 --- a/src/control/form/form-detail/form-group-panel/form-group-panel.scss +++ b/src/control/form/form-detail/form-group-panel/form-group-panel.scss @@ -2,12 +2,14 @@ $form-group: ( 'bg-color': transparent, 'footer-padding': getCssVar(spacing, tight) getCssVar(spacing, base), 'show-more-color': getCssVar('color-primary'), + 'footer-height': 35px, ); $form-group-header: ( 'bg-color': transparent, 'padding': getCssVar(spacing, base, tight), 'border-color': getCssVar('color', 'border'), + 'height': 49px, ); $form-group-caption: ( @@ -63,6 +65,7 @@ $form-group-content: ( @include b(form-group-header) { @include flex; + height: getCssVar('form-group-header', 'height'); padding: getCssVar('form-group-header', 'padding'); margin: getCssVar('form-group-header', 'margin'); border-bottom: 1px solid getCssVar('form-group-header', 'border-color'); @@ -77,14 +80,33 @@ $form-group-content: ( } } +@include b(form-group-content) { + height: 100%; +} + .#{bem('form-group', '', 'show-header')} { > .#{bem('form-group-content')} { + height: calc(100% - getCssVar('form-group-header', 'height')); padding: getCssVar('form-group-content', 'padding'); background-color: getCssVar('form-group-content', 'bg-color'); } } +.#{bem('form-group', '', 'show-more')} { + > .#{bem('form-group-content')} { + height: calc(100% - getCssVar('form-group', 'footer-height')); + } +} + +.#{bem('form-group', '', 'show-header')}.#{bem('form-group', '', 'show-more')} { + > .#{bem('form-group-content')} { + height: calc(100% - getCssVar('form-group-header', 'height') - getCssVar('form-group', 'footer-height')); + } +} + + @include b(form-group-footer) { + height: getCssVar('form-group', 'footer-height'); padding: getCssVar('form-group', 'footer-padding'); @include e(show-more-button) { diff --git a/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss b/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss index bfb084d859add93f6bd35ce2c9deb88e3297b8da..7a6affd348291c513dcbf919eb8c89915cc9f8bc 100644 --- a/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss +++ b/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss @@ -4,7 +4,7 @@ $form-item-container: ( 'require-mark-color': getCssVar(color, danger), 'label-left-padding': 6px getCssVar(spacing, base-tight) 6px 0, 'label-right-padding': 6px 0 6px getCssVar(spacing, base-tight), - 'padding': 0 0 getCssVar(font-size, regular) 0, + 'padding': 0 getCssVar('spacing', 'extra-tight') getCssVar('spacing', 'base') getCssVar('spacing', 'extra-tight'), 'font-size': getCssVar(font-size, regular), 'label-color': getCssVar(color, text, 1), 'error-font-size': getCssVar(font-size, regular), @@ -107,8 +107,8 @@ $form-item-container: ( top: 100%; width: 100%; font-size: getCssVar('form-item-container', 'error-font-size'); + line-height: calc(getCssVar('form-item-container', 'error-font-size') + 2px); color: getCssVar('form-item-container', 'error-color'); - line-height: getCssVar('form-item-container', 'error-font-size'); word-wrap: break-word; } diff --git a/src/control/form/search-form/search-form.scss b/src/control/form/search-form/search-form.scss index 306025507979d335f8ff3d7f2b6c4cc8adaa4306..006c8ca2e70101de2f69f3cb2a6f5ae56d50af5d 100644 --- a/src/control/form/search-form/search-form.scss +++ b/src/control/form/search-form/search-form.scss @@ -7,8 +7,9 @@ $control-searchform: ( @include b(control-searchform-buttons) { @include flex(row, flex-end, center); - height: 100%; flex-shrink: 0; + height: 100%; + margin-left: getCssVar(spacing, tight); text-align: right; } diff --git a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx index 610b214e4851fdef9eba06a51d1706ef87edf59f..bc33627e92fd39a5eff17ce43c2de7a01079a120 100644 --- a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx +++ b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx @@ -51,7 +51,7 @@ const IBizMarkDown: any = defineComponent({ const theme = ref(UIStore.theme); // 编辑器模式 - const defaultModel = ref('edit&preview'); + const defaultModel = ref('editOnly'); // data响应式变更基础路径 watch( @@ -156,6 +156,10 @@ const IBizMarkDown: any = defineComponent({ // editOnly: 纯编辑模式（没有预览，可通过toolbar切换成双栏或预览模式） // previewOnly: 预览模式（没有编辑框，toolbar只显示“返回编辑”按钮，可通过toolbar切换成编辑模式） defaultModel: defaultModel.value, + codemirror: { + // 是否自动focus 默认为true + autofocus: false, + }, }, toolbars: { theme: theme.value, diff --git a/src/editor/text-box/input/input.tsx b/src/editor/text-box/input/input.tsx index 71abd1c5eef1bd4f53fc27fae373fd94bc83608a..8b72dfc7646b7a7caa9282c5ec6bd39e9973e57f 100644 --- a/src/editor/text-box/input/input.tsx +++ b/src/editor/text-box/input/input.tsx @@ -130,6 +130,7 @@ export const IBizInput = defineComponent({ }, render() { const { unitName } = this.c.parent; + const { editorWidth, editorHeight } = this.c.model; let content = null; if (this.readonly) { @@ -178,6 +179,10 @@ export const IBizInput = defineComponent({ this.disabled ? this.ns.m('disabled') : '', this.readonly ? this.ns.m('readonly') : '', ]} + style={{ + width: editorWidth ? `${editorWidth}px` : '', + height: editorHeight ? `${editorHeight}px` : '', + }} > {content}