用途
Fluent 2 是微软开源的设计系统，为 Microsoft 365、Teams、Copilot、Windows 以及更广泛的微软生态提供统一的设计语言。它面向 Web、iOS 和 Android 提供平台特定实现，并通过设计令牌抽象平台差异。该技能作为核心知识库，用于指导基于 Fluent 2 的设计与开发工作。
主要能力
设计令牌
设计令牌是设计系统的原子值，即颜色、间距、排版、阴影、边框圆角和动效的命名常量。Fluent 2 采用三层令牌架构：
- 全局令牌：原始调色板值（如 grey10、brandPrimary），不在组件中直接使用。
- 别名令牌：语义引用（如 colorNeutralBackground1），可感知主题。
- 组件令牌：组件特定的覆盖值（较少使用）。
间距令牌以 4px 为基础单位，提供从 0px 到 32px 的完整梯度（如 spacingHorizontalXXS 为 2px、spacingHorizontalM 为 12px、spacingHorizontalXXXL 为 32px）。
边框圆角令牌包括 borderRadiusNone（0px）、borderRadiusSmall（2px）、borderRadiusMedium（4px）、borderRadiusLarge（6px）、borderRadiusXLarge（8px）和 borderRadiusCircular（10000px）。
阴影/高度令牌包括 shadow2（卡片静止时的轻微抬升）、shadow4（下拉菜单）、shadow8（弹出框）、shadow16（对话框）、shadow28（教学提示）和 shadow64（最高高度）。
排版令牌使用字体族 'Segoe UI Variable'、'Segoe UI'、system-ui、sans-serif，提供从 fontSizeBase100（10px/14px）到 fontSizeHero1000（68px/92px）的尺寸梯度，字重包括 Regular（400）、Medium（500）、Semibold（600）和 Bold（700）。
动效令牌提供从 durationUltraFast（50ms）到 durationUltraSlow（500ms）的时长梯度。
颜色系统
中性色包括背景（colorNeutralBackground1 至 6、colorSubtleBackground、colorTransparentBackground）、前景（colorNeutralForeground1 至 3、colorNeutralForegroundDisabled）和描边（colorNeutralStroke1、colorNeutralStrokeAccessible、colorNeutralStrokeDisabled）。
品牌色使用由主色生成的 16 级色阶（shade10 至 shade160），可通过 createLightTheme、createDarkTheme 和 BrandVariants 创建明暗主题。
状态色包括成功、警告和危险状态的前景与背景令牌。
布局系统
断点/尺寸类别分为六档：small（320–479px，手机竖屏）、medium（480–639px，手机横屏/小平板）、large（640–1023px，平板）、x-large（1024–1365px，小桌面/笔记本）、xx-large（1366–1919px，桌面）、xxx-large（1920px+，大桌面/超宽屏）。
响应式技术包括重定位、调整尺寸、重排、显示/隐藏和重新架构。触摸目标最小尺寸：iOS 和 Web 为 44×44px，Android 为 48×48px。
组件库
@fluentui/react-components 提供完整的 Fluent UI React v9 组件库，涵盖：
- 操作：Button、CompoundButton、SplitButton、ToggleButton、MenuButton、Link
- 输入：Input、Textarea、Select、Combobox、Dropdown、SearchBox、SpinButton、Slider、Switch、Checkbox、RadioGroup、DatePicker、TimePicker、ColorPicker、Rating
- 布局：Card、Divider、Drawer、Dialog、Accordion、TabList、Toolbar、Breadcrumb
- 数据展示：Avatar、Badge、Tag、DataGrid、Table、Tree、Persona、Text、Label
- 反馈：Toast、MessageBar、ProgressBar、Spinner、Skeleton、Alert
- 导航：Menu、Nav、Overflow
- 浮层：Popover、Tooltip、TeachingPopover、InfoButton
- 媒体：Image
主题
所有 Fluent 组件必须包裹在 FluentProvider 中。内置主题包括 webLightTheme、webDarkTheme、teamsLightTheme、teamsDarkTheme 和 teamsHighContrastTheme，并支持嵌套主题。
无障碍
颜色对比度要求：普通文本 4.5:1，大文本 3:1，非文本 UI 3:1。所有交互元素需有可见的 2px 焦点环，支持键盘导航、屏幕阅读器 ARIA 属性、prefers-reduced-motion 和 Windows 高对比度模式。提供 useArrowNavigationGroup 和 useFocusableGroup 焦点工具。
图标
@fluentui/react-icons 提供 20,000+ 图标，包含 Regular（轮廓）和 Filled 两种风格，尺寸为 16px、20px、24px、28px、32px、48px，默认导出为 20px。可使用 bundleIcon 组合填充与轮廓变体。
使用方式
安装主要包：@fluentui/react-components、@fluentui/react-icons、@fluentui/tokens、@fluentui/react-theme。
主题创建示例：
import { createLightTheme, createDarkTheme, BrandVariants } from '@fluentui/react-components';
const myBrand: BrandVariants = {
10: '#020305', 20: '#111723', 30: '#16212F', 40: '#1B2C3D',
50: '#1F374B', 60: '#24425A', 70: '#284D69', 80: '#2D5979',
90: '#366B8E', 100: '#437DA3', 110: '#548FB7', 120: '#6BA1C9',
130: '#85B3D7', 140: '#A1C5E3', 150: '#BFD7ED', 160: '#DDE9F6',
};
const lightTheme = createLightTheme(myBrand);
const darkTheme = createDarkTheme(myBrand);
FluentProvider 用法：
import { FluentProvider, webLightTheme } from '@fluentui/react-components';
<FluentProvider theme={webLightTheme}>
<App />
</FluentProvider>
图标用法：
import { CalendarRegular, CalendarFilled, bundleIcon } from '@fluentui/react-icons';
const CalendarIcon = bundleIcon(CalendarFilled, CalendarRegular);
适用场景
适用于构建遵循微软 Fluent 2 设计语言的 Web、iOS 和 Android 应用界面，尤其是 Microsoft 365、Teams、Copilot 生态内的产品，以及需要统一设计令牌、主题、无障碍与响应式布局的 React 项目。
限制
资料未提供该技能的收费、价格、平台限制或效果保证等信息。具体组件属性、完整令牌目录、Teams 多界面架构、高级 UI 模式、动效系统深入内容、主题创建演练和响应式布局示例，需参考技能包内的引用文件与示例文件。