视图设计器

视图模板

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

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

  • 主页（Home.sdv）：该页面自动生成，作为应用的入口，提供导航和重要信息的概览。每个项目只能有一个 Home.sdv 文件。
  • 布局（Layout.sdv）：该页面自动生成，用于定义页面的整体结构，提供区域的组织和布局。每个项目只能有一个 Layout.sdv 文件。
  • 详情页面：该模板用于展示单一数据项的详细信息。您可以基于该模板以及实体/查询模型快速创建一个或多个页面（右键点击项目节点，然后选择 添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择 详情页面，然后选择API。）
  • 表单页面：该模板用于数据的输入和提交。您可以基于该模板以及实体/查询模型快速创建一个或多个页面（方法同上，最后一步选择 表单页面，然后选择API）。
  • 表格页面：该模板用于展示和管理列表数据，支持分页、排序和筛选。您可以基于该模板以及实体/查询模型快速创建一个或多个页面（方法同上，最后一步选择 表格页面，然后选择API）。
  • 树表格页面：该模板结合表格和树形结构，用于展示层级关系数据。您可以基于该模板以及实体/查询模型快速创建一个或多个页面（方法同上，最后一步选择 树表格页面，然后选择API）。

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

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

表单页面

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

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

image-20250321134123564

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

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

image-20250325135509492

表格页面

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

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

image-20250321134631565

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

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

image-20250325135757880

树表格页面

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

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

image-20240625165704925

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

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

image-20250325135609861

物料库

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

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

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

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

布局 组件用于定义页面元素的排列方式和容器结构，它们帮助开发者构建页面的骨架结构。布局组件确保页面在不同屏幕尺寸下都能保持良好的视觉效果和用户体验。常见的组件包括：

  • 卡片：通用卡片容器。用于容纳其他组件。
  • 分割线：用于将页面内容分割成多个部分，起到视觉上的区分作用。
  • 弹性布局：灵活排列子组件，适用于简单的对齐和排列需求。
  • 栅格：通过行和列的方式组织页面内容，常用于响应式布局，帮助在不同屏幕大小下自适应排列。
  • 行容器：用于创建水平行布局。拖拽时默认展示为一行两列。
  • 列容器：用于创建垂直列布局。拖拽时默认显示为一列。
  • 视图容器：用于容纳视图等组件，可以设置大小、边距、背景色等属性，帮助组织页面内容。
  • 标签页：用于创建选项卡页面。
  • 间距：用于设置组件之间的间距。
  • 组合：用于表单组件之间紧凑连接切合并边框时。

数据录入 组件用于接收用户输入并存储数据。它们常用于表单页面，帮助用户填写数据并提交。用户可以通过这些组件录入不同类型的数据。常见的组件包括：

  • 表单容器：适用于单个表单，支持数据输入，实时校验和提交。
  • 表单：适用于多个表单。
  • 登录表单：用于用户身份验证的表单。
  • 子表单：嵌套在主表单中的小型表单。
  • 集合表单：由多个表单项组成的数据收集形式。
  • 分步表单：将长表单分为多个步骤进行填写。
  • 表单项：表单中的单个数据输入元素。
  • 文本输入框：接收用户输入的文本数据。
  • 多行文本框：输入多行文本。
  • 数字输入框：输入数字。
  • 搜索输入框：输入搜索关键字。
  • 密码输入框：输入密码。
  • 日期选择框：用于选择日期，通常会有日历视图和日期格式选择功能。
  • 时间选择框：用于选择时间。
  • 日期范围：用于选择日期范围。
  • 时间范围：用于选择时间范围。
  • 时间间隔：用户设置时间间隔。
  • 滑动输入条：活动型输入条，展示当前值和可选范围。
  • 开关：适用于两种状态之间的切换。
  • 单选框组：用户从一组选项中选择一个。
  • 多选框：用户选择一个或多个选项。
  • 多选框组：由多个多选框组成的集合。
  • 下拉选择框：允许用户从预定义的选项列表中选择一个值。
  • 树形选择框：以树形结构展示选项，方便层级选择。
  • 级联选择框：根据前一选项的选择动态更新后续选项。
  • 下拉表格：使用下拉菜单展示表格数据进行选择。
  • 评分：用于输入评分类数据。
  • 图片上传：允许用户上传图片。

数据展示 组件用于展示来自后台或数据库的数据，通常以表格、列表等形式呈现。这些组件使得用户可以查看和管理数据。常见的组件包括：

  • 表格容器：用于承载和布局表格的容器。
  • 表格：以行列形式展示数据的组件。
  • 详情：用于展示单个项目的详细信息。
  • 描述列表：用于展示键值对形式的项目信息列表。
  • 列表：适合展示一组有序或无序的项，每个项可以包含多个属性。
  • 列表项：列表中的单个元素。
  • 列表项元数据：附加在列表项上的额外信息。
  • 轮播图：用于展示自动切换的图片或内容。
  • 标题：页面或组件的主题标识。
  • 文本：用于显示文字内容。
  • 标签：用于显示一个小的、简洁的标识，如数字、状态等。
  • 链接：用户点击后跳转到指定位置的元素。
  • 图片：显示图片内容，支持静态和动态图像展示。
  • 图标：表示特定功能或操作的图形符号。
  • 徽标数：显示特定数量或状态的标识符。
  • 进度条：用于显示任务完成的百分比，适合长时间操作时使用。
  • 时间轴：用于展示按时间顺序排列的事件或过程。
  • 时间轴节点：时间轴中的具体时间点或事件。
  • 日历：用于展示日期和事件安排。
  • 树形控件：以树形结构展示层级关系的数据或选项。

图表 组件用于可视化数据，帮助用户理解和分析复杂的数据趋势。图表可以使数据展示更加直观和易于理解。常见的组件包括：

  • 统计数值：用于展示数据量或数量的数字指标。
  • 折线图：通过连接数据点的线条展示数据随时间或类别变化的趋势。
  • 柱状图：用于展示不同类别的对比数据，适合显示数值分布。
  • 饼图：通过扇形区域展示数据的组成比例，常用于显示百分比。

操作反馈 组件用于向用户反馈操作的结果或当前的系统状态。它们通常用来提示用户是否操作成功，或者告知用户当前系统的处理状态。常见的组件包括：

  • 对话框：用于展示操作反馈或要求用户确认的弹出窗口。
  • 抽屉：从屏幕边缘滑出的侧边栏，用于展示操作反馈或额外内容。
  • 气泡确认框：轻量级的提示框，用于提供简洁的操作确认反馈。
  • 下拉菜单：点击触发后显示选项列表，用于选择操作或反馈。

大纲树

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

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

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

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

与UI设计器实时同步

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

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

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

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

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

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

快速布局

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

UI设计器

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

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

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

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

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

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

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

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

跨平台应用设计 -- 开发者可以通过UI设计器设计一个跨平台的界面，确保同一套界面能够在多个设备和操作系统上正常工作，如桌面端、移动端、平板等。

image-20250321173042977

image-20250321172956449

"属性"选项页

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

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

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

xxxx 小节列举了常见组件（例如按钮、文本框、表单、表格等）的常用属性及使用场景。您可以根据页面布局需求和用户交互场景，灵活调整这些属性来达到预期效果。

"事件"选项页

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

事件类型

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

  • 页面组件

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

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

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

  • 表格容器

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

  • 按钮组件

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

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

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

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

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

  • 轮播图

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

  • 标签页

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

  • 气泡确认框

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

  • 开关、单选框组

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

动作配置

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

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

组件操作

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

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

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

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

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

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

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

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

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

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

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

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

接口操作

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

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

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

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

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

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

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

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

    在选择外部数据源后，您需要指定数据查询条件例如字段匹配、时间范围、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 等属性影响。 · 相对定位：组件相对于其原始位置进行偏移，仍占据原位置。 · 绝对定位：组件相对于最近的定位祖先组件定位，脱离文档流。 · 固定定位：组件相对于浏览器窗口定位，滚动页面时保持固定位置。 · 粘性定位：组件在滚动到指定位置时变为固定定位，滚动时会“粘”在视口的指定位置。

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

· 全向：控制组件内容溢出的方式，适用于所有方向。 · 横向：控制组件内容在水平方向上的溢出。 · 纵向：控制组件内容在垂直方向上的溢出。 · 可见：默认值，溢出的内容会显示出来。 · 隐藏：溢出的内容会被裁剪并隐藏，不显示。 · 滚动：即使内容没有溢出，也显示滚动条;如果内容溢出，显示滚动条以便滚动查看。 · 自动：只有在内容溢出时，才会显示滚动条。

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

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

· 不浮动：组件不浮动，按照正常文档流排列。 · 左浮动：组件向左浮动，其他组件围绕其右侧排列。 · 右浮动：组件向右浮动，其他组件围绕其左侧排列。

边框样式

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