Update index.md

This commit is contained in:
Zhou 2022-11-07 09:11:53 +08:00 committed by GitHub
parent 5e8e4b2d5f
commit 361949dfb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,23 +1,23 @@
# 核心概念 # Core concepts
## Collection ## 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 ```ts
// 订单 // Orders
{ {
name: 'orders', name: 'orders',
} }
// 商品 // Products
{ {
name: 'products', name: 'products',
} }
// 用户 // Users
{ {
name: 'users', name: 'users',
} }
// 评论 // Comments
{ {
name: 'comments', name: 'comments',
} }
@ -25,40 +25,40 @@ Collection 是所有种类数据的集合,中文翻译为「数据表」,如
## Collection Field ## Collection Field
每个 Collection 都有若干 Fields。 Each Collection has a number of Fields.
```ts ```ts
// Collection 配置 // Collection configuration
{ {
name: 'users', name: 'users',
fields: [ fields: [
{ type: 'string', name: 'name' }, { type: 'string', name: 'name' },
{ type: 'integer', name: 'age' }, { type: 'integer', name: 'age' },
// 其他字段 // Other fields
], ],
} }
// 示例数据 // sample data
[ [
{ {
name: '张三', name: 'Jason',
age: 20, age: 20,
}, },
{ { {
name: '李四', name: 'Li Si',
age: 18, age: 18,
} }
]; ];
``` ```
在 NocoBase 中 Collection Field 的构成包括: The composition of a Collection Field in NocoBase consists of
<img src="./collection-field.svg" /> <img src="./collection-field.svg" />
### Field Type ### 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 - string
- text - text
@ -72,7 +72,7 @@ Collection 是所有种类数据的集合,中文翻译为「数据表」,如
- virtual - virtual
- ... - ...
**关系 - Association Type** **Relationship - Association Type**
- hasOne - hasOne
- hasMany - hasMany
@ -82,10 +82,10 @@ Collection 是所有种类数据的集合,中文翻译为「数据表」,如
### Field Component ### 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 ```tsx | pure
// 邮箱字段,用 Input 组件展示,使用 email 校验规则 // Email field, displayed with Input component, using email validation rules
{ {
type: 'string', type: 'string',
name: 'email', name: 'email',
@ -93,31 +93,31 @@ Collection 是所有种类数据的集合,中文翻译为「数据表」,如
'x-component': 'Input', 'x-component': 'Input',
'x-component-props': { size: 'large' }, 'x-component-props': { size: 'large' },
'x-validator': 'email', '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', email: 'admin@nocobase.com',
} }
// 组件示例 // Component example
<Input name={'email'} size={'large'} value={'admin@nocobase.com'} /> <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:
- 字段的组件 - The component of the field
- 组件的参数 - The parameters of the component
- 字段的校验规则 - The field's validation rules
- 字段的模式editable、readonly、read-pretty - 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 - Input
- InputNumber - InputNumber
@ -128,10 +128,10 @@ NocoBase 内置的字段组件有:
### Field Interface ### 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 ```ts
// 邮箱字段 string + inputemail 校验规则 // email field, string + input, email validation rules
{ {
type: 'string', type: 'string',
name: 'email', name: 'email',
@ -142,7 +142,7 @@ NocoBase 内置的字段组件有:
}, },
} }
// 手机字段 string + inputphone 校验规则 // phone field, string + input, phone validation rules
{ {
type: 'string', type: 'string',
name: 'phone', 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 ```ts
// email 字段的模板 // Template for the email field
interface email { interface email {
type: 'string'; type: 'string';
uiSchema: { uiSchema: {
@ -167,7 +167,7 @@ interface email {
}; };
} }
// phone 字段的模板 // Template for the phone field
interface phone { interface phone {
type: 'string'; type: 'string';
uiSchema: { uiSchema: {
@ -177,7 +177,7 @@ interface phone {
}; };
} }
// 简化之后的字段配置 // Simplified field configuration
// email // email
{ {
interface: '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)