博客 / 詳情

返回

TinyEngine2.9版本發佈：更智能，更靈活，更開放!

前言

TinyEngine 是一款面向未來的低代碼引擎底座，致力於為開發者提供高度可定製的技術基礎設施——不僅支持可視化頁面搭建等核心能力，更可通過 CLI 工程化方式實現深度二次開發，幫助團隊快速構建專屬的低代碼平台。

無論是資源編排、服務端渲染、模型驅動應用，還是移動端、大屏端、複雜頁面編排場景，TinyEngine 都能靈活適配，成為你構建低代碼體系的堅實基石。

最近我們正式發佈 TinyEngine v2.9 版本，帶來多項功能升級與體驗優化：平台智能化能力增強，核心鏈路能力持續優化，讓頁面搭建變得更簡單、更高效。

  • 開源地址：https://github.com/opentiny/tiny-engine（歡迎 Star ⭐）
  • 官方網站：https://opentiny.design/tiny-engine#/home

本次版本迭代中，我們欣喜地看到越來越多開發者加入開源共建行列。特別感謝@fayching @LLDLLY 等社區夥伴積極參與功能貢獻與問題反饋。正是這些點滴匯聚的力量，推動着 TinyEngine 不斷前行。我們也誠摯邀請更多熱愛技術、追求創新的朋友加入社區，一起打造更強大、更開放的低代碼生態。

v2.9.0 變更特性概覽

  • 【增強】全新版本AI助手，智能搭建能力升級
  • 【新特性】添加資源管理插件和資源選擇配置器
  • 【增強】預覽插件支持應用預覽
  • 【增強】Tailwindcss支持
  • 【增強】支持靜態數據源
  • 【增強】組件物料更新
  • 【增強】MCP工具更新
  • 【其他】功能細節優化與bug修復。

TinyEngine v2.9.0 新特性解讀

1. 【增強】全新版本AI助手，智能搭建能力升級（體驗版本）

在TinyEngine v2.9版本中，我們對AI搭建頁面能力進行全新升級，下面是主要功能的介紹與快速上手：

1）全新 Agent 模式

新增的 Agent 模式支持自然語言或圖片生成頁面，藉助AI大模型強大的能力，讓您告別繁瑣的手動拖拽，讓 AI 輔助開發更加智能、強大。

  • 全新 Agent 智能搭建模式，自然語言描述需求，由AI直接返回頁面Schema
  • 畫布採用流式渲染，能夠實時看到頁面生成效果
  • 生成頁面後支持繼續對話二次修改，使用增量返回修改速度更快
    1.gif
  • 支持上傳設計圖或手繪草圖，AI 識別並還原為可編輯的頁面（需要先選擇視覺模型）
    2.gif

2）基礎能力升級

  • 現代化界面：全新的聊天界面，支持 Markdown 渲染、代碼高亮\
    全屏模式：
    3.png
  • 會話管理：支持查看管理多個歷史對話，自動保存歷史記錄思考模式：支持推理模型的深度思考，提供更準確的解決方案
  • 多模型支持：兼容各種OpenAI兼容格式 AI 模型，提供模型設置界面自由添加選擇模型服務

<!---->

  • 集成平台更多的MCP工具（Chat模式）
    工具調用：
    4.png

3）簡單配置，快速上手

平台設置：

  • 設置模型服務： 

    支持通過AI插件的customCompatibleAIModels選項自定義添加OpenAI兼容格式大模型（使用MCP功能需要使用支持tools的大模型），建議使用DeepSeek R1/V3、Qwen3、Gemini等對視覺/工具支持良好的模型，優先使用滿血模型、推理類型模型效果更好。

    // registry.js
export default {
  // ......
  [META_APP.Robot]: {
    options: {
      // encryptServiceApiKey: false, // 是否加密服務API密鑰, 默認為false
      // enableResourceContext: false, // 提示詞上下文攜帶資源插件圖片，默認true
      // enableRagContext: true, // 提示詞上下文攜帶查詢到的知識庫內容，默認false
      customCompatibleAIModels: [{ // 自定義AI模型(OpenAI兼容格式模型), 下面以智譜模型服務為例
        provider: 'GLM',
        label: '智譜模型',
        baseUrl: 'https://open.bigmodel.cn/api/paas/v4',
        models: [
          {
            label: 'GLM視覺理解模型',
            name: 'glm-4.5v',
            capabilities: {
              vision: true, // 是否支持視覺理解能力
              reasoning: { extraBody: { enable: { thinking: { type: 'enabled' } }, disable: null } } // 是否支持深度思考及深度思考打開與關閉額外的body字段
            }
          },
          {
            label: 'GLM-4.5推理模型',
            name: 'glm-4.5',
            capabilities: {
              toolCalling: true,
              reasoning: { extraBody: { enable: { thinking: { type: 'enabled' } }, disable: null } }
            }
          }
        ]
      }]
    }
  }
  // ......
}

    可以通過對接最新後端服務使用完整的AI插件能力，或者也可以在前端項目配置AI模型接口Proxy來使用, 這裏以本地轉發到百鍊模型為例：

    // vite.config.js
const originProxyConfig = baseConfig.server.proxy
baseConfig.server.proxy = {
  '/app-center/api/chat/completions': {
    target: 'https://dashscope.aliyuncs.com',
    changeOrigin: true,
    rewrite: path => path.replace('/app-center/api/', '/compatible-mode/v1/'),
  },
  '/app-center/api/ai/chat': {
    target: 'https://dashscope.aliyuncs.com',
    changeOrigin: true,
    rewrite: path => path.replace('/app-center/api/ai/chat', '/compatible-mode/v1/chat/completions'),
  },
  ...originProxyConfig,
}

    補充説明：截圖生成UI能力由於依賴上傳圖片接口，需要啓動後端服務，且需要使用支持視覺理解能力的模型，如qwen-vl系列模型
     

  • 插件配置：

    在插件中也提供了對部分功能的自定義能力，包括是否啓用加密API Key解決安全風險問題、是否使用知識庫RAG能力提供額外的知識背景提升問答對話效果、是否允許使用資源管理插件中的圖片等：

       // registry.js
export default {
  [META_APP.Robot]: {
    options: {
      // encryptServiceApiKey: false, // 是否加密服務API密鑰, 默認為false
      // enableResourceContext: false, // 提示詞上下文攜帶資源插件圖片，默認true
      // enableRagContext: true, // 提示詞上下文攜帶查詢到的知識庫內容，默認false
      // modeImplementation: { // 支持通過註冊表傳入chat和agent模式的實現
      //   chat: useCustomChatMode
      //   agent: useCustomAgentMode
      // }
    }
  }
}

     

用户設置：

  • 配置服務與密鑰：在設置面板編輯內置服務添加API Key或者添加自定義的模型服務
    5.gif
  • 選擇模型：可以從內置百鍊、DeepSeek 或者自定義的模型服務中選擇模型（圖片生成UI需要多模態模型，MCP工具調用需要支持工具調用模型）
  • 開始使用：在輸入框輸入問題或者上傳圖片問答，同時可以自由切換 Agent/Chat 模式，配置MCP工具，開啓深度思考等，從智能搭建到深度輔助，全方位提升您的開發效率。快來體驗，釋放您的創造力！

2.【新特性】添加資源管理插件和資源選擇配置器

在應用開發中，通常會需要引用圖片等資源，資源管理插件主要滿足這類場景需求，可以上傳項目中用到的靜態資源，在編排頁面或AI生成頁面時引用（當前僅支持圖片格式附件）。

2.1 資源管理

1）資源分組：資源管理插件通過分組管理資源，上傳資源之前需要先創建分組，可以為不同場景的靜態資源進行分組，比如基礎圖標庫，或者也可以按模塊分類
6.png
創建好分組後，點擊分組名可以管理當前資源分組
7.png

2）添加資源\

添加資源分為兩種方式，輸入URL和名稱添加網絡資源，上傳圖片或圖標資源。
其中資源名稱必填，通過url添加的話url也必填，如果是上傳的，則不能輸入url,支持上傳png、jpg、svg文件，支持批量上傳

8.png

3）修改資源\

已添加資源的管理，hover時顯示名稱，操作包括複製和刪除，複製是複製添加完成後在用户服務器上的url地址

9.png
也支持批量操作，點擊批量操作後，出現刪除圖標（後續還會擴展其他批量操作），且資源變為可多選的狀態
10.png

 

2.2 資源使用

1）在畫布中使用

可以通過圖片組件使用資源，選中圖片組件後在圖片的屬性設置處，點擊選擇資源可以設置為資源管理中的圖片

效果

11.png

2）在AI插件中使用

在AI插件Agent模式生成頁面時，頁面中經常會需要使用到圖片資源，AI無法直接生成這些圖片，默認會將當前資源管理插件的圖片作為備用資源引入使用（僅使用帶有描述介紹的圖片）。例如“生成登錄頁面”自動引用背景圖與Logo：

12.png

如果不希望在AI助手插件中使用，可以通過修改註冊表關閉

// registry.js
export default {
  [META_APP.Robot]: {
    options: {
      enableResourceContext: false, // 提示詞上下文攜帶資源插件圖片，默認true
    }
  }
}

3. 【增強】預覽插件支持應用預覽

在之前的預覽插件中只能夠實現單頁面的預覽，對於需要在多個頁面中交互跳轉的場景無法滿足。\
在v2.9 版本中，TinyEngine支持了應用的全局預覽，能夠預覽完整項目的效果，並且支持手動路由切換，也能夠在調試模式下查看整個應用的源碼。
1）入口：

工具欄的預覽圖標進行了調整，直接點擊圖標與之前邏輯一致為頁面預覽，點擊後面的箭頭可打開下拉列表，可以選擇應用預覽

13.png

2）預覽效果

打開預覽頁面後，可以看到應用預覽與頁面預覽相比添加了路由切換欄，可以選擇路由進行切換。

14.png

4. 【增強】Tailwindcss支持

Tailwind CSS 是一種實用優先的 CSS 框架，提供豐富的原子類，如 text-center、p-4、bg-blue-500 等，可快速構建定製化、響應式界面。

低代碼平台支持 Tailwind 後，用户在可視化搭建的同時，能直接通過類名精細控制樣式，無需編寫或配置大量樣式即可實現高效美觀的前端開發，提升靈活性與開發速度。

在v2.9以上版本，已默認支持Tailwind CSS框架。

 啓用後的行為

  • 設計態：畫布支持直接加載Tailwind樣式類
  • 預覽態：自動按需加載  @tailwindcss/browser，使畫布/預覽中可直接使用 Tailwind 原子類。

  • 出碼生成：生成的應用將自動完成以下配置（基於 Tailwind CSS v4 零配置方案）：

    • 在依賴中添加  tailwindcss，並在開發依賴中添加  @tailwindcss/vite；
    • 在 Vite 配置中註冊  tailwindcss()  插件；
    • 生成  src/style.css，內容包含  @import "tailwindcss";；
    • 在  src/main.js 自動引入  ./style.css。

以上步驟由引擎/出碼器自動完成，無需手動干預。

效果

選中節點後在屬性配置面板樣式類中直接填寫Tailwind樣式類名，即可看到畫布Tailwind樣式生效：

15.png

關閉 Tailwind

可以通過註冊表關閉Tailwind功能：

// registry.js
export default {
  'engine.config': {
    // ...其他配置
    enableTailwindCSS: true, // 開啓（默認即為 true）；設為 false 可關閉
  },
};

當配置為 enableTailwindCSS: false 時：

  • 預覽態不會加載  @tailwindcss/browser；
  • 出碼時不會注入與 Tailwind 相關的依賴、Vite 插件及樣式文件導入。

注意事項

  • 預覽依賴解析：內置 import-map 已包含 @tailwindcss/browser 映射；如使用自定義 CDN/離線環境，請確保該映射可用。
  • 自定義樣式：可在生成的 src/style.css 中追加自定義樣式，或在項目中新增樣式文件後自行引入。
  • 運行時渲染：如果您自定義了運行時渲染引擎，請確保在運行時渲染中增加對 Tailwind CSS 的支持。

5.【增強】支持靜態數據源

設計器提供數據源來配合畫布上的組件/區塊渲染，之前版本只支持採取遠程API請求JSON數據動態獲取的方式，自TinyEngine v2.9+版本開始，支持靜態數據源配置。

使用步驟

1）創建數據源，數據源類型選擇靜態數據源，配置數據源名稱以及數據源字段，根據配置的數據源字段新增靜態數據。

16.gif

2）使用數據源Mock數據（數據源使用方式與遠程數據源相同）

17.gif

6.【增強】組件物料更新

  • 修改路由選擇配置器，添加標籤欄配置器和導航組件

拖拽一個導航條組件到畫布，可以更改導航條為橫向或者縱向，導航菜單項支持增刪改，菜單項支持配置跳轉頁面

18.gif

  • 更新物料Icon（設計稿換新風格後，原物料圖標跟頁面風格不匹配，更換所有的物料圖標）
  • 添加TinyVue圖表組件

物料面板新增TinyVue圖表組件，主要包括折線圖、柱狀圖、條形圖、圓盤圖、環形圖、雷達圖、瀑布圖、漏斗圖、散點圖 等

19.png

  • 添加TinyVue基礎組件
  • 表單類型中新增單選組、評分、滑塊、級聯選擇器 組件

20.png

  • 數據展示中新增骨架屏、卡片、日曆、進度條、標記、標籤、統計數值 組件

21.png

  • 導航類型中新增步驟條和樹形菜單組件

22.png

7. 【增強】MCP工具更新

AI 助手除了新增的搭建模式，原有的對話模式也進行了增強，增加了若干個插件的 mcp 工具：

  • 國際化（i18n） 相關 mcp 工具
  • 應用狀態、頁面狀態相關 mcp 工具
  • 頁面增刪查改工具
  • 節點操作相關 mcp 工具（節點選中、屬性修改、增刪節點等等）

如何使用：

當前可以升級到 v2.9 版本，切換到 chat 模式，即可在對話中使用MCP工具，AI會自動調用相應工具。用户也可以手動點擊關閉某個 mcp 工具。

示例圖：
23.png

二次開發 TinyEngine 時，如何修改/添加/刪除 mcp 工具？

當前 mcp 工具都默認隨着插件的註冊表導出（因為依賴插件的相關能力），所以如果需要修改/添加/刪除 mcp 工具，修改註冊表即可。

默認的插件註冊表導出：

// mcp 工具 mcp/index.js
export const mcp = {
  tools: [getGlobalState, addOrModifyGlobalState, deleteGlobalState]
}


// 插件註冊表導出 index.js
export default {
  ...metaData,
  entry,
  metas: [globalStateService],
  // mcp 的相關導出
  mcp
}

在二次開發工程中修改/添加 mcp 工具，同自定義註冊表，請參考註冊表相關文檔。

未來優化：

  • 添加、調優 mcp 工具
  • 添加 chat 模式的系統提示詞，讓 AI 工具調用效果更好

8. 【其他】功能細節優化\&bug修復

  • 為TinyGrid配置添加版本字段 by @LLDLLY in opentiny/tiny-engine#1568
  • 優化畫布選項位置計算算法 by @chilingling in opentiny/tiny-engine#1572
  • 從props解析區塊依賴 by @chilingling in opentiny/tiny-engine#1602
  • 修復tinyvue類型錯誤 by @chilingling in opentiny/tiny-engine#1623

<!---->

  • 修復用户目錄句柄刪除導致的生成失敗 by @chilingling in opentiny/tiny-engine#1543
  • 修復工具名稱和導出名不一致問題 by @chilingling in opentiny/tiny-engine#1606
  • 確保只有字符串id註冊到metaHashMap by @chilingling in opentiny/tiny-engine#1622
  • 修復ColorInput內邊距問題 by @chilingling in opentiny/tiny-engine#1595
  • 修復子頁面隱藏顯示設置主頁選項 by @chilingling in opentiny/tiny-engine#1544
  • 修復baseURL移除斜槓問題 by @chilingling in opentiny/tiny-engine#1631
  • 格式化工具調用結果 by @hexqi in opentiny/tiny-engine#1637

<!---->

  • 修復內置構建選項外部化問題 by @betterdancing in opentiny/tiny-engine#1646
  • 修復綁定事件後高亮JS函數失敗 by @chilingling in opentiny/tiny-engine#1656
  • 修復畫布組件邊框/開關樣式等問題 by @betterdancing in opentiny/tiny-engine#1649
  • 修復ImportMap問題和改進變量綁定 by @betterdancing in opentiny/tiny-engine#1676
  • 預覽支持自定義import-map by @chilingling in opentiny/tiny-engine#1669
  • 修復初始化期間方法高亮失敗 by @chilingling in opentiny/tiny-engine#1666
  • 修復parseFunction空字符串處理問題 by @fayching in opentiny/tiny-engine#1677
  • 更新生成代碼模板依賴版本 by @chilingling in opentiny/tiny-engine#1620
  • 刪除webcomponent包 by @chilingling in opentiny/tiny-engine#1583
  • 導出基礎類型 by @chilingling in opentiny/tiny-engine#1692

  • 文檔更新

    • 添加前後端Docker部署文檔 by @lu-yg in opentiny/tiny-engine#1598
    • 更新註冊表代碼示例 by @chilingling in opentiny/tiny-engine#1693
    • 更新AI插件文檔內容 by @hexqi in opentiny/tiny-engine#1712
       

以上是此次更新的主要內容

如需瞭解更多可以查看：v2.9.0 所有 changelog

結語

TinyEngine v2.9 的發佈，不僅是功能層面的一次全面躍遷——從 AI 助手的能力增強、Tailwind CSS 的原生支持，到資源管理插件的引入、應用預覽能力的落地。每一個細節的打磨，每一次架構的演進，都旨在讓開發者以更低的成本、更高的自由度，構建真正屬於自己的低代碼世界。

這不僅僅是一個版本的更新，更是社區共建成就的見證。我們相信，開源的意義不僅在於代碼共享，更在於思想碰撞與協作共創。正是每一位用户的使用、反饋與貢獻，讓 TinyEngine 在真實場景中不斷淬鍊成長。

未來之路，我們繼續同行。
歡迎你持續關注 TinyEngine 的演進，參與社區討論，提交你的想法與代碼。讓我們攜手，把低代碼的可能性推向更遠的地方。

關於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、TinyEditor~
如果你也想要共建，可以進入代碼倉庫，找到 good first issue 標籤，一起參與開源貢獻~

vue.js , 低代碼 , 前端
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.