TinyEngine v2.2版本发布：支持页面嵌套路由，提升多层级路由管理能力开发分支调整

2025年春节假期已过，大家都带着慢慢的活力回到了工作岗位。为了让大家在新的一年继续感受到 Tiny Engine 的成长与变化，我们很高兴地宣布：TinyEngine v2.2版本正式发布！本次更新带来了重要的功能增强------页面支持嵌套路由，让开发者在构建复杂应用时更加得心应手。接下来，我们将详细介绍该版本的几大亮点与改进

v2.2.0变更特性概览

  1. 页面支持嵌套路由，出码支持多层级路由嵌套结构
  2. 物料协议npm字段整改，物料协议新增字段：materials.packages
  3. 状态管理默认值支持表达式
  4. 默认开启区块插件中的区块分类与物料插件中区块分组合并的选项
  5. 修复了多个问题，包括Element Plus出码样式引入、I18n格式化、国际化配置弹窗异常等
  6. 默认分支变更，refactor/develop 分支更改为 develop

详情可见：https://github.com/opentiny/tiny-engine/releases/tag/v2.2.0

TinyEngine v2.2.0新特性解读

1. 页面支持嵌套路由

Vue 的路由管理器 vue-router 在前端项目中得到了广泛应用，尤其是其强大的嵌套路由功能，能够让开发者以层级化的方式组织和渲染页面组件。TinyEngine 在2.2.0版本之前，虽然出码也引入了 vue-router，但是页面路由仅有顶层路由，不支持嵌套。为了更好地管理复杂的页面结构和提升开发效率，我们在此次更新中引入了嵌套路由的支持，特别是将 vue-router 中常用的 router-link 和 router-view 引入 TinyEngine 低代码平台。这一功能使得开发者能够像在 Vue 项目中一样，灵活地管理多层级路由，轻松实现页面的嵌套和跳转，从而提升了平台的可用性和开发效率，帮助开发人员更快速地构建出符合需求的应用程序。

页面支持嵌套路由大特性，带来10余项路由相关全新能力：

  • 画布渲染器：支持多层级的父子页面嵌套渲染，并在页面切换时实现局部切换刷新，提供更加灵活的渲染体验
  • 页面管理插件：支持在静态页面下任意层级创建子页面，并允许通过拖拽进行页面编排，使页面管理更加直观便捷
  • 画布容器：画布顶部新增了路由指示器，帮助开发者更清晰地查看页面路由结构
  • 内置物料：新增了 RouterLink、RouterView，以及横向和竖向导航的快捷 snippet，为快速构建页面提供了更多选择
  • 属性配置：新增页面选择器，支持选择跳转页面
  • 预览模块：在单页预览时，支持嵌套视图的预览，提供更完整的视图展示
  • 出码模块：支持多层级路由嵌套结构的输出，优化了复杂项目的开发流程
  • 画布容器右键功能增强：增加了 RouterLink 的右键菜单功能，可以快速进行路由跳转
  • 画布容器工具增强：增加非激活页面悬停，支持 RouterLink 组件悬停菜单，并支持通过悬停菜单直接点击进行跳转，提升了操作的便捷性
  • 工具栏：新增了切换嵌套视图和单页视图的功能，使得页面查看和编辑更加灵活

接下来我们将逐步操作来展示上述新增的特性

演示的最终效果会达到如下图所示。

Root 页面为父页面，拥有3个子页面，分别可以使用导航栏中的路由链接进行跳转。跳转到子页面后同时显示父页面，父子页面嵌套渲染

支持静态页面下新建子页面。首先进入页面管理插件，新增一个 Root 页面，新建完成后，悬停 Root 项，点击右侧出现的菜单项，接着点击新建子页面。弹出的表单中，表单项"父文件夹/父页面"会自动填充，填写表单项"页面名称"和"页面路由"然后保存，即可新建一个子页面。这里我们新建一个子页面，名为 Home

页面树支持拖拽编排。 为了演示拖拽编排功能，我们先在根目录新建一个页面名为 Intro，新建完成后可以看到 Intro 页面是在顶层。然后拖拽 Intro 页面到 Root 页面下，松开鼠标后页面右上角提示"保存成功"说明拖拽已完成

接着再添加一个子页面名为 Docs，你可以参考刚刚添加 Intro 页面的步骤添加 Docs 页面，也可以直接在 Root 页面下新建子页面。最终 Root 页面的树结构为这样

新增了内置物料，属性配置中新增页面选择器。打开 Root 页面，我们从物料拖入导航条和路由视图。导航条是预设的多个路由链接组成的 snippet，路由链接设置好跳转页面后可以用来跳转到其他路由，路由视图则是子路由插槽。这里的逻辑和 vue-router 是保持一致的，并且最终出码也是使用的 vue-router。在这里我们给每个路由链接设置到对应的路由

RouterLink 增加右键菜单路由跳转，或者通过悬停菜单点击后跳转。画布顶部的路由指示器，也可以点击跳转。 如下图操作所示，我们给每个子页面添加一条简单的文本，方面查看当前子页面是哪一个。可以通过点击路由链接的右键菜单来实现路由跳转，需要注意的是，右键菜单只能在当前编辑（激活）页面的组件上生效。所以我们额外增加了一种交互方式，当你悬停在路由链接上时，无论此时路由链接是否能够编辑，可以点击右上角出现的跳转按钮来实现路由跳转

画布渲染器：支持父子多层级页面嵌套渲染，支持切换页面的时候局部切换刷新。 如上图所示，在跳转到子页面后嵌套渲染了父子页面，在子路由之间切换只进行了局部刷新

预览时，支持单页预览的时候嵌套视图预览。 如下图所示，单页预览子页面时，会同时显示父页面内容。横向导航条属于父页面内容，导航条下面的"我是 Home 页"文本则属于子页面内容

工具栏增加切换嵌套视图/单页视图。 点击页面右上角的菜单按钮，可以查看到新增了"切换到单页/嵌套视图"的选项。使用此选项来进行嵌套视图/单页视图的切换

出码支持多层级路由嵌套结构的输出。 上述应用最终出码的路由文件如下

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [{name: '8984',path: 'Root',component: () => import('@/views/Root.vue'),children: [{name: '8987',path: 'Docs',component: () => import('@/views/Root/Docs.vue'),children: []},{name: '8985',path: 'Home',component: () => import('@/views/Root/Home.vue'),children: []},{name: '8986',path: 'Intro',component: () => import('@/views/Root/Intro.vue'),children: []}]},{name: '8903',path: 'test',component: () => import('@/views/Test.vue'),children: []},{name: '8907',path: 'Untitled',component: () => import('@/views/Untitled.vue'),children: []}
]export default createRouter({history: createWebHashHistory(),routes: [{ path: '/', children: routes }]
})

2. 物料协议更新

（1）将组件依赖的组件库信息从组件 npm 字段中提取到 materials.packages 字段统一管理

（2）兼容了原来的字段配置

3. 状态管理默认值支持表达式

背景：如果页面状态变量配置了 getter、setter。但是默认值为表达式的场景，出码会有 bug。

比如：

{// 状态变量"state": {"IconPlusSquare": {// 默认值为表达式"defaultValue": {"type": "JSResource","value": "this.utils.IconPlusSquare()"},// 带有 getter 或者是 getter"accessor": {"getter": {"type": "JSFunction","value": "function() { this.state.IconPlusSquare = `${this.state.firstName} ${this.state.lastName}` }"}}}}
}

旧版本无法支持该场景下的出码，新版本支持正常出码为：

// 状态默认值出码
const state = vue.reactive({IconPlusSquare: utils.IconPlusSquare(),
})// getter 出码
vue.watchEffect(wrap(function () {this.state.IconPlusSquare = `${this.state.firstName} ${this.state.lastName}`})
)

TODO: 当前仅在出码侧进行了支持，变量插件侧需要后续支持配置复杂的状态变量初始值。

4. 默认开启区块插件中的区块分类与物料插件中区块分组合并的选项

在之前 v2.1.0 版本的更新中，提供了将区块插件中的区块分类与物料插件中区块分组合并的选项，此功能是提供给Java版本的后端使用，v2.2.0 版本默认打开了此功能

如果你使用了Java版本的后端，无需再修改注册表配置，mergeCategoriesAndGroups 默认值为 true

如果你使用了NodeJS版本的后端，将注册表中的区块插件中的 mergeCategoriesAndGroups 修改成 false

export default {// ...plugins: [Materials,Tree,Page,// NodeJS版本后端，Block 插件设置 mergeCategoriesAndGroups 选项 为 false[Block, { options: { ...Block.options, mergeCategoriesAndGroups: false } }],Datasource,Bridge,I18n,Script,State,Schema,Help,Robot],// ...
}

5. 其他：交互、功能细节优化 & bug 修复

  • 修复：state getter、setter 无法保存修改与globalState getter 在画布计算不正确问题@chilingling #930
  • 修复：区块有插槽和传参时出码异常问题@chilingling #919
  • 修复：自定义区块和组件预览时，无法完整正确渲染出内容（组件或区块缺失）@chilingling #920
  • 修复：使用Java后端在区块管理创建分组时因参数类型错误导致报错问题@gene9831 #985
  • 修复：解决物料中使用相对路径脚本时动态组件 URL 错误的问题。@BWrong #958
  • 修复：切换页面或区块时未清除选中区域问题@chilingling #992
  • 修复：编辑器中国际化词条配置弹窗切换全屏时位置问题@yy-wow #969
  • 优化：页面 JS 插件编辑器增加代码示例提示。通过@SonyLeo #1012
  • 修复：解决刷新页面后保存插件勾选自动保存状态无效的问题@SonyLeo #1004
  • 修复：页面设置中的父表单字段不显示@gene9831 #1069
  • 修复：数据源类型选择显示异常@SonyLeo #1082
  • 修复：出码包含 element-plus 时，没有引入样式的bug @chilingling #817
  • 修复：国际化词条下拉选择选项格式问题 @yy-wow #950
  • 修复：点击国际化配置区域会导致当前属性配置弹窗整体关闭的问题 @yy-wow #970

以上是此次更新问题修复的主要内容，更多细节请查看 v2.2.0 changelog Bug Fixes

6. 默认分支变更

背景：在过去我们 TinyEngine v2.0 版本重构开发过程中，v2.0 开发分支 refactor/develop 与 v1.0 开发分支 develop 同步迭代演进，如今 v2.0 版本已完成架构调整趋于稳定，同时两个版本也存在较大差异不便于直接合入，后续双分支演进重新调整为：v2.0 版本分支设为默认分支持续迭代演进，v1.0 版本不增加新特性只修复问题。在 24 年 12 月份已经完成 TinyEngine develop 分支重命名为 v1.x 分支，refactor/develop 分支设置为默认分支的调整。

本次将默认分支 refactor/develop 重命名为 develop，调整后更符合语义与分支命名规范。后续所有新分支将基于 develop 分支开发，需要确保本地仓库同步更新，可以参考下面步骤：

a）先修改远程仓库设置：如果是基于 TinyEngine fork 的项目，在 fork 仓库的分支管理页面: https://github.com/{YourUserName}/tiny-engine/branches ，将 refactor/develop 分支重命名为 develop(如果是基于 TinyEngine clone 的项目可以忽略该步骤)
在这里插入图片描述

b）然后修改本地仓库：

# 获取最新分支信息
git fetch origin
# 重命名本地分支
git branch -m refactor/develop develop
# 更新本地分支的远程跟踪分支
git branch --set-upstream-to=origin/develop develop
# 删除旧的远程分支引用（可选）
git fetch --prune

如何使用新版本

  • 如果是从 2.0.0 版本升级上来，只需要在 cli 创建出来的工程，将 @opentiny/tiny-engine 相关的依赖，升级到 2.2.0 即可
  • 如果是从 1.x 版本升级上来，需要参考迁移指南，升级到 2.2 版本
  • 如果是全新创建项目，仅需要使用 tinyengine-cli 创建项目即可。npx @opentiny/tiny-engine-cli create-platform my-designer

结语

随着 TinyEngine v2.2.0 版本的发布，路由嵌套视图、页面管理与渲染能力得到了极大的提升，让开发者在构建复杂应用时更加高效、灵活。此外，物料资产包协议和界面交互的优化进一步提升了开发体验。我们将继续致力于提供更强大的功能和更加完善的细节优化，感谢大家的支持与反馈，期待在未来版本中为您带来更多惊喜！
同时欢迎大家给OpenTiny提建议：【OpenTiny调研征集】共创技术未来，分享您的声音！

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：https://opentiny.design

OpenTiny 代码仓库：https://github.com/opentiny

TinyVue 源码：https://github.com/opentiny/tiny-vue

TinyEngine 源码： https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/70935.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LSTM长短期记忆网络-原理分析

LSTM长短期记忆网络-原理分析

1 简介 概念 LSTM（Long Short-Term Memory）也称为长短期记忆网络，是一种改进的循环神经网络（RNN），专门设计用于解决传统RNN的梯度消失问题和长程依赖问题。LSTM通过引入门机制和细胞状态，能够更…
阅读更多...
SQL Server 中遇到的常见问题集

SQL Server 中遇到的常见问题集

SQL Server 中遇到的常见问题集 问题一： 无法创建关系“FK_Research_Teacher”。 ALTER TABLE 语句与 FOREIGN KEY 约束"FK_Research_Teacher"冲突 解决方法： 外键表中的数据主键表中是有的，并且不能删除主外键表中数据 1&…
阅读更多...
神经网络中感受野的概念和作用

神经网络中感受野的概念和作用

在神经网络中，感受野（Receptive Field）是指某个神经单元（神经元或者卷积核）关注的输入特征区域的大小。它决定了神经网络对输入数据的特定区域的感知能力。 感受野的形成过程 在卷积神经网络中，卷积层是感受…
阅读更多...
unreal engine gameplay abiliity 获取ability的cooldown剩余时间

unreal engine gameplay abiliity 获取ability的cooldown剩余时间

unreal engine gameplay abiliity 获取ability的cooldown 版本 5.4.4 参考 测试代码 if (HasAuthority() && AbilitySystemComponent){TArray<FGameplayAbilitySpecHandle> OutAbilityHandles;AbilitySystemComponent->GetAllAbilities(OutAbilityHandles…
阅读更多...
【leetcode hot 100 42】接雨水

【leetcode hot 100 42】接雨水

错误解法&#xff1a;若height[left]>height[right]则代表有坑 class Solution {public int trap(int[] height) {int left 0;int area 0;while(left<height.length-1){// 找坑int right left1;while(right<height.length-1 && height[left]>height[ri…
阅读更多...
Spark map与mapPartitions算子源码级深度解析

Spark map与mapPartitions算子源码级深度解析

Spark map与mapPartitions算子源码级深度解析 一、核心源码结构差异 1. map算子实现逻辑 def map[U: ClassTag](f: T => U): RDD[U] = withScope {val cleanF = sc.clean(f)new MapPartitionsRDD[U, T](this, (context, pid, iter) => iter.map(cleanF)) }实现特征： …
阅读更多...
【前端进阶】09 编程思维：从事件驱动到数据驱动

【前端进阶】09 编程思维：从事件驱动到数据驱动

事件驱动与数据驱动 GUI与事件事件驱动数据驱动事件驱动和数据驱动的区别 GUI与事件 JavaScript作为浏览器的脚本语言&#xff0c;主要用途是与用户互动、操作DOM&#xff0c;实现页面UI和DOM操作&#xff0c;属于GUI&#xff08;图形用户界面&#xff09;编程 GUI程序注重用…
阅读更多...
WPF-3天快速WPF入门并达到企业级水准

WPF-3天快速WPF入门并达到企业级水准

嘿&#xff0c;小伙伴们&#xff01;如果你已经有一定的C#开发基础&#xff0c;但想快速掌握WPF开发&#xff0c;达到企业级水准&#xff0c;那接下来的这个三天快速入门计划绝对适合你&#xff01;虽然听起来有点挑战&#xff0c;但别担心&#xff0c;只要跟着这个高强度、结构…
阅读更多...
【实战 ES】实战 Elasticsearch：快速上手与深度实践-1.3.1单节点安装（Docker与手动部署）

【实战 ES】实战 Elasticsearch：快速上手与深度实践-1.3.1单节点安装（Docker与手动部署）

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 10分钟快速部署Elasticsearch单节点环境1. 系统环境要求1.1 硬件配置推荐1.2 软件依赖 2. Docker部署方案2.1 部署流程2.2 参数说明2.3 性能优化建议 3. 手动部署方案3.1 安…
阅读更多...
小程序中的插槽（Slot）机制及其与 Vue 组件的异同

小程序中的插槽（Slot）机制及其与 Vue 组件的异同

小程序中的插槽&#xff08;Slot&#xff09;机制及其与 Vue 组件的异同 引言 在小程序开发中&#xff0c;组件化开发是一种重要的设计模式&#xff0c;而插槽&#xff08;Slot&#xff09;机制则是实现组件内容分发的关键。通过插槽&#xff0c;开发者可以更灵活地构建可复用…
阅读更多...
vscode下载安装教程（附安装包）vscode图文安装教程最新版

vscode下载安装教程（附安装包）vscode图文安装教程最新版

文章目录 一、vscode下载二、vscod安装教程1.启动vscode安装程序&#xff1a;2.应对提示&#xff1a;3.接受协议&#xff1a;4.更改vscode安装路径&#xff1a;5.推进安装vscode&#xff1a;6.创建vscode快捷方式&#xff1a;7.开始安装vscode&#xff1a;8.完成vscode安装&…
阅读更多...
Redis 缓存穿透、击穿、雪崩：问题与解决方案

Redis 缓存穿透、击穿、雪崩：问题与解决方案

在使用 Redis 作为缓存中间件时&#xff0c;系统可能会面临一些常见的问题&#xff0c;如 缓存穿透、缓存击穿 和 缓存雪崩。这些问题如果不加以解决&#xff0c;可能会导致数据库压力过大、系统响应变慢甚至崩溃。本文将详细分析这三种问题的起因&#xff0c;并提供有效的解决…
阅读更多...
智能客服进化论：AI呼叫中心系统如何重塑企业服务竞争力？

智能客服进化论：AI呼叫中心系统如何重塑企业服务竞争力？

导语&#xff1a;当客户咨询量激增300%时&#xff0c;你的客服团队还能从容应对吗&#xff1f; 在数字化转型加速的今天&#xff0c;企业客户服务正经历从"人力密集型"向"智能集约化"的质变。AI呼叫中心系统作为这场变革的核心引擎&#xff0c;已帮助超过…
阅读更多...
异常c/c++

异常c/c++

目录 1.c语言传统处理错误方式 1、终止程序 2、返回错误码 2.c异常概念 3.异常的使用 3.1异常的抛出与捕获 3.2异常安全&#xff08;还有一些异常重新抛出&#xff09; 3.3异常规范 4.自定义异常体系 5.c标准库的异常体系 6.异常优缺点 1、优点 2、缺点 7、补充 1.…
阅读更多...
ChatGPT 提示词框架

ChatGPT 提示词框架

作为一个资深安卓开发工程师&#xff0c;我们在日常开发中经常会用到 ChatGPT 来提升开发效率&#xff0c;比如代码优化、bug 排查、生成单元测试等。 但要想真正发挥 ChatGPT 的潜力&#xff0c;我们需要掌握一些提示词&#xff08;Prompt&#xff09;的编写技巧&#xff0c;并…
阅读更多...
面试基础---JVM 运行时数据区

面试基础---JVM 运行时数据区

深入理解 JVM 运行时数据区&#xff1a;从源码到实践 在现代互联网大厂的开发环境中&#xff0c;Java 依然是主流语言之一&#xff0c;而 Java 虚拟机&#xff08;JVM&#xff09;作为 Java 程序运行的基础&#xff0c;其性能和稳定性直接关系到应用的表现。因此&#xff0c;深…
阅读更多...
PostgreSQL 查看数据库及表中数据占用空间大小

PostgreSQL 查看数据库及表中数据占用空间大小

1、应用场景 场景1&#xff1a;查看数据库占用空间大小 SELECT pg_size_pretty(pg_database_size(database_name));场景2&#xff1a;查看每张表占用空间大小 SELECTtable_schema || . || table_name AS table,#仅表数据pg_size_pretty(pg_relation_size(table_schema || . …
阅读更多...
c++中打印任意类型任意长度数组的各种方式

c++中打印任意类型任意长度数组的各种方式

目录 一、代码 二、详细解释 1. print 函数模板 2. array_size 函数模板 3. print1 函数模板 4. print2 函数模板 5. my_begin 和 my_end 函数模板 6. print3 函数模板 7. main 函数 总结 一、代码 如下代码给出了5种方式打印任意类型任意长度的数组。这段代码定义了…
阅读更多...
ubuntu下r8125网卡重启丢失修复案例一则

ubuntu下r8125网卡重启丢失修复案例一则

刚装的一台服务器&#xff0c;ubuntu24.04&#xff0c;主板网卡是r8125&#xff0c;安装服务后会莫名其妙丢失驱动 按照官网的方法下载最新8125驱动包&#xff1a; Realtek 然后卸载驱动 rmmod r8125 然后在驱动包里安装&#xff08;幸好我之前装了build-essential&#x…
阅读更多...
[Python学习日记-84] 进程理论

[Python学习日记-84] 进程理论

[Python学习日记-84] 进程理论 简介 进程的概念 并发与并行的区别 进程并发的实现 简介 进程理论是计算机科学中一种重要的概念&#xff0c;用来描述操作系统中执行的程序实例。在操作系统中&#xff0c;每个程序的执行被称为一个进程。进程理论研究进程的创建、调度、通信…
阅读更多...
最新文章

Copyright @ 2022~2023