index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Curl 生成器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f9f9f9;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .input-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 20px;
        }

        .input-group {
            flex: 1;
            min-width: 300px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            outline: none;
            transition: border-color 0.3s ease;
        }

        input:hover,
        select:hover,
        textarea:hover {
            border-color: #999;
        }

        textarea {
            resize: none;
        }

        .button-row {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        button {
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
            border-radius: 4px;
            margin-right: 10px;
        }

        button:hover {
            background-color: #0056b3;
        }

        #curl-output {
            margin-top: 20px;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            white-space: pre-wrap;
            border-radius: 4px;
            overflow-x: auto; /* 添加此行 */
        }

        .required {
            color: red;
        }

        .error {
            color: red;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

<h1>ES Curl 命令生成器</h1>

<div class="container">

    <div class="input-row">
        <div class="input-group">
            <label for="url"><span class="required">*</span> ES 地址：</label>
            <input type="text" id="url" placeholder="例如：http://localhost:9200">
        </div>
        <div class="input-group">
            <label for="index"><span class="required">*</span> 索引名：</label>
            <input type="text" id="index" placeholder="请输入索引名">
        </div>
    </div>

    <div class="input-row">
        <div class="input-group">
            <label for="username">用户名（选填）：</label>
            <input type="text" id="username" placeholder="如果设置了用户名请输入">
        </div>
        <div class="input-group">
            <label for="password">密码（选填）：</label>
            <input type="password" id="password" placeholder="如果设置了密码请输入">
        </div>
    </div>

    <div class="input-row">
        <div class="input-group">
            <label for="operation"><span class="required">*</span> 选择操作类型：</label>
            <select id="operation" onchange="updateForm()">
                <option value="search">根据条件查询</option>
                <option value="searchById">根据 ID 查询</option>
                <option value="create">新增数据</option>
                <option value="updateById">根据 ID 更新数据</option>
                <option value="update">根据自定义条件更新数据</option>
                <option value="deleteById">根据 ID 删除数据</option>
                <option value="delete">根据自定义条件删除数据</option>
                <option value="count">查询索引数据条数</option>
                <option value="mapping">查询 Mapping</option>
                <option value="addField">新增索引字段</option>
                <option value="setting">settings查询</option>
                <option value="createIndex">创建索引</option>
                <option value="deleteIndex">删除索引</option>
                <option value="bulk">批量操作</option>
                <option value="scroll">滚动查询</option>
            </select>
        </div>
    </div>

    <div id="query-section" class="input-row">
        <div class="input-group full-width">
            <label for="query">查询条件（JSON格式，选填）：</label>
            <textarea id="query" rows="6" placeholder='例如：{ "from": 0, "size": 20 }'></textarea>
        </div>
    </div>

    <div id="id-section" class="input-row" style="display:none;">
        <div class="input-group full-width">
            <label for="id">文档 ID：</label>
            <input type="text" id="id" placeholder="请输入文档 ID">
        </div>
    </div>

    <div id="error-message" class="error"></div>

    <div class="button-row">
        <button onclick="generateCurl()">生成 curl 命令</button>
        <button onclick="copyCurl()">复制 curl 命令</button>
    </div>

    <div id="curl-output"></div>

</div>

<script>
    function updateForm() {
        const operation = document.getElementById("operation").value;
        const querySection = document.getElementById("query-section");
        const idSection = document.getElementById("id-section");
        let queryLabel = "";
        let queryPlaceholder = "";

        switch (operation) {
            case "search":
                queryLabel = "查询条件（JSON格式，选填）：";
                queryPlaceholder = '{ "from": 0, "size": 20 }';
                idSection.style.display = "none";
                break;
            case "searchById":
                queryLabel = "文档 ID：";
                queryPlaceholder = '例如：123';
                idSection.style.display = "block";
                break;
            case "create":
                queryLabel = "新增数据（JSON格式）：";
                queryPlaceholder = '{ "field1": "value1", "field2": 123 }';
                idSection.style.display = "block";
                break;
            case "updateById":
                queryLabel = "根据 ID 更新数据（JSON格式）：";
                queryPlaceholder = '{ "doc": { "field1": "new_value" } }';
                idSection.style.display = "block";
                break;
            case "update":
                queryLabel = "根据自定义条件更新数据（JSON格式）：";
                queryPlaceholder = '{ "doc": { "field1": "new_value" } }';
                idSection.style.display = "none";
                break;
            case "deleteById":
                queryLabel = "删除文档 ID：";
                queryPlaceholder = '例如：123';
                idSection.style.display = "block";
                break;
            case "delete":
                queryLabel = "删除文档 ID：";
                queryPlaceholder = '例如：123';
                idSection.style.display = "block";
                break;
            case "count":
                queryLabel = "查询索引数据条数 无需额外条件";
                queryPlaceholder = '';
                idSection.style.display = "none";
                break;
            case "mapping":
                queryLabel = "查询 Mapping 无需额外条件";
                queryPlaceholder = '';
                idSection.style.display = "none";
                break;
            case "addField":
                queryLabel = "新增索引字段（JSON格式）：";
                queryPlaceholder = '{ "properties": { "new_field": { "type": "text" } } }';
                idSection.style.display = "none";
                break;
            case "setting":
                queryLabel = "查询 settings 无需额外条件";
                queryPlaceholder = '';
                idSection.style.display = "none";
                break;
            case "createIndex":
                queryLabel = "创建索引（JSON格式）：";
                queryPlaceholder = '{ "mappings": { "properties": { "field1": { "type": "text" } } } }';
                idSection.style.display = "none";
                break;
            case "deleteIndex":
                queryLabel = "删除索引，无需额外条件";
                queryPlaceholder = '';
                idSection.style.display = "none";
                break;
            case "bulk":
                queryLabel = "批量操作（JSON格式）：";
                queryPlaceholder = '{ "index": { "_id": "1" } }\n{ "field1": "value1" }';
                idSection.style.display = "none";
                break;
            case "scroll":
                queryLabel = "滚动查询条件（JSON格式）：";
                queryPlaceholder = '{ "scroll": "1m", "size": 20, "query": { "match_all": {} } }';
                idSection.style.display = "none";
                break;
            default:
                break;
        }

        document.getElementById("query").placeholder = queryPlaceholder;
        document.getElementById("query").value = "";
        document.getElementById("query").innerText = queryLabel;
    }

    function generateCurl() {
        const url = document.getElementById("url").value.trim();
        const index = document.getElementById("index").value.trim();
        const username = document.getElementById("username").value.trim();
        const password = document.getElementById("password").value.trim();
        const operation = document.getElementById("operation").value;
        const query = document.getElementById("query").value.trim();
        const id = document.getElementById("id").value.trim();
        const errorMessage = document.getElementById("error-message");

        if (!url || !index) {
            errorMessage.textContent = '请填写 ES 地址和索引名！';
            return;
        }

        let authPart = '';
        if (username) {
            if (!password) {
                errorMessage.textContent = '请输入密码或留空用户名！';
                return;
            }
            authPart = `--user ${username}:${password} `;
        }

        if (!username && password) {
            errorMessage.textContent = '请输入用户名或留空密码！';
            return;
        }

        let curlCommand = "";


        switch (operation) {
            case "search":
                curlCommand = `curl ${authPart}-X GET "${url}/${index}/_search?pretty" -H 'Content-Type: application/json' -d '${query}'`;
                break;
            case "searchById":
                if (!id) {
                    errorMessage.textContent = "文档 ID 是必填项。";
                } else {
                    curlCommand = `curl ${authPart}-X GET "${url}/${index}/_doc/${id}?pretty"`;
                }
                break;
            case "create":
                curlCommand = `curl ${authPart}-X POST "${url}/${index}/_doc/${id}?pretty" -H 'Content-Type: application/json' -d '${query}'`;
                break;
            case "updateById":
                if (!id) {
                    errorMessage.textContent = "文档 ID 是必填项。";
                } else {
                    curlCommand = `curl ${authPart}-X POST "${url}/${index}/_update/${id}?pretty" -H 'Content-Type: application/json' -d '${query}'`;
                }
                break;
            case "update":
                curlCommand = `curl ${authPart}-X POST "${url}/${index}/_update_by_query?pretty" -H 'Content-Type: application/json' -d '${query}'`;
                break;
            case "deleteById":
                if (!id) {
                    errorMessage.textContent = "文档 ID 是必填项。";
                } else {
                    curlCommand = `curl ${authPart}-X DELETE "${url}/${index}/_doc/${id}?pretty"`;
                }
                break;
            case "delete":
                curlCommand = `curl ${authPart}-X POST "${url}/${index}/_delete_by_query?pretty" -H 'Content-Type: application/json' -d '${query}'`;
                break;
            case "count":
                curlCommand = `curl ${authPart}-X GET "${url}/${index}/_count?pretty"`;
                break;
            case "mapping":
                curlCommand = `curl ${authPart}-X GET "${url}/${index}/_mapping?pretty"`;
                break;
            case "addField":
                curlCommand = `curl ${authPart}-X PUT "${url}/${index}/_mapping?pretty" -H 'Content-Type: application/json' -d '${query}'`;
                break;
            case "setting":
                curlCommand = `curl ${authPart}-X GET "${url}/${index}/_settings?pretty"`;
                break;
            case "createIndex":
                curlCommand = `curl ${authPart}-X PUT "${url}/${index}?pretty" -H 'Content-Type: application/json' -d '${query}'`;
                break;
            case "deleteIndex":
                curlCommand = `curl ${authPart}-X DELETE "${url}/${index}?pretty"`;
                break;
            case "bulk":
                // 确保 query 以换行符结束，或在生成 query 时每个操作块的末尾添加 \n
                curlCommand = `curl ${authPart}-X POST "${url}/${index}/_bulk?pretty" -H 'Content-Type: application/x-ndjson' --data-binary '\n${query}\n'`;
                break;
            case "scroll":
                curlCommand = `curl ${authPart}-X POST "${url}/${index}/_search?scroll=1m&pretty" -H 'Content-Type: application/json' -d '${query}'\n`;
                curlCommand += `curl ${authPart}-X GET "${url}/_search/scroll?pretty" -H 'Content-Type: application/json' -d '{ "scroll": "1m", "scroll_id": "DXF1ZXJ5QW5kRmV0Y2gBAAAAAA..." }'`;
                break;
            default:
                break;
        }

        
        document.getElementById("curl-output").innerText = curlCommand;
    }

    function copyCurl() {
        const curlOutput = document.getElementById("curl-output");
        if (curlOutput.innerText) {
            navigator.clipboard.writeText(curlOutput.innerText).then(() => {
                // 创建一个临时的 div 元素用于显示提示信息
                const toast = document.createElement("div");
                toast.innerText = "复制成功";
                toast.style.position = "fixed";
                toast.style.top = "50%";
                toast.style.left = "50%";
                toast.style.transform = "translate(-50%, -50%)";
                toast.style.backgroundColor = "#333";
                toast.style.color = "#fff";
                toast.style.padding = "10px 20px";
                toast.style.borderRadius = "5px";
                toast.style.zIndex = "1000";
                toast.style.textAlign = "center";
                toast.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)";

                // 将提示信息添加到页面中
                document.body.appendChild(toast);

                // 1秒后移除提示信息
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 1000);
            }, (err) => {
                console.error("复制失败: ", err);
            });
        } else {
            alert("请先生成 Curl 命令。");
        }
    }
</script>

</body>
</html>