<!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"><!-- Tailwind 配置 --><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>文件行内容编辑器 &copy; 2023</p><p class="text-gray-400 text-sm mt-1">安全提示:所有文件操作均在本地进行,不会上传到服务器</p></div></footer><!-- JavaScript --><script>// 全局变量let fileContent = [];let originalFileContent = [];let currentFile = null;let highlightedLine = null;// DOM 元素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');}// 3秒后自动隐藏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);}});// 按Enter键跳转到指定行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');// 创建Blobconst 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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/web/92958.shtml
繁体地址,请注明出处:http://hk.pswp.cn/web/92958.shtml
英文地址,请注明出处:http://en.pswp.cn/web/92958.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

具有熔断能力和活性探测的服务负载均衡解决方案

一、整体架构设计 1.核心组件 负载均衡器&#xff1a;负责选择可用的服务节点健康检查器&#xff1a;定期检测服务节点的可用性服务节点管理&#xff1a;维护所有可用节点的状态信息 2.负载均衡策略 轮询(Round Robin)随机(Random)加权轮询(Weighted Round Robin)最少连接(Leas…

技术演进中的开发沉思-62 DELPHI VCL系列:VCL下的设计模式

今天聊聊设计模式&#xff0c;当然这个章节目前仅限于DELPHI VCL,因为接下来梳理的Factory/Factory Method、Bootstrap 和 ForEach 这三种设计样例&#xff0c;看似独立&#xff0c;却在实际开发中相互配合&#xff0c;共同构建起高效、灵活的程序架构。在 DELPHI VCL 开发的技…

Docker 101:面向初学者的综合教程

掌握 Docker 已成为软件开发中的一项关键技能。本教程探讨了容器化的世界&#xff0c;包括其核心概念、优缺点&#xff0c;以及开始使用容器化的分步指南。 无论是 Docker 的新手&#xff0c;还是希望复习基础知识的更有经验的开发人员&#xff0c;本指南都能满足需求。 什么…

RTOS YAFFS

在 YAFFS (Yet Another Flash File System) 的语境中&#xff0c;“Check Point” 并不是一个标准的、核心的官方术语。它更可能是对 YAFFS 关键机制 Summary 或 Checkpointing 功能的非正式表述或理解偏差。其核心含义是指 YAFFS 在特定时刻保存文件系统关键元数据的状态&…

【SpringBoot系列-02】自动配置机制源码剖析

【SpringBoot系列-02】自动配置机制源码剖析 咱们天天用Spring Boot&#xff0c;一个SpringBootApplication注解扔进去&#xff0c;啥配置都不用写&#xff0c;项目就跑起来了。你有没有过这种疑惑&#xff1a;那些DispatcherServlet、DataSource是从哪冒出来的&#xff1f;今天…

51单片机-51单片机最小系统

本章概述思维导图&#xff1a;51单片机最小系统51单片机最小系统是51系列单片机&#xff08;如AT89C51、STC89C52等&#xff09;能够独立工作的最简电路配置&#xff0c;它为单片机提供了运行所需的基本条件。51单片机最小系统板是嵌入式系统开发的基础平台&#xff0c;集成了单…

git学习1

目录引入版本控制集中式和分布式版本控制git工作机制代码托管中心Git常用命令设置用户签名初始化本地库查看库状态add和提交版本穿梭git分支操作分支定义分支好处分支操作查看分支创建分支切换分支分支合并&#x1f495;✨&#x1fa77;合并冲突git团队协作团队内协作跨团队协作…

redis原理篇--Dict

Dict数据结构一、Redis字典的核心组件Redis字典由三部分构成&#xff1a;dictht&#xff08;哈希表&#xff09;&#xff1a;存储桶数组与元数据dictEntry&#xff08;哈希节点&#xff09;&#xff1a;存储键值对dict&#xff08;字典主体&#xff09;&#xff1a;包含双哈希表…

静态路由主备切换

在网络中&#xff0c;静态路由的主备切换是实现网络冗余的基础方案之一&#xff0c;通过配置不同优先级的静态路由&#xff0c;确保主用路径故障时&#xff0c;流量能自动切换到备用路径&#xff0c;提升网络可靠性。以下从知识讲解和实验配置两部分详细说明。一、静态路由主备…

PDF处理控件Aspose.PDF教程:在C#、Java、Python中快速缩小PDF

如果您的PDF太大&#xff0c;无法通过电子邮件发送&#xff0c;或者在线加载时间过长&#xff0c;您可以在几秒钟内缩小 PDF 大小。本教程介绍了借助Aspose.PDF使用 C#、Java 和 Python 编程快速缩小PDF的方法。 Aspose.PDF官方试用版下载 通过编程缩小 PDF 尺寸 如果您需要…

AWS EKS 常用命令大全:从基础管理到高级运维

前言 Amazon Elastic Kubernetes Service (EKS) 是 AWS 提供的托管 Kubernetes 服务,大大简化了 K8s 集群的部署和管理工作。作为 EKS 管理员或开发者,熟练掌握 kubectl 命令是日常工作的基础。本文将详细介绍 EKS 环境中常用的 kubectl 命令,涵盖集群管理、工作负载操作、…

GitHub Browser-Use 的部署失败记录:失败了,失败了。。。。

一、项目背景与核心作用 browser-use 是一个开源的浏览器自动化工具&#xff0c;通过集成 AI 智能体&#xff08;如 GPT、Claude、DeepSeek 等大型语言模型&#xff09;&#xff0c;实现用自然语言控制浏览器操作。其核心目标是 简化网页交互自动化&#xff0c;尤其适合复杂、…

调用springboot接口返回403,问题定位及总结

背景在一次与前端联调后端接口时前端返回接口返回状态码是403&#xff0c;前端返回说已经带了请求token。排查 查看后端控制台没有出现任何错误信息。自己postman手动调用接口&#xff0c;发现接口正常。仔细核对前端调用接口与postman请求的区别&#xff0c;没有发现任何问题。…

布隆过滤器原理分析、应用场景、与redis使用案例

一、核心结构与工作原理1.1 数据结构布隆过滤器由以下两部分组成&#xff1a;位数组&#xff08;Bit Array&#xff09;&#xff1a;一个长度为 m 的二进制数组&#xff0c;初始所有位为0。哈希函数组&#xff1a;k 个独立的哈希函数&#xff0c;每个函数将输入元素映射到位数组…

异步并发×编译性能:Dart爬虫的实战突围

Dart凭借其高效的异步并发模型、AOT编译性能和现代化的语法&#xff0c;正成为爬虫开发中值得关注的新选择。特别是对于Flutter应用开发者而言&#xff0c;Dart提供了一种"全栈同语言"的独特优势。 本文我将通过实战代码展示如何利用Dart的核心优势——包括基于Futur…

Day 8: 深度学习综合实战与进阶技术 - 从优化到部署的完整流程

Day 8: 深度学习综合实战与进阶技术 - 从优化到部署的完整流程 🎯 学习目标: 掌握深度学习模型优化、调试、迁移学习等工业级技能,能够构建高性能的深度学习应用 📚 核心概念概览 核心概念解释: 模型优化: 通过正则化、学习率调度等技术提升模型性能和泛化能力 为什么需…

特征工程--机器学习

1、特征工程1.1 概念特征工程&#xff08;Feature Engineering&#xff09;是机器学习项目中非常关键的一步&#xff0c;它是指通过领域知识来选择、创建或修改能够使机器学习模型更好地工作的特征&#xff08;即输入变量&#xff09;。特征工程的目标是提高模型的性能&#xf…

支持任意 MCP 协议的客户端

支持任意 MCP 协议的客户端&#xff08;如&#xff1a;Cursor、Claude、Cline&#xff09;可方便使用高德地图 MCP server。目前支持Streamable HTTP, SSE 和 Node.js I/O 三种接入方式(推荐用户使用Streamable HTTP)。 快速接入-MCP Server|高德地图API

【线性代数】目录

【线性代数】线性方程组与矩阵——&#xff08;1&#xff09;线性方程组与矩阵初步【线性代数】线性方程组与矩阵——行列式【线性代数】线性方程组与矩阵——&#xff08;2&#xff09;矩阵与线性方程组的解【线性代数】线性方程组与矩阵——&#xff08;3&#xff09;线性方程…

豆包新模型+PromptPilot:AI应用开发全流程实战指南

> 当深度推理的豆包大模型遇上智能提示词引擎,传统AI开发中**70%的调试时间被压缩至几分钟**,一场从“手工调参”到“智能优化”的开发范式革命正在发生。 ## 一、技术架构解析:双引擎驱动智能进化 ### 1.1 豆包新模型的技术突破 2025年火山引擎推出的**豆包1.6系列模型…