diff --git a/.umirc.ts b/.umirc.ts index 2f49ac228..9952be5a3 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -127,7 +127,7 @@ export default defineConfig({ path: '/manual' }, { - title: '开发教程', + title: '插件开发', path: '/development' }, { diff --git a/docs/menus.ts b/docs/menus.ts index 9e2c13970..c4fba9ac1 100644 --- a/docs/menus.ts +++ b/docs/menus.ts @@ -64,11 +64,14 @@ export default { // '/development/guide/ui-schema-designer/insert-adjacent', '/development/guide/ui-schema-designer/designable', '/development/guide/ui-schema-designer/component-library', - '/development/guide/ui-schema-designer/collection-manager', - '/development/guide/ui-schema-designer/acl', + // '/development/guide/ui-schema-designer/collection-manager', + // '/development/guide/ui-schema-designer/acl', + '/development/guide/ui-schema-designer/x-designer', + '/development/guide/ui-schema-designer/x-initializer', ], }, '/development/guide/ui-router', + '/development/guide/settings-center', ], }, { @@ -77,10 +80,13 @@ export default { children: ['/development/http-api/index', '/development/http-api/rest-api'], }, { - title: 'Test & Build', - 'title.zh-CN': '测试与构建', + title: 'Testing', + 'title.zh-CN': '单元测试', type: 'group', - children: ['/development/pre-release/test', '/development/pre-release/build'], + children: [ + '/development/pre-release/test', + // '/development/pre-release/build', + ], }, ], // { diff --git a/docs/zh-CN/development/guide/index.md b/docs/zh-CN/development/guide/index.md index f8ef6f114..fa1ec74e4 100644 --- a/docs/zh-CN/development/guide/index.md +++ b/docs/zh-CN/development/guide/index.md @@ -1,76 +1,71 @@ -# 扩展点索引 +# 概述 -## 内核模块 +## Web Server - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
扩展点相关介绍相关 API
扩展数据库字段类型数据表与字段db.registerFieldType()
扩展已有数据库表的字段db.extendcollection()
扩展查询比较运算符db.registerOperators()
自定义数据仓库操作db.registerRepositories()
扩展针对全局资源的操作资源与操作resourcer.registerActions()
扩展针对全局资源的中间件resourcer.use()
自定义资源及操作resourcer.define()
自定义路由与页面界面路由RouteSwitch
扩展自定义组件扩展 Schema 组件SchemaComponent -
扩展自定义区块类型Schema 设计能力SchemaInitializer
多语言扩展国际化app.i18n
扩展子命令命令行工具app.i18n
+- Collection & Field +- Resource & Action +- Middleware +- Events & Hooks -## 内置插件 +**Samples** -TODO +- samples/shop-modeling +- samples/shop-actions +- samples/ratelimit +- samples/model-hooks + +## UI Schema Designer + +平台最核心的功能，用于可视化配置页面。 + +- 扩展各种供 UI 设计器使用的 Schema 组件 +- 各种 x-designer 和 x-initializer + +**Samples** + +- samples/custom-block +- samples/custom-action +- samples/custom-field +- samples/custom-x-designer +- samples/custom-x-initializer + +## UI Router + +用于自定义页面，包括： + +- routes config +- route components + +**Samples** + +- samples/custom-page + +## Settings Center + +由插件提供的系统级配置的能力 + +- plugin settings tabs + +**Samples** + +- samples/custom-settings-center-page + +## I18n + +国际化 + +- I18n + +**Samples** + +- samples/shop-i18n + +## Devtools + +- Commands +- Migrations + +**Samples** + +- samples/custom-command +- samples/custom-migration diff --git a/docs/zh-CN/development/guide/pm-built-in.jpg b/docs/zh-CN/development/guide/pm-built-in.jpg new file mode 100644 index 000000000..2fe60fdac Binary files /dev/null and b/docs/zh-CN/development/guide/pm-built-in.jpg differ diff --git a/docs/zh-CN/development/guide/settings-center.md b/docs/zh-CN/development/guide/settings-center.md new file mode 100644 index 000000000..94b1d0431 --- /dev/null +++ b/docs/zh-CN/development/guide/settings-center.md @@ -0,0 +1,33 @@ +# Settings Center + + + +## 示例 + +```tsx | pure +import { SettingsCenterProvider } from '@nocobase/client'; +import React, { useContext } from 'react'; + +const HelloTab => () =>
Hello Tab
; + +export default React.memo((props) => { + return ( + {props.children} + ); +}); +``` + +完整示例查看 [samples/hello](https://github.com/nocobase/nocobase/tree/develop/packages/samples/hello)。 \ No newline at end of file diff --git a/docs/zh-CN/development/guide/settings-tab.jpg b/docs/zh-CN/development/guide/settings-tab.jpg new file mode 100644 index 000000000..34a8da116 Binary files /dev/null and b/docs/zh-CN/development/guide/settings-tab.jpg differ diff --git a/docs/zh-CN/development/guide/ui-schema-designer/x-designer.md b/docs/zh-CN/development/guide/ui-schema-designer/x-designer.md new file mode 100644 index 000000000..276fe609c --- /dev/null +++ b/docs/zh-CN/development/guide/ui-schema-designer/x-designer.md @@ -0,0 +1,61 @@ +# x-designer 组件 + +## 内置 x-designer 组件 + +- Action.Designer +- Calendar.Designer +- Filter.Action.Designer +- Form.Designer +- FormItem.Designer +- FormV2.Designer +- FormV2.ReadPrettyDesigner +- DetailsDesigner +- G2Plot.Designer +- Kanban.Designer +- Kanban.Card.Designer +- Markdown.Void.Designer +- Menu.Designer +- TableV2.Column.Designer +- TableV2.ActionColumnDesigner +- TableBlockDesigner +- TableSelectorDesigner +- Tabs.Designer + +## 替换 + +```tsx | pure +import React, { useContext } from 'react'; +import { useFieldSchema } from '@formily/react'; +import { + SchemaComponentOptions, + GeneralSchemaDesigner, + SchemaSettings, + useCollection +} from '@nocobase/client'; +import React from 'react'; + +const CustomActionDesigner = () => { + const { name, title } = useCollection(); + const fieldSchema = useFieldSchema(); + return ( + + + + ); +}; + +export default React.memo((props) => { + return ( + {props.children} + ); +}); +``` diff --git a/docs/zh-CN/development/guide/ui-schema-designer/x-initializer.md b/docs/zh-CN/development/guide/ui-schema-designer/x-initializer.md new file mode 100644 index 000000000..7932e6062 --- /dev/null +++ b/docs/zh-CN/development/guide/ui-schema-designer/x-initializer.md @@ -0,0 +1,39 @@ +# x-initializer 组件 + +## 内置 x-initializer 组件 + +- BlockInitializers +- CalendarActionInitializers +- CreateFormBlockInitializers +- CustomFormItemInitializers +- DetailsActionInitializers +- FormActionInitializers +- FormItemInitializers +- KanbanActionInitializers +- ReadPrettyFormActionInitializers +- ReadPrettyFormItemInitializers +- RecordBlockInitializers +- RecordFormBlockInitializers +- SubTableActionInitializers +- TableActionColumnInitializers +- TableActionInitializers +- TableColumnInitializers +- TableSelectorInitializers +- TabPaneInitializers + +## 替换 + +```tsx |pure +import React, { useContext } from 'react'; +import { SchemaInitializerContext } from '@nocobase/client'; + +export default React.memo((props) => { + const items = useContext(SchemaInitializerContext); + const BlockInitializers = {}; + return ( + + {props.children} + + ); +}); +``` diff --git a/docs/zh-CN/development/index.md b/docs/zh-CN/development/index.md index 2faf5286d..36b16c597 100644 --- a/docs/zh-CN/development/index.md +++ b/docs/zh-CN/development/index.md @@ -1,33 +1,34 @@ -# 概述 +# 介绍 -## 基本概念 +NocoBase 采用微内核架构，各类功能以插件形式扩展，所以微内核架构也叫插件化架构，由内核和插件两部分组成。内核提供了最小功能的 WEB 服务器，还提供了各种插件化接口；插件是按功能划分的各种独立模块，通过接口适配，具有可插拔的特点。插件化的设计降低了模块之间的耦合度，提高了复用率。随着插件库的不断扩充，常见的场景只需要组合插件即可完成基础搭建。例如 NocoBase 的无代码平台，就是由各种插件组合起来。 -## 特性 + -NocoBase 的核心是一个基于微内核、插件化设计的开发框架。在此基础上天然的支持任意的扩展开发。 +## 插件管理器 + +NocoBase 提供了强大的插件管理器用于管理插件，开发可以通过 CLI 的方式管理插件，也可以通过界面激活、禁用已添加的插件。如： + +```bash +# 创建插件 +yarn pm create hello +# 注册插件 +yarn pm add hello +# 激活插件 +yarn pm enable hello +# 禁用插件 +yarn pm disable hello +# 删除插件 +yarn pm remove hello +``` + +更多插件示例，查看 [packages/samples](https://github.com/nocobase/nocobase/tree/main/packages/samples)。 ## 扩展能力 -基于 NocoBase 的微内核设计，在很多模块都考虑相应的可扩展性，并向外部暴露了一些扩展点，几乎覆盖全部的应用生命周期，在具体业务中可以根据需求基于众多扩展点进行相应的扩展。详情参考 [扩展索引](/development/guide)。 +无论是通用性的功能，还是个性化定制，都建议以插件的形式编写，NocoBase 的扩展性体现在方方面面： -## 插件生命周期 +- 可以是用户直观可见的界面相关的页面模块、区块类型、操作类型、字段类型等 +- 也可以是用于增强或限制 HTTP API 的过滤器、校验器、访问限制等 +- 也可以是更底层的数据表、迁移、事件、命令行等功能的增强 -### 下载 - -### 注册 - -### 安装 - -### 启用 - -### 加载 - -### 停用 - -### 卸载 - -## 学习路线 - -1. 编写第一个插件 -2. 数据表建模 -3. +不仅如此，更多扩展介绍请查看[扩展点索引]()章节。 \ No newline at end of file diff --git a/docs/zh-CN/development/learning-guide.md b/docs/zh-CN/development/learning-guide.md new file mode 100644 index 000000000..6fba8c5e1 --- /dev/null +++ b/docs/zh-CN/development/learning-guide.md @@ -0,0 +1,30 @@ +# 学习路线指南 + +## 1. 从安装 NocoBase 开始 + +NocoBase 支持三种安装方式： + +- Docker 安装（推荐） +- create-nocobase-app 安装 +- Git 源码安装 + +## 2. 了解 NocoBase CLI + +NocoBase CLI 旨在帮助你开发、构建和部署 NocoBase 应用。 + +最常用的命令包括： + +- `yarn nocobase install` +- `yarn nocobase upgrade` +- `yarn dev` +- `yarn test` +- `yarn start` +- `yarn build` +- `yarn pm ` + +## 3. 了解插件管理器 + +```bash +yarn pm +``` +