CodeWave系列：3.CodeWave 智能开发平台 页面布局及呈现

1. 前言

前一节我们学习了CodeWave的路线图，对CodeWave 已经有一个整体的认识了，本节我们开始学习页面设计，页面布局和页面跳转等具体功能。

2. 基本概念

2.1页面

创建应用时，系统会默认创建6个页面，分别是dashboard(总览页)、index(首页)、login(登录页)、404(404页面)、noAuth(无权限页面)、permission_center（权限中心）。

• login(登录页)：开启权限管理后，需要登录账户时跳转的页面。
• index(首页)：登录应用后默认进入的页面。
• dashboard(总览页)：系统默认的页面模板。
• permission_center（权限中心）：管理用户权限的页面。
• noAuth(无权限页面)：没有访问权限时跳转的页面。
• notFound(找不到页面)：找不到页面时跳转的页面。

2.2 布局

布局是页面排版的关键组件，我们以线性布局组件为例，支持如下3种布局模式：

• 内联布局：将当前元素修改为内联布局模式，各个内联布局模式的元素将默认排布在同一行中，若空间不足以排布下一个内联布局元素，则该元素将会换行。
• 块级布局：将当前元素修改为块级布局模式，各个块级布局模式的元素之前和之后均会换行。
• 弹性布局：在弹性布局模式中，子元素可以在任何方向上排布，也可以弹性伸缩其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免溢出父元素。

2.3 组件

每个组件都包含属性、事件和样式。其中大部分功能以及设置方式相同，本节对组件的通用属性做详细说明。

属性： 基础信息

• 组件名称：由字母、数字和下划线组成，用于在表达式中引用、权限上报等场景。
• 是否控制权限：可根据角色设置权限，对无权限的角色的用户隐藏该组件，设置权限前，必须先设置组件名称。
• 显示条件：可通过表达式设置组件显示的条件，当条件为True时显示，为False时隐藏该组件。

属性： 主要属性

每个组件的主要属性均不相同，这里说明比较通用的属性，组件特有的属性在每个组件的说明文档中详细阐述。

• 设置颜色：不同的组件系统会内置一组场景色，常见的有主要色、成功色、警告色、错误色、危险色等。
• 大小：设置组件大小，常见的有迷你、小、正常、大、巨大。
• 展示方式：行内展示、块级展示（占据整行）。
• 只读：正常显示，但禁止选择或输入。
• 禁用：置灰显示，且禁止任何交互（焦点、点击、选择、输入等）。
• 文本：组件中需要展示的文本内容。
• 动态绑定：组件的所有主要属性都支持动态绑定，可以选择变量，设置表达式。

属性： 数据属性

数据表格、数据列表等可以设置数据源的组件会有数据属性。不同组件的数据源数据会有一些差别，这里说明比较通用的属性，组件特有的属性在每个组件的说明文档中详细阐述。

• 数据源：组件所展示数据的输入源，可以是逻辑、变量。
• 数据类型：数据源返回的数据的类型。

属性：样式属性

• 字体颜色：支持通过表达式或变量动态控制组件字体颜色，颜色格式常见的表示方法如下：
  • 英文表达法：使用英文单词进行颜色的表示，比如red，blue等，该表达方式能直接表示的颜色较少。
  • 十六进制表达法：表示形式为“#”加上6位16进制数，如#ffffff。
  • RGB表达法：表示形式为rgb(a,b,c)，“a”、“b”、“c”三个参数分别表示红，绿，蓝的颜色值，由0到255的十进制表示，如rgb(255,255,0)。
  • RGBA表达法：表示形式为rgba(a,b,c,d)，“a”、“b”、“c”三个参数分别表示红，绿，蓝的颜色值，由0到255的十进制表示；“d”表示透明度，由0到1之间的小数表示，0为完全透明，1为不透明，如rgba(255,255,0,0.5)。
• 背景颜色：支持通过表达式或变量动态控制组件背景颜色，颜色格式常见的表示方法如下：
  • 英文表达法：使用英文单词进行颜色的表示，比如red，blue等，该表达方式能直接表示的颜色较少。
  • 十六进制表达法：表示形式为“#”加上6位16进制数，如#ffffff。
  • RGB表达法：表示形式为rgb(a,b,c)，“a”、“b”、“c”三个参数分别表示红，绿，蓝的颜色值，由0到255的十进制表示，如rgb(255,255,0)。
  • RGBA表达法：表示形式为rgba(a,b,c,d)，“a”、“b”、“c”三个参数分别表示红，绿，蓝的颜色值，由0到255的十进制表示；“d”表示透明度，由0到1之间的小数表示，0为完全透明，1为不透明，如rgba(255,255,0,0.5)。
• 背景图片：支持通过表达式或变量动态控制组件背景图片，填入内容为图片URL。

2.4 事件

每个组件有不同的事件，每个事件均可绑定相关逻辑。

事件：鼠标事件，与鼠标操作相关的事件

事件：手势事件，移动端与手势操作相关的事件：

事件：组件事件，组件内部实现的事件。 该类事件为每个组件特有，组件特有的属性在每个组件的说明文档中详细阐述。

事件：页面事件，页面实例从开始创建到展示完成有一个完整的过程，这个过程包括开始创建、初始化数据、挂载节点、更新渲染、销毁等。每个过程对应着一些事件，允许自定义事件的处理方法完成一些特定的功能。如在初始化数据的时候，可以传入一些数据处理函数，挂载节点的时候可以得到节点做一些dom节点操作处理。页面事件主要有：

3.页面设计

3.1 导航

面包屑： 面包屑对于用户来说是一个方便的导航工具，能够帮助用户快速了解当前页面所在位置，并方便用户浏览网站内容。多用于有多层次的页面结构或较为复杂需要清晰的导航路径的应用中。

侧边栏： 侧边栏组件提供可供选择的侧边栏项，通常位于应用主要内容区域的一侧，用于应用导航菜单、应用设置等场景。

导航栏： 导航栏通常位于页面的顶部或固定位置。通过导航栏项，可以快速导航到网页应用的各个主要页面，例如首页、产品页面、服务页面等。

**下拉菜单：**提供弹出式的下拉菜单项可供选择，通常用于应用导航，通过下拉菜单项可快速浏览应用。

3.2 容器

子页面容器： 每个页面生成的时候均会自带一个子页面容器，用于展示子页面内容。支持自行调整子页面容器的位置。

面板： 面板用于将相关的内容组织在一起，通常用于包装一组相关的内容，分块呈现页面内容，例如用面板包装一组表单、一组操作按钮等。面板提供三个插槽：面板标题、面板内容、额外插槽（右上角）。

• 基本用法：

• 面板分组：

3.3 表格

数据表格：数据表格以二维表格形式呈现数据，通常包含行和列，用于展示相关的数据信息。

数据表格通常用于以下场景：

• 当用户需要存储、组织和分析结构化数据时，数据表格可以清晰地展示出数据的所有相关属性。 具体常见场景说明请参见如何在表格中展示实体数据。
• 数据表格具备行和列结构，当用户需要查找或整理数据时，数据表格可以轻松地进行数据过滤和排序，整合符合要求的数据并展示在表格中。 具体常见场景说明请参见如何通过筛选条件查询并显示数据和如何设置数据表格的排序规则。

组件列表： 当在组件列表中拖入其他组件时，可以根据组件列表绑定的数据源动态展示其他组件的数量和内容。组件列表通常用于用户需要根据列表动态展示N 个相同组件，如展示商品的多种标签。

数据列表： 数据列表包含一组有序的、相互关联的数据项，每个数据项都具有一个唯一的标识符，例如ID、名称等。

数据列表通常用于以下场景：展示一系列相关的数据，例如课程表、时间表、菜单、文章列表等

数据网格：以网格方式展示数据，每一个网格对应数据表中的一行数据。

数据网格通常用于以下场景：当用户需要添加图片或进度条等其他组件，以卡片的形式展示多组数据列表时，可以使用数据网格来展示数据

日历：以日历方式展示数据，通常用于以下场景：展示用户个人日程信息，例如设置生日提醒、添加行程计划、预定场地资源或健康管理时，日历可以清晰地展示出用户的所有日程安排或状态。

3.4 表单

表单:具有数据收集、校验和提交等功能，通常包含各种有输入值或选中值的组件，例如单行输入、选择器、单选组等。包括基础表单，行内表单，折叠分组三种用法。常用于账号注册，个人信息修改等场景。

单行输入: 提供可输入单行文本的输入框，通常用于接收短文本输入，例如用户名、密码、搜索关键字等。

数字输入: 提供可输入数字的输入框，适用于输入数字等场景，比如填写年龄、身高、体重等信息，或者进行数量、价格、金额等相关的计算和操作。

• 基本用法

• 按钮样式

多行输入: 提供可输入多行文本的输入框，通常用于表单提交、问卷调查、编辑文章等场景。

单选组: 提供多个选项进行单项选择，通常用于表单提交、筛选条件选择等场景。

4.布局调整

4.1 线性布局

线性布局可以水平或垂直方式来排列界面中的组件，让布局内的组件间有一定的横向或者纵向间隔，并将组件排列到一条直线上。多用于横向或竖向的排布，在可视化开发页面中，将其拖入页面时提供单行排布、多行排布和两端排布三种布局方式，可供用户在不同需求下选择，快速实现布局效果。

4.2 栅格布局

栅格布局通常用于设计网格式的页面布局。通过将页面划分为多个列和行，然后将内容按照这些列和行进行排列，定义留白、对齐、分割等各种比例关系，让信息的展现更加清晰，让内容布局具有规律性。

4.3 分栏布局

分栏布局通常用于需要在页面中显示多个不同内容的情况，例如新闻网站的首页，需要区分不同的功能区，同时展示新闻、图片、视频等不同类型的内容，使用分栏布局可以使页面更加清晰明了。

4.4 自由布局

自由布局是 CodeWave 智能开发平台提供的一种全新布局方式，在自由布局中支持通过拖拽来调整组件位置和调整大小，通过约束来设计其自适应策略，是一种更灵活、上手门槛更低的布局方式。自由布局组件是一种布局容器，它和平台现有的栅格布局、线性布局一样，可以用来进行页面布局。在自由布局组件内的组件会遵循自由布局提供的布局策略，例如拖拽调整宽高和位置，基于辅助线对齐等等。

我们将自由布局组件内的一级子组件称为自由布局内子组件，这些子组件会有一些特殊的属性，如距离和约束，用于确定其与父容器的位置关系。自由布局中的组件可以是任何类型的组件，包括自由布局组件本身。拖入容器中的组件会成为自由布局组件的子组件，如果子组件内有插槽，可以在插槽内继续拖入其他组件进行布局。注：只有自由布局组件内的一级子组件才具有自由布局的特性，子组件内的其他组件仍然遵循自身的布局规则。

自由布局可以用来搭建任何类型的网页，但它尤其适合那些对页面还原度要求比较高，页面布局效果比较丰富的网页。由于它的上手门槛较低，它也适合对传统的布局方式了解不深的用户

4.5 弹性布局说明

弹性布局是一种可以自适应不同屏幕尺寸和设备方向的布局方式，它擅长解决内部组件宽度要跟随数量或者外部容器宽度变化而变化的场景。在页面布局中，推荐尝试使用弹性布局来解决页面布局中的问题。

5.页面跳转

创建应用时，系统会默认创建6个页面，分别是dashboard(总览页)、index(首页)、login(登录页)、404(404页面)、noAuth(无权限页面)、permission_center（权限中心）。

• login(登录页)：开启权限管理后，需要登录账户时跳转的页面。
• index(首页)：登录应用后默认进入的页面。
• dashboard(总览页)：系统默认的页面模板。
• permission_center（权限中心）：管理用户权限的页面。
• noAuth(无权限页面)：没有访问权限时跳转的页面。
• notFound(找不到页面)：找不到页面时跳转的页面。

本节介绍如何设置默认跳转页和设置页面跳转。

1. 选中欢迎页，右键点击出现菜单，选择设为默认跳转页。

1. 打开总览页，选中侧边栏项P5-1：社区跳转页面，单击右侧图标设置链接表达式。

1. 选择跳转页面P5_1_CommunityLink（社区跳转页面），可以设置高锚点和页面打开方式，完成设置后，发布预览后即可查看效果。

6.小结

本节我们学习了页面设计，页面布局和页面跳转，其中页面设计我们学习了导航，容器，表格，表单等组件，页面布局我们学习了线性布局，栅格布局，分栏布局，自由布局和弹性布局，相信你现在已经可以构建简单的页面应用了，快去动手实践吧。

**文末彩蛋：**我是一名热爱人工智能的专栏作者，致力于分享人工智能领域的最新知识、技术和趋势。通过我的博客，你将能够了解到人工智能在各个领域的应用和创新，探讨人工智能对未来社会的影响，以及探索人工智能背后的科学原理和技术实现。欢迎大家收藏，评论和分享，让我们一起探索人工智能的奥秘，共同见证科技的进步！