利用 Google 翻译 进行多语言SQL 生成

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>多语言翻译 → SQL 生成器（并行加速版）</title>

    <style>
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont;
            background: #f4f6f8;
            padding: 30px;
        }
        .container {
            max-width: 900px;
            margin: auto;
            background: #fff;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 6px 18px rgba(0,0,0,.08);
        }
        h2 { margin-top: 0; }
        label { font-weight: 600; margin-top: 12px; display: block; }
        input, textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border-radius: 6px;
            border: 1px solid #ccc;
        }
        textarea { height: 70px; }
        button {
            margin-top: 15px;
            padding: 10px 18px;
            border: none;
            background: #1677ff;
            color: #fff;
            font-size: 15px;
            border-radius: 6px;
            cursor: pointer;
        }
        button:disabled {
            background: #999;
        }
        .progress {
            margin-top: 15px;
            background: #eee;
            border-radius: 6px;
            overflow: hidden;
            height: 16px;
            display: none;
        }
        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #1677ff, #69b1ff);
            transition: width .3s;
        }
        pre {
            margin-top: 20px;
            background: #0f172a;
            color: #e5e7eb;
            padding: 18px;
            border-radius: 8px;
            overflow-x: auto;
        }
        .small { color: #666; font-size: 13px; }
    </style>
</head>

<body>
<div class="container">

    <h2>多语言文案 → INSERT SQL（并行翻译加速）</h2>

    <label>lang_tag</label>
    <input id="lang_tag" value="lang_change_tag">

    <label>type</label>
    <input id="type" value="1">

    <label>zh_CN（源文案）</label>
    <textarea id="zh_CN"> 待替换的多语言 </textarea>

    <button id="btn" onclick="generateSQL()">开始翻译并生成 SQL</button>

    <div class="progress" id="progress">
        <div class="progress-bar" id="progressBar"></div>
    </div>

    <div class="small" id="status"></div>

    <pre id="output"></pre>

</div>

<script>
    const langs = [
        'zh_CN','zh_HK','en','ja','ko','ar','fr','es','ru',
        'de','pt','hi','vi','tl','th','tr','it','id'
    ];

    const langMap = {
        zh_CN:'zh-CN', zh_HK:'zh-TW', en:'en', ja:'ja', ko:'ko',
        ar:'ar', fr:'fr', es:'es', ru:'ru', de:'de',
        pt:'pt', hi:'hi', vi:'vi', tl:'tl', th:'th',
        tr:'tr', it:'it', id:'id'
    };

    const esc = s =>
        s.replace(/\\/g,'\\\\').replace(/'/g,"''").replace(/\n/g,'\\n');

    const protect = t => t.replace(/%s/g,'__VAR__');
    const restore = t => t.replace(/__VAR__/g,'%s');

    async function translate(text, lang, onDone) {
        if (lang === 'zh_CN') {
            onDone();
            return text;
        }

        const url =
            'https://translate.googleapis.com/translate_a/single' +
            '?client=gtx&sl=zh-CN&tl=' + langMap[lang] +
            '&dt=t&q=' + encodeURIComponent(protect(text));

        const res = await fetch(url);
        const json = await res.json();
        onDone();
        return restore(json[0].map(i => i[0]).join(''));
    }

    async function generateSQL() {
        const btn = document.getElementById('btn');
        const progress = document.getElementById('progress');
        const bar = document.getElementById('progressBar');
        const status = document.getElementById('status');

        btn.disabled = true;
        progress.style.display = 'block';
        bar.style.width = '0%';
        status.textContent = '翻译中...';

        let done = 0;
        const total = langs.length;

        const tick = () => {
            done++;
            bar.style.width = Math.round(done / total * 100) + '%';
            status.textContent = `翻译进度：${done}/${total}`;
        };

        const zh_CN = document.getElementById('zh_CN').value;

        // ⭐ 并行请求
        const results = await Promise.all(
            langs.map(l => translate(zh_CN, l, tick))
        );

        const sql = `INSERT INTO static_lang (
lang_tag, \`type\`,
${langs.join(', ')}
) VALUES (
'${document.getElementById('lang_tag').value}',
${document.getElementById('type').value},
${results.map(t => `'${esc(t)}'`).join(',\n')}
);`;

        document.getElementById('output').textContent = sql;
        status.textContent = '完成 ✅';
        btn.disabled = false;
    }
</script>

</body>
</html>