Skip to content

feat(Theme): 新增 Fluent UI 主题 #8344

Description

@h2ls

Is there an existing issue for this?

  • I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

目前 BootstrapBlazor 内置主题(Bootstrap 默认、Motronic 等)风格有限,希望在 Fluent Design 体系的应用(如与 WinUI/Fluent UI Blazor 混合的项目)中,组件库能够提供一套开箱即用的 Fluent UI 风格主题,保持视觉一致性。

Describe the solution you'd like

新增一套完整的 Fluent UI 主题,实现内容包括:

  • 主题样式:新增 fluent.css(约 1870 行),完整覆盖 Fluent UI 设计令牌(圆角、阴影、色彩、间距)与全部组件样式适配,位于 src/BootstrapBlazor/wwwroot/css/
  • 主题页面:演示站点 Theme.razor 页面新增 Fluent UI 主题入口,并提供组件预览墙(component preview wall)便于对比
  • Motronic 主题调整:将 Motronic 由全局样式表改为可选主题,避免默认加载
  • 弹层适配:Popover、Dropdown 等 flyout 浮层适配 Fluent UI 风格
  • ThemeChooser 优化:选择主题后自动关闭面板,并改善移动端行为
  • 文档与测试:新增 Fluent UI parity review 报告(docs/fluentui-parity-review.md)、主题使用文档,以及 Sass 单元测试 FluentThemeTest.cs(约 250 行)做 CSS 变量回归校验

Additional context

实现分支:lee/feat-fluent-ui-theme

相对 main 共 14 个文件变更,+2972/-25 行,主要涉及:

  • src/BootstrapBlazor/wwwroot/css/fluent.css / fluent.min.css(新增)
  • src/BootstrapBlazor.Server/Components/Pages/Theme.razor 及本地化文件(en-US / zh-CN)
  • src/BootstrapBlazor.Server/appsettings.json(主题配置)
  • test/UniTest.Sass/FluentThemeTest.cs(新增)

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions