@@ -0,0 +1,40 @@
|
||||
import BaseTool from '../baseTool.js';
|
||||
|
||||
export default class UrlTool extends BaseTool {
|
||||
constructor() {
|
||||
super('url-tool', 'URL 编码/解码');
|
||||
}
|
||||
|
||||
render() {
|
||||
return `
|
||||
<div class="page-container" style="padding: 20px; display:flex; flex-direction:column; gap:15px; height:100%;">
|
||||
<div class="section-header"><button class="back-btn ripple" id="back-btn"><i class="fas fa-arrow-left"></i></button><h1>${this.name}</h1></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:10px;">
|
||||
<textarea id="url-input" class="common-textarea" placeholder="输入 URL..." style="flex:1;"></textarea>
|
||||
<div style="display:flex; gap:10px; justify-content:center;">
|
||||
<button id="btn-encode" class="action-btn ripple"><i class="fas fa-arrow-down"></i> 编码 (Encode)</button>
|
||||
<button id="btn-decode" class="action-btn ripple"><i class="fas fa-arrow-up"></i> 解码 (Decode)</button>
|
||||
</div>
|
||||
<textarea id="url-output" class="common-textarea" placeholder="结果..." style="flex:1;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
init() {
|
||||
document.getElementById('back-btn').addEventListener('click', () => window.mainPage.navigateTo('toolbox'));
|
||||
const input = document.getElementById('url-input');
|
||||
const output = document.getElementById('url-output');
|
||||
|
||||
document.getElementById('btn-encode').addEventListener('click', () => {
|
||||
output.value = encodeURIComponent(input.value);
|
||||
});
|
||||
document.getElementById('btn-decode').addEventListener('click', () => {
|
||||
try {
|
||||
output.value = decodeURIComponent(input.value);
|
||||
} catch (e) {
|
||||
this._notify('错误', '无效的 URL 编码', 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user