OneCode基础组件介绍——树形组件（Tree）

一、什么是树形组件？

树形组件（Tree Component）是一种以树状结构展示层级数据的 UI 组件，核心特点是通过 “节点（Node）” 的嵌套关系体现数据的父子层级。每个节点可以包含子节点（非叶子节点）或不包含子节点（叶子节点），并支持展开 / 折叠、选中、操作等交互功能。

（一），基本概念：

• 节点（Node）：树形结构的基本单元，包含数据内容和状态（如展开 / 折叠、选中、禁用等）。
• 根节点（Root Node）：树的顶层节点，通常只有一个。
• 叶子节点（Leaf Node）：没有子节点的节点。
• 父子关系：节点之间的层级关联，一个父节点可包含多个子节点。

（二），应用场景

后台管理系统

• 菜单导航（如多级路由菜单）。
• 权限管理（角色与权限的层级分配）。
• 组织架构展示。

文件 / 目录管理

• 操作系统的文件资源管理器。
• 云盘文件目录展示。

分类与层级数据展示

• 商品分类（如电商平台的类目树）。
• 知识库 / 文档结构（如百科词条分类）。

配置与层级关系编辑

• 流程编辑器（如工作流节点配置）。
• 树形结构的表单配置（如多级筛选条件）。

（三）、核心功能与特性

1. 基础交互功能

• 展开 / 折叠：点击节点或图标展开 / 折叠子节点。
• 选中状态：支持单选或多选节点，用于数据筛选或操作。
• 节点操作：右键菜单、点击事件（如跳转到详情页）。

2. 高级功能

• 搜索与过滤：通过关键词快速定位节点，过滤显示符合条件的节点。
• 拖拽排序：支持拖动节点调整层级或顺序（如文件移动、菜单排序）。
• 懒加载：大数据量时按需加载子节点，提升性能（如加载深层目录）。
• 虚拟滚动：处理海量节点时，仅渲染可视区域内的节点，优化内存占用。

3. 状态与样式

• 节点状态：选中、禁用、加载中、自定义状态（如 “已读 / 未读”）。
• 自定义样式：支持自定义节点图标、颜色、布局，适配不同 UI 设计

二、OneCode 树形组件设计

1. 组件分层架构设计

• 树容器：负责整体布局管理，提供滚动条 / 虚拟滚动等性能优化功能
• 节点渲染器：支持基础渲染（图标 / 标签 / 状态标记）和自定义扩展（通过插槽机制嵌入按钮 / 输入框等组件）
• 交互控制器：封装通用交互逻辑，支持通过配置面板启用 / 禁用功能（多选 / 拖拽 / 过滤等）

添加图片注释，不超过 140 字（可选）

2. 可视化样式配置

构建可视化样式编辑器，提供三级配置体系：

1. 全局样式：定义树容器的整体样式（背景色 / 字体 / 间距等）
2. 节点状态样式：配置正常 / 选中 / 禁用 / 加载中等状态下的样式规则
3. 自定义 CSS：允许通过代码编辑器注入个性化样式
4. 子组件配置：允许用户针对树形中任意子组件，如Root节点、工具栏样式、状态栏样式等等进行独立的CSS编辑。

添加图片注释，不超过 140 字（可选）

3. 分层数据结构设计

采用符合 JSON Schema 规范的数据描述模型，定义树节点的基础结构：

{
    "customSelectPersonTree":{
        "disabled":false,
        "readonly":false,
        "items":[
            {
                "id":"customSelectPersonTree",
                "caption":"选择人员",
                "bindClass":[ ],
                "imageClass":"spafont spa-icon-shukongjian",
                "iniFold":false,
                "sub":[
                    {
                        "id":"person",
                        "caption":"成员",
                        "entityClass":"com.ds.org.Person",
                        "bindClass":[
                            "com.ds.org.Person"
                        ],
                        "imageClass":"bpmfont bpmwode",
                        "tagVar":{
                            "name":"person"
                        },
                        "tagCmds":[
                            {
                                "buttonType":"text",
                                "caption":"",
                                "id":"Msgbutton",
                                "imageClass":"spafont spa-icon-c-audio",
                                "index":0,
                                "pos":"row",
                                "tagCmdsAlign":"floatright",
                                "tagVar":{
                                    "name":"Msg",
                                    "clazz":"com.ds.esd.custom.tree.enums.TreeRowMenu"
                                },
                                "tips":"消息"
                            },
                            {
                                "buttonType":"text",
                                "caption":"",
                                "id":"LoadMenubutton",
                                "imageClass":"spafont spa-icon-c-menu",
                                "index":0,
                                "pos":"row",
                                "tagCmdsAlign":"floatright",
                                "tagVar":{
                                    "name":"LoadMenu",
                                    "clazz":"com.ds.esd.custom.tree.enums.TreeRowMenu"
                                },
                                "tips":"菜单"
                            }
                        ],
                        "iniFold":false
                    },
                    {
                        "id":"org",
                        "caption":"部门",
                        "entityClass":"com.ds.org.Org",
                        "bindClass":[
                            "com.ds.org.view.nav.NavPersonTreeAPI"
                        ],
                        "imageClass":"bpmfont bpmshouye1",
                        "tagVar":{
                            "name":"org"
                        },
                        "iniFold":false
                    }
                ]
            }
        ],
        "name":"",
        "value":"person"
    }
}

通过扩展Props字段支持业务自定义属性，实现从基础文件目录树到复杂权限配置树的场景适配。

4、交互配置：实现零代码的交互逻辑编排

1. 交互行为配置矩阵

设计可视化交互配置面板，支持以下核心交互的可视化编排：

添加图片注释，不超过 140 字（可选）

2. 动态逻辑编排

通过低代码平台的流程引擎，实现复杂业务逻辑的可视化编排：

1. 节点加载逻辑：配置展开节点时触发的数据源加载流程，支持前置校验（权限判断）和后置处理（数据转换）
2. 操作联动：定义节点操作（如删除节点）时触发的级联动作，支持多步骤流程（删除确认→调用 API→刷新树结构）
3. 状态同步：通过数据绑定机制，实现树组件与表单 / 图表等其他组件的状态联动（如选中节点同步更新详情面板）

添加图片注释，不超过 140 字（可选）

三、OneCode DSM支持

1.OneCode DSM 简介

OneCode DSM 是 OneCode 低代码引擎的核心组成部分之一，专门用于领域特定建模（Domain-Specific Modeling），它允许开发者通过可视化工具定义和管理业务模型，从而简化应用开发流程。

• ‌构成要素‌：OneCode 系统由三个部分组成：界面设计器（用于可视化拖拽设计）、OneCode 通码框架（提供编程基础），以及 DSM 领域建模工具，后者专注于创建和维护业务领域的模型结构。
• ‌建模作用‌：DSM 工具支持开发者根据领域驱动设计（DDD）原则，定义数据模型、服务逻辑和后端接口，实现业务需求的可视化表达，并能自动生成前后端一致的代码或配置。
• ‌前后端集成‌：在 DSM 配置中，开发者可以设置路由控制器、参数映射和业务规则，确保前后端数据交互的一体化；例如，通过修改 DSM 模型，前端视图和后端方法会自动同步更新，减少手动编码需求。

添加图片注释，不超过 140 字（可选）

2.树形容器配置

树形控件由跟节点容器和多级的子节点组成，在DSM中每一级节点都需要独立的进行样式、数据、动作形态的配置和绑定工作。OneCode允许用户将每一级引用进行抽象同时在设计器，DSM ，以及DSM中做独立的展示。

添加图片注释，不超过 140 字（可选）

3.动态树形子点配置

容器配置是作用于所有节点的父级树形设计，但根据树形节点中每一个子节点这需要进行详细配置说明，每一个子几点会有一个“组名称”，用于标识动作及数据展现的作用域，同时对于该节点是否可选（多选、单选），以默认折叠、是否允许延迟加载、是否云讯检索递归这些都会涉及到后端数据的相关属性设计。OneCode将这些属性统一归位到DSM中来管理，在经过编译后分到到前后端的代码执行。

添加图片注释，不超过 140 字（可选）

4.动作菜单及路由配置

树形主键做一个独立的OneCode Component 也完全继承了OneCode基础组件的，动作菜单、路由控制等基础功能，只是根据组件的不同，其对应的常用动作及代码注解模型会有相应的适应性的改变。（详细介绍参见：OneCode 基础感念组件篇）

添加图片注释，不超过 140 字（可选）

四、Java源码及树形元数据注解支持

OneCode 是一套基于 Spring 注解体系构建的低代码扩展体系，通过标准化注解实现元数据驱动的应用构建，核心优势在于将传统 Spring Boot 开发中的配置逻辑转化为可可视化编排的元数据模型，同时保留 Spring 生态的兼容性和灵活性。

1， AI原生编译器(AI-Ide) Trae 支持

OneCode 3.0升级后全新支持了 AI原生编译器(AI-Ide) ，在完成图形配置和DSM建模后，通过出码工厂配置编译可以生成基于Spring配置的 OneCode 原生的PerCode代码。并且在最新的版本中增加了对原生 AI原生编译器(AI-Ide) 的支持，使得OneCode编译工程的同时可以使用Trae 来同步修改代码。

添加图片注释，不超过 140 字（可选）

在Build 模式下，可以使用对话方式采用自然语言，快速学习适应OneCode 相关元数据属性及使用方法，同时针对一些具体需要代码植入来完成的高级功能，也可以通过，Trae 同步撰写并实施编译到OneCode中。

2， 在线代码编辑器支持

OneCode 元素编辑工具是OneCode领域建模中最为重要的一个工具，OneCode代码工具可以直接读取附有OneCode元数据注解的Java原文件，开发者可以直接手工编辑Java代码。

添加图片注释，不超过 140 字（可选）

也可以通过展开元数据属性图进行可视化的元数据编辑管理。

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）