155 lines
7.2 KiB
HTML
155 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="renderer" content="webkit">
|
||
<script>(function(){var t;try{t=localStorage.getItem("hp-theme")}catch(e){}if(!t){t=(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches)?"dark":"light"}document.documentElement.setAttribute("data-theme",t);})();</script>
|
||
<title>编码 / 加解密</title>
|
||
<link rel="icon" href="../assets/img/logo.svg">
|
||
<link rel="stylesheet" href="../assets/css/common.css">
|
||
</head>
|
||
<body>
|
||
<div class="func-bar"><div class="wrap func-bar-inner">
|
||
<a class="btn btn-sm js-fb-back" href="index.php" title="返回功能区首页">← 返回功能区首页</a>
|
||
<span class="func-bar-title">编码 / 加解密</span>
|
||
<a class="btn btn-sm" href="../index.php">首页</a>
|
||
</div></div>
|
||
|
||
<main class="page-main">
|
||
<div class="wrap page-body">
|
||
<div class="panel-card">
|
||
<p class="tip" style="margin-top:0">🔒 本页全部运算均在浏览器本地完成，粘贴的文本不会上传到任何服务器，可放心处理大段内容。MD5 / SHA-224 在无内置加密库时需联网加载组件（仅下载代码，不含你的内容）。</p>
|
||
<div class="field-row" style="align-items:center">
|
||
<label class="fl" style="margin:0" for="selAlgo">算法</label>
|
||
<select id="selAlgo">
|
||
<option value="b64">Base64</option>
|
||
<option value="b32">Base32</option>
|
||
<option value="url">URL 编码</option>
|
||
<option value="unicode">Unicode（\uXXXX）</option>
|
||
<option value="md5">MD5（不可逆）</option>
|
||
<option value="sha1">SHA-1（不可逆）</option>
|
||
<option value="sha224">SHA-224（不可逆）</option>
|
||
<option value="sha256">SHA-256（不可逆）</option>
|
||
<option value="sha384">SHA-384（不可逆）</option>
|
||
<option value="sha512">SHA-512（不可逆）</option>
|
||
</select>
|
||
<div class="seg" id="dirSeg">
|
||
<button type="button" data-dir="enc" class="active">编码</button>
|
||
<button type="button" data-dir="dec">解码</button>
|
||
</div>
|
||
<button type="button" class="btn btn-primary" id="btnRun">执行</button>
|
||
<button type="button" class="btn" id="btnSwap" title="把输出内容放入输入区">输出 → 输入</button>
|
||
<button type="button" class="btn" id="btnClear">清空</button>
|
||
</div>
|
||
<div id="msgBox"></div>
|
||
</div>
|
||
|
||
<div class="io-area">
|
||
<div class="io-box">
|
||
<div class="io-label">
|
||
<span>输入区（可编辑）</span>
|
||
<button type="button" class="btn btn-sm js-copy" data-target="#inText">复制</button>
|
||
</div>
|
||
<textarea id="inText" placeholder="在此粘贴或输入要处理的内容…（支持中文 / emoji）"></textarea>
|
||
</div>
|
||
<div class="io-box">
|
||
<div class="io-label">
|
||
<span>输出区（可编辑）</span>
|
||
<button type="button" class="btn btn-sm js-copy" data-target="#outText">复制</button>
|
||
</div>
|
||
<textarea id="outText" placeholder="结果输出到这里，可手动修改后再次使用"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<button type="button" class="theme-fab js-theme-btn" title="切换昼夜模式" aria-label="切换昼夜模式"><span class="js-theme-icon"></span></button>
|
||
<button type="button" class="theme-fab to-top js-to-top" title="返回顶部" aria-label="返回顶部">↑</button>
|
||
<script src="../assets/js/common.js"></script>
|
||
<script src="../assets/js/codec.js"></script>
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
var HASH_ALGOS = { md5: 'MD5', sha1: 'SHA-1', sha224: 'SHA-224', sha256: 'SHA-256', sha384: 'SHA-384', sha512: 'SHA-512' };
|
||
|
||
var algo = document.getElementById('selAlgo');
|
||
var dirButtons = Array.prototype.slice.call(document.querySelectorAll('#dirSeg button'));
|
||
var inText = document.getElementById('inText');
|
||
var outText = document.getElementById('outText');
|
||
var msgBox = document.getElementById('msgBox');
|
||
|
||
function activeDir() {
|
||
var b = dirButtons.filter(function (x) { return x.classList.contains('active'); })[0];
|
||
return b ? b.getAttribute('data-dir') : 'enc';
|
||
}
|
||
function setMsg(text, isErr) {
|
||
msgBox.innerHTML = text
|
||
? '<div class="' + (isErr ? 'err-msg' : 'ok-msg') + '">' + text + '</div>'
|
||
: '';
|
||
}
|
||
function syncDirectionUI() {
|
||
var isHash = HASH_ALGOS[algo.value] !== undefined;
|
||
dirButtons.forEach(function (b) { b.disabled = isHash; });
|
||
if (isHash) dirButtons.forEach(function (b) { b.classList.remove('active'); });
|
||
else if (!dirButtons.some(function (x) { return x.classList.contains('active'); })) {
|
||
dirButtons[0].classList.add('active');
|
||
}
|
||
}
|
||
|
||
function run() {
|
||
var text = inText.value;
|
||
if (!text) { setMsg('请输入内容', true); inText.focus(); return; }
|
||
var key = algo.value;
|
||
var dir = activeDir();
|
||
var fn = null;
|
||
|
||
if (key === 'b64') fn = dir === 'enc' ? function (t) { return CodecLib.b64Encode(t); } : function (t) { return CodecLib.b64Decode(t); };
|
||
else if (key === 'b32') fn = dir === 'enc' ? function (t) { return CodecLib.base32Encode(t); } : function (t) { return CodecLib.base32Decode(t); };
|
||
else if (key === 'url') fn = dir === 'enc' ? function (t) { return CodecLib.urlEncode(t); } : function (t) { return CodecLib.urlDecode(t); };
|
||
else if (key === 'unicode') fn = dir === 'enc' ? function (t) { return CodecLib.unicodeEncode(t); } : function (t) { return CodecLib.unicodeDecode(t); };
|
||
|
||
if (fn) {
|
||
try {
|
||
outText.value = fn(text);
|
||
setMsg('执行完成', false);
|
||
} catch (e) {
|
||
setMsg('执行出错：' + (e && e.message ? e.message : e), true);
|
||
}
|
||
return;
|
||
}
|
||
var algoName = HASH_ALGOS[key];
|
||
if (algoName) {
|
||
setMsg('正在计算 ' + algoName + ' …', false);
|
||
CodecLib.hashText(algoName, text).then(function (hex) {
|
||
outText.value = hex;
|
||
setMsg('计算完成（' + algoName + '）', false);
|
||
}).catch(function (e) {
|
||
setMsg('计算失败：' + (e && e.message ? e.message : e), true);
|
||
});
|
||
} else {
|
||
setMsg('未知算法', true);
|
||
}
|
||
}
|
||
|
||
algo.addEventListener('change', syncDirectionUI);
|
||
dirButtons.forEach(function (b) {
|
||
b.addEventListener('click', function () {
|
||
if (b.disabled) return;
|
||
dirButtons.forEach(function (x) { x.classList.remove('active'); });
|
||
b.classList.add('active');
|
||
});
|
||
});
|
||
document.getElementById('btnRun').addEventListener('click', run);
|
||
document.getElementById('btnSwap').addEventListener('click', function () {
|
||
if (outText.value) { inText.value = outText.value; setMsg('已将输出内容回填到输入区', false); }
|
||
});
|
||
document.getElementById('btnClear').addEventListener('click', function () {
|
||
inText.value = ''; outText.value = ''; setMsg('', false); inText.focus();
|
||
});
|
||
syncDirectionUI();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|