Skip to content

Commit

Permalink
feat: update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
chenos committed Dec 19, 2023
1 parent 106c3c4 commit 44ad3d3
Show file tree
Hide file tree
Showing 308 changed files with 1,981 additions and 505 deletions.
481 changes: 241 additions & 240 deletions docs/config.ts

Large diffs are not rendered by default.

42 changes: 21 additions & 21 deletions docs/en-US/manual/blocks-guide/charts.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# Charts
# 图表

Currently, chart blocks in NocoBase need to be implemented via a configuration file or by writing code. The chart library uses [g2plot](https://g2plot.antv.vision/en/examples), which theoretically supports all charts on [https://g2plot.antv.vision/en/examples](https://g2plot.antv.vision/en/examples). The currently configurable charts include
目前,NocoBase 图表区块需要通过配置文件或编写代码来实现。图表库使用的是 [g2plot](https://g2plot.antv.vision/en/examples),理论上支持 https://g2plot.antv.vision/en/examples 上的所有图表。目前可以配置的图表包括:

- Column charts
- Bar charts
- Line charts
- Pie charts
- Area charts
- 柱状图
- 条形图
- 折线图
- 饼图
- 面积图

## Add and edit charts
## 添加和编辑图表

![chart-edit.gif](./charts/chart-edit.gif)

## Chart Configuration
## 图表配置

The initial chart configuration is static JSON data
初始化的图表配置是静态的 JSON 数据

```json
{
Expand Down Expand Up @@ -78,9 +78,9 @@ The initial chart configuration is static JSON data
}
```

Data supports expression, NocoBase has a built-in `requestChartData(config)` function for custom chart data requests. Parameters are described in: [https://github.com/axios/axios#request-config](https://github.com/axios/axios#request-config)
data 支持表达式的写法,NocoBase 内置了 `requestChartData(config)` 函数,用于自定义图表数据的请求。Config 参数说明见: [https://github.com/axios/axios#request-config](https://github.com/axios/axios#request-config)

Example.
示例:

```json
{
Expand Down Expand Up @@ -111,7 +111,7 @@ Example.
}
```

HTTP API example.
HTTP API 示例:

```bash
GET /api/collectionName:getColumnChartData
Expand Down Expand Up @@ -156,9 +156,9 @@ Response Body

```

## Server-side implementation
## Server 端实现

Add a custom getColumnChartData method to the data table named collectionName.
为名为 collectionName 的数据表,添加自定义的 getColumnChartData 方法:

```js
app.resourcer.registerActionHandlers({
Expand All @@ -171,29 +171,29 @@ app.resourcer.registerActionHandlers({

```

## Video
## 视频

### Static data
### 静态数据

<video width="100%" height="440" controls>
<source src="https://user-images.githubusercontent.com/1267426/198877269-1c56562b-167a-4808-ada3-578f0872bce1.mp4" type="video/mp4">
</video>

### Dynamic data
### 动态数据

<video width="100%" height="440" controls>
<source src="https://user-images.githubusercontent.com/1267426/198877336-6bd85f0b-17c5-40a5-9442-8045717cc7b0.mp4" type="video/mp4">
</video>

### More charts
### 更多图表

Theoretically supports all charts on [https://g2plot.antv.vision/en/examples](https://g2plot.antv.vision/en/examples)
理论上支持 https://g2plot.antv.vision/en/examples 上的所有图表

<video width="100%" height="440" controls>
<source src="https://user-images.githubusercontent.com/1267426/198877347-7fc2544c-b938-4e34-8a83-721b3f62525e.mp4" type="video/mp4">
</video>

## JS Expressions
## JS 表达式

Syntax

Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
20 changes: 10 additions & 10 deletions docs/en-US/manual/core-concepts/a-b-c.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
# A·B·C

At the no-code level, the core concept of NocoBase can be summarized as `A·B·C`.
在无代码层面,NocoBase 的核心概念可以总结为 `A·B·C`

`A·B·C` stands for `Action·Block·Collection`. We design data structure by `Collection`, organize and display data by `Block`, and interact with data by `Action`.
`A·B·C` `Action·Block·Collection` 的缩写,即`操作·区块·数据表`。通过 `Collection` 设计数据结构,通过 `Block` 组织与展示数据,通过 `Action` 交互数据。

## **Separate "data structure" and "user interface"**
## 数据与视图分离

When defining data, focus on defining data; when defining views, focus on defining views.
定义数据时,专注于定义数据;定义视图时,专注于定义视图。

Abstract the business by defining the data; then define blocks to organize the content to present the data in the way you want.
通过定义数据,来抽象业务;再通过定义区块去组织内容以你所期望的方式呈现数据。

## **One Data table, Many Presentations**
## 一种数据,多种呈现

Abstract a unified data model for the business, and then with blocks you can build a variety of presentations for the same data table for different scenarios, different roles, and different combinations.
为业务抽象出统一的数据模型,然后通过区块可以为同一个数据表建立各种各样的呈现方式,用于不同的场景、不同的角色、不同的组合。

## **Driven by Action**
## 操作驱动

`Collection`defines the structure of the data, and the `Block`organize the presentation of the data. So, what drives data interactions and changes? The answer is `Action`.
数据表来定义数据的结构,区块来组织数据的呈现方式。那么,什么驱动数据的交互和变更?答案是操作。

`Block`present the data to the user, and `Action`send the user's instructions to the server to complete the interaction or change of the data.
区块将数据呈现给用户,操作则是将用户的指令发送给服务器完成数据的交互或变更。
46 changes: 23 additions & 23 deletions docs/en-US/manual/core-concepts/actions.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
# Actions
# 操作

An `action` is a collection of actions that accomplish a specific goal. An `action` is used in NocoBase to process data or communicate with the server. Actions are usually triggered by clicking a button.
`操作`是完成某个特定目标的动作集合。在 NocoBase 中通过 `操作`来处理数据或者与服务器通信。 操作通常会通过点击某个按钮触发。

## Action types
## 操作类型

NocoBase currently supports more than 10 types of actions, and more can be supported in the future by way of plugins.
NocoBase 目前支持 10 几种操作,未来可以通过插件的方式支持更多种。

| Name | Description |
| ----------------- | --------------------------------------------------------------------------------------------- |
| Filter | Specifies the range of data to be displayed |
| Add | Opens a popup window for adding new data, which usually contains a form block. |
| View | Opens a popup window to view the specified data, which usually contains a detail block. |
| Edit | Opens a popup window to modify the specified data, which usually contains a form block. |
| Delete | Opens a dialog box to delete the specified data, and then delete it after confirmation. |
| Export | Exports data to Excel, often combined with filtering. |
| Print | Opens a browser print window to print the specified data, often combined with a detail block. |
| Submit | Submit the data of the specified form block to the server. |
| Refresh | Refreshes the data in the current block. |
| Import | Import data from an Excel template |
| Bulk Edit | Batch Edit Data |
| Bulk Update | Batch Update Data |
| Popup | Open a popup window or drawer in which you can place blocks |
| Update record | Automatically update specified fields when clicked |
| Customize request | Send requests to third parties |
| 名称 | 描述 |
| ---------- | -------------------------------------------------------- |
| 筛选 | 指定数据的显示范围 |
| 添加 | 打开添加新数据的弹窗,在弹窗里通常包含一个表单区块 |
| 查看 | 打开查看指定数据的弹窗,在弹窗里通常包含一个详情区块 |
| 编辑 | 打开修改指定数据的弹窗,在弹窗里通常包含一个表单区块 |
| 删除 | 打开删除指定数据的对话框,确认后删除 |
| 导出 | 将数据导出为 Excel,常和筛选组合使用 |
| 打印 | 打开浏览器打印窗口,打印指定的数据,常和详情区块组合使用 |
| 提交 | 将指定表单区块的数据提交到服务端 |
| 刷新 | 刷新当前区块内的数据 |
| 导入 |Excel 模板中导入数据 |
| 批量编辑 | 批量编辑数据 |
| 批量更新 | 批量更新数据 |
| 打开弹窗 | 打开弹窗或抽屉,在里面可以放置区块 |
| 更新数据 | 点击后自动更新指定的字段 |
| 自定义请求 | 向第三方发送请求 |

## Configure actions
## 配置操作

In UI Editor mode, move the mouse over an action button and the configuration items supported by that action will appear in the upper right corner. For example, for the filter action.
在界面配置模式下,将鼠标移到操作按钮上,右上角就会出现该操作支持的配置项。比如筛选操作:

![action-config-5.jpg](./actions/action-config-5.jpg)
91 changes: 46 additions & 45 deletions docs/en-US/manual/core-concepts/blocks.md
Original file line number Diff line number Diff line change
@@ -1,86 +1,87 @@
# Blocks
# 区块

Blocks are views used to display and manipulate data. In NocoBase, pages, popups and drawers are considered as containers of blocks, and the container is like a canvas in which various blocks can be placed.
区块是用来展示和操作数据的视图。在 NocoBase 里,将页面、弹窗、抽屉看作是区块的容器,容器就像一张画布,在里面可以放置各种各样的区块。

Thanks to NocoBase's design of separating data and view, pages carry data through blocks and organize and manage data in different forms according to different block types.
得益于 NocoBase 将数据与视图分离的设计,页面通过区块承载数据,并根据不同的区块类型,以不同的形式组织和管理数据。

## Structure of blocks
## 区块结构

A block consists of three parts.
一个完整的区块由三部分组成:

1. content area: the body of the block
2. action area: various action buttons can be placed to manipulate the block data
3. configuration area: buttons for operating the block configuration
1. 内容区:区块的主体
2. 操作区:可以放置各种操作按钮,用于操作区块数据
3. 配置区:操作区块配置的按钮

![6.block.jpg](./blocks/6.block.jpg)

## Block types
## 区块类型

![add-block.jpg](./blocks/add-block.jpg)

NocoBase currently has 10+ types of blocks built in, more can be supported in the future by way of plugins.
NocoBase 目前内置 10 几种区块,未来可以通过插件的方式支持更多种。

- **Data blocks:** blocks designed for organizing data.
- **Table:** A block that present multiple data in a table, either a single collection or multiple collections that are related to each other.
- **Form:** A block for entering or editing data in a form, either for a particular collection or for multiple collections that are related to each other in a unified way.
- **Details:** A block to display a specific record, either for a particular collection or for multiple collection that are related to each other.
- **Calendar:** A block that displays multiple records in the form of a calendar, suitable for certain data with important characteristics in terms of date.
- **Kanban:** A block that displays multiple data in the form of a Kanban board, suitable for managing production processes.
- **Chart blocks:** Blocks designed for graphical presentation of statistical data. Currently supports: bar graphs, bar charts, line graphs, pie charts, area charts, etc.
- **Other blocks:** Blocks designed to display special data.
- **Markdown:** Text content written in Markdown.
- **Audit Log**: Show the change records of all data in a collection, including new, edit and delete.
- **数据区块**:为组织数据而设计的区块。
- **表格**:以表格形式展示多条数据的区块,既可以展示一个数据表,也可以展示相互之间有关联关系的多个数据表。
- **表单**:以各种类型的输入框录入或编辑数据的区块,既可以为某一个数据表进行录入,也可以对相互之间有关联关系的多个数据表统一录入。
- **详情**:展示一条特定数据的区块,既可以对某一个数据表的某一条数据进行展示,也可以对相互之间有关联关系的多个数据表中的多条数据统一展示。
- **日历**:以日历的形式展示多条数据的区块,适合某些在日期上具备重要特征的数据。
- **看板**:以看板的形式展示多条数据的区块,适合用来对生产过程进行管理。
- **图表区块**:为图形化展示统计数据而设计的区块。目前支持:柱状图、条形图、折线图、饼图、面积图等。
- **其他区块**:为展示特殊数据而设计的区块。
- **Markdown**:用 Markdown 书写的文本内容。
- **操作记录**:展示一个数据表中的所有数据的变更记录,包括新建、编辑和删除。

## Add block
## 添加区块

Enter the UI Editor mode and click the Add block button on the page and in the pop-up window to add the block. The options are divided into 4 steps.
进入界面配置模式,在页面和弹窗内点击 Add block 按钮即可添加区块。选项分为 4 步:

1. Select block type: Currently available block types include Table, Form, Details, Calendar, Kanban, Markdown
2. Select Collection: All collections will be listed here
3. Choose the creation method: create a blank block, or duplicate a block template , or reference a block template
4. Select Template: If you selected Create from Template in step 3, select the template in step 4
1. 选择区块类型:目前可用的区块类型包括表格、表单、详情、日历、看板、Markdown
2. 选择 Collection:此处会列出所有的 Collection
3. 选择创建方式:创建空白区块,或者从复制区块模板,或者引用区块模板
4. 选择模板:若第 3 步选择了从模板创建,则在第 4 步选择模板

![6.block-add.jpg](./blocks/6.block-add.jpg)

## Configure Blocks
## 配置区块

The configuration of blocks consists of three elements.
配置区块包括三方面的内容:

- Configure block content
- Configure block actions
- Configure block properties
- 配置区块内容
- 配置区块操作
- 配置区块属性

### Configure block content
### 配置区块内容

Take the table block as an example, the content of the block is the columns to be displayed in the table. Click Configure columns to configure the columns to be displayed.
以表格区块为例,区块内容是指表格中要显示的列。点击 Configure columns 即可配置要显示的列:

![6.block-content.gif](./blocks/6.block-content.gif)

### Configure block actions
### 配置区块操作

Take table block as an example, there are filter, add, delete, view, edit, customize and other actions available. Click the Configure actions button to configure the actions. Each of the action buttons can be configured for their own properties.
以表格区块为例,有筛选、添加、删除、查看、编辑、自定义等操作可选。点击 Configure actions 按钮可以配置操作。其中,每个操作按钮都可以单独配置属性:

![6.block-content.gif](./blocks/6.block-content%201.gif)
![6.block-content.gif](./blocks/6.block-content1.gif)

### Configure block properties
### 配置区块属性

Move the cursor to the upper right corner of the block and you will see the block configuration button. Using the table block as an example, the following properties can be configured.
将光标移到区块右上角,会看到区块配置按钮。以表格区块为例,可以配置的属性有:

- Block title
- Drag & drop sorting
- Set the data scope
- Set default sorting rules
- Records per page

![6.collection-setting.gif](./blocks/6.collection-setting.gif)
## 调整布局

## Adjust the layout

It is possible to put either just one block or multiple blocks in combination within the page. You can adjust the position and width of the blocks by dragging and dropping them.
页面内既可以只放一个区块,也可以放多个区块进行组合。你可以通过拖拽完成区块位置和宽度的调整。

![block-drag.gif](./blocks/block-drag.gif)

## Block templates
## 区块模板

你可以将一个区块保存为模板,以后可以复制或引用这个模板。

You can save a block as a template, which can be copied or referenced later.
比如,一个数据表的表单,既用于新增数据,又用于编辑数据,那就可以将这个表单保存为模板,在新增数据和编辑数据的界面里引用它。

For example, if a form is used for both adding and editing data, then you can save this form as a template and reference it in the Add Data and Edit Data blocks.
![block-template.jpg](./blocks/block-template.jpg)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 44ad3d3

Please sign in to comment.