GIT代码提交规范模板

前言

经常使用TortoiseGit提交代码,在输入框中没有一个标准的提交规范,于是就用AI写了一个html,用来格式化提交的文本。


HTML代码

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Radio Button Example</title>
    <style>
        /* 使用 Flexbox 实现并排布局 */
        .flex-container {
            display: flex;
            justify-content: space-between; /* 使两组元素之间有间距 */
        }

        .flex-item {
            flex: 1;
            margin-right: 20px; /* 设置两列之间的间距 */
        }

        .flex-item:last-child {
            margin-right: 0; /* 移除最后一项的右边距 */
        }

        /* 按钮样式 */
        #copyButton {
            background-color: #4CAF50; /* 绿色背景 */
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border: none;
            transition-duration: 0.4s;
        }

        #copyButton:hover {
            background-color: white;
            color: black;
            border: 2px solid #4CAF50;
        }

        #copyButton.success {
            background-color: #28a745;
        }
    </style>
    <script type="text/javascript">
        function updateInput() {
            var type = document.querySelector('input[name="type"]:checked');
            var scope = document.querySelector('input[name="scope"]:checked');

            // Check if both selections are made before updating the input field
            if (type && scope) {
                // Wrap the scope value in parentheses and add a colon after it without space before (
                document.getElementById('output').value = type.value + "(" + scope.value + "):";
            } else {
                document.getElementById('output').value = '';
            }
        }

        function copyToClipboard() {
            // Get the text field
            var copyText = document.getElementById("output");

            // Select the text field
            copyText.select();
            copyText.setSelectionRange(0, 99999); // For mobile devices

            try {
                // Copy the text inside the text field
                navigator.clipboard.writeText(copyText.value);

                // Optionally provide user feedback by changing button style
                var button = document.getElementById('copyButton');
                button.textContent = '已复制';
                button.classList.add('success');

                // Reset button text and style after 2 seconds
                setTimeout(function() {
                    button.textContent = '复制';
                    button.classList.remove('success');
                }, 2000);
            } catch (err) {
                console.error("Failed to copy text: ", err);
            }
        }

        // Add event listener for pressing Enter key in the input field
        function handleKeyPress(event) {
            if (event.key === 'Enter') {
                event.preventDefault(); // Prevent form submission or other default actions
                copyToClipboard();
            }
        }

        window.onload = function() {
            // Attach the event listener to the input field
            document.getElementById('output').addEventListener('keydown', handleKeyPress);
        }
    </script>
</head>
<body>
    <h2>Select Type and Scope:</h2>

    <form onsubmit="event.preventDefault(); updateInput();">
        <!-- 使用 Flexbox 并排显示两组单选按钮 -->
        <div class="flex-container">
            <div class="flex-item">
                <fieldset>
                    <legend>Type:</legend>
                    <!-- First set of radio buttons with tooltips -->
                    <label><input type="radio" name="type" value="feat" title="新功能" onclick="updateInput()"> Feature (新功能)</label><br>
                    <label><input type="radio" name="type" value="fix" title="修复bug" onclick="updateInput()"> Fix (修复bug)</label><br>
                    <label><input type="radio" name="type" value="docs" title="文档改变" onclick="updateInput()"> Docs (文档改变)</label><br>
                    <label><input type="radio" name="type" value="style" title="代码格式改变" onclick="updateInput()"> Style (代码格式改变)</label><br>
                    <label><input type="radio" name="type" value="refactor" title="某个已有功能重构" onclick="updateInput()"> Refactor (某个已有功能重构)</label><br>
                    <label><input type="radio" name="type" value="perf" title="性能优化" onclick="updateInput()"> Performance (性能优化)</label><br>
                    <label><input type="radio" name="type" value="test" title="增加测试" onclick="updateInput()"> Test (增加测试)</label><br>
                    <label><input type="radio" name="type" value="build" title="改变了build工具如grunt换成了npm" onclick="updateInput()"> Build (改变了build工具如grunt换成了npm)</label><br>
                    <label><input type="radio" name="type" value="revert" title="撤销上一次的commit" onclick="updateInput()"> Revert (撤销上一次的commit)</label><br>
                    <label><input type="radio" name="type" value="chore" title="构建过程或辅助工具的变动" onclick="updateInput()"> Chore (构建过程或辅助工具的变动)</label><br>
                </fieldset>
            </div>
            <div class="flex-item">
                <fieldset>
                    <legend>Scope:</legend>
                    <!-- Second set of radio buttons -->
                    <label><input type="radio" name="scope" value="UI" onclick="updateInput()"> UI</label><br>
                    <label><input type="radio" name="scope" value="LOC" onclick="updateInput()"> LOC</label><br>
                </fieldset>
            </div>
        </div>

        <br>
        <!-- Text input field without readonly attribute -->
        <input type="text" id="output" placeholder="Selected items will appear here" style="width:300px;" />
        <!-- Copy button -->
        <button id="copyButton" type="button" onclick="copyToClipboard()">复制</button>
    </form>
</body>
</html>

总结

这样就很方便的粘贴文本到输入框了。

相关推荐
&Sinnt&2 小时前
Git 版本控制完全指南:从入门到精通
git·后端
Tiny2144 小时前
多人协同开发时Git使用命令
git
WebGirl5 小时前
代码Revert后再次Merge会丢失的问题
git
小皮侠10 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github
HalukiSan11 小时前
如何提交PR
git·gitlab·github
爱莉希雅&&&1 天前
shell编程之awk命令详解
linux·服务器·git
baiyu331 天前
成为git砖家(12): 看懂git合并分支时冲突提示符
git
wu_aceo1 天前
将本地项目提交到Gitee
git·gitee·提交·本地提交·上传git
随便取个六字2 天前
GIT操作 学习
git·学习
星源~2 天前
tree 命令集成到 Git Bash:可视化目录结构的指南
git·单片机·物联网·嵌入式·项目开发