为你的子比主题添加一个文字加密解密页面[v2.0改进版]

介绍

本项目利用mdui进行开发。加密方式采用多种混合加密

教程

进入宝塔Linux面板-wp-content-themes-zibll-pages新建php文件，里面添加下面代码

<?php
/*
Template Name: 文字加密解密工具
*/
get_header(); ?>
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
<style>
    :root {
        --mdui-shape-corner-extra-small: 0.3rem;
    }
    mdui-button {
        border-radius: var(--mdui-shape-corner-extra-small);
        width: 50%;
        flex: 1;
        margin-right: 10px;
    }

    .btn_moxing {
        display: flex;
    }

    .dialog-container {
        white-space: pre-wrap; 
        word-break: break-all;
    }


.donation-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

.donation-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.donation-qrcode {
    width: 150px;
    height: 150px;
}

.donation-item span {
    color: gray;
    font-size: 14px;
    margin-top: 10px;
}
    .moxing_text{
        text-align: center;
        font-size: 20px;
    }
</style>
<div class="wrap">
    <div id="primary" class="content-area">
        <main id="main" class="site-main">
            <div class="container mt-5">
                <h1 class="mb-4" style="text-align:center;">文字加密解密工具</h1>
                <div class="mdui-tab" mdui-tab>
                    <a href="#encrypt" class="mdui-ripple">文字加密</a>
                    <a href="#decrypt" class="mdui-ripple">文字解密</a>
                </div>

                <div class="mdui-tab-content">
                    <div id="encrypt" class="mdui-p-a-2">
                        <form id="encrypt-form">
                            <div class="mdui-textfield">
                                <label class="mdui-textfield-label">输入要加密的文本:</label>
                                <textarea class="mdui-textfield-input" id="input-text" rows="4"></textarea>
                            </div>
                            <div class="btn_moxing">
                                <mdui-button onclick="moxing_jiami_encryptText()">执行加密</mdui-button>
                                <mdui-button onclick="clearInputText()">清空输入</mdui-button>
                                <mdui-button onclick="showDonationDialog()">赞助站长</mdui-button>
                            </div>
                        </form>
                        <mdui-dialog id="donation-dialog" close-on-overlay-click>
                            <div class="dialog-container donation-container">
                                <div class="donation-item">
                                    <p>您的赞助就是我们的最大动力</p>
                                    <img src="https://www.wniui.com/wp-content/uploads/2024/08/8139a937a820240829103231.webp" alt="支付宝二维码" class="donation-qrcode">
                                    <br>
                                    <span>支付宝扫一扫</span>
                                </div>
                                <div class="donation-item">
                                    <p>您的赞助就是我们的最大动力</p>
                                    <img src="https://www.wniui.com/wp-content/uploads/2024/08/9db37f61bf20240829103436.webp" alt="微信二维码" class="donation-qrcode">
                                    <br>
                                    <span>微信扫一扫</span>
                                </div>
                            </div>
                            <mdui-button slot="action" variant="text" onclick="closeDialog('donation-dialog')">关闭</mdui-button>
                        </mdui-dialog>
                        <mdui-dialog id="encrypt-dialog" close-on-overlay-click>
                            <div class="dialog-container" id="encrypt-result"></div>
                            <mdui-button slot="action" variant="text" onclick="closeDialog('encrypt-dialog')">取消</mdui-button>
                            <mdui-button slot="action" variant="tonal" onclick="copyText('encrypt-dialog')">复制</mdui-button>
                        </mdui-dialog>
                    </div>

                    <div id="decrypt" class="mdui-p-a-2">
                        <form id="decrypt-form">
                            <div class="mdui-textfield">
                                <label class="mdui-textfield-label">输入要解密的密文:</label>
                                <textarea class="mdui-textfield-input" id="input-ciphertext" rows="4"></textarea>
                            </div>
                            <div class="btn_moxing">
                                <mdui-button filled onclick="moxing_jiami_decryptText()">执行解密</mdui-button>
                                <mdui-button onclick="clearInputCiphertext()">清空密文</mdui-button>
                            </div>
                        </form>
                        <mdui-dialog id="decrypt-dialog" close-on-overlay-click>
                            <div class="dialog-container" id="decrypt-result"></div>
                            <mdui-button slot="action" variant="text" onclick="closeDialog('decrypt-dialog')">关闭</mdui-button>
                            <mdui-button slot="action" variant="tonal" onclick="copyText('decrypt-dialog')">复制</mdui-button>
                        </mdui-dialog>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<?php get_footer(); ?>

<script>
function clearInputText() {
    document.getElementById('input-text').value = '';
}

function clearInputCiphertext() {
    document.getElementById('input-ciphertext').value = '';
}

async function moxing_jiami_encryptText() {
    const inputText = document.getElementById('input-text').value;

    if (!inputText) {
        alert("请输入文本");
        return;
    }

    try {
        const md5Hash = CryptoJS.MD5(inputText).toString();
        const aesEncrypted = await moxing_jiami_encryptAES(md5Hash + inputText);
        const encryptedText = aesEncrypted;

        document.getElementById('encrypt-result').innerText = `${encryptedText}`;
        document.getElementById('encrypt-dialog').open = true;
    } catch (error) {
        console.error(error);
        alert("加密失败，请检查输入");
    }
}

async function moxing_jiami_decryptText() {
    const inputCiphertext = document.getElementById('input-ciphertext').value;

    if (!inputCiphertext) {
        alert("请输入密文");
        return;
    }

    try {
        const aesDecrypted = await moxing_jiami_decryptAES(inputCiphertext);
        const md5Hash = aesDecrypted.substring(0, 32);
        const originalText = aesDecrypted.substring(32);
        const originalMd5Hash = CryptoJS.MD5(originalText).toString();

        if (md5Hash === originalMd5Hash) {
            document.getElementById('decrypt-result').innerText = `${originalText}`;
            document.getElementById('decrypt-dialog').open = true;
        } else {
            throw new Error("解密失败");
        }
    } catch (error) {
        console.error(error);
        alert("解密失败，请检查输入");
    }
}

async function moxing_jiami_encryptAES(text) {
    const key = CryptoJS.enc.Utf8.parse('your-secret-key-here');  
    const iv = CryptoJS.lib.WordArray.random(16);  
    const encrypted = CryptoJS.AES.encrypt(text, key, { iv });
    return `${iv.toString()}|${encrypted.ciphertext.toString()}`;
}

async function moxing_jiami_decryptAES(ciphertext) {
    const [ivStr, cipherStr] = ciphertext.split('|');
    const key = CryptoJS.enc.Utf8.parse('your-secret-key-here');  
    const iv = CryptoJS.enc.Hex.parse(ivStr);
    const decrypted = CryptoJS.AES.decrypt({ ciphertext: CryptoJS.enc.Hex.parse(cipherStr) }, key, { iv });
    return decrypted.toString(CryptoJS.enc.Utf8);
}

function closeDialog(dialogId) {
    document.getElementById(dialogId).open = false;
}

function copyText(dialogId) {
    const dialog = document.getElementById(dialogId);
    const resultElement = dialog.querySelector('.dialog-container');
    const textToCopy = resultElement.innerText;
    navigator.clipboard.writeText(textToCopy).then(() => {
        alert("已复制到剪贴板");
    }).catch(err => {
        console.error('复制失败:', err);
        alert("复制失败，请重试");
    });
    dialog.open = false;
}

function showDonationDialog() {
    const dialogHtml = `
                <div class="moxing_text">
                <p>您的每一次赞助都是对我们最大的支持与鼓励</p>
            </div>
        <div class="dialog-container donation-container">
            <div class="donation-item">
                <img src="https://moxingbk.com/demo/skm/zfb.jpg" alt="支付宝二维码" class="donation-qrcode">
                <span>支付宝扫一扫</span>
            </div>
            <div class="donation-item">
                <img src="https://moxingbk.com/demo/skm/wx.png" alt="微信二维码" class="donation-qrcode">
                <span>微信扫一扫</span>
            </div>
        </div>
    `;
    document.getElementById('donation-dialog').innerHTML = dialogHtml;
    document.getElementById('donation-dialog').open = true;
}
</script>

<link href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>