SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场Fluent UI Integration Patterns

Fluent UI Integration Patterns

前端与建站

查看项目

更新于 10-21 23:11

技能介绍

用途

Fluent UI Integration Patterns 用于指导开发者将微软 Fluent UI 设计系统集成到 React 独立应用之外的多种 M365 宿主环境中，确保从身份验证页面到 Office 加载项、再到 SharePoint 应用之间保持一致的视觉与交互体验。

主要能力

资料覆盖以下集成面：

  • Azure AD B2C：使用自定义 HTML 模板与 Fluent 设计令牌，为登录、注册、资料编辑、密码重置等身份验证流程提供品牌化界面。
  • Office 加载项：在 Excel、Word、Outlook、PowerPoint 的任务窗格、内容窗格和对话框中嵌入 Fluent React 组件。
  • SharePoint / M365：在 SPFx Web 部件中使用 Fluent v9，并将 SharePoint 主题令牌桥接到 Fluent 主题。
  • 导航模式：使用 Nav、Drawer 和 NavDrawer 构建带响应式侧边栏的应用外壳。

使用方式

Azure AD B2C UI 自定义

B2C 页面从支持 CORS 的端点（Azure Blob Storage 或 CDN）加载自定义 HTML 模板，模板中包含 <div id="api"> 元素，B2C 会向其中注入表单控件。由于 B2C 页面运行在 React 应用之外，无法使用 FluentProvider，需将 Fluent 设计令牌值映射为 CSS 自定义属性，再应用到 B2C 注入的元素上。资料给出了完整的 HTML 模板示例、:root 令牌变量定义，以及针对文本输入框和主按钮的样式示例。

B2C 支持多种页面布局模板，常用类型包括：统一登录/注册（selfAsserted）、仅登录（signIn）、仅注册（localAccountSignUp）、密码重置（selfAsserted）、MFA（multiFactor）、错误页（exception）。对于高级场景，可通过自定义策略（Identity Experience Framework）的 ContentDefinition 完全控制页面加载。

Office 加载项

可使用 Yo Office 生成器搭建预配置 Fluent UI 的 Office 加载项项目：

npm install -g yo generator-office
yo office --projectType taskpane --framework react --host excel --name my-excel-addin

--host 可选值：excel、word、outlook、powerpoint、onenote。

任务窗格有严格的尺寸约束，各宿主最小宽度均为 320px，默认宽度 350px（Outlook 撰写模式为 396px），最大宽度约为窗口的 50%，最小高度 150px。设计上建议在 320px 下使用单列布局、紧凑组件尺寸（size="small"）、避免横向滚动、表单字段垂直堆叠，次要内容使用 Drawer 或 Dialog 而非并排面板。

在任务窗格入口点使用 FluentProvider 作为根包装器，并可通过 Office.context.officeTheme 检测 Office 主题（根据背景色亮度判断明暗），选择 webLightTheme 或 webDarkTheme。Fluent 组件通过事件处理器触发 Office.js API 调用，资料给出了向 Excel 选中单元格写入值的完整示例。

SharePoint / M365 集成

SPFx 1.18+ 自带 React 17 并支持 Fluent v9 组件，安装命令为：

npm install @fluentui/react-components @fluentui/react-icons

SPFx Web 部件渲染在无 shadow 的 DOM 容器中，需将 Web 部件根节点包裹在 FluentProvider 中，并映射 SharePoint 主题。资料提供了 mapSharePointTheme 函数示例，从 SharePoint 主色构建 BrandVariants 品牌色阶，并根据 spTheme.isInverted 选择 createDarkTheme 或 createLightTheme。

SharePoint 主题令牌到 Fluent 令牌的关键映射包括：palette.themePrimary → colorBrandBackground、palette.neutralPrimary → colorNeutralForeground1、palette.neutralLight → colorNeutralBackground3、palette.white → colorNeutralBackground1、semanticColors.link → colorBrandForegroundLink、semanticColors.errorText → colorPaletteRedForeground1 等。

若要在 SharePoint 中嵌入整页 Fluent 应用，可在 Web 部件清单中设置 "supportsFullBleed": true 以启用全宽渲染，移除 Web 部件周围的 SharePoint 外壳。

导航模式

  • Nav 组件：渲染带层级项、选中跟踪和分类分组的垂直导航列表，来自 @fluentui/react-nav-preview。
  • Drawer 组件：从屏幕边缘滑入的面板，支持 inline（推动内容）和 overlay（覆盖内容）模式，来自 @fluentui/react-drawer。
  • NavDrawer 模式：将 Nav 组合进 Drawer，形成完整侧边栏导航体验，是 M365 风格应用外壳的推荐模式。

适用场景

  • 需要为 Azure AD B2C 身份验证页面提供与主应用一致的 Fluent 品牌体验。
  • 开发 Excel、Word、Outlook、PowerPoint 的 Office 加载项并希望 UI 贴近 Office 原生风格。
  • 在 SharePoint Online 中构建使用 Fluent v9 并跟随 SharePoint 主题的 SPFx Web 部件。
  • 构建带响应式侧边栏导航的 M365 风格应用外壳。

限制

资料未提供关于收费、价格、平台支持范围或性能效果的具体说明。B2C 页面无法使用 FluentProvider，只能通过 CSS 自定义属性映射令牌；任务窗格受宿主尺寸约束限制；SPFx 集成依赖 SPFx 1.18+ 与 React 17。