20.07.27 - Apigee Edge 集成门户版本说明

<ph type="x-smartling-placeholder"></ph> 您正在查看 Apigee Edge 文档。
转到 Apigee X 文档。 信息

7 月 27 日（星期一），我们将开始发布新版 Apigee Edge 集成门户。

新功能和增强功能

本部分介绍此版本中的新功能和增强功能。

改进了无障碍功能和响应速度

下面列出了此版本中实现的无障碍功能和响应速度方面的改进。

  • 键盘导航：现在可以使用键盘浏览页眉和页脚导航栏、SmartDocs 侧边导航栏、“应用”列表、“App View”和 API 卡片。
  • 焦点管理 ：使用标题导航栏和 SmartDocs 侧边导航栏进行导航时，可将焦点移至页面上完成导航操作后的第一个 <H1>。
  • 实时区域：现在，由文本过滤产生的 API 列表变更会向使用屏幕阅读器的用户报告。
  • HTML 标题的语义用法：现在，所有文本都包含在语义上合适的 HTML 标记中。整个门户现在都使用恰当的标题结构。
  • <H1> 的单一用法：每个页面现在只有一个 <H1>，以便屏幕阅读器轻松识别最有用的页面内容说明。
  • 样式大小写：现在，仅在 CSS（而不是实际文本）中使用全大写作为视觉强调效果。
  • DOM 的逻辑顺序：“创建和编辑应用”页面上的操作按钮已移至 DOM 中表单元素的下方，以便在表单互动完成后按逻辑顺序激活这些按钮。
  • 视觉元素的文本描述：标签、替代文本和按钮文本的用法得到了改进，所有这些都改善了屏幕阅读器的导航体验。
  • 色彩对比度：在整个产品中，我们提高了色彩对比度，以满足 WCAG AA 对比度要求。API 列表中的 API 标题已移至图片下方，以避免色彩对比度不足。
  • 表单验证：在“创建和修改应用”页面上，表单提交按钮不再处于停用状态，可以激活以验证表单。“创建和修改应用”页面上经过验证的表单字段现在包含验证错误的文字说明。
  • 响应速度：现在，除了 SmartDocs 之外，所有页面都设置了宽度上限。SmartDocs 导航功能现在可在较窄的手机尺寸屏幕上正常运行。“Create and Edit App”页面现在对窄屏幕的响应速度更快。

可能会影响门户的 DOM 更改

在以下情况下，尤其要考虑：

  • 导航栏（页眉和页脚）和页面标题已通过 CSS 覆盖设置样式（或隐藏）：现在，网页内容具有最大宽度。为了将导航栏和页面标头扩展到浏览器窗口的边缘，Apigee 设置了 :before 伪元素的样式。如需了解详情，请参阅替换导航栏和页面标题的主要颜色。
  • 有些页面元素的背景延伸到了浏览器窗口的边缘（全屏背景图片除外）：我们已限制网页内容的最大宽度，以提高响应速度，而这可能会限制自定义页面中之前采用全宽面板的所有尺寸。如需详细了解如何使用新的最大宽度设置，请参阅在门户页面中创建全宽面板。
  • 使用 CSS 选择器定位特定的 HTML 标题级别，以修改文本样式：应用于特定内容的标题级别发生了变化。例如：<H1> → <H2> 查看此发布版本的详细更改列表，准确了解受影响的内容。
  • 选择白色或非常浅的颜色作为“次要颜色”在门户主题编辑器中：次要颜色用于导航元素在白色背景下很难看清。我们建议您选择一种无障碍的次要颜色，然后根据需要在特定情况下使用自定义 scss 替换该颜色。
  • 文本内链接样式已调整：现在，链接样式更易于访问。请查看以下更改，了解它可能会如何与现有样式交互。
  • “首页视图”卡片的内容区域下 2 像素的边框底部已通过 CSS 覆盖设置样式或隐藏 ：此边框已从 <mat-card-content> 移至 <mat-card-actions> 的顶部边框。

详细变更摘要

以下各部分按类别总结了此版本中已实现的详细更改。

门户级变更

下面总结了整个门户所做的更改。

  • 以下变量已不再使用： <ph type="x-smartling-placeholder">
      </ph>
    • $layout-horizontal-padding
    • $layout-main-content-horiz-padding
    • $layout-header-horiz-padding
    • $layout-context-bar-horiz-padding
  • 一些新变量可用于控制主内容区域的最大宽度和主内容区域的最小水平内边距： <ph type="x-smartling-placeholder">
      </ph>
    • $layout-main-content-max-width
    • $layout-horizontal-min-padding

主导航栏变化

下面总结了对主导航栏的更改。

  • 现在，对于桌面设备和移动设备屏幕尺寸，<img> 徽标现在都封装在 <a> 中
  • 用户下拉按钮现在是 <button>，而不是 <a>

现在，文本中的标准链接 <a> 会默认带有下划线，悬停时还有背景颜色（根据主题设置“次要颜色”）显示

404 页面更改

下面总结了对 404 页面所做的更改。

  • “立即登录”现价 <H2>，原价 <H1>
  • 说明文字现为“<H2>”，而非“<H1>”

API 页面

下面按类别汇总了对 API 页面的更改。

  • API 搜索/过滤器输入卡片： <ph type="x-smartling-placeholder">
      </ph>
    • <mat-card-content class="mat-card-content"> 现在会封装搜索 API 卡片标题和输入
    • <H2> 现在使用 class="mat-subheading-1"，而不是 class="api-doc-filter-title"
    • <mat-form-field>现在使用appearance="outline"
    • 在 <mat-form-field> 输入内容前面添加了一个搜索图标："<mat-icon matPrefix>search</mat-icon>"
    • Aria 标签和控件引用已添加到输入中
  • API 列表消息为空： <ph type="x-smartling-placeholder">
      </ph>
    • “未找到任何 API”现价 <H2>，原价 <H1>
    • 说明现在是 <H3>，而不是 <H2>
  • API 卡片列表：

    “没有与您的搜索条件相符的 API”现价 <H2>，原价 <H1>

  • API 卡片： <ph type="x-smartling-placeholder">
      </ph>
    • 已移除“>div class="api-doc-card-content-image-gradient"></div>”
    • API 标题已从包含 <div> 的图片中移出，并移入图片 <div> 后面的 <div class="api-doc-card-content-title"></div>
    • API 名称现在为 <H2>，而不是 <H1>

应用列表：

  • 空白状态： <ph type="x-smartling-placeholder">
      </ph>
    • “开始使用”现价 <H2>，原价 <H1>
    • 空状态指南现在为 <H3>，而不是 <H2>
  • 列表： <ph type="x-smartling-placeholder">
      </ph>
    • “我的应用”现价 <H2>，原价 <H1>
    • <mat-row> 现已在 <a> 中扭曲

创建和修改应用页面

下面总结了对“创建和修改应用”页面的更改。

  • <div class="app-buttons"> 已移至 <form> 的末尾并替换为 <div class="form-buttons-sticky-container">
  • 类 .app-layout-section 的所有用法已更改为 .details-layout-section
  • 类 .app-layout-section-title 的所有用法已更改为 .details-layout-section-title
  • 所有版块标题现在均为 <H2>，而不是 <div>
  • 类 .app-layout-section-content 的所有用法已更改为 .details-layout-section-content
  • API 列表不再是带有切换开关的 API 卡片列表（类似于 API 列表）。而是 API 表格
  • 回调网址输入字段已移至新部分
  • “保存”按钮现在使用垫片按钮样式和主色背景
  • 表现在封装在类为 .app-table-wrapper 的 <div> 中
  • 表格标题现在使用 <thead> 封装容器
  • 表格正文现在使用 <tbody> 封装容器
  • [style.width] 不再用于设置表格的列宽
  • 现在，表中的所有 <a> 标记都使用 <button

小组列表

下面总结了对“小组”列表的更改。

  • 空白状态： <ph type="x-smartling-placeholder">
      </ph>
    • “开始使用”现价 <H2>，原价 <H1>
    • “创建一个团队来管理共享的应用所有权”现价 <H3>，原价 <H2>
  • 列表：

    “小组”商品名现在是 <H2>，而不是 <H1>

创建和修改团队页面

下面总结了对“创建和修改小组”页面所做的更改。

  • 在 <form> 上，.teams-form 类已被 .details-form 取代
  • <div class="teams-buttons"> 已移至 <form> 的末尾，并替换为 <div class="form-buttons-sticky-container">
  • 类 .teams-layout-section 的所有用法已更改为 .details-layout-section
  • 类 .teams-layout-section-title 的所有用法已更改为 .details-layout-section-title
  • 类 .teams-layout-section-content 的所有用法已更改为 .details-layout-section-content
  • 已添加<table class="team-apps">周边的<div class="team-apps-container">

SmartDocs

下面总结了对 SmartDocs 界面的更改。

  • 侧边导航栏： <ph type="x-smartling-placeholder">
      </ph>
    • 侧边导航栏已使用 Angular-Material 组件完全重写
    • 侧边导航栏标题现为 <H2>，而非 <div>
    • 导航项现在使用门户的默认文本颜色，而不是门户主题编辑器的“次要颜色”
    • 现在，侧边导航栏中的选定项、聚焦项和悬停项会使用门户主题编辑器的深色和浅色变体。 “次要颜色”分别针对文本和背景
  • 内容：
    • 许多子标题，如“路径参数”和“标头参数”现在的价格为 <H2>，而非 <H3>
    • 概览页面上的架构实体现在为 <H3>=>（而非 <H2>）

向现有首页添加无障碍功能改进

如果您有退出门户，则需要修改首页，才能利用针对可导航卡片的全新无障碍功能改进，如下所述：

  1. 从 <mat-card> 容器中移除 href=""。
  2. 为 <mat-card-header> 中的卡片标题使用 <H2>（而非 <H1>）。
  3. 在卡片标题 <h2> 内，将文本封装在 <a class="navigable-content" href="href-name"> 中，并将 href-name 设置为卡片导航的相应值。

或者，您也可以使用以下卡片模板：


<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

替换导航栏和页面标题的主要颜色

扩展导航栏和页面标题 到浏览器窗口边缘，请使用高级主题编辑器为导航栏和页面标头添加自定义样式，类似于下面针对标题导航栏的样式：


// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000; // background color for header navigation bar
  }
}

更新应用 API 管理过程

在集成门户上管理应用内 API 的用户互动方式已发生变化。 具体而言，在管理应用时，用户必须点击“API”部分中的 启用图标 或 停用图标（而非切换开关），以启用或停用应用对 API 的访问权限。

更新门户上所有介绍如何在应用页面上管理 API 的流程（如适用）。如需了解详情，请参阅 管理应用中的 API。

已修复 Bug

此版本中修复了以下 Bug。此列表主要供用户检查其支持服务工单中的问题是否已修复，并非旨在为所有用户提供详细信息。

问题 ID 组件名称 说明
161269688 集成式门户

Apigee Hybrid 中的资源缩略图渲染方式不正确

现在，缩略图可正确显示在“素材资源”页面上。

161295683 集成式门户

服务器在未设置说明的情况下发生故障

现在，如果未为某个应用定义说明（可选字段），则可以成功创建应用。

160898967 集成式门户

门户着陆页无法正常滚动

门户着陆页现在可滚动了。
160613314、
159197760、
158643196、
158069283、
158069066、
140154942 		集成式门户

其他安全修复程序
158593496 集成式门户

V1 门户中的开发者应用创建失败

修复了导致开发者无法在 V1 门户上创建应用的问题。

158318079 集成式门户

无法在开发者门户中添加或修改回调网址

过去，导致门户用户无法在 API 页面上添加或修改回调网址的问题现已修复。
157902256 集成式门户

发布内容可以覆盖“页面详情”页面上的页面名称更新

过去，在发布门户时，由于竞态条件而导致页面名称更新被覆盖。这一问题现已修复。

138993728 集成式门户

开发者计划的电子邮件排序和搜索功能无法正常运行

现在可以按预期对消费者用户账号进行搜索和排序。

已知问题

如需查看集成式门户的已知问题列表，请参阅集成式门户的已知问题。