From 51c46160d8993fd9f4f1d9cbea2b19701e6bb42c Mon Sep 17 00:00:00 2001 From: Wells Date: Tue, 23 Jan 2024 19:31:53 +0800 Subject: [PATCH 1/6] docs: update --- .../docs/designer/customize/components.mdx | 3 + .../docs/designer/customize/editor.mdx | 3 + .../docs/designer/customize/panels.mdx | 3 + .../docs/designer/customize/selections.mdx | 3 + .../docs/designer/customize/setters.mdx | 3 + .../website/docs/designer/customize/tools.mdx | 3 + .../website/docs/designer/deploy/designer.mdx | 3 + apps/website/docs/designer/deploy/sandbox.mdx | 3 + apps/website/docs/designer/deploy/server.mdx | 5 + .../docs/designer/design/filesystem.mdx | 3 + .../website/docs/designer/design/overview.mdx | 1 + apps/website/docs/designer/design/sandbox.mdx | 1 + .../website/docs/designer/extend/overview.mdx | 58 ------- .../docs/designer/extend/remote-service.mdx | 67 --------- .../website/docs/designer/material-import.mdx | 141 ------------------ .../docs/designer/modules/designer-panel.mdx | 9 -- .../docs/designer/modules/designer.mdx | 56 ------- apps/website/docs/designer/modules/hooks.mdx | 27 ---- .../website/docs/designer/modules/sandbox.mdx | 9 -- .../docs/designer/modules/setting-panel.mdx | 9 -- .../docs/designer/modules/sidebar-panel.mdx | 38 ----- .../docs/designer/modules/view-panel.mdx | 10 -- .../docs/designer/modules/workspace-panel.mdx | 3 - apps/website/docs/designer/setters.mdx | 81 ---------- apps/website/sidebars.js | 47 +++--- apps/website/src/components/Timeline.tsx | 21 +-- 26 files changed, 65 insertions(+), 545 deletions(-) create mode 100644 apps/website/docs/designer/customize/components.mdx create mode 100644 apps/website/docs/designer/customize/editor.mdx create mode 100644 apps/website/docs/designer/customize/panels.mdx create mode 100644 apps/website/docs/designer/customize/selections.mdx create mode 100644 apps/website/docs/designer/customize/setters.mdx create mode 100644 apps/website/docs/designer/customize/tools.mdx create mode 100644 apps/website/docs/designer/deploy/designer.mdx create mode 100644 apps/website/docs/designer/deploy/sandbox.mdx create mode 100644 apps/website/docs/designer/deploy/server.mdx create mode 100644 apps/website/docs/designer/design/filesystem.mdx create mode 100644 apps/website/docs/designer/design/overview.mdx create mode 100644 apps/website/docs/designer/design/sandbox.mdx delete mode 100644 apps/website/docs/designer/extend/overview.mdx delete mode 100644 apps/website/docs/designer/extend/remote-service.mdx delete mode 100644 apps/website/docs/designer/material-import.mdx delete mode 100644 apps/website/docs/designer/modules/designer-panel.mdx delete mode 100644 apps/website/docs/designer/modules/designer.mdx delete mode 100644 apps/website/docs/designer/modules/hooks.mdx delete mode 100644 apps/website/docs/designer/modules/sandbox.mdx delete mode 100644 apps/website/docs/designer/modules/setting-panel.mdx delete mode 100644 apps/website/docs/designer/modules/sidebar-panel.mdx delete mode 100644 apps/website/docs/designer/modules/view-panel.mdx delete mode 100644 apps/website/docs/designer/modules/workspace-panel.mdx delete mode 100644 apps/website/docs/designer/setters.mdx diff --git a/apps/website/docs/designer/customize/components.mdx b/apps/website/docs/designer/customize/components.mdx new file mode 100644 index 00000000..a35abdee --- /dev/null +++ b/apps/website/docs/designer/customize/components.mdx @@ -0,0 +1,3 @@ +# 组件库自定义 + +WIP diff --git a/apps/website/docs/designer/customize/editor.mdx b/apps/website/docs/designer/customize/editor.mdx new file mode 100644 index 00000000..1d97b5dc --- /dev/null +++ b/apps/website/docs/designer/customize/editor.mdx @@ -0,0 +1,3 @@ +# 编辑器自定义 + +WIP diff --git a/apps/website/docs/designer/customize/panels.mdx b/apps/website/docs/designer/customize/panels.mdx new file mode 100644 index 00000000..401b1388 --- /dev/null +++ b/apps/website/docs/designer/customize/panels.mdx @@ -0,0 +1,3 @@ +# 面板自定义 + +WIP diff --git a/apps/website/docs/designer/customize/selections.mdx b/apps/website/docs/designer/customize/selections.mdx new file mode 100644 index 00000000..3da3312b --- /dev/null +++ b/apps/website/docs/designer/customize/selections.mdx @@ -0,0 +1,3 @@ +# 选择器自定义 + +WIP diff --git a/apps/website/docs/designer/customize/setters.mdx b/apps/website/docs/designer/customize/setters.mdx new file mode 100644 index 00000000..9940ff7b --- /dev/null +++ b/apps/website/docs/designer/customize/setters.mdx @@ -0,0 +1,3 @@ +# 设置器自定义 + +WIP diff --git a/apps/website/docs/designer/customize/tools.mdx b/apps/website/docs/designer/customize/tools.mdx new file mode 100644 index 00000000..3bf46856 --- /dev/null +++ b/apps/website/docs/designer/customize/tools.mdx @@ -0,0 +1,3 @@ +# 工具栏自定义 + +WIP \ No newline at end of file diff --git a/apps/website/docs/designer/deploy/designer.mdx b/apps/website/docs/designer/deploy/designer.mdx new file mode 100644 index 00000000..6573e177 --- /dev/null +++ b/apps/website/docs/designer/deploy/designer.mdx @@ -0,0 +1,3 @@ +# 设计器接入 + +WIP diff --git a/apps/website/docs/designer/deploy/sandbox.mdx b/apps/website/docs/designer/deploy/sandbox.mdx new file mode 100644 index 00000000..5f281531 --- /dev/null +++ b/apps/website/docs/designer/deploy/sandbox.mdx @@ -0,0 +1,3 @@ +# 低代码沙箱接入 + +WIP diff --git a/apps/website/docs/designer/deploy/server.mdx b/apps/website/docs/designer/deploy/server.mdx new file mode 100644 index 00000000..df79b821 --- /dev/null +++ b/apps/website/docs/designer/deploy/server.mdx @@ -0,0 +1,5 @@ +# 服务端接入 + +WIP + +介绍一个基本的服务端实现，以及如何接入。 diff --git a/apps/website/docs/designer/design/filesystem.mdx b/apps/website/docs/designer/design/filesystem.mdx new file mode 100644 index 00000000..9613fd85 --- /dev/null +++ b/apps/website/docs/designer/design/filesystem.mdx @@ -0,0 +1,3 @@ +# 文件系统 + +WIP diff --git a/apps/website/docs/designer/design/overview.mdx b/apps/website/docs/designer/design/overview.mdx new file mode 100644 index 00000000..9c741c2c --- /dev/null +++ b/apps/website/docs/designer/design/overview.mdx @@ -0,0 +1 @@ +# 技术架构概览 \ No newline at end of file diff --git a/apps/website/docs/designer/design/sandbox.mdx b/apps/website/docs/designer/design/sandbox.mdx new file mode 100644 index 00000000..50323b7f --- /dev/null +++ b/apps/website/docs/designer/design/sandbox.mdx @@ -0,0 +1 @@ +# 沙箱实现 \ No newline at end of file diff --git a/apps/website/docs/designer/extend/overview.mdx b/apps/website/docs/designer/extend/overview.mdx deleted file mode 100644 index 606c4827..00000000 --- a/apps/website/docs/designer/extend/overview.mdx +++ /dev/null @@ -1,58 +0,0 @@ -# 设计器扩展概览 - -主要介绍如何扩展 tango 设计器。tango 设计器提供了三个部位的自定义扩展能力，分别是标题栏，工具栏，和侧边栏。可以通过下面这张图进行简要的了解： - - - -## 标题栏扩展 - -`DesignerPanel` 提供了 logo, description, actions 三个扩展点，分别对应于 平台标识、应用描述、行动点区域，开发者可以按照需求进行扩展。例如： - -```jsx -} description={} actions={新版沙箱}> - -``` - -## 工具栏扩展 - -工具栏面板支持任意组合和设置渲染的位置，开发者可以通过 `ToolbarPanel.Item` 添加自定义的工具栏选项，例如下面的代码扩展了一个 newPage 按钮，用于支持在设计器中创建新页面的需求。 - -```jsx - - - - - - - - - - - -``` - -## 侧边栏扩展 - -侧边栏面板支持任意组合和调换顺序，用户可以通过 `SidebarPanel.Item` 组件进行自定义扩展，默认情况下根据一些内置的 key 标识，设计器会自动渲染对应的面板，用户也可以根据自己的需求采用自定义渲染子节点的方案进行扩展。 -例如，下面的示例代码中扩展了一个 “自定义面板”。 - -```jsx - - - - - - - }> - 这里是一个自定义的面板，你可以任意添加 - - -``` diff --git a/apps/website/docs/designer/extend/remote-service.mdx b/apps/website/docs/designer/extend/remote-service.mdx deleted file mode 100644 index 0ed3d69e..00000000 --- a/apps/website/docs/designer/extend/remote-service.mdx +++ /dev/null @@ -1,67 +0,0 @@ -# 外部数据源 - -如果您的扩展部件需要使用外部数据源，可以参考本文的做法。 - -## 存在部件共享 - -如果数据源需要在多个扩展部件中共享，我们推荐您借助 tango 的 `remoteServices` 规范进行接口的实现。 - -### 外部数据源定义 - -例如，我们需要调用一组图片素材的接口，此时我们可以定义一个 `ImageService`，如下： - -```tsx -import { createServices } from '@music/request'; - -export const remoteServices = { - ImageService: createServices( - { - listMy: { - url: '/my/upload/list', - }, - listFav: { - url: '/my/star/list', - }, - listPub: { - url: '/list', - }, - }, - { - baseURL: 'https://febase-openapi.fn.netease.com/deer/api/deer/pic', - withCredentials: false, // 解决跨域时必须非*问题 - } - ), -}; -``` - -### 外部数据源引入 - -我们在设计器初始化的时候可以通过 `remoteServices` 属性进行外部数据源的传入。 - -```tsx - -``` - -### 在设计器扩展中使用定义的外部数据源 - -```tsx -import { useRemoteServices } from '@music163/tango-designer'; - -export function CustomWidget() { - const remoteServices = useRemoteServices(); -} -``` - -## 仅在单个组件 - -如果您的外部数据服务没有额外的共享需求，您也可以直接在组件内部进行数据服务的发起。 - -```tsx -import request from '@music/request'; - -export function CustomWidget() { - useEffect(() => { - request('//some.domain/get'); - }, []); -} -``` diff --git a/apps/website/docs/designer/material-import.mdx b/apps/website/docs/designer/material-import.mdx deleted file mode 100644 index eed50913..00000000 --- a/apps/website/docs/designer/material-import.mdx +++ /dev/null @@ -1,141 +0,0 @@ ---- -sidebar_position: 3 ---- - -# 物料接入 - -Tango 提供了低成本的物料接入方式，支持直接复用现有的组件体系。只需要在现有组件包基础上简单的提供配置说明问题，即可轻松接入到 Tango 低代码生态体系中。 - -import Link from '@docusaurus/Link'; - -## 预览视图和设计器视图 - -- 预览视图：是组件默认的渲染模式，通常我们只需要关注此视图行为。 -- 设计器视图：为低代码平台定制的渲染视图，当我们需要自定义组件在 Tango 设计器中的部分渲染行为时，可以通过修改设计器视图的渲染逻辑实现。 - -### 设计器视图和 `withDnd` - -通常情况下我们不需要太关注于设计器视图，只需通过 `withDnd` 简单的进行包装即可。例如： - -```jsx -// 将 antd Button 包装一层提供设计器视图 -export Button = withDnd({ - name: 'Button', // 必须，组件的名字，用来正确设置组件的 displayName - isFunctionComponent: true, // 可选，如果包裹的组件为函数组件，可以在此设置 - overrideProps: {}, // 可选，覆盖掉包裹组件的默认属性值 -})(AntButton); -``` - -默认情况下 withDnd 会在组件外层包裹一层 dnd 容器，以便于组件能够在设计器中被拖拽： - -- draggable 属性表示该区域可以被拖拽 -- data-dnd 用来追踪渲染的 dom 元素 - -```jsx -
- -
-``` - -### 自定义拖拽容器 - -由于默认情况下拖拽容器是一个 `div` 节点，为[块级元素](https://www.w3schools.com/cssref/pr_class_display.asp)。部分情况下，你可能期望它渲染为一个[行内容器](https://www.w3schools.com/cssref/pr_class_display.asp)，此时可以通过如下方式配置： - -```jsx -export Button = withDnd({ - name: 'Button', - display: 'inline-block', // 将 dnd 容器渲染为行内元素 - wrapperStyle: {}, // 传入 dnd 容器的自定义样式 -})(AntButton); -``` - - - -### 禁用拖拽容器 - -某些情况下，你的组件可能会检查子节点的有效性，此时你可能不期望组件被包装额外的容器节点，此时你可以关闭拖拽容器，但你需要保证你的组件能够接收父级元素传入的属性信息并附加到组件的跟节点上，否则将无法正确的设置组件的 dnd 信息。 - -```jsx -export Button = withDnd({ - name: 'Button', - hasWrapper: false, // 禁用拖拽容器 -})(MyButton); - -const MyButton = (props) => { - const { children, ...rest } = props; - // 此时，需要保证你的组件能够正确的将多余的属性透传到组件的根节点上 - return -} -``` - -## 组件包接入 - -组件包一般包含多个组件导出，例如 `@music163/antd` 就是典型的组件包，它面向中后台场景提供统一的物料层解决方案。组件包接入 Tango 体系，无需修改现有的代码实现，只需要在此基础上提供额外的配置文件即可。如下所示： - -``` -- src - - button - - designer.tsx # 设计器视图，可以不提供 - - index.ts # 默认视图出口 - - prototype.ts # 组件可配置描述协议 -- index.ts -- prototypes.ts -- designer.ts -``` - -参考示例：https://g.hz.netease.com/NeteaseMusicUI/music-one/-/tree/master/packages/components/src/action - -### 设计器视图的实现 - -对大部分组件而言，都不需要提供特定的设计器视图，只需要使用 tango 提供的 dnd hoc 进行简单的包裹导出即可。 - -```tsx -import { Button as Base, ButtonProps } from 'antd'; -import { withDnd } from '@music/tango-apps-shared'; - -export const Button = withDnd>({ - name: 'Button', -})(Base); -``` - -### 编写 prototypes 文件 - -可以参考 物料协议 编写该文档 - -### 属性设置器选择 - -参考属性设置器文档进行选择。 - -### 可配置项的验证 - -TangoApps 提供了 SettingFormPlayground 组件用来测试组件的可配置能力，可以直接在组件文档中加入可配置测试示例，例如在 storybook 中进行测试。 - -```jsx -import React from 'react'; -import { SettingFormPlayground } from '@music/tango-apps-setting-form'; -import { Input, prototypes } from '@music163/antd'; - -export default { - title: 'Prototype/Input', -}; - -export function Basic() { - return ( - - - - ); -} -``` - -SettingFormPlayground 组件支持实时预览配置结果，预览效果如下： - - - -## 单个业务组件接入 - -单个组件接入可以参考组件包的接入方案。 - -:::info -考虑到单组件形态的特点，在云音乐业务场景中，TangoStudio 将会与红石物料中心对接，提供业务组件的自动化接入能力，目前该能力正在开发过程中。 -::: diff --git a/apps/website/docs/designer/modules/designer-panel.mdx b/apps/website/docs/designer/modules/designer-panel.mdx deleted file mode 100644 index 3ab49820..00000000 --- a/apps/website/docs/designer/modules/designer-panel.mdx +++ /dev/null @@ -1,9 +0,0 @@ -# DesignerPanel 设计器布局容器 - -设计器的主框架提供了一个基本的低代码设计器的布局容器，你可以很轻松的通过此布局容器来实现自己的设计器布局。 - -## 属性列表 - -import TypesTable from '@site/src/components/TypesTable'; - - diff --git a/apps/website/docs/designer/modules/designer.mdx b/apps/website/docs/designer/modules/designer.mdx deleted file mode 100644 index f51abcbb..00000000 --- a/apps/website/docs/designer/modules/designer.mdx +++ /dev/null @@ -1,56 +0,0 @@ -# Designer 设计器容器 - -设计器根节点，注入全局状态。 - -## 属性列表 - -import TypesTable from '@site/src/components/TypesTable'; - - - -## 设计器初始化 - -```jsx - -``` - -## engine - -设计器引擎实例，用于管理设计器的核心状态。 - -### 基本的初始化方式 - -```js -const engine = createEngine({ - entry: '/src/index.js', - files: sampleFiles, - componentPrototypes: prototypes as any, -}); -``` - -### 自定义 workspace 的初始化方式 - -默认情况下，引擎采用的是源码解析模式，即将源码解析为 ast 树，后续的搭建逻辑转为对 ast 树的操作。如果你想自定义搭建逻辑，可以通过自定义 workspace 的方式来实现。 - -引擎在 2.0 本本中提供了新的 JsonWorkspace 来支持自定义搭建逻辑，JsonWorkspace 采用的是 json 格式的数据结构，你可以通过自定义 json 来实现自定义搭建逻辑。 - -```js -const engine = createEngine({ - workspace: new JsonWorkspace({ - prototypes: prototypes as any, - files: schemaFiles, - }), -}); -``` - -:::tip -按照这种方式，你可以自定义自己的 Workspace 实现。具体可以参考 Workspace 的实现标准。 -::: - -## sandboxQuery - -沙箱的查询实例，用于向沙箱注册 dom 查询能力。 - -## remoteServices - -远程服务实例，用于注册全局共享的数据服务实例。 diff --git a/apps/website/docs/designer/modules/hooks.mdx b/apps/website/docs/designer/modules/hooks.mdx deleted file mode 100644 index de395455..00000000 --- a/apps/website/docs/designer/modules/hooks.mdx +++ /dev/null @@ -1,27 +0,0 @@ -# Hooks 钩子方法 - -设计器提供了一组 Hooks 用于快速获取设计器的各种状态。 - -import TypesTable from '@site/src/components/TypesTable'; - -## useWorkspace - -获取工作区状态。 - -```js -// App 需要放置在 Designer 容器中 -function App() { - const workspace = useWorkspace(); - // do what you want -} -``` - -## useDesigner - -```js -// App 需要放置在 Designer 容器中 -function App() { - const designer = useDesigner(); - // do what you want -} -``` diff --git a/apps/website/docs/designer/modules/sandbox.mdx b/apps/website/docs/designer/modules/sandbox.mdx deleted file mode 100644 index e340a958..00000000 --- a/apps/website/docs/designer/modules/sandbox.mdx +++ /dev/null @@ -1,9 +0,0 @@ -# Sandbox 沙箱 - -设计器的运行时沙箱，用来执行代码，渲染页面。 - -import TypesTable from '@site/src/components/TypesTable'; - -默认沙箱是一个基于 CodeSandbox 的沙箱实例，可以直接在浏览器端执行代码。 - - diff --git a/apps/website/docs/designer/modules/setting-panel.mdx b/apps/website/docs/designer/modules/setting-panel.mdx deleted file mode 100644 index 9d21e69d..00000000 --- a/apps/website/docs/designer/modules/setting-panel.mdx +++ /dev/null @@ -1,9 +0,0 @@ -# SettingPanel 属性设置面板 - -属性设置器用于在配置面板中展示特定配置项的配置逻辑。 - -## 属性列表 - -import TypesTable from '@site/src/components/TypesTable'; - - diff --git a/apps/website/docs/designer/modules/sidebar-panel.mdx b/apps/website/docs/designer/modules/sidebar-panel.mdx deleted file mode 100644 index 1d06e989..00000000 --- a/apps/website/docs/designer/modules/sidebar-panel.mdx +++ /dev/null @@ -1,38 +0,0 @@ -# SidebarPanel 侧边栏面板 - -侧边栏面板提供了一个简单易用的主操作面板，可以将一些高频操作和核心部件放置到侧边栏面板中，方便用户快速操作。 - -## 属性列表 - -import TypesTable from '@site/src/components/TypesTable'; - - - -## 创建浮动面板 - -借助 `isFloat` 和 `width` 属性可以创建浮动自定义宽度面板，脱离框架对侧边栏的宽度限制。 - -```jsx - -``` - -## 徽标提示 - -`showBadge` 属性可以设置工具栏是否显示徽标提示，用于某些面板需要对外展现需要被用户注意的时机。 - -img - -```jsx -} - showBadge={{ count: 2 }}> - info panel - -``` diff --git a/apps/website/docs/designer/modules/view-panel.mdx b/apps/website/docs/designer/modules/view-panel.mdx deleted file mode 100644 index aaad4324..00000000 --- a/apps/website/docs/designer/modules/view-panel.mdx +++ /dev/null @@ -1,10 +0,0 @@ -# ViewPanel 主视图面板 - -设计器的主视图面板，用来放置设计器的主视图，包括：沙箱，编辑器，预览等。主视图可以放置多个，但只有一个会在激活状态。 - -## 属性列表 - -import TypesTable from '@site/src/components/TypesTable'; - - - diff --git a/apps/website/docs/designer/modules/workspace-panel.mdx b/apps/website/docs/designer/modules/workspace-panel.mdx deleted file mode 100644 index 4daf7188..00000000 --- a/apps/website/docs/designer/modules/workspace-panel.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# WorkspacePanel 工作区面板 - -主工作区的布局容器，用于放置工作区的多重视图。 diff --git a/apps/website/docs/designer/setters.mdx b/apps/website/docs/designer/setters.mdx deleted file mode 100644 index f593a990..00000000 --- a/apps/website/docs/designer/setters.mdx +++ /dev/null @@ -1,81 +0,0 @@ -# 属性设置器 - -属性设置器用于在配置面板中展示特定配置项的配置逻辑。Tango 内置了多种标准的属性设置器，对于一些特殊场景，内置的属性设置器可能无法满足你的需要，此时开发者可以扩展自己的属性设置。 - -## 内置属性设置器 - -| 设置器名 | 接收值类型 | 设置器说明 | 可配置项 | -| ----------------- | ------------------------------------ | -------------------------- | ------------------ | -| eventSetter | expression | 动作函数或事件监听器设置器 | | -| actionListSetter | | ActionList 的 value 设置器 | | -| boolSetter | boolean | 布尔值设置器 | | -| choiceSetter | `{ label: string, value: string }[]` | RadioGroup 设置器 | - options 选项列表 | -| pickerSetter | `{ label: string, value: string }[]` | 下拉值设置器 | - options 选项列表 | -| colorSetter | string | 色彩 | | -| dateSetter | string | 日期设置器 | | -| dateRangeSetter | `string[]` | 日期范围设置器 | | -| timeSetter | `string` | 时间设置器 | | -| timeRangeSetter | `string[]` | 时间范围设置器 | | -| expressionSetter | expression | 表达式设置器 | | -| jsonSetter | json expression | JSON 表达式设置器 | | -| jsxSetter | jsx expression | JSX 设置器 | | -| iconSetter | string | Icon 组件设置器 | | -| iconTypeSetter | string | Icon 组件类型设置器 | | -| numberSetter | number | 数字类型设置器 | | -| textSetter | string | 文本设置器 | | -| textAreaSetter | string | 文本域设置器 | | -| modelSetter | string | 变量绑定设置器 | | -| enumSetter | enum | 枚举值设置器 | | -| sliderSetter | number | 滑块设置器 | | -| listSetter | `object[]` | 列表值设置器 | | -| renderPropsSetter | Function | render props 设置器 | | -| imageSetter | string | 云鹿图片设置器 | | - -## 注册自定义属性设置器 - -### 属性设置器的实现标准 - -属性设置器组件是一个标准的受控型表单组件，开发者所开发的组件只需要暴露 `value` 和 `onChange(value)` 两个属性让属性面板的表单容器进行控制即可。 - -例如，我们可以实现一个简单的字符串设置器 StringSetter，其实现如下： - -```jsx -function StringSetter({ value, onChange, ...rest }) { - const handleChange = (e) => { - onChange(e.target.value); - }; - return ; -} -``` - -### 注册属性设置器 - -注册属性设置器非常简单，只需要借助设置器暴露出来的 `registerSetter` 即可。 - -```jsx -import { registerSetter } from '@music163/tango-designer'; - -// 注册自定义 setter -registerSetter({ - name: 'stringSetter', - component: StringSetter, -}); -``` - -### 使用自定义的属性设置器 - -在组件的物料协议中直接声明对应的属性设置器名称即可。例如： - -```jsx -const prototype = { - name: 'PageHeader', - title: 'PageHeader', - props: [ - { - name: 'title', - title: '标题', - setter: 'stringSetter', - }, - ], -}; -``` diff --git a/apps/website/sidebars.js b/apps/website/sidebars.js index 708a778d..b192331f 100644 --- a/apps/website/sidebars.js +++ b/apps/website/sidebars.js @@ -20,28 +20,31 @@ 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/deploy/designer', 'designer/deploy/sandbox', 'designer/deploy/server'], + collapsed: false, + }, + { + type: 'category', + label: '设计器自定义', + items: [ + 'designer/customize/panels', + 'designer/customize/tools', + 'designer/customize/selections', + 'designer/customize/setters', + 'designer/customize/editor', + 'designer/customize/components', + ], + collapsed: false, + }, + { + type: 'category', + label: '设计原理', + items: ['designer/design/overview', 'designer/design/filesystem', 'designer/design/sandbox'], + collapsed: false, + }, ], boot: [ diff --git a/apps/website/src/components/Timeline.tsx b/apps/website/src/components/Timeline.tsx index 5ca06518..f3e2adf3 100644 --- a/apps/website/src/components/Timeline.tsx +++ b/apps/website/src/components/Timeline.tsx @@ -6,37 +6,28 @@ const timelines = [ { icon: null, title: 'Alpha', - date: '2023.08.30', + date: '2024.01.31', description: translate({ id: 'homepage.timeline.alpha', - message: '开源仓库和文档站点上线，发布 alpha 演示版本。', - }), - }, - { - icon: null, - title: 'Beta', - date: '2023.09.30', - description: translate({ - id: 'homepage.timeline.beta', - message: '核心 API 面向社区场景重构和优化，发布 Beta 测试版本。', + message: '核心 API 重构完成，文档内容优化', }), }, { icon: null, title: '1.0 RC', - date: '2023.11.30', + date: '2024.04.30', description: translate({ id: 'homepage.timeline.rc', - message: '核心 API 基本稳定，不再发生 BR，发布 1.0 RC 版本。', + message: '核心 API 基本稳定，能力完善。', }), }, { icon: null, title: '1.0', - date: 'Before 2023.12.29', + date: 'Before 2024.12.31', description: translate({ id: 'homepage.timeline.stable', - message: 'API 完全稳定，提供良好的社区支持，可用于生产环境。', + message: '1.0 正式版常规迭代', }), }, ]; From d0f1b8ff127a1d29386fe5aac3121d5262cdd4d8 Mon Sep 17 00:00:00 2001 From: Wells Date: Thu, 25 Jan 2024 09:35:21 +0800 Subject: [PATCH 2/6] docs: update --- .../website/docs/designer/customize/components.mdx | 4 +++- apps/website/docs/designer/customize/editor.mdx | 4 +++- apps/website/docs/designer/customize/panels.mdx | 4 +++- .../website/docs/designer/customize/selections.mdx | 4 +++- apps/website/docs/designer/customize/setters.mdx | 4 +++- apps/website/docs/designer/customize/tools.mdx | 4 +++- apps/website/docs/designer/deploy/designer.mdx | 4 +++- apps/website/docs/designer/deploy/sandbox.mdx | 4 +++- apps/website/docs/designer/deploy/server.mdx | 6 ++++-- apps/website/docs/designer/design/filesystem.mdx | 4 +++- apps/website/docs/designer/design/overview.mdx | 6 +++++- apps/website/docs/designer/design/sandbox.mdx | 6 +++++- apps/website/docusaurus.config.js | 14 +++++++------- 13 files changed, 48 insertions(+), 20 deletions(-) diff --git a/apps/website/docs/designer/customize/components.mdx b/apps/website/docs/designer/customize/components.mdx index a35abdee..2ef96420 100644 --- a/apps/website/docs/designer/customize/components.mdx +++ b/apps/website/docs/designer/customize/components.mdx @@ -1,3 +1,5 @@ # 组件库自定义 -WIP +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/customize/editor.mdx b/apps/website/docs/designer/customize/editor.mdx index 1d97b5dc..fcfb74cf 100644 --- a/apps/website/docs/designer/customize/editor.mdx +++ b/apps/website/docs/designer/customize/editor.mdx @@ -1,3 +1,5 @@ # 编辑器自定义 -WIP +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/customize/panels.mdx b/apps/website/docs/designer/customize/panels.mdx index 401b1388..9c060b2f 100644 --- a/apps/website/docs/designer/customize/panels.mdx +++ b/apps/website/docs/designer/customize/panels.mdx @@ -1,3 +1,5 @@ # 面板自定义 -WIP +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/customize/selections.mdx b/apps/website/docs/designer/customize/selections.mdx index 3da3312b..88a0e3ea 100644 --- a/apps/website/docs/designer/customize/selections.mdx +++ b/apps/website/docs/designer/customize/selections.mdx @@ -1,3 +1,5 @@ # 选择器自定义 -WIP +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/customize/setters.mdx b/apps/website/docs/designer/customize/setters.mdx index 9940ff7b..56fa4d2d 100644 --- a/apps/website/docs/designer/customize/setters.mdx +++ b/apps/website/docs/designer/customize/setters.mdx @@ -1,3 +1,5 @@ # 设置器自定义 -WIP +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/customize/tools.mdx b/apps/website/docs/designer/customize/tools.mdx index 3bf46856..f8aaa037 100644 --- a/apps/website/docs/designer/customize/tools.mdx +++ b/apps/website/docs/designer/customize/tools.mdx @@ -1,3 +1,5 @@ # 工具栏自定义 -WIP \ No newline at end of file +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/deploy/designer.mdx b/apps/website/docs/designer/deploy/designer.mdx index 6573e177..197b56dd 100644 --- a/apps/website/docs/designer/deploy/designer.mdx +++ b/apps/website/docs/designer/deploy/designer.mdx @@ -1,3 +1,5 @@ # 设计器接入 -WIP +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/deploy/sandbox.mdx b/apps/website/docs/designer/deploy/sandbox.mdx index 5f281531..0cd02fa0 100644 --- a/apps/website/docs/designer/deploy/sandbox.mdx +++ b/apps/website/docs/designer/deploy/sandbox.mdx @@ -1,3 +1,5 @@ # 低代码沙箱接入 -WIP +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/deploy/server.mdx b/apps/website/docs/designer/deploy/server.mdx index df79b821..563c3ccf 100644 --- a/apps/website/docs/designer/deploy/server.mdx +++ b/apps/website/docs/designer/deploy/server.mdx @@ -1,5 +1,7 @@ # 服务端接入 -WIP - 介绍一个基本的服务端实现，以及如何接入。 + +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/design/filesystem.mdx b/apps/website/docs/designer/design/filesystem.mdx index 9613fd85..e82406e8 100644 --- a/apps/website/docs/designer/design/filesystem.mdx +++ b/apps/website/docs/designer/design/filesystem.mdx @@ -1,3 +1,5 @@ # 文件系统 -WIP +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/design/overview.mdx b/apps/website/docs/designer/design/overview.mdx index 9c741c2c..0da87b58 100644 --- a/apps/website/docs/designer/design/overview.mdx +++ b/apps/website/docs/designer/design/overview.mdx @@ -1 +1,5 @@ -# 技术架构概览 \ No newline at end of file +# 技术架构概览 + +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docs/designer/design/sandbox.mdx b/apps/website/docs/designer/design/sandbox.mdx index 50323b7f..5a1d1728 100644 --- a/apps/website/docs/designer/design/sandbox.mdx +++ b/apps/website/docs/designer/design/sandbox.mdx @@ -1 +1,5 @@ -# 沙箱实现 \ No newline at end of file +# 沙箱实现 + +:::tip +正在编写中，敬请期待。 +::: diff --git a/apps/website/docusaurus.config.js b/apps/website/docusaurus.config.js index d443c85b..ff41d140 100644 --- a/apps/website/docusaurus.config.js +++ b/apps/website/docusaurus.config.js @@ -62,13 +62,13 @@ const config = { ({ // Replace with your project's social card image: 'img/social-card.png', - // announcementBar: { - // id: 'notion_alert', - // content: '🏗 当前版本为测试版，请暂时不要用于生产环境，正式版将于2023年Q4发布！', - // backgroundColor: 'var(--ifm-color-primary-contrast-background)', - // textColor: 'var(--ifm-color-primary-contrast-foreground)', - // isCloseable: false, - // }, + announcementBar: { + id: 'notion_alert', + content: '🏗 当前版本为 alpha 版本，相关文档正在编写之中，敬请期待！', + backgroundColor: 'var(--ifm-color-primary-contrast-background)', + textColor: 'var(--ifm-color-primary-contrast-foreground)', + isCloseable: false, + }, navbar: { title: '', logo: { From 30b4876a259d84df7365342a4ed6a3814601ecd2 Mon Sep 17 00:00:00 2001 From: Wells Date: Thu, 25 Jan 2024 09:48:17 +0800 Subject: [PATCH 3/6] docs: update --- .../website/docs/designer/design/overview.mdx | 113 +++++++++++++++++- apps/website/docusaurus.config.js | 4 +- 2 files changed, 112 insertions(+), 5 deletions(-) diff --git a/apps/website/docs/designer/design/overview.mdx b/apps/website/docs/designer/design/overview.mdx index 0da87b58..41425b18 100644 --- a/apps/website/docs/designer/design/overview.mdx +++ b/apps/website/docs/designer/design/overview.mdx @@ -1,5 +1,112 @@ # 技术架构概览 -:::tip -正在编写中，敬请期待。 -::: +我们在 2023年8月底[正式开源了 Tango 低代码引擎](https://juejin.cn/post/7273051203562749971)。Tango 是一个基于源码的低代码设计器框架，支持直接基于项目源码提供低代码可视化开发能力，可以无缝的与既有的本地开发工作流进行集成，从而提供渐进式的低代码开发能力。 + +![Tango 低代码引擎使用演示](https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30108735057/7ba9/dced/9ac3/420f6e04b371dd47de06e7d71142560d.gif) + +按照计划，我们在 2023年9月底[发布了 1.0 alpha 版本](https://github.com/NetEase/tango/releases)，在此版本中我们遵循 **“最小内核”** 的原则对 Tango 的核心实现进行了大幅的重构，剥离了大量冗余的代码实现。 + +为了帮助大家更近一步的了解 Tango 开源版本的核心构成与代码实现，本文将会详细揭秘 Tango 低代码引擎的设计思考与实现过程。 + +- Github 仓库： +- 发行历史： +- 文档站点： + +## 低代码可视化搭建之殇 + +从实现上看，低代码搭建能力的核心是 UI 可视化编程。借助 UI 可视化编程，可以大大的弱化使用者对于代码编程的感知，但在真实的业务需求场景中，我们面临着大量的复杂的应用逻辑，使用者很难借助 UI 操作表达功能逻辑。例如下图中的合同管理，资金结算等页面。如果借助于传统的低代码方案，通常会发现，很容易一条路走到黑，没有回头路。所以，经常会有开发者抱怨，稍微复杂的场景下，低代码的效率甚至不如写代码。 + +![在实际业务场景中面临大量难以低代码开发的前端应用](https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30577891541/dac5/e050/986b/9466633e32518be2685e882618343251.png) + +## 传统低代码方案的问题 + +我们不妨先简单分析一下传统的低代码方案的问题。传统的低代码搭建方案往往采用定义私有 Schema 协议来可视化表达视图逻辑，也就是将代码逻辑转换为私有的描述，大致的原理可以参考下面这张图。 + +![基于 Schema 的低代码可视化搭建方案](https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30577932595/1456/2196/aeee/a10fbe99c3f6d050629b140ecfbbc257.png) + +这类方案很容易面临不断膨胀的私有 JSON 协议。并且，私有协议扩展性和灵活性差，难以达到图灵完备状态。例如在我们的实际开发过程中，传统的低代码方案会面临各种各样的扩展性卡点。此外，开发能力往往受限于内置的组件和模板。且难以复用现有的前端资产，例如组件和代码等等。对于开发者而言，私有协议也导致问题定位难，调试难。 + +借助于私有协议的搭建方案通常适合于轻业务逻辑的简单类表单，营销类的活动页面等等，很难用于复杂的业务逻辑搭建场景，因为私有协议难以有效的应对这类场景的复杂性和灵活性需求。虽然，有些方案提供了协议转代码的能力，但通常只实现了单向转码，可视化开发和代码开发是两条完全割裂的路径。 + +**在此基础上，我们就需要重新思考低代码搭建协议的设计问题。** + +## 从私有搭建协议到公有协议 + +那么，我们能否不使用私有协议，而是采用公有协议？ + +答案是，可以的！[ESTree](https://github.com/estree/estree) 规范作为主流的处理 JavaScript 源代码的标准社区协议，被广泛用于浏览器 JavaScript Parser 的实现。借助于 ESTree 协议，可以完美的实现对源码逻辑的描述，并且社区有大量的工具可以帮助我们完成这个过程。 + +![基于ESTree规范，实现双向互转的低代码搭建能力](https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30578051842/b7b4/f625/9458/3ead74325547a45f501ae99c7270cffa.png) + +因此，我们尝试使用 ESTree 规范来实现低代码搭建过程。借助于 ESTree 规范，我们无需定义私有的渲染描述协议，并且可以低成本的实现代码到协议，协议到代码到互转。借助于双向转码的能力，我们获得全新的低代码开发体验。 + +## Tango 低代码引擎实现原理 + +基于这个思路，我们设计了基于 ESTree 规范的低代码引擎方案 -- Tango。可以通过下面这张图来简单的描述下实现逻辑： + +![Tango 低代码引擎实现分析](https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30578073085/61cd/b2db/e103/9ed9dd334a6679c6ec18a02270efe446.png) + +首先将源代码解析为 AST。用户的拖拉拽等操作则映射为对 AST 的遍历和修改。最后将新的 AST 重新生成代码，交给设计器沙箱去渲染执行。而对 AST 的解析、遍历、修改、生成，则可以借助大量的社区工具，这里我们选择的是 babel！ + +> AST 的全称是抽象语法树，是一种分层的程序表达，根据编程语言的语法呈现源代码的结构。 + +![大量的工具基于 AST 实现](https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30578121562/578f/1bac/9dd3/69b5b4e5c1171babf4db427f41981b4d.png) + +其实，数量众多的前端工具库都是基于 AST 操纵实现的。我们可以发现，在任意的前端项目中的 package.json 里的 devDependencies 里的很多工具包是基于 AST 解析操纵实现的，例如 JS 的转译，代码压缩，ESLint 等等，我们可以阅读这些工具的源码来进一步的学习。 + +![将源码转为 AST 描述的基本过程](https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30578132788/1f4b/d7d7/56b8/feb4220a611afae0629d76758479118a.png) + +如图所示，将源代码转为 AST 描述的基本过程包括词法分析和句法分析两个阶段: + +- 词法分析：借助词法分析器将代码字符串分割为标记列表。 +- 句法分析：借助句法分析器将标记数据转为 AST 描述。 + +最后，我们可以获得源代码的结构化描述树。有很多工具可以帮我们来实现这个过程，例如 babel -- 它可以帮助我们轻松的实现代码到 ast，ast 遍历修改，ast 到代码的过程。 + +## 基于 AST 实现搭建的基本过程 + +我们来看一下使用 ast 实现搭建逻辑的基本过程。 + +看一个具体的例子：通过修改 AST，在 Page 中插入一个 Section 节点。 + +![基于 AST 实现搭建逻辑](https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30579119959/aea0/6e5a/6aba/979804c4270f5ad05b84da2220624afd.png) + +中间这段代码，展示了核心的逻辑，通过遍历整个 AST 中的所有 JSXElement 节点，找到第一个 Page 元素，然后在 Page 元素的 children 里插入新的 Section 节点。这只是一段演示代码，具体的过程比这个要复杂的多，因为有很多的边际逻辑要处理。最后，我们可以将 ast 重新生成为代码，得到我们想要的结果。 + +## Tango 的数据变更流程设计 + +了解了基本的实现原理后，我们来看一下低代码引擎的数据变更流程设计。 + +![数据变更流程设计](https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30579135078/e381/579c/61ed/91e110abd1d17c742e8aa7d407d0327b.png) + +首先是引擎初始化。源码文件会被引擎内核解析进行状态初始化。接下来，对于用户的操作，会触发浏览器事件，引擎接收到相应的事件，触发内核中的状态变更，更新 AST。 + +然后，内核会基于新的 AST 的同步生成代码，由引擎将代码同步给渲染沙箱。渲染沙箱感知到代码变化后，会触发页面重新渲染，也就是沙箱的 HMR 过程。 + +## 基于源码的在线渲染沙箱设计 + +接下来，我们需要考虑的是如何在浏览器中执行 JavaScript 源码工程？有很多方案可以选择，我们选择的方案是 [sandpack](https://sandpack.codesandbox.io/)，它是由 CodeSandbox 开源的可以在浏览器中实时运行 JavaScript 项目的的工具库。在具体实现上，[我们对 sandpack 进行了一系列的改造](https://juejin.cn/post/7102243774985666596)，以满足低代码生产环境的需要。 + +基于 sandpack 的在线渲染沙箱方案如下图图所示。 + +![Tango 沙箱设计](https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30579143007/ab5d/3611/950e/5ae276b6131a4a479d6fb10e50ebbfcb.png) + +在实现上，主要包括 3 个部分，分别是：​ + +- 低代码沙箱：它是一个开箱即用的前端组件，只需要传入源代码和构建配置信息即可完成前端项目的构建和执行。 +- 在线 Bundler：是低代码沙箱的核心，用来在浏览器上构建和执行源代码，本质上是一个在浏览器端运行的简化版 webpack。 +- 打包服务：是一个 node 服务，用来对 npm 包执行预构建和资源合并。 + +从沙箱执行流程来看，首先 Sandbox 组件将项目的源代码和 compile 指令使用 postMessage 传递给在线 Bundler，在线 Bundler 在接收到 compile 指令后，bundler 会从 packager 打包服务加载项目的 npm 依赖，然后编译和执行代码，最后发送 success 消息给低代码沙箱。 + +## Tango 低代码引擎的构成 + +结合上面的介绍，在构成上，Tango 低代码引擎主要包括 3 个核心组成部分，分别是： + +- 引擎内核：扶额建立文件，节点模型，提供输入输出能力。 +- 拖拽引擎和可视化面板：提供可视化开发能力 +- 渲染沙箱：提供源码在浏览器上的编译执行能力。 + +![引擎构成](https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/30579167082/1404/27e2/b8e5/0c719ca82494a282080d73adeff7196e.png) + +借助于 Tango 低代码引擎，我们可以为开发者提供全新的在线开发体验，支持源码级的自定义能力。对可视化开发而言，可视化配置会触发 AST 的修改，进而会重新生成对应的源码。而对源码开发而言，修改源码后会同步更新 AST。 diff --git a/apps/website/docusaurus.config.js b/apps/website/docusaurus.config.js index ff41d140..4a528e55 100644 --- a/apps/website/docusaurus.config.js +++ b/apps/website/docusaurus.config.js @@ -127,8 +127,8 @@ const config = { title: '社区', items: [ { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/netease-tango', + label: 'Discussions', + href: 'https://github.com/NetEase/tango/discussions', }, { label: 'Discord', From 758ca010f717f44baa8edc580591bdc9de3dff8f Mon Sep 17 00:00:00 2001 From: Wells Date: Thu, 25 Jan 2024 09:52:47 +0800 Subject: [PATCH 4/6] docs: add setters --- .../docs/designer/customize/setters.mdx | 79 ++++++++++++++++++- 1 file changed, 76 insertions(+), 3 deletions(-) diff --git a/apps/website/docs/designer/customize/setters.mdx b/apps/website/docs/designer/customize/setters.mdx index 56fa4d2d..534a64ba 100644 --- a/apps/website/docs/designer/customize/setters.mdx +++ b/apps/website/docs/designer/customize/setters.mdx @@ -1,5 +1,78 @@ # 设置器自定义 -:::tip -正在编写中，敬请期待。 -::: +属性设置器用于在配置面板中展示特定配置项的配置逻辑。Tango 内置了多种标准的属性设置器，对于一些特殊场景，内置的属性设置器可能无法满足你的需要，此时开发者可以扩展自己的属性设置。 + +## 内置属性设置器 + +| 设置器名 | 接收值类型 | 设置器说明 | 可配置项 | +| ----------------- | ------------------------------------ | -------------------------- | ------------------ | +| eventSetter | expression | 动作函数或事件监听器设置器 | | +| actionListSetter | | ActionList 的 value 设置器 | | +| boolSetter | boolean | 布尔值设置器 | | +| choiceSetter | `{ label: string, value: string }[]` | RadioGroup 设置器 | - options 选项列表 | +| pickerSetter | `{ label: string, value: string }[]` | 下拉值设置器 | - options 选项列表 | +| colorSetter | string | 色彩 | | +| dateSetter | string | 日期设置器 | | +| dateRangeSetter | `string[]` | 日期范围设置器 | | +| timeSetter | `string` | 时间设置器 | | +| timeRangeSetter | `string[]` | 时间范围设置器 | | +| expressionSetter | expression | 表达式设置器 | | +| jsonSetter | json expression | JSON 表达式设置器 | | +| jsxSetter | jsx expression | JSX 设置器 | | +| numberSetter | number | 数字类型设置器 | | +| textSetter | string | 文本设置器 | | +| textAreaSetter | string | 文本域设置器 | | +| modelSetter | string | 变量绑定设置器 | | +| enumSetter | enum | 枚举值设置器 | | +| sliderSetter | number | 滑块设置器 | | +| listSetter | `object[]` | 列表值设置器 | | +| renderPropsSetter | Function | render props 设置器 | | + +## 注册自定义属性设置器 + +### 属性设置器的实现标准 + +属性设置器组件是一个标准的受控型表单组件，开发者所开发的组件只需要暴露 `value` 和 `onChange(value)` 两个属性让属性面板的表单容器进行控制即可。 + +例如，我们可以实现一个简单的字符串设置器 StringSetter，其实现如下： + +```jsx +function StringSetter({ value, onChange, ...rest }) { + const handleChange = (e) => { + onChange(e.target.value); + }; + return ; +} +``` + +### 注册属性设置器 + +注册属性设置器非常简单，只需要借助设置器暴露出来的 `registerSetter` 即可。 + +```jsx +import { registerSetter } from '@music163/tango-designer'; + +// 注册自定义 setter +registerSetter({ + name: 'stringSetter', + component: StringSetter, +}); +``` + +### 使用自定义的属性设置器 + +在组件的物料协议中直接声明对应的属性设置器名称即可。例如： + +```jsx +const prototype = { + name: 'PageHeader', + title: 'PageHeader', + props: [ + { + name: 'title', + title: '标题', + setter: 'stringSetter', + }, + ], +}; +``` From 06399b6895c43d1be3f92785aa8ac28e35c4fcf2 Mon Sep 17 00:00:00 2001 From: Wells Date: Fri, 26 Jan 2024 11:46:31 +0800 Subject: [PATCH 5/6] fix: update icons --- apps/storybook/src/setting-form.stories.tsx | 13 ++++++++++++- apps/storybook/src/ui/var-tree.stories.tsx | 2 +- packages/designer/src/setters/choice-setter.tsx | 9 +-------- packages/designer/src/setters/style-setter.tsx | 15 ++++++++------- packages/ui/src/icons/index.ts | 2 ++ packages/ui/src/icons/line-dashed-outlined.tsx | 17 +++++++++++++++++ packages/ui/src/icons/line-solid-outlined.tsx | 17 +++++++++++++++++ 7 files changed, 58 insertions(+), 17 deletions(-) create mode 100644 packages/ui/src/icons/line-dashed-outlined.tsx create mode 100644 packages/ui/src/icons/line-solid-outlined.tsx diff --git a/apps/storybook/src/setting-form.stories.tsx b/apps/storybook/src/setting-form.stories.tsx index cbebfa46..385cf38c 100644 --- a/apps/storybook/src/setting-form.stories.tsx +++ b/apps/storybook/src/setting-form.stories.tsx @@ -1,12 +1,18 @@ import React from 'react'; -import { FormModel, SettingForm } from '@music163/tango-setting-form'; +import { FormModel, SettingForm, register } from '@music163/tango-setting-form'; import { ComponentPrototypeType } from '@music163/tango-helpers'; +import { BorderSetter } from '@music163/tango-designer/src/setters/style-setter'; import { Box } from 'coral-system'; import { JsonView } from '@music163/tango-ui'; import { toJS } from 'mobx'; import { observer } from 'mobx-react-lite'; import { Card } from 'antd'; +register({ + name: 'borderSetter', + component: BorderSetter, +}); + export default { title: 'SettingForm', }; @@ -26,6 +32,11 @@ const prototype: ComponentPrototypeType = { title: 'textSetter', setter: 'textSetter', }, + { + name: 'border', + title: 'borderSetter', + setter: 'borderSetter', + }, { name: 'router', title: 'routerSetter', diff --git a/apps/storybook/src/ui/var-tree.stories.tsx b/apps/storybook/src/ui/var-tree.stories.tsx index 457ff95d..3f76f661 100644 --- a/apps/storybook/src/ui/var-tree.stories.tsx +++ b/apps/storybook/src/ui/var-tree.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { VariableTree } from '@music163/tango-designer/lib/cjs/components'; +import { VariableTree } from '@music163/tango-designer/src/components'; import { Box } from 'coral-system'; export default { diff --git a/packages/designer/src/setters/choice-setter.tsx b/packages/designer/src/setters/choice-setter.tsx index 7deb82ff..eb7a2c20 100644 --- a/packages/designer/src/setters/choice-setter.tsx +++ b/packages/designer/src/setters/choice-setter.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { Radio, RadioProps, Tooltip } from 'antd'; -import { IconFont } from '@music163/tango-ui'; import type { OptionType } from '@music163/tango-helpers'; import { FormItemComponentProps } from '@music163/tango-setting-form'; @@ -11,15 +10,9 @@ interface ChoiceSetterProps { export function ChoiceSetter({ options, - mode = 'text', onChange, ...props }: FormItemComponentProps & ChoiceSetterProps) { - const renderLabel = - mode === 'text' - ? (item: OptionType) => item.label - : (item: OptionType) => ; - return ( {options.map((item) => ( - {renderLabel(item)} + {item.label} ))} diff --git a/packages/designer/src/setters/style-setter.tsx b/packages/designer/src/setters/style-setter.tsx index 42e43466..d4b1937d 100644 --- a/packages/designer/src/setters/style-setter.tsx +++ b/packages/designer/src/setters/style-setter.tsx @@ -3,8 +3,8 @@ import { Box, Grid, HTMLCoralProps } from 'coral-system'; import { InputNumber, Dropdown, Input, Radio, Popover, Button } from 'antd'; import { SketchPicker } from 'react-color'; import Color from 'color'; -import { BgColorsOutlined, FileImageOutlined } from '@ant-design/icons'; -import { SingleMonacoEditor, IconFont } from '@music163/tango-ui'; +import { BgColorsOutlined, EyeInvisibleOutlined, FileImageOutlined } from '@ant-design/icons'; +import { SingleMonacoEditor, LineSolidOutlined, LineDashedOutlined } from '@music163/tango-ui'; import { FormItemComponentProps } from '@music163/tango-setting-form'; import { ChoiceSetter } from './choice-setter'; import { TextSetter } from './text-setter'; @@ -34,7 +34,7 @@ export function CssCodeSetter({ value, onChange }: FormItemComponentProps { if (newCode != contentValue) { - onChange('{css`' + newCode + '`}', { + onChange(`{css\`${newCode}\`}`, { // relatedImports: [''] }); } @@ -258,7 +258,7 @@ export function SpacingSetter({ value, onChange }: FormItemComponentProps { tempRef.current[index] = `${val}`; const str2px = tempRef.current.map((it) => { - return it + 'px'; + return `${it}px`; }); onChange(str2px.join(' ')); }; @@ -388,15 +388,16 @@ export function BorderSetter({ value, onChange }: FormItemComponentProps setStyle(e.target.value); handleChange('style', e.target.value); }} + buttonStyle="solid" > - + - + - + diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts index 8836e51e..a7afb06a 100644 --- a/packages/ui/src/icons/index.ts +++ b/packages/ui/src/icons/index.ts @@ -1,5 +1,7 @@ export * from './create-icon'; export * from './code-outlined'; +export * from './line-dashed-outlined'; +export * from './line-solid-outlined'; export * from './open-panel-filled-left-outlined'; export * from './open-panel-filled-right-outlined'; export * from './open-panel-left-outlined'; diff --git a/packages/ui/src/icons/line-dashed-outlined.tsx b/packages/ui/src/icons/line-dashed-outlined.tsx new file mode 100644 index 00000000..460d6d5b --- /dev/null +++ b/packages/ui/src/icons/line-dashed-outlined.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { createIcon } from './create-icon'; + +const LineDashedOutlinedSvg = () => ( + + + +); + +export const LineDashedOutlined = createIcon(LineDashedOutlinedSvg, 'LineSolidOutlined'); diff --git a/packages/ui/src/icons/line-solid-outlined.tsx b/packages/ui/src/icons/line-solid-outlined.tsx new file mode 100644 index 00000000..4cc45301 --- /dev/null +++ b/packages/ui/src/icons/line-solid-outlined.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { createIcon } from './create-icon'; + +const LineSolidOutlinedSvg = () => ( + + + +); + +export const LineSolidOutlined = createIcon(LineSolidOutlinedSvg, 'LineSolidOutlined'); From 2d654868820dc4fc96bc8378314778aafc9a14ad Mon Sep 17 00:00:00 2001 From: Wells Date: Fri, 26 Jan 2024 16:40:22 +0800 Subject: [PATCH 6/6] fix: remove load iconfont in designer --- apps/playground/src/helpers/index.tsx | 4 ++-- apps/playground/src/pages/index.tsx | 9 ++++++++- packages/designer/src/designer.tsx | 22 ++-------------------- 3 files changed, 12 insertions(+), 23 deletions(-) diff --git a/apps/playground/src/helpers/index.tsx b/apps/playground/src/helpers/index.tsx index 160b9c7e..2994fa76 100644 --- a/apps/playground/src/helpers/index.tsx +++ b/apps/playground/src/helpers/index.tsx @@ -3,12 +3,12 @@ import { Box, Group } from 'coral-system'; import { Avatar, Space, Switch } from 'antd'; import { BranchesOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import { registerSetter } from '@music163/tango-designer'; -import type { ComponentPrototypeType } from '@music163/tango-helpers'; +import type { ComponentPrototypeType, IVariableTreeNode } from '@music163/tango-helpers'; import { FooSetter } from '../components'; export * from './mock-files'; -export const bootHelperVariables = [ +export const bootHelperVariables: IVariableTreeNode[] = [ { key: '$helpers', title: '工具函数', diff --git a/apps/playground/src/pages/index.tsx b/apps/playground/src/pages/index.tsx index 470cdc8b..29dc3632 100644 --- a/apps/playground/src/pages/index.tsx +++ b/apps/playground/src/pages/index.tsx @@ -22,6 +22,7 @@ import { BuildOutlined, ClusterOutlined, FunctionOutlined, + createFromIconfontCN, } from '@ant-design/icons'; // 1. 实例化工作区 @@ -38,12 +39,18 @@ const engine = createEngine({ // @ts-ignore window.__workspace__ = workspace; +// 3. 沙箱初始化 const sandboxQuery = new DndQuery({ context: 'iframe', }); +// 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标） +createFromIconfontCN({ + scriptUrl: '//at.alicdn.com/t/c/font_2891794_lzc7rtwuzf.js', +}); + /** - * 3. 平台初始化，访问 https://local.netease.com:6006/ + * 5. 平台初始化，访问 https://local.netease.com:6006/ */ export default function App() { const [menuLoading, setMenuLoading] = useState(true); diff --git a/packages/designer/src/designer.tsx b/packages/designer/src/designer.tsx index 83c74169..3f6a46ce 100644 --- a/packages/designer/src/designer.tsx +++ b/packages/designer/src/designer.tsx @@ -1,8 +1,7 @@ -import React, { useEffect, useMemo } from 'react'; +import React, { useMemo } from 'react'; import { SystemProvider, extendTheme } from 'coral-system'; import { ConfigProvider } from 'antd'; import { TangoEngineProvider, ITangoEngineContext } from '@music163/tango-context'; -import { createFromIconfontCN } from '@ant-design/icons'; import zhCN from 'antd/lib/locale/zh_CN'; import { DesignerProvider, IDesignerContext } from './context'; import defaultTheme from './themes/default'; @@ -12,10 +11,6 @@ export interface DesignerProps extends IDesignerContext, ITangoEngineContext { * 主题包 */ theme?: any; - /** - * 自定义图表库svg脚本地址 - */ - iconfontScriptUrl?: string; children?: React.ReactNode; } @@ -25,21 +20,8 @@ export interface DesignerProps extends IDesignerContext, ITangoEngineContext { * @returns */ export function Designer(props: DesignerProps) { - const { - engine, - config, - theme: themeProp, - sandboxQuery, - remoteServices = {}, - iconfontScriptUrl = '//at.alicdn.com/t/c/font_2891794_lzc7rtwuzf.js', - children, - } = props; + const { engine, config, theme: themeProp, sandboxQuery, remoteServices = {}, children } = props; const theme = useMemo(() => extendTheme(themeProp, defaultTheme), [themeProp]); - useEffect(() => { - createFromIconfontCN({ - scriptUrl: iconfontScriptUrl, - }); - }, [iconfontScriptUrl]); return (