9a5eb793e8
- 在文档中心和首页添加内嵌 Markdown 渲染器
- 使用 markdown-it 库在前端渲染 Markdown 内容
- 添加模态框展示渲染后的文档
- 重命名 {output_folder} 为 planning-artifacts
- 修改 server.js 支持父目录文件服务
- 文档链接现在可以正确显示格式化的 HTML
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
80 lines
3.7 KiB
HTML
80 lines
3.7 KiB
HTML
<!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>
|
|
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
|
|
.markdown-body h1, .markdown-body h2 { border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5em; margin-bottom: 1em; }
|
|
.markdown-body pre { background: #1f2937; color: #e5e7eb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
|
|
.markdown-body code { background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }
|
|
.markdown-body table { border-collapse: collapse; width: 100%; }
|
|
.markdown-body table th, .markdown-body table td { border: 1px solid #e5e7eb; padding: 0.5rem; }
|
|
.markdown-body table tr:nth-child(even) { background: #f9fafb; }
|
|
.markdown-body blockquote { border-left: 4px solid #3b82f6; padding-left: 1rem; color: #6b7280; }
|
|
.markdown-body a { color: #2563eb; }
|
|
.markdown-body img { max-width: 100%; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
<nav class="bg-white shadow-sm">
|
|
<div class="max-w-5xl mx-auto px-4 py-3 flex items-center gap-4">
|
|
<a href="docs-index.html" class="text-gray-600 hover:text-gray-800">
|
|
<i class="fas fa-arrow-left"></i> 返回
|
|
</a>
|
|
<h1 id="title" class="text-xl font-semibold flex-1">文档加载中...</h1>
|
|
</div>
|
|
</nav>
|
|
<main class="max-w-5xl mx-auto bg-white rounded-lg shadow-sm my-6 p-8">
|
|
<div id="loading" class="text-center py-12">
|
|
<i class="fas fa-spinner fa-spin text-4xl text-blue-500"></i>
|
|
<p class="mt-4 text-gray-600">正在加载文档...</p>
|
|
</div>
|
|
<div id="error" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg"></div>
|
|
<div id="content" class="markdown-body hidden prose max-w-none"></div>
|
|
</main>
|
|
<script>
|
|
const md = window.markdownit({ html: true, linkify: true, breaks: true });
|
|
const params = new URLSearchParams(window.location.search);
|
|
const doc = params.get('doc');
|
|
|
|
if (!doc) {
|
|
showError('未指定文档');
|
|
} else {
|
|
document.getElementById('title').textContent = doc.replace(/\.md$/, '').replace(/-/g, ' ');
|
|
loadDoc(doc);
|
|
}
|
|
|
|
async function loadDoc(doc) {
|
|
const paths = ['/planning-artifacts/' + doc, '/' + doc];
|
|
for (const path of paths) {
|
|
try {
|
|
const res = await fetch(path);
|
|
if (res.ok) {
|
|
const text = await res.text();
|
|
const html = md.render(text);
|
|
document.getElementById('loading').classList.add('hidden');
|
|
document.getElementById('content').classList.remove('hidden');
|
|
document.getElementById('content').innerHTML = html;
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
continue;
|
|
}
|
|
}
|
|
showError('无法加载文档: ' + doc);
|
|
}
|
|
|
|
function showError(msg) {
|
|
document.getElementById('loading').classList.add('hidden');
|
|
document.getElementById('error').classList.remove('hidden');
|
|
document.getElementById('error').textContent = msg;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|