TNT 组件元数据

安装

npm i @tntx/package-meta-react --save

使用

import PackageMeta from "@tntx/package-meta-react";
import avatarImg from "./avatar3.jpg";

export default () => {
  return (
    <div style={{ padding: "10px 30px" }}>
      <PackageMeta
        title="Disk资源管理"
        description="一个小而美的资源管理UI组件，通过简单的配置就有好的用户体验，上手简单，搭配灵活，支持folder文件夹、file文件、link链接；"
        author={{
          nickname: "露娜",
          avatar: <img src={avatarImg} />,
        }}
        link={{
          url: "https://github.com/moco-ui/moco-ui",
          type: "design",
        }}
        extra={{
          npm: "https://www.npmjs.com/package/disk-resource-manager",
          github: "https://github.com/rookie-ninja/disk-resource-manager",
          gitlab: "https://gitlab.com/rookie-ninja/disk-resource-manager",
          // gitee: "https://gitee.com/rookie-ninja/disk-resource-manager",
          // otherLink: "https://github.com/rookie-ninja/disk-resource-manager",
          maturity: 85,
          useList: [
            {
              name: "天策",
              version: "1.0.0",
            },
          ],
        }}
      />
    </div>
  );
};

API

属性名	描述	类型	必需	默认值
title	组件标题	string	否	-
description	组件描述	string	是	-
author	作者信息	{ nickname: string | string[]; avatar: ReactNode }	否	-
link	相关链接	{ url?: string; type?: "component" | "design" }	否	-
extra	额外链接和成熟度等信息	object	否	-

extra对象定义如下：

{
  github?: string;
  gitee?: string;
  gitlab?: string;
  npm?: string;
  otherLink?: string;
  maturity?: number;
  useList?: {
    name: string;
    version: string
  }[] | "all"
}

字段详细说明

• title: 组件的标题，可以为空。
• description: 对组件功能的简要描述，此字段是必需的。
• author: 包含作者昵称（支持单个或多个）和头像元素的对象。
• link: 包含可选 URL 及其类型的对象，用于指定组件或设计相关链接。
• extra: 包含一系列额外链接（如 GitHub、Gitee、GitLab、npm 等）以及组件成熟度评分和使用列表。