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

说明

面向 AI 对话与客服场景的会话列表组件，纯受控展示、不依赖任何浏览器 API。Items 为 Conversation 列表（Key / Text / Group / Icon / Time / Pinned / Unread / Disabled / Loading），其中标题、分组与时间是业务数据、直接展示不本地化。@bind-ActiveKey 双向绑定当前选中项，选中另触发 OnSelect。Groupable（默认 true）按 Group 分组并渲染分组表头（无分组名的组不显示表头），组内置顶项排前。Creation 在顶部放一个“新建会话”按钮并触发 OnCreate，Title 可给列表一个标题。Renamable / Pinnable / Deletable 三个开关自动在每行“⋯”里生成内置命令（重命名 / 置顶或取消置顶 / 删除），也可用 Commands 传入自定义 ConversationCommand 列表覆盖；“⋯”复用框架 Dropdown（自带点击外部关闭、同页多个天然互斥），并按 Portal 传送门浮层呈现——整张列表被塞进抽屉里那种会滚、会被裁的小弹层时，菜单照样浮得出来、也不会跟着外层一起展开。命令经 OnCommand 回传 ConversationCommandArgs（含命中的会话与命令，按 Command.Key 分发 delete / pin / unpin）；内置 rename 例外——它进入行内编辑（双击标题亦可），提交时触发 OnRename 回传新标题。Loading 为真显示整表骨架行，单条 Conversation.Loading 显示标题骨架（流式会话），Unread 显示小圆点，Disabled 项不可点选。所有外观走 CSS 令牌，自动适配明暗主题；宿主在回调里更新 Items 即可（组件不改数据）。

常见能力：

可分组会话列表，组内置顶项自动排前，ActiveKey 双向绑定选中
Creation 新建按钮 + OnCreate；Title 列表标题
Renamable / Pinnable / Deletable 一键生成行内“⋯”命令，或 Commands 自定义
重命名走行内编辑（双击标题或菜单项），Enter 提交 / Esc 取消
OnCommand 回传会话与命令（delete / pin / unpin 由宿主处理）
整表 Loading 骨架 + 单条流式 Loading + Unread 红点 + Disabled + 空态
行内“⋯”复用 Dropdown，自带点击外部关闭、多实例互斥
纯受控展示、无 JS 互操作，明暗主题随 CSS 令牌自动适配

用法

<Conversations Items="@_conv" @bind-ActiveKey="@_active"
              Groupable="true" Creation="true" Title="会话列表"
              Renamable="true" Pinnable="true" Deletable="true"
              OnCreate="Create" OnRename="Rename" OnCommand="Command" />

@code {
    List<Conversation> _conv = new()
    {
        new("c1", "帮我设计一个订单实体") { Group = "今天", Icon = "database", Time = "09:24", Unread = true },
        new("c2", "生成客户管理页面") { Group = "昨天", Pinned = true },
    };
    string _active = "c1";

    void Create() => _conv.Insert(0, new Conversation(Guid.NewGuid().ToString("N"), "新建会话") { Group = "今天" });
    void Rename(ConversationRenameArgs a) => a.Item.Text = a.Value;
    void Command(ConversationCommandArgs a) {
        if (a.Command.Key == "delete") _conv.Remove(a.Item);
        else if (a.Command.Key is "pin" or "unpin") a.Item.Pinned = a.Command.Key == "pin";
    }
}

API 参数

参数	类型	默认值	说明
`ActiveKey`	`string`	`null`	当前选中的会话 Key（双向绑定）。
`ActiveKeyChanged`	`EventCallback<string>`	—	事件
`Commands`	`List<ConversationCommand>`	`null`	自定义每行“⋯”命令列表；为 null 时按 Deletable / Renamable / Pinnable 生成内置命令。
`Creation`	`bool`	`false`	是否显示顶部“新建会话”按钮。
`CreationText`	`string`	`"新建会话"`	新建按钮文案（作为翻译键），默认“新建会话”。
`Deletable`	`bool`	`false`	内置“删除”命令。
`EmptyText`	`string`	`"暂无会话"`	空态文案（作为翻译键），默认“暂无会话”。
`Groupable`	`bool`	`true`	是否按 Group 分组显示，默认 true（无分组名的组不显示表头）。
`Items`	`List<Conversation>`	`null`	会话数据。选中、置顶、删除、重命名后由宿主更新此列表并触发重渲染。
`Loading`	`bool`	`false`	整表加载态：显示骨架行。
`OnCommand`	`EventCallback<ConversationCommandArgs>`	—	事件命令回调（内置 rename 除外，rename 走行内编辑并触发 OnRename）。
`OnCreate`	`EventCallback`	—	事件点击新建按钮回调。
`OnRename`	`EventCallback<ConversationRenameArgs>`	—	事件重命名提交回调。
`OnSelect`	`EventCallback<Conversation>`	—	事件选中会话变化回调，回传该会话对象。
`Pinnable`	`bool`	`false`	内置“置顶 / 取消置顶”命令（文案随当前 Pinned 切换）。
`Renamable`	`bool`	`false`	内置“重命名”命令（选中后进入行内编辑，提交触发 OnRename）。双击标题同样可重命名。
`Title`	`string`	`null`	顶部标题（作为翻译键）；为空则不显示标题文字。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

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