console 命令行工具 X clear

console

$(function () {
    $('#genSql').click(function () {
        if ($('#sqlTpl').val()) {
            $('#sqlResult').html('');
            let tableNum = $('#tableNum').val();
            let sqlTpl = $('#sqlTpl').val() + '<br/>';
            let startFromZero = $('input[name=tableNumStart]:checked').val() === '0';

            for (var i = startFromZero ? 0 : 1; i <= (startFromZero ? tableNum - 1 : tableNum); i++) {
                $('#sqlResult').append(sqlTpl.replace(/%s/g, i));
            }
        }
    });

    $('#clear').click(function () {
        $('#sqlResult').html('');
    });

    $('#shopAdminId').change(function () {
        let tableNum = $('#tableNum').val();
        let tableIdx = (parseInt($(this).val()) % parseInt(tableNum)) + 1;
        $('#tableNumIdx').html('表序号：' + tableIdx);
    });

    $(document).ready(function () {
        // 获取元素
        const shopAdminIdInput = $('#shopAdminId');
        let timeout;

        // 监听输入框的变化
        shopAdminIdInput.on('input', function () {
            // 清除之前的计时器
            clearTimeout(timeout);

            // 设置新的计时器，在用户停止输入200毫秒后触发处理函数
            timeout = setTimeout(function () {
                generateTableSql(shopAdminIdInput.val());
            }, 200);
        });

        // 生成分表 SQL 的函数
        function generateTableSql(adminId) {
            // 这里添加你的逻辑
            let tableNum = $('#tableNum').val();
            let shopAdminId = $('#shopAdminId').val();
            let startFromZero = $('input[name=tableNumStart]:checked').val() === '0';
            let tableIdx = (parseInt(shopAdminId) % parseInt(tableNum)) + (startFromZero ? 0 : 1);
            $('#tableNumIdx').html('表序号：' + tableIdx);
        }
    });

    // 复制按钮点击事件
    $('#copyButton').on('click', function () {
        const sqlResultDiv = $('#sqlResult');
        // 使用正则表达式来匹配不在换行符前的分号
        let sql = sqlResultDiv.text().replace(/;(?!$|\n)/g, ';\n');
        if (sqlResultDiv.text().trim() !== '') {
            navigator.clipboard.writeText(sql).then(function () {
                alert('已复制');
            }, function (err) {
                console.error('复制失败: ', err);
            });
        }
    });
});

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>批量生成分表SQL工具</title>
<style>
/* ... 保持原有的CSS样式 ... */
</style>
</head>
<body>
<div class="container">
  <h1>批量生成分表SQL工具</h1>
  <div class="row">
    <label for="tableNum">输入分表数:</label>
    <input id="tableNum" type="text" placeholder="输入分表数" value="64" />
  </div>
  <div class="row">
    <label for="shopAdminId">输入shopAdminId:</label>
    <input id="shopAdminId" placeholder="输入shopAdminId" type="text"/>
  </div>
  <div class="row">
    <label>表序号从哪开始:</label>
    <label><input type="radio" name="tableNumStart" value="0" checked> 从0开始</label>
    <label><input type="radio" name="tableNumStart" value="1"> 从1开始</label>
  </div>
  <div class="row">
    <span id="tableNumIdx">输出表序号：</span>
  </div>
  <div class="row">
    <label for="sqlTpl">SQL模板 (%s 为表序号替换参数):</label>
    <textarea id="sqlTpl" rows="5" cols="100" >ALTER TABLE `o_order_item_%s` ADD COLUMN `sell_price` INT NOT NULL DEFAULT 0 COMMENT '售价' AFTER `difference_price`;</textarea>
  </div>
  <div class="row">
    <input id="genSql" type="button" value="生成SQL" />
    <input id="clear" type="button" value="清空输出SQL" />
  </div>
  <div class="row">
    <span id="tableNumIdx">输出SQL：</span>
    <button id="copyButton">复制到剪贴板</button>
  </div>
  <div id="sqlResult" style="border:1px solid #000">
  </div>
</div>
</body>
</html>

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333333;
}

.container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
    text-align: center;
    color: #007BFF;
    margin-bottom: 20px;
}

.row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

label {
    flex: 0 0 150px; /* Fixed width for labels */
    color: #333333;
    font-weight: bolder;
    margin-right: 10px;
}

input[type="text"], textarea {
    flex: 1; /* Remaining space for inputs */
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

input[type="text"]:focus, textarea:focus {
    outline: none;
    border-color: #007BFF;
}

input[type="button"] {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

input[type="button"]:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

#sqlResult {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #cccccc;
    background-color: #f9f9f9;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    height: 300px;
    border-radius: 6px;
}

#tableNumIdx {
    font-weight: bold;
    color: #007BFF;
}

textarea#sqlTpl {
    height: 120px;
}

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }

    h1 {
        font-size: 1.5em;
    }

    input[type="text"], textarea {
        font-size: 14px;
    }

    input[type="button"] {
        font-size: 14px;
        padding: 8px 16px;
    }
}

本项目引用的自定义外部资源

jquery.js