mirror of
https://github.com/NetEase/tango.git
synced 2026-08-29 02:01:34 +08:00
docs: update site docs
This commit is contained in:
wwsun
@@ -1,48 +0,0 @@
|
||||
# appJson.json
|
||||
|
||||
`appJson.json` 是应用的附加元数据配置文件，主要包含被 PaaS 读取的菜单数据和权限数据。
|
||||
|
||||
:::warning
|
||||
需要关注的是，该文件通常会自动生成，如无必要，不推荐手动更新。
|
||||
:::
|
||||
|
||||
示例内容如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "/",
|
||||
"name": "首页",
|
||||
"parentPath": null,
|
||||
"privilegeCode": null
|
||||
},
|
||||
{
|
||||
"path": "/list",
|
||||
"name": "列表页",
|
||||
"parentPath": null,
|
||||
"privilegeCode": null
|
||||
},
|
||||
{
|
||||
"path": "/user/:userId",
|
||||
"name": "用户详情",
|
||||
"parentPath": null,
|
||||
"privilegeCode": null
|
||||
}
|
||||
],
|
||||
"extra": "{\"appCode\":\"music_one_backend\"}"
|
||||
}
|
||||
```
|
||||
|
||||
## pages
|
||||
|
||||
`pages` 字段用于 PaaS 平台的菜单上报，字段包括：
|
||||
|
||||
- path 页面的本地路由
|
||||
- parentPath 页面的父级菜单路由，用来形成菜单中的上下级关系
|
||||
- name 页面的标题
|
||||
- privilegeCode 上报给 PMS 的权限码
|
||||
|
||||
## extra
|
||||
|
||||
`extra` 字段用来包含附加元数据，格式为 json 字符串。`appCode` 为 pms 应用名。
|
||||
@@ -11,19 +11,11 @@
|
||||
│ +── components
|
||||
│ +── services/index.js
|
||||
│ +── stores
|
||||
│ +── config // 运行时配置
|
||||
| | |-- index.js 默认配置文件
|
||||
│ │ ├── config.dev.js 开发环境配置，包括设计器环境
|
||||
│ │ ├── config.online.js 线上环境配置文件
|
||||
│ │ └── config.test.js 测试环境配置
|
||||
│ ├── helper.js // 工具函数扩展，自动合并到 ctx 上下文中
|
||||
│ ├── routes.js // 路由配置
|
||||
│ ├── global.less
|
||||
│ ├── global.less // 全局样式
|
||||
| |-- index.js 应用启动配置
|
||||
└── package.json
|
||||
|---appJson.json 应用附加元信息，包括 PaaS 菜单和权限数据
|
||||
|---tango.config.json 设计器和 external 配置
|
||||
|---easy.config.js 项目构建配置
|
||||
```
|
||||
|
||||
## `src/components` 自定义组件
|
||||
|
||||
@@ -31,10 +31,6 @@ runApp({
|
||||
});
|
||||
```
|
||||
|
||||
:::info
|
||||
消息展示配置需要升级到 `@music163/tango-boot@1.6.0` 及以上版本。
|
||||
:::
|
||||
|
||||
## 启动项配置
|
||||
|
||||
`boot` 配置项用于应用的启动项配置：
|
||||
@@ -136,7 +132,3 @@ runApp({
|
||||
```jsx
|
||||
<Box isRender={tango.env === 'development'}>一个仅在开发态显示的区域</Box>
|
||||
```
|
||||
|
||||
:::tip
|
||||
该功能需要升级到 tango-boot@1.17.0 及以上版本才可以使用。
|
||||
:::
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
# 构建配置
|
||||
|
||||
我们推荐使用 Easy 进行 Tango 前端项目的离线构建。
|
||||
|
||||
## 开发调试
|
||||
|
||||
`package.json` 中的脚本文件如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"analyze": "cross-env ANALYZE=true webpack",
|
||||
"build": "cross-env NODE_ENV=production ASSET_PATH=g/lc-online-test easy build",
|
||||
"start": "easy dev"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 配置文件示例
|
||||
|
||||
`easy.config.js` 配置:
|
||||
|
||||
```js
|
||||
import { defineConfig } from '@music/easy-app-boot';
|
||||
import usePlugin from '@music/easy-tango-plugin';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [usePlugin()],
|
||||
});
|
||||
```
|
||||
|
||||
对应的依赖
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@music/easy-app-boot": "0.1.12-rc.17",
|
||||
"@music/easy-tango-plugin": "^1.x",
|
||||
"@modern-js/plugin-less": "^1.3.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 工程构建配置（老）
|
||||
|
||||
`easy.config.js` 配置：
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
framework: ['@music/easy-tango-framework', {}],
|
||||
output: {
|
||||
path: 'public',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
对应的依赖
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@music/easy-app-boot": "^0.1.7",
|
||||
"@music/easy-tango-framework": "^0.2.3"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,10 +1,10 @@
|
||||
# 关于 TangoBoot
|
||||
# TangoBoot
|
||||
|
||||
TangoBoot 是一个用来构建前端应用的运行时框架，提供了标准的数据请求，状态管理，路由方案，并提供了通用的运行时工具函数，让开发者通过简单的配置即可生成单页应用。
|
||||
TangoBoot 是一个服务于 Tango 低代码应用开发体系的前端应用框架，提供了标准的数据请求，状态管理，路由方案，并提供了通用的运行时工具函数，让开发者通过简单的配置即可生成单页应用。
|
||||
|
||||
## 应用架构
|
||||
|
||||
TangoBoot 的应用架构推崇 View-Model-Service 三层模型，其中模型层定义了 Observable States，视图层观察 Model 的变化而进行自动更新，服务层用来创建一组服务函数，供视图层和模型层消费。图如下图所示:
|
||||
TangoBoot 的应用架构使用的是 View-Model-Service 三层模型，其中模型层定义了 Observable States，视图层观察 Model 的变化而进行自动更新，服务层用来创建一组服务函数，供视图层和模型层消费。图如下图所示:
|
||||
|
||||
<img
|
||||
alt="image"
|
||||
@@ -37,6 +37,7 @@ const { mount, unmount, bootstrap } = runApp({
|
||||
mountElement: document.querySelector('#root'),
|
||||
qiankun: false,
|
||||
},
|
||||
|
||||
stores: {
|
||||
home,
|
||||
counter,
|
||||
@@ -136,24 +137,3 @@ export default defineServices({
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## 构建配置
|
||||
|
||||
构建配置使用的方案为 easy ，对应的配置文件为 easy.config.js 其提供了一套插件体系方便我们对不同应用的构建配置做封装。其中 Tango 应用的构建配置对应封装为 easy-tango-framework .
|
||||
|
||||
```js
|
||||
// 项目根目录 easy.config.js
|
||||
module.exports = {
|
||||
framework: ['@music/easy-tango-framework', option],
|
||||
};
|
||||
```
|
||||
|
||||
### option 配置
|
||||
|
||||
不传 option 默认为中后台应用配置
|
||||
|
||||
```js
|
||||
{
|
||||
h5: false; //默认为false，是否切换成h5构建配置
|
||||
}
|
||||
```
|
||||
|
||||
@@ -77,49 +77,6 @@ export default defineServices({
|
||||
`application/x-www-form-urlencoded` 数据被编码成以 '&' 分隔的键 - 值对，同时以 '=' 分隔键和值。非字母或数字的字符会被 [percent-encoding](https://developer.mozilla.org/zh-CN/docs/Glossary/percent-encoding): 这也就是为什么这种类型不支持二进制数据 (应使用 multipart/form-data 代替).
|
||||
:::
|
||||
|
||||
:::warning 配置参数失效
|
||||
如果启用了加密请求，则 axios 的常用配置参数可能会失效，具体以加密请求配置为准。
|
||||
:::
|
||||
|
||||
## 使用加密请求
|
||||
|
||||
如果你的业务场景有加密需求，可以通过 `encryptFetch` 属性切换到加密请求方案，开启后将通过 [encrypt-fetch](https://music-cms.hz.netease.com/encrypt-fetch-doc/guide) 进行请求的发起。
|
||||
|
||||
```js
|
||||
import { defineServices } from '@music163/tango-boot';
|
||||
|
||||
export default defineServices({
|
||||
list: {
|
||||
url: '/api/users',
|
||||
encryptFetch: {
|
||||
encrypt: true,
|
||||
// 这里你也可以传入 encrypt-fetch 的其他配置，参考 https://music-cms.hz.netease.com/encrypt-fetch-doc/api
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
或者为所有的请求统一开启加密设置
|
||||
|
||||
```js
|
||||
import { defineServices } from '@music163/tango-boot';
|
||||
|
||||
export default defineServices(
|
||||
{
|
||||
list: {
|
||||
url: '/api/users',
|
||||
},
|
||||
create: {
|
||||
url: '/api/create',
|
||||
},
|
||||
},
|
||||
{
|
||||
encryptFetch: {
|
||||
// 这里你也可以传入 encrypt-fetch 的其他配置，参考 https://music-cms.hz.netease.com/encrypt-fetch-doc/api
|
||||
},
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## 配置错误消息展示
|
||||
|
||||
|
||||
@@ -12,9 +12,7 @@ const counter = defineStore({
|
||||
});
|
||||
|
||||
// 当状态变化的时候，视图会自动刷新
|
||||
export default definePage(() => (
|
||||
<button onClick={counter.increment}>{counter.num}</button>
|
||||
));
|
||||
export default definePage(() => <button onClick={counter.increment}>{counter.num}</button>);
|
||||
```
|
||||
|
||||
值得注意的是，开发者必须借助 `defineStore` 来定义状态，它会帮助你创建一个 observable 的状态对象。借助 `definePage` 来定义视图，它会帮你订一个 reactive 的视图组件，并且在自动监听状态的变化，按需进行 UI 更新。
|
||||
@@ -81,12 +79,15 @@ useStore.js
|
||||
```js
|
||||
import { store } from '@music163/tango-boot';
|
||||
|
||||
const userStore = defineStore({
|
||||
user: {},
|
||||
async fetchUser() {
|
||||
userStore.user = await fetch('/user');
|
||||
const userStore = defineStore(
|
||||
{
|
||||
user: {},
|
||||
async fetchUser() {
|
||||
userStore.user = await fetch('/user');
|
||||
},
|
||||
},
|
||||
}, "userStore");
|
||||
'userStore',
|
||||
);
|
||||
|
||||
export default userStore;
|
||||
```
|
||||
@@ -97,24 +98,29 @@ recipesStore.js
|
||||
import tango, { store } from '@music163/tango-boot';
|
||||
import userStore from './userStore';
|
||||
|
||||
const recipesStore = defineStore({
|
||||
recipes: [],
|
||||
const recipesStore = defineStore(
|
||||
{
|
||||
recipes: [],
|
||||
|
||||
// 方式1：直接用调用
|
||||
async fetchRecipes() {
|
||||
recipesStore.recipes = await fetch(`/recipes?user=${userStore.user.id}`);
|
||||
},
|
||||
// 方式1：直接用调用
|
||||
async fetchRecipes() {
|
||||
recipesStore.recipes = await fetch(`/recipes?user=${userStore.user.id}`);
|
||||
},
|
||||
|
||||
// 方法2：使用 this 调用，仅支持 method property，不支持箭头函数
|
||||
async fetchRecipes2() {
|
||||
this.recipes = await fetch(`/recipes?user=${userStore.user.id}`);
|
||||
},
|
||||
// 方法2：使用 this 调用，仅支持 method property，不支持箭头函数
|
||||
async fetchRecipes2() {
|
||||
this.recipes = await fetch(`/recipes?user=${userStore.user.id}`);
|
||||
},
|
||||
|
||||
// 方法3：使用 tango 全局变量调用，你也可以使用这种方式引入其他的 store
|
||||
async fetchRecipes3() {
|
||||
tango.stores.recipesStore.recipes = await fetch(`/recipes?user=${tango.stores.userStore.user.id}`);
|
||||
// 方法3：使用 tango 全局变量调用，你也可以使用这种方式引入其他的 store
|
||||
async fetchRecipes3() {
|
||||
tango.stores.recipesStore.recipes = await fetch(
|
||||
`/recipes?user=${tango.stores.userStore.user.id}`,
|
||||
);
|
||||
},
|
||||
},
|
||||
}, "recipesStore");
|
||||
'recipesStore',
|
||||
);
|
||||
|
||||
export default recipesStore;
|
||||
```
|
||||
@@ -193,7 +199,7 @@ defineStore(
|
||||
{
|
||||
name: 'alice',
|
||||
},
|
||||
'user'
|
||||
'user',
|
||||
);
|
||||
|
||||
// 双向绑定验证
|
||||
|
||||
@@ -2,168 +2,14 @@
|
||||
|
||||
`tango.config.json` 是 Tango 项目的核心配置文件，当您的项目使用 Tango 设计器在线开发时会读取该文件进行线上开发环境的初始化。
|
||||
|
||||
## type
|
||||
|
||||
必填。`type` 指定项目的应用类型。可用的取值包括：
|
||||
|
||||
- `tango-web` 中后台项目
|
||||
- `tango-h5` H5 项目
|
||||
- ...
|
||||
|
||||
若需要新增类型，则需要到 Tango 平台进行注册，否则不识别。
|
||||
|
||||
## entry
|
||||
|
||||
非必填。`entry` 是项目的入口文件，用于在线设计器的初始化，默认取值为 `/src/index.js`。
|
||||
|
||||
## i18n
|
||||
|
||||
非必填。`i18n` 是项目的多语言配置。其子配置项包括：
|
||||
|
||||
- language 语言，例如 `zh-CN`
|
||||
- appId 前语平台的应用 ID
|
||||
- preModule
|
||||
|
||||
## sandbox
|
||||
|
||||
必填。`sandbox` 是在线沙箱的配置。起子配置项包括：
|
||||
|
||||
### ~~externals~~ (废弃)
|
||||
|
||||
:::warning 已废弃
|
||||
该配置项已废弃，仅作旧配置文件参考。新配置请参见 `packages` 配置项。
|
||||
:::
|
||||
|
||||
在线沙箱的外置扩展，用于避免将某些 `import` 的包打包到 bundle 中，而是在运行时再去外部获取这些扩展依赖。外置依赖的扩展可以借助 `externalResources` 引入关联的资源。
|
||||
|
||||
例如：
|
||||
|
||||
```json
|
||||
{
|
||||
"sandbox": {
|
||||
"externals": {
|
||||
"react": "React",
|
||||
"react-dom": "ReactDOM",
|
||||
"styled-components": "styled"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### ~~externalResources~~ (废弃)
|
||||
|
||||
:::warning 已废弃
|
||||
该配置项已废弃，仅作旧配置文件参考。新配置请参见 `packages` 与 `externalResources` 配置项。
|
||||
:::
|
||||
|
||||
沙箱启动时引入的外置依赖资源列表，可以是 `js` 或 `css` 等静态文件。例如：
|
||||
|
||||
```json
|
||||
{
|
||||
"sandbox": {
|
||||
"externalResources": [
|
||||
"https://g.alicdn.com/code/lib/react/17.0.2/umd/react.development.js",
|
||||
"https://g.alicdn.com/code/lib/react-dom/17.0.2/umd/react-dom.development.js",
|
||||
"https://g.alicdn.com/code/lib/react-is/16.13.1/umd/react-is.production.min.js",
|
||||
"https://g.alicdn.com/code/lib/styled-components/5.3.5/styled-components.min.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### ~~sandboxId~~ (废弃)
|
||||
|
||||
:::warning 已废弃
|
||||
该配置项已废弃，仅作旧配置文件参考。该配置原先由平台直接写入配置文件，目前由引擎接管自动生成。
|
||||
:::
|
||||
|
||||
沙箱 ID，自动生成。
|
||||
|
||||
### evaluateJavaScript (不推荐)
|
||||
|
||||
:::warning 不推荐使用
|
||||
该配置项不推荐使用，其只在沙箱内有效，生产环境内无效，仅作旧配置文件参考。该配置原先由平台直接写入配置文件，目前由引擎接管自动生成。
|
||||
:::
|
||||
|
||||
沙箱启动后额外执行的 JavaScript 脚本代码。例如
|
||||
|
||||
```json
|
||||
{
|
||||
"sandbox": {
|
||||
"evaluateJavaScript": "console.log('hello world');"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### ~~npmUrlMap~~ (废弃)
|
||||
|
||||
:::warning 已废弃
|
||||
该配置项已废弃，仅作旧配置文件参考。目前沙箱仅支持 `codesandbox`，因此该配置项无效。
|
||||
:::
|
||||
|
||||
WIP
|
||||
|
||||
## dataSource
|
||||
|
||||
非必填。项目绑定的数据源信息。
|
||||
|
||||
### ox
|
||||
|
||||
项目关联的云音乐后端 Java 应用列表。当用户在在线设计器调用相关应用的接口后，会读取该文件，并自动匹配到相应的应用环境中，进行接口的访问。
|
||||
|
||||
单个应用的配置项包括：
|
||||
|
||||
- app 后端应用名
|
||||
- branch 后端应用的关联分枝（访问该分枝部署到特定环境的接口）
|
||||
- ~~functions 导入项目的函数列表~~ **已废弃，如不提供需要升级到 tango-boot@1.12.0 以上版本**
|
||||
|
||||
例如：
|
||||
|
||||
```json
|
||||
{
|
||||
"dataSource": {
|
||||
"ox": [
|
||||
{
|
||||
"app": "music-clientversion-control-manager",
|
||||
"branch": "master"
|
||||
},
|
||||
{
|
||||
"app": "glook-finance",
|
||||
"branch": "master"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## ~~baseDependencies~~ (废弃)
|
||||
|
||||
:::warning 已废弃
|
||||
该配置项已废弃，仅作旧配置文件参考。新配置请参见 `packages` 配置项。
|
||||
:::
|
||||
|
||||
非必填。项目的基础依赖，用于获取项目基础物料列表的信息。如未提供，其默认值为 `@music163/antd`, `@music163/tango-boot`。你可以添加更多的基础依赖，前提是在 Tango 平台进行了基础依赖的注册。
|
||||
|
||||
```json
|
||||
{
|
||||
"baseDependencies": ["@music163/antd", "@music163/tango-boot"]
|
||||
}
|
||||
```
|
||||
|
||||
## ~~bizDependencies~~ (废弃)
|
||||
|
||||
:::warning 已废弃
|
||||
该配置项已废弃，仅作旧配置文件参考。新配置请参见 `packages` 配置项。
|
||||
:::
|
||||
|
||||
非必填。合并到物料面板业务组件菜单中的业务组件列表。
|
||||
|
||||
```json
|
||||
{
|
||||
"bizDependencies": ["@music/ct-input", "@music/ct-custom-date-picker"]
|
||||
}
|
||||
```
|
||||
|
||||
## packages
|
||||
|
||||
项目使用的 npm 包依赖信息，用于定义依赖的类型以及外置依赖资源。该配置项为一个 map，key 为对应的 npm 包名，value 为该依赖的配置信息。
|
||||
@@ -180,25 +26,19 @@ WIP
|
||||
"version": "17.0.2",
|
||||
"library": "React",
|
||||
"type": "dependency",
|
||||
"resources": [
|
||||
"https://g.alicdn.com/code/lib/react/{{version}}/umd/react.development.js"
|
||||
]
|
||||
"resources": ["https://unpkg.com/react@{{version}}/umd/react.development.js"]
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "17.0.2",
|
||||
"library": "ReactDOM",
|
||||
"type": "dependency",
|
||||
"resources": [
|
||||
"https://g.alicdn.com/code/lib/react-dom/{{version}}/umd/react-dom.development.js"
|
||||
]
|
||||
"resources": ["https://unpkg.com/react-dom@{{version}}/umd/react-dom.development.js"]
|
||||
},
|
||||
"@music163/tango-boot": {
|
||||
"version": "1.18.5",
|
||||
"version": "0.1.3",
|
||||
"library": "TangoBoot",
|
||||
"type": "baseDependency",
|
||||
"resources": [
|
||||
"https://s9.music.126.net/musicst/npm/@music163/tango-boot/{{version}}/boot.js"
|
||||
],
|
||||
"resources": ["https://unpkg.com/@music163/tango-boot@{{version}}/dist/boot.js"],
|
||||
"description": "云音乐低代码运行时框架"
|
||||
},
|
||||
"@music163/antd": {
|
||||
@@ -215,15 +55,15 @@ WIP
|
||||
"https://s9.music.126.net/musicst/npm/@music163/antd/{{version}}/umd/index.css"
|
||||
]
|
||||
},
|
||||
"@music/ct-pc-json-editor": {
|
||||
"@music163/biz-comp": {
|
||||
"type": "bizDependency",
|
||||
"version": "0.0.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::tip 注意依赖的先后顺序
|
||||
由于依赖是按照定义的先后顺序注入至沙箱内，因此需要确保 `packages` 内依赖的先后顺序，否则可能会导致应用加载依赖失败（例如将 `react` 放置在组件包之后，会导致组件包无法正常加载）。
|
||||
:::tip 注意依赖的先后顺序
|
||||
由于依赖是按照定义的先后顺序注入至沙箱内，因此需要确保 `packages` 内依赖的先后顺序，否则可能会导致应用加载依赖失败（例如将 `react` 放置在组件包之后，会导致组件包无法正常加载）。
|
||||
:::
|
||||
|
||||
## externalResources
|
||||
@@ -232,16 +72,10 @@ WIP
|
||||
|
||||
```json
|
||||
{
|
||||
"externalResources": [
|
||||
"https://nos.netease.com/watermark/nis.wm.js",
|
||||
"https://s8.music.126.net/5c89f5f14c9417d67a64ff3d_5c89f5f14c9417d67a64ff3f_0/react-native-web0.15.8.js",
|
||||
"https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-transition-group/4.4.2/react-transition-group.min.js"
|
||||
]
|
||||
"externalResources": ["https://tango.netease.io/script.js"]
|
||||
}
|
||||
```
|
||||
|
||||
该配置项同时生效于沙箱与构建产物（需要 `@music/chitu-tango-plugin@^1.5.0`），配置后可同时优化平台设计器与线上运行的加载时间。
|
||||
|
||||
## proxy
|
||||
|
||||
非必填。项目的代理规则。
|
||||
@@ -256,27 +90,3 @@ WIP
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## engine
|
||||
|
||||
非必填。在线设计器的配置。其子配置项包括：
|
||||
|
||||
### defaultActiveRoute
|
||||
|
||||
设计器启动后默认激活的路由。若不提供，默认取值为 `/`。
|
||||
|
||||
### autoRemoveUnusedImports
|
||||
|
||||
在 Web IDE 中保存代码后，是否自动移除未使用的引入。默认不启用。
|
||||
|
||||
## platform
|
||||
|
||||
非必填。在线平台的关联配置。其子配置项包括：
|
||||
|
||||
### autoDeploy
|
||||
|
||||
是否在每次推送代码后自动触发 Febase 的环境部署。默认不启用。
|
||||
|
||||
### upgradeAutoPush
|
||||
|
||||
是否在升级依赖后自动触发一次推送。默认不启用。
|
||||
|
||||
@@ -4,6 +4,10 @@ import Link from '@docusaurus/Link';
|
||||
|
||||
Tango 是一个用于快速构建低代码工具的前端框架。借助 Tango 只需要少量代码就可以快速的搭建一个基本的低代码设计器。本文将会帮助你借助 Tango 实现一个基本的低代码可视化设计器。
|
||||
|
||||
:::warning
|
||||
基于 Tango 低代码引擎的低代码平台已经在网易云音乐内部服务了内部众多业务开发场景。由于开源工作涉及到大量的代码分离工作，当前开源版本为低代码引擎的 alpha 演示版本，API 可能不稳定，不建议在生产环境中使用。我们预计在 2023 年 12 月底前发布正式版。
|
||||
:::
|
||||
|
||||
## 环境要求
|
||||
|
||||
- 安装 node 10.13 以上版本
|
||||
|
||||
@@ -2,11 +2,11 @@ import Link from '@docusaurus/Link';
|
||||
|
||||
# 简介
|
||||
|
||||
Tango 是一个用于快速构建低代码平台的 JavaScript 框架。借助 Tango 只需要几行代码就可以完成基本的低代码平台前端系统的搭建。
|
||||
Tango 是一个用于快速构建低代码平台的低代码设计器框架，借助 Tango 只需要数行代码就可以完成一个基本的低代码平台前端系统的搭建。Tango 低代码设计器**直接读取前端项目的源代码，并以源代码为中心，执行和渲染前端视图，并为用户提供低代码可视化搭建能力，用户的搭建操作会转为对代码的修改**。借助 Tango 可以实现 **源码进，源码出**的效果。
|
||||
|
||||
## 引擎架构概览
|
||||
|
||||
Tango 低代码引擎在实现上使用分层架构模型，使得上层的低代码平台与底层的低代码引擎可以独立开发，构成有机整体。另一方面，Tango 低代码引擎建立了一套开放的生态体系，开发者可以自由的贡献扩展组件配置能力的属性设置器，以及扩展低代码物料的二方三方业务组件。
|
||||
Tango 低代码引擎在实现上进行了分层解藕，使得上层的低代码平台与底层的低代码引擎可以独立开发和维护，快速集成部署。另一方面，Tango 低代码引擎定义了一套开放的物料生态体系，开发者可以自由的贡献扩展组件配置能力的属性设置器，以及扩展低代码物料的二方三方业务组件。
|
||||
|
||||
如下图所示：
|
||||
|
||||
@@ -22,11 +22,11 @@ Tango 低代码引擎设计器用于低成本初始化一个基本的低代码
|
||||
- 运行时沙箱：用于设计器运行时视图的渲染。
|
||||
- Web IDE：用于进行在线源代码编辑。
|
||||
|
||||
<img src="https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/13208337399/121f/95a2/5d89/880d65d1ac77a00baf2c4ffd3ba0926b.png" />
|
||||
<img src="https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30108642346/b8cf/e86d/ef5a/514d90b722b5d8dc0e18516ed594a07b.png" />
|
||||
|
||||
## 基于源代码的引擎内核
|
||||
|
||||
Tango 低代码引擎使用源代码驱动，借助对源码进行 AST 解析与操纵，实现用户可视化操作行为与源码变更之间的互动。与传统的借助 [Schema 驱动的低代码方案](https://mp.weixin.qq.com/s/yqYey76qLGYPfDtpGkVFfA)相比，无私有搭建协议，无私有 DSL，支持实时源码生成与同步。
|
||||
Tango 低代码引擎不依赖私有搭建协议和 DSL，而是直接使用源代码驱动，引擎内部将源码转为 AST，用户的所有的搭建操作转为对 AST 的遍历和修改，进而将 AST 重新生成为代码，将代码同步给在线沙箱执行。与传统的借助 [Schema 驱动的低代码方案](https://mp.weixin.qq.com/s/yqYey76qLGYPfDtpGkVFfA) 相比，不受到私有 DSL 和协议的限制，能够完美的实现低代码搭建与源码开发的无缝集成。
|
||||
|
||||
<img src="https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/13140534982/ee2e/f42c/cc9a/184e2918a011b57d46e6c64a2722fa44.png" />
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import TypeTable from '@site/src/components/TypeTable';
|
||||
|
||||
Tango 的物料协议是附加在现有组件包上的一层额外描述文件，用于低代码平台读取和消费。开发者需要遵守物料协议的约定提供与物料配套的协议文件。
|
||||
物料协议定义了一个组件的基本信息，包括组件的名称、属性、拖拽规则等。物料协议是为组件附加的额外描述文件，不会侵入到你的组件代码中，因此你可以在不改动组件代码的情况下，为组件添加物料协议。
|
||||
|
||||
## 组件原型 prototype
|
||||
|
||||
|
||||
+26
-28
@@ -20,45 +20,43 @@ const sidebars = {
|
||||
designer: [
|
||||
'intro',
|
||||
'designer/quick-start',
|
||||
{
|
||||
type: 'category',
|
||||
label: '模块',
|
||||
items: [
|
||||
'designer/modules/designer',
|
||||
'designer/modules/designer-panel',
|
||||
'designer/modules/sidebar-panel',
|
||||
'designer/modules/setting-panel',
|
||||
'designer/modules/workspace-panel',
|
||||
'designer/modules/view-panel',
|
||||
'designer/modules/sandbox',
|
||||
'designer/modules/hooks',
|
||||
],
|
||||
collapsible: false,
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
label: '扩展',
|
||||
items: ['designer/extend/overview', 'designer/extend/remote-service'],
|
||||
collapsible: false,
|
||||
},
|
||||
'designer/setters',
|
||||
// {
|
||||
// type: 'category',
|
||||
// label: '模块',
|
||||
// items: [
|
||||
// 'designer/modules/designer',
|
||||
// 'designer/modules/designer-panel',
|
||||
// 'designer/modules/sidebar-panel',
|
||||
// 'designer/modules/setting-panel',
|
||||
// 'designer/modules/workspace-panel',
|
||||
// 'designer/modules/view-panel',
|
||||
// 'designer/modules/sandbox',
|
||||
// 'designer/modules/hooks',
|
||||
// ],
|
||||
// collapsible: false,
|
||||
// },
|
||||
// {
|
||||
// type: 'category',
|
||||
// label: '扩展',
|
||||
// items: ['designer/extend/overview', 'designer/extend/remote-service'],
|
||||
// collapsible: false,
|
||||
// },
|
||||
// 'designer/setters',
|
||||
],
|
||||
|
||||
boot: [
|
||||
'boot/intro',
|
||||
'boot/app-spec',
|
||||
'boot/tango-config',
|
||||
'boot/app-json',
|
||||
'boot/config',
|
||||
'boot/app',
|
||||
'boot/service',
|
||||
'boot/store',
|
||||
'boot/page',
|
||||
'boot/global',
|
||||
'boot/helpers',
|
||||
'boot/model',
|
||||
'boot/ref',
|
||||
'boot/i18n',
|
||||
// 'boot/helpers',
|
||||
// 'boot/model',
|
||||
// 'boot/ref',
|
||||
// 'boot/i18n',
|
||||
],
|
||||
|
||||
protocol: ['protocol/material-protocol', 'protocol/material-package-spec'],
|
||||
|
||||
Reference in New Issue
Block a user