<!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>
