CommitChangelog

用法

CommitChangelog 组件会根据指定的文件路径，从 GitHub 仓库获取该文件的提交历史，并以时间线形式展示。

基本用法

在您的 Markdown 文档中使用以下语法：

:commit-changelog

组件会自动根据当前页面路由推断组件名称，并获取对应文件的提交历史。

指定组件名称

:commit-changelog{name="Button"}

自定义文件路径

如果您的文件不在默认的 src 目录，可以自定义路径：

:commit-changelog{commitPath="packages/ui/src" name="Button"}

完整配置示例

::commit-changelog
---
commitPath: 'packages/core/src'
prefix: 'components'
suffix: 'ts'
name: 'useUser'
author: 'user@example.com'
---

这将查找 packages/core/src/components/useUser.ts?author=user@example.com 文件的提交历史。

工作原理

1. 路径推断：组件会根据 name 属性或当前路由名称推断文件名
2. 命名转换：支持多种文件命名格式（通过 casing 参数或全局配置控制）
   • auto（默认）：Vue 组件（.vue 后缀）使用 PascalCase，其他文件使用 camelCase
   • kebab：保持 kebab-case 格式（如 use-user → use-user.ts）
   • camel：转换为 camelCase（如 use-user → useUser.ts）
   • pascal：转换为 PascalCase（如 use-user → UseUser.ts）
3. 获取提交：调用 GitHub API 获取指定文件的提交历史
4. 格式化显示：将提交信息格式化为易读的 Markdown，包含：
   • 提交 SHA（前 5 位）和链接
   • 提交信息（移除范围标注）
   • Issue 引用链接（如 #123）
   • 内联代码高亮

前置要求

使用此组件需要：

1. GitHub 配置: 在 app.config.ts 中配置 GitHub 相关信息（url、branch、commitPath 等）。详见 GitHub 集成配置。
2. 环境变量: 需要在 .env 文件中配置 GitHub Personal Access Token：

NUXT_GITHUB_TOKEN=ghp_your_personal_access_token_here

API

Props

示例

显示 Vue 组件的提交历史

:commit-changelog{name="Accordion"}

输出示例：

• a1b2c — fix: 修复折叠动画延迟问题 #45
• d4e5f — feat: 添加 disabled 属性支持

显示 TypeScript 文件的提交历史

:commit-changelog{suffix="ts" name="useColorMode"}

按作者过滤提交

通过在 URL 查询参数中添加 author 可以只显示特定作者的提交：

:commit-changelog{author="user@example.com"}

完整示例：自定义路径和后缀

:commit-changelog{commitPath="packages/core/src" prefix="utils" suffix="ts" name="formatter" author="user@example.com"}

这将查找 packages/core/src/utils/formatter.ts?author=user@example.com 的提交历史。

使用 kebab-case 命名的文件

对于使用 kebab-case 命名的 composables 或 utils 文件：

:commit-changelog{suffix="ts" name="use-user" casing="kebab" commitPath="composables"}

这将查找 composables/use-user.ts 的提交历史。

全局配置命名格式

在 app.config.ts 中配置默认命名格式：

export default defineAppConfig({
  github: {
    casing: 'kebab', // 全局默认使用 kebab-case
    // 其他配置...
  }
})

这样所有 CommitChangelog 组件都会默认使用 kebab-case，除非单独指定 casing 参数覆盖。

Changelog