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

您正在查看的是 Apigee Edge 文档。
转到 Apigee X 文档。 信息

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

新功能和增强功能

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

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

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

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

可能影响门户的 DOM 更改

在以下情况下，请特别注意：

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

详细更改摘要

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

门户范围内的更改

下文汇总了门户范围内的更改。

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

主要导航栏变更

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

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

现在，文本中的标准链接 <a> 现在默认带有下划线，并在悬停时显示背景颜色（基于“辅助颜色”主题设置）

404 页面更改

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

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

API 页面

下面按类别总结了对 API 页面所做的更改。

  • API 搜索/过滤器输入卡片：
    • <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 列表消息为空：
    • “未找到 API”现为 <H2>，而不是 <H1>
    • 现在，说明为 <H3>，而不是 <H2>
  • API 卡片列表：

    “没有与您的搜索条件相符的 API”现已改为 <H2>，而不是 <H1>

  • API 卡片：
    • 移除了 >div class="api-doc-card-content-image-gradient"></div>
    • API 标题已从包含 <div> 的图片中移出，移至 <div> 图片后面的 <div class="api-doc-card-content-title"></div>
    • API 标题现为 <H2>，而不是 <H1>

应用列表：

  • 空状态：
    • “开始使用”现为“<H2>”，原为“<H1>”
    • 空状态指导现在为 <H3>，而不是 <H2>
  • 列表：
    • “My Apps”现为 <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

团队列表

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

  • 空状态：
    • “开始使用”现为“<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 界面更改总结如下。

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

改进现有首页的无障碍功能

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

  1. 从 <mat-card> 容器中移除 href=""。
  2. 使用 <H2>（而不是 <H1>）作为 <mat-card-header> 中的卡片标题。
  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 集成式门户

开发者计划的电子邮件分类和搜索功能无法正常使用

现在，消费者用户帐号的搜索和排序功能可按预期运行。

已知问题

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