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

一、什么是树形组件？

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

（一），基本概念：

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

（二），应用场景

后台管理系统

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

文件 / 目录管理

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

分类与层级数据展示

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

配置与层级关系编辑

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

（三）、核心功能与特性

基础交互功能

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

高级功能

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

状态与样式

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

二、OneCode 树形组件设计

1. 组件分层架构设计

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

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

2. 可视化样式配置

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

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

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

3. 分层数据结构设计

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

json 复制代码

{
    "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. 交互行为配置矩阵

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

交互类型	基础功能	高级配置	事件回调
节点点击	单选 / 多选模式	阻止冒泡配置	onClick/onSelect
展开折叠	懒加载配置	最大展开层级限制	onExpand/onCollapse
节点操作	右键菜单	拖拽排序（内部 / 跨树）	onDragStart/onDrop
数据过滤	关键词搜索	多级过滤条件	onFilterChange

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

2. 动态逻辑编排

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

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

添加图片注释，不超过 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，在线代码编辑器支持

（1）OneCode元数据编辑工具

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

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

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

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

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

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

一、什么是树形组件？

（一），基本概念：

（二），应用场景

配置与层级关系编辑

（三）、核心功能与特性

二、OneCode 树形组件设计

1. 组件分层架构设计

2. 可视化样式配置

3. 分层数据结构设计

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

1. 交互行为配置矩阵

2. 动态逻辑编排

三、OneCode DSM支持

1.OneCode DSM 简介

2.树形容器配置

3.动态树形子点配置

4.动作菜单及路由配置

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

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

2， 在线代码编辑器支持

（1）OneCode元数据编辑工具

2，在线代码编辑器支持