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>
总结

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