TinyEngine v2.2版本發布：支持頁面嵌套路由，提升多層級路由管理能力開發分支調整

2025年春節假期已過，大家都帶著慢慢的活力回到了工作崗位。為了讓大家在新的一年繼續感受到 Tiny Engine 的成長與變化，我們很高興地宣布：TinyEngine v2.2版本正式發布！本次更新帶來了重要的功能增強------頁面支持嵌套路由，讓開發者在構建復雜應用時更加得心應手。接下來，我們將詳細介紹該版本的幾大亮點與改進

v2.2.0變更特性概覽

頁面支持嵌套路由，出碼支持多層級路由嵌套結構
物料協議npm字段整改，物料協議新增字段：materials.packages
狀態管理默認值支持表達式
默認開啟區塊插件中的區塊分類與物料插件中區塊分組合并的選項
修復了多個問題，包括Element Plus出碼樣式引入、I18n格式化、國際化配置彈窗異常等
默認分支變更，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調研征集】共創技術未來，分享您的聲音！