NewHome/func/codec.php

<?php
/**
 * func/codec.php —— 编码 / 加解密工具
 * Base64 / Base32 / URL / Unicode（支持中文与 emoji）双向；MD5 / SHA-1/224/256/384/512 哈希。
 * 输入输出文本区均可自由编辑、可竖向拉伸。
 */
$P = '../';
require_once dirname(__DIR__) . '/includes/layout.php';
require_once __DIR__ . '/_bar.php';

layout_head('编码 / 加解密');
func_bar('编码 / 加解密');
?>
<main class="page-main">
  <div class="wrap page-body">
    <div class="panel-card">
      <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>

<?php layout_theme_fab(); ?>
<?php layout_footer(); ?>
<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>