视图设计器

视图模板

SnapDevelop提供了多种视图模板，帮助开发者快速构建用户界面，降低前端开发复杂度，提高开发效率。

每种视图模板都有其特定的用途和适用场景。以下是对这些视图模板的详细描述。

  • 主页（Home.sdv）：该页面自动生成，提供重要信息的概览。每个项目只能有一个 Home.sdv 文件。
  • 布局（Layout.sdv）：该页面自动生成，用于定义应用的导航和布局。每个项目只能有一个 Layout.sdv 文件。
  • 详情页面：该模板用于展示单一数据项的详细信息。您可以基于该模板以及API接口快速创建页面（右键点击项目节点，然后选择 添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择 详情页面，然后选择API。）
  • 表单页面：该模板用于数据的输入和提交。您可以基于该模板以及API接口快速创建页面（方法同上，最后一步选择 表单页面，然后选择API）。
  • 表格页面（仅限浏览器端Web和API项目）：该模板用于展示和管理列表数据，支持分页、排序和筛选。您可以基于该模板以及API接口快速创建页面（方法同上，最后一步选择 表格页面，然后选择API）。
  • 树表格页面（仅限浏览器端Web和API项目）：该模板结合表格和树形结构，用于展示层级关系数据。您可以基于该模板以及API接口快速创建页面（方法同上，最后一步选择 树表格页面，然后选择API）。
  • 列表页面（仅限移动端Web和API项目）：该模板用于展示简洁的列表信息，适合不需要复杂交互的场景。您可以基于该模板以及API接口快速创建页面。方法同上，最后一步选择 列表页面，然后选择API）。

不同的视图页面和模板提供了不同的配置选项。您可以打开每个视图页面，通过大纲树查看层级和选择组件，或者直接在中间的 UI 设计器中选中组件，然后在右边的属性、事件和样式选项卡中查看和设置相关选项。

image-20250325134930683

image-20250325134930683

主页（Home.sdv）

Home.sdv 主页文件在项目生成时自动生成。主页通常用于展示应用的重要链接、概览或摘要信息。

在左边的 物料库 中，您可以选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的 属性、事件、样式 等页面中进行配置。

在左边的 大纲树 中，您可以查看页面组件之间的层级关系以及选择要配置的组件，也可以直接在中间的 UI 设计器中选择想要配置的组件，然后在右边进行配置。

image-20250325135301980

布局（Layout.sdv）

Layout.sdv 布局文件在项目生成时自动生成。它作为一个容器，用于定义页面的导航。布局页面通常不会直接显示具体的业务内容，而是作为其他内容展示的基础。

在左边的 大纲树 中，您可以查看页面组件之间的层级关系以及选择要配置的组件，也可以直接在中间的 UI 设计器中选择想要配置的组件，然后在右边的 属性、样式 等页面中进行配置。

当前布局页面只支持菜单布局和菜单项，不支持添加其他布局或组件。菜单项（以及子菜单项）在右边的属性页面中进行添加、删除、和修改。

image-20250325135342003

详情页面

详情页面通常用于显示某个具体数据项的详细信息。用户可以通过点击列表项、卡片或其他摘要信息，进入详情页面查看该项的所有详细数据。

如想从详情页面模板快速创建一个页面，可以右键点击项目节点，然后选择 添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择 详情页面，然后选择 Get API。

image-20250321133736819

您可以在左边的 物料库 中，选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的 属性、事件、样式 等页面中进行配置。

您也可以在左边的 大纲树 中，查看页面组件之间的层级关系以及选择要配置的组件，或者直接在中间的 UI 设计器中选择想要配置的组件，然后在右边进行配置。

如下图所示，您可以在 大纲树 中点击 页面，然后在属性页面中配置该页面的常规配置，例如：在事件页面配置页面加载请求，以及在样式页面设置边距。

image-20250325135431470

表单页面

表单页面用于收集用户输入的数据。通常包含多个输入框、下拉框、单选框等字段，允许用户填写或修改数据。表单页面常见于数据新增、编辑和提交操作。

如想从表单页面模板快速创建一个页面，可以右键点击项目节点，然后选择 添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择 表单页面，然后选择 API（例如：新增场景仅需要选择 表单提交API：Add，更新场景选择 表单获取API：Get 以及 表单提交API：Update。

image-20250321134123564

您可以在左边的 物料库 中，选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的 属性、事件、样式 等页面中进行配置。

您也可以在左边的 大纲树 中，查看页面组件之间的层级关系以及选择要配置的组件，或者直接在中间的 UI 设计器中选择想要配置的组件，然后在右边进行配置。

image-20250325135509492

表格页面

表格页面仅存在于 浏览器端 Web 和 API 项目中。

表格页面用于展示和管理列表数据。通常会以表格的形式展示多个数据项，每一行代表一个数据项，每一列代表数据的不同字段。

如想从表格页面模板快速创建一个页面，可以右键点击项目节点，然后选择 添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择 表格页面，然后选择 GetList 或 GetPage API。

image-20250321134631565

您可以在左边的 物料库 中，选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的 属性、事件、样式 等页面中进行配置。

您也可以在左边的 大纲树 中，查看页面组件之间的层级关系以及选择要配置的组件，或者直接在中间的 UI 设计器中选择想要配置的组件，然后在右边进行配置。

image-20250325135757880

树表格页面

树表格页面仅存在于 浏览器端 Web 和 API 项目中。

树表格页面是表格页面的扩展，用于展示具有层级关系的数据结构。它将表格和树形结构结合在一起，可以展示父子关系数据（例如组织结构、目录结构等）。

如想从树表格页面模板快速创建一个页面，可以右键点击项目节点，然后选择 添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择 树表格页面，然后选择 GetList 或 GetPage API。

image-20250410175541105

您可以在左边的 物料库 中，选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的 属性、事件、样式 等页面中进行配置。

您也可以在左边的 大纲树 中，查看页面组件之间的层级关系以及选择要配置的组件，或者直接在中间的 UI 设计器中选择想要配置的组件，然后在右边进行配置。

image-20250325135609861

列表页面

列表页面仅存在于 移动端 Web 和 API 项目中。

列表页面通常用于展示一组简洁的、概览性的列表信息。用户可以快速浏览一系列数据项，并在需要时点击查看更详细的数据。

如想从列表页面模板快速创建一个页面，可以右键点击项目节点，然后选择 添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择 列表页面，然后选择 GetList API。

image-20250410172339522

您可以在左边的 物料库 中，选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的 属性、事件、样式 等页面中进行配置。

您也可以在左边的 大纲树 中，查看页面组件之间的层级关系以及选择要配置的组件，或者直接在中间的 UI 设计器中选择想要配置的组件，然后在右边进行配置。

image-20250410172513182

物料库

物料库 位于视图设计器的左上方，用户可以通过它来快速访问和拖拽不同类型的组件，轻松构建和设计界面。物料库中提供的组件种类被划分为多个类别，每种类别包含了一些常见的界面元素，可以根据需求选择合适的组件来搭建页面。

组件可用性说明 由于不同项目类型（如浏览器端Web和API项目与移动端Web和API项目）在交互方式、布局结构和功能需求上存在差异，物料库会根据项目类型提供相应的组件集。某些组件可能仅在特定类型的项目中可用，在其他类型项目中不可见。请根据实际项目类型选择使用合适的组件。

以下是对物料库中提供的组件的详细描述：

通用 组件是指一些基本的、常见的界面元素，通常适用于各种页面和场景。这些组件可以用于构建基础的页面元素，如按钮、标签等。

常见的组件包括：

  • 按钮 -- 常见的操作按钮，用户可以用它来触发事件，如提交表单、跳转页面等。
  • 文字提示 -- 显示静态文本信息，通常用于标注其他表单项或作为提示。

布局 组件用于定义页面元素的排列方式和容器结构，是页面构建的基础。它们帮助开发者合理组织和呈现页面内容，确保在不同屏幕尺寸和终端设备上都能保持良好的排版效果和用户体验。通过灵活组合这些组件，可以构建出丰富、多样的页面结构。

常见的组件包括：

  • 卡片：一种常用的内容容器，具备独立的边框和阴影样式。可用于包裹表单、图表、文本等内容模块，适合构建信息块或模块化内容区域。
  • 分割线：用于将页面内容划分为多个区域，增强页面层次感和视觉清晰度。支持横向、纵向分割，常用于分隔不同功能或内容板块。
  • 弹性布局：基于CSS Flexbox实现的布局容器，支持子元素的灵活排列与对齐，适用于水平/垂直居中、等间距排列等常见布局场景。
  • 栅格：通过“行-列”结构将页面划分为多个单元格，实现响应式布局。支持根据屏幕尺寸自动调整列宽，适合构建具有复杂排布需求的页面。
  • 行容器：用于创建水平方向的布局容器，子组件默认沿一行排列。拖拽时默认显示为一行两列，支持自定义列数和比例。
  • 列容器：用于创建垂直方向的布局容器，子组件按列从上至下排列。适合组织线性内容或竖向导航结构。
  • 视图容器：通用型容器组件，可承载其他组件，同时支持设置尺寸、边距、边框、背景色等属性，方便进行页面结构和样式控制。
  • 标签页：用于将内容分区展示为多个选项卡，提升页面的可读性与信息组织性。适合在一个页面中展示多个相互独立但关联的内容区。
  • 侧边栏：用于在页面侧边展示导航或功能入口，常用于构建系统菜单或模块导航结构。支持固定宽度、折叠/展开、图标配合文本等样式，便于用户在页面间快速切换或展开子功能。
  • 间距：用于在组件之间插入固定或自适应的空白区域，调整视觉间距，使页面排版更具呼吸感。
  • 组合：用于将多个表单项或组件进行紧密组合，常用于需要取消边框间隙或需要统一处理验证、样式等的场景，如多个输入项连排展示。

数据录入 用于接收用户输入并将其转换为结构化数据，常用于表单页面中，帮助用户完成信息填写、编辑和提交操作。这些组件支持多种数据类型和交互方式，满足从简单文本输入到复杂数据选择的各种需求。

常见的组件包括：

  • 表单容器：适用于承载单个表单结构，支持表单项的布局、数据绑定、实时校验和统一提交。
  • 表单：适用于组织和管理多个表单区域或分组，适合处理结构较为复杂的场景。
  • 子表单：嵌套在主表单中的局部表单，常用于处理关联数据或一对多结构。
  • 集合表单：用于动态添加和管理多个表单项的集合，如添加多个联系人或地址。
  • 分步表单：将较长或复杂的表单内容拆分为多个步骤，提升用户填写体验。
  • 表单项：表单中的基础单元，用于承载具体的输入控件和校验逻辑。
  • 文本输入框：用于输入单行文本数据，如姓名、标题等。
  • 多行文本框：适合输入段落性内容，如备注、描述等。
  • 数字输入框：专用于输入整数或小数，支持范围限制和步长控制。
  • 步进器：用于控制某个数值的递增或递减，通常由一个输入框和两个操作按钮(加号/减号)组成，适合用于数量选 择、分页设置等场景。
  • 搜索输入框：带有搜索触发功能的文本框，常用于快速定位数据。
  • 密码输入框：用于输入加密信息，输入内容不可见。
  • 日期选择框：支持以日历形式选择日期，提供格式化和快捷选项。
  • 时间选择框：用于选择具体时间点，支持小时、分钟、秒的精确控制。
  • 日期范围：允许用户选择起始和结束日期，用于时间段筛选等场景。
  • 时间范围：用于选择特定时间区间。
  • 时间间隔：输入或选择时间间隔值，例如任务执行周期。
  • 滑动输入条：通过滑动条选择数值，适合用于范围内数值选择。
  • 开关：二元状态切换组件，适用于启用/禁用等布尔值控制。
  • 单选框组：在一组选项中选择一个，常用于性别、状态等字段。
  • 多选框：允许用户勾选一个或多个选项。
  • 多选框组：多个独立多选框的组合形式，便于分组管理。
  • 下拉选择框：从预定义选项中选择一个或多个值，支持搜索、清空等功能。
  • 下拉菜单：可点击展开的选项列表组件，常用于选择操作、切换状态、展示功能入口等。相比下拉选择框，它更偏向于功能操作而非数据选择，支持图标、分组、禁用状态等样式。
  • 分类选择框：用于选择预定义的分类项，通常以层级或标签方式展示，适合用于产品分类、内容筛选、标签管理等。支持单选、多选和动态加载子类目。
  • 树形选择框：以层级结构展示选项，适用于组织结构、分类等多级选择场景。
  • 级联选择框：根据前一级的选择动态加载后一级选项，常用于地区、省市区等级联场景。
  • 下拉表格：在下拉框中嵌入表格组件，支持分页、搜索和复杂数据选择。
  • 评分：用于输入评分型数据，如星级评价。
  • 图片上传：允许用户上传图片文件，支持预览、格式限制、大小限制等功能。

数据展示 组件用于以可视化的方式呈现来自后台服务或数据库的数据，常见于报表、数据概览、详情页等场景。这类组件能够帮助用户快速理解和浏览信息，有时也支持基本的交互，如点击查看详情、排序或导航等。展示形式多样，包括表格、列表、图文混排、图形等，适用于不同类型和结构的数据。

常见的组件包括：

  • 表格容器：用于包裹和组织表格组件，支持分页、筛选、排序等表格功能的布局与扩展设置。
  • 表格：以行列结构展示结构化数据的核心组件。适合用于数据密集型场景，如数据报表、后台管理等，支持排序、筛选、分页、操作列等功能。
  • 详情：用于展示某一项数据的详细内容，常用于点击列表或表格中的某条记录后，进入详情页查看具体信息。
  • 描述列表：以键值对的形式展示数据项，适用于结构化但非表格化的数据展示，如用户信息、订单详情等。
  • 列表：以垂直或水平方式排列的数据集合展示组件，适用于呈现多个数据项，每项可以包含标题、描述、图片、操作按钮等内容。
  • 单元格组：用于将多个单元格进行组合，形成清晰的分区结构，常用于表单详情页或设置页面中，便于信息的模块化管理。
  • 单元格：展示结构中的最小信息单元，通常包括标题、描述、图标、值等内容。可支持跳转、点击、图标操作等，是移动端设置页面常见展示形式。
  • 列表项：列表组件中的单个数据单元，通常包含多个字段内容。
  • 列表项元数据：用于展示列表项的附加信息，如副标题、描述、时间戳等。
  • 轮播图：以自动或手动方式轮播展示一组图像或内容块，常用于首页推荐、广告位等场景。
  • 标题：用于展示页面或模块的标题文字，突出主题层次。
  • 文本：用于展示静态或动态文本内容，支持样式、字数控制等。
  • 文本省略：用于在文本过长时自动显示省略号，避免页面排版错乱。可设置最大行数或字符数，支持悬浮展示完整内容(tooltip)等增强功能。
  • 标签：用于展示简短的标识性信息，如状态标签、分类标签等，常用于辅助信息表达或快速识别。
  • 链接：用于导航跳转或触发相关动作的文字链接，可配置跳转路径和打开方式。
  • 图片：用于展示静态图片、动态图或图标等视觉内容，支持缩放、预览、占位符设置等。
  • 图标：以简洁图形表达操作意图或状态标识，适用于按钮、导航、状态等场景。
  • 徽标数：用于展示数量或状态，如通知数、待处理任务数量等，常与图标、按钮等组件结合使用。
  • 进度条：用于展示任务或流程的完成进度，支持线性、环形等多种形式。
  • 环形进度条：以圆环方式展示任务完成进度，视觉表现更紧读、美观，常用于加载状态、步骤完成度、目标达成率等场景。
  • 时间轴：以时间为主轴，按顺序展示事件或节点，适用于历史记录、步骤追踪等场景。
  • 时间轴节点：时间轴上的单个事件节点，展示事件名称、时间、描述等。
  • 日历：展示按天、周或月排列的日期信息，可用于查看和管理时间相关数据，如日程安排、活动计划等。
  • 宫格：将一组图标/操作项以网格形式排列展示，常用于快捷入口、功能模块、菜单项展示等。支持图标+标题组合，统一的排列方式提升视觉一致性。
  • 树形控件：以树形结构展示层级数据，适用于组织架构、分类目录、权限管理等多级嵌套场景，支持节点展开、选择、懒加载等功能。

图表 组件用于将结构化数据以可视化的形式展示，帮助用户理解数据变化趋势、分布情况及构成比例。通过图表，复杂的数据关系能够更加直观地被用户感知和分析，常用于数据看板、分析报表、业务概览等页面中。

常见的组件包括：

  • 统计数值：用于高亮展示关键指标或数据摘要，以数字形式呈现，例如总数、增幅、平均值等。
  • 折线图：通过连接数据点的线条表示数据的变化趋势，适合展示随时间变化的数据走向。
  • 柱状图：以柱形对比不同类别的数据数值，支持垂直或水平排列，适用于分类数据的对比分析。
  • 饼图：使用扇形区域表示各部分在整体中的占比，适合用于展示组成关系，如比例分布或结构占比。

操作反馈 组件用于向用户传达系统的处理结果或当前状态，帮助用户确认操作是否成功或了解下一步的响应行为。这类组件增强了系统的可用性与可控性，是构建良好用户体验的重要组成部分。

常见的组件包括：

  • 对话框：以模态窗口形式展示确认、提示或输入内容，用于重要交互节点。
  • 抽屉：从页面边缘滑出，展示补充内容或表单，适用于不打断主流程的场景。
  • 气泡确认框：轻量级的操作确认弹出框，常用于需要二次确认的交互行为。
  • 下拉菜单：点击触发后显示选项列表，用于执行操作、切换状态或展开功能入口。

其中，带 数据源 属性的物料组件如下：

浏览器端

  • 表单
  • 表单容器
  • 登录表单
  • 分步表单
  • 详情
  • 表格容器
  • 列表
  • 卡片
  • 标签页
  • 多选框组
  • 单选框组
  • 下拉选择框
  • 树形选择框
  • 级联选择框
  • 下拉表格
  • 轮播图
  • 时间轴
  • 树形控件
  • 日历
  • 柱状图
  • 折线图
  • 饼图

移动端

  • 表单
  • 表单容器
  • 登录表单
  • 详情
  • 列表
  • 卡片
  • 标签页
  • 单元格组
  • 级联选择框
  • 多选框组
  • 单选框组
  • 下拉选择框
  • 分类选择框
  • 下拉菜单
  • 宫格
  • 日历
  • 轮播图
  • 侧边栏
  • 柱状图
  • 折线图
  • 饼图
  • 布局视图（特殊物料，仅在Layout页面中存在）

带事件的物料组件如下：

浏览器端

  • 按钮: 点击事件(onClick)
  • 链接: 点击事件(onClick)
  • 卡片: 点击事件(onClick)
  • 标签页: 切换事件(onChange)
  • 表单容器: 提交完成事件(finish)
  • 表单: 提交完成事件(finish)
  • 登录表单: 提交完成事件(finish)
  • 分步表单: 提交完成事件(finish)
  • 搜索输入框: 搜索事件(search)
  • 开关: 切换事件(onChange)
  • 单选框: 切换事件(onChange)
  • 表格容器: 点击行事件(onRowClick)
  • 列表项: 点击事件(onClick)
  • 轮播图: 切换事件(onAfterChange)
  • 轮播项: 点击事件(onClick)
  • 气泡确认框: 确认事件(confirm)
  • 菜单项: 点击事件(onClick)

移动端

  • 菜单项: 点击事件(onClick)
  • 按钮: 点击事件(onClick)
  • 图标: 点击事件(onClick)
  • 链接: 点击事件(onClick)
  • 卡片: 点击事件(onClick)
  • 弹性布局: 点击事件(onClick)
  • 标签页: 切换事件(onChange)
  • 侧边栏: 切换事件(onChange)
  • 侧边栏项: 点击事件(onClick)
  • 表单容器: 提交完成事件(finish)
  • 表单: 提交完成事件(finish)
  • 登录表单: 提交完成事件(finish)
  • 搜索输入框: 搜索事件(search)
  • 开关: 切换事件(onChange)
  • 单选框: 切换事件(onChange)
  • 单元格: 点击事件(onClick)
  • 轮播图: 切换事件(onChange)
  • 轮播项: 点击事件(onClick)
  • 宫格项: 点击事件(onClick)
  • 下拉菜单: 切换事件(onChange)

大纲树

大纲树 位于视图设计器的左下方。它通过树形图的格式展示了页面组件之间的层级关系，使得开发者能够直观地了解页面的结构，并且轻松管理各个组件。大纲树与UI设计器紧密同步，用户在大纲树中对组件的操作（比如选中、隐藏、复制、删除等）会实时反映到UI设计器中，反之亦然。

大纲树具有以下功能和特点：

树形结构展示组件层级关系 大纲树以树形结构的形式展示页面中的所有组件，显示它们之间的层级和父子关系。每个组件（如按钮、文本框、表单、容器等）都作为树形结构中的一个节点，嵌套的组件会以子节点的形式呈现。

这种层级结构使得开发者能够一目了然地查看页面的结构，了解每个组件在页面中的位署以及它们之间的关系。

与UI设计器实时同步

大纲树与UI设计器之间是实时同步的。当鼠标在大纲树中的组件上方停留时，UI设计器中的相应组件也会被蓝色虚线框选中。当选中一个组件时，UI设计器中的相应组件会被选中并高亮显示，帮助开发者快速定位和操作该组件。反之，在UI设计器中选择一个组件时，大纲树中的对应节点也会被选中。

快速隐藏、复制、删除组件

当鼠标在大纲树中的组件上方停留或者选中组件时，组件旁边将出现 隐藏 图标和 更多 图标。

隐藏组件 -- 开发组可以通过选中图标快速在UI设计器中隐藏或显示该组件。隐藏的组件将不再显示在U设计器中，但它仍然存在于页面的层级结构中，开发者可以通过图标将它再次显示在UI设计器中。这对于调整布局、调试和临时移除某些组件非常方便。

复制组件 -- 点击 更多 图标，从下拉菜单列表中选择 复制 可以快速复制某个组件，并在页面中创建一个相同的副本。

删除组件 -- 点击 更多 图标，从下拉菜单列表中选择 复制 可以删除某个组件，删除后该组件在UI设计器中也会被移除。

快速布局

在 更多 图标的下拉菜单列表中还有一个 布局 选项。该选项允许开发者快速调整页面组件的排列方式或结构。布局选项可以提供多种常见的布局模板（如卡片、弹性布局、栅格、栅栏、间距、组合等），帮助开发者快速调整页面的整体结构。

UI设计器

UI设计器是一个所见即所得（WYSIWYG，What You See Is What You Get）的可视化界面设计工具，旨在简化和加速用户界面设计的过程。它通过提供所见即所得的可视化编辑界面，让开发者无需编写代码就能构建页面、调整布局、配置组件、定义交互，并且可以实时查看设计效果。

UI设计器具有以下功能和特点：

所见即所得（WYSIWYG） -- UI设计器采用所见即所得的方式，即你在设计器中所看到的内容就是最终用户在应用中看到的效果。任何对组件的修改（如颜色、文字、位置等）都会立刻反映在设计视图中。

无代码快速构建 -- UI设计器支持从组件库中拖拽组件到界面中，支持拖拽调整组件的位置。用户只需要通过简单的鼠标拖拽操作，就能快速构建和布局页面，而不需要手动编写HTML或CSS代码。组件库中的组件经过优化和封装，可以直接用于业务页面中，也可以通过配置进一步定制组件的样式、属性和行为。

即时预览 -- 在设计界面的过程中，用户可以随时切换设计和预览视图，查看界面的真实显示效果。设计器还提供模拟响应式设计的功能，允许开发者在不同屏幕尺寸下预览界面的表现，确保设计在不同设备上都有良好的显示效果。

无代码交互设计支持 -- 除了静态布局，UI设计器还支持设置和调整页面的交互行为。用户可以为组件添加交互事件，如按钮点击、表单提交、数据加载等。开发者可以通过配置事件和动作（例如跳转到某个页面、显示弹窗、提交表单等）来实现应用的业务逻辑，而无需手动编写代码。

样式修改 -- 开发者可以修改组件的颜色、字体、大小、边框、背景等属性。

与大纲树实时同步 -- UI设计器与大纲树紧密集成，任何在设计器中进行的操作都会同步更新大纲树中的组件层级结构。例如，用户拖拽一个按钮到页面中，UI设计器中的布局会发生变化，同时，大纲树中的组件树也会相应更新，显示出该按钮的层级位置。

image-20250321173042977

image-20250321172956449

"属性"选项页

“属性选项页”根据组件的不同，提供的属性项也有所不同。在每个组件的“属性选项页”中，您可以配置与该组件相关的各种属性。这些属性控制组件的外观、行为和交互方式。常见的属性选项包括

  • 数据源（如提交数据API、初始化数据）
  • 页面参数（如名称、字段类型、集合）
  • 数据（如数据绑定、初始值）
  • 数据列（如列名、数据绑定）
  • 功能（如标题、触发方式、最大长度、占位提示、交互类型、分页显示、每页记录数）
  • 校验（如规则）
  • 查询表单（如过滤表单类型）
  • 操作区（如显示/隐藏）
  • 外观（如颜色、字体，边框、尺寸、图标、对齐、方向）
  • 状态（如只读、禁用、隐藏）
  • 安全（如是否纳入安全认证）

某些属性（如数据绑定、API调用等）需要与其他服务配合使用，因此请确保您已经配置这些服务（详细说明，请参考 方法设计 和 自定义数据源）。

"事件"选项页

在视图设计器中，“事件”选项卡为不同的组件提供了多种可配置的交互事件，允许在用户与组件进行交互时动态响应和处理不同的操作，实现更灵活、响应迅速的应用界面。

事件类型

这些事件根据组件的类型和功能不同而有所差异。以下是一些常见组件及其相关事件：

  • 页面组件

    页面加载事件：当页面完全加载并渲染完成时触发的事件，通常用于初始化数据、调用接口或执行特定的页面加载动画。

  • 表单容器、表单、登录表单、分步表单

    提交完成事件：当表单提交时触发的事件，用于执行数据验证、提交表单数据或显示相应的反馈信息。

  • 表格容器

    点击行事件：当用户选择表格中的某一行时触发的事件，通常用于展示详细信息或执行某些操作。

  • 按钮组件

    点击事件：当用户点击按钮时触发的事件，通常用于提交表单、触发某个功能或进行页面跳转。

  • 图标、卡片、单元格、链接、轮播项（轮播图）

    点击事件：用户点击该组件时触发的事件，常用于跳转到其他页面、触发某个操作或显示更多信息。

  • 菜单项（下拉菜单）、列表项

    点击事件：当用户选择下拉菜单或列表中的某个选项时触发的事件，常用于更新其他组件的显示或执行相关操作。

  • 轮播图

    切换事件：当轮播图切换到下一个或前一个图像时触发的事件，常用于更新页面上的其他组件或显示相关内容。

  • 标签页

    切换事件：当用户点击不同标签页时触发的事件，用于切换显示内容或执行与当前标签页相关 的操作。

  • 气泡确认框

    确认事件：用户在气泡确认框中点击“确认”按钮时触发的事件。气泡确认框通常用于快速获取用户确认操作，如删除、保存、退出等，确认事件是用户同意或确认某项操作时的响应机制。

  • 开关、单选框组

    切换事件：当用户在多个单选框之间切换时触发的事件。当用户选择单选框组中的一个选项时，该事件会被触发，通常用于执行某些操作或更新界面内容。

动作配置

在事件选项卡中，点击“添加动作”后，你可以为某个事件指定多个动作（操作）。多个动作将按照排列的顺序依次执行。有时候，每个动作的执行顺序非常重要，因为前一个动作的输出结果或状态变化可以被后一个动作作为输入来使用。

“添加动作”下拉选项中提供了三种动作供选择：“组件操作”、“接口操作”、或“框架操作”。

组件操作

“组件操作”可以针对当前页面的组件执行一系列预定义的操作。例如，当用户选择某个选项时，可以通过“加载数据”操作更新页面中的表格内容，或通过“打开弹框”操作展示详细信息。

  • 加载数据：该操作用于向指定组件加载或刷新数据。例如，加载一个表格组件的数据，通常与数据源相关，可以是从API获取的数据或者本地存储的数据。这个操作常用于页面初始化或数据更新时。

  • 移除行：该操作用于从表格或列表组件中删除一行数据。通常用于删除用户提交的数据或动态展示的数据。

  • 清空所有行：该操作清空表格或列表组件中的所有行数据。这通常用于重置表格或列表的内容，或在某些操作后清空现有数据。

  • 属性赋值：该操作用于设置或修改组件的某些属性或数据。例如，可以修改一个输入框的值，或者修改一个图表的展示数据。它允许动态更新组件的状态或外观。

  • 打开弹框：该操作用于打开一个弹出框（如对话框、提示框等）。用户点击触发某个按钮或选择某个选项时，可以通过此操作展示一个弹框来获取用户输入或展示更多信息。

  • 关闭弹框：该操作用于关闭已打开的弹框。通常与“打开弹框”操作配对使用，在用户完成某些操作或点击关闭按钮时触发，帮助清理界面或结束交互。

  • 打开下拉菜单：该操作用于打开某个下拉菜单（如选择框或选项卡菜单）。通常在点击一个按钮或图标时触发，显示一组可以供用户选择的选项。

  • 关闭下拉菜单：该操作用于关闭已经打开的下拉菜单。通常在用户完成选择后或点击页面其他地方时触发，用于隐藏菜单以清理界面。

  • 打开气泡确认框：该操作用于展示一个气泡确认框，通常用于快速提示或确认用户的操作（如是否删除某项内容）。气泡确认框通常小而轻量，用户可以快速做出确认或取消的决定。

  • 关闭气泡确认框：该操作用于关闭已经展示的气泡确认框。通常在用户做出选择后或点击框外的区域时触发。

  • 点击事件：该操作用于模拟或绑定一个“点击”事件，通常用于触发某些交互，例如点击按钮后执行某个功能，或者让某个组件响应用户的点击。此操作也可以用于触发组件的其他交互或操作。

接口操作

”接口操作”支持不同的操作类型，如API接口、认证或外部数据源，并设置相应的参数。这些操作常用于与后端系统交互、获取外部数据、进行用户身份验证等。

  • API接口：您可以选择一个已经在系统中配置好的API接口。API接口通常用于与后端服务器进行通信，获取或发送数据。

    在选择API接口后，您通常需要为接口操作设置相应的请求参数。这些参数可以是从前端页面获取的用户输入值、计算结果或静态数据。您可以根据接口的要求提供必要的参数（如查询条件、用户ID、时间范围等）。

    示例：假设您有一个API接口用于获取用户信息，当用户点击某个按钮时，触发该接口，获取返回的数据，并在页面中展示相关用户信息。

  • 认证：认证通常是指对用户进行身份验证或令牌验证等操作，确保用户有权限进行某些敏感操作或访问特定的数据。

    在选择login或register认证后，您需要指定身份验证时需要的用户名、密码等。

    示例：用户登录时，选择认证操作，通过后端接口验证用户名和密码。如果验证成功，用户会被授权访问特定功能，否则显示错误提示。

  • 外部数据源：“外部数据源“允许您将某些外部服务或数据源与您的页面连接，从中提取数据或执行相关操作。外部数据源可以是第三方系统、数据库、或者外部API接口。（关于如何配置外部数据源，请参考 自定义数据源。）

    在选择外部数据源后，您需要指定数据查询条件例如字段匹配、时间范围、ID等。

    示例：您可能通过外部数据源查询一个第三方库存系统的数据，并将返回的库存信息展示在页面的表格中，或用于后续的库存管理。

框架操作

“框架操作”支持以下几种操作类型：“新窗口打开”，“当前窗口打开“和“返回/关闭”。

  • 新窗口打开：该操作会在新的窗口或标签页中打开指定的页面。这种方式通常用于需要在不干扰当前页面的情况下，展示新的内容或进行其他操作。它通常用于打开外部链接（如从您的应用跳转到一个外部网站）、打开详细信息页面，或者打开一个完全独立的页面进行操作。

    你需要设置页面跳转和参数：

    页面跳转：您需要选择目标页面或输入页面链接。

    参数和值：您可以传递一些参数到目标页面，例如查询字段、表单数据或动态生成的内容。这些参数将作为目标页面的输入，用于页面的初始化或后续操作。

    示例：如果您要打开一个用户详情页面，可以设置目标页面为details.sdv，并通过参数传递用户ID（例如参数名为userId参数值为12345），以便在新窗口中加载特定用户的详细信息。

  • 当前窗口打开：该操作会在当前的窗口中加载目标页面。这种方式通常用于在同一窗口内进行页面跳转，用户不需要离开当前的窗口。

    你需要设置页面跳转和参数：

    页面跳转：您需要选择目标页面或输入页面链接。

    参数和值：您可以传递查询参数，例如传递某个用户的ID，或者将表单数据传递给目标页面。

    示例：如果您正在一个产品列表页面上，用户点击某个产品后，您可以使用“当前窗口打开“操作跳转到该产品的详情页，将目标页面设置为productdetails.sdv，并通过参数传递当前选择的产品ID（例如参数名为productId参数值为67890）。

  • 返回/关闭：该操作会使浏览器返回到上一页或关闭当前页面。这个操作通常用于在用户完成某个任务后，让他们回到之前的页面或关闭当前页面，类似于“返回“按钮的功能。

    示例：如果用户在完成某项操作（如提交表单）后，选择返回上一页，您可以触发“返回“操作，直接带领用户回到上一页面。如果用户在一个弹出窗口中填写完信息并点击关闭，您可以使用“关闭”操作来关闭当前窗口并返回到主页面。

参数设置

对于以上每种操作，您可以设置具体的参数，包括：

  • 参数名称：您需要定义每个参数的名称，通常与API接口或外部服务要求的参数名一致。

  • 值：参数的值可以手动输入，也可以动态获取。

    • 手动赋值：直接输入静态的值，用于固定的、不变化的参数。示例：如果您需要调用一个API接口来查询特定的用户信息，您可以选择参数userId，然后手动输入参数值为：12345，表示查询 userId为12345的用户数据。

    • 字段：使用某个数据源中的字段值作为参数。这些字段通常来自于表格、列表、表单、数据对象等，代表某一特定项的数据值。通过“字段”方式，你可以提取并使用这些数据源中的具体字段（如表格中的某一列数据、表单中的某一输入值等）作为操作的参数。

    • 页面参数：从当前页面传递的查询参数中获取值。

    • 成员变量：从当前页面或组件的状态中获取数据，适用于用户交互后动态变化的参数。适用于需要在多个组件之间共享和传递数据的场景。例如需要根据用户在页面上的操作（如填写表单、选择选项）来动态获取和设置参数值时。示例：假设有一个表单组件，用户填写了他们的姓名和电子邮件，您可以使用这些数据作为请求参数。例如，如果用户填写的name是“John”，则可以将 name的值传递给接口，查询相关信息。

    • 动作回调数据：使用前一个操作或事件产生的结果数据作为参数，常用于异步操作或多步骤工作流中。示例：假设在一个登录操作中，用户输入了用户名和密码并提交表单，系统通过验证后返回用户数据（如 userId、userName）。您可以在后续的操作中使用这些返回的回调数据，例如将userId 传递给另一个接口，以便查询该用户的详细信息。

"样式"选项页

“样式“选项页是一个集中管理组件外观的区域，用户可以通过该页面设置组件的颜色、字体、布局、尺寸等多种视觉属性，以便使组件符合需求。

视图设计器中的“样式”选项页包含以下几种常见的样式设置项：

布局样式

宽度和高度：调整组件的宽度和高度，可以是固定值，也可以是百分比、相对单位等，适应不同的布局需求。

内外边距：配置组件的内边距和外边距，调整组件与其周围内容或容器的距离。

对齐方式：设置组件在容器内的水平或垂直对齐方式，如居中、左对齐、右对齐、顶部对齐、底部对齐等。

布局模式：用于决定如何在网页中定位和排列组件。不同的布局模式决定了组件的显示方式、排列规则和空间占用方式。以下是常见布局模式：

  • 内联布局：组件在一行内显示，不占用整行，不支持宽高设置。

  • 块级布局：组件占据整行，支持宽高设置，每个组件独占一行。

  • 内联块布局：组件在一行内显示，支持设置宽高，兼具内联和块级组件的特性。

  • 弹性布局：一个强大的布局方式，允许子组件根据容器的空间自动调整布局，支持水平或垂直对齐，适合复杂的响应式设计。

隐藏：设置某个组件在页面中不可见或不占用空间。

文字样式

字号：设置字体的大小（px）。

字重：调整文字的粗细。

文字颜色：设置文字的颜色。

字体类型：选择字体样式。

文字对齐：设置文本的对齐方式（如左对齐、居中、右对齐等）。

行高：调整文字的行高（行间距）。

背景样式

背景色：设置组件的背景色。

背景图片：可以上传或选择背景图片，作为组件的背景。

透明度：设置组件的透明度。

位置样式

定位：设置一个组件在页面上的位置，通过不同的定位方式（如无定位、相对定位、绝对定位、固定定位、粘性定位）来指定组件的显示位置和行为。

  • 无定位：组件按照文档流默认排列，不受 top、left、right、bottom 等属性影响。

  • 相对定位：组件相对于其原始位置进行偏移，仍占据原位置。

  • 绝对定位：组件相对于最近的定位祖先组件定位，脱离文档流。

  • 固定定位：组件相对于浏览器窗口定位，滚动页面时保持固定位置。

  • 粘性定位：组件在滚动到指定位置时变为固定定位，滚动时会“粘”在视口的指定位置。

溢出：决定当组件内容超出其定义的区域时的处理方式，可以设置为可见、隐藏、滚动或自动调整显示。

  • 全向：控制组件内容溢出的方式，适用于所有方向。

  • 横向：控制组件内容在水平方向上的溢出。

  • 纵向：控制组件内容在垂直方向上的溢出。

  • 可见：默认值，溢出的内容会显示出来。

  • 隐藏：溢出的内容会被裁剪并隐藏，不显示。

  • 滚动：即使内容没有溢出，也显示滚动条;如果内容溢出，显示滚动条以便滚动查看。

  • 自动：只有在内容溢出时，才会显示滚动条。

层级：控制一个组件在多个组件或组件之间的显示顺序，值越大的组件会覆盖值较小的组件。

浮动：控制组件如何在父容器内浮动，与其他组件或组件的位置关系，组件可以左浮动、右浮动，或不浮动，影响其他组件的布局。

  • 不浮动：组件不浮动，按照正常文档流排列。

  • 左浮动：组件向左浮动，其他组件围绕其右侧排列。

  • 右浮动：组件向右浮动，其他组件围绕其左侧排列。

边框样式

边框设置：为组件设置边框的宽度、颜色、样式（实线、虚线、点线等）、圆角（如设置圆角半径）、阴影（如经典、扁平、立体）等。