Update index.md
This commit is contained in:
Zhou
GitHub
parent
5e8e4b2d5f
commit
361949dfb3
@ -1,23 +1,23 @@
|
||||
# 核心概念
|
||||
# Core concepts
|
||||
|
||||
## Collection
|
||||
|
||||
Collection 是所有种类数据的集合，中文翻译为「数据表」，如订单、商品、用户、评论等都是 Collection，不同 Collection 通过 name 区分，如：
|
||||
Collection is a collection of all kinds of data, such as orders, products, users, comments, etc. Different collections are distinguished by name, e.g.
|
||||
|
||||
```ts
|
||||
// 订单
|
||||
// Orders
|
||||
{
|
||||
name: 'orders',
|
||||
}
|
||||
// 商品
|
||||
// Products
|
||||
{
|
||||
name: 'products',
|
||||
}
|
||||
// 用户
|
||||
// Users
|
||||
{
|
||||
name: 'users',
|
||||
}
|
||||
// 评论
|
||||
// Comments
|
||||
{
|
||||
name: 'comments',
|
||||
}
|
||||
@ -25,40 +25,40 @@ Collection 是所有种类数据的集合，中文翻译为「数据表」，如
|
||||
|
||||
## Collection Field
|
||||
|
||||
每个 Collection 都有若干 Fields。
|
||||
Each Collection has a number of Fields.
|
||||
|
||||
```ts
|
||||
// Collection 配置
|
||||
// Collection configuration
|
||||
{
|
||||
name: 'users',
|
||||
fields: [
|
||||
{ type: 'string', name: 'name' },
|
||||
{ type: 'integer', name: 'age' },
|
||||
// 其他字段
|
||||
// Other fields
|
||||
],
|
||||
}
|
||||
// 示例数据
|
||||
// sample data
|
||||
[
|
||||
{
|
||||
name: '张三',
|
||||
name: 'Jason',
|
||||
age: 20,
|
||||
},
|
||||
{
|
||||
name: '李四',
|
||||
{ {
|
||||
name: 'Li Si',
|
||||
age: 18,
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
在 NocoBase 中 Collection Field 的构成包括：
|
||||
The composition of a Collection Field in NocoBase consists of
|
||||
|
||||
<img src="./collection-field.svg" />
|
||||
|
||||
### Field Type
|
||||
|
||||
不同字段通过 name 区分，type 表示字段的数据类型，分为 Attribute Type 和 Association Type，如：
|
||||
Different fields are distinguished by name, and type indicates the data type of the field, which is divided into Attribute Type and Association Type, e.g.
|
||||
|
||||
**属性 - Attribute Type**
|
||||
**Attribute - Attribute Type**
|
||||
|
||||
- string
|
||||
- text
|
||||
@ -72,7 +72,7 @@ Collection 是所有种类数据的集合，中文翻译为「数据表」，如
|
||||
- virtual
|
||||
- ...
|
||||
|
||||
**关系 - Association Type**
|
||||
**Relationship - Association Type**
|
||||
|
||||
- hasOne
|
||||
- hasMany
|
||||
@ -82,10 +82,10 @@ Collection 是所有种类数据的集合，中文翻译为「数据表」，如
|
||||
|
||||
### Field Component
|
||||
|
||||
只有数据类型的字段，字段值的 IO 没问题了，但是还不够，如果需要将字段展示在界面上，还需要另一个维度的配置 —— `uiSchema`，如：
|
||||
The field has a data type, the IO of the field value is fine, but it is not enough, if you need to display the field on the interface, you need another dimension of configuration -- `uiSchema`, e.g.
|
||||
|
||||
```tsx | pure
|
||||
// 邮箱字段，用 Input 组件展示，使用 email 校验规则
|
||||
// Email field, displayed with Input component, using email validation rules
|
||||
{
|
||||
type: 'string',
|
||||
name: 'email',
|
||||
@ -93,31 +93,31 @@ Collection 是所有种类数据的集合，中文翻译为「数据表」，如
|
||||
'x-component': 'Input',
|
||||
'x-component-props': { size: 'large' },
|
||||
'x-validator': 'email',
|
||||
'x-pattern': 'editable', // 可编辑状态，还有 readonly 不可编辑状态、read-pretty 阅读态
|
||||
'x-pattern': 'editable', // editable state, and readonly state, read-pretty state
|
||||
},
|
||||
}
|
||||
|
||||
// 数据示例
|
||||
// Example data
|
||||
{
|
||||
email: 'admin@nocobase.com',
|
||||
}
|
||||
|
||||
// 组件示例
|
||||
// Component example
|
||||
<Input name={'email'} size={'large'} value={'admin@nocobase.com'} />
|
||||
```
|
||||
|
||||
uiSchema 用于配置字段展示在界面上的组件，每个字段组件都会对应一个 value，包括几个维护的配置：
|
||||
The uiSchema is used to configure the components of the field to be displayed on the interface, each field component will correspond to a value and includes several maintained configurations:
|
||||
|
||||
- 字段的组件
|
||||
- 组件的参数
|
||||
- 字段的校验规则
|
||||
- 字段的模式（editable、readonly、read-pretty）
|
||||
- 字段的默认值
|
||||
- 其他
|
||||
- The component of the field
|
||||
- The parameters of the component
|
||||
- The field's validation rules
|
||||
- The mode of the field (editable, readonly, read-pretty)
|
||||
- The default value of the field
|
||||
- Other
|
||||
|
||||
[更多信息查看 UI Schema 章节](/development/client/ui-schema-designer/what-is-ui-schema)。
|
||||
[see the UI Schema chapter for more information](/development/client/ui-schema-designer/what-is-ui-schema).
|
||||
|
||||
NocoBase 内置的字段组件有：
|
||||
The built-in field components of NocoBase are
|
||||
|
||||
- Input
|
||||
- InputNumber
|
||||
@ -128,10 +128,10 @@ NocoBase 内置的字段组件有：
|
||||
|
||||
### Field Interface
|
||||
|
||||
有了 Field Type 和 Field Component 就可以自由组合出若干字段，我们将这种组合之后的模板称之为 Field Interface，如：
|
||||
With Field Type and Field Component you can freely combine several fields, we call this combined template Field Interface, e.g.
|
||||
|
||||
```ts
|
||||
// 邮箱字段 string + input，email 校验规则
|
||||
// email field, string + input, email validation rules
|
||||
{
|
||||
type: 'string',
|
||||
name: 'email',
|
||||
@ -142,7 +142,7 @@ NocoBase 内置的字段组件有：
|
||||
},
|
||||
}
|
||||
|
||||
// 手机字段 string + input，phone 校验规则
|
||||
// phone field, string + input, phone validation rules
|
||||
{
|
||||
type: 'string',
|
||||
name: 'phone',
|
||||
@ -154,10 +154,10 @@ NocoBase 内置的字段组件有：
|
||||
}
|
||||
```
|
||||
|
||||
上面 email 和 phone 每次都需要配置完整的 uiSchema 非常繁琐，为了简化配置，又引申出另一个概念 Field interface，可以将一些参数模板化，如：
|
||||
The above email and phone require a full uiSchema to be configured each time which is very tedious. To simplify the configuration, another concept Field interface is introduced, which can template some parameters, e.g.
|
||||
|
||||
```ts
|
||||
// email 字段的模板
|
||||
// Template for the email field
|
||||
interface email {
|
||||
type: 'string';
|
||||
uiSchema: {
|
||||
@ -167,7 +167,7 @@ interface email {
|
||||
};
|
||||
}
|
||||
|
||||
// phone 字段的模板
|
||||
// Template for the phone field
|
||||
interface phone {
|
||||
type: 'string';
|
||||
uiSchema: {
|
||||
@ -177,7 +177,7 @@ interface phone {
|
||||
};
|
||||
}
|
||||
|
||||
// 简化之后的字段配置
|
||||
// Simplified field configuration
|
||||
// email
|
||||
{
|
||||
interface: 'email',
|
||||
@ -191,4 +191,4 @@ interface phone {
|
||||
}
|
||||
```
|
||||
|
||||
[更多 Field Interface 点此查看](https://github.com/nocobase/nocobase/tree/main/packages/core/client/src/collection-manager/interfaces)
|
||||
[More Field Interface here](https://github.com/nocobase/nocobase/tree/main/packages/core/client/src/collection-manager/interfaces)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user