diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e1bf5444fa6024bada34f54351f4438bee166fe..b428fd8bce752d38c7949246c96450a0b598909e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -84,6 +84,7 @@ - 优化工具栏组件样式，不直接使用基础css变量，组件定义专属变量 - 优化搜索栏组件样式，不直接使用基础css变量，组件定义专属变量 - 统一处理界面行为按钮按钮类型、按钮行为级别、按钮样式 +- 优化多数据选择编辑器的呈现样式 ### Fixed @@ -99,6 +100,7 @@ - 修复多项选择视图树节点数据报错，调整为抛出树节点实体数据 - 修复流程跟踪组件处理环节，提交路径，处理信息异常 - 修复左侧工具栏分组的气泡弹框显示不全 +- 修复级联选择器数据查询异常 ## [0.7.41-alpha.19] - 2025-10-16 diff --git a/src/common/emoji-select/components/categories/categories.scss b/src/common/emoji-select/components/categories/categories.scss index 1b268bee783fe30a0f0ae98eceb957a4778940fe..c1bc93cc54830d6c42f4e000cdba7b73bb3a2666 100644 --- a/src/common/emoji-select/components/categories/categories.scss +++ b/src/common/emoji-select/components/categories/categories.scss @@ -1,27 +1,54 @@ +$emoji-categories: ( + // 颜色 + hover-color: getCssVar('color', 'primary'), + category-color: getCssVar('color', 'text', 1), + + // 字体大小 + category-font-size: getCssVar('font-size', 'header-4'), + + // 行高 + category-line-height: getCssVar('font-size', 'header-6'), + + // 宽度 + category-min-width: getCssVar('font-size', 'header-4'), + + // 高度 + height: getCssVar('height-control', 'large'), + + // 边框 + category-border-top: getCssVar('spacing', 'super-tight') solid getCssVar('color', 'primary'), + + // 间距 + padding: 0 getCssVar('spacing', 'base-loose'), + margin-bottom: getCssVar('spacing', 'tight'), +); + @include b('emoji-categories') { + @include set-component-css-var(emoji-categories, $emoji-categories); + display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; - height: getCssVar('height-control', 'large'); - padding: 0 getCssVar('spacing', 'base-loose'); - margin-bottom: getCssVar('spacing', 'tight'); + height: getCssVar('emoji-categories', 'height'); + padding: getCssVar('emoji-categories', 'padding'); + margin-bottom: getCssVar('emoji-categories', 'margin-bottom'); overflow-x: auto; @include e('category') { display: flex; align-items: center; - min-width: getCssVar('font-size', 'header-4'); + min-width: getCssVar('emoji-categories', 'category-min-width'); height: 100%; - font-size: getCssVar('font-size', 'header-4'); + font-size: getCssVar('emoji-categories', 'category-font-size'); cursor: pointer; @include m('svg') { - line-height: getCssVar('font-size', 'header-6'); + line-height: getCssVar('emoji-categories', 'category-line-height'); svg { - fill: getCssVar('color', 'text', 3); + fill: getCssVar('emoji-categories', 'category-color'); } } @@ -35,15 +62,15 @@ display: block; width: 100%; content: ''; - border-top: getCssVar('spacing', 'super-tight') solid getCssVar('color', 'primary'); + border-top: getCssVar('emoji-categories', 'category-border-top'); } } &:hover { - color: getCssVar('color', 'primary'); + color: getCssVar('emoji-categories', 'hover-color'); svg { - fill: getCssVar('color', 'primary'); + fill: getCssVar('emoji-categories', 'hover-color'); } } } diff --git a/src/common/emoji-select/components/category-label/category-label.scss b/src/common/emoji-select/components/category-label/category-label.scss index 6613dce3de4be50286f78a66f745996ec0cc78e6..383d813c2a362c24e2c07403b1f3901c4a25e1a3 100644 --- a/src/common/emoji-select/components/category-label/category-label.scss +++ b/src/common/emoji-select/components/category-label/category-label.scss @@ -1,6 +1,19 @@ +$emoji-category-label: ( + // 颜色 + color: getCssVar('color', 'text', 1), + + // 字体大小 + font-size: getCssVar('font-size', 'regular'), + + // 间距 + padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'extra-tight'), +); + @include b('emoji-category-label') { - padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'extra-tight'); - font-size: getCssVar('font-size', 'regular'); - color: getCssVar('color', 'text', 3); + @include set-component-css-var(emoji-category-label, $emoji-category-label); + + padding: getCssVar('emoji-category-label', 'padding'); + font-size: getCssVar('emoji-category-label', 'font-size'); + color: getCssVar('emoji-category-label', 'color'); text-transform: uppercase; } diff --git a/src/common/emoji-select/components/emoji-item/emoji-item.scss b/src/common/emoji-select/components/emoji-item/emoji-item.scss index caed7ec570dd031d6396f884554baf5d5df51bc7..ad2bdfd6c8a6ef54735cc3ce80f581bf080330b6 100644 --- a/src/common/emoji-select/components/emoji-item/emoji-item.scss +++ b/src/common/emoji-select/components/emoji-item/emoji-item.scss @@ -1,14 +1,27 @@ +$emoji-item: ( + // 颜色 + bg-color: getCssVar('color', 'bg', 0), + + // 圆角 + border-radius: getCssVar('border-radius', 'small'), + + // 间距 + padding: getCssVar('spacing', 'tight'), +); + @include b('emoji-item') { + @include set-component-css-var(emoji-item, $emoji-item); + box-sizing: content-box; display: flex; align-items: center; justify-self: center; - padding: getCssVar('spacing', 'tight'); + padding: getCssVar('emoji-item', 'padding'); overflow: hidden; cursor: pointer; &.is-border:hover { - background: getCssVar('color', 'bg', 0); - border-radius: getCssVar('border-radius', 'small'); + background: getCssVar('emoji-item', 'bg-color'); + border-radius: getCssVar('emoji-item', 'border-radius'); } } diff --git a/src/common/emoji-select/components/emoji-list/emoji-list.scss b/src/common/emoji-select/components/emoji-list/emoji-list.scss index 26a834e68f0c8121c45ec984d3f72232dd4219b9..4b88cd85f8cb5ba292eb3e539bd0c6f62bbcda7f 100644 --- a/src/common/emoji-select/components/emoji-list/emoji-list.scss +++ b/src/common/emoji-select/components/emoji-list/emoji-list.scss @@ -1,9 +1,20 @@ +$emoji-list: ( + // 颜色 + bg-color: getCssVar('color', 'bg', 0), + + // 间距 + padding-top: getCssVar('spacing', 'tight'), + container-padding: 0 getCssVar('spacing', 'super-tight'), +); + @include b('emoji-list') { + @include set-component-css-var(emoji-list, $emoji-list); + display: block; width: 100%; max-width: 100%; - padding-top: getCssVar('spacing', 'tight'); - background-color: getCssVar('color', 'bg', 0); + padding-top: getCssVar('emoji-list', 'padding-top'); + background-color: getCssVar('emoji-list', 'bg-color'); ::-webkit-scrollbar { width: 0; @@ -15,7 +26,7 @@ @include e('container') { height: 100%; max-height: 27vh; - padding: 0 getCssVar('spacing', 'super-tight'); + padding: getCssVar('emoji-list', 'container-padding'); overflow-y: scroll; } diff --git a/src/common/emoji-select/emoji-select.scss b/src/common/emoji-select/emoji-select.scss index 4a70641dfb971687664e4cc1f149354d77feb47f..685d6125da2b757ccd4d47c8e4cc20f6594cd6e3 100644 --- a/src/common/emoji-select/emoji-select.scss +++ b/src/common/emoji-select/emoji-select.scss @@ -1,9 +1,16 @@ +$emoji-select: ( + // 字体大小 + font-size: getCssVar('font-size', 'regular'), +); + @include b('emoji-select') { + @include set-component-css-var(emoji-select, $emoji-select); + display: inline-flex; flex-direction: column; align-items: center; width: 100%; overflow: hidden; - font-size: getCssVar('font-size', 'regular'); + font-size: getCssVar('emoji-select', 'font-size'); user-select: none; } diff --git a/src/common/rawitem/rawitem.scss b/src/common/rawitem/rawitem.scss index 7dc4a934d94cf06c3f3497c242c919377206e058..80eb4d59b74621484d8a1ffc2f20cba19b606fa6 100644 --- a/src/common/rawitem/rawitem.scss +++ b/src/common/rawitem/rawitem.scss @@ -1,6 +1,9 @@ $rawitem: ( - font-size: getCssVar(font-size, regular), + // 颜色 text-color: getCssVar(editor, default, text-color), + + // 字体大小 + font-size: getCssVar(editor, default, font-size), ); @include b(rawitem) { @include set-component-css-var('rawitem', $rawitem); diff --git a/src/editor/array/ibiz-array/ibiz-array.scss b/src/editor/array/ibiz-array/ibiz-array.scss index f69584f1a899df55a5327d966bc1653787bba44e..3471731587f33751cf4e92a6c9752b236adccc8e 100644 --- a/src/editor/array/ibiz-array/ibiz-array.scss +++ b/src/editor/array/ibiz-array/ibiz-array.scss @@ -1,12 +1,70 @@ +$array: ( + // 颜色 + color: getCssVar(editor, default, text-color), + placeholder-color: getCssVar(editor, default, placeholder-color), + disabled-color: getCssVar(editor, disabled, text-color), + readonly-color: getCssVar(editor, readonly, text-color), + + // 字体大小 + font-size: getCssVar(editor, default, font-size), + + // 行高 + line-height: getCssVar(editor, default, line-height), + + // 文本对齐 + text-align: getCssVar(form-item-container, editor-align), + + // 高度 + min-height: getCssVar(editor, default, line-height), +); + @include b(array) { + @include set-component-css-var('array', $array); + height: 100%; - line-height: getCssVar(editor, default, line-height); - text-align: getCssVar(form-item-container, editor-align); - .van-field{ - line-height: getCssVar(editor, default, line-height); + font-size: getCssVar(array, font-size); + line-height: getCssVar(array, line-height); + color: getCssVar(array, color); + text-align: getCssVar(array, text-align); + + --van-field-input-text-color: #{getCssVar(array, color)}; + --van-cell-text-color: #{getCssVar(array, color)}; + --van-cell-value-color: #{getCssVar(array, color)}; + --van-cell-line-height: #{getCssVar(array, line-height)}; + --van-cell-font-size: #{getCssVar(array, font-size)}; + --van-cell-value-font-size: #{getCssVar(array, font-size)}; + --van-field-input-disabled-text-color: #{getCssVar(array, disabled-color)}; + + input::placeholder { + color: getCssVar(array, placeholder-color); + -webkit-text-fill-color: getCssVar(array, placeholder-color); } ion-icon { cursor: pointer; } + + @include m(disabled) { + color: getCssVar(array, disabled-color); + + --van-field-input-disabled-text-color: #{getCssVar(array, disabled-color)}; + } + + @include m(readonly) { + color: getCssVar(array, readonly-color); + + --van-field-input-text-color: #{getCssVar(array, readonly-color)}; + } +} + +@include b(array-add-icon) { + display: flex; + align-items: center; + min-height: getCssVar(array, min-height); +} + +@include b(array-icons) { + display: flex; + align-items: center; + min-height: getCssVar(array, min-height); } diff --git a/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss b/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss index 8cc5cfc7ac68d0c0bb121ee932ee4890f20d49a3..86d709db2eed0088ea9c4d86492c75e5a23f16a8 100644 --- a/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss +++ b/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss @@ -8,6 +8,9 @@ $cascader: ( // 字体大小 font-size: getCssVar(editor, default, font-size), + // 行高 + line-height: getCssVar(editor, default, line-height), + // 文本对齐 text-align: getCssVar(form-item-container, editor-align), ); @@ -15,14 +18,21 @@ $cascader: ( @include b(cascader) { @include set-component-css-var(cascader, $cascader); - --van-field-input-text-color: #{getCssVar(cascader, color)}; height: 100%; + font-size: getCssVar(cascader, font-size); + line-height: getCssVar(cascader, line-height); color: getCssVar(cascader, color); - .van-field { - font-size: getCssVar(cascader, font-size); + --van-field-input-text-color: #{getCssVar(cascader, color)}; + --van-cell-text-color: #{getCssVar(cascader, color)}; + --van-cell-value-color: #{getCssVar(cascader, color)}; + --van-cell-line-height: #{getCssVar(cascader, line-height)}; + --van-cell-font-size: #{getCssVar(cascader, font-size)}; + --van-cell-value-font-size: #{getCssVar(cascader, font-size)}; + --van-field-input-disabled-text-color: #{getCssVar(cascader, disabled-color)}; + .van-field { &::after { display: none; } diff --git a/src/editor/cascader/ibiz-cascader/ibiz-cascader.tsx b/src/editor/cascader/ibiz-cascader/ibiz-cascader.tsx index 55bc0e44d5fcd4833a5d33220877ee6b2c69950c..3201655252bf9854a7069495f87a0a25d50ca64e 100644 --- a/src/editor/cascader/ibiz-cascader/ibiz-cascader.tsx +++ b/src/editor/cascader/ibiz-cascader/ibiz-cascader.tsx @@ -93,17 +93,26 @@ export const IBizCascader = defineComponent({ const handleQueryParams = async (index: number, value: string) => { const context = clone(c.context); const params = clone(c.params); + // 如果上级和下级具有父子关系，则根据关系字段添加查询参数 if (index > 0) { - const valueItem = valueItems.value[index - 1]; - Object.assign(context, { - [calcDeCodeNameById(valueItem.appDataEntityId)]: value, - }); + const { appDataEntityId: parentAppDataEntityId } = + valueItems.value[index - 1]; + const { appId, appDataEntityId: childAppDataEntityId } = + valueItems.value[index]; const appDataEntity = await ibiz.hub.getAppDataEntity( - valueItem.appDataEntityId, + childAppDataEntityId, + appId, )!; - Object.assign(params, { - [`n_${appDataEntity.keyAppDEFieldId!.toLowerCase()}_eq`]: value, - }); + const { minorAppDERSs } = appDataEntity; + if (minorAppDERSs) { + const appDeRSs = minorAppDERSs.find( + DERSs => DERSs.majorAppDataEntityId === parentAppDataEntityId, + ); + if (appDeRSs && appDeRSs.parentAppDEFieldId) + Object.assign(params, { + [`n_${appDeRSs.parentAppDEFieldId!.toLowerCase()}_eq`]: value, + }); + } } return { context, params }; }; @@ -322,7 +331,7 @@ export const IBizCascader = defineComponent({ {this.readonly && this.value} {!this.readonly && ( ); } - return this.selectItems.map((item: IData) => { - return ( -
-
- {item.srfmajortext} -
-
- { - e.stopPropagation(); - this.onRemove(item[this.c.keyName]); - }} - /> + const showNum = 1; + const showMore = this.selectItems.length - showNum > 0; + return [ + this.selectItems.slice(0, showNum).map((item: IData) => { + return ( +
+
+ {item.srfmajortext} +
+
+ { + e.stopPropagation(); + this.onRemove(item[this.c.keyName]); + }} + /> +
+ ); + }), + showMore && ( +
+ + {this.selectItems.length - showNum}
- ); - }); + ), + ]; }, 'right-icon': () => { if (this.$slots.append) { diff --git a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss index 6a38a4ab2e6274158b66f810d179086c10c01f88..9170d5ffebba2049f1f1accbdd63eadfdadf3750 100644 --- a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss +++ b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss @@ -1,5 +1,6 @@ $picker-select-view: ( // 颜色 + color: getCssVar(editor, default, text-color), icon-color: var(--van-field-right-icon-color), placeholder-color: getCssVar(editor, default, placeholder-color), disabled-color: getCssVar(editor, disabled, text-color), @@ -20,10 +21,17 @@ $picker-select-view: ( @include set-component-css-var(picker-select-view, $picker-select-view); width: 100%; - - .van-field { - font-size: getCssVar(picker-select-view, font-size); - } + font-size: getCssVar(picker-select-view, font-size); + line-height: getCssVar(picker-select-view, line-height); + color: getCssVar(picker-select-view, color); + + --van-field-input-text-color: #{getCssVar(picker-select-view, color)}; + --van-cell-text-color: #{getCssVar(picker-select-view, color)}; + --van-cell-value-color: #{getCssVar(picker-select-view, color)}; + --van-cell-line-height: #{getCssVar(picker-select-view, line-height)}; + --van-cell-font-size: #{getCssVar(picker-select-view, font-size)}; + --van-cell-value-font-size: #{getCssVar(picker-select-view, font-size)}; + --van-field-input-disabled-text-color: #{getCssVar(picker-select-view, disabled-color)}; @include e('pickup-search-icon'){ display: flex; diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss index 7a76c308600f0ac867466d16b57779f0549634bf..9574461285fc2034479637c6cfa41f937dd6d877 100644 --- a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss +++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss @@ -1,11 +1,9 @@ $picker: ( // 颜色 + color: getCssVar(editor, default, text-color), icon-color: var(--van-field-right-icon-color), - border-color: getCssVar(editor, default, border-color), placeholder-color: getCssVar(editor, default, placeholder-color), disabled-color: getCssVar(editor, disabled, text-color), - disabled-bg-color: getCssVar(editor, disabled, bg-color), - disabled-border-color: getCssVar(editor, disabled, border-color), readonly-color: getCssVar(editor, readonly, text-color), pop-search-input-bg-color: getCssVar(color, fill, 2), pop-list-item-selected-color: getCssVar(color, primary), @@ -14,6 +12,9 @@ $picker: ( font-size: getCssVar(editor, default, font-size), icon-font-size: getCssVar(font-size, header, 5), + // 行高 + line-height: getCssVar(editor, default, line-height), + // 文本对齐 text-align: getCssVar(form-item-container, editor-align), @@ -42,10 +43,19 @@ $picker: ( @include set-component-css-var(picker, $picker); height: 100%; + font-size: getCssVar(picker, font-size); + line-height: getCssVar(picker, line-height); + color: getCssVar(picker, color); + + --van-field-input-text-color: #{getCssVar(picker, color)}; + --van-cell-text-color: #{getCssVar(picker, color)}; + --van-cell-value-color: #{getCssVar(picker, color)}; + --van-cell-line-height: #{getCssVar(picker, line-height)}; + --van-cell-font-size: #{getCssVar(picker, font-size)}; + --van-cell-value-font-size: #{getCssVar(picker, font-size)}; + --van-field-input-disabled-text-color: #{getCssVar(picker, disabled-color)}; .van-field { - font-size: getCssVar(picker, font-size); - &::after { display: none; } @@ -100,15 +110,8 @@ $picker: ( } input::placeholder { - color: getCssVar(input, placeholder-color); - -webkit-text-fill-color: getCssVar(input, placeholder-color); - } - - input:disabled { - color: getCssVar(picker, disabled-color); - background-color: getCssVar(picker, disabled-bg-color); - border-color: getCssVar(picker, disabled-border-color); - -webkit-text-fill-color: getCssVar(picker, disabled-color); + color: getCssVar(picker, placeholder-color); + -webkit-text-fill-color: getCssVar(picker, placeholder-color); } @include m(readonly) { diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx b/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx index 4daf1254122a6866c9d549f7b55f5c99898a4391..8027b004732311c799e2f58d53c17b94947b7f19 100644 --- a/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx +++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx @@ -403,7 +403,7 @@ export const IBizPicker = defineComponent({ render() { if (this.readonly) { return ( -
+
{this.value || ''}
); diff --git a/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss b/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss index a35296cb7544cf8bb1e9308f3918becc9f5101f5..dc700c5c806d13334daddd704d2bf021a947ec45 100644 --- a/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss +++ b/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss @@ -2,16 +2,16 @@ $date-picker: ( // 颜色 color: getCssVar(editor, default, text-color), bg-color: transparent, - border-color: getCssVar(editor, default, border-color), placeholder-color: getCssVar(editor, default, placeholder-color), disabled-color: getCssVar(editor, disabled, text-color), - disabled-bg-color: getCssVar(editor, disabled, bg-color), - disabled-border-color: getCssVar(editor, disabled, border-color), readonly-color: getCssVar(editor, readonly, text-color), // 字体大小 font-size: getCssVar(editor, default, font-size), + // 行高 + line-height: getCssVar(editor, default, line-height), + // 文本对齐 text-align: getCssVar(form-item-container, editor-align), ); @@ -20,14 +20,26 @@ $date-picker: ( @include b('date-picker') { @include set-component-css-var(date-picker, $date-picker); + font-size: getCssVar(date-picker, font-size); + line-height: getCssVar(date-picker, line-height); + color: getCssVar(date-picker, color); + + --van-field-input-text-color: #{getCssVar(date-picker, color)}; + --van-cell-text-color: #{getCssVar(date-picker, color)}; + --van-cell-value-color: #{getCssVar(date-picker, color)}; + --van-cell-line-height: #{getCssVar(date-picker, line-height)}; + --van-cell-font-size: #{getCssVar(date-picker, font-size)}; + --van-cell-value-font-size: #{getCssVar(date-picker, font-size)}; + input { width: 100%; + padding: 0; font-size: getCssVar(date-picker, font-size); + line-height: getCssVar(date-picker, line-height); color: getCssVar(date-picker, color); text-align: inherit; background-color: getCssVar(date-picker, bg-color); border: none; - border-color: getCssVar(date-picker, border-color); box-shadow: none; } @@ -38,8 +50,6 @@ $date-picker: ( input[disabled] { color: getCssVar(date-picker, disabled-color); - background-color: getCssVar(date-picker, disabled-bg-color); - border-color: getCssVar(date-picker, disabled-border-color); } @include m(readonly) { diff --git a/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss b/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss index 4adec808ef933eb0eedb93087f0ff3d234a25dcd..375468b7fac21e252ca737586abddddc58e450c1 100644 --- a/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss +++ b/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss @@ -3,7 +3,6 @@ $date-range-picker: ( color: getCssVar(editor, default, text-color), bg-color: transparent, placeholder-color: getCssVar(editor, default, placeholder-color), - border-color: getCssVar(editor, default, border-color), disabled-color: getCssVar(editor, disabled, text-color), readonly-color: getCssVar(editor, readonly, text-color), @@ -14,7 +13,7 @@ $date-range-picker: ( line-height: getCssVar(editor, default, line-height), // 高度 - min-height: calc(var(--van-cell-line-height) + 2px), + min-height: getCssVar(editor, default, line-height), ); @include b(date-range-picker) { @@ -24,6 +23,17 @@ $date-range-picker: ( align-items: center; width: 100%; overflow: hidden; + font-size: getCssVar(date-range-picker, font-size); + line-height: getCssVar(date-range-picker, line-height); + color: getCssVar(date-range-picker, color); + + --van-field-input-text-color: #{getCssVar(date-range-picker, color)}; + --van-cell-text-color: #{getCssVar(date-range-picker, color)}; + --van-cell-value-color: #{getCssVar(date-range-picker, color)}; + --van-cell-line-height: #{getCssVar(date-range-picker, line-height)}; + --van-cell-font-size: #{getCssVar(date-range-picker, font-size)}; + --van-cell-value-font-size: #{getCssVar(date-range-picker, font-size)}; + @include e(content) { position: relative; display: flex; @@ -87,10 +97,10 @@ $date-range-picker: ( width: 100%; padding: 0; font-size: getCssVar(date-range-picker, font-size); + line-height: getCssVar(date-range-picker, line-height); color: getCssVar(date-range-picker, color); background-color: getCssVar(date-range-picker, bg-color); border: none; - border-color: getCssVar(date-range-picker, border-color); box-shadow: none; } @@ -104,16 +114,19 @@ $date-range-picker: ( @include m(disabled) { --van-field-input-text-color: #{getCssVar(date-range-picker, disabled-color)}; + color: getCssVar(date-range-picker, disabled-color); + input { color: getCssVar(date-range-picker, disabled-color); - } } @include m(readonly) { --van-field-input-text-color: #{getCssVar(date-range-picker, readonly-color)}; + color: getCssVar(date-range-picker, readonly-color); + input { color: getCssVar(date-range-picker, readonly-color); } diff --git a/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss b/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss index 502584395e646dc8496ecab9892ceecb69180410..313b8e2b6597a75a830ec0c76590e57a4da4d562 100644 --- a/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss +++ b/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss @@ -1,7 +1,16 @@ $dropdown-list: ( // 颜色 + color: getCssVar(editor, default, text-color), + disabled-color: getCssVar(editor, disabled, text-color), readonly-color: getCssVar(editor, readonly, text-color), - select-item-bg-color: getCssVar(color, disabled, bg), + placeholder-color: getCssVar(editor, default, placeholder-color), + select-item-bg-color: getCssVar(color, primary, light, default), + + // 字体大小 + font-size: getCssVar(editor, default, font-size), + + // 行高 + line-height: getCssVar(editor, default, line-height), // 文本对齐 text-align: getCssVar(form-item-container, editor-align), @@ -12,21 +21,34 @@ $dropdown-list: ( // 间距 gap: getCssVar(spacing, tight), select-item-gap: getCssVar(spacing, tight), - select-item-padding: getCssVar(spacing, tight), + select-item-padding: 0 getCssVar(spacing, tight), ); @include b(dropdown-list) { @include set-component-css-var(dropdown-list, $dropdown-list); height: 100%; + font-size: getCssVar(dropdown-list, font-size); + line-height: getCssVar(dropdown-list, line-height); + color: getCssVar(dropdown-list, color); + --van-field-input-text-color: #{getCssVar(dropdown-list, color)}; + --van-cell-text-color: #{getCssVar(dropdown-list, color)}; + --van-cell-value-color: #{getCssVar(dropdown-list, color)}; + --van-cell-line-height: #{getCssVar(dropdown-list, line-height)}; + --van-cell-font-size: #{getCssVar(dropdown-list, font-size)}; + --van-cell-value-font-size: #{getCssVar(dropdown-list, font-size)}; .van-field__control { gap: getCssVar(dropdown-list, gap); } + @include e('placeholder') { + color: getCssVar(dropdown-list, placeholder-color); + } + @include m(disabled) { - opacity: .8; + --van-field-input-text-color: #{getCssVar(editor, disabled, text-color)}; } @include m(readonly) { @@ -40,14 +62,36 @@ $dropdown-list: ( align-items: center; justify-content: space-between; padding: getCssVar(dropdown-list, select-item-padding); + overflow: hidden; + font-size: getCssVar(dropdown-list, font-size); + line-height: calc(getCssVar(dropdown-list, line-height) - #{rem(4px)}); + text-overflow: ellipsis; + white-space: nowrap; background-color: getCssVar(dropdown-list, select-item-bg-color); border-radius: getCssVar(dropdown-list, select-item-border-radius); + + @include e('text') { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + @include e('close') { + flex-shrink: 0; + } + + @include m('more') { + flex-shrink: 0; + } } + .van-field__value { + width: 100%; + } .van-field__control--custom { display: flex; - flex-flow: row wrap; + flex-direction: row; justify-content: getCssVar(dropdown-list, text-align); } &.#{bem('dropdown-list','','readonly')} { diff --git a/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.tsx b/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.tsx index 5f6d8f93f7a7b72792a1ca2467b05e2655b187af..a0a8c64889df57b96ffde8663648e7d5ae6d9209 100644 --- a/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.tsx +++ b/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.tsx @@ -145,24 +145,43 @@ export const IBizDropdownList = defineComponent({ {{ 'right-icon': , input: () => { - return this.selectItems.map((item: IData) => { + if (!this.selectItems.length) { return ( -
-
- {item.text} -
-
- { - e.stopPropagation(); - this.onRemove(item); - }} - /> +
{this.c.placeHolder}
+ ); + } + const showNum = 1; + const showMore = this.selectItems.length - showNum > 0; + return [ + this.selectItems.slice(0, showNum).map((item: IData) => { + return ( +
+
+ {item.text} +
+
+ { + e.stopPropagation(); + this.onRemove(item); + }} + /> +
+ ); + }), + showMore && ( +
+ + {this.selectItems.length - showNum}
- ); - }); + ), + ]; }, }} , diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss index 7043ea5c70dd927f41cab378b81e6d95b0ccf46b..254aa576632cdcc41bda82c01908a1b6215fc4b8 100644 --- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss +++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss @@ -44,8 +44,16 @@ $dropdown: ( @include set-component-css-var(dropdown, $dropdown); height: 100%; + font-size: getCssVar(dropdown, font-size); + line-height: getCssVar(dropdown, line-height); + color: getCssVar(dropdown, color); --van-field-input-text-color: #{getCssVar(dropdown, color)}; + --van-cell-text-color: #{getCssVar(dropdown, color)}; + --van-cell-value-color: #{getCssVar(dropdown, color)}; + --van-cell-line-height: #{getCssVar(dropdown, line-height)}; + --van-cell-font-size: #{getCssVar(dropdown, font-size)}; + --van-cell-value-font-size: #{getCssVar(dropdown, font-size)}; @include e(select) { height: 100%; diff --git a/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss b/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss index e439c382968b17e53b88555f098e43605a12331d..28c17c19a630711cec88ebe3da184c611ee9feff 100644 --- a/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss +++ b/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss @@ -1,23 +1,51 @@ +$emoji-picker: ( + // 颜色 + color: getCssVar(editor, default, text-color), + disabled-color: getCssVar(editor, disabled, text-color), + readonly-color: getCssVar(editor, readonly, text-color), + icon-color: var(--van-field-clear-icon-color), + + // 字体大小 + font-size: getCssVar(editor, default, font-size), + icon-font-size: var(--van-field-clear-icon-size), + + // 行高 + line-height: getCssVar(editor, default, line-height), + + // 文本对齐 + text-align: getCssVar(form-item-container, editor-align), + + // 高度 + min-height: getCssVar(editor, default, line-height), + + // 间距 + icon-margin-right: getCssVar('spacing', 'extra-tight'), + icon-margin-left: getCssVar('spacing', 'extra-tight'), +); @include b('emoji-picker') { + @include set-component-css-var('emoji-picker', $emoji-picker); + display: flex; align-items: center; width: 100%; height: 100%; - min-height: getCssVar('height-control', 'default'); + font-size: getCssVar(emoji-picker, font-size); + line-height: getCssVar(emoji-picker, line-height); + color: getCssVar(emoji-picker, color); @include e('button-content') { display: flex; align-items: center; - line-height: getCssVar('font-size', 'header-4'); + line-height: getCssVar(emoji-picker, line-height); @include m('icon') { - margin-right: getCssVar('spacing', 'extra-tight'); - fill: getCssVar(color, primary, text); + margin-right: getCssVar(emoji-picker, icon-margin-right); + fill: currentcolor; } @include m('icon-clear') { - margin-left: getCssVar('spacing', 'extra-tight'); - font-size: getCssVar('font-size', 'header-3'); - fill: getCssVar('color', 'text', 3); + margin-left: getCssVar(emoji-picker, icon-margin-left); + font-size: getCssVar(emoji-picker, icon-font-size); + fill: getCssVar(emoji-picker, icon-color); } } @@ -31,18 +59,19 @@ @include m('readonly') { display: flex; align-items: center; + color: getCssVar(emoji-picker, readonly-color); pointer-events: none; } @include m('disabled') { display: flex; align-items: center; + color: getCssVar(emoji-picker, disabled-color); pointer-events: none; - opacity: 0.5; } .#{bem('emoji-picker','button')} { display: flex; flex-direction: row; - justify-content: getCssVar(form-item-container, editor-align); + justify-content: getCssVar(emoji-picker, text-align); } } diff --git a/src/editor/map-picker/ibiz-map-picker/ibiz-map-picker.scss b/src/editor/map-picker/ibiz-map-picker/ibiz-map-picker.scss index 3a0fec4531197f4906ac3256fcb979903e09af03..4e61637c2e489e2315720e48f1de1c11e95fb86e 100644 --- a/src/editor/map-picker/ibiz-map-picker/ibiz-map-picker.scss +++ b/src/editor/map-picker/ibiz-map-picker/ibiz-map-picker.scss @@ -1,20 +1,21 @@ $map-picker: ( // 颜色 + color: getCssVar(editor, default, text-color), + placeholder-color: getCssVar(editor, default, placeholder-color), + disabled-color: getCssVar(editor, disabled, text-color), readonly-color: getCssVar(editor, readonly, text-color), - clear-btn-color: getCssVar(color, text, 3), + clear-btn-color: var(--van-field-clear-icon-color), marker-text-color: getCssVar(color, white), marker-text-bg-color: #3d93fd, // 字体大小 - clear-btn-font-size: getCssVar('width-icon', 'large'), + font-size: getCssVar(editor, default, font-size), + clear-btn-font-size: var(--van-field-clear-icon-size), marker-text-font-size: 12px, // 行高 line-height: getCssVar(editor, default, line-height), - // 宽度 - clear-btn-width: getCssVar('width-icon', 'large'), - // 高度 search-result-container-max-height: 30vh, footer-height: 70px, @@ -36,6 +37,23 @@ $map-picker: ( @include b(map-picker) { @include set-component-css-var(map-picker, $map-picker); + + font-size: getCssVar(map-picker, font-size); + line-height: getCssVar(map-picker, line-height); + color: getCssVar(map-picker, color); + + --van-field-input-text-color: #{getCssVar(map-picker, color)}; + --van-cell-text-color: #{getCssVar(map-picker, color)}; + --van-cell-value-color: #{getCssVar(map-picker, color)}; + --van-cell-line-height: #{getCssVar(map-picker, line-height)}; + --van-cell-font-size: #{getCssVar(map-picker, font-size)}; + --van-cell-value-font-size: #{getCssVar(map-picker, font-size)}; + --van-field-input-disabled-text-color: #{getCssVar(map-picker, disabled-color)}; + + input::placeholder { + color: getCssVar(map-picker, placeholder-color); + -webkit-text-fill-color: getCssVar(map-picker, placeholder-color); + } @include m(readonly) { height: auto; @@ -68,7 +86,6 @@ $map-picker: ( .van-button { position: relative; - width: getCssVar(map-picker, clear-btn-width); height: auto; padding: getCssVar(map-picker, clear-btn-padding); background-color: transparent; diff --git a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss index d3a34dabcd583475a152147d007c7a0c1e0353ca..b94c4502a0fe5f30a02aad6a4b22556201e0d3ea 100644 --- a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss +++ b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss @@ -95,6 +95,10 @@ $markdown: ( max-width: 100%; } + .cherry.cherry--no-toolbar .cherry-previewer { + min-height: 100px; + } + @include m(disabled) { color: getCssVar('markdown', 'disabled-color'); 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 2b926f27e82242b30183c6c9def7fcff1b38fa1d..1b929fe9b564b5b93478277262f7bfd479e8ff07 100644 --- a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx +++ b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx @@ -252,6 +252,7 @@ const IBizMarkDown: any = defineComponent({ newVal => { theme.value = newVal; editor.value?.setTheme(theme.value); + editorPreview.value?.setTheme(theme.value); }, ); diff --git a/src/editor/not-supported-editor/not-supported-editor.scss b/src/editor/not-supported-editor/not-supported-editor.scss index 611498d0e6973074dba823d375dd03fed359aa09..d4f22c603b0ba40bc649648035225e37caa37079 100644 --- a/src/editor/not-supported-editor/not-supported-editor.scss +++ b/src/editor/not-supported-editor/not-supported-editor.scss @@ -1,4 +1,18 @@ +$not-supported-editor: ( + // 颜色 + color: getCssVar(color, danger), + + // 字体大小 + font-size: getCssVar(editor, default, font-size), + + // 行高 + line-height: getCssVar(editor, default, line-height), +); + @include b(not-supported-editor) { - font-size: getCssVar('font-size', 'regular'); - color: getCssVar('color', 'danger'); + @include set-component-css-var(not-supported-editor, $not-supported-editor); + + font-size: getCssVar(not-supported-editor, font-size); + line-height: getCssVar(not-supported-editor, line-height); + color: getCssVar(not-supported-editor, color); } \ No newline at end of file diff --git a/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss b/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss index 0da0f92dcb22c5943e28115b7f1f34ae475b4019..1b09ae5c16d4a73d6d80909d73c3b52b794200b7 100644 --- a/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss +++ b/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss @@ -4,10 +4,15 @@ $number-range-picker: ( placeholder-color: getCssVar(editor, default, placeholder-color), disabled-color: getCssVar(editor, disabled, text-color), readonly-color: getCssVar(editor, readonly, text-color), + clear-color: var(--van-field-clear-icon-color), // 字体大小 font-size: getCssVar(editor, default, font-size), icon-font-size: getCssVar(font-size, header-4), + clear-font-size: var(--van-field-clear-icon-size), + + // 行高 + line-height: getCssVar(editor, default, line-height), // 清除按钮样式 clear-display: getCssVar(form-item-container, required-style), @@ -16,16 +21,23 @@ $number-range-picker: ( @include b(number-range-picker) { @include set-component-css-var(number-range-picker, $number-range-picker); - --van-field-input-text-color: #{getCssVar(number-range-picker, color)}; - width: 100%; + font-size: getCssVar(number-range-picker, font-size); + line-height: getCssVar(number-range-picker, line-height); color: getCssVar(number-range-picker, color); + --van-field-input-text-color: #{getCssVar(number-range-picker, color)}; + --van-cell-text-color: #{getCssVar(number-range-picker, color)}; + --van-cell-value-color: #{getCssVar(number-range-picker, color)}; + --van-cell-line-height: #{getCssVar(number-range-picker, line-height)}; + --van-cell-font-size: #{getCssVar(number-range-picker, font-size)}; + --van-cell-value-font-size: #{getCssVar(number-range-picker, font-size)}; + --van-field-input-disabled-text-color: #{getCssVar(number-range-picker, disabled-color)}; + @include flex(row, center, center); .van-field { flex: 1; - font-size: getCssVar(number-range-picker, font-size); &::after { display: none; @@ -55,7 +67,7 @@ $number-range-picker: ( @include e('clear-icon'){ display: getCssVar(number-range-picker, clear-display); - font-size: getCssVar(number-range-picker, icon-font-size); - opacity: 0.3; + font-size: getCssVar(number-range-picker, clear-font-size); + color: getCssVar(number-range-picker, clear-color); } } \ No newline at end of file diff --git a/src/editor/qrcode/ibiz-qrcode/ibiz-qrcode.scss b/src/editor/qrcode/ibiz-qrcode/ibiz-qrcode.scss index cfc1a22cac4e35579d33495f034e241d9b8d79bb..e42f0fffe52c21b64cd16eb7809906533a657997 100644 --- a/src/editor/qrcode/ibiz-qrcode/ibiz-qrcode.scss +++ b/src/editor/qrcode/ibiz-qrcode/ibiz-qrcode.scss @@ -1,4 +1,11 @@ +$qrcode: ( + // 颜色 + color: getCssVar(color, disabled, text), +); + @include b(qrcode) { + @include set-component-css-var(qrcode, $qrcode); + display: flex; align-items: center; justify-content: center; @@ -6,6 +13,6 @@ height: 100%; @include e('no-img') { - color: getCssVar(color, disabled, text); + color: getCssVar(qrcode, color); } } \ No newline at end of file diff --git a/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss index 8758f07c808794af40e0cc290629040f93004460..c5b1eec8e19ecd6730a4f1c6ebe33a16ee6f5f75 100644 --- a/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss +++ b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss @@ -7,11 +7,13 @@ $radio: ( // 字体大小 font-size: getCssVar(editor, default, font-size), + // 行高 + line-height: getCssVar(editor, default, line-height), + // 文本对齐 text-align: getCssVar(form-item-container, editor-align), // 间距 - padding: getCssVar(spacing, tight) 0, item-gap: getCssVar(spacing, tight), ); @@ -19,7 +21,11 @@ $radio: ( @include set-component-css-var(radio, $radio); height: 100%; - padding: getCssVar(radio, padding); + font-size: getCssVar(radio, font-size); + line-height: getCssVar(radio, line-height); + color: getCssVar(radio, color); + + --van-radio-size: #{getCssVar(radio, font-size)}; .van-radio--horizontal { margin-right: 0; @@ -35,6 +41,7 @@ $radio: ( @include e('text') { font-size: getCssVar(radio, font-size); + line-height: getCssVar(radio, line-height); color: getCssVar(radio, color); } diff --git a/src/editor/rate/ibiz-rate/ibiz-rate.scss b/src/editor/rate/ibiz-rate/ibiz-rate.scss index 11e9617ef41c84755b8e763cb8fe40792c799d27..0dd330e02febddd67ba57a6dc6cc0ad7667005ce 100644 --- a/src/editor/rate/ibiz-rate/ibiz-rate.scss +++ b/src/editor/rate/ibiz-rate/ibiz-rate.scss @@ -1,6 +1,9 @@ $stepper: ( // 颜色 icon-color: getCssVar(color, primary), + + // 高度 + min-height: getCssVar(editor, default, line-height), // 文本对齐 text-align: getCssVar(form-item-container, editor-align), @@ -11,7 +14,9 @@ $stepper: ( display: flex; flex-direction: row; + align-items: center; justify-content: getCssVar(stepper, text-align); + min-height: getCssVar(stepper, min-height); .van-rate { .van-rate__icon--full { diff --git a/src/editor/slider/ibiz-slider/ibiz-slider.scss b/src/editor/slider/ibiz-slider/ibiz-slider.scss index a464662cc89ea8bfab1fa9537fdd864b4ef512f5..542bbd70c380f2e22b5e289cd4cfcff4177661db 100644 --- a/src/editor/slider/ibiz-slider/ibiz-slider.scss +++ b/src/editor/slider/ibiz-slider/ibiz-slider.scss @@ -11,7 +11,7 @@ $slider: ( button-line-height: rem(18px), // 高度 - min-height: rem(20px), + min-height: getCssVar(editor, default, line-height), // 宽度 button-width: rem(26px), diff --git a/src/editor/span/span/span.scss b/src/editor/span/span/span.scss index 3e1f06a985c482283239b02b0ace6eead3d695ed..ae984a290bd4a2d33032fc2ed87957f4c0647e88 100644 --- a/src/editor/span/span/span.scss +++ b/src/editor/span/span/span.scss @@ -1,6 +1,6 @@ $span: ( // 颜色 - color: inherit, + color: getCssVar(editor, default, text-color), disabled-color: getCssVar(editor, disabled, text-color), readonly-color: getCssVar(editor, readonly, text-color), code-list-item-color: getCssVar(color, default), @@ -15,10 +15,10 @@ $span: ( text-align: getCssVar(form-item-container, editor-align), // 间距 - code-list-item-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, base-tight), + code-list-item-padding: 0 getCssVar(spacing, base-tight), // 圆角 - code-list-item-border-radius: getCssVar(border-radius, large), + code-list-item-border-radius: getCssVar(border-radius, medium), ); @include b('span') { diff --git a/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss b/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss index 4c260a2e240b6da0eab8fedf2a2c06e3585d7090..0fa398ba3c356227b963587aa4c7ebd804a702a8 100644 --- a/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss +++ b/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss @@ -1,8 +1,16 @@ $stepper: ( // 颜色 + color: getCssVar(editor, default, text-color), + placeholder-color: getCssVar(editor, default, placeholder-color), disabled-color: getCssVar(editor, disabled, text-color), readonly-color: getCssVar(editor, readonly, text-color), - bg-color: getCssVar(color, bg, 1), + bg-color: transparent, + + // 字体大小 + font-size: getCssVar(editor, default, font-size), + + // 行高 + line-height: getCssVar(editor, default, line-height), // 文本对齐 text-align: getCssVar(form-item-container, editor-align), @@ -14,6 +22,15 @@ $stepper: ( display: flex; flex-direction: row; justify-content: getCssVar(stepper, text-align); + font-size: getCssVar(stepper, font-size); + line-height: getCssVar(stepper, line-height); + color: getCssVar(stepper, color); + + --van-stepper-input-font-size: #{getCssVar(stepper, font-size)}; + --van-stepper-input-line-height: #{getCssVar(stepper, line-height)}; + --van-stepper-input-text-color: #{getCssVar(stepper, color)}; + --van-stepper-input-height: #{getCssVar(stepper, line-height)}; + --van-stepper-input-disabled-text-color: #{getCssVar(stepper, disabled-color)}; .van-stepper { .van-stepper__minus, @@ -26,6 +43,11 @@ $stepper: ( } } + input::placeholder { + color: getCssVar(stepper, placeholder-color); + -webkit-text-fill-color: getCssVar(stepper, placeholder-color); + } + @include m(disabled) { color: getCssVar(stepper, disabled-color); } diff --git a/src/editor/switch/ibiz-switch/ibiz-switch.scss b/src/editor/switch/ibiz-switch/ibiz-switch.scss index 92684200ae157ce921730e75970e7bfb3713ac2a..99f9278f642f529936c859425b3a83949b2cfb3b 100644 --- a/src/editor/switch/ibiz-switch/ibiz-switch.scss +++ b/src/editor/switch/ibiz-switch/ibiz-switch.scss @@ -1,9 +1,10 @@ -$switch: ( +$switch: ( // 文本对齐 text-align: getCssVar(form-item-container, editor-align), // 高度 height: var(--van-switch-height), + min-height: getCssVar(editor, default, line-height), ); @include b('switch') { @@ -11,9 +12,11 @@ $switch: ( display: flex; flex-direction: row; + align-items: center; justify-content: getCssVar(switch, text-align); width: 100%; height: 100%; + min-height: getCssVar(switch, min-height); &.#{bem('switch')} { .van-switch { diff --git a/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss b/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss index 2836d65c8ccd348a06d2f00df2cd4d25bc3a69f8..dab30b560e179317fa7a774925093e3b8bdc01e9 100644 --- a/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss +++ b/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss @@ -1,11 +1,8 @@ $input-number: ( // 颜色 color: getCssVar(editor, default, text-color), - border-color: getCssVar(editor, default, border-color), placeholder-color: getCssVar(editor, default, placeholder-color), disabled-color: getCssVar(editor, disabled, text-color), - disabled-bg-color: getCssVar(editor, disabled, bg-color), - disabled-border-color: getCssVar(editor, disabled, border-color), readonly-color: getCssVar(editor, readonly, text-color), // 字体大小 @@ -28,28 +25,25 @@ $input-number: ( @include set-component-css-var(input-number, $input-number); height: 100%; + font-size: getCssVar(input-number, font-size); + line-height: getCssVar(input-number, line-height); + color: getCssVar(input-number, color); text-align: getCssVar(input-number, text-align); - input { - font-size: getCssVar(input-number, font-size); - line-height: getCssVar(input-number, line-height); - color: getCssVar(input-number, color); - border-color: getCssVar(input-number, border-color); - -webkit-text-fill-color: getCssVar(input-number, color); - } + --van-field-input-text-color: #{getCssVar(input-number, color)}; + --van-cell-text-color: #{getCssVar(input-number, color)}; + --van-cell-value-color: #{getCssVar(input-number, color)}; + --van-cell-line-height: #{getCssVar(input-number, line-height)}; + --van-cell-font-size: #{getCssVar(input-number, font-size)}; + --van-cell-value-font-size: #{getCssVar(input-number, font-size)}; + --van-field-input-disabled-text-color: #{getCssVar(input-number, disabled-color)}; + input::placeholder { color: getCssVar(input-number, placeholder-color); -webkit-text-fill-color: getCssVar(input-number, placeholder-color); } - input:disabled { - color: getCssVar(input-number, disabled-color); - background-color: getCssVar(input-number, disabled-bg-color); - border-color: getCssVar(input-number, disabled-border-color); - -webkit-text-fill-color: getCssVar(input-number, disabled-color); - } - // 只读模式显示 @include m(readonly) { color: getCssVar(input-number, readonly-color); diff --git a/src/editor/text-box/input/input.scss b/src/editor/text-box/input/input.scss index 10ec38696aa3fad99778a27c8d83837de8c81317..0781e1d3a1f91a7400c1d7a85d64753b72412db5 100644 --- a/src/editor/text-box/input/input.scss +++ b/src/editor/text-box/input/input.scss @@ -1,11 +1,8 @@ $input: ( // 颜色 color: getCssVar(editor, default, text-color), - border-color: getCssVar(editor, default, border-color), placeholder-color: getCssVar(editor, default, placeholder-color), disabled-color: getCssVar(editor, disabled, text-color), - disabled-bg-color: getCssVar(editor, disabled, bg-color), - disabled-border-color: getCssVar(editor, disabled, border-color), readonly-color: getCssVar(editor, readonly, text-color), // 字体大小 @@ -25,32 +22,24 @@ $input: ( @include set-component-css-var(input, $input); height: 100%; + font-size: getCssVar(input, font-size); + line-height: getCssVar(input, line-height); + color: getCssVar(input, color); text-align: getCssVar(input, text-align); - @include b('input') { - font-size: getCssVar(input, font-size); - } + --van-field-input-text-color: #{getCssVar(input, color)}; + --van-cell-text-color: #{getCssVar(input, color)}; + --van-cell-value-color: #{getCssVar(input, color)}; + --van-cell-line-height: #{getCssVar(input, line-height)}; + --van-cell-font-size: #{getCssVar(input, font-size)}; + --van-cell-value-font-size: #{getCssVar(input, font-size)}; + --van-field-input-disabled-text-color: #{getCssVar(input, disabled-color)}; - input { - font-size: getCssVar(input, font-size); - line-height: getCssVar(input, line-height); - color: getCssVar(input, color); - border-color: getCssVar(input, border-color); - -webkit-text-fill-color: getCssVar(input, color); - } - - input::placeholder { + input::placeholder, textarea::placeholder { color: getCssVar(input, placeholder-color); -webkit-text-fill-color: getCssVar(input, placeholder-color); } - input:disabled { - color: getCssVar(input, disabled-color); - background-color: getCssVar(input, disabled-bg-color); - border-color: getCssVar(input, disabled-border-color); - -webkit-text-fill-color: getCssVar(input, disabled-color); - } - @include m(readonly) { color: getCssVar(input, readonly-color); -webkit-text-fill-color: getCssVar(input, readonly-color); diff --git a/src/editor/text-box/signature/signature.scss b/src/editor/text-box/signature/signature.scss index fbdda502e5824b645621467133903bcb88f5e65a..8b4935d2f420576c918005125f2de348aebda8d0 100644 --- a/src/editor/text-box/signature/signature.scss +++ b/src/editor/text-box/signature/signature.scss @@ -1,10 +1,33 @@ /* stylelint-disable length-zero-no-unit */ $signature: ( - 'min-height': 120px, -); -$signature-overlay: ( - // 适配浏览器安全距离 - 'padding-bottom': 0px + // 颜色 + color: getCssVar('color', 'text', 2), + bg-color: getCssVar('color', 'black'), + btn-bg-color: var(--van-uploader-delete-background), + overlay-bg-color: getCssVar(color, bg, 1), + + // 字体大小 + font-size: getCssVar('font-size', 'header-6'), + + // 宽度 + btn-width: getCssVar('spacing', 'loose'), + + // 高度 + min-height: 120px, + btn-height: getCssVar('spacing', 'loose'), + + // 圆角 + border-radius: getCssVar('border-radius', 'large'), + + // 边框 + border: var(--van-uploader-delete-background), + + // 间距 + btn-margin-left: getCssVar('spacing', 'loose'), + overlay-padding-bottom: 0px, + overlay-header-padding: getCssVar('spacing', 'extra-tight'), + footer-btn-padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'loose'), + footer-margin-left: getCssVar('spacing', 'loose'), ); @include b('signature') { @@ -16,7 +39,7 @@ $signature-overlay: ( min-height: getCssVar('signature', 'min-height'); overflow: hidden; border: none; - border-radius: getCssVar('border-radius', 'large'); + border-radius: getCssVar('signature', 'border-radius'); @include e('modal') { position: absolute; @@ -30,12 +53,12 @@ $signature-overlay: ( @include m('background') { width: 100%; height: 100%; - background-color: getCssVar('color', 'black'); + background-color: getCssVar('signature', 'bg-color'); opacity: 0.1; } @include m('caption') { position: absolute; - color: getCssVar('color', 'text', 2); + color: getCssVar('signature', 'color'); } @include m('toolbar') { position: absolute; @@ -43,15 +66,15 @@ $signature-overlay: ( right: getCssVar('spacing', 'tight'); .van-button { - width: getCssVar('spacing', 'loose'); + width: getCssVar('signature', 'btn-width'); height: auto; - height: getCssVar('spacing', 'loose'); - background-color: var(--van-uploader-delete-background); - border: var(--van-uploader-delete-background); + height: getCssVar('signature', 'btn-height'); + background-color: getCssVar('signature', 'btn-bg-color'); + border: getCssVar('signature', 'border'); opacity: 0.6; & + .van-button { - margin-left: getCssVar('spacing', 'loose'); + margin-left: getCssVar('signature', 'btn-margin-left'); } } } @@ -75,13 +98,11 @@ $signature-overlay: ( } @include b('signature-overlay') { - @include set-component-css-var('signature-overlay', $signature-overlay); - position: absolute; z-index: 1; width: 0; height: 0; - background-color: getCssVar(color, bg, 1); + background-color: getCssVar('signature', 'overlay-bg-color'); opacity: 0; @include when('full-screen') { @@ -96,7 +117,7 @@ $signature-overlay: ( position: absolute; top: 0; left: 0; - width: calc(100vh - #{getCssVar('signature-overlay', 'padding-bottom')}); + width: calc(100vh - #{getCssVar('signature', 'overlay-padding-bottom')}); height: 100vw; transform: rotate(90deg) translateY(-100%); transform-origin: top left; @@ -104,7 +125,7 @@ $signature-overlay: ( @include e('header') { position: absolute; z-index: 6; - padding: getCssVar('spacing', 'extra-tight'); + padding: getCssVar('signature', 'overlay-header-padding'); text-align: left; } @@ -116,11 +137,11 @@ $signature-overlay: ( .van-button { height: auto; - padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'loose'); - font-size: getCssVar('font-size', 'header-6'); + padding: getCssVar('signature', 'footer-btn-padding'); + font-size: getCssVar('signature', 'font-size'); & + .van-button { - margin-left: getCssVar('spacing', 'loose'); + margin-left: getCssVar('signature', 'footer-margin-left'); } } } @@ -133,7 +154,7 @@ $signature-overlay: ( top: 0; left: 0; width: 100vw; - height: calc(100vh - #{getCssVar('signature-overlay', 'padding-bottom')}); + height: calc(100vh - #{getCssVar('signature', 'overlay-padding-bottom')}); transform: rotate(-90deg) translateX(-100%); transform-origin: top left; } diff --git a/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss b/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss index b1c8897385235ed44e8f434b55912faf3c416fc4..01c84aa4ce72142a3d64f8e26153f50061ccb1ad 100644 --- a/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss +++ b/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss @@ -21,6 +21,7 @@ $file-upload: ( // 高度 btn-height: rem(20px), preview-item-img-height: rem(40px), + min-height: getCssVar(editor, default, line-height), // 间距 preview-margin-top: rem(10px), @@ -135,9 +136,17 @@ $file-upload: ( text-align: right; } + .van-uploader__wrapper { + display: flex; + align-items: center; + min-height: getCssVar(file-upload, min-height); + } + .van-uploader__input-wrapper { + display: flex; + align-items: center; + justify-content: right; width: 100%; - text-align: right; input { right: 0;