From a1c6fa3af1dcafa45af934e080ea365bfd99ae68 Mon Sep 17 00:00:00 2001 From: ShineKOT <1917095344@qq.com> Date: Tue, 11 Mar 2025 19:09:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=20=E8=A1=A8=E5=8D=95=E9=A1=B9=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E8=AF=86=E5=88=AB=E5=B1=9E=E6=80=A7=E9=9B=86tips?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + .../form-item-container.scss | 71 +++++++--- .../form-item-container.tsx | 131 +++++++++++------- .../form/form-detail/form-item/form-item.tsx | 15 +- src/locale/en/index.ts | 3 + src/locale/zh-CN/index.ts | 3 + 6 files changed, 145 insertions(+), 79 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 57487865..0e99c1b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - 新增打开Ai聊天应用工具方法 - 补充PC端编辑器的绘制呈现 +- 表单项新增识别属性集tips ## [0.0.52] - 2025-02-11 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 d4b89a4f..0a360098 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 @@ -1,4 +1,5 @@ -$form-item-container: (label-width: rem(130px), +$form-item-container: ( + label-width: rem(130px), line-height: getCssVar(form-item, line-height), require-mark-color: getCssVar(color, danger), container-padding: getCssVar(spacing, base), @@ -7,20 +8,19 @@ $form-item-container: (label-width: rem(130px), bg-color: getCssVar(color, bg, 1), label-font-size: getCssVar(font-size, header-6), label-text-color: getCssVar(color, text, 0), - container-error-padding:0 getCssVar(spacing, base), - editor-padding: getCssVar(spacing, tight) getCssVar(spacing, none) getCssVar(spacing, tight) getCssVar(spacing, none), + container-error-padding: 0 getCssVar(spacing, base), + editor-padding: getCssVar(spacing, tight) getCssVar(spacing, none) + getCssVar(spacing, tight) getCssVar(spacing, none), border: rem(1px) getCssVar(color, border) solid, border-radius: rem(4px), ); - -$form-item-label: (line-height: 1, +$form-item-label: ( + line-height: 1, font-size: getCssVar(font-size, header-5), text-color: getCssVar(color, text, 0), ); - - // 表单项基础样式 @include b(form-item-container) { @include set-component-css-var('form-item-container', $form-item-container); @@ -37,7 +37,7 @@ $form-item-label: (line-height: 1, border-width: calc(100% - getCssVar(spacing, base) * 2); border-radius: getCssVar(border-radius, small); - @include when(show-underLine){ + @include when(show-underLine) { &::after { position: absolute; z-index: 1; @@ -45,14 +45,16 @@ $form-item-label: (line-height: 1, height: rem(1px); content: ''; background-color: getCssVar(color, border); - transform: scaleY(.5); + transform: scaleY(0.5); } } @include when(show-border) { .#{bem(form-item-container, editor)} { margin-top: rem(4px); - min-height: calc(getCssVar(form-item, line-height) + 2 * getCssVar(spacing, tight)); + min-height: calc( + getCssVar(form-item, line-height) + 2 * getCssVar(spacing, tight) + ); outline: getCssVar(form-item-container, border); border-radius: getCssVar(form-item-container, border-radius); padding: getCssVar(spacing, tight); @@ -65,17 +67,50 @@ $form-item-label: (line-height: 1, } } + @include e(popover) { + &.van-popover { + font-size: getCssVar(font-size, header-6); + + table { + border-spacing: 0; + border-collapse: collapse; + } + + table tr td, + table tr th { + border: 1px solid getCssVar(color, border); + padding: getCssVar(spacing, extra-tight) getCssVar(spacing, tight); + } + } + + @include m(content) { + overflow: auto; + max-height: 30vh; + padding: getCssVar(spacing, tight); + + a { + color: getCssVar(color, link); + } + } + } + @include e(label) { - position: relative; + display: flex; flex-shrink: 0; + align-items: center; + position: relative; width: getCssVar(form-item-container, label-width); overflow: visible; color: getCssVar(form-item-label, text-color); height: getCssVar(form-item, line-height); line-height: getCssVar(form-item, line-height); + + @include m('icon') { + padding-right: getCssVar(spacing, extra-tight); + } + span { @include utils-ellipsis; - display: inline-block; width: 100%; font-size: getCssVar(form-item-container, label-font-size); @@ -87,7 +122,9 @@ $form-item-label: (line-height: 1, @include e(editor) { width: 100%; text-align: getCssVar(form-item-container, editor-align); - min-height: calc(getCssVar(form-item, line-height) + 2 * getCssVar(spacing, tight)); + min-height: calc( + getCssVar(form-item, line-height) + 2 * getCssVar(spacing, tight) + ); #{--van-cell-line-height}: getCssVar(form-item, line-height); #{--van-cell-line-height}: getCssVar(form-item, line-height); @@ -112,7 +149,7 @@ $form-item-label: (line-height: 1, height: 100%; font-size: rem(14px); color: getCssVar(form-item, error-color); - content: "*"; + content: '*'; } } } @@ -132,9 +169,7 @@ $form-item-label: (line-height: 1, } } - @include b(form-item-container) { - @include m(left) { .#{bem(form-item-container, editor)} { min-height: getCssVar(form-item, line-height); @@ -191,7 +226,8 @@ $form-item-label: (line-height: 1, } } - @include e(label) {} + @include e(label) { + } } // border @@ -206,7 +242,6 @@ $form-item-label: (line-height: 1, height: 100%; @include flex(row, center, center); - } } diff --git a/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx b/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx index b2ec604e..019a5f61 100644 --- a/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx +++ b/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx @@ -1,49 +1,34 @@ +/* eslint-disable no-unused-expressions */ +import { computed, PropType, defineComponent } from 'vue'; import { useNamespace } from '@ibiz-template/vue3-util'; -import { computed, defineComponent } from 'vue'; -import './form-item-container.scss'; import { FormItemController } from '@ibiz-template/runtime'; +import './form-item-container.scss'; export const IBizFormItemContainer = defineComponent({ name: 'IBizFormItemContainer', props: { controller: { - type: FormItemController, - required: true, - }, - required: { - type: Boolean, - required: true, - }, - error: { - type: String, - }, - label: { - type: String, - }, - labelClass: { - type: Array, - }, - labelPos: { - type: String, + type: Object as PropType, required: true, }, - labelWidth: { - type: Number, - default: 130, - }, }, setup(props) { const ns = useNamespace('form-item-container'); let labelAlign: 'right' | 'left' = 'left'; let editorAlign: 'right' | 'left' = 'right'; + const c = props.controller; + const { labelPos, labelWidth, enableInputTip, sysImage } = c.model; + const { mobformitemalignmode, mobshowunderline, mobshoweditorborder, mobhideclear, - } = props.controller.form.controlParams; + } = c.form.controlParams; + const editorContentAlign = mobformitemalignmode || ibiz.config.form.mobFormItemAlignMode; + let showUnderLine = ibiz.config.form.mobShowUnderLine; let showEditorBorder = ibiz.config.form.mobShowEditorBorder; let hideClear = false; @@ -58,7 +43,7 @@ export const IBizFormItemContainer = defineComponent({ hideClear = Object.is(mobhideclear, 'true'); } // 编辑器参数优先级最高 - const editorParams = props.controller.editor?.model?.editorParams || {}; + const editorParams = c.editor?.model?.editorParams || {}; const { MOBSHOWEDITORBORDER, MOBSHOWUNDERLINE, MOBHIDECLEAR } = editorParams; if (MOBSHOWUNDERLINE) { @@ -71,7 +56,7 @@ export const IBizFormItemContainer = defineComponent({ hideClear = Object.is(MOBHIDECLEAR, 'true'); } const cssVars = computed(() => { - switch (props.labelPos) { + switch (labelPos) { case 'LEFT': labelAlign = 'left'; editorAlign = 'right'; @@ -98,8 +83,8 @@ export const IBizFormItemContainer = defineComponent({ 'label-align': labelAlign, 'editor-align': editorAlign, }; - if (props.labelWidth !== 130) { - Object.assign(result, { 'label-width': `${props.labelWidth}px` }); + if (labelWidth !== 130) { + Object.assign(result, { 'label-width': `${labelWidth}px` }); } if (hideClear) { Object.assign(result, { 'required-style': 'none' }); @@ -108,38 +93,90 @@ export const IBizFormItemContainer = defineComponent({ } return ns.cssVarBlock(result); }); - return { ns, cssVars, showUnderLine, showEditorBorder }; + + const handleClick = (e: MouseEvent) => { + enableInputTip ? c.loadInputTip() : e.stopPropagation(); + }; + + const renderLabel = () => { + return ( + + {{ + default: () => { + return ( +
+
+ {c.state.inputTipUrl && ( + + {ibiz.i18n.t('component.formItemContainer.more')} + + )} +
+ ); + }, + reference: () => { + return ( +
+ {enableInputTip && ( + + )} + {sysImage && ( + + )} + {c.labelCaption} +
+ ); + }, + }} + + ); + }; + + return { ns, cssVars, showUnderLine, showEditorBorder, renderLabel }; }, render() { - const labelClassList = [this.ns.e('label'), ...(this.labelClass || [])]; + const { labelPos } = this.controller.model; return (
- {this.labelPos === 'LEFT' || this.labelPos === 'TOP' ? ( -
- {this.label} -
- ) : null} + {labelPos && ['LEFT', 'TOP'].includes(labelPos) && this.renderLabel()}
{this.$slots.default?.()}
- {this.labelPos === 'RIGHT' || this.labelPos === 'BOTTOM' ? ( -
- {this.label} -
- ) : null} + {labelPos && + ['RIGHT', 'BOTTOM'].includes(labelPos) && + this.renderLabel()}
- {this.error ? ( -
{this.error}
+ {this.controller.state.error ? ( +
{this.controller.state.error}
) : null}
); diff --git a/src/control/form/form-detail/form-item/form-item.tsx b/src/control/form/form-detail/form-item/form-item.tsx index e8abf85d..a24af1f2 100644 --- a/src/control/form/form-detail/form-item/form-item.tsx +++ b/src/control/form/form-detail/form-item/form-item.tsx @@ -26,14 +26,7 @@ export const FormItem = defineComponent({ const onValueChange = (val: unknown, name?: string) => { props.controller.setDataValue(val, name); }; - const { captionItemName, caption } = props.modelData; - const captionText = computed(() => { - if (captionItemName && props.controller.data) { - return props.controller.data[captionItemName.toLowerCase()]; - } - return caption; - }); - return { ns, captionText, c, onValueChange }; + return { ns, c, onValueChange }; }, render() { if (!this.c.state.visible) { @@ -84,13 +77,7 @@ export const FormItem = defineComponent({ { [this.ns.m('readonly')]: this.controller.model.editor!.readOnly }, ...this.controller.containerClass, ]} - required={this.c.state.required} - error={this.c.state.error} - label={this.captionText} - labelClass={this.controller.labelClass} - label-pos={this.c.model.labelPos} controller={this.c} - label-width={this.c.model.labelWidth} onClick={(event: MouseEvent) => this.c.onClick(event)} > {editor} diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts index 8cebcb0a..637faa6d 100644 --- a/src/locale/en/index.ts +++ b/src/locale/en/index.ts @@ -61,6 +61,9 @@ export default { selectDate: 'Please select a date', noSelect: 'No Select', }, + formItemContainer: { + more: 'More', + }, }, // 部件 control: { diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts index db87da8b..2edb96e5 100644 --- a/src/locale/zh-CN/index.ts +++ b/src/locale/zh-CN/index.ts @@ -56,6 +56,9 @@ export default { selectDate: '请选择日期', noSelect: '暂无选中', }, + formItemContainer: { + more: '更多', + }, }, // 部件 control: { -- Gitee