Skip to content

Commit ff6ca07

Browse files
CodeGlimpseCodeGlimpse
committed
feat: 添加 SHA 在线哈希生成工具
- 新增中文和英文文档页面，介绍 SHA 工具的使用方法和可用算法 - 实现前端 JavaScript 工具，支持 SHA-1、SHA-256、SHA-384 和 SHA-512 哈希计算 - 工具包含输入文本区域、算法选择、大小写格式切换、生成和清除功能 - 使用 Web Crypto API 进行哈希计算，支持实时生成和结果复制 - 提供多语言界面（中文和英文），根据页面语言自动切换
1 parent 1ec8722 commit ff6ca07

3 files changed

Lines changed: 247 additions & 0 deletions

File tree

‎assets/js/tools/sha.js‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
(function() {
2+
const container = document.getElementById('tool-sha');
3+
if (!container) return;
4+
5+
const lang = container.getAttribute('data-lang') || 'zh-cn';
6+
7+
const i18n = {
8+
'zh-cn': {
9+
labelInput: '输入内容',
10+
labelOutput: 'SHA 哈希值',
11+
placeholderInput: '在此输入需要加密的文本...',
12+
btnHash: '生成 (Generate)',
13+
btnClear: '清空内容',
14+
copyBtn: '复制结果',
15+
copied: '已复制',
16+
algoLabel: '算法选择',
17+
caseLabel: '输出格式',
18+
caseLower: '小写',
19+
caseUpper: '大写',
20+
errorCrypto: '浏览器不支持 Web Crypto API',
21+
errorAlgo: '当前浏览器不支持该算法'
22+
},
23+
'en': {
24+
labelInput: 'Input Content',
25+
labelOutput: 'SHA Hash',
26+
placeholderInput: 'Enter text to hash...',
27+
btnHash: 'Generate',
28+
btnClear: 'Clear',
29+
copyBtn: 'Copy Result',
30+
copied: 'Copied',
31+
algoLabel: 'Algorithm',
32+
caseLabel: 'Output Case',
33+
caseLower: 'Lowercase',
34+
caseUpper: 'Uppercase',
35+
errorCrypto: 'Browser does not support Web Crypto API',
36+
errorAlgo: 'Algorithm not supported by your browser'
37+
}
38+
};
39+
40+
const t = i18n[lang] || i18n['en'];
41+
42+
container.innerHTML = `
43+
<style>
44+
#tool-sha .tool-container { max-width: 100%; }
45+
#tool-sha .input-group { margin-bottom: 1.5rem; }
46+
#tool-sha label { font-weight: bold; font-size: 1.8rem; color: var(--card-text-color-main); display: block; margin-bottom: 0.5rem; }
47+
#tool-sha textarea {
48+
width: 100%;
49+
padding: 1.2rem;
50+
border: 1px solid var(--border-color);
51+
border-radius: 8px;
52+
background: var(--body-background);
53+
color: var(--card-text-color-main);
54+
font-family: 'Fira Code', monospace;
55+
font-size: 1.4rem;
56+
line-height: 1.6;
57+
resize: vertical;
58+
outline: none;
59+
transition: border-color 0.2s;
60+
}
61+
#tool-sha textarea:focus { border-color: var(--accent-color); }
62+
#tool-sha .button-group { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin: 1.5rem 0 2rem 0; }
63+
#tool-sha .btn {
64+
padding: 1rem 2rem;
65+
border: none;
66+
border-radius: 6px;
67+
cursor: pointer;
68+
font-weight: bold;
69+
font-size: 1.4rem;
70+
transition: all 0.2s;
71+
}
72+
#tool-sha .btn-primary { background: var(--accent-color); color: #fff; }
73+
#tool-sha .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
74+
#tool-sha .btn-secondary { background: var(--body-background); border: 1px solid var(--border-color); color: var(--card-text-color-main); }
75+
#tool-sha .btn-secondary:hover { border-color: var(--accent-color); color: var(--accent-color); }
76+
77+
#tool-sha .options-group { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: 1.4rem; color: var(--card-text-color-main); }
78+
#tool-sha .options-group select {
79+
padding: 0.5rem;
80+
border: 1px solid var(--border-color);
81+
border-radius: 4px;
82+
background: var(--body-background);
83+
color: var(--card-text-color-main);
84+
font-size: 1.4rem;
85+
outline: none;
86+
}
87+
#tool-sha .options-group select:focus { border-color: var(--accent-color); }
88+
89+
#tool-sha .result-group { position: relative; margin-top: 2rem; }
90+
#tool-sha .btn-copy {
91+
position: absolute;
92+
right: 1rem;
93+
top: 3.5rem;
94+
padding: 0.4rem 1rem;
95+
font-size: 1.2rem;
96+
background: var(--accent-color);
97+
color: #fff;
98+
border-radius: 4px;
99+
border: none;
100+
cursor: pointer;
101+
}
102+
</style>
103+
<div class="tool-container">
104+
<div class="input-group">
105+
<label>${t.labelInput}</label>
106+
<textarea id="sha-input" rows="8" placeholder="${t.placeholderInput}"></textarea>
107+
</div>
108+
<div class="button-group">
109+
<button class="btn btn-primary" id="sha-generate">${t.btnHash}</button>
110+
<button class="btn btn-secondary" id="sha-clear">${t.btnClear}</button>
111+
<div class="options-group">
112+
<span>${t.algoLabel}:</span>
113+
<select id="sha-algo">
114+
<option value="SHA-1">SHA-1</option>
115+
<option value="SHA-256" selected>SHA-256</option>
116+
<option value="SHA-384">SHA-384</option>
117+
<option value="SHA-512">SHA-512</option>
118+
</select>
119+
<span>${t.caseLabel}:</span>
120+
<input type="radio" id="sha-case-lower" name="sha-case" value="lower" checked>
121+
<label for="sha-case-lower" style="display:inline; font-size: 1.4rem; margin-right: 0.5rem; font-weight: normal;">${t.caseLower}</label>
122+
<input type="radio" id="sha-case-upper" name="sha-case" value="upper">
123+
<label for="sha-case-upper" style="display:inline; font-size: 1.4rem; font-weight: normal;">${t.caseUpper}</label>
124+
</div>
125+
</div>
126+
<div class="input-group result-group" id="sha-result-group" style="display: none;">
127+
<label>${t.labelOutput}</label>
128+
<textarea id="sha-output" rows="4" readonly></textarea>
129+
<button class="btn-copy" id="sha-copy">${t.copyBtn}</button>
130+
</div>
131+
</div>
132+
`;
133+
134+
const input = document.getElementById('sha-input');
135+
const output = document.getElementById('sha-output');
136+
const resultGroup = document.getElementById('sha-result-group');
137+
const btnGenerate = document.getElementById('sha-generate');
138+
const btnClear = document.getElementById('sha-clear');
139+
const btnCopy = document.getElementById('sha-copy');
140+
const algoSelect = document.getElementById('sha-algo');
141+
const caseRadios = document.getElementsByName('sha-case');
142+
143+
async function generateHash() {
144+
const str = input.value;
145+
if (!str) {
146+
resultGroup.style.display = 'none';
147+
return;
148+
}
149+
150+
if (!window.crypto || !window.crypto.subtle) {
151+
alert(t.errorCrypto);
152+
return;
153+
}
154+
155+
const algo = algoSelect.value;
156+
const msgUint8 = new TextEncoder().encode(str);
157+
158+
try {
159+
const hashBuffer = await crypto.subtle.digest(algo, msgUint8);
160+
const hashArray = Array.from(new Uint8Array(hashBuffer));
161+
let hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
162+
163+
const isUpper = document.getElementById('sha-case-upper').checked;
164+
if (isUpper) {
165+
hashHex = hashHex.toUpperCase();
166+
}
167+
168+
output.value = hashHex;
169+
resultGroup.style.display = 'block';
170+
} catch (e) {
171+
console.error(e);
172+
alert(t.errorAlgo);
173+
}
174+
}
175+
176+
btnGenerate.onclick = generateHash;
177+
input.oninput = generateHash;
178+
algoSelect.onchange = generateHash;
179+
caseRadios.forEach(radio => {
180+
radio.onchange = generateHash;
181+
});
182+
183+
btnClear.onclick = () => {
184+
input.value = '';
185+
output.value = '';
186+
resultGroup.style.display = 'none';
187+
input.focus();
188+
};
189+
190+
btnCopy.onclick = () => {
191+
output.select();
192+
document.execCommand('copy');
193+
const originalText = btnCopy.innerText;
194+
btnCopy.innerText = t.copied;
195+
setTimeout(() => { btnCopy.innerText = originalText; }, 2000);
196+
};
197+
})();

‎content/en/tools/sha/index.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: "SHA Hash Generator"
3+
description: "Online SHA hash generator. Generate SHA-1, SHA-256, SHA-384, and SHA-512 hashes from text easily."
4+
date: 2026-03-20
5+
layout: "page"
6+
---
7+
8+
Secure Hash Algorithms (SHA) are a family of cryptographic hash functions designed by the NSA. They are widely used for security applications and data integrity verification.
9+
10+
{{< tool id="sha" >}}
11+
12+
### How to Use SHA Generator
13+
1. Enter the text or string you want to hash in the input field.
14+
2. Select the desired SHA algorithm (SHA-1, SHA-256, SHA-384, or SHA-512) from the dropdown.
15+
3. Choose the output format (Lowercase or Uppercase).
16+
4. The hash will be generated automatically as you type, or you can click the "Generate" button.
17+
5. Copy the resulting hash for your use.
18+
19+
### Available Algorithms
20+
- **SHA-1**: Produces a 160-bit (40-character) hash. No longer considered secure for cryptographic purposes but still used for non-security tasks like Git checksums.
21+
- **SHA-256**: Part of the SHA-2 family, produces a 256-bit (64-character) hash. It is currently one of the most widely used hash functions (e.g., in Bitcoin).
22+
- **SHA-384**: A more secure version of SHA-2, producing a 384-bit (96-character) hash.
23+
- **SHA-512**: The strongest of the SHA-2 family, producing a 512-bit (128-character) hash.
24+
25+
> **Note**: For modern security needs, SHA-256 or higher is recommended. SHA-1 is considered weak and should be avoided for sensitive data.

‎content/zh-cn/tools/sha/index.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: "SHA 在线加密"
3+
description: "在线 SHA 哈希生成工具。快速生成 SHA-1, SHA-256, SHA-384, 和 SHA-512 哈希值。"
4+
date: 2026-03-20
5+
layout: "page"
6+
---
7+
8+
安全哈希算法（SHA）是由美国国家安全局（NSA）设计的一系列密码哈希函数。它们广泛用于安全应用和数据完整性验证。
9+
10+
{{< tool id="sha" >}}
11+
12+
### 如何使用 SHA 生成器
13+
1. 在输入框中输入您想要加密的文本或字符串。
14+
2. 从下拉菜单中选择所需的 SHA 算法（SHA-1, SHA-256, SHA-384, 或 SHA-512）。
15+
3. 选择输出格式（小写或大写）。
16+
4. 哈希值会在您输入时自动生成，或者您可以点击“生成”按钮。
17+
5. 复制生成的哈希值供您使用。
18+
19+
### 可用算法
20+
- **SHA-1**：产生 160 位（40 个字符）的哈希值。虽然在密码学中已不再被认为是安全的，但仍用于非安全任务，如 Git 校验和。
21+
- **SHA-256**：SHA-2 家族的一部分，产生 256 位（64 个字符）的哈希值。它是目前使用最广泛的哈希函数之一（例如在比特币中）。
22+
- **SHA-384**：SHA-2 的更安全版本，产生 384 位（96 个字符）的哈希值。
23+
- **SHA-512**：SHA-2 家族中最强大的算法，产生 512 位（128 个字符）的哈希值。
24+
25+
> **提示**：对于现代安全需求，建议使用 SHA-256 或更高版本。SHA-1 已被认为存在弱点，应避免用于敏感数据。

0 commit comments

Comments
 (0)