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>查看此版本的详细变更列表，了解具体哪些内容会受到影响。
• 在门户主题编辑器中，选择白色或非常浅的颜色作为“次要颜色”：次要颜色用于导航元素，这些元素在白色背景下将难以看清。我们建议选择一种无障碍的副色，然后在特定情况下使用自定义 scss 覆盖该颜色（如有必要）。
• 内嵌链接已设置样式：链接样式现在更易于访问。请参阅下方的变更，了解它可能会如何与您现有的样式互动。
• 首页视图卡的内容区域上的 2 像素底部边框已通过 CSS 替换样式设置或隐藏： 此边框已从 <mat-card-content> 移至 <mat-card-actions> 上的顶部边框。

详细变更摘要

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

门户网站范围内的更改

下面总结了门户网站范围内的变更。

• 以下变量不再使用：
  • $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>
• 列表：
  • “我的应用”现在是 <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 表
• 回调网址输入已移至新部分
• “保存”按钮现在使用 mat-raised-button 样式和主色背景
• 表格现在封装在具有 .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. 对于 <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。此列表主要供用户检查其支持服务工单中的问题是否已修复，并非旨在为所有用户提供详细信息。

已知问题

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