# @dreamcatcher-tech/commit-graph 中文文档 规范地址：https://npmcn.com/package/%40dreamcatcher-tech/commit-graph/ 版本：2\.2\.9 npm 元数据更新时间：2024-09-27T03:48:44.848Z 中文译文更新时间：2026-11-12T19:32:43.221Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40dreamcatcher-tech/commit-graph 原文对照：https://npmcn.com/package/%40dreamcatcher-tech/commit-graph/?lang=original 项目主页：https://liuliu-dev.github.io/CommitGraph/ 源码仓库：https://github.com/dreamcatcher-tech/CommitGraph ## 关键信息（来自 npm 元数据） - 包体积（解压后）：18.6 MB，86 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：7 个 - peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0 - 首次发布：2024-09-17T22:07:09.789Z - 最新版本发布：2024-09-27T03:48:44.656Z - 近 30 天下载量：19308（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：6（近 12 个月 0 个） ## 中文简介 一个可视化承诺图的反射组件. ## 安装 ```sh npm install @dreamcatcher-tech/commit-graph ``` 也可以使用：`pnpm add @dreamcatcher-tech/commit-graph`、`yarn add @dreamcatcher-tech/commit-graph`、`bun add @dreamcatcher-tech/commit-graph` ## README # 提交图表 [![readme-header](https://github.com/liuliu-dev/CommitGraph/blob/main/graph.gif)](https://liuliu-dev.github.io/CommitGraph/) [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) ## 概览 Contition Graph 包是一个 React 组件套件,旨在以互动和信息化的方式可视化承诺图. 它展示一个存储器内的历史,支持无限地加载卷轴。 见 [这个员额](https://www.dolthub.com/blog/2024-08-07-drawing-a-commit-graph/) 详细执行情况. `CommitGraph` 用于平台,如 [多尔特湖](https://www.dolthub.com/) 可视化数据库输入日志历史. ## 演示 这个 [演示](https://liuliu-dev.github.io/CommitGraph/) 特性样本输入数据和真实的 GitHub 寄存器图表. ## 特征 - **交互式提交图形可视化 :** Render将历史作为互动图来承诺,对存储处的活动提供了清晰而详细的视角. - **无限滚动支持 :** `CommitGraph.WithInfiniteScroll` 通过在用户滚动时动态地加载新内容来增强大型承诺历史的用户经验. - **自定义样式 :** 用于承诺日志图的广泛样式选项,包括节点颜色,间隔等,以无缝匹配项目的设计. ## 安装 ```shell npm install commit-graph ``` ## 快速启动 ### 使用提交图形 对于没有无限卷轴的基本执行: ```jsx import React from "react"; import { CommitGraph } from "commit-graph"; const MyComponent = () => { const commits = [ // Commits data according to the new Commit type ]; const branchHeads = [ // Branch heads data according to the new Branch type ]; return ( ); }; export default MyComponent; ``` ### 使用 Co通Graph 。 无限滚动 对于需要无限卷轴处理大型承诺历史的执行: ```jsx import React from "react"; import { CommitGraph } from "commit-graph"; const MyComponent = () => { // Your commit and branch head data, loadMore function, and hasMore flag return ( ); }; export default MyComponent; ``` ## 道具 ### Communication Graph 和 Communication Graph 的通用道具 。 无限滚动 - 执行(阵列):数组 `Commit` 代表承诺历史的天体. - 分支头 (阵列): 一组 `Branch` 在承诺图中代表分支头的物体. ### CommitGraph 的附加道具 。 无限滚动 - 加载更多(函数):在到达滚动端时加载更多任务的函数 . - has More (boolean) : 说明是否有更多的承诺可以加载 . ## 类型定义 这些类型定义应当用于构建传递给CommitGraph和CommitGraph两个指令和分支标题道具的数据. 用"无限滚动"组件,确保承诺历史和分支信息的适当可视化. ### `Commit` 类型 这个 `Commit` 类型代表个人在犯罪历史中犯罪。 每个 `Commit` 对象应符合下列结构: ```typescript type ParentCommit = { sha: string; }; export type Commit = { sha: string; commit: { author: { name: string; // The name of the commit author date: string | number | Date; // The date of the commit email?: string; // The email of the commit author (optional) }; message: string; // The commit message }; parents: ParentCommit[]; // An array of parent commits html_url?: string; // The URL to view the commit (optional) }; ``` 此类型定义包括承诺的SHA,作者信息,承诺消息,父方承诺的数组,以及承诺的可选URL. ### `Branch` 类型 这个 `Branch` 类型定义寄存器中分支的结构,每个分支与特定承诺相关: ```typescript export type Branch = { name: string; // The name of the branch commit: { sha: string; // The SHA of the latest commit on the branch }; link?: string; // A URL to the branch on GitHub (optional) }; ``` 每个分行对象应包括分行名称,分行最新承诺的SHA,以及与分行的可选链接. ### `graphStyle` (对象,可选) 指定执行图的样式选项的可选对象。 这个 `graphStyle` 对象应具有以下属性: - `commitSpacing` (数目):承诺之间的垂直间隔. - `branchSpacing` (数字):分枝之间的水平间隔. - `branchColors` (串行数): 用于不同分支的颜色阵列。 默认 : `['#FF0000', '#00FF00', '#0000FF']`。 。 。 . - `nodeRadius` (数字):承诺节点圈的半径. ### `dateFormatFn` (职能,可选) 格式化输入日期的可选函数 。 以日期、数字或字符串作为输入并返回字符串. ```typescript dateFormatFn?: (d: string | number | Date) => string; ``` 示例: ```typescript const customDateTimeFormatFn = (d: string | number | Date): string => { return new Date(d).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', }); }; const MyComponent = () => { // Your commit and branch head data, loadMore function, and hasMore flag return ( ); }; ``` ### `currentBranch` (弦,可选) 现分行名. ### `fullSha` (boolean,可选) 而非默认缩短了SHA,显示承诺的全部SHA. ## 故事书 通过运行故事本来探索“提交图”组件及其特性: ```shell npm run storybook ``` ## 常见问题 ### @dreamcatcher-tech/commit-graph 是什么？ 一个可视化承诺图的反射组件\. ### 如何安装 @dreamcatcher-tech/commit-graph？ 在项目目录运行 npm install @dreamcatcher-tech/commit-graph，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @dreamcatcher-tech/commit-graph 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @dreamcatcher-tech/commit-graph 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @dreamcatcher-tech/commit-graph 可以商用吗？ @dreamcatcher-tech/commit-graph 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @dreamcatcher-tech/commit-graph 的下载量有多少？ 根据 npm 官方下载统计，@dreamcatcher-tech/commit-graph 在 2026/10/13 – 2026/11/11 这 30 天内被下载 19,308 次，日均约 644 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @dreamcatcher-tech/commit-graph 还在维护吗？ 最新版本 2\.2\.9 发布于 2024/09/27（2 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/09/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。