[RFC] XMarkdown添加Footer节点

[Samoy]

Summary

支持在XMarkdown末尾显示自定义内容，适用于添加加载状态、版权签名、引用信息等。#1284

Motivation

当前 XMarkdown 在流式输出时无法动态展示尾缀（如"正在生成..."或品牌 Logo），导致用户需要在流结束后手动拼接。这影响了用户体验，特别是在 AI 对话、日志滚动等场景中。

Target

支持在Markdown尾部插入ReactNode，可用来展示：

• 加载动画
• 版权签名
• 参考链接

Detailed Design

API 设计

在 XMarkdownProps 中新增 footer 参数：

interface XMarkdownProps {
  /**
   * @description 文档末尾的 React 节点
   * @description React node displayed at the end of document during streaming
   */
  footer?: React.ReactNode;
  /**
   * @description 文档末尾的 React 节点的 CSS 类名
   * @description CSS class name for the footer React node
   */
  footerClassName?: string;
  /**
   * @description 文档末尾的 React 节点的内联样式
   * @description Inline styles for the footer React node
   */
  footerStyle?: React.CSSProperties
}

行为设计

1. 定位: footer 始终显示在文档内容末尾
2. 更新策略: 每次收到新 chunk 后重新渲染 footer，不破坏已有 Markdown 结构
3. 样式: 用户可通过footerClassName或者footerStyle自定义样式
4. 性能: 仅 diff footer 区域，不触发整篇重渲染
5. 非 breaking: 完全向后兼容，不设置 footer 时无影响

实现方案

使用相对定位的容器包裹 Markdown 内容，footer 使用绝对定位固定在底部：

<div className={`${prefixCls}-container`}>
  <div className={`${prefixCls}-content`}>
    {renderer.render(htmlString)}
  </div>
  {footer && (
    <div className={classNames(`${prefixCls}-footer`,footerClassName)} style={footerStyle}>
      {footer}
    </div>
  )}
</div>

特点：

• 实现简单，性能良好
• 不干扰现有渲染逻辑
• 支持任意 React 节点

样式处理

提供基础样式确保 footer 定位正确：

.x-markdown-container {
  position: relative;
}

.x-markdown-footer {
  margin-top: 16px;
}

性能优化

1. React.memo: footer 组件使用 React.memo 避免不必要的重渲染
2. useMemo: 缓存 footer 渲染结果
3. key 属性: 为 footer 设置稳定的 key 避免 diff 问题

Checklist

• 支持 <XMarkdown footer={<Spin />} ... />
• 流式过程中 footer 节点保持可见且位置固定
• footer 变化不导致已渲染 Markdown 区域重排
• 支持RTL
• 文档 & 示例同步更新
• 单测覆盖率 ≥ 90%

Test Case

1. 基础渲染测试: footer 正确显示在内容末尾
2. 流式更新测试: 新 chunk 到达时 footer 保持可见
3. 性能测试: footer 更新不触发内容重渲染
4. 空内容测试: 空内容时 footer 仍然显示
5. 样式测试: 自定义样式正确应用

Compatibility

• React 16.8+ (支持 hooks)
• 不影响现有 API
• 不引入破坏性变更