diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f11df7dec12ccac8cda897c654ad0a030951c23..4aedd7d8a45a2247d0c388ca4125e22629aab4b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -123,6 +123,8 @@ - 迁移数据关系分页通知事件(分页切换)至控制器中 - 优化浮动按钮及信息项通用组件的绘制逻辑及样式 - 优化分页导航引擎的视图刷新逻辑,使其与pc端视图刷新保持一致 +- 修改数据看板自定义布局逻辑 +- 修改移动端多数据选择编辑器的选择逻辑 ### Fixed @@ -150,6 +152,8 @@ - 修复菜单图标样式呈现不正确异常 - 修复开启下拉刷新后视图返回按钮失效异常 - 修复数据关系分页隐藏编辑项逻辑计算异常及计数器禁用未生效 +- 修复表单锚点未固定在视口异常 +- 修复表单错误提示显示样式不正确异常 ## [0.7.41-alpha.19] - 2025-10-16 diff --git a/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.scss b/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.scss index 48dae347f821a7f54158749d7fc2d073caba38e8..c00e65907417c8d31ad7d9e802fcee96a12702d1 100644 --- a/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.scss +++ b/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.scss @@ -1,33 +1,29 @@ $custom-dashboard-design: ( // 颜色 - color: getCssVar(color, text, 0), - bg-color: getCssVar(color, bg, 0), save-btn-color: getCssVar(color, primary), - group-header-color: getCssVar(color, text, 1), - group-content-bg-color: getCssVar(color, bg, 1), - remove-btn-color: getCssVar(color, danger), - add-btn-color: getCssVar(color, primary), + item-bg-color: getCssVar(color, bg, 0), + + // 高度 + item-height: getCssVar(height-control, large), // 间距 - header-padding: getCssVar(spacing, base), - content-padding: 0 getCssVar(spacing, base) getCssVar(spacing, base), - group-margin-bottom: getCssVar(spacing, base), - group-header-margin-bottom: getCssVar(spacing, base), - group-content-padding: getCssVar(spacing, base) getCssVar(spacing, base-tight), - item-padding: getCssVar(spacing, base-tight) 0, - btn-margin-right: getCssVar(spacing, tight), + padding: getCssVar(spacing, base), + header-padding: 0 0 getCssVar(spacing, tight), + item-padding: 0 getCssVar(spacing, base), + item-margin: getCssVar(spacing, tight) 0, + item-icon-margin-right: getCssVar(spacing, extra-tight), + item-checkbox-margin-left: getCssVar(spacing, extra-tight), // 圆角 - group-content-border-radius: getCssVar(border, radius, medium), + item-border-radius: getCssVar(border, radius, medium), // 字体大小 - btn-font-size: getCssVar(font-size, header-3), + header-font-size: getCssVar(font-size, header-5), + close-btn-font-size: getCssVar(font-size, header-3), + item-font-size: getCssVar(font-size, header-6), // 字体粗细 header-title-font-weight: getCssVar(font-weight, bold), - - // 边框 - item-border-bottom: 1px solid getCssVar(color, border), ); @include b(custom-dashboard-design) { @@ -36,8 +32,7 @@ $custom-dashboard-design: ( display: flex; flex-direction: column; height: 100%; - color: getCssVar(custom-dashboard-design, color); - background-color: getCssVar(custom-dashboard-design, bg-color); + padding: getCssVar(custom-dashboard-design, padding); } @include b(custom-dashboard-design-header) { @@ -46,10 +41,11 @@ $custom-dashboard-design: ( align-items: center; justify-content: space-between; padding: getCssVar(custom-dashboard-design, header-padding); + font-size: getCssVar(custom-dashboard-design, header-font-size); @include e(close-btn) { flex-shrink: 0; - font-size: getCssVar(custom-dashboard-design, btn-font-size); + font-size: getCssVar(custom-dashboard-design, close-btn-font-size); cursor: pointer; } @@ -69,56 +65,27 @@ $custom-dashboard-design: ( @include b(custom-dashboard-design-content) { flex: 1 1 0; - padding: getCssVar(custom-dashboard-design, content-padding); overflow: auto; } -@include b(custom-dashboard-design-group) { - margin-bottom: getCssVar(custom-dashboard-design, group-margin-bottom); - - &:last-child { - margin-bottom: 0; - } -} - -@include b(custom-dashboard-design-group-header) { - margin-bottom: getCssVar(custom-dashboard-design, group-header-margin-bottom); - color: getCssVar(custom-dashboard-design, group-header-color); -} - -@include b(custom-dashboard-design-group-content) { - padding: getCssVar(custom-dashboard-design, group-content-padding); - background-color: getCssVar(custom-dashboard-design, group-content-bg-color); - border-radius: getCssVar(custom-dashboard-design, group-content-border-radius); - - .van-empty { - padding: 0; - } - - .van-empty__bottom { - margin-top: 0; - } -} - @include b(custom-dashboard-design-item) { display: flex; + align-items: center; + height: getCssVar(custom-dashboard-design, item-height); padding: getCssVar(custom-dashboard-design, item-padding); - border-bottom: getCssVar(custom-dashboard-design, item-border-bottom); - - @include e(remove-btn) { - flex-shrink: 0; - margin-right: getCssVar(custom-dashboard-design, btn-margin-right); - font-size: getCssVar(custom-dashboard-design, btn-font-size); - color: getCssVar(custom-dashboard-design, remove-btn-color); - cursor: pointer; - } - - @include e(add-btn) { - flex-shrink: 0; - margin-right: getCssVar(custom-dashboard-design, btn-margin-right); - font-size: getCssVar(custom-dashboard-design, btn-font-size); - color: getCssVar(custom-dashboard-design, add-btn-color); - cursor: pointer; + margin: getCssVar(custom-dashboard-design, item-margin); + font-size: getCssVar(custom-dashboard-design, item-font-size); + line-height: getCssVar(custom-dashboard-design, item-height); + background-color: getCssVar(custom-dashboard-design, item-bg-color); + border-radius: getCssVar(custom-dashboard-design, item-border-radius); + + @include e(icon) { + display: flex; + flex: 0 0 auto; + align-items: center; + width: 1em; + height: 1em; + margin-right: getCssVar(custom-dashboard-design, item-icon-margin-right); } @include e(text) { @@ -128,8 +95,9 @@ $custom-dashboard-design: ( white-space: nowrap; } - &:first-child { - padding-top: 0; + @include e(checkbox) { + flex: 0 0 auto; + margin-left: getCssVar(custom-dashboard-design, item-checkbox-margin-left); } } diff --git a/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.tsx b/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.tsx index 652ac625c1d9c95703d9d5d056059c51f40f8bae..2ea4a1cae071a7c958d7d772f761458c2b976279 100644 --- a/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.tsx +++ b/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.tsx @@ -27,38 +27,20 @@ export const CustomDashboardDesign = defineComponent({ ); // 门户部件列表 - const items = portlets.map(item => { - return { - id: item.model.id!, - title: item.model.title, - }; - }); - - // 默认门户部件列表 - const defaultItems = ref( - items.filter(item => { - if (!Array.isArray(customDashboard.portlets)) { - return true; - } - return customDashboard.portlets.includes(item.id); + const items = ref( + portlets.map(item => { + const id = item.model.id!; + const visible = !Array.isArray(customDashboard.portlets) + ? true + : customDashboard.portlets.includes(id); + return { + id, + title: item.model.title, + visible, + }; }), ); - // 隐藏门户部件列表 - const hiddenItems = ref( - items.filter(item => !defaultItems.value.includes(item)), - ); - - // 处理移除门户部件 - const handleRemove = (index: number) => { - hiddenItems.value.push(...defaultItems.value.splice(index, 1)); - }; - - // 处理添加门户部件 - const handleAdd = (index: number) => { - defaultItems.value.push(...hiddenItems.value.splice(index, 1)); - }; - // 处理关闭 const handleClose = () => { props.modal.dismiss(); @@ -66,16 +48,15 @@ export const CustomDashboardDesign = defineComponent({ // 处理保存 const handleSave = async () => { - await customDashboard.save(defaultItems.value.map(item => item.id)); + await customDashboard.save( + items.value.filter(item => item.visible).map(item => item.id), + ); handleClose(); }; return { ns, - defaultItems, - hiddenItems, - handleRemove, - handleAdd, + items, handleClose, handleSave, }; @@ -100,50 +81,24 @@ export const CustomDashboardDesign = defineComponent({