diff --git a/CHANGELOG.md b/CHANGELOG.md index d23cf9b612054cb43d2f9fb7e0de306662bcd8fd..7d80d92871825023bee9a14f3b95518512057e17 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -48,6 +48,7 @@ - 编辑表单支持分组锚点、表单项锚点，锚点位置支持右侧中间、右上角、右下角 - 新增浮动按钮通用组件 - 新增图标菜单、列表菜单识别模型配置（支持自定义） +- 新增树部件加载时显示loadding ### Change @@ -100,6 +101,7 @@ - 消息栏样式统一调整，由主题包控制 - 多数据选择模式支持分割线 - 模态消息弹框样式与主题保持一致 +- 优化树部件组件样式，不直接用基础css变量，定义组件专属变量 ### Fixed @@ -117,6 +119,8 @@ - 修复流程跟踪组件处理环节，提交路径，处理信息异常 - 修复左侧工具栏分组的气泡弹框显示不全 - 修复级联选择器数据查询异常 +- 修复树部件屏幕高度过高时数据显示不全 +- 修复树部件计数器样式未显示移动端计数器样式 ## [0.7.41-alpha.19] - 2025-10-16 diff --git a/src/control/tree/tree.scss b/src/control/tree/tree.scss index 5aedf24a8aee5946f4a540f316c2afb33329d9cc..ea8ba97da0e388d209d7bad5276addfadb8bd3e1 100644 --- a/src/control/tree/tree.scss +++ b/src/control/tree/tree.scss @@ -1,27 +1,34 @@ -$control-treeview: ('text-color': getCssVar('color', 'text'), - 'hover-bg-color': getCssVar('color', 'primary'), - 'active-bg-color': getCssVar('color', 'primary'), - 'padding': getCssVar(spacing, base), - 'bg-color': getCssVar('color', 'bg', 2), +$control-treeview: ( + // Color + 'color-bg': getCssVar('color', 'bg', 2), + 'color-node-primary-btn': getCssVar('color', 'primary'), + 'color-node-active': getCssVar(color, primary, light, default), + 'color-crumb-history-nav-text': getCssVar('color', 'primary'), + 'color-crumb-container-bg': getCssVar('color', 'bg', 0), + // Width/Height + 'height-node': getCssVar(height, control, large), + 'height-crumb': getCssVar('height-control', 'large'), + // Spacing + 'spacing-padding': 0 0 getCssVar(spacing, base) 0, + 'spacing-node-padding': 0 getCssVar(spacing, base), + 'spacing-node-icon-margin': 0 getCssVar(spacing, tight) 0 0, + 'spacing-crumb-padding': 0 getCssVar(spacing, base), + 'spacing-crumb-item-icon-margin': 0 getCssVar('spacing', 'extra-tight') 0 0, + 'spacing-crumb-container-padding': 0 0 getCssVar(spacing, tight) 0, + 'spacing-crumb-container-bottom-ph': getCssVar(spacing, tight), + // Other + 'position-node-counter-right': getCssVar('spacing', 'base-loose'), + 'position-crumb-icon-top': rem(3px), + 'icon-node-icon-size': 1em, + 'icon-crumb-item-icon-ph-size': 1em ); -$control-treeview-node: ( - icon-height: getCssVar(spacing, base), - icon-width: getCssVar(spacing, base), - icon-margin-right: getCssVar(spacing, tight), - item-height: getCssVar(height, control, large), -); - -$control-treeview-crumb: ( - icon-top: rem(3px), -); - -@mixin icon{ +@mixin icon { display: inline-flex; align-items: center; - width: getCssVar(control-treeview-node, icon-width); - height: getCssVar(control-treeview-node, icon-height); - margin-right: getCssVar(control-treeview-node, icon-margin-right); + width: getCssVar(control-treeview, icon-node-icon-size); + height: getCssVar(control-treeview, icon-node-icon-size); + margin: getCssVar(control-treeview, spacing-node-icon-margin); > svg { width: 100%; @@ -31,22 +38,23 @@ $control-treeview-crumb: ( @include b(control-treeview) { @include set-component-css-var('control-treeview', $control-treeview); - @include set-component-css-var(control-treeview-node, $control-treeview-node); height: 100%; - background: getCssVar('control-treeview', 'bg-color'); + background: getCssVar('control-treeview', 'color-bg'); } @include b(control-treeview-content) { - @include set-component-css-var('control-treeview', $control-treeview); - height: 100%; // 树节点 - .vs-tree-node { + .#{bem(control-treeview-node)} { position: relative; - padding: getCssVar('control-treeview', 'padding'); - height: getCssVar('control-treeview-node', 'item-height'); + padding: getCssVar('control-treeview', 'spacing-node-padding'); + height: getCssVar('control-treeview', 'height-node'); + + &.selected { + background-color: getCssVar('control-treeview', 'color-node-active'); + } .vs-tree-inner { display: flex; @@ -57,6 +65,11 @@ $control-treeview-crumb: ( .vs-icon-leaf { width: auto; margin-right: 0; + + & > span { + display: flex; + align-items: center; + } } .#{bem(icon)} { @@ -64,48 +77,52 @@ $control-treeview-crumb: ( } } - .tree-button { + .#{bem(control-treeview-node-expanded-btn)} { position: relative; display: flex; align-items: center; .van-icon { - color: getCssVar('color', 'primary'); + color: getCssVar('control-treeview', 'color-node-primary-btn'); } - .tree-counter { + .#{bem(badge)} { position: absolute; - right: 20px; + right: getCssVar('control-treeview', 'position-node-counter-right'); } } } // 面包屑导航 @include b(control-treeview-header) { - @include set-component-css-var(control-treeview-node, $control-treeview-node); - @include set-component-css-var('control-treeview-crumb', $control-treeview-crumb); - height: getCssVar('height-control', 'large'); + height: getCssVar('control-treeview', 'height-crumb'); overflow: auto; white-space: nowrap; - line-height: getCssVar('height-control', 'large'); + line-height: getCssVar('control-treeview', 'height-crumb'); + padding: getCssVar('control-treeview', 'spacing-crumb-padding'); @include e('crumb') { .#{bem(icon)} { @include icon; - margin-right: getCssVar('spacing', 'extra-tight'); + margin: getCssVar('control-treeview', 'spacing-crumb-item-icon-margin'); } - &>span { + & > span { &:has(svg), &:has(img) { position: relative; - .#{bem(icon)}{ + .#{bem(icon)} { position: absolute; - top: getCssVar(control-treeview-crumb, icon-top); + top: getCssVar('control-treeview', 'position-crumb-icon-top'); } + // 用于占位，放置高度塌陷 &::after { + @include icon; + display: inline-block; - width: getCssVar(control-treeview-node, icon-width); - margin-right: getCssVar('spacing', 'extra-tight'); + margin: getCssVar( + 'control-treeview', + 'spacing-crumb-item-icon-margin' + ); content: '\e710'; opacity: 0; } @@ -116,8 +133,8 @@ $control-treeview-crumb: ( // 适配面包屑高度在内容区滚动时始终为0px @include e('container') { height: auto; - padding-bottom: getCssVar(spacing, tight); - &>div, + padding: getCssVar('control-treeview', 'spacing-crumb-container-padding'); + & > div, .van-sticky { height: auto !important; } @@ -128,11 +145,21 @@ $control-treeview-crumb: ( content: ''; position: absolute; width: 100%; - height: getCssVar(spacing, tight); + height: getCssVar( + 'control-treeview', + 'spacing-crumb-container-bottom-ph' + ); left: 0; - background-color: getCssVar('color', 'bg', 0); + background-color: getCssVar( + 'control-treeview', + 'color-crumb-container-bg' + ); } } + + & > span:not(:last-child) { + color: getCssVar('control-treeview', 'color-crumb-history-nav-text'); + } } @include b(control-treeview-container) { @@ -140,5 +167,5 @@ $control-treeview-crumb: ( height: 100%; display: flex; flex-direction: column; - padding: getCssVar('control-treeview', 'padding'); -} \ No newline at end of file + padding: getCssVar('control-treeview', 'spacing-padding'); +} diff --git a/src/control/tree/tree.tsx b/src/control/tree/tree.tsx index c8663748df5c1fbc0506fb62484869c7833b86cc..3156ff5f14ea1137666dea55517933333e164766 100644 --- a/src/control/tree/tree.tsx +++ b/src/control/tree/tree.tsx @@ -201,7 +201,12 @@ export const TreeControl = defineComponent({ nodes = nodeData._children; } else { ibiz.log.debug('节点展开加载-远程', nodeData); + + // 开启loading + ibiz.loading.showRedirect(); nodes = await c.loadNodes(nodeData); + // 结束loading + ibiz.loading.hideRedirect(); } // 根节点搜索时,返回树展示数据,并强制刷新 if (nodes && c.state.rootNodes.includes(nodes[0])) { @@ -347,6 +352,9 @@ export const TreeControl = defineComponent({ ); if (c.state.singleSelect) handleSingleSelect(opts); + // 添加节点类名 + loadingEl.parentNode.parentNode.classList.add(`${ns.b('node')}`); + const children: HTMLElement[] = []; // 添加计数器 @@ -354,7 +362,7 @@ export const TreeControl = defineComponent({ const count = c.state.counterData[nodeModel.counterId]; if (!(isNil(count) || (nodeModel.counterMode === 1 && count === 0))) { const child = document.createElement('div'); - child.className = `ibiz-badge tree-counter`; + child.className = `ibiz-badge tree-counter ${ns.is('mob', true)}`; child.innerText = count > 99 ? `${99}+` : count; children.push(child); } @@ -369,7 +377,7 @@ export const TreeControl = defineComponent({ // 节点内容区绘制 return _h('div', { - className: 'tree-button', + className: `tree-button ${ns.b('node-expanded-btn')}`, click: (e: Event, _opts: IData) => { if (originData._leaf) return; _opts.store.breadcrumb.list.push(_opts); @@ -394,6 +402,9 @@ export const TreeControl = defineComponent({ // 不能选择父节点 nocheckParent: true, rootName: c.model.detreeNodes?.find(item => item.rootNode)?.name, + virtual: { + showCount: 30, // 虚拟列表显示数量，太少时会导致虚拟列表无法滚动 + }, renderNode, renderContent, customNodeClick,