GitCommit
git-commitgit 提交引用 · 分支 chip(GitBranch) + 短哈希等宽(纯函数 shortSha 可测·可定制位数/href 跳链) + 提交信息单行截断 + 作者头像槽 · inline 单行/stacked 两行(表格单元格) · 部署列表/PR 列表/活动流「Source」列刚需(零依赖·RSC)
用法
基础用法
分支 chip + 短哈希 + 提交信息，inline 单行排版。
master10577b9fix(www): ai-chat 部署站无响应
tsx
<GitCommit
branch="master"
sha="10577b9aaaa"
message="fix(www): ai-chat 部署站无响应"
/>两行排版
layout="stacked" 信息在上、引用在下，表格/列表单元格刚需。
feat(www): 全局路由进度条master·36e347f·瑚瑚琏
tsx
<GitCommit
layout="stacked"
branch="master"
sha="36e347faaa"
message="feat(www): 全局路由进度条"
author="瑚琏"
avatar={<Avatar>瑚</Avatar>}
/>可点击短哈希
传 href 让短哈希可跳转到 commit 详情，shaLength 控制位数。
releasecb2ae42chore(release): @hulianui/ui@0.1.2hotfixf79cbb812345发丝边框 token
tsx
<>
<GitCommit branch="release" sha="cb2ae42ddd0099" href="#cb2ae42" message="chore(release): @hulianui/ui@0.1.2" />
<GitCommit branch="hotfix" sha="f79cbb812345" shaLength={12} message="发丝边框 token" />
</>小尺寸 · 仅引用
size="sm" 紧凑化；省略 message 只渲分支 + 哈希引用。
master10577b9瑚瑚琏feat/xabcdef0
tsx
<>
<GitCommit size="sm" branch="master" sha="10577b9000" author="瑚琏" avatar={<Avatar>瑚</Avatar>} />
<GitCommit size="sm" branch="feat/x" sha="abcdef0123" />
</>何时用
在部署列表、PR 列表、活动流的「Source / 提交」列展示一条 git 提交引用（分支 + 短哈希 + 信息 + 作者）。它是纯展示的单条引用：要展示部署/构建的生命周期态用 DiffStat/[DeployStatus]，要呈现一组按时间排列的事件流用 [Timeline]；本组件只负责「一行提交」的标准化排版。
导入
ts
import { GitCommit, shortSha, branchTone, type BranchTone } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| sha* | string | — | commit SHA，完整或短哈希均可，显示时按 shaLength 截短 |
| branch | string | — | 分支名；提供则前置分支图标 chip |
| author | string | — | 作者名 |
| href | string | — | 短哈希跳转链接，去 commit 详情 |
| shaLength | number | 7 | 短哈希显示位数 |
| colorBranch | boolean | true | 给分支名加色值标识（按分支名稳定取色的 soft badge），不同分支一眼可分 |
| layout | "inline" | "stacked" | "inline" | inline 单行 / stacked 两行（信息在上、引用在下，列表/表格单元格刚需） |
| size | "sm" | "md" | "md" | 尺寸 |
| className | string | — | 透传类名 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| message | ReactNode | 提交信息标题，单行截断；stacked 下作主行 |
| avatar | ReactNode | 作者头像槽，传 <Avatar/> 或任意节点，不与库强耦合 |
禁忌 / 坑
暂无已知坑。shortSha / branchTone 是导出的纯函数（截哈希 / 按分支名取色），可在表格 cell 渲染外复用与单测。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
master10577b9fix(www): ai-chat 部署站无响应瑚瑚琏
<GitCommit
branch="master"
sha={deploy.sha}
message={deploy.message}
/>