[RFC] antd demo changes before and after using dumi 2.0

[PeachScript]

在升级到 dumi 2.0 后，antd v5 的 demo 编写方式预计会有如下变化，欢迎大家提出建议。

目录结构

组织方式不变，但 md 变成 tsx 以获得编辑器提供的完整编码辅助能力：

.
└── components
    └── affix
        └── demo
-           ├── basic.md
+           ├── basic.tsx
-           ├── debug.md
+           ├── debug.tsx
-           ├── on-change.md
+           ├── on-change.tsx
-           ├── target.md
+           └── target.tsx

demo 元信息表述方式

升级前，通过 demo/xx.md 中的 fromtmatter 及正文控制：

---
titie: 
  zh-CN: 基本
  en-US: Basic
---

## zh-CN

最简单的用法。

## en-US

The simplest usage.

升级后，由于 demo/xx.tsx 作为 demo 引入的第一成员，所以采用约定式的形式为 demo 配置 md 简介信息。约定 demo/xx.tsx 同路径下的同名 xx.md 为 demo 的简介信息、会被自动读取，与升级前类似、以二级标题作为多语言分隔标记，只是 md 里不再有 frontmatter：

## zh-CN

最简单的用法。

## en-US

The simplest usage.

除了上述方式以外，dumi 原本支持的两种方式也是可以使用的：

1. 使用 demo/xx.tsx 的 frontmatter 控制
2. 使用 code 标签的属性控制（仅 code 引入的外部 demo 可用）

demo 标题可作为 GitHub 预览页的兜底文本展示（否则会展示奇怪的空标签），建议（可能会强制要求）写 md 里：

<code src="./demo/basic.tsx">基本</code>

在 GitHub 会展示为：

基本

demo 引入方式

升级前，约定 demo 文件夹做自动引入；
升级后，在组件 md 文件中通过 code 手动单个引入：

+ ## 代码演示
+
+ <code src="./demo/basic.tsx">基本</code>

demo 排序方式

升级前，通过 demo/xx.md 中的 fromtmatter 控制：

---
order: 0
---

升级后，通过组件 md 文件中的 code 标签放置顺序控制：

<code src="./demo/basic.tsx">基本</code>
<code src="./demo/target.tsx">固定状态改变的回调</code>

demo 分栏方式

开启方式在升级前后变化不大，都是通过组件 md 文件中的 frontmatter 控制：

---
- cols: 2
+ demo:
+   cols: true
     # 计划支持栅格式配法以支持响应式分栏，以下可以作为默认值
+   cols:
+     xs: 1
+     sm: 1
+     md: 2
+     lg: 2
+     xl: 2
+     xxl: 3
---

同时升级后可支持分组分栏，以换行分隔的 code 一起分栏、以段落分隔的 code 单独分栏，以满足同一组件页面中、不同 demo 的宽度需求不一致的场景，例如：

<!-- 以下 demo 以分栏展示 -->
<code src="./demo/a.tsx">a</code>
<code src="./demo/b.tsx">b</code>
<code src="./demo/c.tsx">c</code>
<code src="./demo/d.tsx">d</code>

<!-- 以下 demo 以整行展示 -->
<code src="./demo/e.tsx">e</code>

<!-- 以下 demo 以分栏展示 -->
<code src="./demo/f.tsx">f</code>
<code src="./demo/g.tsx">g</code>

注：分栏方案还未完全确定，可参考 RFC 了解更多：#1187

debug demo

升级前后差别不大，都是通过 frontmatter 控制，只是文件类型不同；
另外，升级后支持通过 code 属性添加 debug 标记：

<code src="./demo/debug.tsx" debug>调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678</code>

iframe demo

升级前后差别不大，都是通过 frontmatter 控制，也都是通过数值来控制 iframe 的高度，只是文件类型不同；
另外，升级后支持通过 code 属性添加 iframe 标记：

<code src="./demo/iframe.tsx" iframe="400">iframe demo</code>

verison 标记

目前的计划里没这个能力，但可行性是没问题的，和 dumi 1 类似基于默认 demo 预览器做自定义即可；也可以考虑做成内置能力？

暂时想到这些，计划写个脚本批量处理上述变更。大家看看有没有补充和建议 cc @afc163 @zombieJ @MadCcc @xrkffgg @vagusX

[zombieJ]

md 转 tsx 这个的话对于需要对 Demo 加一些 markdown 方式的内容如何处理？
https://ant.design/components/form-cn/#components-form-demo-control-hooks

这里能写一个更具体的文件目录例子以及对应的文件里的代码示例不？

[PeachScript]

在『demo 元信息表述方式』部分有范例哈，通过 frontmatter 编写 Markdown 描述，不过缺点是缺少高亮

[zombieJ]

在『demo 元信息表述方式』部分有范例哈，通过 frontmatter 编写 Markdown 描述，不过缺点是缺少高亮

那这个示例的 md 是在哪里的？它也有 desc 是不能 markdown 的？

<code src="./demo/basic.tsx" description="也可以覆盖简介">基本</code>

[afc163]

description 最好写在 markdown 里，而不是作为 prop

[PeachScript]

在『demo 元信息表述方式』部分有范例哈，通过 frontmatter 编写 Markdown 描述，不过缺点是缺少高亮

那这个示例的 md 是在哪里的？它也有 desc 是不能 markdown 的？

<code src="./demo/basic.tsx" description="也可以覆盖简介">基本</code>

这个只是演示可以覆盖，推荐在 demo tsx 文件头部用 frontmatter 这样写哈：

/**
 * description.zh-CN: |
 *   仍然可以用 `Markdown`
 * description.en-US: |
 *   Still support `Markdown`
 */

...

[afc163]

• basic.md

---
title:
  zh-CN: 操作
  en-US: Custom action
height: 100
ifrmae: true
only: true
version: 4.3.0
---

## zh-CN

可以在右上角自定义操作项。

## en-US

Custom action.

---

<code src="./basic.tsx" /> // 或者省略这个，直接用约定同名文件 `.tsx` 的方式。

保留 md 文件如何？

然后 index.md 用来组织这些 demo.md。

[PeachScript]

如果保留 md 只是为了编写 Markdown 格式的 demo 简介，可以考虑用 demo tsx 里 frontmatter 的多行文本代替哈，比如 demo/basic.tsx：

/**
 * description.zh-CN: |
 *   仍然可以用 `Markdown`
 * description.en-US: |
 *   Still support `Markdown`
 */

// 原有的 demo 代码

[afc163]

这个比较丑。。。

https://github.com/ant-design/ant-design/blob/master/components/button/demo/basic.md 这个好看

[PeachScript]

如果改成这样呢：

/**
 * description.md: ./basic.md // 也可以约定同名 md 或 `${demo}.desc.md` 作为 demo 的简介 md
 */

// 原有的 demo 代码

demo 编译过程中保持 tsx 为入口会更容易设计扩展方案，用 code 引入 tsx 也比较容易理解，简介是 demo 元信息的一部分

[zombieJ]

这样太复杂了。 。 。