<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件行內容編輯器</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><script>tailwind.config = {theme: {extend: {colors: {primary: '#3B82F6',secondary: '#10B981',accent: '#6366F1',neutral: '#1F2937',danger: '#EF4444',},fontFamily: {sans: ['Inter', 'system-ui', 'sans-serif'],mono: ['Fira Code', 'monospace'],},}}}</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.text-shadow {text-shadow: 0 2px 4px rgba(0,0,0,0.1);}.transition-height {transition: max-height 0.3s ease-in-out;}.line-number {user-select: none;}}</style>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-gray-800"><header class="bg-white shadow-md fixed w-full top-0 z-50 transition-all duration-300" id="header"><div class="container mx-auto px-4 py-3 flex justify-between items-center"><div class="flex items-center space-x-2"><i class="fa fa-file-text-o text-primary text-2xl"></i><h1 class="text-xl font-bold text-neutral">文件行內容編輯器</h1></div><div class="hidden md:flex items-center space-x-6"><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200 flex items-center"><i class="fa fa-question-circle mr-1"></i> 幫助</a><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200 flex items-center"><i class="fa fa-info-circle mr-1"></i> 關于</a></div></div></header><main class="container mx-auto px-4 pt-24 pb-16"><section class="mb-10 bg-white rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:shadow-xl"><h2 class="text-xl font-semibold mb-4 text-neutral flex items-center"><i class="fa fa-upload text-primary mr-2"></i> 上傳文件</h2><div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-colors duration-300" id="drop-area"><i class="fa fa-file-text-o text-5xl text-gray-400 mb-4"></i><p class="mb-4 text-gray-600">拖放文件到此處，或點擊選擇文件</p><label class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg cursor-pointer transition-all duration-200 transform hover:scale-105"><i class="fa fa-folder-open mr-1"></i> 選擇文件<input type="file" id="file-input" class="hidden" accept=".txt,.c,.cpp,.h,.py,.java,.js,.html,.css,.php"></label><p class="mt-4 text-sm text-gray-500">支持的格式: .txt, .c, .cpp, .h, .py, .java, .js, .html, .css, .php</p></div><div id="file-info" class="mt-4 hidden"><div class="flex items-center p-3 bg-gray-50 rounded-lg border border-gray-200"><i class="fa fa-file text-primary mr-3"></i><div class="flex-grow"><p id="file-name" class="font-medium"></p><p id="file-size" class="text-sm text-gray-500"></p></div><button id="remove-file" class="text-gray-400 hover:text-danger transition-colors"><i class="fa fa-times"></i></button></div></div></section><section class="grid grid-cols-1 lg:grid-cols-3 gap-6" id="editor-section"><div class="lg:col-span-2"><div class="bg-white rounded-xl shadow-lg p-6 h-full"><h2 class="text-xl font-semibold mb-4 text-neutral flex items-center"><i class="fa fa-file-code-o text-primary mr-2"></i> 文件內容</h2><div class="relative"><div class="absolute left-0 top-0 bottom-0 bg-gray-50 border-r border-gray-200 px-3 py-2 overflow-hidden"><pre id="line-numbers" class="text-right text-gray-500 font-mono text-sm line-number"></pre></div><div class="ml-10 pl-4 border-l border-gray-100"><pre id="file-content" class="font-mono text-sm whitespace-pre-wrap break-all max-h-[500px] overflow-auto"></pre></div></div><div class="mt-4 flex justify-between items-center"><div class="text-sm text-gray-500"><span id="total-lines">0 行</span></div><button id="download-file" class="hidden bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 flex items-center"><i class="fa fa-download mr-1"></i> 下載修改后的文件</button></div></div></div><div><div class="bg-white rounded-xl shadow-lg p-6 h-full"><h2 class="text-xl font-semibold mb-4 text-neutral flex items-center"><i class="fa fa-pencil text-primary mr-2"></i> 行編輯</h2><div id="edit-controls" class="space-y-4 opacity-50 pointer-events-none"><div><label for="line-number" class="block text-sm font-medium text-gray-700 mb-1">行號</label><div class="flex"><input type="number" id="line-number" min="1" class="flex-grow px-3 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="輸入行號"><button id="goto-line" class="bg-primary hover:bg-primary/90 text-white px-4 rounded-r-lg transition-colors"><i class="fa fa-search"></i></button></div></div><div><label class="block text-sm font-medium text-gray-700 mb-1">當前行內容</label><div class="relative"><textarea id="current-line-content" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary h-24 resize-none" readonly placeholder="選中行后顯示內容"></textarea></div></div><div><label for="replace-content" class="block text-sm font-medium text-gray-700 mb-1">替換為</label><textarea id="replace-content" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary h-24 resize-none" placeholder="輸入替換內容"></textarea></div><div class="flex space-x-3 pt-2"><button id="replace-line" class="flex-grow bg-accent hover:bg-accent/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-[1.02]"><i class="fa fa-exchange mr-1"></i> 替換</button><button id="reset-edits" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors"><i class="fa fa-refresh"></i></button></div></div><div id="status-message" class="mt-6 p-3 rounded-lg hidden"></div></div></div></section></main><footer class="bg-neutral text-white py-6"><div class="container mx-auto px-4 text-center"><p>文件行內容編輯器 © 2023</p><p class="text-gray-400 text-sm mt-1">安全提示：所有文件操作均在本地進行，不會上傳到服務器</p></div></footer><script>let fileContent = [];let originalFileContent = [];let currentFile = null;let highlightedLine = null;const dropArea = document.getElementById('drop-area');const fileInput = document.getElementById('file-input');const fileInfo = document.getElementById('file-info');const fileName = document.getElementById('file-name');const fileSize = document.getElementById('file-size');const removeFile = document.getElementById('remove-file');const fileContentEl = document.getElementById('file-content');const lineNumbersEl = document.getElementById('line-numbers');const totalLinesEl = document.getElementById('total-lines');const lineNumberInput = document.getElementById('line-number');const gotoLineBtn = document.getElementById('goto-line');const currentLineContent = document.getElementById('current-line-content');const replaceContent = document.getElementById('replace-content');const replaceLineBtn = document.getElementById('replace-line');const resetEditsBtn = document.getElementById('reset-edits');const statusMessage = document.getElementById('status-message');const downloadFileBtn = document.getElementById('download-file');const editControls = document.getElementById('edit-controls');const header = document.getElementById('header');window.addEventListener('scroll', () => {if (window.scrollY > 10) {header.classList.add('py-2', 'shadow-lg');header.classList.remove('py-3', 'shadow-md');} else {header.classList.add('py-3', 'shadow-md');header.classList.remove('py-2', 'shadow-lg');}});function showStatus(message, isError = false) {statusMessage.textContent = message;statusMessage.classList.remove('hidden', 'bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800');if (isError) {statusMessage.classList.add('bg-red-100', 'text-red-800');} else {statusMessage.classList.add('bg-green-100', 'text-green-800');}setTimeout(() => {statusMessage.classList.add('hidden');}, 3000);}function renderFileContent() {fileContentEl.innerHTML = '';lineNumbersEl.innerHTML = '';fileContent.forEach((line, index) => {const lineNumber = document.createElement('span');lineNumber.textContent = `${index + 1}\n`;lineNumber.classList.add('block', 'py-0.5');if (highlightedLine === index + 1) {lineNumber.classList.add('text-primary', 'font-bold');}lineNumbersEl.appendChild(lineNumber);const contentLine = document.createElement('span');contentLine.textContent = line;contentLine.classList.add('block', 'py-0.5', 'whitespace-pre-wrap');if (highlightedLine === index + 1) {contentLine.classList.add('bg-primary/10', 'font-medium');}contentLine.addEventListener('click', () => {selectLine(index + 1);});fileContentEl.appendChild(contentLine);});totalLinesEl.textContent = `${fileContent.length} 行`;}function selectLine(lineNumber) {if (lineNumber < 1 || lineNumber > fileContent.length) {showStatus('無效的行號', true);return;}highlightedLine = lineNumber;lineNumberInput.value = lineNumber;currentLineContent.value = fileContent[lineNumber - 1];const lineElements = fileContentEl.querySelectorAll('span');if (lineElements[lineNumber - 1]) {lineElements[lineNumber - 1].scrollIntoView({ behavior: 'smooth', block: 'center' });}renderFileContent();}function handleFile(file) {currentFile = file;fileName.textContent = file.name;fileSize.textContent = `${(file.size / 1024).toFixed(2)} KB`;fileInfo.classList.remove('hidden');const reader = new FileReader();reader.onload = (e) => {fileContent = e.target.result.split('\n');originalFileContent = [...fileContent]; editControls.classList.remove('opacity-50', 'pointer-events-none');downloadFileBtn.classList.remove('hidden');renderFileContent();showStatus(`成功加載文件: ${file.name}`);};reader.onerror = () => {showStatus('讀取文件時出錯', true);};reader.readAsText(file);}['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {dropArea.addEventListener(eventName, preventDefaults, false);});function preventDefaults(e) {e.preventDefault();e.stopPropagation();}['dragenter', 'dragover'].forEach(eventName => {dropArea.addEventListener(eventName, highlight, false);});['dragleave', 'drop'].forEach(eventName => {dropArea.addEventListener(eventName, unhighlight, false);});function highlight() {dropArea.classList.add('border-primary', 'bg-primary/5');}function unhighlight() {dropArea.classList.remove('border-primary', 'bg-primary/5');}dropArea.addEventListener('drop', handleDrop, false);function handleDrop(e) {const dt = e.dataTransfer;const file = dt.files[0];if (file) {handleFile(file);}}fileInput.addEventListener('change', (e) => {const file = e.target.files[0];if (file) {handleFile(file);}});removeFile.addEventListener('click', () => {fileInput.value = '';fileInfo.classList.add('hidden');fileContent = [];originalFileContent = [];currentFile = null;highlightedLine = null;currentLineContent.value = '';replaceContent.value = '';lineNumberInput.value = '';editControls.classList.add('opacity-50', 'pointer-events-none');downloadFileBtn.classList.add('hidden');renderFileContent();showStatus('文件已移除');});gotoLineBtn.addEventListener('click', () => {const lineNumber = parseInt(lineNumberInput.value);if (!isNaN(lineNumber)) {selectLine(lineNumber);} else {showStatus('請輸入有效的行號', true);}});lineNumberInput.addEventListener('keypress', (e) => {if (e.key === 'Enter') {gotoLineBtn.click();}});replaceLineBtn.addEventListener('click', () => {const lineNumber = parseInt(lineNumberInput.value);if (isNaN(lineNumber) || lineNumber < 1 || lineNumber > fileContent.length) {showStatus('請選擇有效的行號', true);return;}const newContent = replaceContent.value;fileContent[lineNumber - 1] = newContent;currentLineContent.value = newContent;renderFileContent();showStatus(`第 ${lineNumber} 行已更新`);});resetEditsBtn.addEventListener('click', () => {if (originalFileContent.length > 0) {fileContent = [...originalFileContent];currentLineContent.value = '';replaceContent.value = '';lineNumberInput.value = '';highlightedLine = null;renderFileContent();showStatus('已重置為原始文件內容');}});downloadFileBtn.addEventListener('click', () => {if (!currentFile || fileContent.length === 0) return;const content = fileContent.join('\n');const blob = new Blob([content], { type: 'text/plain' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;const originalName = currentFile.name;const extensionIndex = originalName.lastIndexOf('.');let newName;if (extensionIndex > 0) {newName = `${originalName.substring(0, extensionIndex)}-modified${originalName.substring(extensionIndex)}`;} else {newName = `${originalName}-modified`;}a.download = newName;document.body.appendChild(a);a.click();setTimeout(() => {document.body.removeChild(a);URL.revokeObjectURL(url);}, 0);showStatus(`文件已下載: ${newName}`);});dropArea.addEventListener('click', () => {fileInput.click();});</script>
</body>
</html>
