|
确实牛，我让Claude用 html 实现了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格转 Markdown 转换器</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.markdown-converter {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
width: 800px;
max-width: 95%;
}
.markdown-converter textarea {
width: 100%;
height: 200px; /* 增加高度 */
margin: 15px 0;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
resize: vertical;
font-size: 14px;
}
.markdown-converter button {
background: #4CAF50;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
width: 100%;
margin: 10px 0;
transition: background-color 0.3s;
font-size: 16px;
}
.markdown-converter button:hover {
background: #45a049;
}
.markdown-converter button:disabled {
background: #cccccc;
cursor: not-allowed;
}
.markdown-converter h3 {
margin: 0 0 15px 0;
font-size: 20px;
}
.button-group {
display: flex;
gap: 10px;
}
.button-group button {
flex: 1;
}
.success-toast {
position: fixed;
bottom: 30px;
right: 30px;
background: #4CAF50;
color: white;
padding: 15px 25px;
border-radius: 6px;
z-index: 10001;
animation: fadeInOut 2s ease-in-out;
font-size: 16px;
}
@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(20px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-20px); }
}
</style>
</head>
<body>
<div class="markdown-converter">
<h3>表格转 Markdown 转换器</h3>
<div class="button-group">
<button id="pasteBtn">从剪贴板粘贴</button>
<button id="clearBtn">清空内容</button>
</div>
<textarea id="tableInput" placeholder="在这里粘贴表格内容..."></textarea>
<button id="convertBtn">转换为Markdown</button>
<h3>转换结果:</h3>
<textarea id="markdownOutput" readonly placeholder="转换后的Markdown内容会显示在这里"></textarea>
<button id="copyBtn">复制到剪贴板</button>
</div>
<script>
function showToast(message) {
const toast = document.createElement('div');
toast.className = 'success-toast';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
document.body.removeChild(toast);
}, 2000);
}
function convertToMarkdown(tableText) {
if (!tableText.trim()) return '';
// 检测分隔符
const firstLine = tableText.trim().split('\n')[0];
const separator = firstLine.includes('\t') ? '\t' : ',';
let rows = tableText.trim().split('\n').map(row => {
if (separator === ',') {
// 处理 CSV 格式（考虑引号内的逗号）
const cells = [];
let cell = '';
let inQuotes = false;
for (let char of row) {
if (char === '"') {
inQuotes = !inQuotes;
} else if (char === ',' && !inQuotes) {
cells.push(cell.trim());
cell = '';
} else {
cell += char;
}
}
cells.push(cell.trim());
return cells;
} else {
// 处理制表符分隔
return row.split(separator).map(cell => cell.trim());
}
});
if (rows.length === 0) return '';
const maxCols = Math.max(...rows.map(row => row.length));
rows.forEach(row => {
while (row.length < maxCols) {
row.push('');
}
});
let markdown = '';
markdown += '| ' + rows[0].join(' | ') + ' |\n';
markdown += '| ' + Array(maxCols).fill('---').join(' | ') + ' |\n';
for (let i = 1; i < rows.length; i++) {
markdown += '| ' + rows[i].join(' | ') + ' |\n';
}
return markdown;
}
document.getElementById('pasteBtn').addEventListener('click', async () => {
try {
const text = await navigator.clipboard.readText();
const tableInput = document.getElementById('tableInput');
tableInput.value = text;
tableInput.dispatchEvent(new Event('input'));
showToast('已粘贴剪贴板内容');
} catch (err) {
showToast('无法访问剪贴板，请使用Ctrl+V粘贴');
}
});
document.getElementById('clearBtn').addEventListener('click', () => {
const tableInput = document.getElementById('tableInput');
tableInput.value = '';
tableInput.dispatchEvent(new Event('input'));
document.getElementById('markdownOutput').value = '';
showToast('已清空所有内容');
});
document.getElementById('convertBtn').addEventListener('click', () => {
const input = document.getElementById('tableInput').value;
const markdown = convertToMarkdown(input);
document.getElementById('markdownOutput').value = markdown;
if (markdown) {
showToast('转换完成');
} else {
showToast('转换失败，请检查输入');
}
});
document.getElementById('copyBtn').addEventListener('click', () => {
const output = document.getElementById('markdownOutput');
output.select();
document.execCommand('copy');
showToast('已复制到剪贴板');
});
// 添加输入框内容变化监听
document.getElementById('tableInput').addEventListener('input', (e) => {
const hasContent = e.target.value.trim().length > 0;
document.getElementById('convertBtn').disabled = !hasContent;
document.getElementById('clearBtn').disabled = !hasContent;
});
// 初始化函数
function init() {
const tableInput = document.getElementById('tableInput');
const convertBtn = document.getElementById('convertBtn');
const clearBtn = document.getElementById('clearBtn');
// 设置初始按钮状态
const hasContent = tableInput.value.trim().length > 0;
convertBtn.disabled = !hasContent;
clearBtn.disabled = !hasContent;
}
// 页面加载完成后执行初始化
window.addEventListener('load', init);
</script>
</body>
</html>
| 
