119 lines
3.7 KiB
HTML
119 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Hello Electron!</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
}
|
|
.argon2-form {
|
|
margin: 20px auto;
|
|
max-width: 500px;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
input[type="text"] {
|
|
padding: 10px;
|
|
width: 70%;
|
|
margin-right: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 3px;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.result {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border-radius: 3px;
|
|
text-align: left;
|
|
word-break: break-all;
|
|
}
|
|
.success {
|
|
background-color: #dff0d8;
|
|
border: 1px solid #d6e9c6;
|
|
color: #3c763d;
|
|
}
|
|
.error {
|
|
background-color: #f2dede;
|
|
border: 1px solid #ebccd1;
|
|
color: #a94442;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Hello Electron 11!</h1>
|
|
<p>这是一个使用Node.js 12和Electron 11初始化的项目。</p>
|
|
<div>
|
|
<p>当前Node.js版本: <script>document.write(process.version)</script></p>
|
|
<p>当前Electron版本: <script>document.write(process.versions.electron)</script></p>
|
|
</div>
|
|
|
|
<!-- Argon2哈希测试表单 -->
|
|
<div class="argon2-form">
|
|
<h2>Argon2哈希测试</h2>
|
|
<input type="text" id="inputText" placeholder="输入要哈希的文本" />
|
|
<button id="hashButton">生成哈希</button>
|
|
<div id="result" class="result"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const { ipcRenderer } = require('electron');
|
|
|
|
document.getElementById('hashButton').addEventListener('click', async () => {
|
|
const inputText = document.getElementById('inputText').value;
|
|
const resultElement = document.getElementById('result');
|
|
|
|
if (!inputText) {
|
|
resultElement.innerHTML = '请输入文本';
|
|
resultElement.className = 'result error';
|
|
return;
|
|
}
|
|
|
|
// 显示加载状态
|
|
resultElement.innerHTML = '正在生成哈希...';
|
|
resultElement.className = 'result';
|
|
|
|
try {
|
|
// 调用主进程的argon2-test接口
|
|
const result = await ipcRenderer.invoke('argon2-test', inputText);
|
|
|
|
if (result.success) {
|
|
resultElement.innerHTML = `成功生成哈希:<br>${result.hash}`;
|
|
resultElement.className = 'result success';
|
|
} else {
|
|
resultElement.innerHTML = `生成哈希失败:<br>${result.error}`;
|
|
resultElement.className = 'result error';
|
|
}
|
|
} catch (error) {
|
|
resultElement.innerHTML = `发生错误:<br>${error.message}`;
|
|
resultElement.className = 'result error';
|
|
}
|
|
});
|
|
|
|
// 允许按Enter键提交表单
|
|
document.getElementById('inputText').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
document.getElementById('hashButton').click();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |