AntDesignX.Blazor 1.0.0

AntDesign.X.Blazor

AntDesign.X.Blazor 是 Ant Design X 在 Blazor 生态中的实现，面向 AI 对话、工作台和内容生成类产品。项目目标是在 纯 Blazor + AntDesign.Blazor 中复现 Ant Design X 的 AI 产品语义，并提供一套可以直接运行的 demo 站，让用户能逐个查看组件、交互和代码写法。

官方 Ant Design X 是面向 React 生态的 AI 组件库，除 UI 组件外也提供接入 AI 服务的 API 方案。本项目对照它的组件矩阵与设计网站，将 Bubble、Conversations、Sender、Prompts、ThoughtChain、Think、Sources、Mermaid、Markdown、XProvider 等能力映射到 Blazor。

示例站的 About 页面同步展示 README 摘要、源码地址和企业微信群二维码，适合直接给客户介绍当前项目。

你会看到什么

• 首页完整 AI 工作台：对话列表、欢迎页、提示集、消息流、附件和输入框。
• 组件总览与单项演示：按 Ant Design X 分类展示每个 Blazor 组件。
• About 项目介绍：README 摘要、源码地址、企业微信群二维码。
• 主题与内容渲染：深浅色主题、Markdown、代码高亮、Mermaid、通知和文件卡片。

项目原则

1. 协同 AntDesign.Blazor：基础视觉和通用控件继续使用 AntDesign.Blazor，AntDesign.X.Blazor 只补齐 AI 对话、输入、来源、思考链、文件卡片等 X 语义组件。
2. 保持原汁原味：组件命名、交互结构和视觉层级尽量贴近 Ant Design X；Blazor API 使用 C# 事件、RenderFragment、强类型模型表达。
3. 纯 Blazor：不引入 React / Vue / Svelte 工程。Mermaid 仅作为浏览器端图渲染库可选接入。
4. 样式隔离：CSS 类统一使用 antdx- 前缀，降低对宿主应用的污染。
5. 示例即文档：examples/AntDesign.X.Blazor.Demo 是可演示应用，也是组件使用手册。

当前已实现

• 显示：XBubble、XBubbleList、XWelcome、XThoughtChain、XThink、XSources、XFolder
• 输入：XSender、XAttachments、XFileCard、XSuggestion、XPrompts
• 操作与反馈：XActions、XNotification
• 内容渲染：XMarkdown、XCodeHighlighter、XMermaid
• SDK：IXRequestClient、XStreamReader、XChatStore、XAgentStore
• 全局门面：XProvider、浅色/深色主题 token、antdx- 样式令牌
• 示例应用：完整 AI 工作台、组件分区展示、代码片段展示、附件选择、通知、暗色主题切换与 mock streaming 闭环

源码地址

• GitHub：https://github.com/IoTSharp/AntDesignXBlazor
• Gitee：https://gitee.com/IoTSharp/AntDesignXBlazor

企业微信群

<p align="center"> <img src="https://raw.githubusercontent.com/IoTSharp/AntDesignXBlazor/main/examples/AntDesign.X.Blazor.Demo/wwwroot/enterprise-wechat-qr.png" alt="企业微信群二维码" width="240" /> </p>

目录结构

external/AntDesignXBlazor/
  src/AntDesign.X.Blazor/
    Components/
    Models/
    Utilities/
    wwwroot/css/antdesign-x.css
    wwwroot/js/antdesign-x-module.js
  examples/AntDesign.X.Blazor.Demo/
  ROADMAP.md
  README.md

在 Blazor 中使用

NuGet 包发布后可以直接安装：

dotnet add package AntDesign.X.Blazor

本仓库内本地联调也可以使用项目引用：

<ProjectReference Include="external/AntDesignXBlazor/src/AntDesign.X.Blazor/AntDesign.X.Blazor.csproj" />

<link rel="stylesheet" href="_content/AntDesign/css/ant-design-blazor.css" />
<link rel="stylesheet" href="_content/AntDesign.X.Blazor/css/antdesign-x.css" />
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>

using AntDesign.X;

builder.Services.AddAntDesign();
builder.Services.AddAntDesignX();

如需 XMermaid：

<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>

@using AntDesign.X
@using AntDesign.X.Components

<XProvider Theme="light">
    <XBubble Placement="XBubblePlacement.Start"
             AvatarIcon="robot"
             Header="Assistant"
             Content="Hello from **Ant Design X Blazor**"
             Markdown="true" />
</XProvider>

完整输入闭环

<XBubbleList Items="@messages" OnAction="@HandleAction" />

<XSender @bind-Value="@draft"
         Attachments="@attachments"
         Actions="@senderActions"
         OnSubmit="@Submit"
         OnFilesSelected="@AddFiles"
         OnAttachmentRemove="@RemoveAttachment" />

private string? draft;
private readonly List<XAttachmentItem> attachments = [];

private Task Submit(XSenderRequest request)
{
    messages.Add(new XBubbleItem
    {
        Role = "You",
        Placement = XBubblePlacement.End,
        AvatarIcon = "user",
        Content = request.Text,
        Attachments = request.Attachments
    });

    draft = string.Empty;
    return Task.CompletedTask;
}

SDK 场景下，示例应用会把这类状态放进 XChatStore / XAgentStore，并通过 mock streaming service 演示流式更新、重试和中断。

示例应用

示例应用位于：

examples/AntDesign.X.Blazor.Demo/

运行方式：

dotnet run --project external/AntDesignXBlazor/examples/AntDesign.X.Blazor.Demo/AntDesign.X.Blazor.Demo.csproj

在 Camel.NET 仓库协作规则下，AI 默认不主动执行本机 build/run；用户可在需要时自行运行上述示例命令。子模块本身是独立 Blazor 组件库，不改变 Camel.NET 后端 Docker Compose 验收基线。

与官方 Ant Design X 的映射

React Hooks → C# Store API 对照

实战示例参见 examples/AntDesign.X.Blazor.Demo/Components/Pages/Components/LiveChatDemo.razor（DeepSeek SSE 接入）。

许可证

MIT