NextUI 组件全量版图审计 (Fluent UI v4.13.2 对齐)

本文档作为 NextUI 设计系统的“全量施工蓝图”，实时对齐 Microsoft Fluent UI Blazor v4.13.2 官方组件库。所有组件分为已实现 [x]、开发中 [-] 和待开发 [ ] 状态。

核心原则

  1. 规格先行：在编写代码前，必须先在 docs/components/Sx[Name].md 中完成对齐官方 v4.13.2 的饱和式规格审计。
  2. 状态透明：所有文档必须明确标注哪些 API 已在 NextUI 中实现，哪些还是空白。

1. 基础组件 (Base & Interaction)

状态 组件名 官方对应 描述
[x] SxButton FluentButton 标准按钮
[x] SxSplitButton FluentSplitButton 拆分按钮
[x] SxToggleButton FluentToggleButton 切换按钮
[x] SxAnchor FluentAnchor 超链接按钮
[ ] SxMenu FluentMenu 基础菜单容器
[ ] SxMenuItem FluentMenuItem 菜单项
[ ] SxMenuButton FluentMenuButton 菜单按钮复合件
[ ] SxContextMenu FluentContextMenu 右键菜单
[ ] SxSortableList FluentSortableList 可排序列表

2. 表单与输入 (Forms & Inputs)

状态 组件名 官方对应 描述
[x] SxInput FluentTextField 单行文本框
[x] SxTextArea FluentTextArea 多行文本域
[x] SxNumberInput FluentNumberField 数字输入框
[x] SxCheckbox FluentCheckbox 复选框
[x] SxRadioGroup FluentRadioGroup 单选框组
[x] SxSelect FluentSelect 下拉选择器
[ ] SxCombobox FluentCombobox 组合框 (可输入选择)
[ ] SxListbox FluentListbox 列表选择框
[x] SxAutoComplete FluentAutocomplete 自动完成输入
[ ] SxSearch FluentSearch [审计补全] 原生搜索框
[x] SxSwitch FluentSwitch 开关
[x] SxSlider FluentSlider 滑块
[x] SxRating FluentRating 评分
[x] SxDatePicker FluentDatePicker 日期选择
[x] SxTimePicker FluentTimePicker 时间选择
[ ] SxCalendar FluentCalendar 日历面板
[x] SxColorPicker FluentColorPicker 颜色选择器
[x] SxFileUpload FluentInputFile 文件上传

3. 数据展示 (Data Display)

状态 组件名 官方对应 描述
[x] SxBadge FluentBadge 徽标
[ ] SxPresenceBadge FluentPresenceBadge 在线状态徽标
[ ] SxCounterBadge FluentCounterBadge 计数徽标
[x] SxTag FluentBadge (Style) 标签
[x] SxAvatar FluentAvatar 头像
[ ] SxPersona FluentPersona 人物卡片
[ ] SxDataGrid FluentDataGrid [核心待办] 工业级数据表格
[x] SxTable FluentDataGrid (Lite) 简化版数据表格
[x] SxTree FluentTreeView 树形列表
[x] SxList FluentList 基础列表
[x] SxProgress FluentProgress 进度条
[x] SxProgressRing FluentProgressRing 环形进度
[x] SxSkeleton FluentSkeleton 骨架屏
[x] SxIcon FluentIcon 图标封装
[ ] SxTooltip FluentTooltip 文字提示
[ ] SxHighlighter FluentHighlighter [审计补全] 文本高亮

4. 布局与架构 (Layout & Structure)

状态 组件名 官方对应 描述
[x] SxStack FluentStack 堆叠布局
[x] SxGrid FluentGrid 网格系统
[x] SxCard FluentCard 卡片容器
[x] SxDivider FluentDivider 分隔线
[x] SxAccordion FluentAccordion 折叠面板
[x] SxTabs FluentTabs 标签页
[x] SxBreadcrumb FluentBreadcrumb 面板屑
[x] SxPagination FluentPagination 分页器
[x] SxSplitter FluentSplitter 分割器
[ ] SxHorizontalScroll FluentHorizontalScroll [审计补全] 横向滚动容器
[ ] SxOverflow FluentOverflow [审计补全] 溢出收纳处理

5. 反馈与引导 (Feedback)

状态 组件名 官方对应 描述
[x] SxDialog FluentDialog 对话框
[x] SxDrawer FluentDrawer 抽屉
[x] SxToast FluentToast 全局通知
[x] SxMessageBar FluentMessageBar 信息栏
[ ] SxTeachingBubble FluentTeachingBubble 教学气泡
[ ] SxPopover FluentPopover [审计补全] 弹出框容器
[ ] SxAnchoredRegion FluentAnchoredRegion [审计补全] 锚定定位区域
[ ] SxAnimate FluentAnimate [审计补全] 动画控制器

6. NextUI 扩展组件 (NextUI Extensions)

状态 组件名 描述
[x] SxDateRangePicker 日期范围选择 (复合组件)
[x] SxTimeRangePicker 时间范围选择 (复合组件)
[x] SxDateTimePicker 日期时间一体化选择
[x] SxQRCode 二维码生成
[x] SxSecurityCode 验证码输入框
[x] SxMarkdownViewer Markdown 渲染器 (基于 Markdig)
[ ] SxMarkdownEditor Markdown 编辑器 (带预览)
[ ] SxHtmlEditor 富文本编辑器
[x] SxCodeSnippet 代码片段展示 (带语法高亮)
[x] SxPropertyInspector 工业级属性检查面板
[x] SxAppShell 响应式应用脚手架外壳
[x] SxChart ECharts 封装基类
[x] SxBarChart / SxLineChart 专用图表封装
[ ] SxEmoji 表情符号封装
[ ] SxPullToRefresh 下拉刷新容器