--- order: 2 --- # 客户端组件 为了让更多非开发人员也能参与进来,NocoBase 提供了配套的客户端 —— 无代码的可视化界面。客户端界面非常灵活,由不同组件构成,分为了三类: - 通过 createRouteSwitch 创建的路由组件,如 Layout、Page - 通过 createCollectionField 创建的字段组件,用于扩展字段 - 通过 createSchemaComponent 创建的 JSON Schema 组件,可以是任意东西,比如表格、表单、日历、看板等 [更多组件内容,查看组件章节](#) ## 组件树结构 界面是由组件构成的组件树,结构如下: <pre lang="tsx"> // 布局 <Layout> // 页面 <Page> // 栅格 <Grid> // 区块,以表格为例 <Table> // 配置工具栏 <Table.DesignableBar/> // 操作栏 <Table.ActionBar> // 操作 <Action/> <Action/> </Table.ActionBar> // 内容区 <Table.Content> <Table.Column> // 表格列的字段 <CollectionField /> </Table.Column> <Table.Column> <CollectionField /> </Table.Column> </Table.Content> </Table> </Grid> <AddNew /> </Page> </Layout> </pre> 注:以上例子只为表达组件树的结构和组件之间的关系,实际代码并不如此。 接下来,我们来详细的介绍各部分的概念。 ## 布局和页面 页面是可以通过地址访问的网页,不同页面之间可能具有相同的页眉、页脚和导航,通常我们会把这些公共的内容放在布局组件里。例如,初始化的 NocoBase 提供了两个布局组件,如图所示: 图 - AuthLayout:无需登录就能访问,一般用于嵌入登录、注册、忘记密码等页面。 - AdminLayout:需要登录,管理后台的所有页面。 布局和页面组件通过 createRouteSwitch 注册,更多扩展内容点此查看。 ## 页面内容排版 对开发者来说,页面内容的编写是自由的,不过为了方便对页面内容进行排版,提供了两种排版方式: ### 简易的上下结构 <pre lang="tsx"> <Page> <BlockItem /> <BlockItem /> <BlockItem /> </Page> </pre> 例子如下: ```js // 示例 ``` ### 可拖拽的栅格 <pre lang="tsx"> <Page> <Grid> <Grid.Row> <Grid.Col> <BlockItem /> </Grid.Col> <Grid.Col> <BlockItem /> </Grid.Col> </Grid.Row> <Grid.Row> <Grid.Col> <BlockItem /> </Grid.Col> <Grid.Col> <BlockItem /> </Grid.Col> </Grid.Row> </Grid> </Page> </pre> 栅格组件 Grid 基于行(Grid.Row)和列(Grid.Col)来定义区块的外部框架。例子如下: ```js // 示例 ``` ## AddNew AddNew 是页面可视化配置最重要的操作按钮,更多关于 AddNew 的内容点此查看 ## 区块 - Block 区块一般放在页面里,可以是任意东西,包括文字、附件、表格、表单、日历、看板等等。一个完整的区块由三部分组成: - 内容区 Content,区块的主体 - 操作栏 ActionBar,可以放置各种操作按钮,用于操作区块数据(可选) - 配置工具栏 DesignableBar,操作区块配置的按钮(可选) 以表格区块为例,组件结构如下: <pre lang="tsx"> <Table> <Table.DesignableBar /> <Table.ActionBar /> <Table.Content /> </Table> </pre> 具体形态: ```js //示例(这里放上一个表示区块结构的示例) ``` 区块有几种类型: - 数据类型,用于展示数据表的数据,如表格、日历、看板、表单、详情等。 - 多媒体,用于丰富页面内容,如文本段、附件等。暂时只有一个简易的 Markdown。 - 图表,用于展示数据统计。 - 模板,可直接将某些成品模板化,直接应用到页面上。 区块可以任意扩展,如何扩展查看 createSchemaComponent 章节。 ## 操作栏 - ActionBar 操作栏是一系列操作的集合,一般用于区块内部。用户发出操作指令,程序做出改变,并将结果响应在区块内容区。 例如: 表格,内容区是一个表格,操作区会放置一些操作按钮,如筛选、新增、删除、导出等 ```js // 示例(放一个简易的表格,把操作栏重点突出一下) ``` 详情,内容区是详情数据,操作区会放置编辑、导出等按钮 ```js // 示例(放一个简易的详情,把操作栏重点突出一下) ``` 不同的区块,操作栏的按钮可能不同。操作栏的按钮也是可以自定义的,具体内容查看操作章节。 ## 操作 - Action 操作是封装的一段指令,一般需要用户参与。 例如: - 删除数据,需要用户选中待删除数据,再触发删除指令 - 筛选数据,需要用户填写筛选项,再触发筛选指令 - 新增数据,需要用户填写数据之后提交,触发新增操作指令 - 查看详情,用户点击操作按钮,弹窗查看详情或当前窗口打开详情页查看 最简单的操作,只需要绑定一段指令即可,简单来说就是指定一段函数,无需传参。组件结构如下: <pre lang="tsx"> <Action useAction={useAction} /> </pre> 大部分的操作指令需要用户提供参数,如新增数据操作,需要用户填写数据,填写数据一般需要弹出表单,用户填写完数据,点击提交,才触发操作指令。组件结构如下: <pre lang="tsx"> <Action useAction={useAction}> {/* 这是个弹窗表单,内置提交按钮,点击提交触发操作指令,具体代码省略 */} <Action.Modal x-decorator={'Form'}></Action.Modal> </Action> </pre> 一个完整的操作大概分为两步: - 为 Action 绑定一段指令 - 如果指令需要用户提供参数,需要提供交互界面,目前内置的有: - Action.Drawer:抽屉 - Action.Modal:对话框 - Action.Popover:气泡 操作是 NocoBase 里非常重要的一个概念,更多详情点此查看 ## 配置工具栏 - DesignableBar 所有的 Schema Component 都可以绑定自己的配置工具栏(DesignableBar),用于修改当前组件的 Schema。 **什么是 Schema Component?** 通过 Schema 协议编写的类 JSON Schema 格式的组件,如: ```js { type: 'void', 'x-Component': 'Hello', 'x-designable-bar': 'Hello.DesignableBar', 'x-dect': 'CardItem', } ``` 举几个例子,如: 表单字段的 JSON Schema ```js const schema = { type: 'string', 'x-component': 'Input', 'x-decorator': 'FormItem', 'x-designable-bar': 'Form.Field.DesignableBar', }; ``` 表单项的配置工具栏 `Form.Field.DesignableBar` 的效果 <img src="https://nocobase.oss-cn-beijing.aliyuncs.com/1ffba32f9a5625760c3fe11e7eb19974.png" style="max-width: 350px;"/> 表格的 JSON Schema ```js const schema = { type: 'array', 'x-component': 'Table', 'x-decorator': 'CardItem', 'x-designable-bar': 'Table.DesignableBar', }; ``` 表格配置工具栏 `Table.DesignableBar` 的效果 <img src="https://nocobase.oss-cn-beijing.aliyuncs.com/dcd762a0444ef55a8515c53d706f7bc4.png" style="max-width: 250px;"/> 菜单项的 JSON Schema: ```js const schema = { type: 'array', 'x-component': 'Menu.Item', 'x-designable-bar': 'Menu.Item.DesignableBar', }; ``` 菜单项配置工具栏 `Menu.Item.DesignableBar` 的效果 <img src="https://nocobase.oss-cn-beijing.aliyuncs.com/984ab6da6a8f72fe790bb9bd18b3eb35.png" style="max-width: 200px;"/> 更多配置工具栏详情点此查看 ## 字段组件 - CollectionField 字段组件的配置参数可能非常多,在不同数据区块里也可能用到同一个字段组件,为了减少代码重复,NocoBase 里,将字段组件的配置交由数据表统一管理。一处配置,多处使用。数据区块里直接引用字段组件,如果有其他不同参数再另行扩展。 <pre lang="tsx"> <Table> // 原生态的写法 <Table.Column title={'姓名'}> <Input {...others} name="name" readPretty={true}/> </Table.Column> // 简化之后的字段引用 <Table.Column> <CollectionField name="name"/> </Table.Column> </Table> <Form> // 如果在表格里也用到,再写一遍 <FormItem title={'姓名'}> <Input {...others} name="name"/> </FormItem> // 字段引用,只需要提供 name 即可 <FormItem> <CollectionField name="name"/> </FormItem> </Form> </pre> 字段组件有三种显示状态: - 可填写 - editable - 不可填写 - disabled - 阅读模式 - read-pretty 以单行文本(Input)为例: ```js // 示例(Input 的三种显示状态) // 示例待补充 ``` **为什么字段有多种显示状态?** - 在表单中,一般情况字段为可填写状态(editable),但如果只供查看,这时候就会把字段设置为 disabled 或 read-pretty。 - 在表格中,一般情况字段为阅读模式(read-pretty),但如果需要在表格内快捷编辑,又可以动态的将某个字段激活为 editable。 字段组件可以任意扩展,如何扩展查看 createCollectionField 章节。