shenjianZ/tools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
shenjianZ
2025-05-24 22:25:49 +08:00
commit bcdeef8892
150 changed files with 9734 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
dev-tools/code-formatter/index.html Normal file
View File

@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码格式化工具 - IT工具合集</title>
<link rel="icon" href="../../favicon.svg" type="image/svg+xml">
<link rel="shortcut icon" href="../../favicon.svg" type="image/svg+xml">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
<link rel="stylesheet" href="../../styles.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50 text-gray-900 min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="bg-white shadow-sm border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="../../index.html" class="flex items-center">
<i class="fas fa-chevron-left mr-2"></i>
<span class="text-xl font-bold">工具集</span>
</a>
</div>
<div class="flex items-center space-x-4">
<button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-gray-200">
<i class="fas fa-moon"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- 主要内容 -->
<main class="flex-grow container mx-auto px-4 py-8">
<!-- 工具标题 -->
<div class="text-center mb-8">
<h1 class="text-3xl font-bold mb-2">代码格式化工具</h1>
<p class="text-gray-600 max-w-2xl mx-auto">美化并格式化您的代码，支持多种编程语言</p>
</div>
<!-- 代码格式化工具 -->
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<!-- 工具控制区 -->
<div class="p-6 border-b border-gray-200">
<div class="flex flex-col md:flex-row gap-6">
<!-- 左侧控制面板 -->
<div class="w-full md:w-1/3">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">编程语言</label>
<select id="language-select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500">
<option value="javascript">JavaScript</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="sql">SQL</option>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
<option value="cpp">C++</option>
<option value="php">PHP</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">格式化选项</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" id="opt-indent" class="mr-2" checked>
<span>缩进代码</span>
</label>
<label class="flex items-center">
<input type="checkbox" id="opt-remove-comments" class="mr-2">
<span>删除注释</span>
</label>
<label class="flex items-center">
<input type="checkbox" id="opt-single-quotes" class="mr-2">
<span>使用单引号</span>
</label>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">
缩进空格数: <span id="indent-value">2</span>
</label>
<input type="range" id="indent-slider" min="1" max="8" value="2" class="w-full">
</div>
<div class="flex space-x-2">
<button id="format-btn" class="flex-1 bg-gray-800 hover:bg-black text-white font-medium py-2 px-4 rounded-md transition-colors">
格式化代码
</button>
<button id="copy-btn" class="px-3 py-2 border border-gray-300 rounded-md hover:bg-gray-100">
<i class="far fa-copy"></i>
</button>
</div>
</div>
<!-- 右侧代码输入区 -->
<div class="w-full md:w-2/3">
<label class="block text-sm font-medium text-gray-700 mb-2">输入代码</label>
<div class="relative">
<textarea id="code-input" class="w-full h-64 px-4 py-3 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" placeholder="粘贴您的代码到这里..."></textarea>
<button id="clear-btn" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600">
<i class="fas fa-times-circle"></i>
</button>
</div>
</div>
</div>
</div>
<!-- 格式化结果 -->
<div class="p-6 border-t border-gray-200">
<div class="flex items-center justify-between mb-4">
<h3 class="font-medium">格式化结果</h3>
<div class="flex items-center space-x-2">
<button id="download-btn" class="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-md transition-colors flex items-center">
<i class="fas fa-download mr-1.5"></i>下载
</button>
<select id="theme-select" class="text-sm px-3 py-1.5 border border-gray-200 rounded-md">
<option value="atom-one-dark">深色主题</option>
<option value="atom-one-light">浅色主题</option>
</select>
</div>
</div>
<div id="code-output-container" class="rounded-md overflow-hidden border border-gray-200 bg-gray-800">
<pre><code id="code-output" class="hljs language-javascript h-96 overflow-auto p-4"></code></pre>
</div>
</div>
<!-- 说明和提示 -->
<div class="p-6 bg-gray-50 border-t border-gray-200">
<h3 class="font-medium mb-2">使用说明：</h3>
<ul class="list-disc pl-5 text-gray-600 space-y-1 text-sm">
<li>支持多种编程语言的代码格式化，包括JavaScript、HTML、CSS等</li>
<li>可以调整缩进空格数、引号样式等格式化选项</li>
<li>格式化后的代码支持语法高亮显示</li>
<li>可以复制或下载格式化后的代码</li>
</ul>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<h3 class="text-lg font-semibold mb-3">IT工具合集</h3>
<p class="text-gray-500 text-sm">提供多种实用工具，帮助您提高效率，解决问题。所有工具完全免费使用，无需注册。</p>
<div class="flex space-x-4 mt-3 social-links">
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="github">
<i class="fab fa-github text-xl"></i>
</a>
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="twitter">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="wechat">
<i class="fab fa-weixin text-xl"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-3">快速链接</h3>
<ul class="space-y-2 text-sm text-gray-500 quick-links">
<li><a href="#" class="hover:text-black" data-link-type="about">关于我们</a></li>
<li><a href="#" class="hover:text-black" data-link-type="terms">使用条款</a></li>
<li><a href="#" class="hover:text-black" data-link-type="privacy">隐私政策</a></li>
<li><a href="#" class="hover:text-black" data-link-type="faq">常见问题</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-3">返回主页</h3>
<p class="text-gray-500 text-sm mb-3">查看更多实用的在线工具</p>
<a href="../../index.html" class="inline-flex items-center bg-gray-800 hover:bg-black text-white font-medium py-2 px-4 rounded-md transition-colors">
<i class="fas fa-home mr-2"></i>回到主页
</a>
</div>
</div>
<div class="border-t border-gray-200 mt-6 pt-4 text-center text-gray-500 text-sm">
<p>© 2025 工具集 | 一站式工具合集网站</p>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-css.min.js"></script>
<script src="../../script.js"></script>
<script src="../../footer.js"></script>
<script src="script.js"></script>
</body>
</html>

253
dev-tools/code-formatter/script.js Normal file
View File

@@ -0,0 +1,253 @@
// 代码格式化工具的JavaScript逻辑
document.addEventListener('DOMContentLoaded', function() {
initCodeFormatter();
});
function initCodeFormatter() {
// 获取DOM元素
const languageSelect = document.getElementById('language-select');
const indentSlider = document.getElementById('indent-slider');
const indentValue = document.getElementById('indent-value');
const optIndent = document.getElementById('opt-indent');
const optRemoveComments = document.getElementById('opt-remove-comments');
const optSingleQuotes = document.getElementById('opt-single-quotes');
const codeInput = document.getElementById('code-input');
const codeOutput = document.getElementById('code-output');
const formatBtn = document.getElementById('format-btn');
const copyBtn = document.getElementById('copy-btn');
const clearBtn = document.getElementById('clear-btn');
const downloadBtn = document.getElementById('download-btn');
const themeSelect = document.getElementById('theme-select');
// 初始化highlight.js
hljs.highlightAll();
// 更新缩进值显示
indentSlider.addEventListener('input', function() {
indentValue.textContent = this.value;
});
// 切换代码高亮主题
themeSelect.addEventListener('change', function() {
const currentLink = document.querySelector('link[href*="highlight.js"]');
const newHref = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/${this.value}.min.css`;
currentLink.setAttribute('href', newHref);
});
// 清空代码输入
clearBtn.addEventListener('click', function() {
codeInput.value = '';
codeInput.focus();
});
// 格式化代码
formatBtn.addEventListener('click', function() {
formatCode();
});
// 复制格式化后的代码
copyBtn.addEventListener('click', function() {
const formattedCode = codeOutput.textContent;
if (formattedCode) {
navigator.clipboard.writeText(formattedCode).then(() => {
showNotification('代码已复制到剪贴板');
}).catch(err => {
console.error('复制失败:', err);
});
}
});
// 下载格式化后的代码
downloadBtn.addEventListener('click', function() {
const formattedCode = codeOutput.textContent;
if (!formattedCode) return;
const language = languageSelect.value;
let extension = getFileExtension(language);
const fileName = `formatted-code.${extension}`;
const blob = new Blob([formattedCode], {type: 'text/plain'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
// 格式化代码的主函数
function formatCode() {
const code = codeInput.value.trim();
if (!code) {
showNotification('请输入要格式化的代码', 'error');
return;
}
const language = languageSelect.value;
const indentSize = parseInt(indentSlider.value);
const useIndent = optIndent.checked;
const removeComments = optRemoveComments.checked;
const useSingleQuotes = optSingleQuotes.checked;
// 格式化选项
const options = {
indent_size: indentSize,
indent_with_tabs: false,
preserve_newlines: true,
max_preserve_newlines: 2,
space_in_empty_paren: false,
jslint_happy: false,
space_after_anon_function: false,
brace_style: 'collapse',
break_chained_methods: false,
keep_array_indentation: false,
unescape_strings: false,
wrap_line_length: 0,
end_with_newline: true,
comma_first: false,
e4x: false,
indent_empty_lines: false
};
if (!useIndent) {
options.indent_size = 0;
}
if (useSingleQuotes) {
options.end_with_newline = true;
}
let formattedCode = '';
try {
// 根据语言选择合适的格式化方法
switch (language) {
case 'javascript':
formattedCode = js_beautify(code, options);
break;
case 'html':
formattedCode = html_beautify(code, options);
break;
case 'css':
formattedCode = css_beautify(code, options);
break;
case 'json':
// 对于JSON，先尝试解析以验证有效性
try {
const jsonObj = JSON.parse(code);
formattedCode = JSON.stringify(jsonObj, null, useIndent ? indentSize : 0);
} catch (e) {
showNotification('无效的JSON格式', 'error');
return;
}
break;
default:
// 对于其他语言，我们只能做基本的缩进
formattedCode = code;
break;
}
// 如果需要删除注释
if (removeComments && ['javascript', 'css', 'java', 'csharp', 'cpp', 'php'].includes(language)) {
formattedCode = removeCodeComments(formattedCode, language);
}
// 更新输出区域
codeOutput.textContent = formattedCode;
codeOutput.className = `hljs language-${language}`;
hljs.highlightElement(codeOutput);
// 记录使用历史
addToHistory({
type: 'code-formatter',
language: language,
timestamp: new Date().toISOString()
});
// 增加使用计数
incrementUsageCount();
showNotification('代码格式化成功');
} catch (error) {
console.error('格式化错误:', error);
showNotification('格式化过程中出现错误', 'error');
}
}
// 获取语言对应的文件扩展名
function getFileExtension(language) {
const extensions = {
'javascript': 'js',
'html': 'html',
'css': 'css',
'json': 'json',
'xml': 'xml',
'sql': 'sql',
'python': 'py',
'java': 'java',
'csharp': 'cs',
'cpp': 'cpp',
'php': 'php'
};
return extensions[language] || 'txt';
}
// 移除代码中的注释
function removeCodeComments(code, language) {
switch (language) {
case 'javascript':
case 'java':
case 'csharp':
case 'cpp':
// 移除 // 行注释和 /* */ 块注释
return code.replace(/\/\/.*?$/gm, '')
.replace(/\/\*[\s\S]*?\*\//g, '');
case 'css':
// 移除 /* */ 注释
return code.replace(/\/\*[\s\S]*?\*\//g, '');
case 'php':
// 移除 // 行注释, # 行注释和 /* */ 块注释
return code.replace(/\/\/.*?$/gm, '')
.replace(/#.*?$/gm, '')
.replace(/\/\*[\s\S]*?\*\//g, '');
default:
return code;
}
}
// 显示通知
function showNotification(message, type = 'success') {
const notification = document.createElement('div');
notification.className = `fixed bottom-4 right-4 px-4 py-2 rounded-md shadow-lg transition-opacity duration-300 ${
type === 'success' ? 'bg-green-500' : 'bg-red-500'
} text-white max-w-xs z-50`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
// 添加一些示例代码
codeInput.value = `function example() {
const items = [1, 2, 3, 4];
let sum = 0;
// 计算总和
for(let i=0;i<items.length;i++) {
sum += items[i];
}
return {
result: sum,
average: sum / items.length
};
}`;
}

115
dev-tools/code-formatter/styles.css Normal file
View File

@@ -0,0 +1,115 @@
/* 代码格式化工具的自定义样式 */
/* 代码输入框样式 */
#code-input {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
resize: vertical;
tab-size: 4;
}
/* 代码输出容器样式 */
#code-output-container {
position: relative;
}
/* highlight.js 容器样式优化 */
pre {
margin: 0;
padding: 0;
}
#code-output {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
counter-reset: line;
tab-size: 4;
}
/* 滑块样式优化 */
input[type=range] {
height: 6px;
background: #e2e8f0;
outline: none;
border-radius: 5px;
margin: 10px 0;
}
input[type=range]::-webkit-slider-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #1f2937;
cursor: pointer;
-webkit-appearance: none;
}
/* 通知样式 */
.notification {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 16px;
border-radius: 6px;
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 100;
transition: opacity 0.3s ease;
}
.notification.success {
background-color: #10b981;
}
.notification.error {
background-color: #ef4444;
}
/* 复制按钮的悬停效果 */
#copy-btn:hover {
background-color: #f3f4f6;
color: #4b5563;
}
/* 清除按钮的悬停效果 */
#clear-btn:hover {
color: #4b5563;
}
/* 暗色模式样式调整 */
.dark-mode #code-input {
background-color: #1e1e1e;
color: #d4d4d4;
border-color: #3e3e3e;
}
.dark-mode input[type=range] {
background: #4b5563;
}
.dark-mode input[type=range]::-webkit-slider-thumb {
background: #d1d5db;
}
.dark-mode #code-output-container {
border-color: #3e3e3e;
}
.dark-mode #copy-btn:hover,
.dark-mode #download-btn:hover {
background-color: #374151;
}
/* 响应式调整 */
@media (max-width: 768px) {
#code-output {
font-size: 12px;
}
.control-panel button {
padding: 6px 12px;
font-size: 14px;
}
}