diff --git a/src/app/tools/text_space_stripper/page.tsx b/src/app/tools/text_space_stripper/page.tsx new file mode 100644 index 0000000..402f0d6 --- /dev/null +++ b/src/app/tools/text_space_stripper/page.tsx @@ -0,0 +1,285 @@ +'use client'; + +import React, { useState } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faCopy, faCheck, faTrash, faEraser, faPlay } from '@fortawesome/free-solid-svg-icons'; +import ToolHeader from '@/components/ToolHeader'; +import { useLanguage } from '@/context/LanguageContext'; + +// 添加CSS变量样式 +const styles = { + card: "card p-6", + input: "search-input w-full", + textarea: "w-full p-3 bg-block border border-purple-glow rounded-lg text-primary focus:border-[#6366F1] focus:outline-none focus:ring-1 focus:ring-[#6366F1] transition-all resize-none", + label: "text-sm text-secondary font-medium mb-1", + secondaryText: "text-sm text-tertiary", + button: "text-left w-full px-3 py-2 rounded-md text-sm text-secondary hover:bg-block-hover transition-colors", + radioGroup: "flex flex-col sm:flex-row gap-3", + radioItem: "relative flex-1", + radioInput: "absolute opacity-0 w-full h-full cursor-pointer", + radioLabel: "block w-full px-4 py-2 text-center text-sm rounded-md border border-purple-glow/30 cursor-pointer hover:bg-block-hover transition-all", + radioActive: "bg-gradient-to-r from-[#6366F1] to-[#8B5CF6] text-white border-transparent shadow-md shadow-[#6366F1]/20", + iconButton: "text-tertiary hover:text-purple transition-colors", +} + +// 去空格模式类型 +type StripMode = 'both' | 'start' | 'end' | 'all' | 'newlines' | 'all_and_newlines'; + +export default function TextSpaceStripper() { + const { t } = useLanguage(); + + // 输入文本 + const [inputText, setInputText] = useState(''); + // 输出文本 + const [outputText, setOutputText] = useState(''); + // 去除模式 + const [stripMode, setStripMode] = useState('both'); + // 复制状态 + const [copied, setCopied] = useState(false); + + // 清空输入 + const clearText = () => { + setInputText(''); + setOutputText(''); + }; + + // 处理文本 + const processText = () => { + if (!inputText) return; + + let result = inputText; + + switch (stripMode) { + case 'both': + result = inputText.trim(); + break; + case 'start': + result = inputText.replace(/^\s+/, ''); + break; + case 'end': + result = inputText.replace(/\s+$/, ''); + break; + case 'all': + result = inputText.replace(/\s+/g, ''); + break; + case 'newlines': + result = inputText.replace(/[\r\n]+/g, ''); + break; + case 'all_and_newlines': + // 先去除所有换行符,再去除所有空格 + result = inputText.replace(/[\r\n]+/g, ' ').replace(/\s+/g, ''); + break; + default: + break; + } + + setOutputText(result); + }; + + // 复制结果 + const copyResult = () => { + if (!outputText) return; + + navigator.clipboard.writeText(outputText) + .then(() => { + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }) + .catch(err => console.error(t('tools.text_space_stripper.copy_failed'), err)); + }; + + // 加载示例 + const loadExample = () => { + setInputText(' 这是一个 带有多余空格 和换行符的文本示例。\n\n这是 第二行 内容。\n 还有第三行内容。 \n'); + setOutputText(''); + }; + + return ( +
+ + + {/* 主内容区 */} +
+ {/* 左侧 - 输入和设置 */} +
+ {/* 输入区域 */} +
+

{t('tools.text_space_stripper.input_text')}

+