add
This commit is contained in:
star7th
@@ -0,0 +1,398 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faExchangeAlt, faCopy, faCheck, faEraser, faHistory } from '@fortawesome/free-solid-svg-icons';
|
||||
import ToolHeader from '@/components/ToolHeader';
|
||||
import BackToTop from '@/components/BackToTop';
|
||||
import tools from '@/config/tools';
|
||||
import { useLanguage } from '@/context/LanguageContext';
|
||||
|
||||
// 添加CSS变量样式
|
||||
const styles = {
|
||||
card: "card p-6",
|
||||
container: "min-h-screen flex flex-col max-w-[1440px] mx-auto p-4 md:p-6",
|
||||
textarea: "w-full p-3 bg-block border border-purple-glow rounded-lg text-primary focus:border-purple focus:outline-none focus:ring-1 focus:ring-purple transition-all",
|
||||
label: "text-sm text-secondary font-medium",
|
||||
secondaryText: "text-sm text-tertiary",
|
||||
errorBox: "p-3 bg-red-900/20 border border-red-700/30 rounded-lg text-error",
|
||||
successBox: "p-3 bg-green-900/20 border border-green-700/30 rounded-lg text-success",
|
||||
iconButton: "p-1 text-secondary hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed",
|
||||
directionIndicator: (active: boolean) => active ? "text-primary" : "text-tertiary",
|
||||
historyItem: "flex px-3 py-2 text-sm rounded-lg cursor-pointer text-secondary hover:bg-block-hover transition-colors",
|
||||
noHistoryText: "text-sm text-tertiary py-2 text-center italic",
|
||||
swapButton: "bg-block p-2 rounded-full hover:bg-block-hover transition-colors",
|
||||
encodeLabel: (active: boolean) => `text-sm ${active ? 'text-purple' : 'text-tertiary'} cursor-pointer`,
|
||||
clearButton: "btn-secondary flex items-center gap-2",
|
||||
copyButton: "btn-primary flex items-center gap-2",
|
||||
historyButton: "btn-secondary flex items-center gap-2",
|
||||
}
|
||||
|
||||
// 类型定义
|
||||
type Direction = 'encode' | 'decode';
|
||||
type EncodeMode = 'url' | 'component';
|
||||
|
||||
// 历史记录项目接口
|
||||
interface HistoryItem {
|
||||
id: string;
|
||||
input: string;
|
||||
output: string;
|
||||
direction: Direction;
|
||||
mode: EncodeMode;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
export default function UrlEncoder() {
|
||||
const { t } = useLanguage();
|
||||
// 从工具配置中获取当前工具信息
|
||||
const toolConfig = tools.find(tool => tool.code === 'url_encoder');
|
||||
|
||||
// 状态管理
|
||||
const [inputText, setInputText] = useState('');
|
||||
const [outputText, setOutputText] = useState('');
|
||||
const [direction, setDirection] = useState<Direction>('encode');
|
||||
const [encodeMode, setEncodeMode] = useState<EncodeMode>('url');
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [history, setHistory] = useState<HistoryItem[]>([]);
|
||||
const [showHistory, setShowHistory] = useState(false);
|
||||
|
||||
// 从localStorage加载历史记录
|
||||
useEffect(() => {
|
||||
const savedHistory = localStorage.getItem('urlEncoderHistory');
|
||||
if (savedHistory) {
|
||||
try {
|
||||
setHistory(JSON.parse(savedHistory));
|
||||
} catch (e) {
|
||||
console.error(t('tools.url_encoder.load_history_error'), e);
|
||||
}
|
||||
}
|
||||
}, [t]);
|
||||
|
||||
// 保存历史记录到localStorage
|
||||
useEffect(() => {
|
||||
if (history.length > 0) {
|
||||
localStorage.setItem('urlEncoderHistory', JSON.stringify(history));
|
||||
}
|
||||
}, [history]);
|
||||
|
||||
// 转换文本
|
||||
useEffect(() => {
|
||||
if (!inputText.trim()) {
|
||||
setOutputText('');
|
||||
setError('');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
let result = '';
|
||||
|
||||
if (direction === 'encode') {
|
||||
result = encodeMode === 'url'
|
||||
? encodeURI(inputText)
|
||||
: encodeURIComponent(inputText);
|
||||
} else {
|
||||
result = encodeMode === 'url'
|
||||
? decodeURI(inputText)
|
||||
: decodeURIComponent(inputText);
|
||||
}
|
||||
|
||||
setOutputText(result);
|
||||
setError('');
|
||||
} catch (err) {
|
||||
if (err instanceof Error) {
|
||||
setError(err.message);
|
||||
} else {
|
||||
setError(t('tools.url_encoder.error_processing'));
|
||||
}
|
||||
setOutputText('');
|
||||
}
|
||||
}, [inputText, direction, encodeMode, t]);
|
||||
|
||||
// 反转转换方向
|
||||
const swapDirection = () => {
|
||||
setDirection(prev => prev === 'encode' ? 'decode' : 'encode');
|
||||
setInputText(outputText);
|
||||
setOutputText('');
|
||||
setError('');
|
||||
};
|
||||
|
||||
// 复制输出结果
|
||||
const copyOutput = () => {
|
||||
if (!outputText) return;
|
||||
|
||||
navigator.clipboard.writeText(outputText)
|
||||
.then(() => {
|
||||
setCopied(true);
|
||||
setSuccess(t('tools.url_encoder.copied_to_clipboard'));
|
||||
|
||||
// 添加到历史记录
|
||||
if (inputText.trim() && outputText.trim()) {
|
||||
const newItem: HistoryItem = {
|
||||
id: Date.now().toString(),
|
||||
input: inputText,
|
||||
output: outputText,
|
||||
direction,
|
||||
mode: encodeMode,
|
||||
timestamp: Date.now()
|
||||
};
|
||||
|
||||
setHistory(prev => [newItem, ...prev.slice(0, 9)]); // 保留最近10条记录
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
setSuccess('');
|
||||
}, 2000);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(t('tools.url_encoder.copy_failed'), err);
|
||||
setError(t('tools.url_encoder.copy_failed'));
|
||||
});
|
||||
};
|
||||
|
||||
// 清空输入输出
|
||||
const clearAll = () => {
|
||||
setInputText('');
|
||||
setOutputText('');
|
||||
setError('');
|
||||
setSuccess('');
|
||||
};
|
||||
|
||||
// 从历史记录中恢复
|
||||
const restoreFromHistory = (item: HistoryItem) => {
|
||||
setInputText(item.input);
|
||||
setDirection(item.direction);
|
||||
setEncodeMode(item.mode);
|
||||
setShowHistory(false);
|
||||
};
|
||||
|
||||
// 清空历史记录
|
||||
const clearHistory = () => {
|
||||
setHistory([]);
|
||||
localStorage.removeItem('urlEncoderHistory');
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timestamp: number) => {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{/* 工具头部 */}
|
||||
<ToolHeader
|
||||
toolCode="url_encoder"
|
||||
icon={toolConfig?.icon || faExchangeAlt}
|
||||
title=""
|
||||
description=""
|
||||
/>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* 左侧面板 - 输入区域 */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* 转换选项 */}
|
||||
<div className={styles.card}>
|
||||
<div className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-6 mb-2">
|
||||
{/* 转换方向选择器 */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className={styles.directionIndicator(direction === 'encode')}>
|
||||
{t('tools.url_encoder.original_text')}
|
||||
</span>
|
||||
|
||||
<button onClick={swapDirection} className={styles.swapButton}>
|
||||
<FontAwesomeIcon
|
||||
icon={faExchangeAlt}
|
||||
className={`${direction === 'encode' ? 'text-purple' : 'text-purple rotate-180'} transition-transform`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<span className={styles.directionIndicator(direction === 'decode')}>
|
||||
{t('tools.url_encoder.url_encoded_text')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 编码模式选择器 */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<label className={styles.encodeLabel(encodeMode === 'url')}>
|
||||
<input
|
||||
type="radio"
|
||||
name="encodeMode"
|
||||
value="url"
|
||||
checked={encodeMode === 'url'}
|
||||
onChange={() => setEncodeMode('url')}
|
||||
className="sr-only"
|
||||
/>
|
||||
<span>{t('tools.url_encoder.uri_encoding')}</span>
|
||||
</label>
|
||||
|
||||
<label className={styles.encodeLabel(encodeMode === 'component')}>
|
||||
<input
|
||||
type="radio"
|
||||
name="encodeMode"
|
||||
value="component"
|
||||
checked={encodeMode === 'component'}
|
||||
onChange={() => setEncodeMode('component')}
|
||||
className="sr-only"
|
||||
/>
|
||||
<span>{t('tools.url_encoder.uri_component_encoding')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-sm text-tertiary">
|
||||
<p>
|
||||
{encodeMode === 'url'
|
||||
? t('tools.url_encoder.uri_encoding_description')
|
||||
: t('tools.url_encoder.uri_component_description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* 输入文本区域 */}
|
||||
<div className="space-y-3">
|
||||
<label className={styles.label}>
|
||||
{direction === 'encode' ? t('tools.url_encoder.input_original_text') : t('tools.url_encoder.input_encoded_text')}
|
||||
</label>
|
||||
<textarea
|
||||
className={styles.textarea}
|
||||
value={inputText}
|
||||
onChange={(e) => setInputText(e.target.value)}
|
||||
placeholder={direction === 'encode' ? t('tools.url_encoder.enter_text_to_encode') : t('tools.url_encoder.enter_text_to_decode')}
|
||||
rows={12}
|
||||
/>
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
onClick={clearAll}
|
||||
disabled={!inputText}
|
||||
className={styles.clearButton}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEraser} />
|
||||
{t('tools.url_encoder.clear')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setShowHistory(!showHistory)}
|
||||
className={styles.historyButton}
|
||||
>
|
||||
<FontAwesomeIcon icon={faHistory} />
|
||||
{showHistory ? t('tools.url_encoder.hide_history') : t('tools.url_encoder.show_history')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 输出文本区域 */}
|
||||
<div className="space-y-3">
|
||||
<label className={styles.label}>
|
||||
{direction === 'encode' ? t('tools.url_encoder.encoding_result') : t('tools.url_encoder.decoding_result')}
|
||||
</label>
|
||||
<textarea
|
||||
className={styles.textarea}
|
||||
value={outputText}
|
||||
readOnly
|
||||
placeholder={direction === 'encode' ? t('tools.url_encoder.encoded_result_placeholder') : t('tools.url_encoder.decoded_result_placeholder')}
|
||||
rows={12}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={copyOutput}
|
||||
disabled={!outputText}
|
||||
className={styles.copyButton}
|
||||
>
|
||||
<FontAwesomeIcon icon={copied ? faCheck : faCopy} />
|
||||
{copied ? t('tools.url_encoder.copied') : t('tools.url_encoder.copy_result')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 消息区域 */}
|
||||
{error && <div className={styles.errorBox}>{error}</div>}
|
||||
{success && <div className={styles.successBox}>{success}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧面板 - 历史记录 */}
|
||||
<div className="space-y-6">
|
||||
<div className={styles.card}>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="font-medium text-primary">{t('tools.url_encoder.history')}</h2>
|
||||
|
||||
{history.length > 0 && (
|
||||
<button
|
||||
onClick={clearHistory}
|
||||
className="text-sm text-secondary hover:text-primary transition-colors"
|
||||
>
|
||||
{t('tools.url_encoder.clear_history')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{history.length > 0 ? (
|
||||
<div className="space-y-2 max-h-[500px] overflow-y-auto">
|
||||
{history.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={styles.historyItem}
|
||||
onClick={() => restoreFromHistory(item)}
|
||||
>
|
||||
<div className="flex-1 truncate">
|
||||
<div className="font-medium mb-1 truncate">{item.input.substring(0, 30)}{item.input.length > 30 ? '...' : ''}</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-tertiary">
|
||||
{item.direction === 'encode' ? t('tools.url_encoder.encode') : t('tools.url_encoder.decode')} •
|
||||
{item.mode === 'url' ? ' URI' : ' URI Component'}
|
||||
</span>
|
||||
<span className="text-xs text-tertiary">{formatTime(item.timestamp)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.noHistoryText}>
|
||||
{t('tools.url_encoder.no_history')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 说明卡片 */}
|
||||
<div className={styles.card}>
|
||||
<h2 className="font-medium text-primary mb-4">{t('tools.url_encoder.url_encoding_explanation')}</h2>
|
||||
<div className="space-y-4 text-sm text-tertiary">
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary mb-2">{t('tools.url_encoder.uri_vs_component')}</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><span className="text-primary">encodeURI</span>: {t('tools.url_encoder.encode_uri_description')}</li>
|
||||
<li><span className="text-primary">encodeURIComponent</span>: {t('tools.url_encoder.encode_uri_component_description')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary mb-2">{t('tools.url_encoder.usage_scenarios')}</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>{t('tools.url_encoder.scenario_1')}</li>
|
||||
<li>{t('tools.url_encoder.scenario_2')}</li>
|
||||
<li>{t('tools.url_encoder.scenario_3')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary mb-2">{t('tools.url_encoder.encoding_rules')}</h3>
|
||||
<p>{t('tools.url_encoder.rules_1')}</p>
|
||||
<p>{t('tools.url_encoder.rules_2')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 回到顶部按钮 */}
|
||||
<BackToTop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user