Known · 元数据驱动的 .NET 全栈框架

说明

面向 AI 对话、客服会话、评论与消息流的气泡展示组件，不依赖任何浏览器 API。Placement 决定归属与对齐：start（默认，靠左、对方 / 助手）与 end（靠右、本人 / 用户），并自动镜像头像位置与元信息排布。Variant 决定底色：soft（浅底，默认）、filled（本人消息的主色实心；用于 start 时自动降为主色浅底以保证可读）、outlined（描边，适合弱化的系统提示）、ghost（无底，正文贴合背景，适合流式续写段落）。正文可用 Text（作为翻译键直接渲染）或 ChildContent 富内容（代码块、图片、卡片等）二选一或叠加。Header / Footer 插槽分别在正文上下加入附加信息与操作区（如来源、复制 / 重新生成按钮）。头像由 Avatar（文字缩写）、AvatarSrc（图片）、AvatarIcon（图标名，不本地化）任一项驱动，ShowAvatar 可强制显隐；Name 与 Time 组成元信息行，其中 Name 走本地化、Time 视为业务数据不本地化。Typing 用三点跳动表达“对方正在输入”，Loading 用骨架占位表达“等待首字返回”，两者各自带 role=status 的无障碍标签便于读屏。所有外观通过 CSS 令牌接入框架明暗主题，无需额外配置。

常见能力：

Placement：start / end 区分对方与本人，自动镜像头像与对齐
Variant：soft / filled / outlined / ghost 四种底色，filled 用于左侧自动降为浅底
Text 直接渲染并作为翻译键；ChildContent 承载代码 / 图片 / 卡片等富内容
Header / Footer 插槽加入附加信息与操作区
Avatar / AvatarSrc / AvatarIcon 任一驱动头像，ShowAvatar 可强制显隐
Name 本地化、Time 视为业务数据；组合成元信息行
Typing 三点跳动、Loading 骨架占位，各带 role=status 无障碍标签
纯展示、无 JS 互操作，明暗主题随 CSS 令牌自动适配

用法

<Bubble Placement="start" Avatar="AI" Name="助手" Time="09:24"
        Text="你好，我可以帮你搭建模型、生成页面。" />

<Bubble Placement="end" Variant="filled" Name="我" Text="怎么用一句话描述订单模型？" />

@* 富内容：Header + 代码块 + Footer 操作区 *@
<Bubble Placement="start" AvatarIcon="sparkles" Name="助手">
    <Header>已生成实体：</Header>
    <ChildContent><pre><code>public class Order : EntityBase { ... }</code></pre></ChildContent>
    <Footer><Button Kind="text" Size="sm" Icon="copy" Text="复制" OnClick="@Copy" /></Footer>
</Bubble>

@* 状态：对方正在输入 / 等待首字 *@
<Bubble Placement="start" Avatar="AI" Typing="true" />
<Bubble Placement="start" Avatar="AI" Loading="true" />

API 参数

参数	类型	默认值	说明
`Avatar`	`string`	`null`	头像文字缩写（无图片、无图标时显示）。
`AvatarIcon`	`string`	`null`	头像图标名（Icon Type，不本地化）。无图片时、且无文字缩写时生效。
`AvatarSrc`	`string`	`null`	头像图片地址。
`ChildContent`	`RenderFragment`	`null`	富内容插槽，可放置代码块、图片、卡片等。
`Footer`	`RenderFragment`	`null`	底部自定义内容（位于正文之下），可放操作按钮、来源等。
`Header`	`RenderFragment`	`null`	头部自定义内容（位于名称行之下、正文之上）。
`Loading`	`bool`	`false`	加载态：气泡内显示骨架占位，用于等待首字返回。
`Name`	`string`	`null`	发送者名称。
`OnClick`	`EventCallback<MouseEventArgs>`	—	事件气泡点击回调。
`Placement`	`string`	`"start"`	摆放方位：start（左，对方 / 助手）或 end（右，本人 / 用户）。默认 start。
`ShowAvatar`	`Nullable<bool>`	`null`	是否显示头像。默认根据 Avatar / AvatarSrc / AvatarIcon 任一非空自动判定。
`Text`	`string`	`null`	气泡正文文本（作为翻译键）。与 ChildContent 二选一，或叠加使用。
`Time`	`string`	`null`	时间戳文本（来自业务数据，不本地化）。
`Tools`	`RenderFragment`	`null`	悬停操作行（位于整条气泡之下）：放复制这类操作按钮，以及模型、时间这类不必常驻的信息。平时不占位也不可见，鼠标停在气泡上（或行内按钮拿到焦点）才浮出，因此长对话里不会因为 hover 而上下跳动。
`Typing`	`bool`	`false`	输入中态：气泡内显示三点跳动，用于对方正在输入。
`Variant`	`string`	`"soft"`	气泡外观：filled（实心，主色底白字）/ soft（浅底，默认）/ outlined（描边）/ ghost（无底）。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。