• 文件規范，必須包含下面幾個文件

pluginProject
 - src 插件源碼
 - index.js 注冊插件入口，需要導出約定的數據結構
 - package.json

import component, { api } from './src/Main.vue'

export default {
  id: 'pluginId', // 插件id
  title: 'pluginName', // 插件名
  icon: 'js', // 插件 icon
  align: 'top', // 插件位置，左側插件可選值：'top' | 'bottom'  工具欄可選值：'right' | 'center' | 'left'
  component, // 插件面板打開時渲染的組件
  api, // 插件暴露的 api，可以提供給其他插件調用
}

import Materials from '@xxxx/lowcode-plugin-materials'

export default {
  plugins: [
    Materials,
    // ...
  ],
  toolbars: [
    // ...
  ],
  settings: [
    // ...
  ],
}

// 全量導入UI組件庫
import UI from '@xxxx/UI'

Object.entries(UI).forEach(([key, component]) => {
  const { name } = component
  if (name) {
    window.TinyLowcodeComponent[name] = component
  }
})

// 導入某個組件庫里面的單個組件
import { button } from '@xxxx/UI'

window.TinyLowcodeComponent[name] = button

通過導入第三方組件庫，用戶可以在低代碼平臺中使用這些組件庫來開發應用程序。除了導入組件外，用戶還需要通過 bundle.json 文件來描述導入的組件所暴露出來的事件和屬性。這樣，用戶可以在應用程序中使用這些組件，并通過 bundle.json 文件來了解和使用組件的事件和屬性。這是一個非常方便和靈活的功能，使得用戶可以自由地使用和定制他們所需的組件，從而快速開發出高質量的應用程序。

// 以下JSON為節選按鈕暴露的屬性
{
  "schema": {
    "type": "object",
    "properties": {
      "size": {
        "title": "定義按鈕尺寸",
        "type": "string",
        "enum": ["large", "medium", "small", "mini"],
        "enumNames": ["較大尺寸", "中等尺寸", "較小尺寸", "迷你尺寸"],
        "default": ""
      },
      "text": {
        "title": "設置按鈕顯示的文本",
        "type": "string",
        "default": ""
      }
    },
    "events": {
      "onClick": {
        "label": {
          "zh_CN": "鼠標單擊時觸發",
          "en_US": "Triggered on mouse click"
        },
        "description": {
          "zh_CN": "鼠標單擊時觸發的回調函數"
        },
        "type": "event",
        "defaultValue": ""
      }
    }
  }
}

• TinyEngine 支持自定義 DSL 生成定制的源代碼。

相對于在運行時由平臺提供渲染引擎的方式，這種方式能夠為用戶提供更多的自主權和安全性。用戶可以自由地定義自己的 DSL，并根據需要生成定制化的源代碼，從而更加靈活地控制應用程序的行為和性能。

TinyEngine 默認生成 Vue 的源代碼。當頁面編排完成后，會生成一個包含頁面信息的 schema。DSL 通過便利遞歸等方法，從中生成源代碼。如果技術棧是 Angular 或 React，用戶可以完全開發一個 Angular 或 React 的 DSL，從而生成一個新的源代碼工程。用戶可以根據自己的需求定制生成源代碼的方式，這是一個非常靈活和強大的功能，使得 TinyEngine 可以適應不同的技術棧和需求，從而更加廣泛地應用于各種應用程序的開發。如果你想開發其他技術棧的 DSL，那么一定要對頁面協議比較熟悉。

interface IPageSchema { // 頁面 或 區塊 schema
  fileName?: string; // 頁面名稱，schema 是頁面時使用
  componentName?: string; // 組件名，schema 是頁面時值為 "Page"
  blockName?: string; // 區塊名，schema 是區塊時使用
  id: string;
  css?: string; // 頁面全局樣式
  props?: { // 組件綁定的屬性
      [prop:string]?: any;
      style?: string; // 行內樣式
      className?: string; // 綁定的樣式類名
      };
      lifeCycles?: { // 生命周期
      [prop:string]?: {
          type: 'js'; // 固定值
          source: string; // 函數字符串
      }
      };
  children?: Array< IComponentSchema > | string; // 子組件列表 或 文本字符串
  dataSource?: { // 數據源
      list: Array< IDateSource > // 數據源列表
  };
  actions?: { // 頁面 JS
      module: {
          source: string; // 頁面定義的 JS 源碼字符串
      };
      type: "FUNCTION"; // 固定值
      list: Array<{
          id: string; // 頁面所定義的函數名
          title: string; // 配置時顯示名稱 與 id 一致
      }>
  };
  bridge?: { // 橋接
  imports?: Array<{
          name: string; // 配置時顯示名稱
          type: "package" | "local"; // package: npm 包; local: 本地文件
          path: string; // 導入的路徑(包名或者本地路徑)
          item: string; // 導入的項目
          useDefault?: boolean; // 是否默認導出
          instance?: string; // 實例名，需要注入service時需要添加該字段，typescript 模式下使用
      }>
  };
  inputs: Array<{ // 頁面接口：輸入類型
      name: string; // 輸入屬性名稱
      type: string; // 數據類型聲明
      defaultValue?: any; // 默認值
      }>;
  outputs: Array<{ // 頁面接口：事件輸出
      name: string; // typescript類型聲明
      type: string; // 數據類型聲明
  }>;
      schema?: IComponentMetaSchema // 區塊時使用，區塊需要暴露的組件屬性元數據
  }

• TinyEngine 支持高低代碼混合開發。

高低代碼混合開發可以更好地滿足業務需求。在企業的應用開發中，往往需要面對快速變化的業務需求，此時，如果全部采用低代碼方式進行開發，則可能會因為代碼的復雜性而無法快速適應變化。而如果采用高低代碼混合的方式，則可以通過低代碼進行常規業務的快速開發，對于特殊的業務邏輯，則由專業開發人員通過高代碼進行實現，這樣就可以更好地滿足業務需求的變化。TinyEngine 在構建應用程序的過程中，提供了下載源代碼的功能，使得用戶可以在線下進行復雜業務邏輯的調試。這一特點極大地便利了開發者的操作，減少了在線調試和測試的時間和資源消耗，同時也提高了代碼的質量和可靠性。通過下載源代碼進行調試，用戶可以更加靈活地控制應用程序的行為和性能，從而更好地滿足業務需求。總之，TinyEngine 的這一特點為用戶提供了更多的自主權和靈活性，使得他們可以更加高效地控制應用程序的行為和性能。

• 畫布應具備核心的拖拽和連線繪圖功能，以支持用戶直觀地進行資源編排