Docz 从组件的源代码中自动生成文档

Docz 是一个基于 Markdown 文件格式的文档生成工具，它可以从组件的源代码中自动生成文档。它支持 React 组件和 TypeScript 类型定义，可自动解析 props 和方法，并生成具有交互式示例的组件文档。

使用 Docz，你只需要在组件的源代码文件（通常是写在 .jsx 或 .tsx 文件中）中添加注释来描述组件的 props 和方法，然后运行 Docz 命令来生成文档。

以下是一些常见的用法：

1. 安装 Docz：

npm install docz --save-dev

2. 在项目的根目录创建 .docz 文件夹，并在其中创建 doczrc.js 文件，配置 Docz 的选项，例如：

export default {
  title: 'My Component Library',
  description: 'Documentation for my component library',
  theme: 'docz-theme-default',
  menu: ['Introduction', 'Components'],
};

3. 在组件的源代码文件中添加注释，描述组件的 props 和方法。注释可以使用 Docz 自定义的标记语法，例如：

/**
 * MyComponent 组件是一个示例组件。
 * 
 * @component
 * @example
 * <MyComponent title="Hello" />
 */
function MyComponent({ title }) {
  return <h1>{title}</h1>;
}

/**
 * title 是一个字符串类型的属性，用于设置组件的标题。
 * 
 * @prop {string} title
 */

4. 运行 Docz 命令启动文档服务器：

npx docz dev

5. 打开浏览器访问 http://localhost:3000，你将看到生成的文档页面。

除了自动生成组件文档外，Docz 还提供了一些其他功能，例如自定义主题、支持多语言、支持自定义样式等。你可以查阅 Docz 的官方文档以了解更多详情：https://www.docz.site/