统一的 Git 提交规范可以提高代码维护效率，便于团队协作和版本追踪。每个提交信息应遵循特定格式，包含类型、描述等内容，使提交历史清晰可读。以下为使用ai生成的Git 提交规范网页说明，便于参考使用：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git 提交规范指南</title>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置 Tailwind -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
dark: '#1e293b',
light: '#f8fafc'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义样式 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-hover {
@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}
.section-fade {
@apply opacity-0 translate-y-4 transition-all duration-700;
}
.section-visible {
@apply opacity-100 translate-y-0;
}
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
<!-- 导航栏 -->
<header class="sticky top-0 z-50 bg-white shadow-md transition-all duration-300" id="navbar">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-git-square text-primary text-2xl"></i>
<h1 class="text-xl md:text-2xl font-bold text-dark">Git 提交规范</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#intro" class="hover:text-primary transition-colors">简介</a>
<a href="#types" class="hover:text-primary transition-colors">提交类型</a>
<a href="#examples" class="hover:text-primary transition-colors">示例</a>
<a href="#template" class="hover:text-primary transition-colors">模板</a>
</nav>
<button class="md:hidden text-gray-700" id="menuToggle">
<i class="fa fa-bars text-xl"></i>
</button>
</div>
<!-- 移动端菜单 -->
<div class="md:hidden hidden bg-white w-full" id="mobileMenu">
<div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
<a href="#intro" class="py-2 hover:text-primary transition-colors">简介</a>
<a href="#types" class="py-2 hover:text-primary transition-colors">提交类型</a>
<a href="#examples" class="py-2 hover:text-primary transition-colors">示例</a>
<a href="#template" class="py-2 hover:text-primary transition-colors">模板</a>
</div>
</div>
</header>
<!-- 主要内容 -->
<main class="container mx-auto px-4 py-8">
<!-- 简介部分 -->
<section id="intro" class="mb-16 section-fade">
<div class="bg-white rounded-xl shadow-md p-6 md:p-8">
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-dark flex items-center">
<i class="fa fa-info-circle text-primary mr-3"></i>提交规范简介
</h2>
<p class="text-gray-700 mb-4">
统一的 Git 提交规范可以提高代码维护效率，便于团队协作和版本追踪。每个提交信息应遵循特定格式，包含类型、描述等内容，使提交历史清晰可读。
</p>
<p class="text-gray-700">
常见的提交格式为：<code class="bg-gray-100 px-2 py-1 rounded text-primary font-mono">类型: 描述信息</code>，例如：<code class="bg-gray-100 px-2 py-1 rounded text-primary font-mono">feat: 新增用户登录功能</code>
</p>
</div>
</section>
<!-- 提交类型部分 -->
<section id="types" class="mb-16 section-fade">
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-dark flex items-center">
<i class="fa fa-list-alt text-primary mr-3"></i>提交类型大全
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- feat 卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-primary">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-primary">feat</h3>
<span class="bg-primary/10 text-primary text-sm px-2 py-1 rounded-full">常用</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：新增功能</p>
<p class="text-gray-700 text-sm">面向用户的实质性功能新增，如添加购物车结算功能、新增夜间模式等。</p>
</div>
<!-- fix 卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-red-500">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-red-500">fix</h3>
<span class="bg-red-500/10 text-red-500 text-sm px-2 py-1 rounded-full">常用</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：修复缺陷（Bug）</p>
<p class="text-gray-700 text-sm">解决现有功能的错误或异常，如修复登录失败问题、解决数据加载重复问题等。</p>
</div>
<!-- chore 卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-gray-500">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-gray-500">chore</h3>
<span class="bg-gray-500/10 text-gray-500 text-sm px-2 py-1 rounded-full">常用</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：日常维护</p>
<p class="text-gray-700 text-sm">不影响功能逻辑的维护性操作，如更新依赖版本、修改配置文件等。</p>
</div>
<!-- docs 卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-blue-400">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-blue-400">docs</h3>
<span class="bg-blue-400/10 text-blue-400 text-sm px-2 py-1 rounded-full">常用</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：文档更新</p>
<p class="text-gray-700 text-sm">非代码逻辑的文档修改，如完善README、补充接口注释、更新API文档等。</p>
</div>
<!-- style 卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-purple-400">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-purple-400">style</h3>
<span class="bg-purple-400/10 text-purple-400 text-sm px-2 py-1 rounded-full">常用</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：格式调整</p>
<p class="text-gray-700 text-sm">不改变代码逻辑的格式调整，如修复ESLint错误、调整缩进、统一命名格式等。</p>
</div>
<!-- refactor 卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-yellow-500">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-yellow-500">refactor</h3>
<span class="bg-yellow-500/10 text-yellow-500 text-sm px-2 py-1 rounded-full">常用</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：代码重构</p>
<p class="text-gray-700 text-sm">优化代码结构和可读性，不新增功能也不修复bug，如拆分冗长函数、优化逻辑等。</p>
</div>
<!-- test 卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-green-500">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-green-500">test</h3>
<span class="bg-green-500/10 text-green-500 text-sm px-2 py-1 rounded-full">常用</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：测试相关</p>
<p class="text-gray-700 text-sm">添加、修改或删除测试代码，如新增单元测试、补充边界条件测试用例等。</p>
</div>
<!-- perf 卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-indigo-500">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-indigo-500">perf</h3>
<span class="bg-indigo-500/10 text-indigo-500 text-sm px-2 py-1 rounded-full">常用</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：性能优化</p>
<p class="text-gray-700 text-sm">提升运行效率或降低资源消耗，如优化数据库查询、减少接口请求次数等。</p>
</div>
<!-- build 卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-orange-500">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-orange-500">build</h3>
<span class="bg-orange-500/10 text-orange-500 text-sm px-2 py-1 rounded-full">常用</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：构建配置修改</p>
<p class="text-gray-700 text-sm">影响项目编译或打包流程的修改，如修改webpack配置、调整打包输出路径等。</p>
</div>
<!-- 更多类型 -->
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-pink-400">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-pink-400">ci</h3>
<span class="bg-pink-400/10 text-pink-400 text-sm px-2 py-1 rounded-full">扩展</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：持续集成配置</p>
<p class="text-gray-700 text-sm">CI/CD流程调整，如配置自动测试、修改构建脚本、调整环境变量等。</p>
</div>
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-teal-500">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-teal-500">revert</h3>
<span class="bg-teal-500/10 text-teal-500 text-sm px-2 py-1 rounded-full">扩展</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：回滚提交</p>
<p class="text-gray-700 text-sm">撤销之前的错误提交，如回滚某个版本、撤销导致故障的合并代码等。</p>
</div>
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-gray-400">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-gray-400">wip</h3>
<span class="bg-gray-400/10 text-gray-400 text-sm px-2 py-1 rounded-full">扩展</span>
</div>
<p class="text-gray-600 mb-2 font-medium">中文翻译：开发中（临时提交）</p>
<p class="text-gray-700 text-sm">临时提交未完成的功能，用于保存开发进度，避免代码丢失。</p>
</div>
</div>
<!-- 更多类型折叠面板 -->
<div class="mt-6">
<button id="showMoreBtn" class="flex items-center text-primary hover:text-primary/80 transition-colors font-medium">
查看更多提交类型 <i class="fa fa-chevron-down ml-2 transition-transform duration-300" id="moreIcon"></i>
</button>
<div id="moreTypes" class="hidden mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-blue-600">
<h3 class="text-xl font-bold text-blue-600 mb-2">release</h3>
<p class="text-gray-600 mb-2 font-medium">中文翻译：版本发布</p>
<p class="text-gray-700 text-sm">版本号更新或打tag，如更新版本号为v2.0.0、打正式发布标签等。</p>
</div>
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-red-400">
<h3 class="text-xl font-bold text-red-400 mb-2">deprecate</h3>
<p class="text-gray-600 mb-2 font-medium">中文翻译：标记废弃</p>
<p class="text-gray-700 text-sm">标记即将删除的代码或接口，如标记旧版接口为废弃、注释即将移除的函数等。</p>
</div>
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-gray-600">
<h3 class="text-xl font-bold text-gray-600 mb-2">remove</h3>
<p class="text-gray-600 mb-2 font-medium">中文翻译：移除功能/代码</p>
<p class="text-gray-700 text-sm">彻底删除无用模块，如删除已废弃的旧代码、移除不再使用的依赖等。</p>
</div>
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-green-600">
<h3 class="text-xl font-bold text-green-600 mb-2">upgrade</h3>
<p class="text-gray-600 mb-2 font-medium">中文翻译：依赖/版本升级</p>
<p class="text-gray-700 text-sm">框架或库的大版本更新，如升级Vue从2.x到3.x、更新Node.js版本等。</p>
</div>
<div class="bg-white rounded-lg shadow p-6 card-hover border-l-4 border-yellow-600">
<h3 class="text-xl font-bold text-yellow-600 mb-2">downgrade</h3>
<p class="text-gray-600 mb-2 font-medium">中文翻译：依赖/版本降级</p>
<p class="text-gray-700 text-sm">回退依赖版本以修复兼容问题，如降级axios版本解决兼容性bug等。</p>
</div>
</div>
</div>
</section>
<!-- 示例部分 -->
<section id="examples" class="mb-16 section-fade">
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-dark flex items-center">
<i class="fa fa-code text-primary mr-3"></i>提交示例
</h2>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="bg-gray-800 text-white px-6 py-3 flex items-center">
<i class="fa fa-terminal mr-2"></i>
<span>提交信息示例</span>
</div>
<div class="p-6">
<ul class="space-y-4">
<li class="flex">
<code class="bg-gray-100 px-3 py-1 rounded text-primary font-mono min-w-[180px]">feat: 新增购物车结算功能</code>
<span class="ml-4 text-gray-700">添加了购物车商品结算流程和支付接口对接</span>
</li>
<li class="flex">
<code class="bg-gray-100 px-3 py-1 rounded text-red-500 font-mono min-w-[180px]">fix: 修复登录验证码失效问题</code>
<span class="ml-4 text-gray-700">解决了验证码过期后未重新生成的bug</span>
</li>
<li class="flex">
<code class="bg-gray-100 px-3 py-1 rounded text-gray-500 font-mono min-w-[180px]">chore: 更新npm依赖至最新版本</code>
<span class="ml-4 text-gray-700">升级所有依赖包到最新稳定版</span>
</li>
<li class="flex">
<code class="bg-gray-100 px-3 py-1 rounded text-blue-400 font-mono min-w-[180px]">docs: 完善API接口文档</code>
<span class="ml-4 text-gray-700">补充了所有接口的参数说明和返回值示例</span>
</li>
<li class="flex">
<code class="bg-gray-100 px-3 py-1 rounded text-yellow-500 font-mono min-w-[180px]">refactor: 重构用户信息模块</code>
<span class="ml-4 text-gray-700">拆分过大的用户信息处理函数，提高代码可读性</span>
</li>
<li class="flex">
<code class="bg-gray-100 px-3 py-1 rounded text-green-500 font-mono min-w-[180px]">test: 新增登录功能单元测试</code>
<span class="ml-4 text-gray-700">为登录模块添加了10个单元测试用例</span>
</li>
<li class="flex">
<code class="bg-gray-100 px-3 py-1 rounded text-indigo-500 font-mono min-w-[180px]">perf: 优化首页加载速度</code>
<span class="ml-4 text-gray-700">减少首页接口请求次数，加载时间减少60%</span>
</li>
</ul>
</div>
</div>
</section>
<!-- 模板部分 -->
<section id="template" class="mb-16 section-fade">
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-dark flex items-center">
<i class="fa fa-file-text-o text-primary mr-3"></i>提交信息模板
</h2>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="bg-gray-800 text-white px-6 py-3 flex justify-between items-center">
<div class="flex items-center">
<i class="fa fa-pencil mr-2"></i>
<span>标准提交模板</span>
</div>
<button id="copyBtn" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded transition-colors flex items-center">
<i class="fa fa-copy mr-1"></i> 复制模板
</button>
</div>
<div class="p-6">
<pre id="templateCode" class="bg-gray-100 p-4 rounded-lg text-gray-800 font-mono text-sm overflow-x-auto"><code><类型>: <简洁描述>
[详细描述，可选]
- 说明本次提交的详细内容
- 可以分点列出主要修改
[相关链接，可选]
- 关联的Issue: #123
- 相关文档: https://example.com/docs</code></pre>
<div class="mt-6 bg-blue-50 p-4 rounded-lg">
<h3 class="font-bold text-blue-800 mb-2">使用说明</h3>
<ul class="list-disc pl-5 text-blue-700 space-y-1 text-sm">
<li>第一行为必填项，包含类型和简洁描述（不超过50个字符）</li>
<li>详细描述部分可选，用于说明复杂修改的细节</li>
<li>相关链接部分可选，可关联Issue、文档等</li>
<li>使用空行分隔不同部分，保持格式清晰</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="bg-dark text-white py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<div class="flex items-center">
<i class="fa fa-git-square text-primary text-2xl mr-2"></i>
<span class="font-bold text-xl">Git 提交规范指南</span>
</div>
<p class="text-gray-400 text-sm mt-2">统一规范，提高团队协作效率</p>
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-github text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-linkedin text-xl"></i>
</a>
</div>
</div>
<div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
© 2023 Git 提交规范指南 | 基于约定式提交规范整理
</div>
</div>
</footer>
<!-- 回到顶部按钮 -->
<button id="backToTop" class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
<i class="fa fa-chevron-up"></i>
</button>
<!-- 脚本 -->
<script>
// 移动端菜单切换
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// 复制模板功能
const copyBtn = document.getElementById('copyBtn');
const templateCode = document.getElementById('templateCode').textContent;
copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(templateCode).then(() => {
const originalText = copyBtn.innerHTML;
copyBtn.innerHTML = '<i class="fa fa-check mr-1"></i> 已复制';
copyBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
copyBtn.classList.add('bg-green-600');
setTimeout(() => {
copyBtn.innerHTML = originalText;
copyBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
copyBtn.classList.remove('bg-green-600');
}, 2000);
});
});
// 显示更多类型
const showMoreBtn = document.getElementById('showMoreBtn');
const moreTypes = document.getElementById('moreTypes');
const moreIcon = document.getElementById('moreIcon');
showMoreBtn.addEventListener('click', () => {
moreTypes.classList.toggle('hidden');
moreIcon.classList.toggle('rotate-180');
showMoreBtn.innerHTML = moreTypes.classList.contains('hidden')
? '查看更多提交类型 <i class="fa fa-chevron-down ml-2 transition-transform duration-300" id="moreIcon"></i>'
: '收起更多类型 <i class="fa fa-chevron-up ml-2 transition-transform duration-300" id="moreIcon"></i>';
});
// 滚动动画
const sections = document.querySelectorAll('.section-fade');
const backToTopBtn = document.getElementById('backToTop');
const navbar = document.getElementById('navbar');
function checkScroll() {
// 检测元素是否在视口中
sections.forEach(section => {
const sectionTop = section.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (sectionTop < windowHeight * 0.85) {
section.classList.add('section-visible');
}
});
// 显示/隐藏回到顶部按钮
if (window.scrollY > 300) {
backToTopBtn.classList.remove('opacity-0', 'invisible');
backToTopBtn.classList.add('opacity-100', 'visible');
navbar.classList.add('py-2');
navbar.classList.remove('py-4');
} else {
backToTopBtn.classList.add('opacity-0', 'invisible');
backToTopBtn.classList.remove('opacity-100', 'visible');
navbar.classList.remove('py-2');
navbar.classList.add('py-4');
}
}
// 回到顶部功能
backToTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// 关闭移动菜单
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
// 初始检查和滚动监听
window.addEventListener('load', checkScroll);
window.addEventListener('scroll', checkScroll);
</script>
</body>
</html>